/* Expedition-only art direction. The camp, rewards and existing sheets keep their theme. */
.phone.game {
  --forest: #203e34;
  --ivory: #f5f0d9;
  --quiet: #bed0b7;
  --sun: #f3d77c;
  background: radial-gradient(ellipse at 40% 47%, #9cb86b88, transparent 61%), linear-gradient(165deg, #2b6049, #668751 55%, #325d40);
  color: var(--ivory);
  min-height: 0;
  border-color: #243a31;
}
.game .game-top { padding: 10px 12px 5px; gap: 8px; }
.game .game-top small { color: #b9c8a8; font-size: 9px; letter-spacing: 1.8px; font-weight: 700; }
.game .game-top h2 { color: #fbf5df; font-size: 21px; line-height: 1.2; margin-top: 3px; text-shadow: 0 2px 2px #152d3640; }
.game .game-top .round { width: 44px; height: 44px; border: 1px solid #bfd6ad2b; border-radius: 50%; color: #e5ead7; background: #112e2838; box-shadow: inset 0 1px #ffffff0a; font-size: 21px; }
.game .game-top .round .icon { width: 21px; height: 21px; }
.game .expedition-hud { display: flex; justify-content: space-between; align-items: center; padding: 9px 21px 10px; gap: 15px; flex-shrink: 0; }
.game .quest-summary { display: flex; gap: 10px; align-items: center; min-width: 0; }
.game .quest-summary > .icon { width: 40px; height: 40px; filter: drop-shadow(0 3px 2px #102c2950); }
.game .quest-summary > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 11px; }
.game .quest-summary span { grid-column: 1 / -1; font-size: 12px; color: #e2e8d0; }
.game .quest-summary b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.game .quest-summary small { font-size: 16px; font-weight: 600; color: #bfd0b4; }
.game .quest-pips { display: flex; gap: 4px; }
.game .quest-pips i { height: 6px; width: 6px; border: 1px solid #c2d19c66; background: #102d2a66; border-radius: 50%; }
.game .quest-pips .filled { background: #f3d77c; border-color: #f9eeb1; box-shadow: 0 0 6px #f3d77c50; }
.game .quest-summary.complete { color: #e0eaaa; }
.game .turns-remaining { display: flex; align-items: center; gap: 5px; flex-shrink: 0; min-width: 83px; padding: 6px 12px 7px 7px; color: #fff0bd; border-radius: 18px 18px 18px 5px; background: linear-gradient(135deg,#c4a96326,#dec98e0a); border: 1px solid #dccb8638; }
.game .turns-remaining > .icon { width: 29px; height: 33px; }
.game .turns-remaining > div { display: flex; flex-direction: column; align-items: center; }
.game .turns-remaining b { font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.game .turns-remaining span { font-size: 10px; margin-top: 2px; color: #d7cfab; }
.game .turns-remaining.low { border-color: #f2b89480; background: #a5543538; color: #ffc5a0; }
.game .expedition-loot { display: flex; align-items: center; gap: 12px; margin: 0 19px; padding: 8px 0 10px; border-top: 1px solid #e3e8bd1c; flex-shrink: 0; }
.game .loot-label { font-size: 11px; color: var(--quiet); }
.game .expedition-loot .wallet { gap: 16px; flex: 1; }
.game .expedition-loot .currency { flex: 0 0 auto; padding: 0; gap: 4px; background: none; border: 0; box-shadow: none; border-radius: 0; color: #e9e8d3; }
.game .expedition-loot .currency b, .game .chest-progress b { font-size: 13px; font-weight: 700; }
.game .expedition-loot .icon { width: 20px; height: 20px; }
.game .chest-progress { display: flex; gap: 5px; align-items: center; border-left: 1px solid #e3e8bd26; padding-left: 12px; }
.game .chest-progress .icon { width: 25px; height: 23px; }
.game .chest-progress small { color: #b8c7a7; font-size: 11px; margin-left: 2px; }

/* The meadow is a continuous texture; the square cells are just interaction regions. */
.game .board-surround { position: relative; background: none; border: 0; padding: 26px 17px 0; margin: 0; container-type: size; justify-content: center; }
.game .board {
  width: min(100cqw, calc((100cqh - 33px) * var(--cols) / var(--rows)));
  height: auto; aspect-ratio: var(--cols) / var(--rows);
  gap: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  overflow: visible; isolation: isolate;
}
.game .ground-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -2; filter: drop-shadow(0 5px 0 #283a2466) drop-shadow(0 12px 13px #132d2a65); }
.game .ground-earth { fill: #8b7847; }
.game .mist-layer, .game .scenery-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.game .mist-layer { z-index: 0; }
.game .scenery-layer { z-index: 2; filter: drop-shadow(0 3px 2px #264e3033); }
.game .cell { border-radius: 0; background: none; box-shadow: none; transition: box-shadow .12s; z-index: 1; }
.game .cell.revealed { background: none; box-shadow: inset 0 0 0 .5px #32552224; }
.game .cell.wall { visibility: hidden; pointer-events: none; }
.game .cell.wall.mountain { visibility: visible; pointer-events: auto; cursor: not-allowed; }
.game .mountain-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; --rock-body: #69796e; --rock-top: #a5b29a; --rock-light: #d0d7b7; --rock-dark: #3f514b; --rock-moss: #788e4e; }
.game[data-graphics="magic"] .mountain-layer { --rock-body: #6f6d88; --rock-top: #b2abc6; --rock-light: #e0d7ea; --rock-dark: #48455d; --rock-moss: #759884; }
.game[data-graphics="garden"] .mountain-layer { --rock-body: #778276; --rock-top: #b5bea4; --rock-light: #e0e2c1; --rock-dark: #4c5a50; --rock-moss: #8da45b; }
.game[data-graphics="ruins"] .mountain-layer { --rock-body: #737c7a; --rock-top: #aab3a7; --rock-light: #d9dac7; --rock-dark: #424e4d; --rock-moss: #708656; }
.mountain-layer .rock-shadow { fill: #20372d; opacity: .45; }
.mountain-layer .rock-body { fill: var(--rock-body); stroke: var(--rock-dark); stroke-width: 2; stroke-linejoin: round; }
.mountain-layer .rock-top { fill: var(--rock-top); }
.mountain-layer .rock-rim { fill: none; stroke: var(--rock-light); stroke-width: 2.5; stroke-linejoin: round; opacity: .65; }
.mountain-layer .rock-cracks { fill: none; stroke: var(--rock-dark); stroke-width: 2; stroke-linecap: round; opacity: .65; }
.mountain-layer .rock-facet { fill: var(--rock-dark); stroke: none; opacity: .35; }
.mountain-layer .rock-moss { fill: var(--rock-moss); opacity: .75; }
.mountain-layer .rock-glint { fill: none; stroke: var(--rock-light); stroke-width: 2.5; stroke-linecap: round; opacity: .75; }
.game .cell.fog { cursor: default; background: none; box-shadow: none; }
.game .cell.fog::before, .game .cell.frontier::after, .game .cloud-detail { display: none; }
.game .cell.frontier { background: radial-gradient(ellipse at 50% 55%, #f4f9b840, #f1f3c518 65%, transparent); box-shadow: inset 0 0 0 1px #f3f9cb38; }
.game .cell.frontier .fog-mark { display: grid; place-items: center; width: 100%; height: 100%; }
.game .frontier-seed { width: 6px; height: 6px; border-radius: 50%; background: #fff8cf; border: 1px solid #f7faca; box-shadow: 0 1px 2px #365a3970, 0 0 9px 3px #fff4bc70; }
.game .cell.mud.frontier { background: #ac975e45; }
.game .cell.web.frontier { background: #e0f1e438; }
.game .cell.mud.revealed { background: linear-gradient(#75804c25,#75804c25),url('../assets/bog-tile.png') center / cover; }
.game .cell.mud.revealed::after { display: none; }
.game .cell.web.revealed { background: #c6dcaa20; }
.game .fog-mark { color: #687d4f; font-size: 21px; }
.game .terrain-cost { bottom: 6px; right: 8px; color: #3d5237; font-size: 8px; z-index: 1; }
.game .object { inset: 3px 4px 6px; filter: drop-shadow(0 5px 2px #23422d65); z-index: 1; }
.game .object .icon { max-height: none; }
.game .hp-bar { bottom: 3px; height: 5px; background: #30432b; border: 1px solid #263924; z-index: 2; }
.game .hp-bar i { background: #f6c871; }
.game .board-bottom { width: 100%; font-size: 9px; line-height: 15px; margin: 14px 0 0; color: #d0dbbc; gap: 5px; flex-shrink: 0; }
.game .board-bottom > span { gap: 3px; }
.game .board-bottom .icon { width: 13px; height: 13px; }
.game .map-legend { display: flex; align-items: center; gap: 4px; }
.game .map-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.game .map-legend .legend-frontier { background: #fff8cf; border: 1px solid #fff3c4; border-radius: 50%; box-shadow: 0 0 4px #fff7b960; }
.game .legend-fog { background: #d5e6d5; margin-left: 5px; }

/* A joined gold contour shows the actual affected cells, not the whole lantern footprint. */
.game .cell.preview { --preview-color: #ffe28a; background-color: #f8e6a163; box-shadow: none; z-index: 3; }
.game .cell.preview.frontier, .game .cell.preview.fog { background: #f6e9ae80; }
.game .cell.preview .frontier-seed { visibility: hidden; }
.game .cell.preview::before { display: block; content: ''; position: absolute; inset: 0; border-style: solid; border-color: var(--preview-color); border-width: var(--preview-top) var(--preview-right) var(--preview-bottom) var(--preview-left); border-radius: inherit; background: #ffe39026; pointer-events: none; z-index: 3; }
.game .cell.preview.frontier::after { content: none; }
.game .cell.preview-center, .game .cell.preview-object { outline: none; box-shadow: inset 0 0 0 2px #fff7c7; z-index: 4; }
.game .cell.preview.preview-center::after { content: attr(data-preview-cost); display: grid; place-items: center; position: absolute; inset: auto 3px 3px auto; width: 21px; height: 18px; border: 0; border-radius: 5px; background: #f5d577; color: #39412c; font-size: 11px; font-weight: 900; z-index: 4; }
.game .cell.preview-object::after { content: attr(data-preview-badge); position: absolute; left: 50%; top: -9px; transform: translateX(-50%); padding: 3px 5px; background: #fff0b3; border-radius: 5px; color: #33432c; white-space: nowrap; font-size: 9px; font-weight: 800; z-index: 5; box-shadow: 0 2px 4px #193a2c40; }
.game .cell.preview-blocked { --preview-color: #ffc4a0; background-color: #d8b898; }
.game .cell:focus-visible { outline: 3px solid #fff0b3; outline-offset: -3px; z-index: 5; }

.game .game-footer { position: relative; flex-shrink: 0; margin: 0; padding: 6px 15px 3px; background: linear-gradient(0deg,#264f38dd,#426b4538); border: 0; }
/* A constant footprint keeps the map still while the compact readout changes. */
.game .action-preview { display: flex; align-items: center; gap: 8px; height: 60px; min-height: 60px; padding: 5px 8px; color: #fff7db; border: 1px solid transparent; border-top-color: #e3eabc36; border-radius: 0; background: none; box-shadow: none; }
.game .action-emblem { flex-shrink: 0; display: grid; place-items: center; width: 27px; height: 32px; }
.game .action-emblem .icon { width: 24px; height: 30px; }
.game .action-copy { min-width: 0; flex: 1; }
.game .action-copy b { font-size: 13px; line-height: 15px; display: block; }
.game .action-copy p { color: #f0edc9; font-size: 10px; line-height: 12px; margin-top: 2px; }
.game .action-copy p:empty { display: none; }
.game .action-copy .gesture-hint { color: #d9e6c1; font-size: 9px; line-height: 11px; margin-top: 3px; text-align: left; min-height: 0; }
.game .action-cost { flex-shrink: 0; width: 37px; border-left: 1px solid #e3da9f40; padding-left: 8px; text-align: center; color: #ffdf8d; }
.game .action-cost[hidden] { display: none; }
.game .action-cost b { display: block; font-size: 22px; line-height: 1; }
.game .action-cost span { font-size: 9px; }
.game .action-preview.active { border-color: #eed69170; background: #f5de9a12; border-radius: 10px; }
.game .action-preview.blocked { border-color: #e3ac89; border-radius: 10px; }
.game .action-preview.blocked .action-cost { color: #ffc5a0; }
.game .action-preview.cancelled { border-top-style: dashed; }
.game .gear-stats { color: #dae4c9; gap: 15px; margin: 0; min-height: 44px; font-size: 10px; font-weight: 600; }
.game .gear-stats .icon { width: 18px; height: 21px; }
.game .gear-stats button { min-height: 44px; padding: 9px 0 9px 14px; color: #f0eed6; font-size: 11px; }
@media (max-width: 360px) {
  .game .game-top { padding: 6px 8px 3px; }
  .game .game-top h2 { font-size: 18px; }
  .game .game-top small { font-size: 8px; }
  .game .expedition-hud { padding: 6px 14px 8px; gap: 7px; }
  .game .quest-summary { gap: 6px; }
  .game .quest-summary > .icon { width: 33px; height: 36px; }
  .game .quest-summary span { font-size: 11px; }
  .game .quest-summary b { font-size: 22px; }
  .game .quest-pips { gap: 3px; }
  .game .turns-remaining { min-width: 70px; padding-right: 8px; }
  .game .turns-remaining b { font-size: 28px; }
  .game .expedition-loot { margin: 0 14px; gap: 8px; padding: 7px 0; }
  .game .expedition-loot .wallet { gap: 10px; }
  .game .board-surround { padding: 22px 10px 0; }
  .game .board-bottom { font-size: 8px; }
  .game .game-footer { padding: 5px 10px 2px; }
  .game .action-preview { gap: 6px; padding: 4px 5px; }
  .game .action-copy b { font-size: 12px; }
  .game .action-copy p { font-size: 10px; }
  .game .gesture-hint { font-size: 9px; }
  .game .gear-stats { font-size: 10px; }
}
@media (max-height: 700px) {
  .game .game-top { padding-top: 4px; padding-bottom: 0; }
  .game .expedition-hud { padding-top: 3px; padding-bottom: 5px; }
  .game .expedition-loot { padding-top: 5px; padding-bottom: 5px; }
  .game .board-surround { padding-top: 20px; }
  .game .game-footer { padding-top: 6px; }
  .game .action-preview { padding-top: 4px; padding-bottom: 4px; }
  
}

/* Prototype art comparison: the board and its hit regions never move on switch. */
.game .graphics-picker { margin: 0 16px 4px; flex-shrink: 0; }
.game .graphics-caption { display: flex; justify-content: space-between; gap: 8px; align-items: center; color: #dbe4cb; font-size: 9px; line-height: 16px; }
.game .graphics-caption > span:first-child { font-size: 8px; letter-spacing: 1.3px; opacity: .72; }
.game .graphics-options { display: flex; padding: 3px; gap: 3px; border: 1px solid #e7efc827; border-radius: 13px; background: #10252250; }
.game .graphics-options button { min-width: 0; flex: 1; min-height: 38px; padding: 4px 2px; border-radius: 9px; color: #dce4cf; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 10px; border: 1px solid transparent; }
.game .graphics-options button[aria-pressed="true"] { color: #fff5d5; border-color: #e4d7ac88; background: #f3e2a522; box-shadow: inset 0 1px #fff7d422; }
.game .graphics-options button:hover { background: #fff8da17; }
.game .graphics-options button:focus-visible { outline: 2px solid #ffecb6; outline-offset: 1px; }
.game .graphics-options i { width: 10px; height: 10px; border-radius: 3px; background: #82a351; box-shadow: inset 0 1px #ffffff60,0 1px 2px #0003; flex-shrink: 0; }
.game [data-graphics="magic"] i { background: linear-gradient(135deg,#d3a0e4 50%,#85c9a3 50%); }
.game [data-graphics="garden"] i { background: linear-gradient(135deg,#cee093 50%,#7eac62 50%); }
.game [data-graphics="ruins"] i { background: linear-gradient(135deg,#c5c59d 50%,#5e796b 50%); border-radius: 0; }
.game[data-graphics="magic"] { background: radial-gradient(ellipse at 50% 45%,#7796a8 0%,#455478 56%,#303c61 100%); --quiet:#c4cfdf; }
.game[data-graphics="garden"] { background: radial-gradient(ellipse at 50% 48%,#a7b985,#64815e 55%,#3c5d48 100%); }
.game[data-graphics="ruins"] { background: radial-gradient(ellipse at 47% 38%,#a9b79866,transparent 60%),linear-gradient(145deg,#263e3c,#627c6a 52%,#263c39); }
.game[data-graphics="magic"] .game-footer { background: linear-gradient(0deg,#303959dd,#40547138); }
.game[data-graphics="garden"] .game-footer { background: linear-gradient(0deg,#3b5b45dd,#66835938); }
.game[data-graphics="ruins"] .game-footer { background: linear-gradient(0deg,#283e37dd,#4f665438); }
.game[data-graphics="magic"] .game-top small,
.game[data-graphics="magic"] .quest-summary small,
.game[data-graphics="magic"] .board-bottom { color: #d1dced; }
.game[data-graphics="magic"] .ground-layer { filter: drop-shadow(0 5px 0 #303a6655) drop-shadow(0 12px 12px #202a5155); }
.game[data-graphics="magic"] .cloud-highlight { stop-color:#fff0ff; }
.game[data-graphics="magic"] .cloud-mid { stop-color:#ded2f1; }
.game[data-graphics="magic"] .cloud-edge { stop-color:#adb5dd; }
.game[data-graphics="magic"] .mist-top { stop-color:#999ec9; }
.game[data-graphics="magic"] .mist-middle { stop-color:#c2b1dc; }
.game[data-graphics="magic"] .mist-bottom { stop-color:#828bb8; }
.game[data-graphics="magic"] .legend-fog { background:#c2b1dc; }
.game[data-graphics="magic"] .cell.frontier:not(.preview) { background: radial-gradient(ellipse,#f1ecdd70,#e7dced28 60%,transparent); box-shadow: inset 0 0 0 1px #f8edff48; }
.game[data-graphics="magic"] .frontier-seed { background:#fff1c5; box-shadow: 0 0 9px 3px #fff1c599; }
.game[data-graphics="garden"] .cloud-highlight { stop-color:#fffef0; }
.game[data-graphics="garden"] .cloud-mid { stop-color:#f1f3dc; }
.game[data-graphics="garden"] .mist-top { stop-color:#c4d6bc; }
.game[data-graphics="garden"] .mist-middle { stop-color:#e1e9ce; }
.game[data-graphics="garden"] .mist-bottom { stop-color:#adc7a9; }
.game[data-graphics="garden"] .cell.revealed:not(.preview) { box-shadow:none; }
.game[data-graphics="garden"] .scenery-layer { filter:drop-shadow(0 2px 1px #25472633); }
.game[data-graphics="ruins"] .cloud-highlight { stop-color:#e1e7cc; stop-opacity:.6; }
.game[data-graphics="ruins"] .cloud-mid { stop-color:#aebfaf; stop-opacity:.45; }
.game[data-graphics="ruins"] .mist-top { stop-color:#859e90; }
.game[data-graphics="ruins"] .mist-middle { stop-color:#b3c3ab; }
.game[data-graphics="ruins"] .mist-bottom { stop-color:#6e8b7d; }
.game[data-graphics="ruins"] .legend-fog { background:#b3c3ab; }
.game[data-graphics="ruins"] .object { filter: saturate(.72) drop-shadow(3px 5px 1px #233d3860); }
.game[data-graphics="ruins"] .ground-layer { filter:drop-shadow(0 6px 0 #233c3555) drop-shadow(5px 12px 10px #172f2c55); }
.game[data-graphics="ruins"] .cell.revealed:not(.preview) { box-shadow:inset 0 0 0 .5px #334f3924; }
.game[data-graphics="ruins"] .cell.frontier:not(.preview) { background:#d5dbac25; box-shadow:inset 0 0 0 .5px #e2e9b955; }
.game[data-graphics="ruins"] .frontier-seed { width:5px; height:5px; border-radius:0; transform:rotate(45deg); box-shadow:0 0 7px #e8e4b060; }
.game[data-graphics="ruins"] .scenery-layer { filter:drop-shadow(4px 5px 1px #20383133); }
.game[data-graphics="ruins"] .board-surround::before { content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 18%,#f3edb108 18%,#f3edb108 34%,transparent 34%,transparent 53%,#f3edb109 53%,#f3edb109 59%,transparent 59%); pointer-events:none; }
@media(max-width:360px) {
 .game .graphics-picker { margin-left:10px; margin-right:10px; }
 .game .graphics-options button { font-size:9px; gap:4px; }
 .game .graphics-caption { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) { .game .cell { transition:none; } }

/* Imported settings supply terrain colours, object accents and level-2 frames. */
.currency b{color:var(--resource-color,inherit)}
.game .cell.pattern-dirt.revealed{background:linear-gradient(var(--terrain-color),var(--terrain-color)),url('../assets/bog-tile.png');background-blend-mode:multiply;background-size:cover;opacity:1}
.game .cell.pattern-dirt.frontier{background:color-mix(in srgb,var(--terrain-color) 45%,transparent)}
.game .cell.pattern-web.revealed{background:color-mix(in srgb,var(--terrain-color) 60%,transparent)}
.game .cell.pattern-web.frontier{background:color-mix(in srgb,var(--terrain-color) 35%,transparent)}
.game .object{filter:drop-shadow(0 2px 2px #17392960) drop-shadow(0 0 3px var(--object-color))}
.object-ring:after{content:'';position:absolute;inset:0;border:3px double #ffd24a;border-radius:50%;pointer-events:none}
.home .level-strip{justify-content:space-around}

/* Leave room for scenery outside the interactive square. */
.game .board-surround { padding-left:34px; padding-right:34px; }
@media(max-width:360px) { .game .board-surround { padding-left:28px; padding-right:28px; } }

.game .board { width:min(100cqw,calc((100cqh - 43px) * var(--cols) / var(--rows))); }
.game .board-bottom { margin-top:24px; }

/* Art pass 2: independent painted / sculpted / polygonal materials and sprites. */
.game .atlas-sprite { display:block; pointer-events:none; }
.game .themed-object { width:100%; height:100%; overflow:hidden; }
.game .themed-object.violet-gem { filter:hue-rotate(56deg) saturate(.8); }
.game:not([data-graphics="original"]) .object { inset:0px 1px 3px; }
.game:not([data-graphics="original"]) .scenery-layer { filter:drop-shadow(0 4px 3px #18352840); }
.game:not([data-graphics="original"]) .cell.revealed:not(.preview) { box-shadow:none; }
.game .board-surround { padding-top:42px; }
.game .board { width:min(100cqw,calc((100cqh - 49px) * var(--cols) / var(--rows))); }
.game .board-bottom { margin-top:30px; }
.game[data-graphics="magic"] { background: radial-gradient(ellipse at 48% 52%,#70939c 0,#3c6280 48%,#273758 100%); }
.game[data-graphics="magic"] .ground-layer { filter:drop-shadow(0 6px 0 #30356788) drop-shadow(0 13px 13px #14224199); }
.game[data-graphics="magic"] .object { filter:drop-shadow(0 4px 2px #344d4666); }
.game[data-graphics="magic"] .game-top h2 { color:#fff3d1; text-shadow:0 2px 0 #27314d,0 0 18px #e2bef233; }
.game[data-graphics="magic"] .turns-remaining { border:1px solid #ebc78199; background:linear-gradient(145deg,#6d7897,#3e486e); box-shadow:inset 0 2px #d6d1d544,0 3px 0 #283352; border-radius:17px; }
.game[data-graphics="magic"] .game-top .round { border-color:#afbedb66; background:linear-gradient(#6e83a7,#3b5077); box-shadow:inset 0 2px #ffffff22,0 2px 0 #203652; }
.game[data-graphics="magic"] .cell.frontier:not(.preview) { background:radial-gradient(ellipse,#fff2c015,transparent); box-shadow:inset 0 0 0 1px #fff9d255; }
.game[data-graphics="magic"] .frontier-seed { width:8px; height:8px; border-color:#fff5cb; background:#ffe291; box-shadow:0 0 12px 4px #ffeb9b88; }
.game[data-graphics="magic"] .legend-fog { background:#c1a4e1; }
.game[data-graphics="magic"] .graphics-options button[aria-pressed="true"] { background:linear-gradient(#af83bd88,#71559d99); border-color:#e2bddd; }
.game[data-graphics="garden"] { background:radial-gradient(ellipse at 50% 53%,#afbc8f 0%,#71825c 48%,#3d5545 100%); }
.game[data-graphics="garden"] .game-top h2 { font-family:Georgia,serif; font-weight:700; letter-spacing:.2px; }
.game[data-graphics="garden"] .ground-layer { filter:drop-shadow(0 5px 0 #625139aa) drop-shadow(0 12px 10px #273d2b70); }
.game[data-graphics="garden"] .object { filter:drop-shadow(0 3px 2px #23352b66); }
.game[data-graphics="garden"] .turns-remaining { border-color:#d4c39677; border-radius:9px; background:linear-gradient(130deg,#c1ad722f,#ebddb214); }
.game[data-graphics="garden"] .cell.frontier:not(.preview) { background:#eff1c917; box-shadow:inset 0 0 0 1px #edf1d355; }
.game[data-graphics="garden"] .frontier-seed { background:#fffceb; border-color:#d7cd9b; width:7px; height:7px; box-shadow:0 1px 3px #294f4266,0 0 7px #fff4af55; }
.game[data-graphics="garden"] .game-footer { background:linear-gradient(0deg,#344d3bdd,#71825c22); }
.game[data-graphics="garden"] .graphics-options button[aria-pressed="true"] { background:#d6cc9e25; border-color:#e1d5ad99; }
.game[data-graphics="ruins"] { background:linear-gradient(150deg,#192f32 0%,#365451 46%,#172f30 100%); }
.game[data-graphics="ruins"] .game-top h2 { font-size:20px; font-weight:500; letter-spacing:1.3px; text-shadow:none; }
.game[data-graphics="ruins"] .game-top .round { border-radius:3px; border-color:#b6c7b833; background:#1c373a; box-shadow:none; }
.game[data-graphics="ruins"] .turns-remaining { border-radius:2px; background:#203c3c; border-color:#99b09a33; box-shadow:none; }
.game[data-graphics="ruins"] .turns-remaining b { font-weight:500; }
.game[data-graphics="ruins"] .object { filter:drop-shadow(4px 6px 0 #20372c66); }
.game[data-graphics="ruins"] .ground-layer { filter:drop-shadow(5px 9px 0 #122d2980); }
.game[data-graphics="ruins"] .scenery-layer { filter:drop-shadow(5px 7px 0 #19332d70); }
.game[data-graphics="ruins"] .game-footer { background:#20373788; }
.game[data-graphics="ruins"] .graphics-options { border-radius:3px; background:#19313377; }
.game[data-graphics="ruins"] .graphics-options button { border-radius:2px; font-weight:500; }
.game[data-graphics="ruins"] .graphics-options button[aria-pressed="true"] { background:#9fac8030; border-color:#a8bd9b66; }
.game[data-graphics="ruins"] .cell.frontier:not(.preview) { background:#b7c89518; box-shadow:inset 0 0 0 1px #b9cfaa55; }
.game[data-graphics="ruins"] .frontier-seed { width:7px; height:7px; background:#e5ddaa; border:0; box-shadow:none; }
.game[data-graphics="ruins"] .legend-fog { background:#3b594e; border:1px solid #71877a; }
.game[data-graphics="ruins"] .hp-bar,.game[data-graphics="ruins"] .hp-bar i { border-radius:0; }
@media(max-width:360px) {
 .game .board-surround { padding-top:32px; }
 .game[data-graphics="ruins"] .game-top h2 { font-size:18px; }
}

.game .graphics-ui-icon { display:block; }
.game .graphics-ui-icon > svg { width:100%; height:100%; }
.game:not([data-graphics="original"]) .object { inset:-5px -4px 0; }
.game[data-graphics="magic"] .themed-object:not(.violet-gem) { filter:saturate(1.12); }
.game[data-graphics="garden"] .ground-layer { opacity:.97; }
/* Typeface changes must not nudge the board during a visual comparison. */
.game .game-top { height:66px; flex-shrink:0; }
@media(max-height:700px) { .game .game-top { height:54px; } }

/* Art pass 3: quieter materials, deliberate framing, clear interaction accents. */
.game[data-graphics="magic"] { --quiet:#ccd4dc; background:radial-gradient(ellipse at 43% 51%,#779fa6 0,#436783 44%,#26334f 100%); }
.game[data-graphics="magic"] .cell.frontier:not(.preview) { background:radial-gradient(ellipse,#fff4c824,transparent 65%); box-shadow:inset 0 0 0 .6px #f4e8ff24; }
.game[data-graphics="magic"] .frontier-seed { width:7px; height:7px; box-shadow:0 0 0 3px #ffe59b19,0 0 12px 3px #ffeaa180; }
.game[data-graphics="magic"] .object { filter:drop-shadow(0 5px 2px #254b4566) drop-shadow(0 -1px 1px #edffd833); }
.game[data-graphics="magic"] .game-footer { background:linear-gradient(0deg,#25334fcc,#3b5a7810); }
.game[data-graphics="magic"] .ground-layer { filter:drop-shadow(0 4px 0 #29294366) drop-shadow(0 14px 12px #14263f77); }
.game[data-graphics="garden"] { --quiet:#d0d8c3; background:radial-gradient(ellipse at 47% 49%,#a6b791 0,#647f69 47%,#2e4a43 100%); }
.game[data-graphics="garden"] .cell.frontier:not(.preview) { background:radial-gradient(ellipse,#f8edc11c,transparent 67%); box-shadow:inset 0 0 0 .6px #f6f2db28; }
.game[data-graphics="garden"] .frontier-seed { width:7px; height:7px; background:#fff2c3; box-shadow:0 0 0 3px #f3e4a51a,0 1px 3px #294f4255; }
.game[data-graphics="garden"] .object { filter:drop-shadow(0 4px 2px #2f48386b) saturate(1.08); }
.game[data-graphics="garden"] .ground-layer { opacity:1; filter:drop-shadow(0 4px 0 #494b3766) drop-shadow(0 12px 11px #203b3466); }
.game[data-graphics="garden"] .game-footer { background:linear-gradient(0deg,#2d4941cc,#58776210); }
.game[data-graphics="garden"] .legend-fog { background:#b4c9c4; }
.game[data-graphics="ruins"] { --quiet:#b7c8bd; background:radial-gradient(ellipse at 46% 40%,#3d5f59,#1a3435 70%); }
.game[data-graphics="ruins"] .board-surround::before { opacity:.4; }
.game[data-graphics="ruins"] .cell.frontier:not(.preview) { background:#d4bc6910; box-shadow:inset 0 0 0 1px #cdbd7155; }
.game[data-graphics="ruins"] .frontier-seed { width:8px; height:8px; background:#f1d38b; box-shadow:2px 2px 0 #1e3c3566; }
.game[data-graphics="ruins"] .object { filter:drop-shadow(4px 5px 0 #314d3b55); }
.game[data-graphics="ruins"] .ground-layer { filter:drop-shadow(5px 10px 0 #132e2c80); }
.game[data-graphics="ruins"] .map-legend .legend-frontier { border-radius:0; transform:rotate(45deg) scale(.7); background:#f1d38b; border:0; box-shadow:none; }
.game[data-graphics="ruins"] .legend-fog { background:#2d4b46; }
.game[data-graphics="ruins"] .game-footer { background:linear-gradient(0deg,#162d2fbb,transparent); }
/* Keep configured special terrain distinguishable after the material pass. */
.game:not([data-graphics="original"]) .cell.pattern-dirt.frontier { background:color-mix(in srgb,var(--terrain-color) 45%,transparent); }
.game:not([data-graphics="original"]) .cell.pattern-web.frontier { background:color-mix(in srgb,var(--terrain-color) 35%,transparent); }

/* Revealed interactable objects stay in front of peripheral foliage. */
.game:not([data-graphics="original"]) .cell.occupied:not(.preview) { z-index:2; }
.game:not([data-graphics="original"]) .terrain-cost { color:#fff0c4; background:#263b32df; border:1px solid #e5d49555; padding:2px 3px; bottom:3px; right:3px; border-radius:3px; line-height:1; }
.game:not([data-graphics="original"]) .cell.pattern-dirt .fog-mark,
.game:not([data-graphics="original"]) .cell.pattern-web .fog-mark { color:#f0e2b8; }

/* The two merge studies share an oblique ground plane; sprites stand upright. */
.game:is([data-graphics="magic"],[data-graphics="garden"]) .board {
 width:min(calc(100cqw / 1.22),calc((100cqh - 64px) * var(--cols) / var(--rows)));
 transform:matrix(1,-.22,.22,.78,0,0);
 transform-origin:50% 50%;
}
.game:is([data-graphics="magic"],[data-graphics="garden"]) .board-surround { padding-top:50px; }
.game:is([data-graphics="magic"],[data-graphics="garden"]) .object {
 transform:matrix(.941574,.265572,-.265572,1.207146,0,0);
 transform-origin:50% 85%;
 inset:-9px -6px 0;
}
.game:is([data-graphics="magic"],[data-graphics="garden"]) .hp-bar {
 transform:matrix(.941574,.265572,-.265572,1.207146,0,0);
 transform-origin:50% 50%; bottom:0;
}
.game:is([data-graphics="magic"],[data-graphics="garden"]) .terrain-cost,
.game:is([data-graphics="magic"],[data-graphics="garden"]) .cell.preview-object::after,
.game:is([data-graphics="magic"],[data-graphics="garden"]) .cell.preview-center::after {
 transform:matrix(.941574,.265572,-.265572,1.207146,0,0);
}
.game:is([data-graphics="magic"],[data-graphics="garden"]) .cell.frontier:not(.preview) { box-shadow:none; }
.game:is([data-graphics="magic"],[data-graphics="garden"]) .board-bottom { margin-top:36px; }
.game[data-graphics="magic"] .ground-layer { filter:drop-shadow(0 10px 13px #172d4677); }
.game[data-graphics="garden"] .ground-layer { filter:drop-shadow(0 9px 9px #183d3466); }
@media(max-width:360px) {
 .game:is([data-graphics="magic"],[data-graphics="garden"]) .board-surround { padding-left:23px; padding-right:23px; padding-top:40px; }
}
.game:is([data-graphics="magic"],[data-graphics="garden"]) .cell.occupied .object { pointer-events:auto; }
.game:is([data-graphics="magic"],[data-graphics="garden"]) .floating-reward { animation-name:landscape-reward; }
.game:is([data-graphics="magic"],[data-graphics="garden"]) .just-hit .object { animation-name:landscape-hit; }
@keyframes landscape-reward {
 from { transform:matrix(.941574,.265572,-.265572,1.207146,0,0) translateY(0); opacity:1; }
 to { transform:matrix(.941574,.265572,-.265572,1.207146,0,0) translateY(-35px); opacity:0; }
}
@keyframes landscape-hit {
 0%,100% { transform:matrix(.941574,.265572,-.265572,1.207146,0,0); }
 35% { transform:matrix(.941574,.265572,-.265572,1.207146,0,0) translateX(-4px) rotate(-5deg); }
 65% { transform:matrix(.941574,.265572,-.265572,1.207146,0,0) translateX(3px) rotate(4deg); }
}
.game:is([data-graphics="magic"],[data-graphics="garden"]) .cell.preview-object::after {
 transform:matrix(.941574,.265572,-.265572,1.207146,0,0) translateX(-50%);
 transform-origin:0 100%;
}
/* Reference clouds are much lighter; keep interactive markers readable. */
.game[data-graphics="magic"] .legend-fog { background:#c4e4ed; }
.game[data-graphics="garden"] .legend-fog { background:#e1eff7; }
.game:is([data-graphics="magic"],[data-graphics="garden"]) .frontier-seed {
 background:#ffe49a; border:1px solid #9b8647; box-shadow:0 1px 2px #40524955,0 0 0 3px #fff7c52b;
}
/* Gardens continues beyond the playable map into a ring of non-interactive land. */
.game[data-graphics="garden"] .board-surround { overflow:hidden; }
.game[data-graphics="garden"] .board {
 width:min(calc(100cqw / 1.36),calc((100cqh - 94px) * var(--cols) / var(--rows)));
}
.game[data-graphics="garden"] .board-bottom { margin-top:67px; }
.game[data-graphics="garden"] .themed-scenery { filter:drop-shadow(0 3px 2px #25452655); }

/* Reference comparison, pass 1: daylight, island mass and planted garden beds. */
.game[data-graphics="magic"] { --quiet:#426574; color:#34556c; background:radial-gradient(ellipse at 25% 47%,#d5efdc 0,transparent 46%),linear-gradient(135deg,#a0ccd8,#77b7d1 65%,#add8de); }
.game[data-graphics="magic"] .board-surround::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.9; background:radial-gradient(ellipse 85px 45px at 4% 29%,#f2fcf2ce,transparent),radial-gradient(ellipse 90px 65px at 95% 64%,#eef9f5db,transparent),radial-gradient(ellipse 75px 32px at 25% 87%,#eaf8f1ba,transparent); }
.game[data-graphics="magic"] .game-top h2 { color:#304f69; text-shadow:0 1px #effaff; }
.game[data-graphics="magic"] .game-top small,
.game[data-graphics="magic"] .quest-summary span,
.game[data-graphics="magic"] .quest-summary small,
.game[data-graphics="magic"] .board-bottom,
.game[data-graphics="magic"] .gear-stats,
.game[data-graphics="magic"] .gear-stats button,
.game[data-graphics="magic"] .action-copy p,
.game[data-graphics="magic"] .action-copy .gesture-hint,
.game[data-graphics="magic"] .chest-progress small { color:#3d6070; }
.game[data-graphics="magic"] .expedition-loot .currency b { color:#3d6070; }
.game[data-graphics="magic"] .turns-remaining { color:#365c78; background:linear-gradient(#f5f3da,#cfdfd4); border-color:#f7fff2; box-shadow:0 3px #6097ad55; }
.game[data-graphics="magic"] .turns-remaining span { color:#547482; }
.game[data-graphics="magic"] .game-top .round { color:#f7ffff; background:linear-gradient(#7ab6cc,#4d8caf); border-color:#dbf3f0; }
.game[data-graphics="magic"] .graphics-options { background:#effbfa44; border-color:#e5f9f57a; }
.game[data-graphics="magic"] .graphics-options button { color:#385d6e; }
.game[data-graphics="magic"] .graphics-options button[aria-pressed="true"] { background:#528bad; color:#fffbe5; border-color:#d6f6ee; }
.game[data-graphics="magic"] .game-footer { background:linear-gradient(0deg,#bfe2e9b0,#d1ede71a); }
.game[data-graphics="magic"] .action-preview { color:#2d5369; border-top-color:#507e8944; }
.game[data-graphics="magic"] .board-bottom { margin-top:70px; }
.game[data-graphics="magic"] .ground-layer { filter:drop-shadow(0 14px 15px #3e80955c); }
.game[data-graphics="garden"] { background:radial-gradient(ellipse at 50% 45%,#91b957,#4e753a 80%); }
.game[data-graphics="garden"] .board-surround::before { content:''; position:absolute; inset:0; background:linear-gradient(#668c4155,transparent 15%,transparent 85%,#60823f55); pointer-events:none; }
.game[data-graphics="garden"] .themed-scenery .atlas-sprite { filter:saturate(1.3) brightness(1.12); }
.game:is([data-graphics="magic"],[data-graphics="garden"]) .object { inset:-4px -1px 3px; filter:drop-shadow(0 4px 2px #34503377); }
/* Reference comparison, pass 2: large cloud forms and continuous garden world. */
.game[data-graphics="garden"] .ground-layer { filter:none; }
.game[data-graphics="garden"] .board-bottom { position:relative; z-index:3; }
.game[data-graphics="magic"] .graphics-caption { color:#496b7e; }
.game[data-graphics="magic"] .map-legend .legend-frontier { border-color:#9b8647; background:#ffe49a; box-shadow:none; }
/* Reference comparison, pass 4: stronger scene scale and quieter cloud masses. */
.game[data-graphics="magic"] .board { width:min(calc(100cqw / 1.13),calc((100cqh - 90px) * var(--cols) / var(--rows))); }
.game[data-graphics="magic"] .board-surround { padding-top:20px; }
.game[data-graphics="garden"] .board { width:min(calc(100cqw / 1.30),calc((100cqh - 94px) * var(--cols) / var(--rows))); }
.game[data-graphics="garden"] .board-surround { padding-top:34px; }
.game[data-graphics="magic"] .object { filter:drop-shadow(0 4px 2px #4168417a); }

/* Terrain materials share the ground projection and never intercept a gesture. */
.game .terrain-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.game .cell:is(.pattern-dirt,.pattern-web):is(.revealed,.frontier) { background:none; box-shadow:none; }
.game .cell:is(.pattern-dirt,.pattern-web) .fog-mark { display:none; }
.game .cell.frontier .terrain-art { opacity:.86; }
.game .cell.revealed .terrain-art { opacity:1; }
.game .cell .terrain-cost { z-index:2; white-space:nowrap; }
.game[data-graphics="original"] .terrain-cost { color:#fff0c4; background:#30442bdd; border:1px solid #e5d49555; padding:2px 3px; border-radius:3px; }
.game .cell.preview .terrain-art { opacity:.55; }
.game[data-graphics="magic"] .terrain-web { filter:drop-shadow(0 0 2px #d8ddff99); }
.game[data-graphics="garden"] .terrain-web { filter:drop-shadow(0 1px 1px #40502e88); }
.game[data-graphics="ruins"] .terrain-art { filter:none; }
.game[data-graphics="ruins"] .mountain-layer .rock-body { stroke-width:0; }
.game[data-graphics="ruins"] .mountain-layer .rock-rim,
.game[data-graphics="ruins"] .mountain-layer .rock-glint { display:none; }
.game[data-graphics="ruins"] .mountain-layer .rock-cracks { stroke-width:1.1; opacity:.35; }
.game[data-graphics="ruins"] .mountain-layer .rock-facet { opacity:.65; }
.game[data-graphics="ruins"] .mountain-layer .rock-moss { opacity:.4; }
/* Merge variants keep broad, quiet rock faces instead of detailed atlas clusters. */
.game:is([data-graphics="magic"],[data-graphics="garden"]) .mountain-layer .rock-cracks { opacity:.38; }
.game:is([data-graphics="magic"],[data-graphics="garden"]) .mountain-layer .rock-glint { opacity:.45; }

/* Two-digit enemy totals must fit beside the move counter on mobile. */
.game .quest-summary > div{min-width:0;column-gap:8px}
.game .quest-summary b{white-space:nowrap}
.game .quest-pips{flex-wrap:wrap;max-width:60px;gap:3px}
.game .quest-pips i{flex:0 0 6px}