@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&display=swap');
:root{--game-safe-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark;--bg:#080e17;--panel:#101b29;--cyan:#75e6f0;--amber:#efb972;--red:#e89590;--ink:#e7f0f4;--muted:#93a8b9;--line:#273a4b;--alloy:#e4b077;--ammo:#ec918c;--energy:#75e6f0;font-family:Barlow,system-ui,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}button{touch-action:manipulation}#game{max-width:2000px;margin:auto;min-height:100svh;background:#070d15}.topbar{height:76px;padding:0 3%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #213341;background:#09111bee;position:relative;z-index:3}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font:500 21px 'Barlow Condensed',sans-serif;letter-spacing:3px}.brand b{font-weight:700}.brand small{display:block;font:500 10px Barlow,sans-serif;letter-spacing:3.3px;color:var(--muted);margin-top:5px}.brand-mark{font-size:41px;color:var(--cyan);line-height:1}.sector{font-size:11px;letter-spacing:2.5px;color:#9aaebd}.sector span{color:#425367;padding:0 13px}nav{display:flex;gap:22px}.icon-button{border:0;background:none;color:#bdd0dd;font-size:22px;padding:6px;display:flex;align-items:center;gap:7px;min-height:42px}.icon-button span{font-size:10px;letter-spacing:1.6px}.icon-button:hover{color:var(--cyan)}.arena{height:clamp(330px,49svh,660px);min-height:310px;position:relative;overflow:hidden;background:url('assets/environment.png') center 55%/cover}.arena #world{position:absolute;inset:0}.arena canvas{display:block!important;width:100%!important;height:100%!important}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#040b15b0 0%,transparent 28%,transparent 75%,#080e17 100%)}.base-hud{position:absolute;top:27px;width:235px;pointer-events:none;text-shadow:0 2px 6px #000}.base-hud.player{left:3%;--team:var(--cyan)}.base-hud.enemy{right:3%;text-align:right;--team:var(--amber)}.faction{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:2px;color:var(--team)}.faction small{color:#bed0da;font-size:9px;letter-spacing:1.2px}.enemy .faction{justify-content:flex-end}.faction-dot{width:6px;height:6px;display:inline-block;background:var(--team);box-shadow:0 0 10px var(--team)}.base-number{display:flex;align-items:center;gap:10px;margin-top:8px}.base-number strong{font:600 48px/.95 'Barlow Condensed',sans-serif}.base-number span{font:500 18px 'Barlow Condensed',sans-serif;color:#b9c6d0}.base-number small{display:block;font:500 9px Barlow;letter-spacing:2px;margin:3px 0}.enemy .base-number{justify-content:flex-end}.meter{height:3px;background:#48617355;width:100%;margin-top:10px}.meter i{display:block;height:100%;width:30%;background:var(--team);box-shadow:0 0 9px color-mix(in srgb,var(--team),transparent 40%);transition:width .8s}.enemy .meter i{margin-left:auto}.shield-label{font-size:12px;letter-spacing:1.5px;color:var(--team);margin-top:8px}.shield-label b{font-size:18px;margin-left:9px}.enemy-resources{margin-top:9px;font-size:11px;color:#c9b89d;letter-spacing:1px}.turn-badge{position:absolute;top:24px;left:50%;transform:translateX(-50%);text-align:center;background:linear-gradient(90deg,transparent,#0a1627df,transparent);min-width:190px;padding:9px 25px;border-top:1px solid #7bdce44a}.turn-badge span{font:600 16px 'Barlow Condensed',sans-serif;letter-spacing:3px;color:var(--cyan)}.turn-badge small{display:block;font-size:9px;color:#9dabb8;letter-spacing:2px;margin-top:6px}.location-label{position:absolute;left:3%;bottom:25px;font-size:9px;letter-spacing:2px;color:#7790a3}.location-label span{padding:0 7px}.battle-feed{position:absolute;bottom:22px;left:26%;right:26%;text-align:center;font-size:12px;color:#d9e6ed;line-height:1.5;text-shadow:0 1px 8px #000;min-height:18px}.command-deck{position:relative;padding:0 3% 22px;background:linear-gradient(#080e17,#0b121d);z-index:2}.deck-top{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;margin-top:-4px}.resources{display:flex;gap:30px}.resource{display:flex;align-items:center;gap:10px;--resource:var(--cyan)}.resource.alloy{--resource:var(--alloy)}.resource.ammo{--resource:var(--ammo)}.resource.energy{--resource:var(--energy)}.resource-icon{color:var(--resource);font:600 28px 'Barlow Condensed';width:24px;text-align:center}.resource-name{font-size:10px;color:var(--resource);letter-spacing:1.7px}.resource-value{font:600 25px 'Barlow Condensed';line-height:1}.resource-income{font-size:12px;color:var(--resource);margin-left:5px}.resource-detail{display:flex;align-items:center;gap:13px}.hand-label{font-size:10px;letter-spacing:2px;color:#b8c6d2}.hand-label span{display:block;text-align:right;font-size:9px;letter-spacing:1.5px;color:#667d90;margin-top:6px}.hand{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;align-items:stretch}.card{padding:0;text-align:left;position:relative;border:1px solid #3c4c5b;border-radius:6px;background:#111b28;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s;--resource:var(--alloy);min-width:0;display:flex;flex-direction:column;color:#e9f0f2;box-shadow:0 7px 15px #0004}.card.ammo{--resource:var(--ammo)}.card.energy{--resource:var(--energy)}.card:hover{transform:translateY(-6px);border-color:var(--resource)}.card.selected{transform:translateY(-9px);border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 0 22px #75e6f01f}.card.unaffordable{filter:saturate(.5);opacity:.61}.card-art{height:clamp(92px,11.7vw,200px);width:100%;display:block;background-image:url('assets/cards.png');background-size:400% 200%;background-position:var(--art-x) var(--art-y);border-bottom:1px solid #344555;position:relative}.card-art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#03081050,transparent 40%,#07131e5c)}.card-cost{position:absolute;left:8px;top:7px;z-index:1;color:var(--resource);font:600 28px 'Barlow Condensed';text-shadow:0 1px 5px #000;background:#07101cce;border:1px solid color-mix(in srgb,var(--resource),transparent 60%);border-radius:3px;padding:0 6px;min-width:31px;text-align:center}.card-key{position:absolute;right:8px;top:9px;z-index:1;color:#c7d2db;font-size:10px;opacity:.7}.card-content{display:flex;flex:1;flex-direction:column;padding:10px 10px 12px}.card-name{font:600 16px/1.15 'Barlow Condensed';letter-spacing:.45px;min-height:37px;display:block}.card-effect{display:block;font-size:11px;line-height:1.45;color:#aabfce;border-top:1px solid #2d3d4b;padding-top:7px;margin-top:5px;min-height:39px}.card-category{display:block;font-size:8px;letter-spacing:1.5px;color:var(--resource);margin-bottom:5px}dialog{border:1px solid #354d60;border-radius:10px;background:#0b1724;color:var(--ink);width:min(540px,92vw);max-height:85svh;box-shadow:0 30px 150px #000c;padding:0}dialog::backdrop{background:#01050cbc;backdrop-filter:blur(8px)}.dialog-body{padding:32px}.dialog-body h1{font:600 38px 'Barlow Condensed';letter-spacing:1px;margin:8px 0 16px}.dialog-body p,.dialog-body li{font-size:15px;line-height:1.7;color:#afc1ce}.dialog-body ul{padding-left:20px}.dialog-kicker{font-size:11px;letter-spacing:2px;color:var(--cyan)}.dialog-body .dialog-actions{display:flex;gap:10px;margin-top:25px;flex-wrap:wrap}.dialog-body button{background:#182a3a;border:1px solid #3d5669;border-radius:4px;padding:12px 20px;min-height:44px}.dialog-body .primary{background:var(--cyan);color:#08121b;border-color:var(--cyan)}.result-score{display:flex;justify-content:center;gap:30px;align-items:center;font:600 60px 'Barlow Condensed';padding:18px;color:var(--cyan)}.result-score span{font:400 16px Barlow;color:#7992a5}.result-score b:last-child{color:var(--amber)}#world-error{position:absolute;bottom:60px;left:25%;right:25%;text-align:center;background:#0b1829;color:#eab5a4;padding:10px}body.busy .card{pointer-events:none}body.busy .hand{opacity:.72}@media(min-width:1650px){.card-name{font-size:20px}.card-effect{font-size:14px}.card-category{font-size:10px}.resources{gap:48px}.deck-top{min-height:90px}}@media(max-width:1000px){.sector{display:none}.arena{height:43svh}.base-hud{width:185px}.hand{gap:7px}.card-name{font-size:14px}.card-content{padding:8px}.card-effect{font-size:10px}.card-category{font-size:7px;letter-spacing:1px}.resources{gap:22px}.resource-detail{gap:7px}.hand-label{display:none}.battle-feed{left:25%;right:25%;font-size:11px}.topbar{height:66px}.brand{font-size:18px}}@media(max-width:650px){.topbar{height:58px;padding:0 16px}.brand{font-size:16px;letter-spacing:2px;gap:7px}.brand-mark{font-size:31px}.brand small{font-size:7px;letter-spacing:2px}nav{gap:9px}.icon-button span{display:none}.icon-button{font-size:21px}.arena{height:37svh;min-height:270px}.base-hud{width:125px;top:17px}.base-hud.player{left:16px}.base-hud.enemy{right:16px}.faction{font-size:10px;gap:5px;letter-spacing:1px}.faction small{display:none}.base-number strong{font-size:34px}.base-number span{font-size:13px}.base-number small{font-size:7px}.shield-label{font-size:10px}.shield-label b{font-size:15px}.turn-badge{top:18px;min-width:100px;padding:6px}.turn-badge span{font-size:12px;letter-spacing:1px}.turn-badge small{font-size:7px}.enemy-resources{font-size:9px;letter-spacing:0}.location-label{display:none}.battle-feed{left:12%;right:12%;bottom:13px;font-size:10px}.command-deck{padding:0 14px 18px}.deck-top{min-height:69px}.resources{width:100%;justify-content:space-between;gap:12px}.resource{gap:5px}.resource-icon{font-size:23px;width:19px}.resource-detail{display:block}.resource-name{font-size:9px;letter-spacing:1px;display:block;margin-bottom:3px}.resource-value{font-size:23px}.resource-income{font-size:11px}.hand{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.card-art{height:75px}.card-cost{font-size:23px;left:5px;top:5px;padding:0 5px;min-width:25px}.card-key{display:none}.card-name{font-size:13px;min-height:29px;letter-spacing:.1px}.card-content{padding:7px}.card-category{display:none}.card-effect{font-size:9px;min-height:33px;padding-top:5px;margin-top:4px;line-height:1.3}.card:hover{transform:none}.card.selected{transform:translateY(-4px)}.dialog-body{padding:24px}.dialog-body h1{font-size:31px}}@media(max-height:580px) and (min-width:651px){.topbar{height:48px}.arena{height:44svh;min-height:210px}.deck-top{min-height:55px}.card-art{height:75px}.card-name{min-height:30px;font-size:13px}.card-content{padding:6px}.card-effect{min-height:25px;font-size:9px}.card-category{display:none}.command-deck{padding-bottom:12px}.base-hud{top:14px}.base-number strong{font-size:34px}.turn-badge{top:12px}.battle-feed{bottom:14px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Essential labels remain readable; metadata stays secondary. */
.resource-name{font-size:12px}.resource-income{font-size:14px}.battle-feed{font-size:14px}.card-name{font-size:18px}.card-effect{font-size:13px;min-height:44px}.card-category{font-size:10px}.enemy-resources{font-size:12px}.faction{font-size:13px}
@media(max-width:1100px) and (min-width:651px){.card-name{font-size:15px}.card-effect{font-size:12px}.card-category{font-size:8px}.battle-feed{font-size:12px}}
@media(max-width:650px){.resource-name{font-size:10px}.resource-income{font-size:12px}.card-name{font-size:15px;min-height:34px}.card-effect{font-size:11px;min-height:40px}.card-art{height:85px}.battle-feed{font-size:11px}.enemy-resources{font-size:10px}.faction{font-size:11px}}
/* Cards are staged on the battlefield before their effects resolve. */
.turn-stage[hidden]{display:none}.turn-stage{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:8;perspective:1000px;overflow:visible}
.played-card-wrap{width:180px;position:relative;margin-top:35px;--owner:var(--cyan);box-shadow:0 14px 22px #0009}.played-card-wrap.opponent{--owner:var(--amber)}
.played-owner,.played-caption{text-align:center;letter-spacing:2px;font-size:11px;font-weight:600;color:var(--owner);background:#081420ed;padding:8px 5px;border:1px solid #304656}.played-owner{border-radius:4px 4px 0 0;border-bottom:0}.played-caption{border-top:0;border-radius:0 0 4px 4px;font-size:9px;color:#aebfcb}
.played-card{height:250px;position:relative;--resource:var(--alloy)}.played-card.ammo{--resource:var(--ammo)}.played-card.energy{--resource:var(--energy)}.played-card.face-down .played-back{transform:perspective(900px) rotateY(0deg)}.played-card.face-down .played-front{transform:perspective(900px) rotateY(-180deg)}
.played-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--owner);background:#111f2e;overflow:hidden}.played-front{transform:perspective(900px) rotateY(0deg)}.played-front .card-art{height:145px}.played-content{padding:10px 12px}.played-content strong{font:600 20px/1.15 'Barlow Condensed',sans-serif;display:block}.played-content p{margin:8px 0 0;font-size:13px;line-height:1.35;color:#c3d4df}.played-back{transform:perspective(900px) rotateY(180deg)}
.played-back,.enemy-card-back{display:flex;flex-direction:column;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,#b8874510 0,#b8874510 1px,transparent 1px,transparent 12px),linear-gradient(150deg,#182330,#0a111d 55%,#2a241c);color:var(--amber);border-color:#806440;box-shadow:inset 0 0 0 6px #101a25,inset 0 0 0 7px #ad875742}
.card-back-emblem{font-size:55px;font-family:system-ui,sans-serif;font-weight:300;color:#c39a63;line-height:1.1;text-shadow:0 0 18px #deb37930}.card-back-title{font:600 17px/1.35 'Barlow Condensed',sans-serif;letter-spacing:3px;text-align:center;color:#b79b77;margin-top:13px}.enemy-card-back{animation:hand-turnover .4s both}.enemy-card-back:nth-child(2n){animation-delay:.035s}.enemy-card-back:nth-child(3n){animation-delay:.07s}.card.card-in-flight{opacity:.14!important;transform:translateY(-8px)}body.busy .hand.enemy-hand{opacity:1}.presenting-card .battle-feed{visibility:hidden}.arena.presenting-card{overflow:visible}
@keyframes hand-turnover{0%{opacity:.1;transform:rotateY(90deg)}100%{opacity:1;transform:rotateY(0)}}
@media(max-width:1000px){.played-card-wrap{width:155px}.played-card{height:220px}.played-front .card-art{height:120px}.played-content strong{font-size:18px}.played-content p{font-size:12px}}
@media(max-width:650px){.played-card-wrap{width:128px;margin-top:35px}.played-card{height:180px}.played-front .card-art{height:92px}.played-content{padding:7px 9px}.played-content strong{font-size:16px}.played-content p{font-size:11px;margin-top:5px}.played-owner{font-size:9px;padding:5px}.played-caption{font-size:8px;padding:5px;letter-spacing:1px}.card-back-emblem{font-size:35px}.card-back-title{font-size:12px;letter-spacing:1.5px}.played-back .card-back-emblem{font-size:48px}}
@media(max-height:580px) and (min-width:651px){.played-card-wrap{width:125px;margin-top:10px}.played-card{height:155px}.played-front .card-art{height:76px}.played-content{padding:5px 8px}.played-content strong{font-size:16px}.played-content p{font-size:10px;margin-top:4px}.played-owner,.played-caption{padding:4px;font-size:8px}}

/* Keep touch scrolling available; a hold has a visible discard countdown. */
.hand .card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.card.holding{border-color:var(--red)}.card.holding:after{content:'';position:absolute;bottom:0;left:0;right:0;height:5px;background:var(--red);transform-origin:left;animation:discard-hold .65s linear forwards;z-index:3}
@keyframes discard-hold{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Matching, readable telemetry rails on both sides of the battlefield. */
.arena{background:#080e17;--rail-width:clamp(154px,12vw,196px);--rail-gap:18px;min-height:460px;height:clamp(460px,55svh,700px)}
.arena #world{left:calc(var(--rail-width) + var(--rail-gap)*2);right:calc(var(--rail-width) + var(--rail-gap)*2)}
.stats-panel{position:absolute;top:18px;bottom:18px;width:var(--rail-width);padding:12px;display:flex;flex-direction:column;z-index:4;--team:var(--cyan);background:linear-gradient(150deg,#102331f5,#08131ef5);border:1px solid #426071;border-top:3px solid var(--team);border-radius:7px;box-shadow:0 8px 28px #0005;font-variant-numeric:tabular-nums}
.stats-panel.player{left:var(--rail-gap)}.stats-panel.enemy{right:var(--rail-gap);--team:var(--amber);background:linear-gradient(210deg,#28251ff5,#101720f5);border-color:#75654c;border-top-color:var(--team)}
.stats-heading{color:var(--team);display:grid;grid-template-columns:7px 1fr;gap:7px 8px;align-items:center;padding-bottom:10px;border-bottom:1px solid #ffffff24}
.stats-heading strong{font:600 19px 'Barlow Condensed',sans-serif;letter-spacing:1.6px}.stats-heading small{grid-column:1/-1;color:#c1ccd4;font-size:10px;letter-spacing:.6px;line-height:1.3}.stats-dot{height:6px;width:6px;background:var(--team);box-shadow:0 0 9px var(--team)}
.stat-label{font-size:12px;font-weight:600;letter-spacing:1px;color:#e0e9ef;display:block}.stat-base{padding:12px 0}.stat-total{display:flex;align-items:baseline;gap:8px;margin-top:3px}.stat-total strong{font:600 40px/1 'Barlow Condensed',sans-serif;color:var(--team)}.stat-total>span{color:#b7c6d0;font-size:16px}.stat-meter{height:5px;margin-top:8px;background:#ffffff1f;border-radius:2px;overflow:hidden}.stat-meter i{display:block;width:30%;height:100%;background:var(--team);transition:width .8s}
.stat-shield{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #ffffff24;border-bottom:1px solid #ffffff24;padding:8px 0}.stat-shield strong{font:600 28px/1 'Barlow Condensed',sans-serif;color:var(--team)}
.stat-resources{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;min-height:0}.stat-resource{padding:8px 0;border-bottom:1px solid #ffffff18;--resource:var(--alloy)}.stat-resource:last-child{border-bottom:0}.stat-resource.ammo{--resource:var(--ammo)}.stat-resource.energy{--resource:var(--energy)}.stat-resource .stat-label{color:var(--resource)}.stat-resource-values{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:5px}.stat-resource-values>strong{font:600 30px/1 'Barlow Condensed',sans-serif;color:#f3f7fa}.stat-production{display:flex;flex-direction:column;align-items:flex-end;gap:2px;color:#e0e9ef}.stat-production b{font-size:16px;font-weight:600;color:var(--resource)}.stat-production small{font-size:11px;color:#b7c6d0}
.location-label{left:calc(var(--rail-width) + var(--rail-gap)*2 + 12px)}.battle-feed{left:calc(var(--rail-width) + var(--rail-gap)*2 + 12px);right:calc(var(--rail-width) + var(--rail-gap)*2 + 12px)}
.deck-top{min-height:54px}.deck-guide{font-size:11px;font-weight:600;letter-spacing:1.4px;color:#c8d7e0}.deck-guide span{font-weight:400;color:#93a8b9;margin-left:12px;font-size:10px}.hand-label{display:block}.hand-label span{display:inline;margin-left:12px}
@media(max-width:1000px){.arena{--rail-width:136px;--rail-gap:12px}.stats-panel{padding:12px}.stats-heading strong{font-size:17px}.stats-heading small{font-size:9px}.stat-label{font-size:11px}.stat-total strong{font-size:42px}.deck-guide span{display:none}.location-label{display:none}}
@media(max-width:650px){
  .arena{--rail-width:100px;--rail-gap:8px;height:520px;min-height:520px}
  .arena #world{inset:190px 0 0;mask-image:linear-gradient(transparent,#000 55px);-webkit-mask-image:linear-gradient(transparent,#000 55px)}.stats-panel{top:62px;bottom:96px;padding:10px 9px;border-radius:5px}
  .stats-heading{gap:5px;padding-bottom:10px}.stats-heading strong{font-size:15px;letter-spacing:1px}.stats-heading small{display:none}
  .stat-base{padding:11px 0}.stat-label{font-size:10px;letter-spacing:.5px}.stat-total{gap:5px}.stat-total strong{font-size:36px}.stat-total>span{font-size:12px}.stat-meter{margin-top:7px;height:4px}
  .stat-shield{padding:8px 0}.stat-shield strong{font-size:27px}.stat-resource{padding:8px 0}.stat-resource-values{margin-top:3px}.stat-resource-values>strong{font-size:28px}.stat-production b{font-size:13px}.stat-production small{font-size:10px}
  .turn-badge{top:13px}.played-card-wrap{width:128px;margin-top:-45px}.battle-feed{left:14px;right:14px;bottom:10px;background:#08131ed9;border-radius:4px;padding:5px}
  .deck-top{min-height:46px;gap:10px}.deck-guide{font-size:10px;letter-spacing:.8px}.hand-label{font-size:9px;letter-spacing:.6px}.hand-label span{font-size:9px;margin-left:5px;letter-spacing:0}
}
@media(max-width:359px){.arena{--rail-width:88px;--rail-gap:6px}.stats-panel{padding:9px 7px}.played-card-wrap{width:112px}.played-content strong{font-size:15px}.stat-resource-values>strong{font-size:26px}}
/* Compact telemetry, bottom-up base progress and explicit material symbols. */
.arena{--rail-width:126px;--rail-gap:14px}.stats-panel{padding:12px 10px}.stats-heading strong{font-size:17px;letter-spacing:1px}.stats-heading small{font-size:8px;letter-spacing:.1px}.stat-label{font-size:11px;letter-spacing:.6px}.stat-base{position:relative;padding-left:16px}.stat-total{gap:5px}.stat-total strong{font-size:39px}.stat-total>span{font-size:13px}.stat-meter{position:absolute;left:0;top:12px;bottom:12px;height:auto;width:5px;margin:0;display:flex;align-items:flex-end}.stat-meter i{width:100%;height:30%;transition:height .9s ease}.stat-resource .stat-label{display:flex;align-items:center;gap:6px}.material-icon{width:21px;height:21px;flex:none;vertical-align:middle;filter:drop-shadow(0 0 5px currentColor)}.stat-resource-values>strong{font-size:30px}.stat-production b{font-size:14px}.stat-production small{font-size:10px}.card-cost{display:flex;align-items:center;gap:5px;font-size:25px;line-height:1.35;padding:1px 6px}.card-cost .material-icon{width:20px;height:20px}.card-art{background-repeat:no-repeat}.played-card .card-cost{font-size:25px}.played-card .card-cost .material-icon{width:21px;height:21px}
@media(max-width:1000px){.arena{--rail-width:118px;--rail-gap:10px}.stats-panel{padding:12px 9px}.stats-heading small{font-size:8px}.stat-label{font-size:10px}.stat-resource .material-icon{width:18px;height:18px}.stat-resource .stat-label{gap:4px}.card-cost{font-size:23px;left:5px;gap:3px;padding:1px 4px}.card-cost .material-icon{width:17px;height:17px}.card-key{right:5px;top:42px}}
@media(max-width:650px){.arena{--rail-width:92px;--rail-gap:7px}.stats-panel{padding:10px 7px}.stat-base{padding-left:12px}.stat-total strong{font-size:31px}.stat-total>span{font-size:11px}.stat-meter{width:4px}.stat-resource .material-icon{width:17px;height:17px}.stat-resource .stat-label{gap:3px;font-size:9px;letter-spacing:0}.stat-resource-values>strong{font-size:27px}.stat-production b{font-size:12px}.stats-heading strong{font-size:14px}.card-cost{font-size:22px;gap:3px;left:4px;top:4px}.card-cost .material-icon{width:17px;height:17px}}

/* Count resource and defense changes immediately while scene effects continue. */
.stats-panel strong,.stat-production b{font-variant-numeric:tabular-nums}
.stat-counting{display:inline-block;transform:scale(1.07);transition:transform .15s ease;text-shadow:0 0 12px currentColor}
.stat-rising{color:#aff8dd!important}.stat-falling{color:#ffaaa1!important}
@media(prefers-reduced-motion:reduce){.stat-counting{transform:none}.stat-meter i{transition:none}}

.debug-menu{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}.debug-menu h2{font:600 23px "Barlow Condensed";margin:0}.debug-menu p{font-size:12px}.debug-menu a{display:flex;justify-content:space-between;gap:12px;margin-top:8px;padding:12px;border:1px solid #365064;border-radius:5px;background:#132333;color:var(--ink);text-decoration:none;font-size:13px}.debug-menu a:hover{border-color:var(--cyan);color:var(--cyan)}
/* Fullscreen contains the complete game, including DOM cards and dialogs. */
:fullscreen #game{max-width:none;min-height:100dvh}
:-webkit-full-screen #game{max-width:none;min-height:100dvh}
#fullscreen[aria-pressed="true"]{color:var(--cyan)}
/* Use the available viewport even when fullscreen is entered via browser UI. */
html:has(#game),body:has(#game){height:100%;overflow:hidden;overscroll-behavior:none}
#game{--deck-height:clamp(260px,34dvh,370px);max-width:none;height:100svh;height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) var(--deck-height)}
#game>.arena{min-height:0}
#game .command-deck{min-height:0;padding-bottom:max(8px,var(--game-safe-bottom));display:flex;flex-direction:column}
#game .deck-top{flex:none;min-height:32px;margin-top:0}
#game #hand{flex:1;min-height:0;align-content:start;justify-content:center;grid-template-columns:repeat(8,minmax(0,min(calc((100vw - 6vw - 70px)/8),calc(var(--deck-height) - 170px))))}
#game #hand .card-content{padding:7px}
#game #hand .card-name{font-size:16px;min-height:3.45em}
#game #hand .card-effect{font-size:11px;min-height:calc(3.9em + 5px);line-height:1.3;padding-top:5px}
#game #hand .card-category{display:none}
#game>.arena{height:auto}
#game>*{min-width:0}

/* Card backs borrow face geometry, so switching turns cannot resize the arena. */
#hand .enemy-card-back{align-items:stretch;justify-content:flex-start;min-height:0}
.hand-size-reference{display:contents;visibility:hidden}
.hand-card-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* Keep eight complete, square illustrations instead of stretching wide cards. */
#hand,.command-deck>.deck-top{width:100%;max-width:1590px;margin-left:auto;margin-right:auto}
#hand .card-art{height:auto;aspect-ratio:1;flex-shrink:0}
#hand .card-name{min-height:3.45em}
#hand .card-effect{min-height:calc(4.35em + 7px)}
/* Spacious telemetry grows with its panel, keeping income secondary. */
@media(min-width:1400px){#game>.arena{--rail-width:clamp(140px,9vw,184px)}#game .stats-panel{padding:14px}}
#game .stats-panel{container-type:size;container-name:colony-stats}
@container colony-stats (min-height:600px){
  .stat-resources{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;padding-top:10px}
  .stat-resource{display:flex;flex-direction:column;justify-content:center;width:100%;padding:10px 8px;position:relative;border:1px solid color-mix(in srgb,var(--resource),transparent 72%);border-radius:6px;background:linear-gradient(135deg,color-mix(in srgb,var(--resource),transparent 94%),#07111b80)}
  .stat-resource:last-child{border-bottom:1px solid color-mix(in srgb,var(--resource),transparent 72%)}
  .stat-resource .stat-label{justify-content:center;flex-direction:column;gap:5px;font-size:clamp(10px,1.4cqh,13px);letter-spacing:1px}
  .stat-resource .material-icon{width:clamp(26px,min(4.8cqh,30cqw),46px);height:clamp(26px,min(4.8cqh,30cqw),46px)}
  .stat-resource-values{justify-content:center;position:relative;margin-top:8px;padding-bottom:28px;min-width:0}
  .stat-resource-values>strong{font-size:clamp(38px,min(8.5cqh,47cqw),82px);line-height:1.05;text-align:center}
  .stat-production{position:absolute;right:0;bottom:0;gap:1px;flex-direction:row;align-items:baseline}
  .stat-production b{font-size:clamp(14px,1.8cqh,18px)}
  .stat-production small{font-size:10px;margin-left:3px}
}
/* Short tablet arenas still keep every resource inside its side panel. */
@container colony-stats (max-height:440px){
  .stats-heading{padding-bottom:6px;gap:4px 8px}
  .stat-base{padding-top:8px;padding-bottom:8px}
  .stat-total strong{font-size:32px}
  .stat-shield{padding:6px 0}
  .stat-resources{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:0}
  .stat-resource{padding:4px 0;min-height:0;display:flex;flex-direction:column;justify-content:center}
  .stat-resource .stat-label{font-size:10px;line-height:16px}
  .stat-resource .material-icon{width:16px;height:16px}
  .stat-resource-values{margin-top:1px}
  .stat-production{flex-direction:row;align-items:baseline;gap:3px}
  .stat-production b{font-size:12px}
  .stat-production small{font-size:9px}
  .stat-resource-values>strong{font-size:26px}
}
/* Phones and portrait tablets share a shallow scoreboard. */
@media(max-width:650px),(max-width:1100px) and (max-height:500px),(max-width:1100px) and (orientation:portrait){
  #game .topbar{height:44px;padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
  #game .brand{font-size:14px;letter-spacing:1px;gap:5px}#game .brand-mark{font-size:25px}#game .brand small,#game .sector{display:none}
  #game nav{gap:6px}#game .icon-button{font-size:20px;min-height:40px;padding:5px}#game .icon-button span{display:none}
  #game>.arena{min-height:0}
  #game .arena #world{inset:78px 0 0;mask-image:none;-webkit-mask-image:none}
  #game .turn-badge{top:2px;min-width:120px;padding:3px 8px;border:0}
  #game .turn-badge span{font-size:11px;letter-spacing:1px}#game .turn-badge small{display:inline;font-size:8px;letter-spacing:0;margin-left:6px}
  #game .stats-panel{top:28px;bottom:auto;width:calc(50% - 8px);height:44px;padding:3px 4px;container-type:normal;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:1fr;gap:2px;border-radius:4px;border-top-width:2px}
  #game .stats-panel.player{left:5px}#game .stats-panel.enemy{right:5px}
  #game .stats-heading{position:absolute;top:-14px;left:4px;padding:0;border:0;display:block;line-height:10px}
  #game .stats-panel.enemy .stats-heading{left:auto;right:4px}
  #game .stats-heading strong{font-size:9px;letter-spacing:.3px}#game .stats-heading small,#game .stats-dot{display:none}
  #game .stat-base{padding:0;display:flex;flex-direction:column;align-items:center}
  #game .stat-base>.stat-label{font-size:0;height:12px;line-height:12px}
  #game .stat-base>.stat-label:after{content:var(--base-short-label,'ZÁK');font-size:7px;letter-spacing:0}
  #game .stat-total{margin:1px 0 0;gap:0}#game .stat-total strong{font-size:18px}
  #game .stat-total>span,#game .stat-meter{display:none}
  #game .stat-shield{padding:0;border:0;display:flex;flex-direction:column;justify-content:flex-start;gap:1px}
  #game .stat-shield .stat-label{font-size:7px;letter-spacing:0;line-height:12px;white-space:nowrap}
  #game .stat-shield strong{font-size:18px}
  #game .stat-resources{display:contents}
  #game .stat-resource{padding:0;border:0;border-left:1px solid #91a9b23b;min-width:0}
  #game .stat-shield{border-left:1px solid #91a9b23b}
  #game .stat-resource .stat-label{font-size:0;gap:0;justify-content:center}
  #game .stat-resource .material-icon{width:12px;height:12px;filter:none}
  #game .stat-resource-values{margin-top:1px;display:flex;flex-direction:row;justify-content:center;gap:2px;align-items:baseline}
  #game .stat-resource-values>strong{font-size:17px;line-height:1}
  #game .stat-production{display:block;line-height:1}#game .stat-production b{font-size:8px}#game .stat-production small{display:none}
  #game .location-label{display:none}#game .battle-feed{left:10px;right:10px;bottom:4px;font-size:10px}
  #game .command-deck{padding:0 max(8px,env(safe-area-inset-right)) max(6px,var(--game-safe-bottom)) max(8px,env(safe-area-inset-left))}
  #game .deck-top{min-height:24px;margin:0}#game .deck-guide{font-size:9px;letter-spacing:.4px}#game .deck-guide span,#game .hand-label{display:none}
  #game{--swipe-card-width:124px;--deck-height:calc(var(--swipe-card-width) + 144px + max(6px,var(--game-safe-bottom)))}
  #game #hand{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:var(--swipe-card-width);grid-template-rows:minmax(0,1fr);grid-auto-rows:auto;justify-content:start;align-content:stretch;gap:6px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;padding:4px 0 6px;scroll-snap-type:x proximity;overscroll-behavior:contain}
  #game #hand .card{scroll-snap-align:start}#game #hand .card-content{padding:6px}#game #hand .card-name{font-size:14px;min-height:2.3em}#game #hand .card-effect{font-size:10px;min-height:calc(3.9em + 5px);padding-top:5px;line-height:1.3}
  #hand .card-category,#hand .card-key{display:none}#hand .card-cost{font-size:20px}
}
/* Portrait tablets keep telemetry above the larger, full-width battlefield. */
@media(min-width:651px) and (max-width:1100px) and (orientation:portrait){
  #game{--swipe-card-width:148px}
  #game .topbar{height:52px}
  #game .stats-panel{height:52px}
  #game .arena #world{top:86px}
  #game .stat-total strong,#game .stat-shield strong{font-size:23px}
  #game .stat-resource-values>strong{font-size:22px}
  #game .stat-production b{font-size:10px}
}
/* Tablet landscape uses the full row width while reserving height for square art. */
@media(min-width:651px) and (max-width:1400px) and (min-height:501px) and (orientation:landscape){
  #game{--deck-height:calc(clamp(270px,calc((94vw - 56px)/8 + 140px),360px) + max(8px,var(--game-safe-bottom)))}
  #game #hand{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;overflow:hidden;align-content:stretch;grid-template-rows:minmax(0,1fr)}
  #game #hand .card-name{font-size:15px;min-height:2.3em}
  #game #hand .card-effect{font-size:11px;min-height:calc(3.9em + 5px)}
}
/* A short landscape viewport gets a two-column, vertically scrollable hand. */
@media(max-width:1100px) and (max-height:500px) and (orientation:landscape){
  #game{--side-hand-width:clamp(218px,29vw,284px);grid-template-columns:minmax(0,1fr) var(--side-hand-width);grid-template-rows:36px minmax(0,1fr);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:var(--game-safe-bottom)}
  #game .topbar{grid-column:1/-1;height:36px;padding:0 10px}
  #game .icon-button{min-height:32px;font-size:18px}
  #game>.arena{grid-column:1;grid-row:2;min-height:0}
  #game .arena #world{inset:72px 0 0}
  #game .stats-panel{top:25px;width:calc(50% - 8px);height:42px}
  #game .stats-heading{display:none}
  #game .turn-badge{top:2px;min-width:130px;padding:0}
  #game .turn-badge small{display:inline;margin:0 0 0 6px}
  #game .command-deck{grid-column:2;grid-row:2;padding:4px 6px 0;border-left:1px solid #365064;overflow:hidden}
  #game .deck-top{display:none}
  #game #hand{height:100%;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;grid-template-rows:none;align-content:start;grid-auto-rows:calc((var(--side-hand-width) - 34px)/2 + 98px);justify-content:stretch;gap:6px;overflow-x:hidden;overflow-y:auto;padding:2px 0 6px;scroll-snap-type:y proximity;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#54808b #101c28}
  #game #hand .card{display:flex;flex-direction:column;transform-origin:right center}
  #game #hand .card:hover,#game #hand .card.selected{transform:none}
  #game #hand .card-art{width:100%;height:auto;aspect-ratio:1}
  #game #hand .card-content{padding:5px}
  #game #hand .card-name{font-size:13px;min-height:2.3em;letter-spacing:0}
  #game #hand .card-effect{font-size:10px;min-height:calc(3.9em + 4px);margin-top:3px;padding-top:4px}
  #game #hand .card-cost{font-size:18px;left:3px;top:3px;gap:2px;min-width:0}
  #game #hand .card-cost .material-icon{width:14px;height:14px}
  #game .played-card-wrap{width:128px;margin-top:42px;--played-fit-gap:0;--played-scale:.45;transform:scale(var(--played-scale))}
  #game .played-card{height:170px}
  #game .played-front .card-art{height:84px}
  #game .played-owner,#game .played-caption{font-size:8px;padding:4px}
  #game .played-content{padding:5px 7px}
  #game .played-content strong{font-size:16px}
  #game .played-content p{font-size:11px;margin-top:4px}
}
/* Highlight income while the played card fades; keep the hand visible. */
.stats-panel.receiving-income{box-shadow:0 0 18px color-mix(in srgb,var(--team),transparent 78%);border-color:var(--team)}
@media(max-width:650px),(max-width:1000px) and (max-height:500px){
  .played-card-wrap{--played-fit-gap:0;--played-scale:.5;transform:scale(var(--played-scale))}
}

/* Returning faces mirror the opponent flip, only when the hand changes sides. */
.card.card-returning{animation:hand-return .4s backwards}
.card.card-returning:nth-child(2n){animation-delay:.035s}
.card.card-returning:nth-child(3n){animation-delay:.07s}
@keyframes hand-return{from{transform:rotateY(-90deg)}to{transform:rotateY(0)}}
/* A Home Screen web app has no browser toolbar and respects the iPhone cutout. */
#fullscreen[hidden]{display:none}
.standalone-app #game{padding-top:env(safe-area-inset-top)}
.dialog-body ol{padding-left:22px}.dialog-body ol li{margin:8px 0}

.install-offer-icon{display:block;border-radius:14px;margin-bottom:18px;border:1px solid var(--line)}

/* Touch must not retain a desktop hover lift inside the scroll viewport. */
@media(hover:none),(pointer:coarse){#game #hand .card:hover{transform:none}}

/* Visible before JS starts; only the complete, decoded deck unlocks play. */
.card-loading{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:#080e17f5}
.card-loading[hidden],#card-loading-retry[hidden]{display:none}
.card-loading section{width:min(100%,390px);text-align:center;padding:30px 22px;border:1px solid #355766;border-radius:16px;background:radial-gradient(ellipse at top,#163240,#0b1520 75%);box-shadow:0 0 65px #46cfe515}
.loading-brand{color:var(--cyan);font:600 20px 'Barlow Condensed',sans-serif;letter-spacing:3px}
.card-loading h1{font-size:22px;margin:24px 0 20px}.card-loading p{color:var(--muted);font-size:14px;line-height:1.5}
.card-loading progress{width:100%;height:9px;accent-color:var(--cyan);border:0;border-radius:6px;overflow:hidden;background:#233743}
.card-loading progress::-webkit-progress-bar{background:#233743}.card-loading progress::-webkit-progress-value{background:var(--cyan)}
.card-loading button{padding:12px 20px;margin-top:10px}
@media(max-height:420px){.card-loading section{padding:16px 22px}.card-loading h1{margin:12px 0}}

/* The language choice stays visible beside the existing status-bar controls. */
.language-switch{display:flex;align-items:center;gap:2px;align-self:center;border:1px solid var(--line);border-radius:5px;padding:2px}
.language-switch button{background:transparent;border:0;border-radius:3px;color:var(--muted);min-height:36px;min-width:36px;padding:5px 7px;font-size:11px;font-weight:700;letter-spacing:.4px}
.language-switch button[aria-pressed="true"]{background:#75e6f024;color:var(--cyan)}
.language-switch button:hover{color:var(--ink)}
@media(max-width:1150px){.sector{display:none}}
@media(max-width:650px){.topbar nav{gap:3px}.language-switch button{min-width:30px;padding:5px;font-size:10px}}
@media(max-width:390px){.topbar{padding:0 8px}.brand{font-size:13px;letter-spacing:1px}.brand-mark{display:none}.brand small{letter-spacing:1px}.topbar nav{gap:1px}.topbar .icon-button{padding:5px}}

:root:lang(en){--base-short-label:'BASE'}