:root {
  font-family: var(--font-ui);
  color: var(--c-text);
  background: var(--c-bg);
  /* Legacy names, kept as aliases of tokens.css. */
  --gold: var(--c-gold);
  --aqua: var(--c-aqua);
  --muted: var(--c-text-3);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font-variant-numeric: lining-nums; background: radial-gradient(circle at 50% -5%, #244d62 0, transparent 44%), linear-gradient(180deg, #0c1c2c, #08131f 56%, #06101b); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .48; cursor: not-allowed; }
/* One focus style for every control (FE-39). */
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.shell { width: min(100%, 520px); min-height: 100vh; margin: auto; padding: 0 14px calc(95px + var(--safe-bottom)); background: linear-gradient(90deg, #07121e, #0e2233 8%, #0d2334 92%, #07121e); box-shadow: 0 0 80px #0009; }
.ghost { color: #f5dfb3; background: #17354a; border: 1px solid #6f847c; border-radius: 8px; padding: 9px 12px; font-weight: 800; }
.hero { position: relative; min-height: 144px; overflow: hidden; padding: 18px 18px 16px; border-radius: 14px; border: 1px solid #906c40; background: radial-gradient(circle at 87% 48%, #30798b 0, transparent 35%), linear-gradient(122deg, #1b3948, #153447 58%, #0d2639); box-shadow: inset 0 0 0 2px #23495a, 0 13px 30px #0007; }
.hero::before { content: ""; position: absolute; inset: 6px; border: 1px solid #b3864b45; pointer-events: none; border-radius: 9px; }
.hero-copy { position: relative; z-index: 2; max-width: 77%; }
.eyebrow { display: block; color: #e7bc78; font-size: var(--fs-overline); text-transform: uppercase; letter-spacing: .16em; font-weight: 800; }
.hero h1 { font-family: Georgia, "Palatino Linotype", serif; font-size: clamp(28px, 7vw, 39px); line-height: 1.03; color: #fff1d2; text-shadow: 0 2px 8px #07121e; margin: 8px 0 7px; }
.hero p { color: #c4d3d4; font-size: 12px; line-height: 1.4; margin: 0; max-width: 260px; }
.hero-emblem { position: absolute; width: 90px; height: 106px; right: 12px; bottom: 4px; display: grid; place-items: center; filter: drop-shadow(0 8px 13px #0008); }
.hero-emblem::before { content: ""; width: 70px; height: 80px; border: 4px solid #d4a55f; background: radial-gradient(circle, #83e6e0 0, #267885 30%, #123950 68%); clip-path: polygon(50% 0, 92% 19%, 84% 79%, 50% 100%, 16% 79%, 8% 19%); box-shadow: inset 0 0 22px #94f2e8; }
.hero-emblem-gem { position: absolute; font-size: 45px; color: #d4fcf6; text-shadow: 0 0 20px #8af9ec; }
.meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 9px 0 11px; }
.meter { padding: 10px 6px 9px; min-width: 0; text-align: center; border: 1px solid #6b775e; border-radius: 9px; background: linear-gradient(180deg, #213a46, #142937); box-shadow: inset 0 1px #385363; }
.meter small { display: block; color: #c5c5af; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter strong { display: block; margin-top: 2px; color: var(--c-gold); font-size: 16px; font-variant-numeric: var(--num); }
.tabs { position: fixed; z-index: var(--z-nav); bottom: 0; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(6, 1fr); width: min(100%, 520px); padding: 7px 6px calc(8px + var(--safe-bottom)); border-top: 2px solid #9b7545; background: linear-gradient(180deg, #1e3d4d, #102839); box-shadow: 0 -9px 27px #000a; }
.tabs button { min-width: 0; display: grid; justify-items: center; gap: 2px; padding: 3px 1px 2px; background: none; border: 0; color: #b2c9c9; font-size: 11px; line-height: 1.1; font-weight: 700; }
.tabs button::before { display: block; font-size: 21px; line-height: 1; height: 23px; color: #c6b590; }
.tabs button[data-tab="play"]::before { content: "⚔"; }.tabs button[data-tab="tower"]::before { content: "♜"; }.tabs button[data-tab="collection"]::before { content: "✦"; }.tabs button[data-tab="season"]::before { content: "◈"; }.tabs button[data-tab="economy"]::before { content: "◇"; }.tabs button[data-tab="history"]::before { content: "☷"; }
.tabs button.active { color: #ffdfa0; }.tabs button.active::before { color: #f6c768; text-shadow: 0 0 15px #ffc568; }
.card { position: relative; margin: 0 0 12px; padding: 16px; border: 1px solid #576b6b; border-radius: 12px; background: linear-gradient(155deg, #1b3444, #122839); box-shadow: inset 0 1px #45606a, 0 8px 20px #0005; }
.card h2 { font-family: Georgia, "Palatino Linotype", serif; font-size: 21px; line-height: 1.15; color: #f8e9c8; margin: 0 0 10px; }
.card h3 { color: #f4e6c6; font-size: 15px; margin: 0 0 8px; }
.card p { color: #c1d0d0; font-size: 13px; line-height: 1.5; margin: 5px 0 12px; }
.card small, .muted { color: #b2c4c8; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn { min-height: 42px; padding: 10px 14px; border: 1px solid #fae1a6; border-bottom-color: #8b5c28; border-radius: 8px; color: #342514; background: linear-gradient(180deg, #f8d58d, #d49c4d); box-shadow: inset 0 1px #fff5cc, 0 3px 0 #835824; font-weight: 800; }
.btn:active { transform: translateY(2px); box-shadow: inset 0 1px #fff5cc, 0 1px 0 #835824; }
.btn.secondary { background: linear-gradient(#396071, #25465a); border-color: #5e919a; color: #e6f4ee; box-shadow: inset 0 1px #638d98, 0 3px 0 #193243; }
.btn.subtle { background: #213c4e; border-color: #547786; color: #d5e7e3; box-shadow: none; }
.btn.danger { background: #783e3d; border-color: #af6764; color: #fff; box-shadow: none; }
.mini { font-size: 12px !important; }
input, select { max-width: 100%; min-width: 0; padding: 10px 11px; color: #f8f3e6; border: 1px solid #68818b; border-radius: 8px; background: #0d2231; }
input { width: 100%; }.field { display: grid; gap: 5px; flex: 1; min-width: 135px; }.field label { color: #c7d8d4; font-size: 11px; }
.notice { margin: 5px 0 10px; padding: 10px 13px; border: 1px solid #388774; border-radius: 9px; color: #ddfff5; background: #23534e; }.notice.error { border-color: #aa635c; color: #ffe4dc; background: #5d3135; }
.empty { padding: 13px; color: #adccd0; border: 1px dashed #61808a; border-radius: 9px; }
a { color: #ffda92; }

/* The tower is the game board. Floor 1 starts at the bottom; upward scroll reveals 2 and 3. */
.tower-hub { margin: 0 0 15px; }
.tower-heading { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin: 12px 2px 9px; }
.tower-heading h2 { margin: 1px 0 0; color: #f9e8c3; font-family: Georgia, "Palatino Linotype", serif; font-size: 25px; line-height: 1; }
.tower-scroll { height: clamp(340px, 55vh, 540px); overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: thin; scrollbar-color: #6a9c9b #102534; border-radius: 10px; background: #0b1c2c; }
.tower-floor { position: relative; scroll-snap-align: center; padding-bottom: 10px; background: #102533; }
.tower-floor-label { position: absolute; z-index: 5; top: 11%; left: 50%; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid #d9b36b; border-radius: 5px; background: linear-gradient(#244658, #142f43); box-shadow: 0 2px 8px #0009; color: #ffe5ae; font-size: 11px; font-weight: 900; letter-spacing: .03em; }
.tower-slot { position: absolute; z-index: 3; top: 20%; width: 47%; height: 61%; padding: 0; display: block; overflow: visible; border: 0; background: transparent; transition: transform var(--dur-2) var(--ease-out); }
.tower-slot.left { left: 1.5%; }.tower-slot.right { right: 1.5%; }
.tower-slot:focus-visible { transform: translateY(-4px); }
@media (hover: hover) and (pointer: fine) { .tower-slot:hover { transform: translateY(-4px); } }
.tower-slot::before { content: ""; position: absolute; z-index: -1; width: 78%; height: 31%; left: 11%; bottom: 9%; border-radius: 50%; background: radial-gradient(ellipse, #86e4d46b, transparent 70%); filter: blur(5px); }
.tower-slot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 5px #000b); }
.tower-slot.selected::after { content: ""; position: absolute; inset: 0; border: 2px solid #aaf5e3; border-radius: 50%; box-shadow: 0 0 20px #66f0d488; pointer-events: none; }
.tower-slot-badge { position: absolute; z-index: 6; left: 50%; bottom: -11px; transform: translateX(-50%); width: max-content; max-width: 97%; padding: 4px 7px; border: 1px solid #c99d59; border-radius: 5px; color: #fff0cc; background: #102e3de8; box-shadow: 0 2px 8px #000b; font-size: 11px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tower-slot-badge small { display: block; color: #8ee3dc; font-size: 11px; font-weight: 700; }
.tower-rail { display: flex; justify-content: space-between; align-items: center; gap: 7px; margin-top: 9px; }
.tower-rail button { flex: 1; min-width: 0; padding: 7px 4px; color: #bad6d5; background: #1a3748; border: 1px solid #51727d; border-radius: 7px; font-size: 11px; font-weight: 800; }
.tower-rail button.active { color: #342514; background: #e4b76f; border-color: #fce2a0; }
.ledger { max-height: 280px; overflow: auto; }.ledger-line { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid #51717a; font-size: 12px; }
.progress { height: 8px; overflow: hidden; background: #102231; border: 1px solid #5a6b60; border-radius: 6px; }.progress span { display: block; height: 100%; background: linear-gradient(90deg, #63d1c8, #efd17e); }
.overlay { position: fixed; z-index: var(--z-sheet); inset: 0; display: grid; place-items: center; padding: 12px; background: #04101add; }.overlay.hidden { display: none; }
.battle-modal { position: relative; width: min(100%, 500px); max-height: 90vh; overflow-y: auto; padding: 18px; border: 2px solid #c49b5c; border-radius: 13px; background: linear-gradient(#17394b, #102638); box-shadow: inset 0 0 0 3px #264b5c, 0 25px 80px #000e; }
.close { position: absolute; z-index: 2; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: transparent; color: #fff0cb; font-size: 27px; }
@media (min-width: 650px) { .shell { border-inline: 1px solid #375165; } }
@media (max-width: 380px) { .shell { padding-inline: 10px; }.hero-copy { max-width: 74%; }.hero h1 { font-size: 27px; }.tower-slot-badge { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Main game field: the landscape stays still while the layered tower scrolls. */
body.game-mode { overflow: hidden; background: #07131e; }
body.game-mode::before { content: ""; position: fixed; z-index: var(--z-world); inset: 0; }
body.game-mode .shell { position: relative; height: 100dvh; min-height: 0; padding: 0; background: transparent; box-shadow: none; }
body.game-mode .ghost { padding: 7px 9px; }
body.game-mode .hero { display: none; }
body.game-mode .meters { position: fixed; z-index: var(--z-hud); top: calc(var(--safe-top) + 8px); left: 50%; transform: translateX(-50%); width: min(calc(100% - 18px), 502px); margin: 0; gap: 4px; }
body.game-mode .meter { padding: 6px 2px; background: #102a3bdc; border-color: #9a7b4b; box-shadow: 0 3px 14px #0008; backdrop-filter: blur(6px); }
body.game-mode .meter small { font-size: 11px; }
body.game-mode .meter strong { font-size: 15px; }
body.game-mode #content { position: fixed; z-index: 2; inset: 0 auto 0 50%; transform: translateX(-50%); width: min(100%, 520px); overflow: hidden; }
body.game-mode #notice { position: fixed; z-index: var(--z-toast); top: calc(var(--safe-top) + var(--hud-h) + 8px); left: 50%; transform: translateX(-50%); width: min(calc(100% - 20px), 500px); }
body.game-mode .tower-hub { position: absolute; inset: 0; margin: 0; }
body.game-mode .tower-scroll { height: 100%; width: 100%; overflow-y: auto; overflow-x: hidden; border-radius: 0; background: transparent; scrollbar-width: none; scroll-snap-type: none; overscroll-behavior: contain; touch-action: pan-y; }
body.game-mode .tower-scroll::-webkit-scrollbar { display: none; }
body.game-mode .tower-floor { position: absolute; z-index: 3; left: 0; right: 0; height: 26%; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.game-mode .tower-floor[data-floor="3"] { top: 7%; }
body.game-mode .tower-floor[data-floor="2"] { top: 34%; }
body.game-mode .tower-floor[data-floor="1"] { top: 61%; }
body.game-mode .tower-floor.locked { opacity: .68; }
body.game-mode .tower-floor-label { display: none; }
body.game-mode .tower-slot { top: 27%; width: 43%; height: 58%; z-index: 3; }
body.game-mode .tower-slot.left { left: 5%; }
body.game-mode .tower-slot.right { right: 5%; }
body.game-mode .tower-slot img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 7px #000d); }
body.game-mode .tower-slot img { animation: dragon-idle 4s ease-in-out infinite; }
body.game-mode .tower-slot.right img { animation-delay: -2s; }
body.game-mode .tower-slot-badge { bottom: -3px; padding: 4px 6px; max-width: 95%; font-size: 11px; }
body.game-mode .tower-heading { position: absolute; z-index: 8; top: calc(var(--safe-top) + 115px); left: 12px; margin: 0; display: block; padding: 7px 10px; border: 1px solid #bb905b99; border-radius: 8px; background: #0b2233cc; backdrop-filter: blur(6px); box-shadow: 0 4px 17px #000a; pointer-events: none; }
body.game-mode .tower-heading .eyebrow { font-size: 11px; }
body.game-mode .tower-heading h2 { font-size: 20px; margin: 2px 0 0; }
body.game-mode .tower-heading h2 span { color: #7be4da; font-family: sans-serif; font-size: 18px; }
body.game-mode .tower-rail { position: absolute; z-index: 8; top: 38%; right: 8px; display: grid; gap: 6px; width: 36px; margin: 0; }
body.game-mode .tower-rail button { width: 36px; height: 36px; padding: 0; border: 1px solid #d2a864; border-radius: 50%; color: #fff0cb; background: #112e41e8; box-shadow: 0 2px 8px #0009; font-size: 13px; }
body.game-mode .tower-rail button.active { color: #2b2115; background: #f0c778; }
body.game-mode .game-action-bar { position: absolute; z-index: 9; bottom: calc(76px + var(--safe-bottom)); left: 9px; right: 9px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px; border: 1px solid #bc975d; border-radius: 10px; color: #fff0cf; background: #0c2638e8; backdrop-filter: blur(9px); box-shadow: 0 4px 18px #000b; }
body.game-mode .game-action-bar > span { max-width: 86px; font-size: 11px; line-height: 1.15; font-weight: 900; }
body.game-mode .game-action-bar .row { flex-wrap: nowrap; gap: 4px; }
body.game-mode .game-action-bar .btn { min-height: 34px; padding: 5px 7px; white-space: nowrap; font-size: 11px; }
@media (max-width: 380px) { body.game-mode .game-action-bar { padding: 5px; } body.game-mode .game-action-bar .btn { font-size: 11px; padding: 4px 5px; } body.game-mode .tower-rail { right: 5px; } }
@keyframes dragon-idle { 50% { transform: translateY(-4px) scale(1.012); } }
@media (prefers-reduced-motion: reduce) { body.game-mode .tower-slot img { animation: none; } }

/* Natural-size modular tower: each source image is scaled uniformly, never stretched. */
body.game-mode .tower-stack { position: relative; width: 92%; margin-inline: auto; filter: drop-shadow(0 12px 22px #000b); }
body.game-mode .tower-roof, body.game-mode .tower-foundation { position: relative; width: 100%; aspect-ratio: 3 / 2; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
body.game-mode .tower-roof { z-index: 8; margin-bottom: -55px; }
body.game-mode .tower-foundation { z-index: 7; left: -15%; width: 130%; margin-top: -22px; }
body.game-mode .tower-stack .tower-floor, body.game-mode .tower-stack .tower-floor[data-floor] { position: relative; top: auto; left: auto; right: auto; width: 100%; height: auto; aspect-ratio: 1254 / 1010; overflow: hidden; isolation: isolate; }
body.game-mode .tower-stack .tower-floor + .tower-floor { margin-top: -14px; }
body.game-mode .tower-module-back, body.game-mode .tower-module-front { position: absolute; top: -7.5%; left: 0; width: 100%; aspect-ratio: 1 / 1; background: center / 100% 100% no-repeat; pointer-events: none; }
body.game-mode .tower-module-back { z-index: 1; }
body.game-mode .tower-module-front { z-index: 4; }
body.game-mode .tower-module-front.outer-left { clip-path: inset(0 87% 0 0); }
body.game-mode .tower-module-front.outer-right { clip-path: inset(0 0 0 87%); }
body.game-mode .tower-module-front.middle { clip-path: inset(0 46% 0 46%); }
body.game-mode .tower-module-front.ledge { clip-path: inset(70% 0 15% 0); }
body.game-mode .tower-stack .tower-slot { top: 18%; width: 44%; height: 58%; }
body.game-mode .tower-stack .tower-slot.left { left: 3%; }
body.game-mode .tower-stack .tower-slot.right { right: 3%; }
body.game-mode .tower-stack .tower-slot-badge { display: none; }
body.game-mode .tower-spot-label { position: absolute; z-index: 6; bottom: 8%; left: 25%; transform: translateX(-50%); max-width: 41%; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ffe8b7; background: #102938d9; border: 1px solid #d7ae6b; border-radius: 5px; box-shadow: 0 3px 9px #0009; font-size: 11px; font-weight: 800; }
body.game-mode .tower-spot-label.right { left: 75%; }
body.game-mode .tower-stack .tower-slot::before { z-index: 0; bottom: 4%; height: 13%; background: radial-gradient(ellipse, #000a 0, #0005 42%, transparent 73%); filter: blur(4px); }
body.game-mode .tower-stack .tower-slot img { position: relative; z-index: 1; width: 82%; margin-inline: auto; }

/* Crystal-tech art direction: image layers keep the exterior sky transparent. */
body.game-mode { background: #c0d7db; }
body.game-mode::before { background: linear-gradient(180deg, #c7f3ff21 0%, #c1efff05 45%, #0b283554 100%), url('/assets/valley-crystal-860.webp') center center / cover no-repeat; }
body.game-mode .tower-stack { padding-bottom: 126px; filter: drop-shadow(0 13px 22px #19394a70); }
/* Real RGBA cutouts (scripts/build_web_assets.py): one image per layer, no CSS mask.
   The roof's dark underside is already transparent in the cutout. */
body.game-mode .tower-roof { background-image: url('/assets/tower-roof-rgba.webp'); }
body.game-mode .tower-foundation { background-image: url('/assets/tower-base-rgba.webp'); }
body.game-mode .tower-module-back, body.game-mode .tower-module-front { background-image: url('/assets/tower-module-rgba.webp'); }
body.game-mode .tower-stack .tower-floor { background: transparent; }
body.game-mode .tower-stack .tower-slot img { width: 72%; filter: drop-shadow(0 5px 5px #0c3049a6); }
/* Named dragon art fills more of the alcove than the role silhouettes. .dragon-art is set by the
   templates; the src selector covers markup that still points at the full -v2 portraits. */
body.game-mode .tower-stack .tower-slot img.dragon-art,
body.game-mode .tower-stack .tower-slot img[src$="-v2.webp"] { width: 92%; }

/* Roof overhangs the masonry instead of covering the upper alcoves. */
body.game-mode .tower-stack { padding-top: 58px; }
body.game-mode .tower-roof { left: -3%; width: 106%; margin-bottom: -45px; }
body.game-mode .tower-stack .tower-slot { top: 24%; }
body.game-mode .tower-stack .tower-slot.left { left: 5%; }
body.game-mode .tower-stack .tower-slot.right { right: 5%; }
body.game-mode .tower-heading { display: none; }