.games-shell { padding-block: var(--space-8) 4rem; color: var(--text-primary); }
/* The crumb owns the gap below the site menu, as on CommuLingo.
   Contain its margin so it cannot collapse through the page shell. */
.games-shell:has(> .games-crumb:first-child) { display: flow-root; padding-block-start: 0; }
.games-shell [hidden] { display: none !important; }
.games-hero { padding: 28px 0 36px; border-bottom: 1px solid var(--border); margin-bottom: 28px; }
.games-hero h1 { font-size: clamp(2rem, 5vw, 3.8rem); line-height: var(--leading-tight); letter-spacing: -.04em; margin: 12px 0 22px; }
.games-hero p { color: var(--text-secondary); line-height: var(--leading-relaxed); }
.games-shell .games-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--text-secondary); }
.games-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.games-shell .game-card { display: flex; flex-direction: column; text-decoration: none; }
.games-shell .game-card:hover { border-color: var(--text-primary); }
.game-card-copy { padding: 26px; }
.game-card-copy h2 { font-size: 1.55rem; margin: 8px 0 14px; }
.game-card-copy p { line-height: var(--leading-relaxed); }
.game-poster { min-height: 285px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; color: #faf2da; }
.game-poster strong { font-size: clamp(1.8rem, 4vw, 2.65rem); line-height: var(--leading-tight); letter-spacing: -.04em; }
.strike-poster { background: #a21e2a; background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, #00000009 20px, #00000009 40px); }
.puzzle-poster { background: #214d2e; }
.poster-label { font-size: 12px; letter-spacing: .12em; }
.poster-bottom { font-weight: 700; padding-top: 16px; border-top: 1px solid #faf2da60; }
.games-note { font-size: .875rem; color: var(--text-secondary); line-height: var(--leading-relaxed); margin: 16px 0; }
/* Context bar under the site menu: the way back to the catalogue on the left, the
   other game on the right. Same geometry as the CommuLingo crumb (34px row,
   bordered, cream text), but it stays in flow — a game page is one screen of
   play, not a long read that needs the way out pinned. */
.games-crumb { --games-crumb-gutter: 10px; padding-inline: var(--games-crumb-gutter); }
.games-crumb-icon { width: 15px; height: 15px; flex: 0 0 auto; }
@media (max-width: 560px) { .games-crumb { --games-crumb-gutter: 8px; } .games-crumb-home span { display: none; } }
.strike-hero { border-bottom: 4px solid #a21e2a; }
.strike-panel { border: 1px solid var(--border); background: var(--bg-surface); padding: 24px; margin-bottom: 20px; min-width: 0; }
.strike-panel h2 { font-size: 1.3rem; margin: 0 0 16px; }
.strike-panel p { line-height: var(--leading-relaxed); }
.strike-demands { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.strike-demands strong { border: 1px solid var(--border); padding: 12px 15px; font-size: .95rem; }
.games-shell button, .games-shell select { font: inherit; min-height: 44px; border: 1px solid var(--border); padding: 12px 16px; color: var(--text-primary); background: var(--bg-canvas); max-width: 100%; }
.games-shell button { cursor: pointer; }
.games-shell button:disabled { opacity: .45; cursor: default; }
.games-shell .strike-primary { background: #a21e2a; color: #fff; border-color: #a21e2a; font-weight: 700; margin: 12px 0; }
.games-shell :is(a, button, select):focus-visible { outline: 3px solid var(--text-primary); outline-offset: 4px; }
.strike-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.strike-stat { padding: 16px; border: 1px solid var(--border); }
.strike-stat span { display: block; font-size: .8rem; color: var(--text-secondary); margin-bottom: 8px; }
.strike-stat strong { font-size: 1.65rem; font-variant-numeric: tabular-nums; }
.strike-stat small { display: block; font-weight: 700; }
.strike-warning { border-bottom: 3px solid #cf222e; }
.strike-layout { display: grid; grid-template-columns: minmax(0, 1fr) 275px; gap: 20px; align-items: start; }
.strike-event { border-left: 4px solid #a21e2a; }
.strike-actions { display: grid; gap: 12px; }
.games-shell .strike-action { text-align: left; padding: 18px; }
.strike-action:hover:enabled { background: var(--bg-surface-hover); border-color: var(--text-secondary); }
.strike-action strong, .strike-action span, .strike-action small { display: block; }
.strike-action strong { font-size: 1.05rem; margin-bottom: 7px; }
.strike-action span, .strike-action small { color: var(--text-secondary); line-height: var(--leading-relaxed); }
.strike-action small { font-size: .8rem; margin-top: 6px; }
.strike-action .strike-action-go { color: var(--text-primary); font-weight: 700; }
.strike-log-panel { max-height: 650px; overflow-y: auto; }
.strike-log { padding-left: 20px; }
.strike-log li { font-size: .8rem; color: var(--text-secondary); line-height: var(--leading-relaxed); padding: 12px 0; border-top: 1px solid var(--border); }
#strikeAnnouncement { font-size: .85rem; }
.strike-offers { display: grid; gap: 16px; }
.strike-offer { padding: 18px; border: 1px solid var(--border); }
.strike-offer h3 { margin: 0 0 10px; }
.strike-reading { margin: 32px 0; padding: 24px 0; border-block: 1px solid var(--border); }
.strike-reading h2 { font-size: 1.2rem; }
.strike-reading p, .strike-rules { color: var(--text-secondary); line-height: var(--leading-relaxed); font-size: .9rem; }
.strike-reading-links { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.strike-rules summary { cursor: pointer; padding: 12px 0; }
@media (max-width: 760px) {
  .strike-layout { grid-template-columns: 1fr; }
  .strike-log-panel { max-height: 250px; }
}
@media (max-width: 560px) {
  .games-catalog { grid-template-columns: 1fr; }
  .games-shell { padding-block: var(--space-5) var(--space-10); }
  .strike-panel { padding: 18px; }
  .strike-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .strike-stat { padding: 12px; }
  .strike-stat strong { font-size: 1.3rem; }
  .strike-hero h1 { font-size: 2.6rem; }
}

/* Catalog: two clear choices before the first mobile scroll. */
.games-home .games-hero { padding: 12px 0 22px; margin-bottom: 20px; }
.games-home .games-hero h1 { margin: 10px 0 14px; }
.games-local-note { color: var(--text-muted); font-size: .8rem; }
.games-home .game-card { overflow: hidden; }
.games-home .game-card-copy h2 a { color: inherit; text-decoration: none; }
/* Give captions their own full-width row when two cards share the screen. */
.game-preview { min-height: 172px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; gap: var(--space-2); padding: var(--space-4); color: var(--clr-cream-light); font-weight: 700; }
.game-preview > span { min-width: 0; max-width: 100%; text-align: center; word-break: keep-all; overflow-wrap: anywhere; line-height: var(--leading-tight); }
.strike-preview { background: #791c27; }
.strike-preview img { height: 100px; width: 112px; object-fit: contain; }
.puzzle-preview { background: #214d2e; }
.civil-war-preview { background: #a21e2a; background-image: repeating-linear-gradient(-45deg, transparent, transparent 18px, #00000012 18px, #00000012 36px); }
.civil-war-preview strong { font-size: 1.6rem; letter-spacing: -.03em; }
.mini-puzzle { display: grid; grid-template-columns: repeat(5, 16px); gap: 2px; padding: 5px; border: 1px solid #faf2da; }
.mini-puzzle i { width: 16px; height: 16px; background: #faf2da; }
.mini-puzzle .ink { background: #111c16; }
.game-card-actions { margin-top: var(--space-4); }
.game-progress { font-size: .8rem; color: var(--text-secondary); margin: 6px 0 0; }
.game-guide { border: 1px solid var(--border); background: var(--bg-surface); padding: 12px 16px; margin: 12px 0 18px; line-height: var(--leading-relaxed); }
.game-guide summary { cursor: pointer; font-weight: 700; }
.strike-objectives { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .85rem; padding: 12px 0; }
.strike-objectives strong { flex-basis: 100%; }
@media (max-width: 560px) {
  .games-home .games-hero { padding: 0 0 16px; margin-bottom: 16px; }
  .games-home .games-hero h1 { font-size: 1.9rem; }
  .games-home .games-hero p { margin: 8px 0; }
  .games-home .games-catalog { gap: 14px; }
  .games-home .game-preview { min-height: 78px; grid-template-columns: 70px minmax(0, 1fr); align-items: center; padding: 8px 14px; gap: 14px; font-size: .8rem; }
  .games-home .game-preview > span { justify-self: start; text-align: left; }
  .games-home .strike-preview img { height: 62px; width: 70px; }
  .games-home .civil-war-preview strong { font-size: 1rem; }
  .games-home .mini-puzzle { grid-template-columns: repeat(5, 9px); gap: 1px; padding: 3px; }
  .games-home .mini-puzzle i { width: 9px; height: 9px; }
  .games-home .game-card-copy { padding: 14px 18px; }
  .games-home .game-card-copy h2 { font-size: 1.2rem; margin: 6px 0; }
  .games-home .game-card-copy p { font-size: .82rem; margin: 4px 0; line-height: var(--leading-normal); }
  .games-home .game-card-copy .games-kicker { font-size: .65rem; letter-spacing: .02em; }
  .games-home .game-card-actions { margin-top: 4px; font-size: .85rem; }
}

/* Keep text readable inside full-width sections without insetting their borders. */
.games-shell > :is(.games-hero, .strike-heading, .nono-heading, .games-note, .strike-rules, .strike-reading, #strikeAnnouncement),
.games-shell > noscript > p,
.strike-daybar,
.strike-objectives,
.strike-command,
.games-shell .strike-history {
  padding-inline: var(--content-inset);
}