@charset "UTF-8";
/* Final game surface. Rules and effect timing remain in the existing modules. */

/* Palette and the table around the game. */
:root {
  color-scheme: dark;
  --paper: #101a18;
  --card: #192824;
  --ink: #eee9da;
  --muted: #a8b3a6;
  --line: #36473e;
  --green: #334d3d;
  --gold: #dfb565;
  --red: #e18a75;
  --radius: 8px;
  --game-brass: #dfb565;
  --game-sage: #abc491;
  --game-page: #eee4ce;
  --game-page-ink: #28352d;
  --game-art: url('/art/ink/hero/seoul-expedition.webp'), url('/city.svg');
}
html { background: #101a18; scroll-padding-block: 20px; }
body {
  min-width: 320px;
  background-color: #101a18;
  background-image: radial-gradient(ellipse at 50% 0, #31443665, transparent 63%),
    repeating-linear-gradient(112deg, #d2d7b303 0 1px, transparent 1px 5px);
  background-size: auto, auto;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.65;
}
::selection { background: #dfb565; color: #18221a; }
a { text-decoration-color: #dfb56577; }
h1, h2, h3 { color: inherit; }
h1 { font-size: clamp(2.1rem, 4vw, 3.45rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1rem; }
.eyebrow { color: #b6c19e; font-size: .66rem; letter-spacing: .14em; }
.caption, .muted { color: var(--muted); }
.caption { line-height: 1.6; }
.row { gap: 10px; }
button, .button {
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid #e2be76;
  border-radius: 5px;
  color: #20271d;
  background: #dfb565;
  box-shadow: 0 2px 0 #080e0b66, inset 0 1px 0 #ffedb653;
  font-size: .84rem;
  line-height: 1.4;
  letter-spacing: -.02em;
  transition: background .16s, border-color .16s, transform .16s, box-shadow .16s;
  touch-action: manipulation;
}
button:hover, .button:hover { background: #dfb565; transform: none; }
.secondary, .sound-toggle {
  background: #1b2a23;
  border-color: #53614d;
  color: #e8e8d7;
  box-shadow: 0 2px 0 #080e0b44, inset 0 1px 0 #ffffff05;
}
.secondary:hover, .sound-toggle:hover { background: #1b2a23; }
.gold, .gold:hover { background: #dfb565; color: #20271d; border-color: #edc57d; }
.danger, .danger:hover { color: #f0a491; background: #542e2533; border-color: #945d4d; }
.small { min-height: 40px; padding: 8px 12px; font-size: .74rem; }
.text-button, .text-button:hover {
  background: transparent; border-color: transparent; color: #d7c9a8; box-shadow: none;
  text-underline-offset: 4px;
}
button:disabled { opacity: .43; box-shadow: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #f1c97c; outline-offset: 4px;
}
input, select, textarea {
  color-scheme: dark; color: #f0eddf; background: #0f1c17;
  border-color: #5c6a55; border-radius: 5px; min-height: 46px;
}
input::placeholder, textarea::placeholder { color: #9aa491; opacity: 1; }
label { font-size: .8rem; color: #c9d0bc; }
select { padding-right: 30px; }

/* Compact chrome; the play table gets the room, not the heading. */
.site-header {
  max-width: 1440px; min-height: 72px; margin: auto; padding: 12px 36px;
  border-color: #61705a36; gap: 24px;
}
.brand { gap: 10px; font-size: .71rem; color: #c7cfb8; letter-spacing: .01em; }
.brand strong { color: #f3ecd8; font-size: 1rem; letter-spacing: -.06em; line-height: 1.3; }
.brand-mark {
  border: 1px solid #c1a264; background: #17251d; color: #dfc28b;
  width: 35px; height: 40px; font-size: 1.45rem;
  box-shadow: inset 0 0 0 3px #17251d, inset 0 0 0 4px #c1a26455;
}
nav { gap: 26px; }
nav a { color: #bbc6b5; font-size: .77rem; min-height: 40px; display: inline-flex; align-items: center; }
nav a[aria-current=page] { color: #f2d291; border-bottom: 2px solid #dfb565; }
.sound-toggle { min-width: 38px; min-height: 36px; padding: 7px 10px; font-size: .67rem; border-color: #56614b; }
.sound-toggle[aria-pressed=true] { color: #f6d58e; background: #3f4930; border-color: #9e925d; }
#app { max-width: 1440px; margin: 0 auto; min-height: calc(100dvh - 160px); padding: 36px 36px 60px; }
.site-footer {
  max-width: 1368px; margin: 0 auto; padding: 20px 0 28px; border-color: #61705a36;
  color: #8e9d88; font-size: .68rem;
}
.page-heading { align-items: center; gap: 16px; margin-bottom: 24px; }
.page-heading h1 { font-size: clamp(1.9rem, 3.3vw, 2.6rem); margin: 7px 0 10px; }
.page-heading p { max-width: 650px; color: #b2bfaa; font-size: .85rem; }
.page-heading .eyebrow { color: #d1b17a; font-size: .63rem; }
.panel { border-color: #4b5c464d; border-radius: 8px; padding: 24px; background: #1b2a23; }
.panel h2 { font-size: 1.25rem; }
.note, .book-note {
  border-color: #b49c5c; color: #c8ceba; background: #293325; border-radius: 0 5px 5px 0;
  font-size: .78rem;
}
.badge {
  background: #24362a; color: #c8d8b6; border-color: #71835a;
  border-radius: 3px; font-size: .62rem; letter-spacing: .04em; padding: 4px 8px;
}
.details { border-color: #44573f; }
.details summary { color: #d7ddcc; font-size: .8rem; gap: 8px; }
.divider { border-color: #52604766; }
.intro-bottom { margin: 22px 0 0; font-size: .72rem; color: #9aa98f; }

/* An entrance to a world, and two doors into play. */
.game-home { position: relative; }
.home-intro { padding: 16px 0 30px; max-width: 760px; }
.home-intro .eyebrow { color: #d0b37b; margin-bottom: 15px; }
.home-intro h1 { margin-bottom: 15px; font-size: clamp(2.4rem, 4.9vw, 4.25rem); line-height: 1.18; text-wrap: balance; }
.home-intro h1 strong { display: inline-block; color: #f2d08e; margin-left: .22em; font-weight: 900; }
.home-intro p:not(.eyebrow) { color: #bdc7b4; margin-bottom: 4px; font-size: .93rem; }
.home-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; color: #9fac8e; font-size: .68rem; margin-top: 13px; }
.home-meta span + span::before { content: "·"; margin-right: 18px; color: #c5ad72; }
.mode-grid { gap: 24px; }
.mode-card {
  isolation: isolate; min-height: 362px; padding: 32px; border: 1px solid #a7a27355;
  border-radius: 9px; overflow: hidden; background: #18231b; box-shadow: 0 15px 35px #0003;
  justify-content: flex-end;
}
.mode-card::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: var(--game-art); background-size: cover; background-position: 18% center;
  opacity: .78; transition: transform .5s;
}
.mode-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #101a1800 0, #101a1844 19%, #101a18e6 65%, #101a18 100%);
}
.mode-card.duel { border-top-color: #bca47780; }
.mode-card.duel::before { background-position: 86% center; }
.mode-card .badge { color: #f0deba; border-color: #d6bf8b77; background: #1b291de0; }
.mode-card h2 { color: #faf1dc; font-size: 2.05rem; margin: 58px 0 10px; }
.mode-card p { color: #d4d8c5; font-size: .85rem; line-height: 1.7; max-width: 380px; margin-bottom: 24px; }
.mode-card .button { margin-top: 0; min-width: 180px; }
.mode-number { right: 25px; top: 18px; color: #f3e6bb; opacity: .3; font-size: 3.5rem; }

/* Scenario jackets: illustration first, real save point close to its action. */
.expedition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.expedition-card {
  min-width: 0; position: relative; isolation: isolate; min-height: 540px;
  background: #1a2921; border: 1px solid #7b8a625e; border-radius: 9px;
  box-shadow: 0 16px 40px #0004; overflow: hidden; display: flex;
}
.expedition-art {
  position: absolute; inset: 0; pointer-events: none; z-index: -2;
  background-image: var(--game-art); background-size: auto 100%; background-repeat: no-repeat;
  background-position: 23% center; transition: transform .6s;
}
.expedition-card.bounty .expedition-art { background-position: 82% center; }
.expedition-card::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #101a1808 0, #101a1800 23%, #111e18c2 45%, #14221cf5 66%, #14221c 100%);
}
.expedition-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; width: 100%; padding: 28px; padding-top: 205px; }
.expedition-kicker { color: #e6ce9d; font-size: .63rem; letter-spacing: .13em; margin-bottom: 10px; font-weight: 700; }
.expedition-body > .badge { background: #17261ec9; color: #e4d5aa; border-color: #c4b07580; }
.expedition-body h2 { font-size: clamp(1.75rem, 2.4vw, 2.2rem); margin: 12px 0 10px; letter-spacing: -.06em; color: #fff2d9; }
.scenario-tagline { color: #d8deca; margin-bottom: 16px; font-size: .86rem; line-height: 1.7; max-width: 440px; }
.scenario-features { display: flex; gap: 7px 12px; flex-wrap: wrap; margin: 0 0 20px; color: #b9c7ac; font-size: .7rem; }
.scenario-features span { display: inline-flex; align-items: center; gap: 6px; }
.scenario-features span::before { content: "◇"; color: #d4b774; font-size: .62rem; }
.save-point { width: 100%; padding: 10px 13px; margin: 0 0 14px; background: #08140e65; border: 1px solid #d5c38e2e; border-radius: 4px; display: flex; gap: 12px; align-items: center; }
.save-point small, .save-point .caption { flex-shrink: 0; color: #a8b998; font-size: .66rem; }
.save-point > span { flex: 0 0 auto; color: #a8b998; font-size: .66rem; }
.save-point strong { color: #e3d4ad; font-size: .78rem; font-weight: 600; overflow-wrap: anywhere; }
.selection-footnote { color: #93a389; font-size: .7rem; text-align: center; margin: 20px 0 0; }
.expedition-actions { display: flex; flex-wrap: wrap; gap: 9px; width: 100%; }
.expedition-actions > :first-child { flex: 1; }
.expedition-actions > button, .expedition-actions > .button { min-height: 46px; }
.expedition-details { width: 100%; border-top: 1px solid #b5bd902b; margin-top: 18px; padding-top: 5px; }
.expedition-details summary { min-height: 38px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: .68rem; color: #a9b59b; }
.expedition-details summary::before { content: "+"; font-size: .9rem; color: #d4b774; }
.expedition-details[open] summary::before { content: "−"; }
.expedition-details summary::-webkit-details-marker { display: none; }
.expedition-details > :not(summary) { color: #b9c4ac; font-size: .74rem; }
.expedition-details .book-note { padding: 10px 12px; background: #2b3526; color: #c5c9b0; }
.expedition-details .text-button { padding: 7px 0; min-height: 40px; color: #d5be8c; }

/* Play shell and compressed survivor resources. */
.is-playing #app { padding-top: 18px; padding-bottom: 32px; }
.is-playing .site-footer { display: none; }
.is-playing .site-header { min-height: 62px; padding-top: 9px; padding-bottom: 9px; }
.game-topbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.game-title { min-width: 0; }
.game-title .eyebrow { font-size: .57rem; margin: 0 0 4px; color: #9faa8d; }
.game-title h1 { font-size: 1.35rem; line-height: 1.3; margin: 0; letter-spacing: -.045em; }
.game-topbar > .row { flex-shrink: 0; }
.game-topbar .small { min-height: 38px; font-size: .68rem; padding: 7px 11px; }
.work-layout.play-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; align-items: start; }
.play-main, .journal-sidebar, .hand-dock, .battle-self, .card-zone { min-width: 0; }
.survivor-hud {
  display: flex; align-items: center; gap: 18px; padding: 12px 15px; margin: 0 0 16px;
  background: linear-gradient(105deg, #253726, #192b22); border: 1px solid #7a895a55;
  border-radius: 7px; box-shadow: inset 0 1px 0 #b4c58a0f; color: #eee9da;
}
.hud-identity { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; font-size: .76rem; color: #cfd7bc; }
.hud-identity strong { display: block; color: #f0e7cb; font-size: .83rem; }
.hud-identity .caption { font-size: .63rem; color: #a5b396; }
.survivor-mark, .enemy-mark { display: inline-grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; border: 1px solid #9d9e655c; border-radius: 3px; background: #5a633626; color: #cfca8e; font: 1rem Georgia, serif; }
.enemy-mark { color: #d8ae87; border-color: #a077525c; background: #6b422d2e; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(57px, 1fr)); margin: 0; gap: 7px; min-width: 0; }
.stats:has(.stat:nth-child(6)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.survivor-hud .stats { flex: 1; }
.stat {
  position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); justify-items: center;
  align-content: center; align-items: center; column-gap: 2px; row-gap: 3px;
  min-width: 0; min-height: 58px; padding: 7px 8px; background: #0817114d;
  border: 1px solid #8b9c6b2b; border-radius: 5px;
}
.stat-icon { color: #b9c394; font-size: .85rem; line-height: 1; }
.stat .value { color: #eee7cd; font-family: inherit; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stats .stat:nth-child(-n+2) .value { color: #eee7cd; }
.stat .label { color: #b5c0a9; font-size: .59rem; line-height: 1.2; grid-column: 1 / -1; white-space: nowrap; }
.stat[data-stat=health] .stat-icon, .stat[data-stat=health] .value { color: #efaa91; }
.stat[data-stat=mental] .stat-icon, .stat[data-stat=mental] .value { color: #b5c7de; }
.stat[data-stat=food] { border-color: #d9b36c55; background: #b99c5410; }
.stat[data-stat=food] .stat-icon, .stat[data-stat=food] .value { color: #efd18b; }
.stat[data-stat=feathers] .stat-icon, .stat[data-stat=feathers] .value { color: #c7d5a4; }
.stats.is-acting { outline-color: #e9bd69; outline-offset: 4px; }

/* Paper story leaf, then the decision. Never hide choices behind hover. */
.story-scene {
  --ink: #28352d; --muted: #626c59; --line: #c8bfa5;
  padding: 28px 32px; background-color: #eee4ce;
  background-image: radial-gradient(#443c290b .7px, transparent .7px), linear-gradient(115deg, #fff7e4, #e9dec5);
  background-size: 5px 5px, auto;
  color: #28352d; border: 1px solid #b5ab8b; border-top: 3px solid #b79457;
  border-radius: 6px; margin-bottom: 18px; box-shadow: 0 8px 25px #0002;
}
.chapter-label, .story-scene > .eyebrow { color: #8b6e40; letter-spacing: .12em; font-size: .63rem; font-weight: 800; margin-bottom: 10px; }
.story-scene h2 { color: #233328; font-size: 1.65rem; margin: 0 0 18px; line-height: 1.4; }
.story-text { color: #3b4435; font-size: .95rem; line-height: 1.95; margin-bottom: 15px; }
.story-text:last-child { margin-bottom: 0; }
.story-scene .next-step { color: #4c5b39; background: #dcdcc0; border-color: #889267; margin: 20px 0 16px; }
.story-scene .next-step::before { color: #68734b; }
.story-scene .survivor-hud { margin-top: 20px; }
.story-choices { gap: 10px; margin-top: 24px; }
.story-choice { justify-content: flex-start; text-align: left; padding: 14px 18px; min-height: 50px; font-size: .85rem; color: #f1ebd6; background: #324934; border-color: #4a5f3f; box-shadow: 0 2px 0 #18231833; }
.story-choice:hover { color: #f1ebd6; background: #324934; }
.story-choice::before { color: #e7c482; opacity: 1; }
.story-scene .story-choices .caption { color: #716e59; font-size: .73rem; padding-left: 7px; }
.story-scene.ending { border-color: #c4a269; box-shadow: 0 0 0 3px #b99c4925, 0 8px 30px #0003; }
.story-scene.combat-summary { padding: 13px 17px; border-top-width: 1px; margin-bottom: 14px; background: #26342a; background-image: none; color: #d4dcc3; border-color: #5a6b484d; box-shadow: none; }
.story-scene.combat-summary .chapter-label { color: #b6a575; font-size: .57rem; margin: 0 0 3px; }
.story-scene.combat-summary h2 { color: #e9e8d2; font-size: 1rem; margin: 0 0 5px; }
.story-scene.combat-summary .story-text { color: #b0bfa1; font-size: .75rem; line-height: 1.65; margin: 0 0 5px; }
.story-scene.combat-summary details { border-color: #53643f; }
.story-scene.combat-summary summary { color: #bdc7ad; font-size: .72rem; min-height: 36px; cursor: pointer; }
.decision {
  --ink: #eee9da; --muted: #c3c5ad; --line: #70683f;
  margin: 16px 0; padding: 18px 20px; color: #eee9da; background: #3a3d27;
  border: 1px solid #a28d50; border-left: 4px solid #e4bb68; border-radius: 5px;
  box-shadow: 0 5px 18px #0002;
}
.decision h2 { color: #f5e4b6; font-size: 1.15rem; margin-bottom: 10px; }
.decision p { color: #cdd1ba; }
.decision-options { gap: 8px; margin: 13px 0 16px; }
.decision-option { color: #dedfcb; background: #232c1ee0; border: 1px solid #8f93614d; border-radius: 4px; padding: 13px; line-height: 1.6; }
.decision-option:active { background: #41482b; }
.decision-option:has(input:checked) { border-color: #e7c079; box-shadow: inset 0 0 0 1px #e7c079; background: #4b5032; }
.decision-option:has(input:checked) strong { color: #ffe7af; }
.decision-option input { accent-color: #eac274; color-scheme: dark; }
.option-description { color: #bec6a9; font-size: .75rem; }
.decision.wait { background: #23362a; border-color: #6f8561; color: #c4d0b5; }
.decision.wait h2 { color: #dce5ce; }

/* The battlefield is one surface; zones are etched into it. */
.table-area.battle-table {
  padding: 18px; background: radial-gradient(ellipse at center, #34473142, transparent 75%), #182820;
  border: 1px solid #6f80504d; border-radius: 8px; box-shadow: inset 0 1px 0 #bfc6950d, 0 8px 30px #0002;
}
.turn-strip {
  padding: 11px 15px; margin-bottom: 16px; color: #eedbb1; background: #3c4a2b;
  border-left: 3px solid #dfb565; border-radius: 3px; font-size: .76rem; line-height: 1.4;
}
.turn-strip strong { color: #f4e3b9; font-size: .82rem; }
.turn-strip > span { color: #bec8a3; font-size: .72rem; }
.turn-strip.wait { color: #aab7a2; background: #27392d; border-left-color: #778369; }
.turn-strip.wait strong { color: #cad4ba; }
.enemy-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-bottom: 14px; }
.enemy-panel {
  position: relative; padding: 13px; border: 1px solid #996b514d; border-radius: 6px;
  background: linear-gradient(110deg, #503a2c33, #1a251e); box-shadow: inset 0 2px 0 #985b342b;
}
.enemy-name, .enemy-panel > h3 { display: flex; align-items: center; gap: 9px; color: #e0c0a3; font-size: .88rem; margin-bottom: 10px; }
.enemy-name h3 { font-size: inherit; color: inherit; margin: 0; }
.enemy-avatar { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid #9a745455; border-radius: 50%; background: #5b3a292e; color: #dcb586; font-size: 1rem; }
.enemy-panel .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: 5px; }
.enemy-panel .stat { min-width: 0; min-height: 49px; padding: 6px; background: #160f0940; border-color: #b5a38225; }
.enemy-panel .stat .value { font-size: 1.16rem; }
.enemy-panel .caption { color: #b0b69a; font-size: .67rem; margin: 8px 0 0; }
.enemy-panel .card-zone { margin-top: 12px; }
.battle-self { border-top: 1px solid #84915b33; padding-top: 14px; }
.battle-self .survivor-hud, .player-area .survivor-hud { margin-bottom: 10px; }
.zone-heading { margin: 11px 0 6px; align-items: baseline; }
.zone-heading h3 { color: #c6d0b4; font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.zone-heading .caption { color: #8fa482; font-size: .66rem; }
.empty { min-height: 62px; padding: 13px; border: 1px dashed #8c9a664d; border-radius: 5px; color: #91a17f; background: #12211955; font-size: .73rem; }
.card-zone[data-zone=board] .empty, .card-zone[data-zone^=enemy-board] .empty { min-height: 58px; }
.opponent-area { padding-bottom: 4px; }
.opponent-area > .row h3, .player-area > .row h3 { font-size: .85rem; margin-bottom: 0; }
.opponent-area > .row { margin-bottom: 10px; }
.opponent-area > .row .caption, .player-area > .row .caption { font-size: .66rem; margin-bottom: 0; }
.opponent-hand { justify-content: center; gap: 0; padding: 11px 5px 8px; min-height: 0; }
.opponent-hand .card-back {
  width: 39px; min-width: 39px; height: 54px; margin-left: -7px; font-size: .68rem;
  border: 2px double #8b9561; color: #c4bf8a; box-shadow: 0 3px 5px #0003; border-radius: 3px;
  background: repeating-linear-gradient(45deg, #324735, #324735 3px, #273c2d 3px, #273c2d 5px);
}
.opponent-hand .card-back:first-child { margin-left: 0; }
.table-divider { display: flex; align-items: center; gap: 14px; color: #a3925c; font: 700 .65rem Georgia, serif; letter-spacing: .15em; margin: 9px 0 14px; }
.table-divider::before, .table-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #9c9a5c55); }
.table-divider::after { transform: rotate(180deg); }
.battle-map { margin: 14px 0; }
.battle-map h3 { font-size: .75rem; color: #acbc99; margin-bottom: 8px; }
.map-cells { gap: 4px; max-width: 100%; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.map-cell { background: #101f18; color: #b4c3a1; border-color: #687b4c55; min-height: 44px; border-radius: 3px; padding: 6px; }
.map-cell.active { border: 1px solid #ccb36d; background: #5e5e2b66; box-shadow: inset 0 0 0 1px #ccb36d; }
.map-cell .caption { color: #c7cfae; font-size: .66rem; }

/* Cards: cost, identity and useful text remain visible in a small physical object. */
.card-row { gap: 10px; min-height: 0; padding: 8px 4px 13px; scrollbar-color: #7a8d5c #102018; scrollbar-width: thin; }
.card-row::-webkit-scrollbar { height: 6px; }
.card-row::-webkit-scrollbar-track { background: #102018; border-radius: 4px; }
.card-row::-webkit-scrollbar-thumb { background: #6e8054; border-radius: 4px; }
.playing-card {
  --ink: #27392b; --muted: #66705a; --line: #bdbca2; --green: #3e573b;
  --card-tint: #76835e; --card-wash: #b4b99a; --card-symbol-ink: #506345;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  width: 148px; min-width: 148px; min-height: 230px; padding: 9px;
  border: 1px solid #b3b492; border-radius: 7px; color: #26382a;
  background: linear-gradient(130deg, #f7efdb, #e8dfc4); box-shadow: 0 4px 0 #070f09, 0 7px 13px #0003, inset 0 0 0 3px #f8f1dc;
  font-size: .74rem; line-height: 1.4; overflow: hidden;
}
.playing-card[data-kind^="인물"] { --card-tint: #997e56; --card-wash: #c8b28b; --card-symbol-ink: #705a37; }
.playing-card[data-kind^="야수"] { --card-tint: #9a755e; --card-wash: #c5a28a; --card-symbol-ink: #744c34; }
.playing-card[data-kind^="식물"] { --card-tint: #77905b; --card-wash: #bccba0; --card-symbol-ink: #4e6935; }
.playing-card[data-kind^="AI"] { --card-tint: #6c8990; --card-wash: #a6bfc0; --card-symbol-ink: #41656b; }
.playing-card[data-kind^="능력"] { --card-tint: #938b61; --card-wash: #c3be94; --card-symbol-ink: #716c3e; }
.playing-card[data-kind^="세력"] { --card-tint: #8b796e; --card-wash: #c2afa0; --card-symbol-ink: #685046; }
.playing-card:hover { color: #26382a; background: linear-gradient(130deg, #f7efdb, #e8dfc4); transform: none; box-shadow: 0 4px 0 #070f09, 0 7px 13px #0003, inset 0 0 0 3px #f8f1dc; }
.playing-card .card-top { color: #697159; font-size: .55rem; min-height: 24px; line-height: 1; letter-spacing: .03em; }
.playing-card .cost { flex: 0 0 26px; width: 26px; height: 26px; color: #f3e6bc; background: #304c35; border: 1px solid #708552; box-shadow: 0 1px 0 #fff8db; font-family: inherit; font-weight: 800; font-size: .85rem; }
.playing-card strong { color: #26362a; font-size: .84rem; margin: 5px 0 7px; line-height: 1.35; letter-spacing: -.04em; }
.playing-card .card-art {
  display: grid; place-items: center; position: relative; height: 48px; min-height: 48px; margin: 0 0 8px;
  border: 1px solid #26342c25; border-radius: 3px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 70%, #f0eed87a, transparent 64%),
    repeating-linear-gradient(145deg, #ffffff00 0 6px, #37432d07 6px 7px), var(--card-wash);
}
.playing-card .card-art::before, .playing-card .card-art::after { content: ""; position: absolute; width: 62px; height: 62px; border: 1px solid #f8f0c980; transform: rotate(45deg); pointer-events: none; }
.playing-card .card-art::after { width: 48px; height: 48px; border-color: #334c3233; }
.playing-card .card-symbol { z-index: 1; flex: none; font-family: Georgia, serif; font-size: 2.05rem; line-height: 1; color: var(--card-symbol-ink); text-shadow: 0 1px 0 #f7efc566; }
.playing-card .card-effect {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: .63rem; font-weight: 400; line-height: 1.5; color: #4b5743;
  white-space: pre-line; margin: 0 0 7px; min-height: 29px;
}
.playing-card .card-sub { color: #63704f; font-size: .57rem; font-weight: 700; border-color: #afb39499; padding-top: 5px; margin-top: auto; }
.playing-card .markers { color: #796141; font-size: .58rem; margin-top: 4px; line-height: 1.3; }
.playing-card .card-hint { color: #f2eed4; background: #3d623f; border: 1px solid #547546; font-size: .57rem; margin-top: 6px; padding: 3px 4px; border-radius: 3px; letter-spacing: 0; }
.playing-card .card-hint.locked { color: #756b51; background: #c3b89433; border-color: #a29a78; font-size: .54rem; }
.playing-card.playable { background: linear-gradient(130deg, #fff7df, #e9e5ca); border-color: #c6db8a; box-shadow: 0 0 0 1px #99bc61, 0 0 13px #a5c96820, 0 4px 0 #070f09, inset 0 0 0 3px #faf5df; }
.playing-card.playable:hover { box-shadow: 0 0 0 1px #99bc61, 0 0 13px #a5c96820, 0 4px 0 #070f09, inset 0 0 0 3px #faf5df; }
.playing-card.blocked { opacity: .84; }
.playing-card.exhausted { background: linear-gradient(130deg, #cdcfb9, #b9c0a6); border-color: #8c9b79; border-style: solid; opacity: .8; box-shadow: 0 2px 0 #071009, inset 0 0 0 3px #cdd3ba; }
.playing-card.exhausted .card-art { filter: saturate(.45); }
.playing-card.exhausted .markers { color: #5e6d50; }
.playing-card:focus-visible { outline: 3px solid #f6cc7b; outline-offset: 4px; }
.playing-card:active, .playing-card.is-tapped { background: #f7edcf; transform: translateY(2px) scale(.985); box-shadow: 0 1px 0 #071009, inset 0 0 0 3px #f4edd3; }
.card-zone[data-zone=board] .playing-card, .card-zone[data-zone^=enemy-board] .playing-card { width: 120px; min-width: 120px; min-height: 160px; padding: 8px; }
.card-zone[data-zone=board] .playing-card .card-art, .card-zone[data-zone^=enemy-board] .playing-card .card-art { height: 31px; min-height: 31px; margin-bottom: 6px; }
.card-zone[data-zone=board] .playing-card .card-symbol, .card-zone[data-zone^=enemy-board] .playing-card .card-symbol { font-size: 1.5rem; }
.card-zone[data-zone=board] .playing-card .card-effect, .card-zone[data-zone^=enemy-board] .playing-card .card-effect { display: none; }
.card-zone[data-zone=board] .playing-card strong, .card-zone[data-zone^=enemy-board] .playing-card strong { font-size: .77rem; }
.card-zone[data-zone=board] .playing-card .cost, .card-zone[data-zone^=enemy-board] .playing-card .cost { width: 22px; height: 22px; flex-basis: 22px; font-size: .72rem; }

/* Hand and actions stay together. Sticky only within the hand container. */
.hand-dock { margin-top: 16px; padding: 12px 14px 0; border: 1px solid #88975c42; border-radius: 7px; background: #0e1d16; }
.hand-dock > .card-zone > .zone-heading { margin-top: 0; }
.hand-dock > .card-zone > .zone-heading h3 { color: #e4d8ae; }
.hand-dock .card-row { padding-bottom: 16px; }
.action-dock {
  position: sticky; bottom: 0; z-index: 8; margin: 4px -14px 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: #1d2d22;
  border-top: 1px solid #a0a56a55; border-radius: 0 0 7px 7px; box-shadow: 0 -5px 18px #07110c55;
}
.next-step { margin: 0 0 10px; padding: 7px 10px; border-left: 2px solid #c8b16b; border-radius: 0 3px 3px 0; color: #d5dbbf; background: #48513638; font-size: .75rem; line-height: 1.55; }
.next-step::before { color: #d5ba76; font-size: .57rem; letter-spacing: .03em; }
.action-dock .next-step { background: transparent; padding: 0 0 0 9px; margin-bottom: 9px; }
.toolbar { margin: 0; padding: 0; border: 0; gap: 8px; }
.action-control { min-width: 128px; flex: 1; }
.action-control button { min-height: 45px; font-size: .8rem; }
.action-control .caption { font-size: .64rem; color: #9eac90; margin: 5px 0 0; line-height: 1.45; }
.game-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 13px 0 0; }
.game-tools .caption { margin: 0 auto 0 0; font-size: .65rem; color: #98a88b; }
.game-tools .small { font-size: .65rem; padding: 7px 10px; min-height: 38px; border-color: #4d5d40; color: #bdc9ad; }
.game-tools .secondary { background: #122219; }

/* Journal is available when needed, never a wall of competing panels. */
.work-layout aside.journal-sidebar { display: block; }
.journal-sidebar { color: #b9c5aa; }
.journal-section { border: 1px solid #67744d45; background: #17261e; border-radius: 5px; margin: 0 0 10px; padding: 0; overflow: hidden; }
.journal-section > summary { cursor: pointer; min-height: 47px; padding: 12px 14px; color: #cdd5b9; font-size: .76rem; font-weight: 700; }
.journal-section > summary::marker { color: #9bad7a; font-size: .65rem; }
.journal-section[open] > summary { border-bottom: 1px solid #66734a3b; background: #25341f44; margin-bottom: 12px; }
.journal-section > :not(summary) { margin-left: 14px; margin-right: 14px; }
.journal-section > :last-child { margin-bottom: 14px; }
.journal-section .record-values { gap: 8px; font-size: .73rem; }
.journal-section .record-values dd { color: #e5d9ad; font-variant-numeric: tabular-nums; }
.journal-section .caption { color: #a6b695; font-size: .68rem; }
.journal-section .details { padding-top: 7px; margin-top: 10px; }
.journal-section .details summary { font-size: .72rem; min-height: 38px; }
.journal-section .small { min-height: 40px; padding: 7px 10px; font-size: .67rem; }
.journal-section .log { max-height: 260px; font-size: .7rem; line-height: 1.65; }
.journal-content { min-width: 0; }
.journal-content > :last-child { margin-bottom: 0; }
.save-indicator { display: flex; align-items: center; gap: 7px; color: #95aa83; font-size: .65rem; margin: 15px 3px; }
.save-indicator::before { content: "✓"; color: #c1cc90; font-size: .75rem; }
.last-event { padding: 12px 14px; margin-bottom: 12px; background: #293622; border-left: 2px solid #a29f65; border-radius: 0 4px 4px 0; }
.last-event .eyebrow { color: #c6b87f; margin: 0 0 5px; font-size: .56rem; }
.last-event .caption { color: #c5cfb3; margin-bottom: 0; font-size: .71rem; }
.log li { border-color: #71805430; color: #bac7a9; padding: 9px 0; }
.log span { color: #839972; font-size: .6rem; }
.log li.is-new { color: #e3dfb7; background: #43492c; box-shadow: inset 3px 0 0 #cdb16b; }
.record-notes { color: #dce3cb; font-size: .76rem; min-height: 95px; }
.skill-info { font-size: .73rem; }
.condition-list .badge { font-size: .6rem; }

/* Lobby, archives and the card inspection sheet. */
body[data-screen=duel] .form-grid > .panel { background: linear-gradient(140deg, #2d3b29, #192b21); border-color: #8b93614d; box-shadow: 0 12px 30px #0002; padding: 28px; }
body[data-screen=duel] .form-grid > .panel h2 { color: #eddcb5; font-size: 1.35rem; }
body[data-screen=duel] .form-grid > .panel label { color: #bfcaaa; }
body[data-screen=duel] .form-grid > .panel > button { margin-top: 5px; }
body[data-screen=duel] .form-grid { margin-bottom: 20px; }
.deck-preview { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid #8c96604d; border-radius: 5px; background: #0d1d1580; }
.deck-emblem { display: grid; place-items: center; color: #c6b879; font-size: 1.6rem; width: 33px; flex: 0 0 33px; }
.deck-preview > div { min-width: 0; flex: 1; }
.deck-preview strong { display: block; color: #dbe1c6; font-size: .78rem; line-height: 1.45; }
.deck-preview .caption { color: #a4b393; font-size: .65rem; margin: 3px 0 0; }
.deck-preview .small { min-height: 40px; font-size: .64rem; padding: 7px 10px; flex-shrink: 0; }
.room-code { color: #f0cb7f; background: #0f1d1680; padding: 18px 12px; border: 1px dashed #b49e5f77; border-radius: 5px; letter-spacing: .22em; }
.connection { color: #b9cca7; font-size: .65rem; }
.connection::before { background: #a3c282; box-shadow: 0 0 7px #a3c28244; }
.connection.offline { color: #e3a18b; }
.connection.offline::before { background: #e3a18b; }
.library-controls { max-width: 700px; margin: 18px 0 14px; }
.library-controls input, .library-controls select { background: #16271c; color: #eee7d2; border-color: #60724b; }
.library-grid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 18px 16px; margin-top: 18px; }
.library-grid .playing-card { width: 100%; min-width: 0; min-height: 239px; }
.library-grid .playing-card .card-art { height: 65px; }
.library-grid .playing-card .card-symbol { font-size: 2.7rem; }
.library-grid .playing-card .card-effect { min-height: 43px; color: #4d5942; font-size: .65rem; }
dialog {
  --ink: #29372a; --muted: #686d58; --line: #c4b99c;
  color-scheme: light; color: #29372a; background: linear-gradient(135deg, #f4ecd7, #e6d9ba);
  border: 1px solid #a49976; border-top: 4px solid #b99a5c; border-radius: 8px;
  width: min(94vw, 510px); padding: 24px; box-shadow: 0 24px 90px #0008;
}
dialog::backdrop { background: #08130dd6; backdrop-filter: blur(5px); }
dialog h2 { color: #273b2a; font-size: 1.7rem; margin: 12px 0 9px; }
dialog .eyebrow { color: #79683d; }
dialog .caption, dialog .muted { color: #68694f; }
dialog .effect { border-color: #bfb493; font-size: .95rem; line-height: 1.9; }
dialog .secondary { color: #45513a; border-color: #9a9c78; background: #dadcc0; }
dialog .danger { color: #9c4d36; background: #e6c8aa; border-color: #b78660; }
dialog .close { min-width: 44px; min-height: 40px; padding: 7px 10px; font-size: .72rem; }
.dialog-cost { width: 50px; height: 50px; flex-basis: 50px; background: #354f37; color: #f2e6bc; border: 1px solid #6f8051; box-shadow: 0 2px 0 #6e75513d; }
.dialog-cost strong { font-family: inherit; font-weight: 800; font-size: 1.35rem; }
.dialog-tags .badge { color: #5b6647; background: #e5dfc4; border-color: #94976f; }
.dialog-tags .badge.keyword { color: #785e29; border-color: #b29a59; background: #e9d9ab; }
.dialog-actions { border-color: #bfb493; }
.dialog-note { color: #646c50; }
#toast { z-index: 30; color: #f4e5bd; background: #263b29; border: 1px solid #a69a5d88; font-size: .8rem; box-shadow: 0 5px 30px #0006; }
.proposal { background: #504d2d; border-color: #ad9657; color: #e4debc; border-radius: 5px; }
.form-error { color: #eeaa91; }
.tabbar a { border-radius: 4px; }
.tabs-active { background: #435337; color: #ead9a6; }
progress { accent-color: #c6b16e; }

/* Effect labels keep their contrast on the new dark table. */
.fx-delta { text-shadow: 0 2px 2px #09130d, 0 0 9px #09130df2; }
.fx-delta.tone-damage { color: #ffb19a; }
.fx-delta.tone-heal { color: #c1ec9d; }
.fx-delta.tone-gain { color: #ffe0a2; }
.fx-delta.tone-cost { color: #e3d5b7; }
.fx-note { color: #f0e5c9; background: #203425f5; border-color: #a6bd76; box-shadow: 0 4px 18px #0005; }
.stat.is-bumped .value { color: #ffe1a3; }

/* Hover is decoration only; every action works by tap and keyboard. */
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover, .button:hover { background: #edc77d; border-color: #f5d498; transform: translateY(-1px); }
  .secondary:not(:disabled):hover, .sound-toggle:hover { background: #31432a; border-color: #a3ad77; color: #f1ead2; }
  .danger:not(:disabled):hover { background: #694232; border-color: #cc9476; color: #ffceb5; }
  .text-button:not(:disabled):hover { background: #6f74411c; border-color: transparent; color: #f5dba6; }
  .story-choice:not(:disabled):hover { background: #445d3d; border-color: #6e834e; color: #fff3d6; }
  .playing-card:not(:disabled):hover, .library-grid .playing-card:hover { background: linear-gradient(130deg, #fff9e8, #f1e7cc); border-color: #e4d79f; color: #26382a; transform: translateY(-4px); box-shadow: 0 7px 0 #070f09, 0 12px 20px #0004, inset 0 0 0 3px #faf5df; }
  .playing-card.playable:hover { border-color: #d3ec99; box-shadow: 0 0 0 1px #b5d777, 0 0 20px #b6da7044, 0 7px 0 #070f09, inset 0 0 0 3px #faf5df; }
  .mode-card:hover { transform: translateY(-3px); box-shadow: 0 20px 35px #0004; border-color: #acac777a; }
  .mode-card:hover::before, .expedition-card:hover .expedition-art { transform: scale(1.025); }
  .decision-option:hover { border-color: #b4a96a; background: #3b452b; }
  .expedition-details summary:hover, .journal-section > summary:hover { color: #f1dbaa; }
  dialog .secondary:not(:disabled):hover { background: #cdd2ae; color: #334528; border-color: #7c8b59; }
  dialog .danger:not(:disabled):hover { background: #d5b18c; color: #7e3825; border-color: #a57550; }
}

@media (max-width: 1100px) {
  .site-header { padding-inline: 25px; }
  #app { padding-inline: 25px; }
  .site-footer { margin-inline: 25px; }
  .work-layout.play-layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; }
  .survivor-hud { display: block; }
  .hud-identity { display: flex; justify-content: flex-start; align-items: center; gap: 8px; margin-bottom: 8px; }
  .hud-identity strong { font-size: .78rem; }
  .stat { padding: 6px; }
  .expedition-body { padding-inline: 23px; }
}
@media (max-width: 900px) {
  .work-layout.play-layout { grid-template-columns: 1fr; }
  .work-layout aside.journal-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
  .journal-sidebar .journal-section { margin: 0; }
  .journal-sidebar > :first-child { grid-column: auto; }
  .expedition-grid { gap: 18px; }
  .expedition-card { min-height: 520px; }
  .expedition-body { padding-top: 180px; }
  .mode-card { min-height: 360px; padding: 25px; }
  .mode-card h2 { font-size: 1.75rem; }
  .survivor-hud { display: flex; }
  .hud-identity { display: flex; margin-bottom: 0; }
  .home-intro h1 { font-size: 3.05rem; }
}
@media (max-width: 760px) {
  .site-header { padding-inline: 20px; gap: 15px; }
  nav { gap: 18px; }
  #app { padding: 28px 20px 40px; }
  .site-footer { margin-inline: 20px; }
  .expedition-grid { grid-template-columns: 1fr; gap: 20px; }
  .expedition-card { min-height: 465px; }
  .expedition-body { padding: 195px 26px 23px; }
  .expedition-art { background-size: cover; background-position: 24% center; }
  .expedition-card.bounty .expedition-art { background-position: 81% center; }
  .expedition-card::after { background: linear-gradient(180deg, #101a1800 0, #101a1800 19%, #111e18bf 42%, #14221cf5 63%, #14221c 100%); }
  .expedition-body h2 { font-size: 2rem; }
  .scenario-tagline { max-width: 100%; }
  .mode-grid { grid-template-columns: 1fr; gap: 18px; }
  .mode-card { min-height: 330px; }
  .mode-card h2 { margin-top: 55px; font-size: 1.85rem; }
  .mode-card p { max-width: 360px; }
  .game-title h1 { font-size: 1.2rem; }
  .game-topbar { gap: 10px; }
  .game-topbar > .row { gap: 7px; }
  .game-topbar .small { font-size: .64rem; padding: 7px 9px; }
  .story-scene { padding: 24px; }
  .form-grid { gap: 16px; }
  body[data-screen=duel] .form-grid > .panel { padding: 22px; }
}
@media (max-width: 600px) {
  body { font-size: 13px; }
  .site-header { padding: 13px 16px 9px; min-height: 100px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
  .brand { font-size: .69rem; gap: 9px; }
  .brand > span:last-child { display: flex; align-items: baseline; gap: 6px; }
  .brand strong { display: inline; margin-left: 0; font-size: .93rem; }
  .brand-mark { width: 29px; height: 32px; font-size: 1.2rem; }
  nav { width: 100%; gap: 10px; justify-content: space-between; }
  nav a { font-size: .75rem; min-height: 40px; }
  .sound-toggle { min-width: 38px; min-height: 36px; padding: 7px 9px; }
  #app { padding: 24px 16px 36px; margin: 0; }
  .site-footer { margin-inline: 16px; padding-block: 19px max(22px, env(safe-area-inset-bottom)); flex-direction: column; gap: 8px; font-size: .63rem; }
  .page-heading { margin-bottom: 20px; }
  .page-heading h1 { font-size: 1.85rem; margin: 7px 0 9px; line-height: 1.3; }
  .page-heading p { font-size: .77rem; line-height: 1.75; }
  .page-heading .row { margin-top: 12px; }
  .home-intro { padding: 5px 0 25px; }
  .home-intro .eyebrow { font-size: .57rem; margin-bottom: 13px; }
  .home-intro h1 { font-size: 2.5rem; line-height: 1.22; }
  .home-intro p:not(.eyebrow) { font-size: .81rem; }
  .mode-card { min-height: 327px; padding: 23px; border-radius: 7px; }
  .mode-card h2 { margin-top: 43px; font-size: 1.8rem; }
  .mode-card p { font-size: .79rem; line-height: 1.75; margin-bottom: 19px; }
  .mode-card .button { min-height: 46px; width: 100%; }
  .mode-number { font-size: 2.8rem; }
  .intro-bottom { gap: 5px; font-size: .66rem; }
  .expedition-grid { gap: 18px; }
  .expedition-card { min-height: 475px; border-radius: 7px; }
  .expedition-art { background-size: auto 100%; }
  .expedition-body { padding: 183px 20px 18px; }
  .expedition-body h2 { font-size: 1.85rem; margin: 10px 0; }
  .expedition-kicker { font-size: .57rem; }
  .scenario-tagline { font-size: .79rem; margin-bottom: 13px; }
  .scenario-features { font-size: .64rem; gap: 6px 11px; margin-bottom: 16px; }
  .save-point { padding: 9px 10px; gap: 10px; margin-bottom: 12px; }
  .save-point strong { font-size: .72rem; }
  .save-point small, .save-point > span { font-size: .6rem; }
  .expedition-actions > button { font-size: .77rem; padding: 10px 14px; }
  .expedition-details { margin-top: 14px; }
  .expedition-details summary { min-height: 38px; font-size: .65rem; }
  .is-playing .site-header { padding: 8px 14px; min-height: 57px; flex-wrap: nowrap; gap: 14px; }
  .is-playing .brand > span:last-child { display: none; }
  .is-playing .brand-mark { width: 28px; height: 32px; }
  .is-playing nav { flex: 1; width: auto; gap: 8px; }
  .is-playing nav a { font-size: .68rem; }
  .is-playing .sound-toggle { min-width: 34px; min-height: 36px; padding: 6px 8px; }
  .is-playing #app { padding: 14px 12px 28px; }
  .game-topbar { align-items: flex-start; margin-bottom: 14px; gap: 10px; }
  .game-title h1 { font-size: 1.02rem; }
  .game-title .eyebrow { font-size: .5rem; letter-spacing: .08em; margin-bottom: 4px; }
  .game-topbar > .row { justify-content: flex-end; max-width: 51%; gap: 5px; }
  .game-topbar .small { min-height: 36px; font-size: .58rem; padding: 7px 8px; }
  .game-topbar .connection { width: 100%; justify-content: flex-end; font-size: .55rem; }
  .work-layout.play-layout { gap: 14px; }
  .survivor-hud { display: block; padding: 10px; margin-bottom: 12px; gap: 8px; border-radius: 5px; }
  .hud-identity { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 7px; gap: 7px; font-size: .7rem; }
  .hud-identity strong { font-size: .74rem; }
  .hud-identity .caption { font-size: .58rem; }
  .survivor-mark { width: 22px; height: 22px; flex-basis: 22px; font-size: .78rem; }
  .enemy-mark { width: 25px; height: 25px; flex-basis: 25px; font-size: .82rem; }
  .stats, .stats:has(.stat:nth-child(6)) { grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); gap: 4px; }
  .stat { grid-template-columns: 10px minmax(0, 1fr); gap: 3px 1px; min-height: 53px; padding: 6px 3px; }
  .stat-icon { font-size: .65rem; }
  .stat .value { font-size: 1.14rem; }
  .stat .label { font-size: .5rem; letter-spacing: -.04em; }
  .story-scene { padding: 21px 18px; border-radius: 5px; margin-bottom: 14px; }
  .story-scene h2 { font-size: 1.35rem; margin-bottom: 15px; }
  .chapter-label, .story-scene > .eyebrow { font-size: .57rem; }
  .story-text { font-size: .86rem; line-height: 1.9; margin-bottom: 13px; }
  .story-choices { gap: 9px; margin-top: 18px; }
  .story-choice { min-height: 48px; padding: 12px 13px; font-size: .79rem; line-height: 1.6; }
  .story-scene .survivor-hud { margin-inline: -6px; }
  .story-scene .next-step { font-size: .7rem; padding: 9px 10px; }
  .story-scene.combat-summary { padding: 11px 13px; }
  .story-scene.combat-summary h2 { font-size: .91rem; }
  .story-scene.combat-summary .story-text { font-size: .69rem; }
  .decision { padding: 15px 12px; margin: 13px 0; }
  .decision h2 { font-size: 1.02rem; }
  .decision-option { padding: 11px 10px; gap: 9px; }
  .decision-option strong { font-size: .79rem; }
  .decision-option input { width: 19px; height: 19px; flex-basis: 19px; }
  .option-description { font-size: .68rem; line-height: 1.65; }
  .decision > button { min-height: 46px; width: 100%; }
  .table-area.battle-table { padding: 11px; border-radius: 6px; }
  .turn-strip { padding: 10px 11px; font-size: .69rem; gap: 6px 10px; margin-bottom: 12px; }
  .turn-strip strong { font-size: .75rem; }
  .turn-strip > span { font-size: .65rem; }
  .enemy-grid { gap: 8px; margin-bottom: 12px; }
  .enemy-panel { padding: 10px; }
  .enemy-name, .enemy-panel > h3 { font-size: .78rem; margin-bottom: 8px; gap: 7px; }
  .enemy-avatar { width: 28px; height: 28px; font-size: .9rem; }
  .enemy-panel .stat { min-height: 44px; padding: 5px; }
  .enemy-panel .stat .value { font-size: 1rem; }
  .enemy-panel .stat .label { font-size: .56rem; }
  .battle-self { padding-top: 10px; }
  .zone-heading { margin-top: 9px; }
  .zone-heading h3 { font-size: .71rem; }
  .zone-heading .caption { font-size: .59rem; }
  .card-row { gap: 9px; padding: 7px 3px 12px; }
  .playing-card { width: 130px; min-width: 130px; min-height: 219px; padding: 8px; border-radius: 6px; }
  .playing-card .card-top { font-size: .5rem; }
  .playing-card .cost { width: 24px; height: 24px; flex-basis: 24px; font-size: .77rem; }
  .playing-card strong { font-size: .77rem; margin: 5px 0 6px; }
  .playing-card .card-art { height: 42px; min-height: 42px; margin-bottom: 7px; }
  .playing-card .card-symbol { font-size: 1.85rem; }
  .playing-card .card-effect { font-size: .59rem; margin-bottom: 6px; }
  .playing-card .card-sub { font-size: .53rem; }
  .playing-card .markers { font-size: .53rem; }
  .playing-card .card-hint { font-size: .53rem; padding: 3px; }
  .playing-card .card-hint.locked { font-size: .5rem; }
  .card-zone[data-zone=board] .playing-card, .card-zone[data-zone^=enemy-board] .playing-card { width: 110px; min-width: 110px; min-height: 153px; padding: 7px; }
  .card-zone[data-zone=board] .playing-card strong, .card-zone[data-zone^=enemy-board] .playing-card strong { font-size: .71rem; }
  .hand-dock { padding: 10px 9px 0; margin-top: 12px; }
  .action-dock { margin: 3px -9px 0; padding: 10px 9px calc(10px + env(safe-area-inset-bottom)); }
  .next-step { font-size: .69rem; line-height: 1.6; }
  .next-step::before { font-size: .53rem; }
  .toolbar { gap: 7px; }
  .action-control { min-width: 120px; }
  .action-control button { min-height: 46px; font-size: .74rem; padding: 10px 8px; }
  .action-control .caption { font-size: .59rem; }
  .game-tools { gap: 6px; margin-top: 10px; }
  .game-tools .caption { flex-basis: 100%; font-size: .61rem; }
  .game-tools .small { min-height: 38px; font-size: .6rem; padding: 7px 9px; }
  .work-layout aside.journal-sidebar { grid-template-columns: 1fr; gap: 8px; }
  .journal-section > summary { min-height: 46px; padding: 12px 13px; font-size: .73rem; }
  .journal-section .record-values { font-size: .72rem; }
  .opponent-area > .row h3, .player-area > .row h3 { font-size: .76rem; }
  .opponent-area > .row .caption, .player-area > .row .caption { font-size: .6rem; }
  .opponent-hand .card-back { width: 33px; min-width: 33px; height: 45px; font-size: .6rem; }
  .opponent-hand { padding-block: 9px 6px; }
  .table-divider { margin-block: 6px 11px; }
  .map-cells { grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); }
  .empty { min-height: 54px; padding: 12px; font-size: .66rem; }
  .panel { padding: 18px; }
  .form-grid { grid-template-columns: 1fr; }
  body[data-screen=duel] .form-grid > .panel { padding: 21px; }
  .deck-preview { gap: 9px; padding: 11px; }
  .deck-emblem { width: 26px; flex-basis: 26px; font-size: 1.3rem; }
  .deck-preview strong { font-size: .73rem; }
  .deck-preview .small { padding-inline: 8px; font-size: .59rem; }
  .library-controls { grid-template-columns: minmax(0, 1fr) 105px; gap: 8px; }
  .library-controls input, .library-controls select { font-size: .76rem; padding-inline: 9px; }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .library-grid .playing-card { min-height: 235px; }
  .library-grid .playing-card .card-art { height: 58px; }
  .library-grid .playing-card .card-symbol { font-size: 2.4rem; }
  .library-grid .playing-card .card-effect { font-size: .61rem; }
  dialog { padding: 20px; width: calc(100vw - 24px); max-height: 89dvh; }
  dialog h2 { font-size: 1.5rem; }
  dialog .effect { font-size: .88rem; line-height: 1.85; }
  .dialog-cost { width: 46px; height: 46px; flex-basis: 46px; }
  .dialog-actions button { min-height: 48px; }
  .fx-note { font-size: .71rem; }
  .fx-notes { bottom: calc(105px + env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) {
  .is-playing .site-header { gap: 9px; padding-inline: 10px; }
  .is-playing nav { gap: 5px; }
  .is-playing nav a { font-size: .64rem; }
  .is-playing #app { padding-inline: 10px; }
  .stats, .stats:has(.stat:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .enemy-panel .stats { grid-template-columns: repeat(auto-fit, minmax(45px, 1fr)); }
  .game-topbar { flex-wrap: wrap; }
  .game-topbar > .row { max-width: 100%; }
  .expedition-body { padding-inline: 17px; }
  .action-control { min-width: 110px; }
}
/* First-turn framing: expose the hand before spending space on empty zones. */
.story-scene.combat-summary {
  display: flex; align-items: center; gap: 9px; padding: 7px 12px;
  min-height: 34px; margin-bottom: 10px; overflow: hidden;
}
.story-scene.combat-summary .chapter-label { flex: 0 0 auto; margin: 0; font-size: .55rem; }
.story-scene.combat-summary h2 { flex: 0 1 auto; margin: 0; font-size: .78rem; white-space: nowrap; }
.story-scene.combat-summary .story-text {
  min-width: 0; flex: 1 1 0; margin: 0; font-size: .67rem; line-height: 1.45;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.battle-table .empty,
.battle-table .card-zone[data-zone=board] .empty,
.battle-table .card-zone[data-zone^=enemy-board] .empty { min-height: 40px; padding: 8px 10px; }
.battle-table .card-row:has(> .empty) { padding-block: 2px 4px; }
.opponent-hand { display: flex; align-items: center; }
.opponent-area .opponent-hand { padding: 0; }
.opponent-area .opponent-hand .card-back { width: 23px; min-width: 23px; height: 32px; font-size: .5rem; }
.opponent-area .opponent-hand .caption { margin-left: 9px; white-space: nowrap; }

@media (min-width: 901px) {
  .is-playing .site-header { min-height: 56px; padding-block: 7px; }
  .is-playing #app { padding-top: 10px; }
  .game-topbar { min-height: 34px; margin-bottom: 10px; }
  .game-title h1 { font-size: 1.16rem; }
  .game-title .eyebrow { font-size: .52rem; margin-bottom: 2px; }
  .game-topbar .small { min-height: 34px; }
  .survivor-hud { display: flex; padding: 8px 12px; gap: 14px; margin-bottom: 10px; }
  .hud-identity { display: flex; margin-bottom: 0; }
  .hud-identity strong { font-size: .73rem; }
  .survivor-hud .stat { min-height: 44px; padding-block: 5px; }
  .survivor-hud .stat .value { font-size: 1.22rem; }
  .survivor-hud .stat .label { font-size: .55rem; }
  .table-area.battle-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 12px; }
  .battle-table > * { grid-column: 1 / -1; min-width: 0; }
  .battle-table > .turn-strip { order: 0; margin: 0; padding: 9px 12px; }
  .battle-table > .decision, .battle-table > .note { order: 1; margin: 0; }
  .battle-table > .pending-cards { order: 2; }
  .battle-table > .enemy-grid, .battle-table > .opponent-area { order: 3; grid-column: 1; margin: 0; }
  .battle-table > .battle-self, .battle-table > .player-area { order: 3; grid-column: 2; border: 0; border-left: 1px solid #88945938; margin: 0; padding: 0 0 0 14px; }
  .battle-table > .battle-map, .battle-table > .table-divider { order: 4; margin: 0; }
  .battle-table > .hand-dock { order: 5; margin-top: 0; }
  .battle-table > .game-tools { order: 6; margin-top: 0; }
  .battle-table > .enemy-grid { grid-template-columns: 1fr; gap: 8px; }
  .battle-table .enemy-panel { padding: 8px 10px; }
  .battle-table .enemy-name { font-size: .76rem; gap: 7px; margin-bottom: 6px; }
  .battle-table .enemy-mark { width: 23px; height: 23px; flex-basis: 23px; font-size: .8rem; }
  .battle-table .enemy-panel .stat { min-height: 42px; padding: 4px 6px; }
  .battle-table .enemy-panel .stat .value { font-size: 1.05rem; }
  .battle-table .zone-heading { margin: 4px 0; }
  .battle-table .zone-heading h3 { font-size: .68rem; }
  .battle-table .opponent-area > .row { margin-bottom: 7px; gap: 7px; }
  .battle-table .opponent-area .stat { min-height: 42px; padding: 4px; }
  .battle-table .opponent-area .stat .value { font-size: 1.05rem; }
  .battle-table .opponent-area .stat .label { font-size: .52rem; }
  .battle-table .opponent-area .enemy-name { margin-bottom: 0; }
  .battle-table .opponent-area .opponent-hand .caption { font-size: .56rem; }
  .battle-table .table-divider { font-size: .5rem; line-height: 1; }
  .hand-dock { padding-top: 9px; }
  .hand-dock .card-row { padding-top: 5px; padding-bottom: 11px; }
  .hand-dock .playing-card { min-height: 224px; }
  .action-dock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 1.3fr); align-items: center; gap: 10px; padding-block: 9px; }
  .action-dock .next-step { margin: 0; font-size: .68rem; }
  .action-dock .toolbar { justify-content: flex-end; }
  .action-dock .action-control { min-width: 112px; }
  .action-dock .action-control button { min-height: 42px; font-size: .72rem; padding: 9px; }
  .action-dock .action-control .caption { font-size: .59rem; }
  .action-dock:not(:has(.toolbar > *)) { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .battle-table .enemy-grid { margin-bottom: 9px; }
  .battle-table .enemy-panel { padding: 8px 10px; }
  .battle-table .enemy-name { margin-bottom: 6px; }
  .battle-table .enemy-panel .stat { min-height: 42px; }
  .battle-self { padding-top: 7px; }
  .battle-table .zone-heading { margin: 6px 0 3px; }
  .battle-table .hand-dock { margin-top: 9px; }
}
@media (max-width: 600px) {
  .is-playing .survivor-hud { padding: 7px; margin-bottom: 9px; }
  .is-playing .hud-identity { display: none; }
  .is-playing .survivor-hud .stat { min-height: 44px; padding-block: 5px; }
  .is-playing .survivor-hud .stat .value { font-size: 1.06rem; }
  .game-topbar { margin-bottom: 10px; }
  .story-scene.combat-summary { padding: 7px 9px; min-height: 32px; gap: 7px; margin-bottom: 9px; }
  .story-scene.combat-summary h2 { font-size: .72rem; }
  .story-scene.combat-summary .chapter-label { font-size: .49rem; }
  .story-scene.combat-summary .story-text { font-size: .6rem; }
  .battle-table .turn-strip { margin-bottom: 9px; padding: 8px 10px; }
  .battle-table .enemy-name { font-size: .73rem; }
  .battle-table .enemy-mark { width: 22px; height: 22px; flex-basis: 22px; font-size: .75rem; }
  .battle-table .card-row:has(> .empty) { padding-bottom: 3px; }
  .battle-table .empty { font-size: .62rem; }
  .opponent-area .opponent-hand .card-back { width: 19px; min-width: 19px; height: 27px; font-size: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mode-card, .mode-card::before, .expedition-art, .playing-card { transition: none; }
  .mode-card:hover, .mode-card:hover::before, .expedition-card:hover .expedition-art,
  .playing-card:not(:disabled):hover, .library-grid .playing-card:hover,
  button:not(:disabled):hover, .button:hover { transform: none; }
}