/* Hillshot Tanks — UI system
   Type: Baloo 2 (display) + Nunito (UI). Scale 12/13/15/18/22/28/40/56.
   Space: 4-pt grid (4 8 12 16 20 24 32). Radii 10/14/20. */
:root{
  --ink-0:#0d1230; --ink-1:#161d42; --ink-2:#1f2856; --ink-3:#2b366d; --ink-4:#3a4787;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18);
  --cream:#fff7e8; --muted:#b8c0e6; --faint:#8d96c4;
  --sun:#ffd23f; --sun-2:#ffb21f; --sun-ink:#3b2700;
  --p0:#ff6a3d; --p0-d:#c2401e; --p1:#3d8bff; --p1-d:#2559b8;
  --good:#5ad37a; --bad:#ff4d5e;
  --fire:#ff6a3d; --fire-d:#b8381b;
  --r1:10px; --r2:14px; --r3:20px;
  --sh-1:0 2px 0 rgba(0,0,0,.25), 0 6px 16px rgba(5,8,30,.28);
  --sh-2:0 3px 0 rgba(0,0,0,.28), 0 18px 40px rgba(5,8,30,.45);
  --ff-d:"Baloo 2", ui-rounded, system-ui, sans-serif;
  --ff-u:"Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --sl:env(safe-area-inset-left,0px); --sr:env(safe-area-inset-right,0px);
  --pc:var(--p0); --pc-d:var(--p0-d);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;background:var(--ink-0);overscroll-behavior:none}
body{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  font-family:var(--ff-u);font-weight:700;color:var(--cream);font-size:15px;line-height:1.35}
canvas#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation;outline:none}
button:focus-visible{box-shadow:0 0 0 3px var(--sun)!important}
svg{display:block}

/* ---------- shared: panels & buttons ---------- */
.panel{background:linear-gradient(180deg,rgba(38,48,100,.94),rgba(22,29,66,.96));border:1px solid var(--line-2);
  border-radius:var(--r3);box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.12)}
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;
  border-radius:var(--r2);background:var(--ink-3);box-shadow:0 4px 0 #18204a,inset 0 1px 0 rgba(255,255,255,.14);
  font-family:var(--ff-d);font-weight:800;font-size:20px;letter-spacing:.2px;
  transition:transform .08s ease,box-shadow .08s ease,background .15s ease,filter .15s}
.btn{white-space:nowrap}
.btn em{font-family:var(--ff-u);font-style:normal;font-weight:800;font-size:12px;color:var(--muted);
  background:rgba(0,0,0,.22);padding:2px 8px;border-radius:99px}
