/* Maple edition: minimalist printed motifs on a pale wooden tabletop. */
:root {
  --ink: #343d32;
  --paper: #faf7ee;
  --muted: #79816e;
  --line: #e1e3d5;
  --gold: #d6a74c;
  --pine: #3f6c58;
  --wood-grain: url('../assets/raven-magpie/tabletop-v3/maple-grain.png');
}
body { background: #ece9e1; }
.shell { background: radial-gradient(ellipse at 50% 15%,#f8f6ef,#e8e4da); max-width: 1600px; height: auto; min-height: 100dvh; padding: 0 24px 26px; gap: 0 20px; grid-template-rows: 72px 102px auto; }
.topbar { color: #344938; }
.brand-seal { border-color: #869974; color: #50694b; background: #f8f8ed; }
.brand h1 { font-size: 24px; color: #344938; }
.brand h1 span { color: #77836f; }
.brand small { color: #9aa087; letter-spacing: .12em; }
.toolbar button { color: #66755d; border-radius: 8px; }
.toolbar button:hover { background: #dfe5d6; }
.toolbar .outline-button { border-color: #cbd5bd; color: #4b6649; background: #f9faef; }
.offline-badge { color: #839377; }
.hud { border: 1px solid #d9d5c7; border-radius: 12px; height: 88px; box-shadow: 0 2px 1px #b7ad9755,0 5px 12px #67594210,inset 0 1px #fffefb; background: #fffdf5; overflow: hidden; }
.faction { border: 0; padding: 10px 22px; gap: 16px; }
.faction.active { background: linear-gradient(90deg,#dce8ce88,transparent); box-shadow: inset 0 -3px #8ba76e; }
.faction.magpie.active { background: linear-gradient(270deg,#d3e7e088,transparent); box-shadow: inset 0 -3px #5f9c90; }
.faction-heading b { font-size: 21px; color: #3e4937; }
.faction-heading small { color: #869473; font-size: 8px; }
.faction-heading>span { color: #8b967b; font-size: 10px; }
.faction-piece { display: block; width: 68px; height: 68px; flex: none; filter: none; }
.score { gap: 14px; }
.score strong small { font: 10px "Microsoft YaHei", sans-serif; opacity: .65; }
.tactic-preview { margin: 10px 0 0; padding: 9px 10px; background: #e7edda; border-left: 3px solid #7c926a; border-radius: 5px; color: #526345; font-size: 11px; line-height: 1.6; }
.score>span { font-size: 10px; color: #8e987e; }
.score strong { color: #53604b; font-size: 25px; }
.score>span:first-child strong { color: #b58b37; }
.round { border-color: #e2e6d8; }
.round strong { color: #556546; font-family: Georgia,"Microsoft YaHei",serif; font-size: 19px; }
.round>small { color: #889574; }
.round>span { color: #8f977f; }
.round-track i { background: #e1e6d8; width: 12px; height: 4px; border-radius: 5px; }
.round-track i.current { background: #8aa975; }
.round-track i.done { background: #bbccb0; }

/* 4 x 2 atlas. Each frame is square, including its transparent padding. */
.sprite { display: inline-block; background-image: url('../assets/raven-magpie/tabletop-v3/minimal-atlas.png'); background-size: 400% 200%; background-repeat: no-repeat; }
.art-crow { background-position: 0 0; }
.art-magpie { background-position: 33.333333% 0; }
.art-bush { background-position: 66.666667% 0; }
.art-house { background-position: 100% 0; }
.art-perch { background-position: 0 100%; }
.art-center { background-position: 33.333333% 100%; }
.art-shiny { background-position: 66.666667% 100%; }
.art-food { background-position: 100% 100%; }
.board-wrap { border: 1px solid #cbb99a; border-radius: 16px; box-shadow: 0 2px 0 #e9d9be,0 5px 0 #c7b28f,0 8px 5px #5a422923,0 18px 28px #61503920; grid-template-rows: auto 194px; align-self: start; background: #ede0c4; }
.board-stage { border: 0; border-radius: 14px 14px 0 0; aspect-ratio: 1.42; background-color: #eee4d1; background-image: linear-gradient(#fffaf0a6,#fffaf0a6),var(--wood-grain); background-size: auto,900px 900px; box-shadow: inset 0 2px 1px #fffaf0,inset 0 -1px 2px #ad956742; }
.board-stage:before { inset: 10px; border: 1px solid #b7a27a45; border-radius: 7px; background: none; opacity: 1; box-shadow: 0 1px 0 #fffaf0b3; }
.board { inset: 42px 24px 38px; }
.table-label { top: 21px; left: 28px; right: 28px; color: #756f5d; font-size: 11px; letter-spacing: .08em; text-shadow: 0 1px #fffaf0; }
.table-label-right { color: #a4ac93; }
.board-legend { bottom: 18px; left: 28px; right: 28px; color: #867d67; font-size: 10px; gap: 18px; }
.legend-dot { background: #d6ae54; }
.legend-dot.bush { background: #89a978; }
.legend-dot.high { background: #a89469; }
.legend-tip { color: #9ba68b; }
.hex-slot { position: absolute; pointer-events: none; filter: none; }
.hex-slot:has(.unit) { z-index: 2; }
.hex-slot:has(.hex.selected) { z-index: 3; }
.hex-slot:has(.hex:hover,.hex:focus-visible) { z-index: 4; }
.hex { --tile: #f4eddde8; --rim: #baaf964f; --ring: transparent; width: 100%; height: 100%; inset: 0; pointer-events: auto; background: var(--rim); isolation: isolate; clip-path: polygon(25.3% .5%,74.7% .5%,99.5% 50%,74.7% 99.5%,25.3% 99.5%,.5% 50%); }
.hex:after { inset: 1px; background: var(--tile); box-shadow: none; border: 0!important; z-index: 0; }
.hex:before { content: none; }
.hex.terrain-high { --tile: #eae4d1e6; --rim: #b5a58070; background-image: none; }
.hex.site-bush { --tile: #e1e7d2e6; --rim: #a4b88c80; background-image: none; }
.hex.site-shiny { --tile: #f4e8c8e6; --rim: #cbb57885; }
.hex.center { --tile: #d9e3d2e6; --rim: #89a68f; background-image: none; }
.hex.building { --tile: #eadbd0e6; --rim: #c5ac9970; background: var(--rim); box-shadow: none; }
.hex.building:before { content: none; }
.hex.entry-crow { --tile: #e6dee8e8; --rim: #b7aabd80; }
.hex.entry-magpie { --tile: #dce8dfe8; --rim: #9ab6a680; }
.hex:is(.legal,.escape-target) { --tile: #dfebd1ed; --rim: #90aa7080; }
.hex:is(.attack) { --tile: #ecc3b3; --rim: #bd7058; }
.hex:is(.retreat-target,.return-target) { --tile: #f2dda4; --rim: #bb9750; }
.hex.selected { --tile: #f6e5bde8; --rim: #aa8c46; }
.hex:is(.legal,.escape-target,.attack,.retreat-target,.return-target,.selected):after { background: var(--tile); box-shadow: none; inset: 2px; }
.hex:hover { filter: brightness(1.045); }
.hex:focus-visible:after { box-shadow: inset 0 0 0 3px #b69048; }
.cell-art { position: relative; z-index: 1; width: 88%; aspect-ratio: 1; pointer-events: none; transform: translateY(-3px); filter: drop-shadow(1px 3px 1px #69583d28); }
.hex.building .cell-art { width: 96%; }
.hex.center .cell-art { width: 100%; }
.cell-name { font-size: clamp(8px,.7vw,10px); top: auto; bottom: 10%; background: transparent; color: #827e6c; border-radius: 0; padding: 0; font-weight: 500; }
.hex.building .cell-name { display: none; }
.hex:has(.unit) .cell-name { display: none; }
.resource { bottom: 8%; font-size: clamp(8px,.7vw,10px); height: auto; line-height: 1.25; background: transparent; border: 0; padding: 0; box-shadow: none; color: #788662; }
.resource.shiny { background: none; padding: 0; border: 0; color: #ac873a; }
.resource.depleted { background: none; color: #96977e; }
.hex.site-depleted .cell-art { opacity: .38; filter: grayscale(.7); }
.hex:has(.unit) .resource { display: none; }
.unit { display: block; width: 100%; aspect-ratio: 1; transform: translateY(-3px); filter: none; }
.unit:before { content: ''; position: absolute; left: 16%; right: 16%; bottom: 8%; height: 11%; border-radius: 50%; background: #60452355; filter: blur(2px); transform: translate(3px,4px); }
.piece-art { display: block; position: relative; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 1px 0 #fff1d3) drop-shadow(0 2px 0 #be9f6b) drop-shadow(2px 5px 2px #49362450); }
.token-id { right: 9%; bottom: 18%; width: 18px; height: 18px; font: 10px Georgia,serif; background: #49334e; border: 2px solid #fffae9; color: #fffdf0; box-shadow: 0 2px 2px #48352455; }
.unit.magpie .token-id { background: #4a8378; }
.repeat-fee { bottom: -3px; border: 0; border-radius: 4px; background: #fff4d5; color: #a18141; font-size: 7px; box-shadow: 0 1px 3px #0001; }
.roof { background: #fffcf0f2; border-color: #c8d3bc; box-shadow: 0 4px 10px #6474511c; color: #6b785b; }
.roof button { border-color: #cfdbc1; background: #f2f6e8; color: #657853; }

.player-desk { grid-template-columns: 320px minmax(0,1fr); gap: 26px; padding: 16px 20px 0; background-image: linear-gradient(#fffaf0e0,#fffaf0e0),var(--wood-grain); background-size: auto,680px 680px; border-top: 1px solid #c3ad8680; box-shadow: inset 0 2px 4px #9f805526; }
.order-dock,.hand-dock { color: #69775b; }
.dock-heading { margin-bottom: 10px; }
.dock-heading h2 { font-size: 12px; font-weight: 600; letter-spacing: .03em; }
.dock-heading>span { font-size: 9px; color: #a0aa8f; opacity: 1; }
.orders { gap: 9px; }
.order { padding: 10px 9px; min-height: 119px; text-align: left; border-radius: 9px; border: 1px solid #d7cbb3; background: #fffaf0; color: #5b6b4d; box-shadow: 0 3px 0 #cabea0,0 5px 6px #6b543522,inset 0 1px #fff; }
.order[role=button]:hover { background: #f1f7e8; }
.order.active { background: #edf4e3; outline: 2px solid #88a66a; outline-offset: 0; border-color: #8da971; box-shadow: 0 3px 0 #a9bd9255; }
.order.spent { opacity: .45; filter: none; box-shadow: none; background: #edf0e7; }
.order .order-letter { display: block; font: 10px Georgia,serif; color: #a5ae96; letter-spacing: .08em; }
.order .order-symbol { display: block; position: absolute; top: 9px; right: 10px; font: 22px Georgia,serif; line-height: 1; color: #93a67a; }
.order strong { font: 18px "Microsoft YaHei",sans-serif; margin-top: 10px; font-weight: 600; }
.order .order-boost { font-size: 9px; color: #94a180; margin-top: 6px; opacity: 1; line-height: 1.4; }
.order-modes { gap: 2px; margin-top: 8px; }
.order-modes button { background: #f3f6e9; border: 1px solid #d8e1c9; color: #778966; font-size: 9px; padding: 5px 2px; border-radius: 4px; min-height: 28px; }
.order-modes button.primary { background: #789761; border-color: #789761; color: #fffbed; }
/* Keep every card reachable without letting a large hand spill over the orders. */
.hand { height: 150px; justify-content: flex-start; align-items: flex-start; gap: 9px; padding: 8px 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #b9c8a5 transparent; scroll-snap-type: x proximity; scroll-padding-inline: 4px; }
.card { border: 1px solid #d5d6ba; border-radius: 10px; width: 114px; flex-basis: 114px; height: 128px; margin: 0; padding: 8px; background: #f4f0df; color: #62664e; box-shadow: 0 4px 9px #57634420; transform: none; scroll-snap-align: start; }
.card.food { background: #f7efd3; }
.card.escape { background: #e9efdc; }
.card b { font: 12px "Microsoft YaHei",sans-serif; font-weight: 600; left: 9px; right: 35px; top: 10px; }
.card-corner { background: #decca0; color: #765d32; width: 28px; height: 18px; border-radius: 5px; font: 9px "Microsoft YaHei",sans-serif; top: 8px; right: 5px; }
.card-art { border: 0; background: transparent; inset: 29px 16px 43px; overflow: visible; }
.card-art .sprite { width: 100%; aspect-ratio: 1; }
.card small { color: #69745b; font-size: 9px; line-height: 1.4; -webkit-line-clamp: 2; bottom: 22px; left: 9px; right: 9px; }
.card .type { color: #a1a187; font-size: 8px; border-color: #b8b89940; padding-top: 4px; bottom: 5px; }
.card.playable { border-color: #9fb47e; }
.card:hover,.card:focus-visible,.card.selected { box-shadow: 0 4px 9px #55644426; transform: translateY(-3px); }
.card.selected { outline-color: #8ca66b; }
.game-rail { position: sticky; top: 16px; align-self: start; max-height: calc(100dvh - 32px); border: 1px solid #ddd6c6; border-radius: 12px; background: #fffef6; box-shadow: 0 3px 0 #d4cbb6,0 9px 18px #68573912; scrollbar-color: #d4dfc6 transparent; }
.objective-panel { background: #f4f7e9; border-color: #e1e6d6; padding: 22px; }
.eyebrow { color: #9ba987; font-size: 9px; letter-spacing: .08em; }
.objective-panel h2 { font-family: "Microsoft YaHei",sans-serif; font-size: 18px; font-weight: 600; color: #597146; }
.objective-panel h2>span { color: #c5a15e; }
.objective-panel p,.center-pool { color: #95a080; }
.center-pool { border-color: #e0e6d3; }
.center-pool strong { color: #b89854; }
.decision-panel { border-color: #e3e8d8; padding: 20px; }
.section-kicker { color: #77965f; }
.turn-indicator { background: #8ea775; box-shadow: 0 0 0 3px #91a97518; }
.step-track { color: #afbaa0; gap: 8px; }
.step-track span { border-color: #e8eddf; }
.step-track span.active { color: #78945f; border-color: #9ab781; }
.prompt strong { color: #53664a; font-size: 13px; }
.prompt .prompt-line>span { color: #748163; font-size: 11px; line-height: 1.8; }
.actions { gap: 7px; }
.actions button { background: #f3f6e9; border: 1px solid #d6dfc7; border-radius: 7px; color: #798b64; min-height: 36px; }
.actions button.primary { background: #86a46c; border-color: #86a46c; box-shadow: 0 2px 0 #68884e; color: #fffdf2; }
.actions button.danger { background: #bd8069; border-color: #bd8069; }
.inspector { background: #fffef7; border-color: #e5e9dc; }
.inspector h3 { font-family: "Microsoft YaHei",sans-serif; font-size: 15px; font-weight: 600; color: #75815e; margin: 9px 0; }
.inspector p { color: #7b886b; }
.inspect-tag { background: #f0f4e6; color: #9ca989; }
.inspect-cost { font-size: 13px; color: #b79b5b; }
.journal-panel .dock-heading { color: #879575; }
.log div { color: #aab498; border-color: #e0e7d5; }
.log div:first-child { color: #8c9a79; border-color: #aac18e; }
.rail-footer { background: #f7f8ed; color: #acb69a; border-color: #e2e8d7; }
.combat-preview { background: #f7efdc; border-color: #e3d7b8; }
.combat-numbers { color: #a88250; }
.inline-notice { background: #f6eed5; color: #a38c57; border-color: #cfb97c; border-radius: 6px; }
.turn-banner { top: 11%; background: #fffdf4ee; padding: 11px 22px; border: 1px solid #c8d6b5; border-radius: 9px; font: 15px "Microsoft YaHei",sans-serif; color: #7b965e; box-shadow: 0 6px 16px #69804a15; }
.action-toast { background: #5d7352ef; color: #fffae7; border: 0; border-radius: 8px; font-size: 11px; bottom: 34px; }
.game-dialog { border-color: #d7dfc7; border-radius: 18px; background: #fffdf3; }
.game-dialog::backdrop { background: #36422a77; backdrop-filter: blur(8px); }
.lobby-art { background-image: linear-gradient(135deg,#fff6e05c,#c8ae7933),var(--wood-grain); background-size: auto,680px 680px; color: #5c7650; min-height: 590px; overflow: hidden; box-shadow: inset -1px 0 #9e815733; }
.lobby-stamp { border: 1px solid #9bb38777; background: #fcfcec66; border-radius: 20px; color: #738967; }
.lobby-mascots { position: absolute; left: 10px; right: 10px; top: 25%; display: flex; align-items: center; }
.lobby-mascots .sprite { width: 57%; aspect-ratio: 1; flex: none; filter: drop-shadow(0 2px 0 #fff4d9) drop-shadow(0 4px 0 #c1a170) drop-shadow(6px 14px 5px #60482238); }
.lobby-mascots .sprite+ .sprite { margin-left: -14%; transform: translateY(24px); }
.lobby-caption { z-index: 1; font: 38px "STKaiti","KaiTi",serif; color: #617b50; text-shadow: none; line-height: 1.4; }
.lobby-edition { color: #91a17c; }
.lobby-content { background: #fffdf3; }
.lobby-content>h2 { color: #50613f; }
.lobby-subtitle,.lobby-intro { color: #96a07f; }
.lobby-meta { border-color: #e3e6d6; color: #91a07e; }
.lobby-meta span+span { border-color: #d6dec8; }
.setup label { color: #859773; }
.setup select,.setup input { background: #f7f9ef; color: #6f835e; border-color: #dce4cf; border-radius: 7px; }
.seed-row button { background: #eef3e3; color: #91a078; border-color: #dbe3ca; border-radius: 7px; }
.gold-button { background: #87a36e; border-color: #87a36e; color: #fffef4; border-radius: 8px; box-shadow: 0 3px 0 #6b8951; }
.text-button { color: #8a9b74; }
.lobby-note { color: #adb69b; }
#handoffPiece { display: block; width: 110px; height: 110px; margin: 20px auto; }

@media(min-width:1600px) {
  .shell { grid-template-columns: minmax(0,1fr) 330px; }
  .player-desk { grid-template-columns: 360px minmax(0,1fr); }
}
@media(max-width:1200px) {
  .shell { padding-inline: 14px; gap: 0 14px; }
  .faction { padding-inline: 14px; gap: 8px; }
  .faction-piece { width: 54px; height: 54px; }
  .score { gap: 14px; }
  .player-desk { grid-template-columns: 282px minmax(0,1fr); padding-inline: 14px; gap: 15px; }
  .card { width: 100px; flex-basis: 100px; }
  .table-label-right { display: none; }
}
@media(max-width:960px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: 66px 98px auto auto; height: auto; min-height: 100dvh; padding: 0 12px 16px; }
  .hud { height: 86px; grid-template-columns: 1fr 155px 1fr; }
  .board-wrap { grid-template-rows: auto auto auto; }
  .board-wrap>.decision-panel { order: 0; padding: 12px 18px; background: #fffef5; border-top: 1px solid #dce4d1; border-bottom: 1px solid #e1e7d7; }
  .board-wrap>.decision-panel .section-kicker { display: none; }
  .board-wrap>.decision-panel .step-track { display: none; }
  .board-wrap>.decision-panel .prompt-line { gap: 3px; }
  .board-wrap>.decision-panel .prompt-line>span { font-size: 11px!important; line-height: 1.5; }
  .board-wrap>.decision-panel .actions { margin-top: 8px; }
  .player-desk { grid-template-columns: 295px minmax(0,1fr); min-height: 186px; }
  .game-rail { position: static; max-height: none; display: grid; grid-template-columns: 1fr 1fr; border-radius: 13px; margin-top: 12px; }
  .objective-panel { display: none; }
  .inspector { border-right: 1px solid #e5e9dc; }
  .rail-footer { grid-column: 1/-1; }
}
@media(max-width:600px) {
  .shell { padding: 0 10px 12px; grid-template-rows: 54px 88px auto auto; }
  .brand-seal { display: none; }
  .brand h1 { font-size: 21px; }
  .toolbar { gap: 2px; }
  .toolbar button { padding: 0 7px; font-size: 10px; min-height: 32px; }
  .toolbar .outline-button { border-radius: 6px; }
  .hud { height: 77px; grid-template-rows: 75px; border-radius: 12px; grid-template-columns: 1fr 84px 1fr; }
  .faction { display: grid; grid-template-columns: 25px minmax(0,1fr); grid-template-rows: 23px 28px; padding: 8px 7px; align-content: center; gap: 3px 4px; position: relative; }
  .faction-piece { display: block; width: 25px; height: 25px; grid-column: 1; grid-row: 1; align-self: center; }
  .faction-heading { grid-column: 2; grid-row: 1; width: auto; text-align: left!important; }
  .faction-heading b { font-size: 15px; letter-spacing: 0; font-family: "Microsoft YaHei",sans-serif; font-weight: 600; }
  .faction .score { grid-column: 1/-1; grid-row: 2; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; margin: 0; }
  .score>span { font-size: 7px; white-space: nowrap; gap: 1px; color: #879373; }
  .score strong { font-size: 17px; }
  .score>span:nth-child(2) { display: grid; }
  .magpie .faction-piece { grid-column: 2; }
  .faction.magpie { grid-template-columns: minmax(0,1fr) 25px; }
  .magpie .faction-heading { grid-column: 1; text-align: right!important; }
  .magpie .score { grid-column: 1/-1; }
  .round { gap: 4px; margin: 11px 0; border-color: #e5e9da; }
  .round strong { font-size: 13px; white-space: nowrap; }
  .round>small { font-size: 7px; }
  .round>span { display: none; }
  .round-track { gap: 3px; }
  .round-track i { width: 7px; height: 3px; }
  .board-wrap { border-radius: 13px; grid-template-rows: auto auto auto; }
  .board-stage { border-radius: 12px 12px 0 0; border: 0; aspect-ratio: 1.25; }
  .board-stage:before { inset: 8px; border-radius: 8px; }
  .board { inset: 28px 7px 25px; }
  .table-label { top: 13px; left: 17px; right: 17px; font-size: 10px; }
  .board-legend { bottom: 11px; left: 17px; right: 17px; font-size: 8px; gap: 12px; }
  .hex:after { inset: .7px; }
  .hex:is(.legal,.escape-target,.attack,.retreat-target,.return-target,.selected):after { inset: 1.5px; }
  .hex:before { display: none; }
  .cell-art { width: 92%; transform: translateY(-1px); }
  .cell-name,.resource { display: none; }
  .hex.center .cell-name { display: block; font-size: 5px; bottom: 5%; }
  .unit { width: 100%; transform: translateY(-1px); }
  .piece-art { filter: drop-shadow(0 1px 0 #d2b582) drop-shadow(1px 2px 1px #49362455); }
  .token-id { width: 12px; height: 12px; border-width: 1.5px; font-size: 7px; right: 9%; bottom: 18%; }
  .repeat-fee { font-size: 5px; padding: 1px 2px; bottom: -4px; }
  .board-wrap>.decision-panel { padding: 10px 13px; }
  .prompt strong { font-size: 12px; }
  .actions { gap: 6px; }
  .actions button { min-height: 34px; padding: 6px 10px; font-size: 11px; }
  .player-desk { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 12px; padding: 13px 12px 0; min-height: 0; }
  .dock-heading { margin-bottom: 7px; }
  .dock-heading h2 { font-size: 11px; }
  .dock-heading>span { font-size: 8px; }
  .orders { gap: 8px; }
  .order { min-height: 73px; padding: 8px 10px; border-radius: 9px; }
  .order .order-letter { font-size: 8px; }
  .order .order-symbol { top: 10px; right: 9px; font-size: 21px; }
  .order strong { font-size: 15px; margin-top: 7px; }
  .order .order-boost { font-size: 7px; margin-top: 4px; }
  .order-modes { margin-top: 7px; }
  .order-modes button { min-height: 27px; font-size: 9px; }
  .hand-dock .dock-heading { margin: 0; }
  .hand-dock .dock-heading>span { font-size: 0; }
  .hand-dock .dock-heading>span:after { content: '轻触看牌 · 左右滑动'; font-size: 8px; }
  .hand { height: 149px; }
  .card { width: 98px; flex-basis: 98px; height: 127px; margin: 0; transform: none; border-radius: 8px; scroll-snap-align: start; }
  .card b { font-size: 11px; top: 8px; left: 8px; }
  .card-art { inset: 27px 13px 34px; }
  .card small { -webkit-line-clamp: 2; bottom: 22px; font-size: 9px; }
  .card:hover,.card:focus-visible,.card.selected { transform: translateY(-3px); }
  .card.selected { outline-width: 2px; }
  .game-rail { grid-template-columns: 1fr; }
  .inspector { padding: 15px; border: 0; border-bottom: 1px solid #e4e9d8; min-height: 0; }
  .inspector h3 { font-size: 14px; }
  .inspector p { font-size: 11px; }
  .journal-panel { padding: 15px; min-height: 90px; }
  .rail-footer { font-size: 8px; padding: 10px 14px; }
  .turn-banner { top: 16%; font-size: 12px; padding: 8px 15px; }
  .action-toast { font-size: 10px; padding: 7px 12px; bottom: 28px; }
  .lobby-art { min-height: 175px; height: 175px; padding: 18px; }
  .lobby-mascots { top: 5px; left: auto; right: 10px; width: 210px; }
  .lobby-mascots .sprite { width: 60%; }
  .lobby-caption { font-size: 22px; line-height: 1.4; margin: auto 0 6px; }
  .lobby-caption br { display: block; }
  .lobby-stamp { max-width: 145px; font-size: 7px; padding: 5px 8px; z-index: 2; }
  .lobby-content { padding: 24px; }
  .lobby-content>h2 { font-size: 34px; }
}

/* Both plans become public together; covered during local handoffs. */
.public-orders { grid-column:1/-1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:9px 14px; margin:8px 0; border:1px solid #d7cfb5; border-radius:12px; background:#f8f5e9; color:#5b624d; font-size:12px; }
.public-order-side { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.public-order { padding:4px 7px; border-radius:6px; background:#e9e2ce; }
.public-order.spent { opacity:.5; text-decoration:line-through; }
.sealed-orders { color:#827964; }
.order.sealed { background:repeating-linear-gradient(45deg,#e9e1cb,#e9e1cb 6px,#e4dbc2 6px,#e4dbc2 7px); justify-content:center; }
.hand-concealed #orders, .hand-concealed #prompt, .hand-concealed #inspector { visibility:hidden; }
@media(max-width:600px) { .public-orders { padding:8px; gap:7px; } .public-order-side { width:100%; font-size:11px; } }

.dropped-food { position: absolute; z-index: 6; bottom: 5px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 6px; border-radius: 8px; background: #f8e8b8; color: #60451e; box-shadow: 0 2px 4px #44331f55; font-size: 11px; pointer-events: none; }

.recruit-site { position:absolute; top:6px; left:50%; transform:translateX(-50%); z-index:5; padding:2px 5px; background:#e9e1c8; color:#4e593f; border-radius:4px; font-size:10px; white-space:nowrap; pointer-events:none; }
.ready-badge { position:absolute; top:-5px; right:-10px; background:#eedcc5; color:#574630; font-size:10px; padding:2px 4px; border-radius:4px; }
.recruit-market { display:grid; gap:6px; padding:4px 12px 12px; }
.recruit-market p { font-size:12px; line-height:1.55; margin:3px 0; color:#625949; }
.market-candidate { width:100%; text-align:left; padding:9px 10px; border:1px solid #cabea5; background:#f4efdf; color:#443b2e; border-radius:6px; }
.market-candidate:disabled { opacity:.6; cursor:default; }

.game-rail > * { flex-shrink: 0; }
.recruit-panel { flex: 0 0 auto; min-height: 0; }

/* Roof artwork identifies recruitment; perches remain high ground. */
.hex .art-wall { width: 62%; height: 38%; aspect-ratio: auto; border: 2px solid #a18c78; border-radius: 3px; background: repeating-linear-gradient(0deg,transparent 0 9px,#aa9580 9px 11px),repeating-linear-gradient(90deg,#cdbba5 0 15px,#aa9580 15px 17px); box-shadow: 0 5px 0 #aa9580, 2px 8px 5px #66533d30; transform: skewY(-5deg); }
.hex.building .cell-name { display: block; bottom: 8%; font-size: 8px; }
/* Tactile pieces and explicit interaction cues. */
.hex-slot { filter: drop-shadow(0 2px 1px #77634735); }
.hex-slot:has(.hex.selected) { filter: drop-shadow(0 3px 3px #a47a4666); }
.hex { transition: filter .16s ease, transform .16s ease; }
.hex:focus-visible { outline: none; filter: brightness(1.1); }
.hex.legal:before,.hex.return-target:before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #476d4a; box-shadow: 0 0 0 4px #e4f2d7c9; z-index: 4; top: 20%; left: calc(50% - 4px); }
.hex.attack:before { content: '×'; position: absolute; top: 12%; left: 43%; color: #913c31; font: bold 20px Georgia,serif; z-index: 5; }
.hex.selected { --rim: #93734b; }
.board-guidance { padding: 11px 18px; min-height: 40px; box-sizing: border-box; background: #faf6e9; border-block: 1px solid #cfbc973d; color: #756b56; font-size: 12px; letter-spacing: .025em; }
.board-guidance.is-active { background: #eef1df; color: #405b40; border-left: 3px solid #81956b; }
.route-preview { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 8; pointer-events: none; }
.route-preview line { stroke: #4c7651; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 7; filter: drop-shadow(0 1px 1px #ffffee); }
.route-preview circle { fill: #4c7651; stroke: #f8f4de; stroke-width: 2; }
.hand-navigation { display:flex; align-items:center; gap:8px; color:#766a53; font-size:11px; }
.hand-navigation button { width:30px; height:28px; border:1px solid #cbbb9d; border-radius:7px; background:#fff9e9; color:#5a6248; font-size:23px; line-height:20px; cursor:pointer; }
.hand-navigation button:disabled { opacity:.35; cursor:default; }
.hand-navigation button:focus-visible { outline:2px solid #667c51; outline-offset:2px; }
.hand { scrollbar-width: thin; scrollbar-color: #bcab8a #f1e8d4; }
.faction { position:relative; }
.score-burst { position:absolute; right:12px; bottom:4px; z-index:10; background:#fff2c7; color:#795821; border:1px solid #d6b972; border-radius:20px; padding:5px 10px; font-size:12px; pointer-events:none; animation:score-rise 1.6s ease-out both; }
@keyframes score-rise { 0% { opacity:0; transform:translateY(8px); } 20%,70% { opacity:1; } 100% { opacity:0; transform:translateY(-25px); } }
@media(max-width:600px) { .board-guidance { font-size:11px; padding:10px 12px; } .hand-navigation { gap:6px; } }
@media(prefers-reduced-motion:reduce) { .hex { transition:none; } .score-burst { animation:none; } }
.board-wrap { grid-template-rows: auto auto 194px; }
@media(max-width:960px) { .board-wrap { grid-template-rows: auto auto auto auto; } }