/* Production-facing visual system. All visible game icons come from painted raster art. */
/* Legacy names, kept as aliases of tokens.css. */
:root { --surface:var(--c-surface-2); --surface-2:#163a57; --line:var(--c-line); --ice:var(--c-text); --muted:var(--c-text-3); --gold:var(--c-gold); --teal:var(--c-aqua); --ring:0 0 0 2px #82e8ed,0 0 18px #82e8ed55; }
body { color:var(--c-text); background:radial-gradient(circle at 50% -20%,#28749a 0,transparent 45%),linear-gradient(#0c2e49,var(--c-bg) 60%); }
body:not(.game-mode) .shell { min-height:100dvh; padding:0 13px calc(105px + var(--safe-bottom)); background:linear-gradient(180deg,#0a2b44,#071b2e 55%,#061626); }
body:not(.game-mode) .hero { display:none; }
body:not(.game-mode) #meters { position:sticky; z-index:var(--z-hud); top:0; margin:0 -13px 12px; padding:calc(var(--safe-top) + 8px) 61px 8px 13px; background:linear-gradient(180deg,#0a2b44 0%,#0a2b44 82%,#0a2b4400); }
body:not(.game-mode) #content { padding-bottom:18px; }
.ui-icon { display:inline-block; flex:none; width:24px; height:24px; background-size:contain; background-position:center; background-repeat:no-repeat; vertical-align:middle; }
.icon-tower {background-image:url('/assets/ui/tower-96.webp')}.icon-play {background-image:url('/assets/ui/play-96.webp')}.icon-collection {background-image:url('/assets/ui/collection-96.webp')}.icon-season {background-image:url('/assets/ui/season-96.webp')}
.icon-credits {background-image:url('/assets/ui/credits-96.webp')}.icon-biomass {background-image:url('/assets/ui/biomass-96.webp')}.icon-score,.icon-level {background-image:url('/assets/ui/score-96.webp')}.icon-egg {background-image:url('/assets/ui/egg-96.webp')}
.icon-crest {background-image:url('/assets/ui/crest-96.webp')}.icon-history {background-image:url('/assets/ui/history-96.webp')}.icon-swap {background-image:url('/assets/ui/swap-96.webp')}.icon-upgrade {background-image:url('/assets/ui/upgrade-96.webp')}
.icon-quest {background-image:url('/assets/ui/quest-96.webp')}.icon-economy {background-image:url('/assets/ui/economy-96.webp')}.icon-exchange {background-image:url('/assets/ui/exchange-96.webp')}.icon-expedition {background-image:url('/assets/ui/expedition-96.webp')}.icon-shield {background-image:url('/assets/ui/shield-96.webp')}
.resource-tile,body.game-mode .resource-tile { min-height:48px; border:1px solid #a4d9eab8; border-bottom-color:#edcb89; border-radius:10px; background:linear-gradient(160deg,#256186e8,#09273ef2); box-shadow:inset 0 1px #ffffff6b,0 5px 14px #00182d80; }
.resource-icon .ui-icon { width:28px; height:28px; }
.resource-tile strong,body.game-mode .resource-tile strong { font-size:14px; color:#fff8e8; }
.resource-tile small,body.game-mode .resource-tile small { color:#d2e7e8; font-size:11px; }
.menu-toggle { border-radius:11px; color:#f7e5b5; }
.utility-menu { background:linear-gradient(145deg,#235c78f9,#082840fd); border-color:#c3eff1; }
.utility-menu > button .ui-icon { width:25px; height:25px; }
.utility-menu > button > .menu-art { flex:none; width:25px; height:25px; object-fit:contain; }
.sound-glyph { display:grid; flex:none; place-items:center; width:25px; height:25px; color:var(--c-gold); font:700 23px Georgia,serif; font-variant-numeric:var(--num); }
.tabs { z-index:var(--z-nav); grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:7px 8px calc(7px + var(--safe-bottom)); background:linear-gradient(180deg,#174663f5,#092b45fa); border-top:1px solid #c0eaf1a8; box-shadow:inset 0 1px #fff7,0 -14px 30px #03192bb8; }
.tabs button { min-height:62px; gap:1px; border-radius:12px; color:#d2e7ec; font-size:11px; font-weight:800; letter-spacing:.01em; }
.tabs button .ui-icon { width:34px; height:34px; filter:drop-shadow(0 2px 4px #0008); }
.tabs button.active { border-color:#f6dc9a9e; color:#fff8df; background:linear-gradient(#46809b8a,#153954a3); box-shadow:inset 0 1px #fff9,0 0 17px #8feaff55; }
.tabs button.active .ui-icon { filter:drop-shadow(0 0 10px #ffd38b); transform:translateY(-1px); }
.tabs button:active { transform:scale(.96); }
.btn { min-height:45px; gap:8px; padding:10px 15px; border-radius:10px; font-weight:850; letter-spacing:.01em; }
.btn .ui-icon { width:24px; height:24px; }
.btn.primary,.btn:not(.secondary):not(.subtle):not(.danger):not(.btn-cta-buy) { color:#3b2a13; background:linear-gradient(180deg,#fff2c3,var(--c-gold-2) 76%,#ce8738); border:1px solid #ffebb9; box-shadow:inset 0 1px #fffceb,0 3px 0 #8a5528,0 8px 17px #02182873; }
.btn.secondary { color:#efffff; border-color:#a5edf0; background:linear-gradient(#397f9a,#15506d); box-shadow:inset 0 1px #d0fbff8c,0 3px 0 #0a3049; }
.btn.subtle { color:#dcf1f2; border:1px solid var(--c-line-2); background:#113a56; box-shadow:none; }
.btn.wide { display:flex; width:100%; justify-content:center; }
.btn:disabled { opacity:.46; }
.overline { display:block; color:#a7e9ee; font-size:10px; font-weight:900; letter-spacing:.17em; line-height:1.25; text-transform:uppercase; }
.screen { display:grid; gap:12px; }
.feature-card,.offer-summary,.assault-floor { position:relative; overflow:hidden; border:1px solid #84c9db; border-radius:17px; background:linear-gradient(155deg,#235b78 0%,#123d5b 45%,#0b2a45 100%); box-shadow:inset 0 1px #ffffff69,0 10px 24px #00192b85; }
.feature-card::before,.offer-summary::before,.assault-floor::before { content:''; position:absolute; inset:5px; border:1px solid #c8eef21e; border-radius:12px; pointer-events:none; }
.feature-card { padding:19px 17px 18px; }
.feature-card h2,.offer-summary h2,.assault-floor h3,.screen-heading h1 { margin:5px 0 7px; font:700 23px/1.08 Georgia,'Palatino Linotype',serif; color:var(--c-heading); text-shadow:0 2px 7px #071e32; font-variant-numeric:var(--num); }
.feature-card p,.offer-summary p { margin:0 0 15px; color:#d7e9ed; font-size:12px; line-height:1.5; }
.feature-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.feature-card-heading > .ui-icon { width:47px; height:47px; }
.screen-heading { padding:7px 3px 3px; }
.screen-heading h1 { font-size:31px; margin:5px 0; }
.screen-heading p { color:#bfdae1; font-size:12px; line-height:1.45; margin:0; }
.screen-heading .ui-icon { width:35px; height:35px; }

/* Siege: an environment and an attack decision, not a duplicate of the home tower. */
.siege-hero { position:relative; height:374px; overflow:hidden; border:1px solid #c3e8e8; border-radius:17px; background:url('/assets/siege-arena-v1.webp') center 58% / cover; box-shadow:inset 0 1px #fffc,0 12px 27px #021a2d9e; }
.siege-hero-shade { position:absolute; inset:0; background:linear-gradient(180deg,#082d4ae6 0%,#082d4a9c 26%,#0b375a18 46%,#102d4230 60%,#061e35e8 100%); }
.siege-hero-top,.siege-hero-title,.siege-hero-bottom { position:absolute; z-index:3; left:14px; right:14px; }
.siege-hero-top { top:14px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.siege-hero-top .overline { max-width:67%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#e2faff; text-shadow:0 2px 5px #072238; }
.siege-live-dot { flex:none; color:#d9fff3; font-size:11px; font-weight:850; }
.siege-live-dot::before { content:''; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#95f5c8; box-shadow:0 0 8px #95f5c8; }
.siege-hero-title { top:39px; }
.siege-hero-title h1 { margin:0 0 5px; color:#fff6da; font:700 34px/1.02 Georgia,'Palatino Linotype',serif; text-shadow:0 2px 9px #03213f; font-variant-numeric:var(--num); }
.siege-hero-title p { max-width:280px; margin:0; color:#f1fbf9; font-size:11px; line-height:1.4; text-shadow:0 2px 5px #06243f; }
.siege-hero-party { position:absolute; z-index:2; inset:0 0 40px; pointer-events:none; }
.siege-hero-party img { position:absolute; bottom:19px; width:39%; height:40%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 7px 5px #061528bf); animation:float-dragon 4s ease-in-out infinite; }
.siege-hero-party .party-0 { left:5%; }
.siege-hero-party .party-1 { right:5%; animation-delay:-2s; }
.siege-hero-bottom { bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:space-around; gap:3px; height:42px; padding:6px; border-top:1px solid #cce9e28f; background:#0a304bda; }
.siege-hero-bottom span { display:flex; align-items:center; gap:3px; color:#e3f3ec; font-size:11px; font-weight:800; white-space:nowrap; }
.siege-hero-bottom .ui-icon { width:21px; height:21px; }
.mission-count { padding:6px 9px; border:1px solid #9edee0; border-radius:999px; color:#c9f9ef; background:#0c3851; white-space:nowrap; font-size:11px; font-weight:850; }
.mission-progress { height:7px; margin-top:8px; overflow:hidden; border:1px solid #71aabe; border-radius:99px; background:#071c30; }
.mission-progress span { display:block; height:100%; background:linear-gradient(90deg,#60d7d6,#ffe39c); box-shadow:0 0 10px #9deee6; }
.mission-progress-label { display:flex; justify-content:space-between; gap:5px; margin:7px 0 17px; color:#bedbe0; font-size:11px; }
.mission-progress-label b { color:#ffe39c; }
.mission-secondary { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.mission-secondary .btn { flex:1; min-width:125px; font-size:11px; }
.ranked-card { border-color:#d1b981; background:linear-gradient(155deg,#4b5c75,#213959 55%,#122b47); }
.ranked-remaining { display:flex; align-items:baseline; gap:7px; margin:-3px 0 15px; color:#ffe09d; font:700 29px/1 Georgia,serif; font-variant-numeric:var(--num); }
.ranked-remaining small { color:#d8e5e5; font:700 11px system-ui,sans-serif; font-variant-numeric:var(--num); }
.offer-summary { display:flex; align-items:center; gap:10px; padding:16px; }
.offer-summary > div { flex:1; min-width:0; }
.offer-summary > .ui-icon { width:64px; height:64px; }
.offer-summary h2 { font-size:21px; }
.offer-summary p { margin:0; }
.floor-route { display:flex; align-items:center; justify-content:center; gap:6px; padding:2px 0; }
.floor-route span { display:grid; place-items:center; width:30px; height:30px; border:1px solid #6f9fbb; border-radius:50%; color:#d4ebed; background:#123e59; font:800 11px system-ui,sans-serif; font-variant-numeric:var(--num); }
.floor-route span.active { border-color:#ffdf9f; color:#3e2b0d; background:linear-gradient(#fff0bc,#e5ba70); }
.floor-route i { width:32px; height:1px; background:#7cafc0; }
.assault-floor { padding:15px 14px; }
.assault-floor-head { display:flex; align-items:center; gap:10px; }
.floor-number { color:#ffd993; font:700 30px/1 Georgia,serif; font-variant-numeric:var(--num); }
.assault-floor h3 { margin:2px 0 0; font-size:20px; }
.floor-threat { margin-left:auto; color:#d0e4eb; font-size:11px; font-weight:900; }
.enemy-lineup { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:12px 0 13px; }
.enemy-unit { display:grid; justify-items:center; min-width:0; padding:5px; border:1px solid #a4cbda7a; border-radius:11px; background:radial-gradient(circle at 50% 55%,#4886a676,#0a2b449e 75%); }
.enemy-unit img { width:100%; max-width:108px; height:95px; object-fit:contain; filter:drop-shadow(0 4px 4px #000a); }
.enemy-unit > div { width:100%; padding:5px 3px; border-top:1px solid #b9d5d254; text-align:center; }
.enemy-unit strong,.enemy-unit small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.enemy-unit strong { color:#fff2d8; font-size:11px; }
.enemy-unit small { color:#b6d7dd; font-size:11px; }
.skill-order { padding:10px; border:1px solid #76adbf69; border-radius:10px; background:#08283fd9; }
.skill-order > span { display:block; margin-bottom:7px; color:#a8e7e7; font-size:10px; font-weight:900; letter-spacing:.12em; }
.skill-order > div { display:flex; align-items:end; gap:5px; }
.order-arrow { padding-bottom:10px; color:#ffdf99; font-size:17px; }
.assault-confirm { padding:1px 2px 9px; }
.assault-confirm p { color:#bcd4dc; font-size:11px; line-height:1.45; }
.assault-confirm .btn + .btn { margin-top:10px; }
.account-gate .field { margin-bottom:10px; }

/* Roster, growth and test-credit hatchery. */
.collection-count { padding:4px 8px; border:1px solid #8ec0cf; border-radius:999px; color:#bfeaec; background:#1c4b66; font:850 11px system-ui,sans-serif; vertical-align:middle; font-variant-numeric:var(--num); }
.role-legend { display:flex; gap:6px; }
.role-legend > span { flex:1; display:flex; align-items:center; justify-content:center; gap:3px; min-width:0; padding:6px 3px; border:1px solid #78adc0; border-radius:9px; color:#d8eeef; background:#16405b; font-size:11px; font-weight:800; }
.role-legend .ui-icon { width:23px; height:23px; }
.roster-list { display:grid; gap:10px; }
.roster-card { display:grid; grid-template-columns:116px minmax(0,1fr); column-gap:10px; padding:9px; border:1px solid #91cbd8; border-radius:16px; background:linear-gradient(145deg,#28637e,#123d5a 55%,#0d2e49); box-shadow:inset 0 1px #ffffff6b,0 8px 19px #00182980; }
.roster-portrait { position:relative; grid-row:span 2; display:grid; place-items:center; min-height:146px; overflow:hidden; border:1px solid #a2d1d9a1; border-radius:11px; background:radial-gradient(circle at 50% 62%,#90dce572,#164363 63%,#102b47); }
.roster-portrait img { max-width:100%; max-height:142px; object-fit:contain; filter:drop-shadow(0 7px 5px #00172b9e); }
.rarity-pill { position:absolute; top:5px; left:5px; padding:3px 5px; border:1px solid #ffe0a28f; border-radius:6px; color:#ffe9b8; background:#102e43dc; font-size:10px; font-weight:850; text-transform:uppercase; }
.roster-details { min-width:0; padding:4px 0 0; }
.roster-details h2 { overflow:hidden; margin:4px 0; color:#fff0ce; font:700 23px/1.05 Georgia,serif; white-space:nowrap; text-overflow:ellipsis; font-variant-numeric:var(--num); }
.roster-details p { margin:0 0 9px; color:#d1e2e8; font-size:11px; }
.roster-details small { display:block; margin-top:5px; color:#b5d7da; font-size:11px; }
.roster-progress { height:6px; overflow:hidden; border:1px solid #70a9bb; border-radius:30px; background:#08283e; }
.roster-progress span { display:block; height:100%; background:linear-gradient(90deg,#68cece,#ffe39a); }
.roster-actions { display:flex; align-items:end; gap:6px; min-width:0; }
.roster-actions > .btn { flex:1; min-width:0; min-height:44px; padding:5px; font-size:11px; }
.roster-actions .ui-icon { width:22px; height:22px; }
.roster-actions .maxed { color:var(--c-gold); font-size:11px; font-weight:850; }
body.state-uncertain #notice { position:fixed; z-index:var(--z-dialog); top:calc(var(--safe-top) + 8px); left:50%; transform:translateX(-50%); width:min(calc(100% - 20px),500px); }
body.state-uncertain #notice .notice { display:grid; gap:8px; box-shadow:0 12px 32px #02111dbb; }
body.state-uncertain #notice .btn { min-height:44px; }
.mutation-choices { grid-column:1/-1; display:flex; align-items:center; gap:5px; flex-wrap:wrap; width:100%; margin-top:5px; }
.mutation-choices > span { width:100%; color:var(--c-gold); font-size:11px; font-weight:800; }
.mutation-choices .btn { flex:1; min-width:82px; padding:5px; font-size:11px; }
.hatchery { display:grid; grid-template-columns:1fr 72px; align-items:start; }
.hatchery-title { min-width:0; }
.hatchery > .ui-icon { width:72px; height:72px; }
.hatchery .egg-shop-grid,.hatchery .shop-note,.hatchery .incubating,.hatchery > .btn { grid-column:1/-1; }
.hatchery .egg-shop-grid { margin-top:3px; }
.hatchery .egg-offer { min-height:107px; border-color:#81b9c8; background:linear-gradient(#367188,#12415f); }
.hatchery .egg-offer .ui-icon { width:38px; height:38px; }
.hatchery .egg-offer span .ui-icon { width:18px; height:18px; }
.hatchery .egg-offer strong { color:#fff1cb; }
.hatchery .egg-offer:disabled { opacity:.48; }
.hatchery .shop-note { margin:12px 1px; color:#b8d4dc; font-size:11px; line-height:1.45; }
.incubating { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:2px 0 10px; padding:9px; border:1px solid #e5cc8d; border-radius:9px; background:#695b3970; font-size:11px; }
.incubating span { color:#ffe2aa; }
.incubating .btn { margin-left:auto; }

/* Season keeps progression, ranking, pass and PvE distinct. */
.season-banner { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:133px; padding:17px 20px; overflow:hidden; border:1px solid #e7ce90; border-radius:16px; background:linear-gradient(110deg,#345d7c,#143d60 60%,#0b2d4b); box-shadow:inset 0 1px #fff8,0 10px 24px #0016298c; }
.season-banner::after { content:''; position:absolute; inset:0; opacity:.14; background:url('/assets/siege-arena-v1.webp') center 38% / cover; pointer-events:none; }
.season-banner > div { z-index:1; display:grid; }
.season-banner strong { color:#fff3c6; font:700 47px/1 Georgia,serif; text-shadow:0 3px 10px #001a2b; font-variant-numeric:var(--num); }
.season-banner small { margin-top:5px; color:#deedf0; font-size:11px; }
.season-banner > .ui-icon { z-index:1; width:105px; height:105px; filter:drop-shadow(0 4px 15px #ffdc9a94); }
.quest-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:17px 0 12px; }
.quest-steps > div { display:grid; justify-items:center; gap:3px; padding:9px 3px; border:1px solid #81bfcb; border-radius:10px; background:#0e3853; }
.quest-steps .ui-icon { width:29px; height:29px; }
.quest-steps strong { color:#ffe4a3; font:700 20px/1 Georgia,serif; font-variant-numeric:var(--num); }
.quest-steps small { color:#bddbe0; font-size:11px; }
.quest-prize { display:flex; align-items:center; gap:8px; padding:10px; border:1px solid #ddb980; border-radius:10px; color:#ffebbe; background:#7a63355b; font-size:11px; font-weight:850; }
.quest-prize .ui-icon { width:39px; height:39px; }
.ranked-entry { border-color:#e1c287; }
.ranked-entry .ranked-remaining { margin:9px 0; }
.standings-list { display:grid; gap:4px; margin:10px 0 14px; }
.standings-list > div { display:flex; align-items:center; gap:9px; padding:9px; border:1px solid #7db3c4; border-radius:8px; background:#0a2d48; font-size:11px; }
.standings-list b { color:#ffdf9c; }
.standings-list span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.standings-list strong { color:#f9e6bb; }
.standings-list p { margin:0; }
.pass-actions { display:flex; flex-wrap:wrap; gap:7px; }
.pass-actions .btn { flex:1; min-width:128px; font-size:11px; }
.test-pool-note { display:flex; align-items:center; gap:7px; padding:11px; border:1px solid #5c91a8; border-radius:10px; color:#c0d9e1; background:var(--c-surface-1); font-size:11px; line-height:1.4; }
.test-pool-note .ui-icon { width:27px; height:27px; }
.test-pool-note span { flex:1; }
.test-pool-note strong { color:#ffe2a1; white-space:nowrap; }

/* The economy is an explicitly simulated ledger, never a live wallet. */
.economy-hero { padding:20px; border:1px solid #e6c58f; border-radius:16px; background:radial-gradient(circle at 88% 25%,#886d3669,transparent 36%),linear-gradient(135deg,#2c6480,#103c5b 63%,#0b2942); box-shadow:inset 0 1px #fffa,0 10px 24px #001a2d8c; }
.economy-hero > div { display:flex; align-items:center; gap:8px; margin:9px 0; }
.economy-hero .ui-icon { width:59px; height:59px; }
.economy-hero strong { color:#fff0bd; font:700 38px/1 Georgia,serif; font-variant-numeric:var(--num); }
.economy-hero small { align-self:end; padding-bottom:7px; color:#c9e4e2; font-size:11px; }
.economy-hero p { margin:6px 0 0; max-width:350px; color:#d4e9eb; font-size:11px; line-height:1.45; }
.economy-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.economy-stats > div { display:grid; gap:3px; padding:13px; border:1px solid #8fc6d2; border-radius:11px; background:linear-gradient(#1d5571,#0d304c); }
.economy-stats small { color:#b9d9dc; font-size:11px; }
.economy-stats strong { color:#ffe5aa; font:700 22px/1.15 Georgia,serif; font-variant-numeric:var(--num); }
.ledger-card .ledger { display:grid; gap:5px; max-height:370px; overflow:auto; }
.ledger-card .ledger-line { display:flex; align-items:center; gap:6px; padding:10px 2px; border-bottom:1px solid #98c2ca47; background:none; font-size:11px; }
.ledger-card .ledger-line span { flex:1; min-width:0; }
.ledger-card .ledger-line small { display:block; margin-top:3px; color:#a9cdd4; font-size:11px; }
.ledger-card .ledger-line b { color:#a6f0d6; }
.ledger-card .ledger-line b.spent { color:#ffdfa1; }
.test-tools { padding:0 12px; border:1px solid #658fa7; border-radius:10px; color:#c4dbe0; background:var(--c-surface-1); font-size:11px; }
.test-tools[open] { padding-bottom:12px; }
.test-tools summary { box-sizing:border-box; min-height:44px; padding-block:14px; cursor:pointer; font-weight:800; } /* UX-027: a 44 px tap row */
.test-tools p { margin:10px 0; }

/* Wallet: simulated $DRAKLY balances, pass, stake, qualification and withdrawal. */
.wallet-screen > section + section { margin-top:12px; }
.wallet-screen .economy-stats { margin-top:12px; }
.economy-hero p.wallet-price { max-width:none; }
.wallet-price b { color:#fff0bd; font-variant-numeric:var(--num); }
.wallet-price span { color:#a9cdd4; }
.wallet-balances > div, .wallet-pool .economy-stats > div { align-content:start; min-width:0; }
.wallet-balances strong, .wallet-pool .economy-stats strong { font-size:19px; overflow-wrap:anywhere; font-variant-numeric:var(--num); }
.wallet-balances em { color:#a6f0d6; font-size:11px; font-style:normal; }
.wallet-pass .pass-actions .btn, .wallet-stake .pass-actions .btn { flex-direction:column; gap:1px; }
.pass-actions .btn small { display:block; color:inherit; font-size:11px; font-weight:600; opacity:.8; }
.wallet-note { display:block; margin-top:11px; color:#bad3dd; font-size:11px; line-height:1.45; }
.wallet-stake .quest-steps strong { font-size:16px; overflow-wrap:anywhere; }
.stake-tiers { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 12px; }
.stake-tiers span { padding:4px 8px; border:1px solid #5c91a8; border-radius:999px; color:#b9d9dc; font-size:11px; font-variant-numeric:var(--num); }
.stake-tiers span.reached { border-color:#e6c58f; color:#ffe5aa; background:#886d3633; }
.wallet-screen .field { display:grid; gap:5px; margin-bottom:10px; }
.wallet-screen .field label { color:#c9e4e2; font-size:11px; font-weight:700; }
.wallet-screen .field input, .wallet-screen .field select { width:100%; }
.wallet-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wallet-preview { min-height:16px; margin:0 0 10px; color:#ffe5aa; font-size:11px; }
.wallet-timer, .wallet-locked { display:flex; align-items:center; gap:7px; margin:10px 0 0; padding:9px 10px; border:1px solid #5c91a8; border-radius:10px; color:#d4e9eb; background:var(--c-surface-1); font-size:11px; line-height:1.4; }
.wallet-timer .ui-icon, .wallet-locked .ui-icon { width:24px; height:24px; flex:none; }
.wallet-locked { border-color:#e6c58f; }
.check-list { display:grid; gap:6px; margin:4px 0 10px; padding:0; list-style:none; }
.check-list li { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #5c91a85c; border-radius:9px; color:#c4dbe0; font-size:12px; }
.check-list li span { display:inline-grid; place-items:center; width:20px; height:20px; flex:none; border-radius:50%; background:var(--c-surface-1); color:#8fb3be; font-weight:900; }
.check-list li.ok { border-color:#a6f0d670; color:#effdf8; }
.check-list li.ok span { background:#2f8f74; color:#fff; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:10px; }
.segmented button { min-height:44px; padding:6px; border:1px solid #5c91a8; border-radius:9px; color:#c4dbe0; background:var(--c-surface-1); font-size:11px; font-weight:700; }
.segmented button.active { border-color:#e6c58f; color:#fff0bd; background:linear-gradient(#2c6480,#103c5b); }
.wallet-recent { margin-top:12px; }
.wallet-recent .ledger-line { display:flex; align-items:center; gap:6px; padding:8px 2px; border-bottom:1px solid #98c2ca47; font-size:11px; }
.wallet-recent .ledger-line span { flex:1; min-width:0; }
.wallet-recent .ledger-line small { display:block; color:#a9cdd4; font-size:11px; }
.wallet-recent .deposit-pending { flex-wrap:wrap; }
.wallet-recent .deposit-pending > span:first-child { flex:1 0 100%; }
.wallet-recent .deposit-pending .pass-actions { flex:1 0 100%; margin:2px 0 0; }
.wallet-recent .ledger-line a { color:inherit; }
.deposit-qr img { display:block; width:min(240px,100%); margin:10px auto 4px; background:#fff; border-radius:8px; image-rendering:pixelated; }
.deposit-qr small { display:block; text-align:center; color:#a9cdd4; font-size:11px; }
.hatchery .egg-offer .token-price { display:block; color:#b9d9dc; font-size:11px; font-style:normal; }
.resource-credits[data-menu-tab], .test-pool-note[data-menu-tab] { cursor:pointer; }
@media (max-width:380px) { .wallet-row{grid-template-columns:1fr}.wallet-balances strong{font-size:16px}.segmented button{font-size:11px} }

/* Replays are real saved battles, so the list waits for server details. */
.history-battle { display:flex; align-items:center; gap:9px; min-height:79px; padding:10px; border:1px solid #8ec4cf; border-radius:12px; background:linear-gradient(#225b77,#0b304d); box-shadow:inset 0 1px #ffffff55; }
.history-battle > span .ui-icon { width:44px; height:44px; }
.history-battle > div { flex:1; min-width:0; display:grid; gap:3px; }
.history-battle strong { color:#fff1d1; font:700 17px/1.1 Georgia,serif; font-variant-numeric:var(--num); }
.history-battle small { overflow:hidden; color:#b9d9dd; font-size:11px; white-space:nowrap; text-overflow:ellipsis; }
.history-battle .btn { min-height:44px; padding:7px 9px; font-size:11px; }

/* First session stays on the actual tower and reveals one choice at a time. */
.tutorial-card { padding:15px; border:1px solid #d9c593; border-radius:15px; color:#eff8f3; background:linear-gradient(150deg,#225a75f8,#0b2d47fc); box-shadow:inset 0 1px #fff9,0 12px 34px #001a2dcc; }
.tutorial-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tutorial-card h2 { margin:5px 0 10px; color:var(--c-heading); font:700 24px/1.1 Georgia,serif; font-variant-numeric:var(--num); }
.tutorial-card > .progress { height:6px; margin:0 0 11px; }
.tutorial-card p { margin:4px 0 11px; color:#d9e9e8; font-size:11px; line-height:1.45; }

/* Battle theatre and server result. */
.overlay { z-index:var(--z-sheet); padding:0; background:#061929f5; }
[data-action][data-pending="true"] { position:relative; cursor:progress; }
[data-action][data-pending="true"]::after { content:""; position:absolute; top:calc(50% - 7px); right:8px; width:14px; height:14px; border:2px solid #e8f8ff66; border-top-color:#fff6d8; border-radius:50%; animation:pending-spin .75s linear infinite; }
@keyframes pending-spin { to { transform:rotate(360deg); } }
html.battle-open,body.battle-open { overflow:hidden; }
.battle-modal { width:min(100%,520px); height:100dvh; max-height:none; padding:var(--safe-top) 0 0; overflow:auto; border:0; border-radius:0; background:#09263f; box-shadow:0 0 80px #000d; }
.battle-modal > .close { position:fixed; z-index:6; top:calc(var(--safe-top) + 10px); right:max(10px,calc((100vw - 520px)/2 + 10px)); width:44px; height:44px; border:1px solid #b8dbdf; border-radius:10px; color:#f1f7ef; background:#103a55e8; font-size:23px; }
.battle-view { min-height:calc(100dvh - var(--safe-top)); padding-top:0; display:flex; flex-direction:column; padding-bottom:var(--safe-bottom); }
.battle-view-head { padding:20px 16px 13px; background:linear-gradient(#174d6b,#0a2a44); border-bottom:1px solid #8abaca; }
.battle-view-head h2 { margin:4px 0 10px; color:var(--c-heading); font:700 30px/1 Georgia,serif; font-variant-numeric:var(--num); }
.battle-view-head h2 span { color:#a8d7e5; font-size:16px; }
.battle-floor-dots { display:flex; gap:6px; }
.battle-floor-dots i { flex:1; height:6px; border:1px solid #77a8bb; border-radius:50px; background:#123448; }
.battle-floor-dots i.current,.battle-floor-dots i.cleared { border-color:#ffdc95; background:linear-gradient(90deg,#c4f2ec,#ffdb89); }
.combat-arena { position:relative; flex:1; min-height:335px; overflow:hidden; background:url('/assets/siege-arena-v1.webp') center 67% / cover; }
.combat-arena::before { content:''; position:absolute; inset:0; background:linear-gradient(#0e31502e 10%,#05223b1c 55%,#061b31a8 100%); }
.combat-light { position:absolute; inset:31% -15% 12%; background:radial-gradient(circle at 50% 55%,#f7e9a249,transparent 55%); animation:pulse-light 1.4s ease-in-out infinite alternate; }
.combat-fighters { position:absolute; bottom:18%; display:flex; align-items:end; width:45%; height:39%; }
.combat-fighters.ours { left:1%; justify-content:start; }
.combat-fighters.theirs { right:1%; justify-content:end; }
.combat-fighters img { width:57%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 8px 6px #031626dc); animation:combat-idle 1.4s ease-in-out infinite alternate; }
.combat-fighters img+img { margin-left:-19%; height:88%; animation-delay:-.7s; }
.combat-fighters.theirs img { transform:scaleX(-1); animation-name:combat-idle-mirrored; }
.combat-fighters.ours.acting { animation:lunge-ours .46s ease-out; }
.combat-fighters.theirs.acting { animation:lunge-theirs .46s ease-out; }
.combat-arena.impact::after { content:''; position:absolute; inset:0; pointer-events:none; background:#fff5c848; animation:hit-flash .48s ease-out both; }
.combat-damage { position:absolute; z-index:3; top:48%; color:#ffe5a3; font:900 32px/1 system-ui,sans-serif; text-shadow:0 2px 5px #501b0d,0 0 17px #ff812a; animation:damage-rise .65s ease-out both; font-variant-numeric:var(--num); }
.combat-damage.target-enemy { right:16%; }.combat-damage.target-ours { left:16%; }
.combat-versus { position:absolute; top:39%; left:50%; transform:translateX(-50%); color:#ffe5a4; font:800 26px/1 Georgia,serif; text-shadow:0 2px 9px #00162d,0 0 16px #ffdd96; font-variant-numeric:var(--num); }
.combat-caption { position:absolute; right:12px; bottom:10%; left:12px; min-height:41px; padding:11px; border:1px solid #d1e9e1ad; border-radius:10px; color:#fff6df; background:#082a43e3; text-align:center; font-size:12px; font-weight:800; box-shadow:0 6px 16px #00142288; }
.combat-log { min-height:117px; padding:12px 16px; background:#0a2c47; }
.combat-log p { margin:5px 0 0; color:#9cb9c6; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.combat-log p.latest { color:var(--c-heading); font-weight:800; }
.battle-view-foot { padding:10px 16px 18px; background:#071e32; }
.battle-view-foot .progress { height:7px; margin:0 0 10px; }
.battle-view-foot > div:last-child { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#a8cbd4; font-size:11px; }
.battle-view-foot .btn { min-height:44px; padding:6px 10px; font-size:11px; }
.result-screen { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:68px 22px 34px; text-align:center; background:radial-gradient(circle at 50% 18%,#32769b,#10304c 45%,#061728 95%); }
.result-screen.victory { background:radial-gradient(circle at 50% 17%,#6f7f8b,#274c6f 38%,#081c30 90%); }
.result-art .ui-icon { width:132px; height:132px; filter:drop-shadow(0 0 25px #ffe3a976); }
.result-screen h2 { margin:9px 0; color:var(--c-heading); font:700 35px/1 Georgia,serif; font-variant-numeric:var(--num); }
.result-screen p { max-width:320px; color:#cfe3e9; font-size:12px; line-height:1.5; }
.result-rewards { display:grid; grid-template-columns:1fr 1fr; gap:9px; width:100%; margin:19px 0; }
.result-rewards > div { display:grid; justify-items:center; padding:12px; border:1px solid #a5d3d7; border-radius:13px; background:#1a4965af; }
.result-rewards .ui-icon { width:39px; height:39px; }
.result-rewards strong { color:#ffebbf; font:700 25px/1.2 Georgia,serif; font-variant-numeric:var(--num); }
.result-rewards small { color:#c3dfe4; font-size:11px; }
.result-note { color:#ffd899!important; }
.result-actions { display:flex; gap:8px; width:100%; }
.result-actions .btn { flex:1; min-width:0; }
.result-actions .ui-icon { width:23px; height:23px; }
.battle-id { margin-top:20px; color:#8cabba; font-size:11px; }
@keyframes float-dragon {50%{transform:translateY(-4px)}}
@keyframes combat-idle {to{transform:translateY(-5px)}}
@keyframes combat-idle-mirrored {from{transform:scaleX(-1) translateY(0)}to{transform:scaleX(-1) translateY(-5px)}}
@keyframes combat-bolt {from{opacity:0;transform:translateX(-35px) scaleX(.4)}40%{opacity:1}to{opacity:0;transform:translateX(75px) scaleX(1)}}
@keyframes combat-bolt-reverse {from{opacity:0;transform:scaleX(-1) translateX(35px) scaleX(.4)}40%{opacity:1}to{opacity:0;transform:scaleX(-1) translateX(-75px)}}
@keyframes pulse-light {to{opacity:.46}}
@keyframes lunge-ours {50%{transform:translateX(17px)}100%{transform:translateX(0)}}
@keyframes lunge-theirs {50%{transform:translateX(-17px)}100%{transform:translateX(0)}}
@keyframes hit-flash {from{opacity:.9}to{opacity:0}}
@keyframes damage-rise {from{opacity:0;transform:translateY(16px) scale(.8)}35%{opacity:1}to{opacity:0;transform:translateY(-28px) scale(1.1)}}
@media (max-width:380px) { .resource-icon .ui-icon{width:23px;height:23px}.resource-tile strong,body.game-mode .resource-tile strong{font-size:12px}.siege-hero{height:345px}.siege-hero-title h1{font-size:31px}.siege-hero-bottom span{font-size:11px}.feature-card{padding:16px 14px}.enemy-unit img{height:80px} }
@media (prefers-reduced-motion:reduce) { .siege-hero-party img,.combat-fighters img,.combat-light{animation:none} }
@media (prefers-reduced-motion:reduce) { [data-action][data-pending="true"]::after { animation:none; border-color:#fff6d8; } }

/* Siege command: one defense line at a time, with readable choices and feedback. */
.siege-hero.offer-active { height:224px; background-position:center 64%; }
.siege-hero.offer-active .siege-hero-title { top:39px; }
.siege-hero.offer-active .siege-hero-title h1 { font-size:29px; }
.siege-hero.offer-active .siege-hero-party { inset:54px 0 38px; }
.siege-hero.offer-active .siege-hero-party img { bottom:0; height:78%; width:33%; }
.siege-hero.offer-active .siege-hero-party .party-0 { left:14%; }
.siege-hero.offer-active .siege-hero-party .party-1 { right:10%; }
.siege-hero.offer-active .siege-hero-title p { max-width:200px; }
.siege-hero-bottom { justify-content:center; gap:21px; }
.floor-route { position:sticky; top:calc(var(--safe-top) + var(--hud-h) + 10px); z-index:calc(var(--z-hud) - 1); gap:8px; padding:8px; border:1px solid #68a9ba; border-radius:13px; background:#0c324b; box-shadow:0 8px 18px #0018278a; }
.floor-route button { display:grid; place-items:center; width:46px; height:44px; border:1px solid #81b7c4; border-radius:10px; color:#e6f4ed; background:#194762; font:900 16px/1 system-ui,sans-serif; font-variant-numeric:var(--num); }
.floor-route button small { position:absolute; margin:0 0 23px 28px; font-size:11px; }
.floor-route button.active { border-color:#ffe6ab; color:#2e260e; background:linear-gradient(#fff0c1,#e5b360); }
.floor-route button.forecast-win:not(.active) { border-color:#70d8bd; }
.floor-route button.forecast-loss:not(.active) { border-color:#e9a17c; }
.floor-route i { width:36px; }
.assault-floor { padding:16px; }
.floor-threat { font-size:12px; }
.enemy-unit { padding:8px 5px; }
.enemy-unit img { height:97px; }
.enemy-unit > div { min-height:72px; }
.enemy-unit strong { font-size:13px; }
.enemy-unit small { margin-top:2px; color:#c9e4e8; font-size:11px; }
.enemy-skill { display:block; margin-top:5px; color:var(--c-gold); font-size:11px; line-height:1.25; }
.skill-order { margin-top:12px; padding:11px; }
.skill-order-head { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:9px; }
.skill-order-head > span { color:#b5ebeb; font-size:10px; font-weight:900; letter-spacing:.06em; }
.skill-order-head button { display:flex; align-items:center; gap:3px; min-height:44px; padding:3px 6px; border:1px solid #83bbcc; border-radius:7px; color:var(--c-heading); background:#174866; font-size:11px; font-weight:800; }
.skill-order-head .ui-icon { width:20px; height:20px; }
.attack-pair { display:grid; grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); align-items:center; gap:5px; }
.lineup-choice { display:flex; align-items:center; gap:2px; min-width:0; min-height:73px; padding:3px; border:1px solid #b5d9de; border-radius:9px; color:#fff4d9; background:linear-gradient(#255f79,#123d59); text-align:left; }
.lineup-choice img { flex:none; width:46px; height:62px; object-fit:contain; }
.lineup-choice > span { display:grid; gap:2px; min-width:0; }
.lineup-choice small { color:#bde3e6; font-size:11px; }
.lineup-choice strong { overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.lineup-choice em { overflow:hidden; color:#f3d698; font-size:11px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.lineup-choice b { align-self:flex-start; margin-left:auto; color:#a9dfe4; }
.attack-pair .order-arrow { padding:0; text-align:center; font-size:16px; }
.ability-explain { margin-top:10px; }
.skill-order .ability-explain { display:block; }
.ability-explain p { display:block; margin:5px 0; color:#cde6e9; font-size:12px; line-height:1.4; }
.ability-explain b { color:var(--c-gold); }
.floor-forecast { display:flex; align-items:center; gap:8px; min-height:54px; margin-top:12px; padding:9px; border:1px solid #7abec4; border-radius:10px; color:#eaf6f3; background:#194c5c; font-size:12px; }
.floor-forecast .ui-icon { width:28px; height:28px; }
.floor-forecast > div { display:grid; gap:2px; }
.floor-forecast strong { font-size:12px; }
.floor-forecast small { color:#cce8e8; font-size:11px; }
.floor-forecast.forecast-loss { border-color:#d6a27c; background:#573d3eb5; }
.floor-forecast.forecast-win { border-color:#82d7bb; background:#1b5b54b5; }
.assault-confirm .btn { margin-top:8px; }
.assault-confirm p { font-size:12px; }
.siege-picker-backdrop { position:fixed; z-index:var(--z-sheet); inset:0; display:flex; align-items:end; justify-content:center; background:#061526cf; }
.siege-picker { width:min(100%,430px); max-height:calc(100dvh - var(--safe-top) - 24px); overscroll-behavior:contain; overflow:auto; padding:17px 14px calc(18px + var(--safe-bottom)); border:1px solid #b2dde1; border-radius:19px 19px 0 0; background:linear-gradient(#255e7a,#0c304b 58%,#08253b); box-shadow:0 -14px 40px #020b17; }
.siege-picker-head { display:flex; align-items:start; justify-content:space-between; gap:8px; }
.siege-picker h3 { margin:4px 0; color:#ffe8b8; font:700 25px Georgia,serif; font-variant-numeric:var(--num); }
.siege-picker > p { margin:4px 0 13px; color:#c9e4e9; font-size:12px; }
.picker-close { flex:none; width:44px; height:44px; border:1px solid #aad9df; border-radius:9px; color:#fff; background:#143b57; font-size:25px; }
.siege-picker-head > div,.siege-picker-options button > span { min-width:0; }
.siege-picker-options strong,.slot-current strong { overflow-wrap:anywhere; }
.picker-empty { padding:12px; border:1px solid var(--c-line); border-radius:11px; background:#154662; }
.siege-picker-options { display:grid; gap:8px; }
.siege-picker-options button { display:flex; align-items:center; gap:12px; min-height:84px; padding:6px 10px; border:1px solid var(--c-line); border-radius:11px; color:var(--c-text); background:#154662; text-align:left; }
.siege-picker-options button.chosen { border-color:var(--c-gold); background:#335e70; }
.siege-picker-options img { width:65px; height:69px; object-fit:contain; }
.siege-picker-options span { display:grid; gap:3px; }
.siege-picker-options strong { color:#fff1d1; font:700 19px Georgia,serif; font-variant-numeric:var(--num); }
.siege-picker-options small,.siege-picker-options em { font-size:12px; }
.siege-picker-options em { color:#f5dca7; font-style:normal; }

/* Combat information remains readable over the illustrated arena. */
.combat-team-status { position:absolute; z-index:4; top:9px; width:46%; padding:6px; border:1px solid #abd5d6c9; border-radius:10px; background:#08263ee3; box-shadow:0 4px 12px #00131e9c; }
.combat-team-status.ours { left:7px; }
.combat-team-status.theirs { right:7px; }
.combat-team-status > span { display:block; margin-bottom:3px; color:#ffe4a7; font-size:10px; font-weight:900; letter-spacing:.08em; }
.combat-status-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1px 3px; margin-top:5px; }
.combat-status-row b { overflow:hidden; color:#eef8f1; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.combat-status-row > span { color:#e6f3ee; font-size:11px; font-weight:800; }
.combat-status-row i { grid-column:1/-1; height:5px; overflow:hidden; border-radius:10px; background:#521f2d; }
.combat-status-row i em { display:block; height:100%; border-radius:10px; background:linear-gradient(90deg,#67d7b5,#d8f6d8); transition:width var(--dur-2) var(--ease-out); }
.combat-team-status.theirs .combat-status-row i em { background:linear-gradient(90deg,#f39d6a,#ffdc9c); }
.combat-status-row small { grid-column:1/-1; overflow:hidden; color:#ffe1a5; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.combat-fighters { bottom:18%; height:34%; }
.combat-versus { top:46%; }
.combat-log { min-height:122px; }
.combat-log .overline { font-size:11px; }
.combat-log p { font-size:11px; }
.result-screen { justify-content:flex-start; padding-top:70px; }
.result-art .ui-icon { width:92px; height:92px; }
.result-rewards { margin:15px 0; }
.result-insight { width:100%; padding:15px; border:1px solid #b5dce4; border-radius:13px; background:#174968; text-align:left; }
.result-insight h3 { margin:5px 0 8px; color:#fff1d0; font:700 22px/1.15 var(--font-display); }
.result-insight p { margin:0; color:#f1fafb; font-size:14px; line-height:1.4; }
.result-insight small { display:block; margin-top:9px; color:#d1edf1; font-size:12px; line-height:1.4; }
.result-insight .result-gift { display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid #ffffff2e; font-weight:700; }
.result-insight .result-gift .ui-icon { width:32px; height:32px; }
.result-analysis { width:100%; padding:15px; border:1px solid #a9d0d8; border-radius:13px; background:#113b56; text-align:left; }
.result-analysis summary { color:#e5faff; cursor:pointer; font-size:13px; font-weight:800; list-style-position:inside; }
.result-analysis summary:focus-visible { outline:3px solid #c8f6ff; outline-offset:4px; }
.result-analysis[open] summary { margin-bottom:10px; }
.result-analysis h3 { margin:4px 0 9px; color:#ffedc4; font:700 21px Georgia,serif; font-variant-numeric:var(--num); }
.result-analysis p { margin:5px 0; font-size:12px; }
.result-analysis strong { color:#fff1d0; }
.result-analysis small { display:block; margin-top:10px; color:#bfdee1; font-size:11px; line-height:1.4; }
.result-health { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.result-health span { padding:8px; border:1px solid #80b9c5; border-radius:8px; color:#d9f0ef; background:#0c2d46; font-size:11px; }
.result-health b { display:block; color:#ffe3a9; font-size:16px; }
.result-actions { flex-wrap:wrap; margin-top:15px; }
.result-actions .btn.wide { order:3; flex-basis:100%; }
.result-actions .btn { min-height:44px; }

/* Essential game text must stay legible on a narrow phone. */
.resource-tile small,body.game-mode .resource-tile small { font-size:11px; }
.tabs button { font-size:11px; }
.overline { font-size:10px; letter-spacing:.11em; }
.screen-heading p,.feature-card p,.offer-summary p { font-size:13px; }
.feature-card .btn,.pass-actions .btn { font-size:12px; }
.roster-details p { font-size:12px; line-height:1.35; }
.roster-details .roster-skill { color:#ffdda3; font-size:12px; }
.roster-details small,.roster-details .growth-effect { font-size:11px; line-height:1.35; }
.roster-actions > .btn { min-height:44px; font-size:12px; }
.quest-steps small { font-size:11px; }
.quest-cta { margin:0 0 11px; }
.ranked-unlock { padding:10px; border:1px solid #d3b98a; border-radius:9px; background:#70562b66; }
.pass-progress { display:grid; gap:8px; margin:13px 0; padding:11px; border:1px solid #80b6c8; border-radius:11px; background:#0a304b; }
.pass-progress > div:first-child { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.pass-progress strong { color:var(--c-gold); font-size:16px; }
.pass-progress span { color:#c6e2e6; font-size:11px; }
.pass-progress .progress { height:8px; margin:0; }
.economy-hero p,.economy-stats small { font-size:12px; }
.ledger-card .ledger-line { font-size:12px; }
.ledger-card .ledger-line small { font-size:11px; }
.history-battle small { font-size:11px; line-height:1.35; }
.history-archive-note { padding:0 4px; color:var(--c-text-3); font-size:11px; }
.combat-team-status > span,.combat-status-row b,.combat-status-row > span { font-size:11px; }
.combat-status-row small { font-size:11px; }
.combat-log p { font-size:12px; }
.result-analysis p { font-size:13px; }
@media (max-width:380px) {
 .resource-tile small,body.game-mode .resource-tile small { font-size:11px; }
 .tabs button { font-size:11px; }
 .roster-card { grid-template-columns:99px minmax(0,1fr); }
 .roster-portrait { min-height:132px; }
 .roster-portrait img { max-height:127px; }
 .enemy-unit img { height:76px; }
}

/* Closed beta: invite gate replaces the game chrome until a session exists. */
body.gate-mode .hero,body.gate-mode .meters,body.gate-mode .tabs,body.gate-mode #menu-toggle { display:none; }
.gate-screen { max-width:420px; margin:12vh auto 0; padding:0 16px; }
.gate-screen .account-gate h2 { margin:6px 0 8px; }
.gate-screen #invite-code { text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.gate-alt { margin:16px 0 8px; text-align:center; opacity:.8; font-size:13px; }
a.btn { text-decoration:none; align-items:center; }

/* Raster identity and collectible art. Text stays live and localizable. */
.gate-logo { display:block; width:78px; height:78px; margin:0 auto 8px; object-fit:contain; filter:drop-shadow(0 8px 20px #0a75b26b); }
.gate-screen .gate-logo { width:110px; height:110px; }
.egg-art { display:block; object-fit:contain; filter:drop-shadow(0 5px 7px #001a2a8c); }
.hatchery { background:linear-gradient(180deg,#0b294a7a 0%,#0b294ad9 150px,#0d304b 270px),url('/assets/hatchery-scene-v1.webp') center top / auto 205px no-repeat,#0d304b; }
.hatchery-header-egg { width:72px; height:72px; }
.hatchery .egg-offer .egg-offer-art { width:58px; height:58px; margin:0 auto 4px; }
.hatchery .egg-offer:disabled { opacity:.84; }
.quest-egg-art { flex:none; width:42px; height:42px; }
.season-banner { background:linear-gradient(90deg,#0b2948de 0%,#0b294893 50%,#0b294849),url('/assets/season-scene-v1.webp') center / cover; }
.season-banner::after { content:none; }
.pass-card .feature-card-heading > .ui-icon { display:none; }
.pass-card .feature-card-heading::after { content:''; flex:none; width:76px; height:76px; background:url('/assets/pass-chest-v1.webp') center / contain no-repeat; filter:drop-shadow(0 5px 8px #001b29a8); }
.result-art img { display:block; width:102px; height:102px; margin:auto; object-fit:contain; filter:drop-shadow(0 0 22px #ffe0a75f); }
@media (max-width:380px) {
 .hatchery .egg-offer .egg-offer-art { width:50px; height:50px; }
 .pass-card .feature-card-heading::after { width:62px; height:62px; }
}

/* Onboarding: the player walks to the hatchery, buys a random egg, pays to speed it up and opens it. */
.tabs button.coach-target { color:#fff3cf; }
.tabs button.coach-target::after { content:""; position:absolute; top:5px; right:calc(50% - 22px); width:10px; height:10px; border-radius:50%; background:var(--c-aqua); box-shadow:0 0 0 0 #87f5ddaa; animation:coach-pulse 1.6s var(--ease-out) infinite; }
@keyframes coach-pulse { 0% { box-shadow:0 0 0 0 #87f5ddaa; } 70%,100% { box-shadow:0 0 0 9px #87f5dd00; } }
.tutorial-inline { margin:0 0 14px; }
.tutorial-hatchery .tutorial-inline .tutorial-card { padding:18px 16px; }
.incubating-egg { animation:egg-wobble 2.4s ease-in-out infinite; transform-origin:50% 85%; }
.ripe-egg { animation:egg-ready 1.2s ease-in-out infinite; transform-origin:50% 85%; }
@keyframes egg-wobble { 0%,70%,100% { transform:rotate(0); } 76% { transform:rotate(-6deg); } 84% { transform:rotate(5deg); } 92% { transform:rotate(-3deg); } }
@keyframes egg-ready { 0%,100% { transform:scale(1); filter:drop-shadow(0 0 6px #ffd36e66); } 50% { transform:scale(1.05); filter:drop-shadow(0 0 16px #ffd36ecc); } }
.incubating { flex-wrap:nowrap; gap:10px; }
.incubating > div { display:grid; gap:2px; min-width:0; }
.incubating-art { flex:none; width:44px; height:44px; }
.incubating b { color:#fff; font-variant-numeric:var(--num); }
.incubating.ripe { border-color:var(--c-gold); background:#7a6a3a80; }

/* Hatch reveal reuses the battle overlay. */
.reveal-screen { display:grid; justify-items:center; gap:6px; min-height:100%; align-content:center; padding:56px 22px 30px; text-align:center; color:#eff8f3; background:radial-gradient(circle at 50% 32%,#3f86a066,transparent 62%); }
.reveal-screen.rarity-rare { background:radial-gradient(circle at 50% 32%,#5a7fe066,transparent 62%); }
.reveal-screen.rarity-special { background:radial-gradient(circle at 50% 32%,#c79a3f77,transparent 62%); }
.reveal-stage { position:relative; width:220px; height:220px; margin-bottom:6px; }
.reveal-egg,.reveal-dragon { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.reveal-egg { animation:reveal-egg 1.1s ease-in forwards; }
.reveal-dragon { opacity:0; animation:reveal-dragon .7s ease-out 1s forwards; filter:drop-shadow(0 10px 22px #000a); }
@keyframes reveal-egg { 0% { transform:rotate(0) scale(1); opacity:1; } 30% { transform:rotate(-8deg); } 55% { transform:rotate(8deg); } 80% { transform:scale(1.12); opacity:1; filter:brightness(1.8); } 100% { transform:scale(1.3); opacity:0; filter:brightness(3); } }
@keyframes reveal-dragon { from { opacity:0; transform:translateY(16px) scale(.85); } to { opacity:1; transform:none; } }
.reveal-screen h2 { margin:2px 0 0; color:var(--c-heading); font:700 30px/1.1 Georgia,serif; font-variant-numeric:var(--num); }
.reveal-meta { display:flex; align-items:center; gap:8px; margin:0; color:#cfe6e4; font-size:13px; }
.reveal-meta .rarity-pill { position:static; font-size:11px; }
.reveal-skill { max-width:340px; margin:4px 0 14px; color:#d9e9e8; font-size:13px; line-height:1.45; }
.reveal-screen .btn.wide { max-width:340px; }
@media (prefers-reduced-motion: reduce) { .incubating-egg,.ripe-egg,.tabs button.coach-target::after,.reveal-egg { animation:none; } .reveal-egg { opacity:0; } .reveal-dragon { animation:none; opacity:1; } }

/* Gameplay art: small readable ability symbols, season rewards and event feedback. */
.skill-art,.item-art { display:inline-block; flex:none; width:24px; height:24px; object-fit:contain; vertical-align:middle; }
.enemy-skill { display:flex; align-items:center; gap:4px; text-align:left; }
.enemy-unit .skill-art { width:29px; height:29px; filter:none; }
.enemy-skill > span { min-width:0; }
.lineup-choice em,.siege-picker-options small { display:flex; align-items:center; gap:4px; }
.lineup-choice .skill-art { width:20px; height:20px; }
.siege-picker-options .skill-art { width:22px; height:22px; }
.ability-explain p,.roster-details .roster-skill,.reveal-skill { display:flex; align-items:center; gap:6px; }
.ability-explain .skill-art,.roster-skill .skill-art { width:28px; height:28px; }
.reveal-skill .skill-art { width:34px; height:34px; }
.mutation-choices .btn,.pass-actions .btn { display:inline-flex; align-items:center; justify-content:center; gap:4px; }
.mutation-choices .item-art,.pass-actions .item-art { width:25px; height:25px; }
.standings-list b { display:inline-flex; align-items:center; gap:3px; min-width:40px; }
.standings-list b .item-art { width:27px; height:27px; }
.combat-arena.floor-2 { background-image:url('/assets/siege-arena-two-v1.webp'); }
.combat-arena.floor-3 { background-image:url('/assets/siege-arena-three-v1.webp'); }
.combat-fx { position:absolute; z-index:3; top:39%; width:47%; height:36%; object-fit:contain; pointer-events:none; animation:combat-fx-in .62s ease-out both; }
.combat-fx.ours { left:0; }
.combat-fx.theirs { right:0; }
.combat-fighters.hit { animation:combat-hit .45s ease-out; }
.combat-caption { display:flex; align-items:center; justify-content:center; gap:7px; }
.combat-caption .skill-art { width:32px; height:32px; }
.reveal-egg { animation:reveal-closed .75s ease-in forwards; }
.reveal-open,.reveal-burst { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; opacity:0; }
.reveal-open { animation:reveal-open .78s ease-out .62s both; }
.reveal-burst { animation:reveal-burst .75s ease-out .92s both; }
.reveal-dragon { animation:reveal-dragon .7s ease-out 1.33s forwards; }
@keyframes combat-fx-in { 0%{opacity:0;transform:scale(.52)} 30%{opacity:1;transform:scale(1.06)} 100%{opacity:0;transform:scale(1.22)} }
@keyframes combat-hit { 30%{transform:translateX(-6px);filter:brightness(1.5)} 60%{transform:translateX(4px)} }
@keyframes reveal-closed { 0%,65%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.08)} }
@keyframes reveal-open { 0%{opacity:0;transform:scale(.9)} 25%,72%{opacity:1;transform:scale(1.05)} 100%{opacity:0;transform:scale(1.2)} }
@keyframes reveal-burst { 0%{opacity:0;transform:scale(.45)} 35%{opacity:1} 100%{opacity:0;transform:scale(1.7)} }
@media (prefers-reduced-motion:reduce) { .combat-fx,.combat-fighters.hit,.reveal-egg,.reveal-open,.reveal-burst,.reveal-dragon { animation:none; } .combat-fx,.reveal-egg,.reveal-open,.reveal-burst { display:none; } .reveal-dragon { opacity:1; } }

/* Floor command bar: vertical tiles so labels are never truncated; cost chip carries the currency. */
body.game-mode .game-action-bar .action-grid { width:100%; min-width:0; gap:6px; }
body.game-mode .game-action-bar .action-button { flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:62px; padding:7px 3px 6px; font-size:11px; line-height:1.1; }
body.game-mode .game-action-bar .action-button .action-icon { width:22px; height:22px; }
.action-button .action-label { overflow:visible; text-overflow:clip; white-space:nowrap; font-weight:850; }
.action-button .action-cost { display:inline-flex; align-items:center; gap:2px; padding:1px 5px 1px 3px; border-radius:999px; font-size:11px; line-height:14px; }
.action-button .action-cost b { font-weight:850; }
.action-button .action-cost .chip-icon { width:12px; height:12px; }
.action-button .action-cost.credits { background:#2a1c0899; color:var(--c-gold); }
.action-button .action-cost.biomass { background:#06332e99; color:#a9f5df; }
@media (max-width:360px) { body.game-mode .game-action-bar .action-button { font-size:11px; min-height:58px; } }
.tutorial-hatchery { min-height:calc(100dvh - 150px); align-content:start; padding:16px 14px; border-radius:18px; background:linear-gradient(180deg,#0a223655 0%,#0a2236cc 45%,#0a2236f5 100%),url('/assets/hatchery-scene-v1.webp') center top/cover no-repeat; }
.tutorial-hatchery .screen-heading { padding-top:110px; text-shadow:0 2px 10px #000c; }

/* Tower slot sheet: who defends this slot now, and which of my dragons can take it. */
.slot-sheet h4 { margin:16px 0 8px; color:#cfe6e4; font-size:11px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.slot-current { display:flex; gap:12px; align-items:center; margin:12px 0 8px; padding:10px; border:1px solid #e5cc8d; border-radius:13px; background:linear-gradient(150deg,#2f6a83cc,#123a55e6); }
.slot-current img { flex:none; width:92px; height:96px; object-fit:contain; filter:drop-shadow(0 6px 10px #0009); }
.slot-current > div { display:grid; gap:3px; min-width:0; }
.slot-current strong { color:#fff1d1; font:700 22px/1.1 Georgia,serif; font-variant-numeric:var(--num); }
.slot-current small { color:#ffe2a7; font-size:12px; }
.slot-current p { margin:2px 0 0; color:#d9e9e8; font-size:12px; line-height:1.4; }
.slot-sheet .siege-picker-options button:disabled { opacity:1; cursor:default; }
.slot-sheet .siege-picker-options em { color:#a9cfd3; }
.slot-sheet .siege-picker-options em.moves { color:#f5dca7; }
.slot-sheet { max-height:calc(100dvh - var(--safe-top) - 24px); padding-bottom:calc(18px + var(--safe-bottom)); }

.boot-screen { position:fixed; inset:0; z-index:var(--z-boot); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px; color:var(--c-text); background:radial-gradient(circle at 50% 38%,#17496b,#0a1724 70%); text-align:center; }
.boot-screen img { width:120px; height:120px; object-fit:contain; filter:drop-shadow(0 8px 24px #0a75b280); animation:boot-float 2.4s ease-in-out infinite; }
.boot-screen strong { font:700 28px/1.1 Georgia,serif; color:#ffe9b8; letter-spacing:.02em; font-variant-numeric:var(--num); }
.boot-screen span { font-size:14px; color:#a9cbd6; }
.boot-screen button { display:none; margin-top:6px; min-height:44px; padding:0 22px; border:1px solid var(--c-gold); border-radius:12px; color:#2a1b05; background:linear-gradient(#ffe3a3,#e9b75a); font-weight:800; }
.boot-screen.failed img { animation:none; opacity:.6; }
.boot-screen.failed button { display:block; }
@keyframes boot-float { 50% { transform:translateY(-6px); } }
@media (prefers-reduced-motion:reduce) { .boot-screen img { animation:none; } }
.invite-dragons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0 14px; }
.invite-dragon { margin:0; display:grid; justify-items:center; gap:4px; padding:8px 4px; border:1px solid var(--c-line); border-radius:12px; background:linear-gradient(#21506b,#123650); text-align:center; }
.invite-dragon img { width:100%; aspect-ratio:1; object-fit:contain; }
.invite-dragon strong { display:block; font-size:13px; color:#ffe9b8; }
.invite-dragon small { display:block; font-size:11px; color:#a9cbd6; }
.season-summary h2 { margin:4px 0 10px; }
/* Quiet mode ("Долгий сезон", economy.pass_long): the season screen card and the wallet pass note. */
.long-season { border-color:#7fe3a6; }
.long-season p { margin:6px 0 0; font-size:13px; line-height:1.45; }
.long-season.is-inline { margin-top:10px; padding:9px 10px; border:1px solid #7fe3a6; border-radius:10px; background:var(--c-surface-1); }
.long-season.is-inline .overline { color:#7fe3a6; }
.egg-odds { margin:10px 0 0; font-size:13px; color:#cfe6ec; }
.egg-odds summary { cursor:pointer; font-weight:800; color:#ffe9b8; min-height:44px; display:flex; align-items:center; }
.egg-odds p { margin:6px 0 0; line-height:1.4; }
/* Numbers: lining tabular figures everywhere a value is read or compared (UX-015). */
.resource-tile strong, .action-cost b, .quest-steps strong, .standings-list strong, .standings-list b, .mission-count, .collection-count, .floor-number, .ranked-remaining, .season-banner strong, .economy-hero strong, .economy-stats strong, .result-rewards strong, .result-health b, .treasury-chip b, .track-no, .task-head span, .egg-offer span, .first-egg-offer b, .pass-progress strong, .floor-route button, .combat-status-row > span, .combat-damage, .incubating b, .wallet-timer, .offer-card__timer, .price-anchor { font-variant-numeric:var(--num); }
.rarity-pill.inline { position:static; display:inline-block; vertical-align:middle; margin:0; }
.result-plan { align-self:stretch; width:100%; box-sizing:border-box; margin:10px 0 4px; padding:10px 12px; border:1px solid var(--c-line); border-radius:12px; background:#123650; text-align:left; }

/* Token identity appears only where credits and spending are explained. */
.resource-credits[data-tab] { width:100%; font:inherit; cursor:pointer; }
@media (hover:hover) and (pointer:fine) { .resource-credits[data-tab]:hover { filter:brightness(1.12); } }
/* UX-028: the wallet keeps its chest; the token avatar belongs to the "Drakly token" item only. */
.utility-menu > button[hidden] { display:none; }
.utility-menu [data-menu-tab="token"] img { width:27px; height:27px; border:1px solid #8dbafa; border-radius:7px; object-fit:cover; }
.token-story { position:relative; margin:12px 0; padding:17px; overflow:hidden; border:1px solid #84a8e7; border-radius:17px; background:radial-gradient(circle at 86% 5%,#1c5dd075,transparent 44%),linear-gradient(145deg,#102c5b,#061936 66%,#0a2949); box-shadow:inset 0 1px #d8efff91,0 12px 28px #00112b8c; }
.token-story::before { content:''; position:absolute; inset:5px; border:1px solid #c9e5ff26; border-radius:12px; pointer-events:none; }
.token-story-head { display:flex; align-items:center; gap:14px; }
.token-story-head img { flex:none; width:78px; height:78px; border:1px solid #7aa3e0; border-radius:16px; object-fit:cover; box-shadow:0 0 22px #216ef077; }
.token-story-head > div { min-width:0; }
.token-story h2 { margin:3px 0 7px; color:#f7fbff; font:700 25px/1.08 Georgia,'Palatino Linotype',serif; font-variant-numeric:var(--num); }
.token-story-status { display:inline-block; padding:4px 7px; border:1px solid #add1e5a8; border-radius:100px; color:#d1eaff; background:#25577f70; font-size:10px; font-weight:800; letter-spacing:.07em; }
.token-story p { margin:13px 0 0; color:#e2eef7; font-size:13px; line-height:1.48; }
.token-story-route { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:15px 0 0; padding:0; list-style:none; }
.token-story-route li { position:relative; min-width:0; min-height:65px; padding:8px; border:1px solid #759fd1; border-radius:10px; background:#113963bd; }
.token-story-route li span { display:block; margin-bottom:6px; color:#91cfff; font-size:11px; font-weight:800; }
.token-story-route li strong { display:block; color:#fff6db; font-size:11px; line-height:1.25; overflow-wrap:anywhere; }
.token-story-route li:not(:last-child)::after { content:'→'; position:absolute; z-index:1; top:50%; right:-12px; transform:translateY(-50%); color:#d6eaff; font-size:16px; }
.token-story .token-story-note { color:#b9d6eb; font-size:12px; }
.token-story-action { width:100%; margin-top:15px; }
.token-education-link { width:100%; margin-top:9px; }
@media (max-width:380px) { .token-story { padding:14px; } .token-story-head img { width:68px; height:68px; } .token-story h2 { font-size:22px; } .token-story-route li { padding:7px 5px; } .token-story-route li strong { font-size:11px; } }
.token-page { display:grid; gap:13px; padding-top:6px; }
.token-public-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 2px 3px; }
.token-public-nav a { display:flex; align-items:center; gap:9px; color:var(--c-heading); font:700 18px Georgia,serif; text-decoration:none; font-variant-numeric:var(--num); }
.token-public-nav img { width:33px; height:33px; object-fit:contain; }
.token-public-nav .btn { min-width:52px; min-height:44px; }
.token-choice-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:15px 0; }
.token-choice { min-height:48px; padding:8px 5px; border:1px solid #8bbdde; border-radius:10px; color:#d8f3ff; background:#0b3966; cursor:pointer; font:800 12px/1.2 var(--font-ui); }
.token-choice[aria-pressed="true"] { border-color:#d2f7ff; color:#07375e; background:#c4f3ff; box-shadow:0 3px 0 #579bc9; }
.token-choice:focus-visible { outline:3px solid #e6fbff; outline-offset:3px; }
.token-path-panel { padding:14px; border:1px solid #8abdd7; border-radius:12px; background:#0a3c70; }
.token-path-panel h3 { margin:0 0 8px; color:#fff; font-size:18px; }
.token-path-panel ol { margin:0; padding-left:22px; color:#e2f7ff; font-size:13px; line-height:1.45; }
.token-path-panel li+li { margin-top:7px; }
.token-path-panel p { margin:12px 0 0; font-size:12px; }
.token-address { display:grid; gap:9px; padding:11px; border:1px solid #85b9d9; border-radius:10px; background:#061e38; }
.token-address code { color:#e2f3ff; overflow-wrap:anywhere; font-size:12px; line-height:1.5; user-select:all; }
.token-explorer-link { display:inline-block; margin-top:10px; color:#bce7fb; font-size:12px; text-underline-offset:3px; }
.token-changes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.token-changes > div { display:grid; gap:5px; padding:9px 5px; border:1px solid #6c9fc6; border-radius:9px; background:#153c60; text-align:center; }
.token-changes small { color:#b9d8e8; font-size:11px; }
.token-changes strong { color:#eaf9ff; font-size:11px; font-variant-numeric:var(--num); }
.token-changes strong.up { color:#a2f4cf; }.token-changes strong.down { color:#ffb3a9; }
.token-market-sub { display:flex; flex-wrap:wrap; gap:7px 15px; margin-top:13px; color:#dceaf3; font-size:11px; font-variant-numeric:var(--num); }
@media (max-width:380px) { .token-choice { font-size:11px; } }
.token-address .btn { min-height:44px; }
.result-plan p { margin:4px 0 0; font-size:13px; color:var(--c-text); }
.result-plan b { color:#ffe9b8; margin-right:6px; }
.enemy-unit.targeted { outline:2px solid #ffd46b; outline-offset:2px; box-shadow:0 0 0 4px #ffd46b33; }
.target-note { display:block; margin-top:2px; font-style:normal; font-size:12px; font-weight:800; color:#ffd46b; }
.speed-toggle { position:absolute; top:calc(var(--safe-top) + 10px); right:64px; z-index:3; min-width:44px; min-height:44px; padding:0 10px; border:1px solid var(--c-line); border-radius:10px; color:var(--c-text); background:#16405a; font-weight:800; font-variant-numeric:var(--num); }
.email-login { margin-top:6px; }
.tasks-screen { display:grid; gap:18px; }
.task-group { display:grid; gap:9px; }
.task-group h2 { margin:0 0 2px; color:var(--c-heading); font:700 22px/1.2 Georgia,serif; font-variant-numeric:var(--num); }
.task-card { padding:14px; border:1px solid #83aee0; border-radius:15px; background:linear-gradient(140deg,#123956,#0a263e); box-shadow:inset 0 1px #e7f4ff38; }
.task-head,.task-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.task-head strong { color:#f4faff; font-size:14px; line-height:1.3; }
.task-head span { flex:none; color:#b9e5dc; font-size:12px; font-weight:800; }
.task-progress { height:7px; margin:12px 0; overflow:hidden; border-radius:20px; background:#071b2c; }
.task-progress span { display:block; height:100%; border-radius:20px; background:linear-gradient(90deg,#59bfa6,#d5e99e); }
.task-footer small,.task-done { color:#c4dce8; font-size:12px; font-weight:800; }
.task-footer .btn { min-height:44px; min-width:124px; }
.share-tower-card { overflow:hidden; border:1px solid #67bfe6; border-radius:15px; background:#0b2541; box-shadow:0 0 0 1px #68caf62b,0 11px 28px #00172a9c; }
.share-tower-card > img { display:block; width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; background:#0b233a; }
.share-tower-detail { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px; background:linear-gradient(180deg,#103756,#0b2946); }
.share-tower-detail strong,.share-tower-detail small { display:block; }
.share-tower-detail strong { color:#ecfaff; font:700 16px Georgia,serif; font-variant-numeric:var(--num); }
.share-tower-detail small { margin-top:4px; color:#bad5df; font-size:11px; line-height:1.3; }
.share-tower-detail .btn { min-height:44px; flex:none; }
.share-tower-card .btn.primary:not(.secondary):not(.subtle):not(.danger) { color:#082744; background:linear-gradient(180deg,#dcfaff,#91dff3 73%,#4faed7); border-color:#b8f1ff; box-shadow:inset 0 1px #fff,0 3px 0 #25668d,0 8px 17px #02182873; }
.invite-banner { display:block; width:100%; height:auto; aspect-ratio:1200/630; margin-bottom:15px; border:1px solid #67bfe6; border-radius:12px; object-fit:cover; }
.share-tower-detail > div { flex:1; min-width:0; }
@media (max-width:440px) { .share-tower-detail { flex-wrap:wrap; }.share-tower-detail > div { flex-basis:100%; }.share-tower-detail .btn { width:100%; } }
.email-login .field { margin-top:8px; }
.email-login [hidden] { display:none !important; }
.report-screen textarea { width:100%; box-sizing:border-box; min-height:120px; padding:10px 12px; border:1px solid var(--c-line); border-radius:12px; color:var(--c-text); background:#0f2d44; font:inherit; resize:vertical; }

/* Combat v3.1 (engine 4): stance guess, floor traits, mutation variants, exchange strip */
.fx-art { width:26px; height:26px; object-fit:contain; flex:none; vertical-align:middle; filter:drop-shadow(0 1px 3px #0009); }
.variant-pill { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border:1px solid var(--c-gold); border-radius:6px; color:#3b2a13; background:linear-gradient(#fff2c3,var(--c-gold-2)); font-size:11px; font-weight:900; line-height:1; }
.trait-badge { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:7px; margin:8px 0 2px; padding:6px 9px; border:1px solid #edcb89aa; border-radius:10px; background:#2a3b4dcc; color:#ffe9bd; font-size:11px; }
.trait-badge .fx-art { grid-row:span 2; }
.trait-badge b { font-size:12px; }
.trait-badge small { color:#d9e7ea; font-size:11px; line-height:1.25; }
.label-trait { width:16px; height:16px; margin-left:2px; }
.stance-guess { margin-top:12px; padding:9px; border:1px solid #7abec4; border-radius:10px; background:#123c55; }
.stance-guess-head { display:grid; gap:2px; margin-bottom:7px; }
.stance-guess-head small { color:#cce8e8; font-size:11px; }
.stance-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.stance-option { display:grid; justify-items:center; gap:2px; min-height:64px; padding:5px 3px; border:1px solid var(--c-line-2); border-radius:9px; color:var(--c-text); background:#0f3550; font-size:11px; }
.stance-option small { color:var(--c-text-3); font-size:11px; text-align:center; }
.stance-option.none { align-content:center; color:var(--c-text-3); }
.stance-option.chosen { border-color:var(--c-gold); background:linear-gradient(#46809b,#153954); box-shadow:var(--ring); }
.plan-warning { color:#ffcf9a !important; font-weight:800; }
.trait-options { display:grid; gap:7px; }
.trait-option { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--c-line-2); border-radius:10px; color:var(--c-text); background:#113a56; text-align:left; }
.trait-option .fx-art { width:34px; height:34px; }
.trait-option span { display:grid; gap:2px; }
.trait-option small { color:#cce8e8; font-size:11px; }
.trait-option.chosen { border-color:var(--c-gold); box-shadow:var(--ring); }
.defense-block { margin:8px 0 12px; }
.defense-block h4 { margin:0 0 4px; }
.defense-advanced summary { cursor:pointer; color:var(--c-gold); font-weight:800; font-size:12px; padding:6px 0; }
.stance-mode { display:flex; gap:6px; margin:6px 0 8px; }
.stance-mode .btn { flex:1; min-height:44px; }
.stance-weight { display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid #ffffff14; }
.stance-weight > span { display:grid; flex:1; }
.stance-weight small { color:var(--c-text-3); font-size:11px; }
.stepper { flex:none; width:44px; height:44px; border:1px solid var(--c-line-2); border-radius:8px; color:var(--c-text); background:#0f3550; font-size:18px; font-weight:900; }
.stepper:disabled { opacity:.4; }
.variant-choice { display:flex; align-items:center; gap:5px; text-align:left; }
.variant-choice span { font-size:11px; line-height:1.2; }
.mutation-state { display:block; line-height:1.35; }
.mutation-choices.remutate .btn { flex:0 1 auto; min-width:64px; }
.exchange-strip { margin:8px 0; padding:8px; border:1px solid #7abec466; border-radius:10px; background:#0d2f47d9; font-size:11px; }
.exchange-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:6px; }
.exchange-head b { color:var(--c-gold); font-size:12px; }
.exchange-casts { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.exchange-casts > div { display:grid; gap:3px; align-content:start; }
.exchange-casts small { color:var(--c-text-3); font-size:11px; font-weight:800; letter-spacing:.04em; }
.cast { display:flex; flex-wrap:wrap; align-items:center; gap:4px; color:var(--c-text); }
.cast .skill-art { width:20px; height:20px; }
.cast .fx-art { width:18px; height:18px; }
.cast.cancelled,.cast.delayed { color:#ffb79a; text-decoration:line-through; text-decoration-thickness:1px; }
.cast.trait,.cast.stance { padding:2px 6px; border:1px solid #edcb8966; border-radius:7px; color:#ffe9bd; }
.stance-reveal p { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }
.stance-reveal .commit { margin-left:auto; color:#7fa3b3; font-family:monospace; font-size:11px; }
@media (max-width:360px) { .stance-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .exchange-casts { grid-template-columns:1fr; } }
.roster-actions { flex-wrap:wrap; }
.roster-actions > .mutation-choices { flex:1 1 100%; }
.mutation-choices .variant-choice { flex:1 1 45%; min-height:44px; justify-content:flex-start; }

/* Phase 3 · ranked v3.1: ticket checklist, daily roster, hidden ranked defense, leagues */
.ticket-list { display:grid; gap:6px; margin:10px 0 4px; padding:0; list-style:none; }
.ticket-list li { display:flex; align-items:center; gap:10px; padding:9px; border:1px solid var(--c-line-2); border-radius:9px; background:#0c3049; }
.ticket-list li.done { border-color:#87f5dd88; background:#0e3a44; }
.ticket-check { display:grid; place-items:center; flex:none; width:24px; height:24px; border:1px solid var(--c-aqua); border-radius:50%; color:var(--c-aqua); font-weight:800; }
.ticket-label { display:grid; flex:1; gap:2px; font-size:12px; }
.ticket-label small { color:var(--c-gold); font-variant-numeric:var(--num); }
.roster-chips { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px; margin:8px 0; }
.roster-chip { display:flex; align-items:center; gap:8px; padding:6px; border:1px solid var(--c-line-2); border-radius:10px; color:var(--c-text); background:#113a56; text-align:left; }
.roster-chip img { width:40px; height:40px; object-fit:contain; }
.roster-chip span { display:grid; min-width:0; }
.roster-chip strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.roster-chip small { color:var(--c-text-3); font-size:11px; }
.roster-chip.chosen { border-color:var(--c-gold); box-shadow:0 0 0 1px var(--c-gold),0 0 14px #ffda9144; }
.roster-chip:disabled { opacity:1; }
.lock-badge,.league-badge { padding:2px 7px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.lock-badge { display:inline-block; color:#0a2135; background:var(--c-aqua); }
.league-badge { display:inline-flex; flex:none; align-items:center; gap:3px; min-height:29px; padding:1px 7px 1px 2px; color:#0a2135; background:#cfd8de; white-space:nowrap; }
.league-badge .league-badge__name,.league-badge .league-badge__division { flex:none; min-width:0; overflow:visible; }
.league-badge__division { font-size:11px; }
.league-emblem { display:block; flex:none; width:27px; height:27px; object-fit:contain; }
.league-marks { display:inline-flex; flex:none; align-items:flex-end; gap:2px; height:7px; margin-left:1px; }
.league-marks i { display:block; width:3px; height:6px; border-radius:2px; background:#fff9d7; box-shadow:0 0 5px #fff2a0; }
.league-dragon { background:linear-gradient(135deg,#ff9d6b,var(--c-gold)); }
.league-gold { background:var(--c-gold); }
.league-silver { background:#dfe9ee; }
.league-bronze { background:#d9a272; }
.league-ladder { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:10px 0 12px; }
.league-ladder__league { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; column-gap:6px; min-width:0; padding:6px; border:1px solid #4f83ae; border-radius:10px; color:#eef8ff; background:linear-gradient(150deg,#163e67,#0a2947); }
.league-ladder__league.league-bronze { border-color:#c78951; }
.league-ladder__league.league-silver { border-color:#a6d9f4; }
.league-ladder__league.league-gold { border-color:#ffce6a; }
.league-ladder__league.league-dragon { border-color:#ffc19b; }
.league-ladder__league .league-emblem { width:34px; height:34px; }
.league-ladder__league strong { min-width:0; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.league-ladder__steps { display:flex; grid-column:1/-1; gap:4px; margin-top:4px; }
.league-ladder__step { display:inline-flex; flex:1; align-items:center; justify-content:center; gap:3px; min-width:0; padding:3px 1px; border:1px solid #75add159; border-radius:6px; color:#fff3cf; background:#0c2d4f; font-size:10px; font-weight:800; }
.league-ladder__step .league-marks { height:6px; margin:0; }
.league-ladder__step .league-marks i { width:2px; height:5px; }
.prestige-emblem { display:block; flex:none; width:22px; height:22px; object-fit:contain; }
.prestige-badge { display:inline-flex; flex:none; align-items:center; gap:2px; padding:1px 7px 1px 2px; border:1px solid #f3c77899; border-radius:999px; color:#ffe2a4; background:#4b3450; font-size:10px; font-weight:800; white-space:nowrap; }
.standings-list .prestige-badge,.standings-list .league-badge,.standings-list .league-marks { flex:none; overflow:visible; }
.standings-list > .standings-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto; column-gap:8px; row-gap:3px; align-items:center; }
.standings-row > b { grid-column:1; grid-row:1/3; }
.standings-list .standings-name { grid-column:2; grid-row:1; flex:none; white-space:nowrap; }
.standings-list .standings-cosmetics { display:flex; grid-column:2/4; grid-row:2; flex:none; align-items:center; gap:5px; overflow:visible; }
.standings-row > strong { grid-column:3; grid-row:1; }
/* Economy v3: the prize places of the window league and the wipe warning of the last window. */
.standings-list > .standings-row.v3-prize { box-shadow:inset 3px 0 0 var(--c-gold); }
.v3-standings h2 .league-badge { font-size:inherit; }
.v3-wipe { color:var(--c-danger); font-weight:600; }
.store-prestige { margin-top:16px; padding:14px; border:1px solid #f3c77888; border-radius:12px; background:linear-gradient(135deg,#123a52,#342c50); }
.store-prestige h4 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 6px; color:#ffe2a4; }
.store-prestige h4 > .prestige-emblem { width:34px; height:34px; }
.store-prestige p { margin:0 0 12px; color:#e0e8eb; font-size:12px; line-height:1.5; }
.store-prestige__offers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.store-prestige__offers .btn { min-width:0; padding:9px 4px; justify-content:center; }
@media (max-width:380px) { .store-prestige__offers { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.my-league { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 10px; padding:10px; border:1px solid #ffda91aa; border-radius:10px; background:#123a52; }
.my-league small { flex-basis:100%; color:var(--c-gold); }
.standings-list > div.me { border-color:var(--c-gold); }
.standings-funds { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:10px 0; }
.standings-funds > div { min-width:0; padding:9px 10px; border:1px solid #8fdcf5; border-radius:10px; background:#103b5b; }
.standings-funds > div:first-child { grid-column:1/-1; border-color:#f7d38d; background:linear-gradient(110deg,#173f5c,#345077); }
.standings-funds small { display:block; min-height:2.5em; color:#d6efff; font-size:10px; line-height:1.25; }
.standings-funds strong { display:block; margin-top:3px; color:#fff1c2; font:18px/1.1 DraklyBold,'Trebuchet MS',sans-serif; overflow-wrap:anywhere; }
.standings-funds > div:first-child strong { font-size:24px; }
.standings-list .standings-estimate { grid-column:2/4; grid-row:3; color:#ffdf9c; font-size:11px; font-weight:800; white-space:normal; overflow:visible; }

.f2p-table summary,.ranked-feed .overline { cursor:pointer; color:var(--c-text-3); font-size:11px; }
.ranked-feed { display:grid; gap:2px; margin:6px 0 12px; font-size:11px; }
.ranked-feed p { margin:0; color:#d2e7e8; }
.stance-share { margin:10px 0; padding:9px; border:1px dashed #7ab7cb88; border-radius:9px; background:#0b2c45; }
.stance-share p { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:6px 0; font-size:12px; }
.stance-share p span { display:inline-flex; align-items:center; gap:4px; }
.stance-share .fx-art { width:22px; height:22px; }
.stance-share small { color:var(--c-text-3); font-size:11px; }
.hidden-order { margin:4px 0 6px; color:var(--c-text-3); }
.trait-options.compact { grid-template-columns:repeat(3,1fr); }
.trait-options.compact .trait-option { flex-direction:column; align-items:flex-start; padding:8px; }
.trait-options.compact .trait-option small { font-size:11px; }
.trait-option.chosen { border-color:var(--c-gold); box-shadow:0 0 0 1px var(--c-gold); }
@media (max-width:420px) { .trait-options.compact { grid-template-columns:1fr; } }

/* Phase 4: tower treasury, defense log with revenge, daily quests, season track. */
.treasury-card { margin:12px 0; }
.treasury-card.full { border-color:var(--c-gold); box-shadow:inset 0 1px #ffffff69,0 0 22px #ffda9144,0 10px 24px #00192b85; }
.treasury-card .treasury-usd { margin:-4px 0 12px; color:var(--c-gold); font-size:12px; }
.treasury-card .treasury-warning { display:flex; gap:8px; align-items:flex-start; margin:12px 0 8px; padding:9px 10px; border:1px solid #e6b87566; border-radius:10px; background:#3a2a1a66; color:#f7dcae; }
.treasury-card .treasury-warning .ui-icon { width:22px; height:22px; }
.treasury-card small { display:block; color:#b9d9dd; font-size:11px; line-height:1.45; }
.defense-log { display:grid; gap:8px; margin:0 0 16px; }
.defense-log-head h2 { margin:3px 0 4px; font:700 20px/1.1 Georgia,serif; color:var(--c-heading); font-variant-numeric:var(--num); }
.defense-log-head p { margin:0 0 4px; color:#c9e2e6; font-size:11px; line-height:1.45; }
.defense-row .btn { min-height:44px; padding:8px 12px; font-size:12px; }
.defense-done { color:#9fe8d6; font-size:11px; font-weight:700; white-space:nowrap; }
.quest-list { display:grid; gap:8px; margin:6px 0 12px; }
.quest-row { display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:center; padding:8px 10px; border:1px solid #80b6c866; border-radius:10px; background:#0a304b; }
.quest-row strong { display:block; margin:0 0 5px; color:#eaf6f7; font-size:12px; font-weight:700; }
.quest-row .progress { height:6px; margin:0; }
.quest-row b { color:var(--c-gold); font-size:12px; }
.quest-row.done { border-color:#87f5dd88; }
.quest-row.done .quest-mark { color:var(--c-aqua); font-weight:800; text-align:center; }
.quest-mark .ui-icon { width:24px; height:24px; }
.track-head,.track-level { display:grid; grid-template-columns:38px 1fr 1fr; gap:6px; align-items:stretch; }
.track-head { margin:12px 0 6px; color:#9fc4cf; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.track-levels { display:grid; gap:6px; }
.track-no { display:grid; place-items:center; align-content:center; border-radius:8px; background:#0a304b; color:var(--c-heading); font:700 13px/1 Georgia,serif; font-variant-numeric:var(--num); }
.track-no small { color:#88aebb; font:600 11px/1.2 system-ui,sans-serif; font-variant-numeric:var(--num); }
.track-level.reached .track-no { background:linear-gradient(#6b5226,#3d2e17); }
.track-reward { position:relative; display:flex; align-items:center; gap:6px; min-height:44px; padding:5px 7px; border:1px solid #80b6c866; border-radius:9px; background:#0c3350; color:#d7e9ed; font-size:11px; text-align:left; }
.track-reward .ui-icon { width:20px; height:20px; }
.track-reward .track-egg { width:22px; height:22px; object-fit:contain; }
.track-reward span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.track-reward b { margin-left:auto; color:var(--c-aqua); }
.track-reward.ready { border-color:var(--c-gold); background:linear-gradient(#5d4a24,#2f2614); color:#fff3d6; box-shadow:0 0 12px #ffda9133; cursor:pointer; }
.track-reward.claimed { opacity:.6; }
.track-reward.locked { opacity:.45; }
.track-reward:disabled { cursor:default; }
.raid-note { display:flex; gap:7px; align-items:center; justify-content:center; }
.raid-note .ui-icon { width:22px; height:22px; }
.treasury-chip { display:flex; align-items:center; gap:7px; margin:10px 0; padding:6px 10px 6px 7px; border:1px solid #b1e8ecb0; border-radius:10px; background:linear-gradient(120deg,#0b304adf,#164661cc); color:#fff9eb; text-align:left; box-shadow:inset 0 1px #ffffff50,0 8px 20px #06203570; }
.treasury-chip .ui-icon { width:28px; height:28px; }
.treasury-chip span { display:grid; gap:1px; }
.treasury-chip small { color:#a5eff0; font-size:10px; font-weight:800; letter-spacing:.08em; }
.treasury-chip b { font:700 14px/1.1 Georgia,serif; font-variant-numeric:var(--num); }
.treasury-chip.has { border-color:var(--c-gold); }
.treasury-chip.full { box-shadow:inset 0 1px #ffffff50,0 0 16px #ffda9177; }
body.game-mode .treasury-chip { position:absolute; z-index:8; top:calc(var(--safe-top) + var(--hud-h) + 4px); left:10px; margin:0; max-width:62%; }
.treasury-sheet { padding-top:30px; }
.treasury-sheet .treasury-card { margin:0; }
.treasury-sheet .picker-close { position:absolute; top:6px; right:8px; z-index:2; }

/* Phase 5a: twin egg, challenge, bounty, arena, burn milestones, holder egg */
.twin-egg { position:relative; width:64px; height:64px; flex:none; }
.twin-egg .twin-egg-art { width:64px; height:64px; object-fit:contain; }
.twin-card:not(.open) .twin-egg-art { filter:grayscale(.55) brightness(.75); }
.twin-lock { position:absolute; right:-2px; bottom:-2px; font-size:22px; filter:drop-shadow(0 2px 4px #0009); }
.bounty-active { display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:12px; background:#ffda9122; margin:6px 0; }
.bounty-active span { display:grid; } .bounty-active small { color:var(--muted); }
.bounty-block .wallet-row { align-items:end; }
.arena-towers { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:6px; margin:8px 0; }
.arena-towers .btn { display:grid; align-content:center; gap:2px; min-height:56px; padding:8px 4px; min-width:0; font-size:14px; font-variant-numeric:var(--num); }
.arena-towers .btn small { font-size:11px; line-height:1.2; opacity:.85; white-space:normal; }
.holder-card .track-egg, .burn-card .quest-row b { flex:none; }
.holder-card .feature-card-heading .track-egg { width:48px; height:48px; object-fit:contain; }
.result-actions .btn.wide { flex-basis:100%; }
.result-rewards > div:only-child { grid-column:1 / -1; }

/* Phase 5b: guilds, the seasonal dragon, limited skins (stub art: CSS treatments of existing assets) */
.skin-ember { filter:hue-rotate(-28deg) saturate(1.8) drop-shadow(0 0 14px #ff8a3d) drop-shadow(0 0 4px #ffb36b); }
.skin-frost { filter:hue-rotate(165deg) saturate(1.9) brightness(1.1) drop-shadow(0 0 14px #8fe9ff) drop-shadow(0 0 4px #d5f8ff); }
.skin-void { filter:hue-rotate(250deg) saturate(1.7) brightness(.9) drop-shadow(0 0 14px #b37bff) drop-shadow(0 0 4px #e0c8ff); }
.skin-aura { filter:drop-shadow(0 0 12px var(--c-aqua)) brightness(1.05); }
.skin-gold { filter:sepia(.45) saturate(1.8) hue-rotate(-8deg) drop-shadow(0 0 10px var(--c-gold)); }
.skin-crystal { filter:hue-rotate(115deg) saturate(1.45) brightness(1.14) drop-shadow(0 0 11px #89e8dc) drop-shadow(0 0 4px #f0fff9); }
.egg-art.egg-seasonal { filter:hue-rotate(150deg) saturate(1.5) drop-shadow(0 0 10px var(--c-aqua)); }
.guild-crest { width:44px; height:44px; object-fit:contain; flex:none; }
.guild-crest.small { width:30px; height:30px; }
.guild-crest.large { width:72px; height:72px; }
.crest-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:10px 0; }
.crest-choice { display:grid; justify-items:center; gap:2px; padding:8px 4px; border:1px solid #3d6a80; border-radius:12px; background:var(--c-surface-1); color:var(--ice); cursor:pointer; }
.crest-choice small { font-size:11px; color:var(--muted); }
.crest-choice.chosen { border-color:var(--gold); box-shadow:var(--ring); }
.inline-form { display:flex; gap:8px; align-items:center; margin-top:10px; }
.inline-form input { flex:1 1 auto; min-width:0; }
.inline-form .btn { flex:none; }
.guild-head-row { display:flex; gap:14px; align-items:center; }
.guild-head-row h2 { margin:0; }
.guild-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.guild-settings { margin-top:12px; }
.guild-settings summary { cursor:pointer; color:var(--muted); }
.founder-pill { display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:#ffda9126; color:var(--gold); font-size:11px; vertical-align:middle; }
.guild-table { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.guild-table li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:var(--c-surface-1); }
.guild-table li.me { outline:1px solid var(--teal); }
.guild-table li > span:first-of-type, .guild-table li > img + span { flex:1 1 auto; min-width:0; display:grid; }
.guild-table li small { color:var(--muted); }
.guild-table li em { font-style:normal; font-weight:800; color:var(--gold); }
.guild-row-actions { display:flex; gap:4px; flex:none; }
.guild-row-actions .btn { min-height:44px; padding:4px 8px; font-size:12px; }
.drive-progress { margin:10px 0; }
.guild-feed ul { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.guild-feed li { display:grid; gap:2px; font-size:13px; }
.guild-feed li small { color:var(--muted); font-size:11px; }
.guild-war .war-score { display:flex; align-items:center; justify-content:center; gap:12px; font-size:30px; font-weight:900; margin:6px 0; }
.war-towers { list-style:none; padding:0; margin:10px 0 0; display:grid; gap:6px; }
.war-towers li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:var(--c-surface-1); }
.war-towers li span { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.war-towers li small { color:var(--muted); }
.feature-card.muted { opacity:.85; }
/* Clans (spec 2026-10-22): the clan week and the clan cup of the window. */
.guild-art-head { display:flex; align-items:center; gap:12px; }
.guild-art-head > div { min-width:0; }
.guild-art { width:72px; height:72px; object-fit:contain; flex:none; filter:drop-shadow(0 4px 10px #00000055); }
.guild-tiers { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.guild-tiers li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:var(--c-surface-1); }
.guild-tiers li b { min-width:52px; color:var(--muted); font-variant-numeric:tabular-nums; }
.guild-tiers li span { flex:1 1 auto; min-width:0; font-size:13px; }
.guild-tiers li i { font-style:normal; font-size:11px; font-weight:800; color:var(--teal); }
.guild-tiers li.done { outline:1px solid var(--teal); }
.guild-tiers li.done b { color:var(--gold); }
.seasonal-row { display:flex; gap:14px; align-items:center; }
.seasonal-art { width:86px; height:86px; object-fit:contain; flex:none; filter:drop-shadow(0 0 12px #87f5dd88); }

/* Seasonal dragons (seasonal.DESIGNS): the crystal role art tinted per dragon - stub art until the real one.
   app.js artForDragon adds #season-N to the URL; a worn skin (.skin-*) keeps its own filter. */
img[src$="#season-1"]:not([class*="skin-"]) { filter:hue-rotate(40deg) saturate(1.4) drop-shadow(0 0 10px #ffe58a88); }
img[src$="#season-2"]:not([class*="skin-"]) { filter:grayscale(.55) sepia(.35) brightness(.85) drop-shadow(0 0 10px #ff8a3d88); }
img[src$="#season-3"]:not([class*="skin-"]) { filter:hue-rotate(120deg) saturate(1.3) drop-shadow(0 0 10px #9df7ff88); }
img[src$="#season-4"]:not([class*="skin-"]) { filter:hue-rotate(-40deg) saturate(1.5) brightness(.95) drop-shadow(0 0 10px #ffb36b88); }
img[src$="#season-5"]:not([class*="skin-"]) { filter:hue-rotate(-110deg) saturate(1.6) brightness(.9) drop-shadow(0 0 10px #d24b6a88); }
img[src$="#season-6"]:not([class*="skin-"]) { filter:hue-rotate(200deg) saturate(1.2) drop-shadow(0 0 10px #c8a2ff88); }
.skill-art.skill-tint-drain { filter:hue-rotate(-110deg) saturate(1.6); }
.skill-art.skill-tint-mark { filter:hue-rotate(60deg) saturate(1.5); }
.skin-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px; }
.skin-offer { display:grid; justify-items:center; gap:4px; padding:10px 6px; border-radius:12px; background:var(--c-surface-1); text-align:center; }
.skin-offer small { color:var(--muted); font-size:11px; }
.skin-preview { width:64px; height:64px; object-fit:contain; }
.skin-chip { display:inline-block; margin:2px; padding:3px 10px; border-radius:999px; background:var(--c-surface-1); border:1px solid #3d6a80; font-size:12px; }
.seed-line code { word-break:break-all; font-size:11px; }
.skin-select-row { display:flex; gap:6px; align-items:center; font-size:12px; color:var(--muted); margin:4px 0; }
.skin-select-row select { min-height:44px; padding:4px 8px; font-size:12px; max-width:170px; }
@media (max-width:420px) { .crest-picker { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; } .skin-grid { gap:6px; } .guild-row-actions .btn { padding:3px 6px; } }
.guild-table li span .founder-pill { justify-self:start; margin-left:0; margin-top:2px; }

/* The visible tower shows only owned dragons; an empty place is an action. */
body.game-mode .tower-floor.locked,body.game-mode .tower-slot:disabled { opacity:1; }
body.game-mode .tower-slot.occupied img { opacity:1; filter:drop-shadow(0 6px 8px #123447); }
body.game-mode .tower-slot.empty::before { content:none; }
body.game-mode .tower-slot-empty { position:absolute; left:50%; bottom:10%; transform:translateX(-50%); display:grid; justify-items:center; gap:2px; width:min(82%,128px); padding:10px 4px 9px; border:2px solid #e3c787; border-radius:12px; color:#fff4d8; background:#12384e; box-shadow:0 5px 14px #072235; }
body.game-mode .tower-slot-empty b { display:grid; place-items:center; width:35px; height:35px; border:2px solid var(--c-gold); border-radius:50%; color:var(--c-gold); font:700 28px/1 system-ui,sans-serif; font-variant-numeric:var(--num); }
body.game-mode .tower-slot-empty small { font-size:11px; font-weight:850; white-space:nowrap; }
body.game-mode .tower-slot:disabled .tower-slot-empty,body.game-mode .tower-slot:disabled .tower-slot-empty b { border-color:#a5c0c5; color:#e3eff0; }
body.game-mode .tower-slot.empty.coach-target .tower-slot-empty { border-color:#fff2b8; box-shadow:0 0 0 3px var(--c-gold),0 0 24px #ffe0a0b0; }
body.game-mode .tower-spot-label { background:#102f43; }
body.game-mode .game-action-bar { grid-template-columns:minmax(0,1fr); background:var(--c-surface-2); backdrop-filter:none; }
body.game-mode .game-action-bar .action-grid { width:100%; min-width:0; gap:5px; }
body.game-mode .game-action-bar .action-grid:has(> :nth-child(5):last-child) { grid-template-columns:repeat(5,minmax(0,1fr)); }
body.game-mode .game-action-bar .action-grid:has(> :first-child:last-child) { grid-template-columns:1fr; }
body.game-mode .game-action-bar .action-button { min-height:56px; padding:5px 2px; }
body.game-mode .game-action-bar .action-button:disabled { opacity:1; color:#c8dbe0; border-color:#6c8b9d; background:#26485e; box-shadow:none; }
body.game-mode .game-action-bar .coach-target { box-shadow:0 0 0 2px var(--c-gold),0 0 20px #ffe0a07a; }
.tower-defense-status { margin:0; color:#e3f0eb; font-size:11px; line-height:1.35; }
.slot-current.empty { background:#103d58; border-color:#b8d6d8; }
.slot-current-plus { flex:none; display:grid; place-items:center; width:70px; height:70px; border:2px solid var(--c-gold); border-radius:14px; color:var(--c-gold); font:700 43px/1 system-ui,sans-serif; font-variant-numeric:var(--num); }
.picker-empty { padding:12px; border:1px solid var(--c-line); border-radius:11px; background:#154662; font-size:12px; }
.picker-close { flex:none; min-width:44px; min-height:44px; }

/* First actions appear in their real game locations. */
body.game-mode .tower-coach { position:absolute; z-index:10; top:calc(var(--safe-top) + 118px); left:12px; right:54px; pointer-events:none; }
.tower-coach .tutorial-card { padding:11px 13px; }
.tutorial-card { background:var(--c-surface-3); }
.tower-coach .tutorial-card h2 { margin:4px 0; font-size:17px; }
.tutorial-card p { margin:5px 0 8px; color:#e7f4ef; font-size:12px; line-height:1.4; }
.tutorial-card > .progress { margin:8px 0 0; }
.tutorial-hatchery .screen-heading { padding-top:22px; }
.first-egg-controls { display:grid; gap:12px; padding:15px; border:1px solid #cbdade; border-radius:16px; background:var(--c-surface-3); }
.first-egg-offer { display:flex; align-items:center; gap:10px; width:100%; min-height:110px; padding:9px; border:2px solid var(--c-gold); border-radius:13px; color:#fff1d2; background:#205771; text-align:left; }
.first-egg-offer .first-egg-art,.first-egg-ready .first-egg-art { flex:none; width:74px; height:78px; object-fit:contain; }
.first-egg-offer > span { flex:1; min-width:0; }
.first-egg-offer strong,.first-egg-ready strong { display:block; font:700 18px Georgia,serif; font-variant-numeric:var(--num); }
.first-egg-offer small,.first-egg-ready small { display:block; margin-top:5px; color:#d6edee; font-size:12px; line-height:1.3; }
.first-egg-offer b { display:flex; align-items:center; gap:2px; color:var(--c-gold); font-size:16px; }
.first-egg-ready { display:flex; align-items:center; gap:12px; }
.first-egg-ready b { color:var(--c-gold); font-variant-numeric:var(--num); }
.first-siege-guide { padding:12px 14px; border:1px solid #ffdf9f; border-radius:13px; background:var(--c-surface-3); }
.first-siege-guide p { margin:5px 0 0; color:#e8f4f1; font-size:12px; line-height:1.4; }
.empty-defense { grid-column:1/-1; margin:0; padding:14px; border:1px solid #9dbec6; border-radius:10px; color:#e5f2ef; background:var(--c-surface-3); font-size:12px; }
.first-siege-reward { margin:8px 18px; color:#e8f4f1; font-size:12px; line-height:1.4; }
@media (max-width:380px) { body.game-mode .tower-coach { top:calc(var(--safe-top) + 112px); right:48px; left:8px; } .tower-coach .tutorial-card h2 { font-size:16px; } .tower-coach .tutorial-card p { font-size:11px; } body.game-mode .tower-slot-empty { width:min(82%,104px); padding:7px 2px; } body.game-mode .tower-slot-empty small { font-size:11px; } body.game-mode .game-action-bar .action-button { font-size:11px; } }

/* Layers and safe areas (Task 6). */
/* On the tower screen #content is a fixed layer under the navigation; while a picker sheet is open it
   is lifted above it, so the sheet is never hidden behind the tabs (UX-006). */
body.game-mode #content:has(.siege-picker-backdrop, .sheet--open) { z-index:var(--z-sheet); }
/* Gate screens have no HUD above them. */
body.gate-mode .gate-screen { margin-top:calc(12vh + var(--safe-top)); }

/* Battle on short screens: the result button stays reachable, the arena gives up height first (UX-010). */
.battle-view-foot { position:sticky; bottom:0; z-index:5; padding-bottom:calc(14px + var(--safe-bottom)); }
@media (max-height:700px) {
 .battle-view-head { padding:14px 64px 10px 14px; }
 .battle-view-head h2 { margin:2px 0 8px; font-size:24px; }
 .combat-arena { min-height:250px; }
 .combat-log { min-height:0; max-height:96px; overflow:hidden; padding:8px 14px; }
 .result-screen { padding-top:52px; }
 .result-art .ui-icon,.result-art img { width:72px; height:72px; }
 .result-screen h2 { font-size:28px; }
}
@media (max-width:360px) {
 .tabs { gap:3px; padding-inline:5px; }
 .tabs button { padding-inline:0; letter-spacing:-.02em; }
 body.game-mode .game-action-bar .action-button { padding-inline:1px; letter-spacing:-.03em; }
 body.game-mode .treasury-chip small { display:none; }
 .combat-fighters img { width:62%; }
 .combat-fighters img+img { margin-left:-28%; }
 .combat-team-status { width:47%; padding:5px; }
}

/* app-infra: hooks for app.js infrastructure (battle arena states, reveal timing, icon rotations). */
.icon-up { transform:rotate(-90deg); }
.icon-down { transform:rotate(90deg); }
.icon-ext { transform:rotate(-45deg); }
.menu-icon { width:22px; height:22px; color:var(--c-aqua); }
.plan-mark { margin-left:4px; }
.plan-mark.win, .feed-mark { color:var(--c-success); }
.plan-mark.loss { color:var(--c-danger); }
.result-next .icon { margin-left:6px; }
.floor-route { scroll-margin-top:calc(var(--safe-top) + var(--hud-h) + 8px); }
.floor-forecast .forecast-skeleton { width:100%; margin:0 0 6px; }
.skeleton-group { display:block; }
.reveal-copy { animation:reveal-copy var(--dur-2) var(--ease-out) 1.15s both; }
@keyframes reveal-copy { from { opacity:0; transform:translateY(6px); } }
.combat-fighters img.is-out { opacity:.45; filter:grayscale(1) brightness(.6) drop-shadow(0 8px 6px #031626dc); animation:none; transition:opacity var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out); }
.combat-status-row.is-out b { color:var(--c-text-3); text-decoration:line-through; }
.combat-status-row.is-out > span { color:var(--c-danger); }
.log-side { display:inline-block; margin-right:4px; padding:0 5px; border-radius:var(--r-pill); font-size:10px; font-weight:850; letter-spacing:.02em; vertical-align:1px; }
.log-side.ours { color:#062b2a; background:var(--c-aqua); }
.log-side.theirs { color:#3b1a10; background:#f6b48c; }
.combat-caption .log-side { flex:none; }
@media (prefers-reduced-motion:reduce) { .reveal-copy { animation:none; } .combat-fighters img.is-out { transition:none; } }
/* app-infra: an empty slot is a state, not a button (UX-037). */
.slot-current.empty .slot-current-plus { border:2px dashed #b8d6d880; color:#b8d6d8aa; background:transparent; font-size:34px; }
/* app-infra: one main step after a battle, always reachable (UX-020, UX-010). */
.result-cta { align-self:stretch; position:sticky; bottom:0; z-index:3; margin-top:var(--sp-2); padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-bottom)); background:linear-gradient(#09263f00, #09263f 35%); }
.result-screen .result-cta .btn { width:100%; max-width:none; margin:0; }
/* shop-ui: starter offer, the web shop sheet, contextual top-ups, the pass value anchor (Task 8b). */
.resource-credits .badge-dot { top:-4px; right:-4px; }
.offer-card--starter { margin:0 0 var(--sp-4); }
.offer-card__head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--sp-2); }
.offer-card__head h2 { margin:3px 0 0; color:var(--c-heading); font:700 21px/1.1 var(--font-display); }
.offer-card__timer { min-height:24px; padding:2px 9px; border-radius:var(--r-pill); background:#0b2b45cc; }
.offer-card__timer .icon { width:15px; height:15px; }
.offer-card__timer b { min-width:7ch; font-weight:850; }
.offer-card__price { color:var(--c-gold); font-size:20px; font-weight:900; font-variant-numeric:var(--num); white-space:nowrap; }
.offer-card__note { margin:var(--sp-2) 0; color:var(--c-text-2); font-size:13px; line-height:1.4; }
.offer-card__anchor { display:flex; align-items:center; gap:7px; margin:0 0 var(--sp-2); color:#ffe9b8; font-size:13px; font-weight:750; }
.offer-card__anchor .icon { flex:none; width:18px; height:18px; color:var(--c-gold); }
.offer-card__list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; margin:0 0 var(--sp-3); padding:0; list-style:none; }
.offer-card__list li { display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; font-weight:750; line-height:1.25; }
.offer-card__list li > img, .offer-card__list li > .icon, .offer-card__list li > .ui-icon { flex:none; width:30px; height:30px; object-fit:contain; color:var(--c-gold); }
.offer-card__list li > .icon { width:22px; height:22px; margin:4px; }
.offer-card__list li > span { min-width:0; overflow-wrap:break-word; }
@media (max-width:359px) { .offer-card__list { grid-template-columns:1fr; gap:6px; } .offer-card__list li > img, .offer-card__list li > .ui-icon { width:26px; height:26px; } }
.offer-card__buy .btn { width:100%; margin:0; }
.offer-card__buy .mini { margin:0; color:var(--c-text-3); }
.star-mark { width:16px; height:16px; vertical-align:-2px; }
.shop-list { display:grid; gap:var(--sp-4); padding-top:var(--sp-3); }
.shop-title { margin:0 0 2px; color:var(--c-heading); font:700 19px/1.2 var(--font-display); }
.shop-credits { display:grid; gap:10px; }
.shop-credits > .mini { margin:0 0 4px; color:var(--c-text-2); line-height:1.4; }
.shop-pack { position:relative; display:flex; align-items:center; gap:10px; min-height:64px; padding:10px 12px; border:1px solid var(--c-line-2); border-radius:var(--r-md); background:#113a56; }
.shop-pack.is-popular, .shop-pack.is-best { border-color:#e7cf95; background:linear-gradient(150deg,#235572,#113a56); }
.shop-pack > .ui-icon { flex:none; width:34px; height:34px; }
.shop-pack > div { display:grid; flex:1; min-width:0; }
.shop-pack strong { color:#fff3d6; font-size:15px; font-variant-numeric:var(--num); }
.shop-pack .btn { flex:none; min-width:84px; margin:0; }
.shop-pack .offer-card__tag { top:-9px; }
.shop-bonus { color:var(--c-success); font-size:12px; font-weight:850; }
.shop-list .shop-note { margin:0; color:var(--c-text-3); font-size:12px; line-height:1.45; }
.shop-sheet .is-target { box-shadow:0 0 0 3px #efba6166, 0 10px 26px #00192b8c; }
.wallet-shop .shop-list { padding-top:var(--sp-2); }
.btn-cta-buy { max-width:100%; text-align:center; }
.btn-cta-buy > span { min-width:0; }
.hatchery > .btn-cta-buy, .btn-cta-buy.wide { grid-column:1/-1; width:100%; margin-top:var(--sp-2); }
.incubating .btn-cta-buy { flex:none; padding:6px 10px; font-size:13px; }
.roster-actions > .btn-cta-buy { flex:1; flex-wrap:wrap; gap:2px 4px; min-width:0; min-height:44px; padding:5px 6px; font-size:12px; line-height:1.15; }
.roster-actions > .btn-cta-buy .ui-icon { width:18px; height:18px; }
.pass-plaque { margin:0 0 var(--sp-3); padding:10px 12px; border:1px solid #e7cf9566; border-radius:var(--r-md); background:#0b2b4599; }
.pass-plaque p { margin:4px 0 0; color:#fff3d6; font-size:13px; font-weight:750; }
.pass-plaque .pass-plaque__anchor { display:flex; align-items:center; gap:7px; color:var(--c-gold); }
.pass-plaque__anchor .icon { flex:none; width:18px; height:18px; }
.pass-cta { display:grid; gap:6px; margin:0 0 var(--sp-3); }
.pass-cta .btn-cta-buy { width:100%; flex-wrap:wrap; }
.pass-cta__note { display:flex; align-items:flex-start; gap:6px; color:var(--c-text-2); font-size:12px; line-height:1.4; }
.pass-cta__note .icon { flex:none; width:15px; height:15px; margin-top:1px; }
.wallet-token { margin:0 0 var(--sp-4); }
.wallet-token > summary { display:flex; align-items:center; min-height:48px; padding:0 14px; border:1px solid var(--c-line-2); border-radius:var(--r-md); color:#ffe9b8; background:#113a56; font-weight:850; cursor:pointer; }
.wallet-token > summary { justify-content:space-between; gap:var(--sp-2); list-style:none; }
.wallet-token > summary::-webkit-details-marker { display:none; }
.wallet-token > summary .icon { flex:none; width:18px; height:18px; transition:transform var(--dur-1) var(--ease-out); }
.wallet-token[open] > summary .icon { transform:rotate(180deg); }
.wallet-token[open] > summary { margin-bottom:var(--sp-3); }
/* retention-ui */
/* Today card (F6): one compact card over the tower, one main action, the rest behind "More". Seen many
   times a day, so no entrance animation: only press feedback and the chevron turn. */
body.game-mode .home-overlay { position:absolute; z-index:8; top:calc(var(--safe-top) + var(--hud-h) + 6px); left:10px; right:10px; display:grid; justify-items:start; gap:6px; pointer-events:none; }
body.game-mode .home-overlay > * { pointer-events:auto; }
body.game-mode .home-overlay .treasury-chip { position:static; max-width:62%; }
.today-card { width:100%; max-width:440px; padding:8px 10px 10px; border:1px solid #b1e8ecb0; border-radius:var(--r-md); background:linear-gradient(150deg,#123f5ae8,#0a2a40f0); box-shadow:inset 0 1px #ffffff40,0 10px 24px #03182aa0; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.today-card__head { display:flex; align-items:center; gap:8px; min-height:28px; margin-bottom:6px; }
.today-card__head .overline { display:inline-flex; align-items:center; gap:6px; color:#a5eff0; }
.today-card__head .overline .icon { width:14px; height:14px; }
.today-card__count { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pill); color:#3a1d10; background:#ff8a6b; font-size:var(--fs-xs); font-weight:900; letter-spacing:0; font-variant-numeric:var(--num); }
.today-card__dots { display:inline-flex; gap:4px; }
.today-card__dots i { width:8px; height:8px; border:1px solid #a5eff0aa; border-radius:50%; }
.today-card__dots i.on { border-color:var(--c-aqua); background:var(--c-aqua); }
.today-card__more { position:relative; display:inline-flex; align-items:center; gap:4px; min-height:28px; margin-left:auto; padding:0 4px 0 8px; border:0; border-radius:var(--r-pill); color:#cdeff3; background:transparent; font-size:var(--fs-sm); font-weight:800; transition:transform var(--dur-1) var(--ease-out); }
.today-card__more::after { content:""; position:absolute; inset:-8px -6px; }
.today-card__more .icon { width:16px; height:16px; transition:transform var(--dur-2) var(--ease-out); }
.today-card.is-open .today-card__more .icon { transform:rotate(180deg); }
.today-card__main { justify-content:flex-start; gap:8px; width:100%; max-width:none; min-height:44px; margin:0; padding:0 12px; text-align:left; }
.today-card__main > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.today-card__main .ui-icon, .today-card__main .icon { flex:none; width:22px; height:22px; }
.today-card__list { display:grid; max-height:min(46vh,320px); margin-top:6px; overflow-y:auto; overscroll-behavior:contain; }
.today-card__item { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:6px 2px; border:0; border-top:1px solid #a8d8e226; border-radius:0; color:var(--c-text); background:transparent; text-align:left; font-size:var(--fs-md); transition:transform var(--dur-1) var(--ease-out); }
.today-card__item:active, .today-card__main:active, .today-card__more:active { transform:scale(.97); }
.today-card__icon { flex:none; width:24px; height:24px; color:#a5eff0; }
.today-card__text { display:grid; flex:1; gap:1px; min-width:0; }
.today-card__text strong { overflow:hidden; font-size:var(--fs-md); font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.today-card__text small { overflow:hidden; color:#b8d4da; font-size:var(--fs-xs); text-overflow:ellipsis; white-space:nowrap; }
.today-card__text small b { color:#e9f8fb; font-variant-numeric:var(--num); }
.today-card__cta { flex:none; padding:5px 10px; border-radius:var(--r-pill); color:#2b1a05; background:var(--c-gold); font-size:var(--fs-sm); font-weight:900; }
.today-card__go { flex:none; width:16px; height:16px; color:#a5eff0; }
/* Screens opened from the menu: a way back (UX-029). */
.screen-back { margin:0 0 4px; }
.screen-back .btn { gap:6px; min-height:44px; padding:0 12px 0 8px; }
.screen-back__icon { transform:scaleX(-1); }
/* FE-59: before the first dragon the empty places are muted, not buttons. */
body.game-mode .tower-slot.dormant .tower-slot-empty { border-style:dashed; border-color:#a5c0c580; background:#12384e99; box-shadow:none; opacity:.55; }
body.game-mode .tower-slot.dormant .tower-slot-empty b { border-color:#a5c0c5; color:#cfe0e3; }
/* Long rules stay one tap away (UX-012). */
.card-rules { margin:8px 0; color:#c4dce2; font-size:var(--fs-sm); }
.card-rules summary { display:flex; align-items:center; min-height:44px; color:#a5eff0; font-weight:800; list-style:none; cursor:pointer; }
.card-rules summary::-webkit-details-marker { display:none; }
.card-rules summary::after { content:"▾"; margin-left:6px; transition:transform var(--dur-1) var(--ease-out); }
.card-rules[open] summary::after { transform:rotate(180deg); }
.card-rules p { margin:0 0 4px; line-height:1.45; }
.mission-progress-label span { display:inline-flex; align-items:center; gap:6px; }
.mission-progress-label .ui-icon { width:20px; height:20px; }
/* Battle result: the Twin egg at the first win (F12) and the loss coach (F11). */
.twin-result { display:grid; grid-template-columns:64px 1fr; align-items:center; align-self:stretch; gap:10px 12px; margin:10px 0; padding:12px; border:1px solid #e3c787; border-radius:var(--r-md); background:linear-gradient(150deg,#2b4d63,#11314a); text-align:left; }
.twin-result__egg { width:64px; height:64px; }
.twin-result > div { display:grid; gap:3px; }
.twin-result strong { color:#fff4d8; font-size:var(--fs-lg); }
.twin-result small { color:#c8dde2; font-size:var(--fs-sm); line-height:1.35; }
.twin-result .btn { grid-column:1 / -1; width:100%; margin:0; }
.twin-result .btn .icon { width:18px; height:18px; }
.result-screen .coach-card { display:grid; align-self:stretch; gap:6px; margin:10px 0; text-align:left; }
.coach-card p { margin:0; }
.coach-card .btn { width:100%; margin:4px 0 0; }
.invite-gift { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #e3c787; border-radius:var(--r-md); color:#fff4d8; background:#12384e; font-size:var(--fs-md); line-height:1.4; text-align:left; }
.invite-gift__egg { flex:none; width:48px; height:48px; }
.defense-row.practice small { color:#b8d4da; }
@media (prefers-reduced-motion:reduce) {
  .today-card__more, .today-card__more .icon, .today-card__item, .card-rules summary::after { transition:none; }
  .today-card__item:active, .today-card__main:active, .today-card__more:active { transform:none; }
}
.today-card__main .today-card__icon { color:currentColor; }
.defense-log .empty-state { padding:8px 0 4px; }
.defense-log .empty-state__art { width:112px; height:84px; }
.defense-log .empty-state__title { font-size:var(--fs-lg); }
/* --- Fixes pass after the final QA (QA-01…QA-20, CR-12…CR-18) and the conversion follow-ups --- */
/* QA-01: the overlay column never grows past the screen, so the Today card stays inside 320 px. */
body.game-mode .home-overlay { grid-template-columns:minmax(0,1fr); }
.today-card { min-width:0; max-width:min(100%,440px); }
.today-card__main, .today-card__head { min-width:0; }
.today-card__head .overline { flex:none; }
/* QA-20: room on top of the tower for the Today card and the treasury (set by fitTowerOverlay). */
body.game-mode .tower-stack { padding-top:calc(58px + var(--overlay-room,0px)); }
/* The Today card and treasury cover only their own bounds; tower art stays visible while scrolling. */
/* The whole tower fits under the overlay (fitTowerOverlay): it stands still, the rail picks the floor. */
body.game-mode .tower-scroll.tower-fit { overflow-y:hidden; }
/* The side buttons start below the Today card and the treasury (--overlay-bottom); the open Today list covers them. */
body.game-mode .home-overlay:has(.today-card.is-open) { z-index:9; }
/* Playtest: on a phone the open Today list (and the path card under it) covered the side buttons and the
   floor rail, half-visible, and swallowed their taps. While the list is open they step aside; "Свернуть"
   brings them back where they were. */
body.game-mode #content:has(.today-card.is-open) .tower-shortcuts,
body.game-mode #content:has(.today-card.is-open) .tower-rail { visibility:hidden; pointer-events:none; }
/* QA-05: no break inside a word; a long line takes the whole row instead. */
.offer-card__list li > span { overflow-wrap:normal; word-break:normal; hyphens:manual; }
.offer-card__list li.is-wide { grid-column:1 / -1; }
/* QA-12: skill names in the pair cards wrap instead of "Щ…". */
.lineup-choice em { white-space:normal; overflow:visible; line-height:1.15; }
.lineup-choice strong { overflow-wrap:anywhere; white-space:normal; line-height:1.15; }
/* QA-13: the report field spans the screen; one focus ring instead of a double border. */
.report-screen .field { justify-self:stretch; width:100%; text-align:left; }
.report-screen textarea:focus, .report-screen textarea:focus-visible { outline:none; border-color:var(--c-focus,#8be9ff); box-shadow:0 0 0 3px #8be9ff38; }
/* QA-15: touch targets of at least 44 px and text of at least 11 px outside overlines. */
body.game-mode .tower-rail { width:44px; }
body.game-mode .tower-rail button { width:44px; height:44px; }
body.game-mode .tower-spot-label { min-height:26px; }
body.game-mode .tower-spot-label::after { content:""; position:absolute; inset:-10px -4px; }
.toast__close { width:44px; height:44px; margin:-6px -8px -6px 0; }
.toast__close::after { inset:0; }
#action-training { min-height:48px; }
.treasury-chip { min-height:44px; }
.btn-cta-buy small { font-size:max(11px,.85em); }
.rarity-pill { font-size:11px; }
.log-side { font-size:11px; }
.roster-details .overline { font-size:11px; }
/* CR-14: a shortage without a shop is a plain line. */
.short-note { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 4px; color:#c8dde2; font-size:var(--fs-sm); font-weight:750; font-variant-numeric:var(--num); }
.short-note .ui-icon { width:18px; height:18px; }
.hatchery > .short-note, .short-note.wide { grid-column:1/-1; }
/* "Top up": the pack that covers the shortage. */
.shop-pack.is-fit { border-color:var(--c-aqua,#7ee6d9); box-shadow:0 0 0 2px #7ee6d955; }
.shop-pack__fit { display:inline-flex; align-items:center; gap:4px; margin-top:2px; color:#a5eff0; font-size:var(--fs-xs); font-weight:800; }
.shop-pack__fit .icon { width:14px; height:14px; }
/* QA-04: the starter pack on the first won normal siege, next to the Twin egg. */
.starter-result { display:grid; grid-template-columns:64px 1fr; align-items:center; align-self:stretch; gap:10px 12px; margin:10px 0; padding:12px; border:1px solid #ffe0a0; border-radius:var(--r-md); background:linear-gradient(150deg,#4a3d23,#14334a 70%); text-align:left; }
.starter-result__egg { width:64px; height:64px; }
.starter-result > div { display:grid; gap:3px; min-width:0; }
.starter-result strong { color:#fff4d8; font-size:var(--fs-md); line-height:1.3; }
.starter-result small { color:#e8d6ac; font-size:var(--fs-sm); font-variant-numeric:var(--num); }
.starter-result .btn-cta-buy { grid-column:1 / -1; width:100%; }
.starter-result .star-mark { width:16px; height:16px; vertical-align:-3px; }
/* "Until tomorrow": the end of the first session. */
.tomorrow__lead { margin:0 0 var(--sp-3); color:#e3f5ff; font-size:var(--fs-md); line-height:1.45; }
.tomorrow__list { display:grid; gap:8px; margin:0 0 var(--sp-4); padding:0; list-style:none; }
.tomorrow__list li { display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 12px; border:2px solid #92e3ff; border-radius:16px; color:#fff; background:linear-gradient(145deg,#2e83c3,#0e4e96 66%,#0a3675); box-shadow:inset 0 2px #fff8,0 4px 0 #0a4c94,0 8px 14px #032f6566; }
.tomorrow__list li > span { display:grid; gap:2px; min-width:0; }
.tomorrow__list strong { color:#fff3d6; font-size:var(--fs-md); }
.tomorrow__list small { color:#d9f4ff; font-size:var(--fs-sm); font-variant-numeric:var(--num); }
.tomorrow__list small b { color:#fff3d6; }
.tomorrow__egg { flex:none; width:44px; height:44px; object-fit:contain; }
.tomorrow__icon { flex:none; width:28px; height:28px; margin:0 8px; color:var(--c-gold); }
.tomorrow__actions { display:grid; gap:8px; }
.tomorrow__actions .btn { width:100%; margin:0; }
.tomorrow__actions .btn .icon { width:18px; height:18px; }
/* QA-11: the dragon the coach named. */
.roster-card.is-coached { animation:coached 2.4s var(--ease-out) both; }
@keyframes coached { 0%,60% { box-shadow:0 0 0 3px var(--c-gold,#efba61), 0 0 24px #efba6188; } 100% { box-shadow:0 0 0 0 transparent; } }
/* The Sieges card details: a plain-words summary keeps the rules out of the way. */
.bounty-block { margin-top:var(--sp-3); }
.bounty-block[open] .bounty-active, .bounty-block[open] .wallet-row { margin-top:6px; }
/* QA-17: the boot screen paints the valley at once (the preloaded image is used immediately). */
.boot-screen { background:radial-gradient(circle at 50% 38%,#17496bd6,#0a1724f0 70%),url(/assets/cartoon-arena-empty.webp) center / cover no-repeat #0a1724; }
@media (prefers-reduced-motion:reduce) { .roster-card.is-coached { animation:none; box-shadow:0 0 0 3px var(--c-gold,#efba61); } }
.track-head span { font-size:11px; }
/* CR-08: profile frames on the Season screen. */
.frame-list { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.profile-frame { display:grid; justify-items:center; gap:6px; width:104px; margin:0; text-align:center; }
.profile-frame__ring { display:grid; place-items:center; width:84px; height:84px; padding:4px; border-radius:50%; background:conic-gradient(from 210deg,#7ee6d9,#2f7f98,#7ee6d9); box-shadow:0 6px 16px #02182880; }
.profile-frame__ring img, .profile-frame__ring .icon { width:100%; height:100%; border-radius:50%; object-fit:cover; background:#0f3550; }
.profile-frame.frame-pioneer .profile-frame__ring { background:conic-gradient(from 200deg,#fff2c3,#efba61,#9a6328,#ffe3a3,#efba61); box-shadow:0 0 0 2px #ffe9b855,0 6px 18px #efba6155; }
.profile-frame.frame-early .profile-frame__ring { background:conic-gradient(from 160deg,var(--c-dawn-1),var(--c-dawn-2),var(--c-dawn-3),#fff6dc,var(--c-dawn-1)); box-shadow:0 0 0 2px #ffd27a55,0 6px 18px #ff8a6b55; }
.profile-frame.frame-cup .profile-frame__ring { background:conic-gradient(from 190deg,#fff6c9,#ffc53d,#c46a12,#ffe58a,#ffc53d); box-shadow:0 0 0 2px #ffe58a55,0 6px 18px #ffc53d66; }
/* F17: the Early bird offer line on the pass card and the Season plaque. */
.early-line { color:var(--c-dawn-3); font-variant-numeric:var(--num); }
.early-line .icon { color:var(--c-dawn-2); }
.profile-frame figcaption { display:grid; gap:2px; }
.profile-frame strong { color:#fff3d6; font-size:var(--fs-sm); line-height:1.25; }
.profile-frame small { color:#a5eff0; font-size:var(--fs-xs); }
/* daily-ui: the Rewards screen (Day N of 14, one daily list, goals) and the Season link to it. */
.day-card { padding:var(--sp-4); border:1px solid var(--c-gold-2); border-radius:var(--r-lg); background:linear-gradient(155deg,var(--c-surface-4),var(--c-surface-2) 62%,var(--c-surface-1)); box-shadow:inset 0 1px #fff4d455,0 12px 26px #00182b80; }
.day-card__head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-3); }
.day-card__head h2 { margin:var(--sp-1) 0 0; color:var(--c-heading); font:700 var(--fs-2xl)/1.1 var(--font-display); font-variant-numeric:var(--num); }
.day-card__chest { display:inline-flex; flex:none; align-items:center; gap:var(--sp-1); color:var(--c-gold); font-size:var(--fs-xs); font-weight:800; font-variant-numeric:var(--num); }
.day-card__chest .icon { width:16px; height:16px; }
.day-strip { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin:var(--sp-3) 0 0; padding:0; list-style:none; }
.day-cell { display:grid; place-items:center; align-content:center; gap:2px; min-width:0; min-height:44px; border:1px solid var(--c-line-2); border-radius:var(--r-sm); color:var(--c-text-3); background:var(--c-surface-1); font-variant-numeric:var(--num); }
.day-cell__n { font-size:var(--fs-xs); font-weight:700; line-height:1; }
.day-cell__mark { display:grid; place-items:center; min-height:16px; font-size:var(--fs-sm); font-weight:900; line-height:1; }
.day-cell__mark .icon { width:16px; height:16px; }
.day-cell.is-chest { border-color:var(--c-gold-2); color:var(--c-gold); background:linear-gradient(180deg,var(--c-gold-ink),var(--c-surface-1)); }
.day-cell.is-claimed { border-color:transparent; color:var(--c-aqua); background:var(--c-surface-3); }
.day-cell.is-claimed .day-cell__n { color:var(--c-text-3); }
.day-cell.is-chest.is-claimed { color:var(--c-gold); background:linear-gradient(180deg,var(--c-gold-ink),var(--c-surface-3)); }
.day-cell.is-today { border-color:var(--c-gold); color:var(--c-heading); background:var(--c-surface-4); box-shadow:0 0 0 2px var(--c-gold),0 0 14px #ffe0a055; }
.day-cell.is-today .day-cell__n { color:var(--c-heading); }
.day-cell.is-today.is-claimed .day-cell__mark { color:var(--c-aqua); }
.day-cell.is-next { border-style:dashed; border-color:var(--c-line); color:var(--c-text-2); }
.day-cell.is-new { animation:day-open var(--dur-3) var(--ease-out) both; }
.day-cell.is-new .day-cell__mark { animation:day-check var(--dur-3) var(--ease-spring) 80ms both; }
@keyframes day-open { 0% { transform:scale(.9); background:var(--c-gold-2); } 60% { transform:scale(1.06); } 100% { transform:scale(1); } }
@keyframes day-check { 0% { transform:scale(.6); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.day-card__act { margin-top:var(--sp-4); }
.day-card__claim { width:100%; max-width:none; min-height:48px; margin:0; gap:var(--sp-2); }
.day-card__claim .icon, .day-card__claim .ui-icon { flex:none; width:20px; height:20px; }
.day-card__note { display:block; margin-top:var(--sp-2); color:var(--c-text-2); font-size:var(--fs-xs); line-height:1.4; text-align:center; }
.day-card__done { display:flex; align-items:center; gap:var(--sp-3); margin:0; padding:var(--sp-3); border-radius:var(--r-md); background:var(--c-surface-1); }
.day-card__done > .icon { flex:none; width:24px; height:24px; color:var(--c-aqua); }
.day-card__done > span { display:grid; gap:2px; min-width:0; }
.day-card__done strong { color:var(--c-heading); font-size:var(--fs-md); }
.day-card__done small { color:var(--c-text-2); font-size:var(--fs-xs); line-height:1.4; font-variant-numeric:var(--num); }
.day-card__done small b { color:var(--c-text); }
.day-ad { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--c-line-2); }
.day-ad__text { display:grid; gap:2px; min-width:0; }
.day-ad__text strong { color:var(--c-text); font-size:var(--fs-sm); }
.day-ad__text small, .day-ad__wait { color:var(--c-text-3); font-size:var(--fs-xs); font-variant-numeric:var(--num); }
.day-ad .btn { flex:none; min-height:44px; margin:0; }
.task-group__head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--sp-1) var(--sp-3); }
.task-group__head small { color:var(--c-text-3); font-size:var(--fs-xs); font-weight:700; font-variant-numeric:var(--num); }
.task-group__head small b { color:var(--c-text); }
.goals-group h3 { margin:var(--sp-2) 0 0; color:var(--c-text-3); font-size:var(--fs-xs); font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.task-card.is-ready { border-color:var(--c-gold-2); box-shadow:inset 0 1px #fff4d455,0 0 0 1px var(--c-gold-2); }
.task-card.is-claimed { border-color:var(--c-line-2); background:var(--c-surface-1); }
.task-done { display:inline-flex; align-items:center; gap:var(--sp-1); }
.task-done .icon { width:14px; height:14px; color:var(--c-aqua); }
.daily-group .quest-list { margin:0; }
.quest-row__reward { display:block; margin-top:var(--sp-1); color:var(--c-gold); font-size:var(--fs-xs); font-weight:700; font-variant-numeric:var(--num); }
.quest-chest { display:flex; align-items:center; gap:var(--sp-2); min-height:44px; padding:var(--sp-2) var(--sp-3); border:1px dashed var(--c-gold-2); border-radius:var(--r-md); color:var(--c-gold); font-size:var(--fs-sm); font-weight:700; }
.quest-chest .icon { flex:none; width:18px; height:18px; }
.quest-chest b { margin-left:auto; font-variant-numeric:var(--num); }
.quest-chest.is-open { border-style:solid; border-color:var(--c-aqua); color:var(--c-aqua); }
.daily-unlock { display:flex; align-items:flex-start; gap:var(--sp-2); margin:0; padding:var(--sp-3); border-radius:var(--r-md); color:var(--c-text-2); background:var(--c-surface-1); font-size:var(--fs-sm); line-height:1.45; }
.daily-unlock .icon { flex:none; width:18px; height:18px; color:var(--c-text-3); }
.daily-link { display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:56px; margin:0 0 var(--sp-4); padding:var(--sp-3) var(--sp-4); border:1px solid var(--c-line-2); border-radius:var(--r-lg); color:var(--c-text); background:linear-gradient(150deg,var(--c-surface-4),var(--c-surface-2)); text-align:left; transition:transform var(--dur-1) var(--ease-out); }
.daily-link:active { transform:scale(.97); }
.daily-link__icon { flex:none; width:28px; height:28px; color:var(--c-gold); }
.daily-link__text { display:grid; flex:1; gap:2px; min-width:0; }
.daily-link__text strong { color:var(--c-heading); font-size:var(--fs-md); line-height:1.25; }
.daily-link__text small { overflow:hidden; color:var(--c-text-2); font-size:var(--fs-xs); font-variant-numeric:var(--num); text-overflow:ellipsis; white-space:nowrap; }
.daily-link .badge-dot { position:static; flex:none; }
.daily-link__go { display:inline-flex; flex:none; align-items:center; gap:var(--sp-1); color:var(--c-aqua); font-size:var(--fs-sm); font-weight:800; }
.daily-link__go .icon { width:16px; height:16px; }
@media (hover:hover) { .daily-link:hover { border-color:var(--c-line); } }
@media (max-width:359px) { .day-card { padding:var(--sp-3); } .day-strip { gap:var(--sp-1); } .daily-link__go > :not(.icon) { display:none; } .daily-link { padding:var(--sp-3); } }
@media (prefers-reduced-motion:reduce) { .day-cell.is-new, .day-cell.is-new .day-cell__mark { animation:none; } .daily-link { transition:none; } .daily-link:active { transform:none; } }

/* guild-catalog: F14 - open guilds without a code, the leader's open flag, the recommended guild on Sieges */
.guild-cat-list { display:grid; gap:var(--sp-2); margin:var(--sp-3) 0 0; padding:0; list-style:none; }
.guild-cat-row { display:flex; align-items:center; gap:var(--sp-3); min-width:0; padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); border:1px solid var(--c-line-2); border-radius:var(--r-md); background:var(--c-surface-1); }
.guild-cat-info { display:grid; flex:1 1 auto; gap:2px; min-width:0; }
.guild-cat-info strong { color:var(--c-heading); font-size:var(--fs-md); line-height:1.25; overflow-wrap:anywhere; }
.guild-cat-info strong .founder-pill { margin-left:var(--sp-1); }
.guild-cat-info small { color:var(--c-text-3); font-size:var(--fs-xs); font-variant-numeric:var(--num); }
.guild-cat-live { color:var(--c-aqua); font-style:normal; font-weight:700; }
.guild-cat-row .btn { flex:none; min-height:44px; margin:0; padding:var(--sp-2) var(--sp-3); }
.guild-cat-more { margin-top:var(--sp-3); }
.guild-catalog .empty-state { padding:var(--sp-4) 0 var(--sp-2); }
.guild-open-row { display:flex; align-items:center; gap:var(--sp-3); margin:var(--sp-3) 0; padding:var(--sp-3); border-radius:var(--r-md); background:var(--c-surface-1); }
.guild-open-row > span { display:grid; flex:1 1 auto; gap:2px; min-width:0; }
.guild-open-row strong { color:var(--c-heading); font-size:var(--fs-sm); }
.guild-open-row small { color:var(--c-text-3); font-size:var(--fs-xs); line-height:1.4; }
.guild-open-row .btn { flex:none; min-height:44px; margin:0; }
.guild-rec { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin:0 0 var(--sp-4); padding:var(--sp-3); border:1px solid var(--c-line-2); border-radius:var(--r-lg); background:linear-gradient(150deg,var(--c-surface-4),var(--c-surface-2)); }
.guild-rec__text { display:grid; flex:1 1 180px; gap:2px; min-width:0; }
.guild-rec__text strong { color:var(--c-heading); font-size:var(--fs-sm); line-height:1.3; overflow-wrap:anywhere; }
.guild-rec__text small { color:var(--c-text-3); font-size:var(--fs-xs); font-variant-numeric:var(--num); }
.guild-rec__actions { display:flex; flex:1 0 auto; justify-content:flex-end; gap:var(--sp-2); }
.guild-rec__actions .btn { min-height:44px; margin:0; padding:var(--sp-2) var(--sp-3); }
@media (max-width:359px) { .guild-cat-row { gap:var(--sp-2); padding-left:var(--sp-2); } .guild-cat-row .guild-crest.small { width:26px; height:26px; } .guild-rec__actions { flex-basis:100%; } .guild-rec__actions .btn { flex:1; } }

/* mid-season: F15 - the plan of a late account for this season, the catch-up bonus badge (x1.5 growth) */
.plan-card { margin:0 0 var(--sp-4); padding:var(--sp-4); border:1px solid var(--c-line-2); border-radius:var(--r-lg); background:linear-gradient(150deg,var(--c-surface-4),var(--c-surface-2)); }
.plan-card__head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.plan-card__head .overline { display:inline-flex; align-items:center; gap:var(--sp-1); color:var(--c-gold); }
.plan-card__head .overline .icon { width:14px; height:14px; }
.plan-card h2 { margin:var(--sp-2) 0 var(--sp-1); color:var(--c-heading); font-size:var(--fs-lg); line-height:1.25; text-wrap:balance; }
.plan-card > p { margin:0 0 var(--sp-3); color:var(--c-text-2); font-size:var(--fs-sm); line-height:1.45; }
.plan-list { display:grid; gap:var(--sp-2); margin:0 0 var(--sp-3); padding:0; list-style:none; }
.plan-row { display:grid; gap:6px; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--c-surface-1); }
.plan-row__text { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-2); }
.plan-row__text > span { display:grid; gap:2px; min-width:0; color:var(--c-text); font-size:var(--fs-sm); font-weight:700; line-height:1.3; }
.plan-row__text small { color:var(--c-text-3); font-size:var(--fs-xs); font-weight:400; font-variant-numeric:var(--num); }
.plan-row__text b { flex:none; color:var(--c-gold); font-size:var(--fs-sm); font-variant-numeric:var(--num); }
.plan-row__text b .icon { width:16px; height:16px; color:var(--c-success); }
.plan-row__bar { height:4px; overflow:hidden; border-radius:var(--r-pill); background:var(--c-surface-3); }
.plan-row__bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--c-aqua),var(--c-gold)); transition:width var(--dur-2) var(--ease-out); }
.plan-row.is-done .plan-row__bar i { background:var(--c-success); }
.plan-card__ok { min-height:44px; margin:0; }
.boost-badge { display:inline-flex; align-items:center; gap:var(--sp-1); min-height:24px; padding:2px var(--sp-2) 2px 4px; border:1px solid #91f3ea8c; border-radius:var(--r-pill); color:var(--c-biomass); background:#91f3ea1f; font-size:var(--fs-xs); font-weight:800; font-variant-numeric:var(--num); white-space:nowrap; }
.boost-badge .ui-icon { width:18px; height:18px; }
.result-boost { display:flex; justify-content:center; margin:var(--sp-2) 0 0; }
@media (max-width:359px) { .plan-card { padding:var(--sp-3); } .plan-row { padding:var(--sp-2); } }
@media (prefers-reduced-motion:reduce) { .plan-row__bar i { transition:none; } }

/* mastery: F16 - dragon mastery (mastery.py). One star on a token (bronze/silver/gold), three stars and
   the meter on the collection card, "Name: mastery 14/15" in the battle result, titles on the profile.
   The gold skin is a contour around the silhouette, not a recolour of the art. Cosmetics only. */
:root { --mastery-bronze:#d99a5e; --mastery-silver:#dfe8f0; --mastery-gold:var(--c-gold-2); --mastery-glow:#ffd98a; }
.mastery-bronze { color:var(--mastery-bronze); }
.mastery-silver { color:var(--mastery-silver); }
.mastery-gold { color:var(--mastery-gold); }
.mastery-mark { position:absolute; z-index:4; top:4px; left:4px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#061d33d9; box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 55%,transparent),0 1px 3px #000a; pointer-events:none; }
.mastery-mark svg { width:13px; height:13px; fill:currentColor; }
.mastery-mark.is-card { top:6px; left:6px; width:26px; height:26px; }
.mastery-mark.is-card svg { width:17px; height:17px; }
.mastery-mark.is-inline { position:static; display:inline-grid; width:16px; height:16px; margin-left:4px; vertical-align:-3px; background:none; box-shadow:none; }
.mastery-mark.is-inline svg { width:13px; height:13px; filter:drop-shadow(0 1px 1px #000c); }
.tower-slot .mastery-mark { top:10%; right:14%; left:auto; }
.lineup-choice,.siege-picker-options button { position:relative; }
.lineup-choice .mastery-mark { top:3px; left:3px; width:18px; height:18px; }
.lineup-choice .mastery-mark svg { width:12px; height:12px; }
.mastery-stars { display:inline-flex; flex:none; gap:1px; }
.mastery-stars i { display:grid; width:15px; height:15px; }
.mastery-stars svg { width:100%; height:100%; fill:currentColor; }
.mastery-stars i.is-empty svg { fill:none; stroke:var(--c-text-3); stroke-width:1.6; opacity:.55; }
.mastery-row { display:grid; gap:4px; margin:6px 0 4px; }
.mastery-row__head { display:flex; align-items:center; gap:6px; color:var(--c-heading); font-size:var(--fs-sm); }
.mastery-row__head .num,.result-mastery .num { font-variant-numeric:var(--num); }
.mastery-meter { height:6px; overflow:hidden; border-radius:var(--r-pill); background:#ffffff17; }
.mastery-meter span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--mastery-bronze),var(--mastery-gold)); }
.mastery-row.is-max .mastery-meter span { background:linear-gradient(90deg,var(--mastery-gold),var(--mastery-glow)); }
.mastery-row small { color:var(--c-text-3); font-size:var(--fs-xs); line-height:1.35; }
.result-mastery { display:grid; align-self:stretch; gap:var(--sp-1); width:100%; margin:var(--sp-2) 0; }
.result-mastery p { display:flex; align-items:center; gap:var(--sp-2); margin:0; padding:6px 10px; border:1px solid transparent; border-radius:var(--r-md); background:var(--c-surface-1); font-size:var(--fs-md); text-align:left; }
.result-mastery p small { color:var(--c-aqua); font-size:var(--fs-xs); font-weight:800; }
.result-mastery p.is-up { border-color:color-mix(in srgb,var(--mastery-gold) 70%,transparent); background:linear-gradient(100deg,#4a3a1a66,var(--c-surface-1) 70%); }
.result-mastery p.is-up .mastery-stars { animation:mastery-pop 320ms var(--ease-out) 120ms both; }
@keyframes mastery-pop { from { opacity:.3; transform:scale(.88); } 60% { opacity:1; transform:scale(1.12); } to { opacity:1; transform:scale(1); } }
.mastery-titles p { display:flex; flex-wrap:wrap; gap:var(--sp-1); margin:var(--sp-2) 0 0; }
.mastery-title { display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border:1px solid color-mix(in srgb,var(--mastery-silver) 45%,transparent); border-radius:var(--r-pill); color:var(--c-heading); background:var(--c-surface-1); font-size:var(--fs-sm); }
.mastery-title .mastery-mark { position:static; }
/* The gold mastery outline itself lives in skins.css (.skin-mastery, .has-mastery). */
.skin-chip.skin-mastery { filter:none; border-color:color-mix(in srgb,var(--mastery-gold) 70%,transparent); color:var(--c-gold); }
@media (prefers-reduced-motion:reduce) { .result-mastery p.is-up .mastery-stars { animation:none; } }

/* mid-season fallback: the old note for accounts that are not late (no F15 plan) */
.season-late-note { display:flex; align-items:flex-start; gap:10px; margin:12px 0; padding:10px 12px; border:1px solid #e3c78799; border-radius:var(--r-md); color:#fdf0d2; background:#2c3a3fcc; font-size:var(--fs-sm); line-height:1.4; }
.season-late-note .icon { width:20px; height:20px; margin-top:1px; color:var(--c-gold); }
.season-late-note p { margin:0; }