.btn:hover{background:var(--ink-4)}
.btn:active,.btn.press{transform:translateY(3px);box-shadow:0 1px 0 #18204a,inset 0 1px 0 rgba(255,255,255,.1)}
.btn.primary{background:linear-gradient(180deg,#ffe066,var(--sun) 45%,var(--sun-2));color:var(--sun-ink);
  box-shadow:0 4px 0 #b97900,0 10px 22px rgba(255,190,40,.25),inset 0 1px 0 rgba(255,255,255,.6)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.primary:active{box-shadow:0 1px 0 #b97900,inset 0 1px 0 rgba(255,255,255,.5)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--line-2)}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.iconbtn{width:44px;height:44px;border-radius:var(--r2);display:grid;place-items:center;background:rgba(22,29,66,.82);
  border:1px solid var(--line-2);box-shadow:var(--sh-1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .08s,background .15s;pointer-events:auto}
.iconbtn svg{width:20px;height:20px;fill:var(--cream)}
.iconbtn:hover{background:var(--ink-3)}
.iconbtn:active{transform:scale(.92)}

/* ---------- screens & transitions ---------- */
.screen{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--st) + 72px) calc(var(--sr) + 16px) calc(var(--sb) + 16px) calc(var(--sl) + 16px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility 0s linear .28s;overflow:hidden}
.screen.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s ease}
.screen.dim{background:radial-gradient(ellipse at 50% 40%,rgba(13,18,48,.55),rgba(13,18,48,.86))}
.screen .panel{transform:translateY(14px) scale(.97);transition:transform .34s cubic-bezier(.2,1.2,.4,1)}
.screen.show .panel{transform:none}
.fade{transition:opacity .3s ease}
.fade.out{opacity:0}

/* ---------- title ---------- */
#title{background:linear-gradient(180deg,rgba(13,18,48,0) 0%,rgba(13,18,48,.35) 55%,rgba(13,18,48,.75) 100%)}
.tgrid{display:grid;grid-template-columns:minmax(0,430px) minmax(0,330px);gap:16px;align-items:stretch;max-height:100%;width:100%;justify-content:center}
.tmain{position:relative;padding:24px 24px 20px;display:flex;flex-direction:column;gap:14px;overflow:auto;min-height:0}
.badge{align-self:flex-start;font-size:12px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--sun-ink);
  background:var(--sun);padding:4px 10px;border-radius:99px;box-shadow:0 2px 0 #b97900}
.logo{font-family:var(--ff-d);font-weight:800;line-height:.86;margin-top:2px;display:flex;flex-direction:column}
.logo .l1{font-size:56px;color:var(--cream);text-shadow:0 4px 0 #0b1030}
.logo .l2{font-size:56px;color:var(--p0);text-shadow:0 4px 0 #0b1030;margin-left:28px}
.tag{color:var(--muted);font-size:15px;font-weight:700;margin-top:-2px}
.field{display:flex;align-items:center;gap:12px}
.flabel{width:76px;flex:0 0 auto;font-size:12px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
.seg{flex:1;display:flex;background:var(--ink-0);border-radius:var(--r2);padding:4px;gap:4px;box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.seg button{flex:1;min-height:44px;border-radius:var(--r1);font-weight:800;font-size:15px;color:var(--muted);
  transition:background .15s,color .15s,transform .08s;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.seg button em{font-style:normal;font-size:12px;color:var(--faint);font-weight:800}
.seg button:hover{color:var(--cream);background:rgba(255,255,255,.05)}
.seg button:active{transform:scale(.96)}
.seg button.on{background:var(--ink-4);color:var(--cream);box-shadow:0 2px 0 rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.14)}
.seg button.on em{color:var(--sun)}
.btns{display:grid;grid-template-columns:1fr;gap:10px;margin-top:4px}
.btns .btn{min-width:0}
.how{font-size:13px;color:var(--muted);text-align:center}
.early{font-size:13px;color:var(--faint);text-align:center;font-style:italic;font-weight:700}
.tside{padding:20px 20px 16px;display:flex;flex-direction:column;gap:12px;overflow:auto;min-height:0}
.sidehd{font-family:var(--ff-d);font-weight:800;font-size:22px;line-height:1.1}
.full{list-style:none;display:flex;flex-direction:column;gap:10px}
.full li{position:relative;padding-left:20px;font-size:13px;color:var(--muted);font-weight:700}
.full li::before{content:"";position:absolute;left:2px;top:6px;width:8px;height:8px;border-radius:3px;background:var(--sun);transform:rotate(45deg)}
.full li b{color:var(--cream);font-weight:900}

/* ---------- HUD ---------- */
#hud{position:fixed;top:calc(var(--st) + 10px);left:calc(var(--sl) + 128px);right:calc(var(--sr) + 10px);
  display:flex;gap:8px;align-items:flex-start;justify-content:space-between;pointer-events:none;z-index:5}
body.portrait #hud{left:calc(var(--sl) + 10px);display:grid;grid-template-columns:1fr 1fr;row-gap:8px;column-gap:8px}
body.portrait #windbox{grid-column:2;grid-row:1;justify-self:end;margin-right:52px;width:auto;min-width:118px;display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;text-align:left;padding:6px 10px;height:44px}
body.portrait #windbox .wlbl{grid-row:1/3;writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;letter-spacing:1px}
body.portrait #windbox .wrow{justify-content:flex-start;height:18px}
body.portrait #timer{grid-column:2}
body.portrait #pauseBtn{grid-column:2;grid-row:1;justify-self:end}
body.portrait #pc0{grid-column:1;grid-row:2;max-width:none}
body.portrait #pc1{grid-column:2;grid-row:2;max-width:none}
.pcard{flex:1 1 0;min-width:0;max-width:260px;background:rgba(22,29,66,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line-2);border-radius:var(--r2);padding:7px 10px 8px;box-shadow:var(--sh-1);
  transition:box-shadow .2s,border-color .2s,transform .2s;position:relative}
#pc0{--c:var(--p0)} #pc1{--c:var(--p1)}
.pcard.active{border-color:var(--c);box-shadow:var(--sh-1),0 0 0 2px var(--c)}
.pcard.hit{animation:hit .35s ease}
@keyframes hit{0%,100%{transform:none}25%{transform:translateX(-3px)}60%{transform:translateX(3px)}}
.ptop{display:flex;align-items:center;gap:6px;font-weight:900;font-size:13px}
.pcard.right .ptop{justify-content:flex-end}
.dot{width:10px;height:10px;border-radius:50%;background:var(--c);flex:0 0 auto;box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.pname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pcard:not(.right) .pips{margin-left:auto} .pcard.right .pips{margin-right:auto}
.pips{display:flex;gap:4px;flex:0 0 auto}
.pips b{width:10px;height:10px;border-radius:3px;transform:rotate(45deg) scale(.85);background:var(--ink-0);border:1.5px solid rgba(255,255,255,.3);transition:background .3s,transform .3s}
.pips b.on{background:var(--sun);border-color:var(--sun);transform:rotate(45deg) scale(1)}
.hp{position:relative;height:10px;border-radius:6px;background:var(--ink-0);margin-top:6px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.hp i{position:absolute;top:0;bottom:0;left:0;border-radius:6px}
.hpg{background:#fff;opacity:.7;transition:width .6s ease .35s}
.hpv{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));transition:width .25s ease}
.pcard.right .hp i{left:auto;right:0}
.pcard{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:center}
.ptop{grid-column:1/-1}
.hpnum{font-family:var(--ff-d);font-weight:800;font-size:15px;line-height:1;margin-top:6px;min-width:26px;text-align:right;font-variant-numeric:tabular-nums}
.hp{grid-column:1;grid-row:2}.hpnum{grid-column:2;grid-row:2}
.pcard.right{grid-template-columns:auto minmax(0,1fr)}
.pcard.right .hpnum{grid-column:1;text-align:left}.pcard.right .hp{grid-column:2}
#windbox{flex:0 0 auto;width:96px;text-align:center;background:rgba(22,29,66,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line-2);border-radius:var(--r2);padding:5px 6px 6px;box-shadow:var(--sh-1)}
.wlbl{font-size:12px;letter-spacing:1.4px;color:var(--faint);font-weight:900;line-height:1}
.wrow{display:flex;align-items:center;justify-content:center;gap:5px;height:22px}
#warrow{display:block;height:4px;background:var(--sun);border-radius:2px;position:relative;transition:width .4s ease}
#warrow::after{content:"";position:absolute;top:-5px;border:7px solid transparent}
#warrow.r::after{right:-9px;border-left:9px solid var(--sun);border-right:0}
#warrow.l::after{left:-9px;border-right:9px solid var(--sun);border-left:0}
#warrow.r{order:2} #warrow.l{order:0} #wval{order:1}
#wval{font-family:var(--ff-d);font-weight:800;font-size:18px;line-height:1}
#turnlbl{font-size:12px;font-weight:900;color:var(--c,var(--cream));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#timer{height:4px;border-radius:2px;background:var(--ink-0);margin-top:4px;overflow:hidden}
#timer i{display:block;height:100%;width:100%;background:var(--sun);transition:width .25s linear}
#timer.low i{background:var(--bad)}
#pauseBtn{flex:0 0 auto}

/* ---------- controls ---------- */
#ctrl{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:flex-end;gap:10px;
  padding:10px calc(var(--sr) + 12px) calc(var(--sb) + 10px) calc(var(--sl) + 12px);pointer-events:none;
  --pc:var(--p0);--pc-d:var(--p0-d)}
#ctrl.p1{--pc:var(--p1);--pc-d:var(--p1-d)}
#ctrl>*{pointer-events:auto}
#ctrl.off #move,#ctrl.off #wepwrap,#ctrl.off #aim,#ctrl.off #fireBtn{opacity:.42;pointer-events:none;filter:saturate(.4)}
#move,#wepwrap,#aim,#fireBtn{transition:opacity .2s,filter .2s}
.glass{background:rgba(22,29,66,.82);border:1px solid var(--line-2);box-shadow:var(--sh-1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#move{display:flex;align-items:center;gap:6px;padding:6px;border-radius:var(--r3)}
.mv{width:52px;height:52px;border-radius:var(--r2);background:var(--ink-3);display:grid;place-items:center;
  box-shadow:0 3px 0 #141b40,inset 0 1px 0 rgba(255,255,255,.12);transition:transform .06s,box-shadow .06s,background .12s}
.mv svg{width:24px;height:24px;fill:none;stroke:var(--cream);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.mv:hover{background:var(--ink-4)}
.mv.down{transform:translateY(2px);box-shadow:0 1px 0 #141b40;background:var(--ink-4)}
#fuel{width:46px;text-align:center}
.flbl{font-size:12px;font-weight:900;letter-spacing:1px;color:var(--faint);line-height:1;margin-bottom:5px}
.fbar{height:8px;border-radius:4px;background:var(--ink-0);overflow:hidden}
.fbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7be08e,var(--good));transition:width .1s linear}
.fbar.low i{background:var(--bad)}
#wepwrap{position:relative;display:flex}
#weps{display:flex;gap:6px;padding:6px;border-radius:var(--r3)}
.wep{position:relative;width:62px;height:62px;border-radius:var(--r2);background:var(--ink-2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;border:2px solid transparent;
  box-shadow:0 3px 0 #10173a,inset 0 1px 0 rgba(255,255,255,.1);transition:transform .08s,background .12s,border-color .12s}
.wep svg{width:30px;height:30px}
.wep .wn{font-size:12px;font-weight:900;line-height:1;color:var(--muted)}
.wep .n{position:absolute;top:2px;right:4px;font-size:12px;font-weight:900;color:var(--sun);line-height:1.1}
.wep:hover{background:var(--ink-3)}
.wep:active{transform:translateY(2px)}
.wep.sel{border-color:var(--sun);background:var(--ink-4)}
.wep.sel .wn{color:var(--cream)}
.wep.empty{opacity:.35;pointer-events:none}
#wepBtn{display:none}
#aim{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:var(--r3)}
.nud{display:flex;align-items:center;gap:4px}
.nb{width:44px;height:44px;border-radius:var(--r1);background:var(--ink-3);font-family:var(--ff-d);font-weight:800;font-size:24px;line-height:1;
  box-shadow:0 3px 0 #141b40,inset 0 1px 0 rgba(255,255,255,.12);transition:transform .06s,box-shadow .06s,background .12s}
.nb:hover{background:var(--ink-4)}
.nb:active,.nb.down{transform:translateY(2px);box-shadow:0 1px 0 #141b40}
.nv{width:74px;text-align:center;line-height:1}
.nv b{font-family:var(--ff-d);font-weight:800;font-size:24px;font-variant-numeric:tabular-nums}
.nv small{display:block;font-size:12px;color:var(--faint);font-weight:800;margin-top:1px}
#fireBtn{width:112px;height:72px;border-radius:var(--r3);position:relative;font-family:var(--ff-d);font-weight:800;font-size:28px;letter-spacing:1px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 75%,#fff),var(--pc) 55%,var(--pc-d));
  box-shadow:0 5px 0 color-mix(in srgb,var(--pc-d) 70%,#000),0 12px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5);
  text-shadow:0 2px 0 rgba(0,0,0,.25);transition:transform .07s,box-shadow .07s,filter .15s}
#fireBtn:hover{filter:brightness(1.06)}
#fireBtn:active,#fireBtn.down{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--pc-d) 70%,#000),inset 0 1px 0 rgba(255,255,255,.4)}
#fireBtn.ready::after{content:"";position:absolute;inset:-4px;border-radius:24px;border:2px solid var(--pc);opacity:0;animation:ready 1.6s ease-out infinite}
@keyframes ready{0%{opacity:.8;transform:scale(.96)}100%{opacity:0;transform:scale(1.12)}}

/* landscape / desktop: one row */
body:not(.portrait) #move{margin-right:auto}
body:not(.portrait) #move,body:not(.portrait) #weps,body:not(.portrait) #aim{background:rgba(22,29,66,.78);border:1px solid var(--line-2);box-shadow:var(--sh-1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body:not(.portrait) #aim{flex-direction:row;gap:8px}
/* compact landscape: weapon strip collapses to one button + popover */
body.compact #wepBtn{display:flex}
body.compact #weps{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(8px) scale(.96);
  display:grid;grid-template-columns:repeat(3,62px);opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility 0s linear .16s;background:rgba(22,29,66,.96)}
body.compact #weps.open{opacity:1;visibility:visible;transform:translateX(-50%);transition:opacity .16s,transform .16s}
body.compact #wepBtn{box-shadow:0 3px 0 #10173a,0 0 0 1px var(--line-2),var(--sh-1)}
body.compact #wepBtn::after{content:"";position:absolute;top:5px;left:6px;border:5px solid transparent;border-bottom:6px solid var(--sun);border-top:0}

/* portrait: docked control deck */
body.portrait #ctrl{display:grid;grid-template-columns:1fr auto;grid-template-areas:"w w" "a a" "m f";gap:8px;align-items:center;
  background:linear-gradient(180deg,#1d2552,#131a3d);border-top:1px solid var(--line-2);
  box-shadow:0 -10px 30px rgba(5,8,30,.35),inset 0 1px 0 rgba(255,255,255,.08);padding-top:10px}
body.portrait #wepwrap{grid-area:w}
body.portrait #weps{width:100%;padding:0;gap:6px}
body.portrait .wep{flex:1 1 0;min-width:0;width:auto;height:60px}
body.portrait #aim{grid-area:a;flex-direction:row;justify-content:space-between;padding:0;gap:8px}
body.portrait .nud{flex:1;justify-content:space-between;background:var(--ink-1);border-radius:var(--r2);padding:4px;border:1px solid var(--line)}
body.portrait #move{grid-area:m;padding:0;justify-content:flex-start}
body.portrait #fuel{flex:1;max-width:90px}
body.portrait #fireBtn{grid-area:f;width:132px;height:64px}
@media (max-width:370px){
  body.portrait .wep .wn{font-size:12px;letter-spacing:-.3px}
  body.portrait .nv{width:64px}
  body.portrait #fireBtn{width:112px}
}

/* ---------- banner ---------- */
#banner{position:fixed;left:0;right:0;top:34%;display:flex;justify-content:center;pointer-events:none;z-index:7}
#banner .bin{text-align:center;padding:10px 28px 12px;border-radius:var(--r3);background:rgba(13,18,48,.78);
  border:1px solid var(--line-2);box-shadow:var(--sh-2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:bin .38s cubic-bezier(.2,1.4,.4,1) both}
#banner.out .bin{animation:bout .25s ease both}
@keyframes bin{from{opacity:0;transform:translateY(10px) scale(.85)}to{opacity:1;transform:none}}
@keyframes bout{to{opacity:0;transform:translateY(-8px) scale(.96)}}
#bsub{font-size:12px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:var(--sun)}
#bsub:empty{display:none}
#btxt{font-family:var(--ff-d);font-weight:800;font-size:32px;line-height:1.1;color:var(--cream)}

/* ---------- pause / end cards ---------- */
.card{width:min(380px,100%);padding:22px 20px 18px;display:flex;flex-direction:column;gap:14px;max-height:100%;overflow:auto}
.cardhd{font-family:var(--ff-d);font-weight:800;font-size:32px;text-align:center;line-height:1}
.stack{display:flex;flex-direction:column;gap:10px}
.stack.row{flex-direction:row}.stack.row .btn{flex:1}
.keys{font-size:12px;color:var(--faint);text-align:center}
.endcard{width:min(420px,100%);gap:12px}
.endkick{font-size:12px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:var(--sun);text-align:center}
.endttl{font-family:var(--ff-d);font-weight:800;font-size:40px;line-height:1;text-align:center}
.score{display:flex;justify-content:center;align-items:center;gap:14px;font-family:var(--ff-d);font-weight:800;font-size:44px;line-height:1}
.score i{font-style:normal;color:var(--faint);font-size:28px}
.c0{color:var(--p0)} .c1{color:var(--p1)}
.stats{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;background:var(--ink-0);border-radius:var(--r2);overflow:hidden}
.stats th{font-size:13px;font-weight:900;padding:8px 10px 6px;text-align:right;white-space:nowrap}
.stats td{padding:7px 10px;border-top:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;font-weight:900}
.stats td:first-child{text-align:left;color:var(--muted);font-weight:700}
.stats td.best{color:var(--sun)}

/* ---------- responsive title ---------- */
.sidehd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chev{display:none;width:28px;height:28px;border-radius:8px;background:var(--ink-3);place-items:center;transition:transform .2s}
.chev svg{width:14px;height:14px;fill:none;stroke:var(--cream);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px), (max-height:560px){
  .tgrid{grid-template-columns:minmax(0,440px);align-content:start;overflow:auto;max-height:100%;border-radius:var(--r3)}
  .tside{cursor:pointer;padding:14px 18px}
  .tside .chev{display:grid}
  .tside:not(.open) .full{display:none}
  .tside.open .chev{transform:rotate(180deg)}
  .sidehd{font-size:18px}
}
/* short landscape (phones): two compact columns */
@media (max-height:500px) and (min-width:640px){
  .screen{padding:calc(var(--st) + 10px) calc(var(--sr) + 12px) calc(var(--sb) + 10px) calc(var(--sl) + 132px)}
  .tgrid{grid-template-columns:minmax(0,380px) minmax(0,290px);gap:12px;height:100%}
  .tside{display:flex;padding:14px 16px 12px;gap:8px;cursor:default}
  .tside .chev{display:none}
  .tside:not(.open) .full{display:flex}
  .tmain{padding:14px 18px 12px;gap:9px}
  .logo{flex-direction:row;gap:10px;align-items:baseline}
  .logo .l1,.logo .l2{font-size:40px;margin-left:0}
  .tag{display:none}
  .btn em{display:none}
  .btns{grid-template-columns:1fr 1fr}
  .sidehd{font-size:18px}
  .full{gap:6px}
  .btn{min-height:46px;font-size:18px}
  .card{padding:14px 16px;gap:10px}
  .endttl{font-size:30px}.score{font-size:34px}
  .stats td{padding:4px 10px}.stats th{padding:5px 10px 3px}
  .endcard .early{font-size:12px;margin-top:-4px}
  .endcard{gap:8px}
}
@media (max-width:400px){
  .tmain{padding:20px 16px 16px;gap:12px}
  .logo .l1,.logo .l2{font-size:48px}
  .btns{grid-template-columns:1fr}
  .flabel{width:64px}
  #windbox{width:84px}
  .pcard{padding:6px 8px 7px}
}
@media (max-height:700px) and (orientation:portrait){
  .screen{padding-top:calc(var(--st) + 68px)}
  .tmain{padding:16px 16px 14px;gap:10px}
  .logo{flex-direction:row;gap:10px;align-items:baseline;flex-wrap:wrap}
  .logo .l1,.logo .l2{font-size:40px;margin-left:0}
  .btn{min-height:48px}
  .tag{font-size:13px}
}
@media (min-width:1200px) and (min-height:800px){ .tgrid,.card{zoom:1.22} #banner{zoom:1.2} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}