/* =========================================================
   DOOM: SURVIVORS — hellish industrial game UI
   All overlay geometry is authored in the game's 640x360
   logical pixels: calc(var(--u) * N) == N game pixels.
   ========================================================= */
@font-face{ font-family:'Jersey10'; src:url('../fonts/jersey10.woff2') format('woff2'); font-display:block; }
@font-face{ font-family:'Jersey15'; src:url('../fonts/jersey15.woff2') format('woff2'); font-display:block; }

:root{
  --iron:#0e0c0c;
  --iron-2:#1a1817;
  --steel:#2b2c2e;
  --steel-2:#44464a;
  --steel-hi:#8e9399;
  --hell:#ff4b1f;
  --ember:#ffb347;
  --blood:#8c0d08;
  --blood-hi:#d8230f;
  --hazard:#e0a514;
  --toxic:#5cff6a;
  --bone:#ecdfc6;
  --bone-dim:#a8957d;
  --ice:#8fdcff;
  --gold:#ffd35a;
  --FD:'Jersey10', 'Jersey15', Impact, sans-serif;
  --FT:'Jersey15', 'Jersey10', Impact, sans-serif;
  --scratch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg stroke='%23fff' stroke-width='.6' fill='none' opacity='.09'%3E%3Cpath d='M10 20l60 7M40 90l35-28M100 30l70 22M120 140l48-40M8 150l50 12M70 120l40 6M150 10l-20 30M20 60l14 40M90 170l60-8M130 80l30 4'/%3E%3C/g%3E%3Cg stroke='%23000' stroke-width='.8' fill='none' opacity='.25'%3E%3Cpath d='M11 21l60 7M41 91l35-28M101 31l70 22M121 141l48-40M71 121l40 6'/%3E%3C/g%3E%3C/svg%3E");
  --blood-smear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cg fill='%237a0904'%3E%3Cpath d='M4 8c14-6 40-4 62 1s38 1 50-2c2 4-6 9-20 10s-22 6-40 5-30-4-42-1C6 22 0 14 4 8z' opacity='.85'/%3E%3Cpath d='M22 18c2 10 0 22 3 30 2 5 6 4 6-1 0-9-3-20-2-29z'/%3E%3Cpath d='M52 20c1 7 0 14 2 18 2 3 5 2 5-1 0-6-2-11-1-17z'/%3E%3Cpath d='M84 16c1 12-1 26 2 36 2 5 7 4 6-2-1-11-3-22-2-34z'/%3E%3Ccircle cx='28' cy='53' r='3'/%3E%3Ccircle cx='89' cy='56' r='3.4'/%3E%3Ccircle cx='104' cy='28' r='2'/%3E%3Ccircle cx='10' cy='30' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:#030202 radial-gradient(ellipse at 50% 45%, #1c0906 0%, #070303 55%, #000 100%);
  color:var(--bone);
  font-family:var(--FT);
  overflow:hidden;
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
canvas, img{-webkit-user-drag:none; user-select:none; -webkit-user-select:none;}
#cabinet{-webkit-touch-callout:none;}

/* thin steel/amber scrollbars for every scrolling box (no native grey bar or arrow buttons anywhere) */
.inspector, .board-list, .cdesc{scrollbar-gutter:stable;}
::-webkit-scrollbar{width:calc(var(--u, 2px) * 3.5); height:calc(var(--u, 2px) * 3.5); background:transparent;}
::-webkit-scrollbar-track{background:#0a0706; box-shadow:inset 0 0 0 calc(var(--u, 2px) * .6) #000, inset calc(var(--u, 2px) * .6) 0 0 rgba(255,255,255,.05);}
::-webkit-scrollbar-thumb{background:linear-gradient(90deg, #e9a63a, #b56a1c 55%, #6a3a12); box-shadow:inset 0 0 0 calc(var(--u, 2px) * .5) #1a0d04; border-radius:0;}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(90deg, #ffd35a, #d8892a 55%, #8a4a14);}
::-webkit-scrollbar-button{display:none; width:0; height:0;}
::-webkit-scrollbar-corner{background:transparent;}
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin; scrollbar-color:#c4802a #0a0706;}
}
button{font:inherit; color:inherit; cursor:pointer; background:none; border:0;}
b{font-weight:normal; color:var(--bone);}
.c-ice{color:var(--ice);}
.muted{color:var(--bone-dim);}

#cabinet{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(0px, 1.4vmin, 20px);
}
#screen{
  --pad:clamp(0px, 1.4vmin, 20px);
  position:relative;
  width:min(100vw - 2*var(--pad), calc((100vh - 2*var(--pad)) * 16 / 9));
  aspect-ratio:16/9;
  container-type:inline-size;
  border-radius:clamp(4px, 1.2vmin, 18px);
  overflow:hidden;
  background:#000;
  box-shadow:0 0 0 2px #0b0806, 0 0 0 3px #3a2a22, 0 0 60px rgba(160,20,10,.16), 0 30px 90px rgba(0,0,0,.9);
  isolation:isolate;
}
#crt, #crtFallback, #hud{position:absolute; inset:0; width:100%; height:100%; display:block;}
#crt, #crtFallback{z-index:1; background:#000;}
#crtFallback{display:none;}
#hud{z-index:5; pointer-events:none;}
#screen[data-state=paused] #hud, #screen[data-state=gameover] #hud, #screen[data-state=victory] #hud{opacity:.18;}
#screen[data-state=levelup] #hud{opacity:.55;}

/* CSS scanlines only back up the 2D fallback; the shader owns them otherwise */
#scanlines{
  position:absolute; inset:0; z-index:4; pointer-events:none; display:none;
  background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.22) 2px 3px);
}
.crt-fallback #scanlines{display:block;}
html[data-crt=off] #scanlines{display:none;}
#screen-glass{
  position:absolute; inset:0; z-index:62; pointer-events:none; border-radius:inherit;
  background:radial-gradient(ellipse 70% 35% at 30% 0%, rgba(255,255,255,.04), transparent 70%);
  box-shadow:inset 0 0 calc(100cqw * .05) rgba(0,0,0,.6);
}
html[data-crt=off] #screen-glass{box-shadow:none; background:none;}

/* =============================================== UI root + overlays */
#ui{
  --u:calc(100cqw / 640);
  position:absolute; inset:0; z-index:50; pointer-events:none;
  font-size:calc(var(--u) * 10);
  line-height:1.15;
}
.overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(var(--u) * 7);
  padding:calc(var(--u) * 12) calc(var(--u) * 16);
  pointer-events:auto;
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(90,10,4,.32), transparent 65%),
    linear-gradient(rgba(5,3,3,.8), rgba(5,3,3,.92));
}
.overlay.hidden{display:none;}
.overlay > *{animation:slamIn .22s cubic-bezier(.2,1.4,.4,1) backwards;}
.overlay > *:nth-child(2){animation-delay:.04s;}
.overlay > *:nth-child(3){animation-delay:.08s;}
.overlay > *:nth-child(4){animation-delay:.12s;}
.overlay > *:nth-child(5){animation-delay:.16s;}
@keyframes slamIn{from{opacity:0; transform:translateY(calc(var(--u) * -8)) scale(1.03);} to{opacity:1; transform:none;}}

/* =============================================== materials */
.plate{
  position:relative;
  background:
    var(--scratch),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.28)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    var(--steel);
  background-size:calc(var(--u) * 90) calc(var(--u) * 90), auto, auto, auto;
  box-shadow:
    inset 0 var(--u) 0 rgba(255,255,255,.2),
    inset var(--u) 0 0 rgba(255,255,255,.07),
    inset 0 calc(var(--u) * -1) 0 rgba(0,0,0,.7),
    inset calc(var(--u) * -1) 0 0 rgba(0,0,0,.45),
    0 0 0 var(--u) #050404,
    0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(0,0,0,.65);
}
/* four rivets */
.plate::before{
  content:""; position:absolute; inset:calc(var(--u) * 3); pointer-events:none;
  --r:radial-gradient(circle at 35% 35%, #b7bcc2 0, #6a6e73 calc(var(--u) * .9), #18191a calc(var(--u) * 1.6), transparent calc(var(--u) * 1.9));
  background:var(--r) left top, var(--r) right top, var(--r) left bottom, var(--r) right bottom;
  background-size:calc(var(--u) * 4) calc(var(--u) * 4);
  background-repeat:no-repeat;
}
.hazard{
  height:calc(var(--u) * 4);
  background:repeating-linear-gradient(-45deg, var(--hazard) 0 calc(var(--u) * 3), #15110b calc(var(--u) * 3) calc(var(--u) * 6));
  box-shadow:0 0 0 var(--u) #050404;
}
.term{
  background:
    repeating-linear-gradient(to bottom, rgba(255,160,60,.035) 0 var(--u), transparent var(--u) calc(var(--u) * 2)),
    radial-gradient(ellipse at 50% 0%, rgba(255,120,40,.08), transparent 70%),
    #0c0807;
  box-shadow:inset 0 0 0 var(--u) #050303, inset 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0,0,0,.8), 0 var(--u) 0 rgba(255,255,255,.08);
  color:var(--ember);
}
.panel{padding:calc(var(--u) * 9) calc(var(--u) * 10) calc(var(--u) * 10); text-align:left;}
.panel-label{
  display:flex; align-items:center; gap:calc(var(--u) * 4);
  font:calc(var(--u) * 11)/1 var(--FD);
  color:var(--ember);
  letter-spacing:.06em; text-transform:uppercase;
  margin:0 0 calc(var(--u) * 5) calc(var(--u) * 4);
  text-shadow:0 var(--u) 0 #000;
}
.panel-label::after{content:""; flex:1; height:var(--u); background:linear-gradient(90deg, rgba(255,179,71,.4), transparent);}
kbd{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:calc(var(--u) * 11); height:calc(var(--u) * 10);
  padding:0 calc(var(--u) * 2.5);
  margin-left:calc(var(--u) * 4);
  font:calc(var(--u) * 8)/1 var(--FT);
  color:var(--bone); letter-spacing:.04em;
  background:linear-gradient(#3b3d41, #1c1d1f);
  box-shadow:inset 0 var(--u) 0 rgba(255,255,255,.22), inset 0 calc(var(--u) * -1.5) 0 rgba(0,0,0,.6), 0 0 0 calc(var(--u) * .7) #050404;
  vertical-align:middle;
  text-transform:uppercase;
}

/* =============================================== buttons */
.btn{
  --notch:calc(var(--u) * 5);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:calc(var(--u) * 21);
  padding:calc(var(--u) * 3) calc(var(--u) * 14) calc(var(--u) * 2);
  font:calc(var(--u) * 13)/1 var(--FD);
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--bone);
  text-shadow:0 var(--u) 0 #000;
  clip-path:polygon(var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch));
  background:linear-gradient(180deg, #4b4e52 0%, #2e3033 48%, #1c1d1f 100%);
  box-shadow:
    inset 0 var(--u) 0 rgba(255,255,255,.28),
    inset 0 calc(var(--u) * -2) 0 rgba(0,0,0,.6),
    inset 0 0 0 var(--u) #0a0909;
  transition:transform .08s, filter .08s;
  outline:none;
}
.btn::before{
  /* focus chevron */
  content:""; position:absolute; left:calc(var(--u) * 4); top:50%;
  width:calc(var(--u) * 4); height:calc(var(--u) * 6); margin-top:calc(var(--u) * -3);
  background:var(--gold);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  opacity:0; transform:translateX(calc(var(--u) * -3));
  transition:opacity .1s, transform .1s;
}
.btn:hover{filter:brightness(1.22); transform:translateY(calc(var(--u) * -1));}
.btn:focus-visible{filter:brightness(1.3); box-shadow:inset 0 var(--u) 0 rgba(255,255,255,.3), inset 0 calc(var(--u) * -2) 0 rgba(0,0,0,.6), inset 0 0 0 var(--u) var(--gold);}
.btn:focus-visible::before{opacity:1; transform:none; animation:nudge .6s ease-in-out infinite alternate;}
@keyframes nudge{to{transform:translateX(calc(var(--u) * 1.5));}}
.btn:active{transform:translateY(var(--u)); filter:brightness(.85);
  box-shadow:inset 0 calc(var(--u) * 2) 0 rgba(0,0,0,.6), inset 0 0 0 var(--u) #0a0909;}
.btn:disabled{filter:grayscale(1) brightness(.6); cursor:default; transform:none;}
.btn kbd{margin-left:calc(var(--u) * 6); margin-top:calc(var(--u) * -1);}

.btn-hell{
  color:#fff1df;
  text-shadow:0 var(--u) 0 #3a0300, 0 0 calc(var(--u) * 6) rgba(255,120,40,.5);
  background:
    linear-gradient(180deg, rgba(255,220,160,.35) 0, transparent calc(var(--u) * 3)),
    linear-gradient(180deg, #d8321a 0%, #9a1309 45%, #5a0604 100%);
  box-shadow:
    inset 0 var(--u) 0 rgba(255,200,150,.5),
    inset 0 calc(var(--u) * -2) 0 rgba(40,0,0,.7),
    inset 0 0 0 var(--u) #1c0201,
    inset 0 0 calc(var(--u) * 10) rgba(255,120,30,.25);
}
.btn-hell kbd{background:linear-gradient(#5a0d06, #2a0402); color:#ffd9b8;}
.btn-big{min-height:calc(var(--u) * 30); font-size:calc(var(--u) * 19); padding:calc(var(--u) * 4) calc(var(--u) * 26) calc(var(--u) * 2); --notch:calc(var(--u) * 8);}
.btn-big::after{
  /* hazard end caps */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(-45deg, var(--hazard) 0 calc(var(--u) * 2.5), #15110b calc(var(--u) * 2.5) calc(var(--u) * 5)) left / calc(var(--u) * 9) 100% no-repeat,
    repeating-linear-gradient(-45deg, var(--hazard) 0 calc(var(--u) * 2.5), #15110b calc(var(--u) * 2.5) calc(var(--u) * 5)) right / calc(var(--u) * 9) 100% no-repeat;
  opacity:.85;
}
.btn-big::before{left:calc(var(--u) * 12);}
.btn-ghost{
  color:var(--bone-dim);
  background:linear-gradient(180deg, #1f1c1b, #100e0e);
  box-shadow:inset 0 var(--u) 0 rgba(255,255,255,.08), inset 0 0 0 var(--u) #3a2f2a;
}
.btn-ghost:hover{color:var(--bone);}
.btn-ghost.confirm{color:#fff; background:linear-gradient(180deg, #6a0b06, #300302); box-shadow:inset 0 0 0 var(--u) var(--blood-hi);}
.btn-sm{min-height:calc(var(--u) * 17); font-size:calc(var(--u) * 11); padding:calc(var(--u) * 2) calc(var(--u) * 10) calc(var(--u) * 1);}
.count{color:var(--gold); margin-left:calc(var(--u) * 4);}
.row-btns{display:flex; gap:calc(var(--u) * 6); justify-content:center; flex-wrap:wrap;}

.corner-btn{
  position:absolute; right:calc(var(--u) * 5); top:calc(var(--u) * 10);
  width:calc(var(--u) * 20); height:calc(var(--u) * 20);
  display:none; pointer-events:auto;
  background:linear-gradient(#45474b, #1d1e20);
  box-shadow:inset 0 var(--u) 0 rgba(255,255,255,.25), inset 0 calc(var(--u) * -1.5) 0 rgba(0,0,0,.6), 0 0 0 var(--u) #050404;
  opacity:.8;
}
.corner-btn i{position:absolute; inset:calc(var(--u) * 6) calc(var(--u) * 6.5);
  background:linear-gradient(90deg, var(--bone) 0 35%, transparent 35% 65%, var(--bone) 65%);}
.corner-btn:hover, .corner-btn:focus-visible{opacity:1; outline:none; box-shadow:inset 0 0 0 var(--u) var(--gold), 0 0 0 var(--u) #050404;}
#screen[data-state=playing] .corner-btn{display:block;}
/* the corner pause button sits where the HUD tally ends; push it under on desktop */
@media (pointer:fine){ .corner-btn{top:calc(var(--u) * 62); width:calc(var(--u) * 14); height:calc(var(--u) * 14); opacity:.45;} .corner-btn i{inset:calc(var(--u) * 4) calc(var(--u) * 4.5);} }
.touch-only{display:none !important;}
@media (pointer:coarse){ .touch-only{display:inline-flex !important;} .kb-only, .btn kbd, .card .hotkey{display:none !important;} }

/* =============================================== TITLE */
.title-overlay, #title{
  justify-content:flex-start;
  gap:calc(var(--u) * 6);
  padding-top:calc(var(--u) * 26);
  background:
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(150,20,6,.3), transparent 70%),
    linear-gradient(rgba(4,2,2,.35), rgba(4,2,2,.55) 55%, rgba(4,2,2,.9));
}
.logo{position:relative; display:flex; flex-direction:column; align-items:center;}
.logo-doom{
  position:relative;
  font:calc(var(--u) * 132)/1 var(--FD);
  letter-spacing:.02em;
  margin:calc(var(--u) * -14) -.02em calc(var(--u) * -12) 0;
  color:#2a0503;
  text-shadow:
    0 calc(var(--u) * 1) 0 #4a0904, 0 calc(var(--u) * 2) 0 #3a0703, 0 calc(var(--u) * 3) 0 #2a0402,
    0 calc(var(--u) * 4) 0 #1a0201, 0 calc(var(--u) * 5) 0 #0a0000,
    calc(var(--u) * 2) 0 0 #0a0000, calc(var(--u) * -2) 0 0 #0a0000, 0 calc(var(--u) * -2) 0 #0a0000,
    0 0 calc(var(--u) * 24) rgba(255,60,10,.5), 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(0,0,0,.9);
  animation:logoSlam .5s cubic-bezier(.2,1.6,.4,1) both;
}
.logo-doom::before, .logo-doom::after{
  content:attr(data-text); position:absolute; inset:0;
  color:transparent; text-shadow:none;
  -webkit-background-clip:text; background-clip:text;
}
.logo-doom::before{
  background-image:linear-gradient(180deg, #fff0b8 22%, #ffb340 32%, #ff5a1a 42%, #d51e0b 55%, #7c0703 68%, #c4280c 76%, #ff7a2a 82%);
}
.logo-doom::after{
  background-image:linear-gradient(180deg, transparent 40%, rgba(255,240,180,.8) 50%, transparent 60%);
  background-size:100% 300%;
  animation:sheen 5s 1s ease-in-out infinite;
}
@keyframes sheen{0%{background-position:0 120%;} 30%,100%{background-position:0 -120%;}}
@keyframes logoSlam{0%{opacity:0; transform:scale(1.6); filter:brightness(3);} 60%{opacity:1; transform:scale(.97);} 100%{transform:none; filter:none;}}
.logo-plate{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:calc(var(--u) * 7);
  margin-top:calc(var(--u) * -6);
  padding:calc(var(--u) * 4) calc(var(--u) * 12) calc(var(--u) * 2);
  background:
    var(--scratch),
    linear-gradient(180deg, #6b6e73 0%, #3a3c40 30%, #232427 70%, #111 100%);
  background-size:calc(var(--u) * 90) calc(var(--u) * 90), auto;
  clip-path:polygon(calc(var(--u) * 8) 0, calc(100% - calc(var(--u) * 8)) 0, 100% 50%, calc(100% - calc(var(--u) * 8)) 100%, calc(var(--u) * 8) 100%, 0 50%);
  box-shadow:inset 0 var(--u) 0 rgba(255,255,255,.35), inset 0 calc(var(--u) * -2) 0 rgba(0,0,0,.7);
  animation:plateIn .45s .25s cubic-bezier(.2,1.2,.4,1) both;
}
@keyframes plateIn{from{opacity:0; transform:scaleX(.2);} to{opacity:1; transform:none;}}
.logo-surv{
  font:calc(var(--u) * 30)/1 var(--FD);
  letter-spacing:.26em; margin-right:-.26em;
  color:var(--bone);
  text-shadow:0 var(--u) 0 #fff8, 0 calc(var(--u) * 2) 0 #000, 0 0 calc(var(--u) * 8) rgba(255,180,90,.25);
}
.orn{
  width:calc(var(--u) * 13); height:calc(var(--u) * 12);
  background:var(--skull-red) center / contain no-repeat;
  filter:drop-shadow(0 var(--u) 0 #000);
}
.tagline{
  margin-top:calc(var(--u) * 6);
  font:calc(var(--u) * 11)/1 var(--FT);
  letter-spacing:.14em; text-transform:uppercase;
  color:#c79a74; text-shadow:0 var(--u) 0 #000;
}
.menu{display:flex; flex-direction:column; align-items:center; gap:calc(var(--u) * 7); margin-top:calc(var(--u) * 8);}
.diff-sel{
  display:flex; align-items:stretch;
  width:calc(var(--u) * 236);
  padding:calc(var(--u) * 3);
}
.diff-sel::before{display:none;}
.diff-arrow{
  width:calc(var(--u) * 22);
  font-size:calc(var(--u) * 10); color:var(--ember);
  background:linear-gradient(#3a3c40, #1c1d20);
  box-shadow:inset 0 var(--u) 0 rgba(255,255,255,.2), inset 0 0 0 var(--u) #0a0909;
  outline:none;
}
.diff-arrow:hover, .diff-arrow:focus-visible{color:#fff; background:linear-gradient(#5a1b10, #2a0804);}
.diff-arrow:active{transform:translateY(var(--u));}
.diff-face{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(var(--u) * 2);
  padding:calc(var(--u) * 4) 0 calc(var(--u) * 3);
  background:#0d0908;
  box-shadow:inset 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0,0,0,.8);
  margin:0 calc(var(--u) * 3);
}
.diff-skulls{display:flex; gap:calc(var(--u) * 3); height:calc(var(--u) * 8);}
.diff-skulls i{width:calc(var(--u) * 9); height:calc(var(--u) * 8); background:var(--skull-dim) center / contain no-repeat;}
.diff-skulls i.on{background-image:var(--skull-red); filter:drop-shadow(0 0 calc(var(--u) * 2) rgba(255,60,20,.7));}
.diff-name{font:calc(var(--u) * 15)/1 var(--FD); letter-spacing:.06em; color:#ffd9b0; text-shadow:0 0 calc(var(--u) * 6) rgba(255,80,30,.45);}
.diff-desc{font:calc(var(--u) * 8.5)/1 var(--FT); color:var(--bone-dim); letter-spacing:.04em;}
.menu-row{display:flex; gap:calc(var(--u) * 5);}
.menu-row .btn{font-size:calc(var(--u) * 11); min-height:calc(var(--u) * 18); padding:calc(var(--u) * 2) calc(var(--u) * 10) calc(var(--u) * 1);}
.best-line{
  margin-top:auto;
  display:flex; gap:calc(var(--u) * 10); align-items:center;
  padding:calc(var(--u) * 3) calc(var(--u) * 10) calc(var(--u) * 2);
  font:calc(var(--u) * 9)/1 var(--FT); letter-spacing:.06em;
  color:var(--ember);
}
.best-line .bl-tag{color:#120a06; background:var(--ember); padding:calc(var(--u) * 1) calc(var(--u) * 3) 0; font-family:var(--FD);}
.best-line b{color:var(--bone);}
.title-keys{display:flex; gap:calc(var(--u) * 12); font:calc(var(--u) * 8)/1 var(--FT); color:#8a7766; letter-spacing:.04em; align-items:center;}
.title-keys kbd{margin:0 calc(var(--u) * 3) 0 0;}

/* =============================================== LEVEL UP */
#levelup{gap:calc(var(--u) * 6); background:radial-gradient(ellipse at 50% 50%, rgba(120,14,6,.3), transparent 65%), rgba(4,2,2,.72);}
.lv-head{display:flex; align-items:center; gap:calc(var(--u) * 8);}
.lv-haz{width:calc(var(--u) * 60);}
.lv-title, .screen-title, .end-title{
  position:relative;
  font:calc(var(--u) * 40)/1 var(--FD);
  letter-spacing:.04em;
  margin:calc(var(--u) * -4) 0;
  color:#1a0302;
  text-shadow:0 var(--u) 0 #3a0703, 0 calc(var(--u) * 2) 0 #1a0201, 0 calc(var(--u) * 3) 0 #000,
    calc(var(--u) * 1.5) 0 0 #000, calc(var(--u) * -1.5) 0 0 #000, 0 calc(var(--u) * -1.5) 0 #000, 0 0 calc(var(--u) * 16) rgba(255,90,20,.4);
}
.lv-title::before, .screen-title::before, .end-title::before{
  content:attr(data-text); position:absolute; inset:0;
  color:transparent; text-shadow:none;
  -webkit-background-clip:text; background-clip:text;
  background-image:linear-gradient(180deg, #fff6d8 25%, #ffc068 40%, #e8601e 58%, #8a1606 78%);
}
.lv-sub{font:calc(var(--u) * 10)/1 var(--FT); letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); margin-top:calc(var(--u) * -2);}
.lv-sub b{color:var(--toxic);}
.cards{display:flex; gap:calc(var(--u) * 8); justify-content:center; align-items:stretch; width:100%;}
.card{
  --accent:var(--blood-hi);
  position:relative;
  flex:0 1 calc(var(--u) * 148);
  height:calc(var(--u) * 222);
  display:flex; flex-direction:column; align-items:center;
  padding:0 calc(var(--u) * 8) calc(var(--u) * 9);
  text-align:center;
  outline:none;
  animation:dealIn .28s cubic-bezier(.2,1.3,.4,1) backwards;
  transition:transform .1s;
}
.card:nth-child(2){animation-delay:.05s;} .card:nth-child(3){animation-delay:.1s;} .card:nth-child(4){animation-delay:.15s;}
@keyframes dealIn{from{opacity:0; transform:translateY(calc(var(--u) * 30)) rotate(-3deg);} to{opacity:1; transform:none;}}
.card.passive{--accent:#3d8ec9;}
.card.heal{--accent:#3bbf4a;}
.card.evo-ready{--accent:var(--gold);}
.card-band{
  align-self:stretch;
  margin:0 calc(var(--u) * -8);
  padding:calc(var(--u) * 4) 0 calc(var(--u) * 3);
  font:calc(var(--u) * 9)/1 var(--FD); letter-spacing:.12em; text-transform:uppercase;
  color:#fff; text-shadow:0 var(--u) 0 rgba(0,0,0,.8);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, white 15%), color-mix(in srgb, var(--accent) 60%, black 40%));
  box-shadow:inset 0 calc(var(--u) * -1) 0 rgba(0,0,0,.5);
}
.card .hotkey{
  position:absolute; left:calc(var(--u) * 5); top:calc(var(--u) * 19); margin:0;
}
.card .newtag{
  position:absolute; right:calc(var(--u) * -3); top:calc(var(--u) * 20);
  padding:calc(var(--u) * 2) calc(var(--u) * 5) calc(var(--u) * 1);
  font:calc(var(--u) * 9)/1 var(--FD); letter-spacing:.08em; color:#140c02;
  background:repeating-linear-gradient(-45deg, var(--hazard) 0 calc(var(--u) * 3), #f4c640 calc(var(--u) * 3) calc(var(--u) * 6));
  box-shadow:0 0 0 var(--u) #050404, calc(var(--u) * 2) calc(var(--u) * 2) 0 rgba(0,0,0,.5);
  transform:rotate(6deg);
}
.socket{
  position:relative;
  width:calc(var(--u) * 58); height:calc(var(--u) * 58);
  margin:calc(var(--u) * 12) 0 calc(var(--u) * 7);
  display:grid; place-items:center;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%), #0b0807;
  box-shadow:inset 0 0 0 var(--u) #050404, inset 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(0,0,0,.9), 0 0 0 calc(var(--u) * 2) #3a3b3e, 0 0 0 calc(var(--u) * 3) #0a0909, 0 calc(var(--u) * 1) 0 calc(var(--u) * 3) rgba(255,255,255,.1);
}
.socket canvas, .slot canvas, .mini-slot canvas, .evo-row canvas{display:block;}
.socket canvas{width:calc(var(--u) * 48); height:calc(var(--u) * 48); filter:drop-shadow(0 calc(var(--u) * 2) 0 rgba(0,0,0,.7));}
.cname{font:calc(var(--u) * 15)/1 var(--FD); letter-spacing:.03em; color:#fff1dc; text-transform:uppercase; text-shadow:0 var(--u) 0 #000;}
.pips{display:flex; gap:calc(var(--u) * 1.5); margin:calc(var(--u) * 5) 0 calc(var(--u) * 6); justify-content:center;}
.pips i{width:calc(var(--u) * 7); height:calc(var(--u) * 4); background:#1a1414; box-shadow:inset 0 0 0 calc(var(--u) * .7) #3a2e2a;}
.pips i.on{background:linear-gradient(#ff9a6a, var(--blood-hi)); box-shadow:inset 0 0 0 calc(var(--u) * .7) #4a0a04;}
.pips i.next{background:linear-gradient(#fff3c0, var(--gold)); box-shadow:0 0 calc(var(--u) * 4) rgba(255,210,90,.8); animation:pip .7s ease-in-out infinite alternate;}
.passive .pips i.on{background:linear-gradient(#bfe8ff, #3d8ec9); box-shadow:inset 0 0 0 calc(var(--u) * .7) #0a2a4a;}
@keyframes pip{to{opacity:.45;}}
.cdesc{font:calc(var(--u) * 10)/1.2 var(--FT); color:var(--bone); max-width:calc(var(--u) * 130); min-height:0; flex:0 1 auto; overflow-y:auto; overscroll-behavior:contain;}
.card > :not(.cdesc){flex-shrink:0;}
.cdesc .up{font:calc(var(--u) * 11)/1.3 var(--FT); color:var(--bone); letter-spacing:.02em;}
.cdesc .up b, .inspector .up b{font:calc(var(--u) * 12)/1 var(--FD); color:var(--gold); font-weight:normal; letter-spacing:.03em;}
.cdesc .lead{margin-bottom:calc(var(--u) * 4);}
.cdesc .evo-line{margin-top:calc(var(--u) * 5); font:calc(var(--u) * 9)/1.2 var(--FD); letter-spacing:.06em; color:var(--gold); text-shadow:0 0 calc(var(--u) * 6) rgba(255,190,60,.6);}
.cdesc .evo-line.dim{color:var(--bone-dim); text-shadow:none;}
.inspector .wstats{display:flex; flex-wrap:wrap; gap:calc(var(--u) * 1) calc(var(--u) * 8); margin-top:calc(var(--u) * 4);}
.inspector .up{font:calc(var(--u) * 9.5)/1.2 var(--FT); color:var(--bone);}
.inspector .wnext{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 calc(var(--u) * 6); margin-top:calc(var(--u) * 4); font:calc(var(--u) * 9)/1.2 var(--FD); color:var(--ember); letter-spacing:.06em;}
.cflavor{margin-top:auto; padding-top:calc(var(--u) * 6); font:calc(var(--u) * 8.5)/1.15 var(--FT); color:#9a7f69;}
.card:hover, .card:focus-visible{transform:translateY(calc(var(--u) * -4));}
.card:hover::after, .card:focus-visible::after{
  content:""; position:absolute; inset:calc(var(--u) * -1); pointer-events:none;
  box-shadow:0 0 0 calc(var(--u) * 1.5) var(--gold), 0 0 calc(var(--u) * 14) rgba(255,140,40,.5);
}
.card:active{transform:translateY(calc(var(--u) * -1)) scale(.98);}
.lv-actions{display:flex; gap:calc(var(--u) * 6);}

/* =============================================== shared screen header */
.screen-head{display:flex; align-items:center; gap:calc(var(--u) * 8);}
.screen-head .hazard{width:calc(var(--u) * 70);}
.screen-title{font-size:calc(var(--u) * 34);}
.run-strip{display:flex; gap:calc(var(--u) * 14); font:calc(var(--u) * 10)/1 var(--FT); color:var(--bone-dim); letter-spacing:.06em; text-transform:uppercase; margin-top:calc(var(--u) * -3);}
.run-strip b{font:calc(var(--u) * 13)/1 var(--FD); color:var(--bone); margin-left:calc(var(--u) * 3);}

/* =============================================== PAUSE */
.pause-body{display:flex; gap:calc(var(--u) * 10); align-items:stretch;}
.build-panel{width:calc(var(--u) * 282); display:flex; flex-direction:column;}
.stats-panel{width:calc(var(--u) * 226); display:flex; flex-direction:column;}
.stats-panel .stat-rows{flex:1; justify-content:space-around;}
.slots{display:grid; grid-template-columns:repeat(6, calc(var(--u) * 40)); gap:calc(var(--u) * 4); margin:0 0 calc(var(--u) * 8) calc(var(--u) * 3);}
.slot{
  position:relative;
  width:calc(var(--u) * 40); height:calc(var(--u) * 40);
  display:grid; place-items:center;
  background:#0b0807;
  box-shadow:inset 0 0 0 var(--u) #050404, inset 0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(0,0,0,.9), 0 0 0 calc(var(--u) * 2) #3c3d40, 0 0 0 calc(var(--u) * 3) #070606;
  outline:none;
}
.slot canvas{width:calc(var(--u) * 30); height:calc(var(--u) * 30); margin-top:calc(var(--u) * -4);}
.slot .lv{position:absolute; left:calc(var(--u) * 3); right:calc(var(--u) * 3); bottom:calc(var(--u) * 3); display:flex; gap:calc(var(--u) * .8);}
.slot .lv i{flex:1; height:calc(var(--u) * 3); background:#2a201c;}
.slot .lv i.on{background:var(--blood-hi); box-shadow:0 calc(var(--u) * -.6) 0 #ff8a5a inset;}
.slots-sm .slot .lv i.on{background:#3d8ec9; box-shadow:0 calc(var(--u) * -.6) 0 #bfe8ff inset;}
.slot.empty{background:repeating-linear-gradient(-45deg, #0d0a09 0 calc(var(--u) * 3), #090706 calc(var(--u) * 3) calc(var(--u) * 6));}
.slot.empty::after{content:""; width:calc(var(--u) * 10); height:calc(var(--u) * 9); background:var(--skull-dim) center / contain no-repeat; opacity:.6;}
.slot.evolved{box-shadow:inset 0 0 0 var(--u) #050404, inset 0 0 calc(var(--u) * 10) rgba(255,190,60,.35), 0 0 0 calc(var(--u) * 2) #c79a2a, 0 0 0 calc(var(--u) * 3) #070606;}
.slot.evolved .lv i.on{background:var(--gold);}
.slot.ready{animation:readyGlow 1s ease-in-out infinite alternate;}
@keyframes readyGlow{from{box-shadow:inset 0 0 0 var(--u) #050404, 0 0 0 calc(var(--u) * 2) #8a6a1a, 0 0 0 calc(var(--u) * 3) #070606;} to{box-shadow:inset 0 0 0 var(--u) #050404, 0 0 0 calc(var(--u) * 2) var(--gold), 0 0 calc(var(--u) * 10) calc(var(--u) * 2) rgba(255,190,60,.55);}}
.slot:hover, .slot:focus-visible, .slot.sel{box-shadow:inset 0 0 0 var(--u) #050404, inset 0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(0,0,0,.9), 0 0 0 calc(var(--u) * 2) var(--ember), 0 0 0 calc(var(--u) * 3) #070606;}
/* fixed box: hovering a slot must never resize the panel; long entries scroll inside */
.inspector{flex:1 0 auto; height:calc(var(--u) * 88); margin:calc(var(--u) * 2) calc(var(--u) * 3) 0; padding:calc(var(--u) * 6) calc(var(--u) * 8); text-align:left; overflow-y:auto; overscroll-behavior:contain;}
.inspector h4{font:calc(var(--u) * 13)/1 var(--FD); color:#fff1dc; letter-spacing:.03em; text-transform:uppercase; display:flex; justify-content:space-between;}
.inspector h4 span{color:var(--ember);}
.inspector p{font:calc(var(--u) * 9.5)/1.2 var(--FT); color:var(--bone); margin-top:calc(var(--u) * 3);}
.inspector .evo{color:var(--gold); margin-top:calc(var(--u) * 3);}
.inspector .evo.dim{color:#8a7766;}
.stat-rows{display:flex; flex-direction:column; gap:calc(var(--u) * 3.2); margin:0 calc(var(--u) * 3);}
.stat{display:grid; grid-template-columns:calc(var(--u) * 62) 1fr calc(var(--u) * 42); align-items:center; gap:calc(var(--u) * 6);}
.stat-l{font:calc(var(--u) * 10)/1 var(--FT); letter-spacing:.06em; color:var(--bone-dim); text-transform:uppercase;}
.stat-v{font:calc(var(--u) * 12)/1 var(--FD); color:var(--bone); text-align:right;}
.stat.hot .stat-v{color:#ffcf9a;}
.stat-bar{display:flex; gap:calc(var(--u) * 1.2); height:calc(var(--u) * 7); padding:calc(var(--u) * 1); background:#060404; box-shadow:inset 0 0 0 var(--u) #000, 0 var(--u) 0 rgba(255,255,255,.07);}
.stat-bar i{flex:1; background:#1d1513;}
.stat-bar i.on{background:linear-gradient(#ffb26a, #d8361a 60%, #8a1206);}
.stat-bar i.max{background:linear-gradient(#fff3c0, var(--gold));}

/* =============================================== END SCREENS */
.end-screen{gap:calc(var(--u) * 6); padding-top:calc(var(--u) * 10);}
#gameover{background:radial-gradient(ellipse at 50% 30%, rgba(140,8,4,.45), transparent 60%), linear-gradient(rgba(10,1,1,.82), rgba(4,1,1,.94));}
.end-title{font-size:calc(var(--u) * 64); margin:calc(var(--u) * -8) 0;}
.end-title.dead{isolation:isolate; animation:deathIn 1.1s cubic-bezier(.2,.8,.2,1) both; text-shadow:0 calc(var(--u) * 2) 0 #000, calc(var(--u) * 2) 0 0 #000, calc(var(--u) * -2) 0 0 #000, 0 calc(var(--u) * -1) 0 #000, 0 0 calc(var(--u) * 26) rgba(200,10,5,.7);}
.end-title.dead::before{background-image:linear-gradient(180deg, #ff7a5a 25%, #d0180a 45%, #7a0503 65%, #3a0201 80%);}
.end-title.dead::after{
  /* drips */
  /* tucked behind the letters so the blood seeps out from under the baseline */
  content:""; position:absolute; left:2%; right:2%; top:72%; height:calc(var(--u) * 30); pointer-events:none; z-index:-1;
  background:var(--blood-smear) center top / 100% 100% no-repeat;
  animation:drip 1.6s .5s ease-in both;
  transform-origin:top;
}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes drip{from{transform:scaleY(.1); opacity:0;} 30%{opacity:1;} to{transform:none;}}
@keyframes deathIn{from{opacity:0; transform:scale(1.5); letter-spacing:.3em;} to{opacity:1; transform:none;}}
.end-title.win{animation:logoSlam .6s cubic-bezier(.2,1.6,.4,1) both; text-shadow:0 calc(var(--u) * 2) 0 #000, calc(var(--u) * 2) 0 0 #000, calc(var(--u) * -2) 0 0 #000, 0 0 calc(var(--u) * 26) rgba(255,190,60,.55);}
.end-title.win::before{background-image:linear-gradient(180deg, #fffbe0 25%, #ffd35a 42%, #e88a1a 62%, #8a3a06 80%);}
.victory-rays{
  position:absolute; inset:-40%; z-index:-1; pointer-events:none; animation:spin 90s linear infinite;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,200,90,.12) 0 6deg, transparent 6deg 18deg);
  mask-image:radial-gradient(circle, #000 10%, transparent 55%);
  -webkit-mask-image:radial-gradient(circle, #000 10%, transparent 55%);
}
#victory{background:radial-gradient(ellipse at 50% 35%, rgba(150,90,10,.3), transparent 60%), linear-gradient(rgba(8,5,2,.8), rgba(4,2,1,.93)); overflow:hidden; isolation:isolate;}
.end-sub{font:calc(var(--u) * 11)/1 var(--FT); letter-spacing:.08em; color:#c7a184; margin-top:calc(var(--u) * 4); position:relative; z-index:1; text-shadow:0 var(--u) 0 #000, 0 0 calc(var(--u) * 4) #000;}
#gameover .end-sub{margin-top:calc(var(--u) * 16);}
.end-body{display:flex; gap:calc(var(--u) * 10); align-items:stretch; margin-top:calc(var(--u) * 6);}
/* min-height = the tallest common rank state (name form + top 5), so submitting never resizes the screen */
.report{width:calc(var(--u) * 268); min-height:calc(var(--u) * 168); display:flex; flex-direction:column;}
.rank-panel{width:calc(var(--u) * 268); min-height:calc(var(--u) * 168); display:flex; flex-direction:column;}
.big-stats{display:grid; grid-template-columns:repeat(4, 1fr); gap:calc(var(--u) * 4); margin:0 calc(var(--u) * 3);}
.big-stat{padding:calc(var(--u) * 5) 0 calc(var(--u) * 4); text-align:center;}
.big-stat .v{font:calc(var(--u) * 19)/1 var(--FD); color:#fff1dc;}
.big-stat .l{font:calc(var(--u) * 8)/1 var(--FT); color:var(--bone-dim); letter-spacing:.1em; text-transform:uppercase; margin-top:calc(var(--u) * 2);}
.score-line{display:flex; justify-content:space-between; align-items:baseline; margin:calc(var(--u) * 7) calc(var(--u) * 3) 0; padding:calc(var(--u) * 5) calc(var(--u) * 8);}
.score-line .l{font:calc(var(--u) * 10)/1 var(--FT); letter-spacing:.1em; text-transform:uppercase; color:var(--ember);}
.score-line .v{font:calc(var(--u) * 24)/1 var(--FD); color:var(--gold); text-shadow:0 0 calc(var(--u) * 8) rgba(255,180,60,.4);}
.score-line .new{font:calc(var(--u) * 9)/1 var(--FD); color:#140c02; background:var(--gold); padding:calc(var(--u) * 1.5) calc(var(--u) * 4) 0; margin-left:calc(var(--u) * 6); animation:pip .5s infinite alternate;}
.mini-slots{display:flex; gap:calc(var(--u) * 2); margin:calc(var(--u) * 8) calc(var(--u) * 3) 0; flex-wrap:nowrap;}
.mini-slot{position:relative; flex:0 0 auto; width:calc(var(--u) * 17); height:calc(var(--u) * 17); display:grid; place-items:center; background:#0b0807; box-shadow:inset 0 0 0 var(--u) #050404, 0 0 0 var(--u) #3c3d40;}
.mini-slot canvas{width:calc(var(--u) * 14); height:calc(var(--u) * 14);}
.mini-slot b{position:absolute; right:calc(var(--u) * -1); bottom:calc(var(--u) * -2); font:calc(var(--u) * 8)/1 var(--FD); color:var(--ember); text-shadow:0 0 var(--u) #000, var(--u) var(--u) 0 #000;}
.mini-slot.evolved{box-shadow:inset 0 0 0 var(--u) #050404, 0 0 0 var(--u) var(--gold);}
.mini-gap{width:calc(var(--u) * 6);}
.end-best{margin:auto calc(var(--u) * 3) 0; padding-top:calc(var(--u) * 7); font:calc(var(--u) * 9)/1.1 var(--FT); color:#8a7766; letter-spacing:.04em;}

/* leaderboard block on end screens */
.name-form{display:flex; gap:calc(var(--u) * 5); margin:0 calc(var(--u) * 3);}
.name-input{
  flex:1; min-width:0;
  height:calc(var(--u) * 21);
  padding:calc(var(--u) * 2) calc(var(--u) * 6) 0;
  font:calc(var(--u) * 13)/1 var(--FD); letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); caret-color:var(--hell);
  background:#060404; border:0; outline:none;
  box-shadow:inset 0 0 0 var(--u) #000, inset 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0,0,0,.9), 0 0 0 var(--u) #3c3d40;
  user-select:text; -webkit-user-select:text;
}
.name-input:focus{box-shadow:inset 0 0 0 var(--u) #000, 0 0 0 var(--u) var(--ember), 0 0 calc(var(--u) * 8) rgba(255,140,40,.35);}
.name-input::placeholder{color:#4a3a30;}
.name-form .btn{min-height:calc(var(--u) * 21); font-size:calc(var(--u) * 11); padding:calc(var(--u) * 2) calc(var(--u) * 10) 0;}
.rank-msg{margin:calc(var(--u) * 6) calc(var(--u) * 3) 0; font:calc(var(--u) * 9.5)/1.2 var(--FT); color:var(--bone-dim);}
.rank-msg.err{color:#ff8a6a;}
.rank-big{display:flex; align-items:baseline; gap:calc(var(--u) * 8); margin:0 calc(var(--u) * 4) calc(var(--u) * 4);}
.rank-big .v{font:calc(var(--u) * 30)/1 var(--FD); color:var(--gold); text-shadow:0 0 calc(var(--u) * 10) rgba(255,190,60,.45);}
.rank-big .pb{font:calc(var(--u) * 9)/1 var(--FD); color:#140c02; background:var(--gold); padding:calc(var(--u) * 1.5) calc(var(--u) * 4) 0; margin-left:auto;}
.rank-big .l{font:calc(var(--u) * 10)/1 var(--FT); color:var(--bone-dim); letter-spacing:.08em; text-transform:uppercase;}
.rank-panel .board-rows{margin:calc(var(--u) * 4) calc(var(--u) * 3) 0; flex:1; padding:calc(var(--u) * 4);}

/* =============================================== LEADERBOARD */
.board-panel{width:calc(var(--u) * 470); padding-top:calc(var(--u) * 8);}
.tabs{display:flex; gap:calc(var(--u) * 3); margin:0 calc(var(--u) * 3);}
.tab{
  flex:1; padding:calc(var(--u) * 5) 0 calc(var(--u) * 3);
  font:calc(var(--u) * 11)/1 var(--FD); letter-spacing:.06em; text-transform:uppercase;
  color:var(--bone-dim);
  background:linear-gradient(#2a2b2e, #151517);
  box-shadow:inset 0 var(--u) 0 rgba(255,255,255,.12), inset 0 0 0 var(--u) #0a0909;
  clip-path:polygon(calc(var(--u) * 5) 0, calc(100% - calc(var(--u) * 5)) 0, 100% 100%, 0 100%);
  outline:none;
}
.tab:hover, .tab:focus-visible{color:var(--bone);}
.tab.active{color:#fff1dc; background:linear-gradient(#a8200e, #4a0603); box-shadow:inset 0 var(--u) 0 rgba(255,200,150,.45), inset 0 0 0 var(--u) #1c0201;}
.board-list{height:calc(var(--u) * 206); margin:0 calc(var(--u) * 3); padding:calc(var(--u) * 5) calc(var(--u) * 6); overflow-y:auto;}
.board-rows{display:flex; flex-direction:column;}
.brow{
  display:grid; grid-template-columns:calc(var(--u) * 26) calc(var(--u) * 14) 1fr calc(var(--u) * 62) calc(var(--u) * 40) calc(var(--u) * 42) calc(var(--u) * 26);
  align-items:center; gap:calc(var(--u) * 4);
  height:calc(var(--u) * 15);
  font:calc(var(--u) * 10)/1 var(--FT); color:var(--ember);
  padding:0 calc(var(--u) * 3);
}
.brow:nth-child(even){background:rgba(255,160,60,.04);}
.brow.head{color:#7a6050; font-size:calc(var(--u) * 8); letter-spacing:.1em; text-transform:uppercase; height:calc(var(--u) * 12); background:none;}
.brow .rk{font-family:var(--FD); font-size:calc(var(--u) * 12); color:var(--bone-dim); text-align:right;}
.brow .nm{color:var(--bone); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--FD); font-size:calc(var(--u) * 11.5); letter-spacing:.04em;}
.brow .sc{color:var(--gold); text-align:right; font-family:var(--FD); font-size:calc(var(--u) * 12);}
.brow .num{text-align:right;}
.brow .won{width:calc(var(--u) * 9); height:calc(var(--u) * 8); background:var(--skull-gold) center / contain no-repeat;}
.brow.r1 .rk{color:var(--gold);} .brow.r2 .rk{color:#d8dde2;} .brow.r3 .rk{color:#d88a4a;}
.brow.me{background:linear-gradient(90deg, rgba(216,35,15,.45), rgba(216,35,15,.1)); box-shadow:inset calc(var(--u) * 2) 0 0 var(--hell);}
.brow.me .nm{color:#fff;}
.brow.gap{height:calc(var(--u) * 8); justify-content:center; display:flex; color:#4a3a30; background:none;}
.rank-panel .brow{grid-template-columns:calc(var(--u) * 24) 1fr calc(var(--u) * 56) calc(var(--u) * 36);}
.board-empty{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--u) * 5); font:calc(var(--u) * 11)/1.25 var(--FT); color:var(--ember); text-align:center;}
.off-skull{width:calc(var(--u) * 27); height:calc(var(--u) * 24); background:var(--skull-dim) center / contain no-repeat; margin-bottom:calc(var(--u) * 2);}
.board-empty b{font:calc(var(--u) * 16)/1 var(--FD); color:var(--bone);}
.board-empty .blink{animation:pip .5s steps(2) infinite;}

/* =============================================== SETTINGS */
.settings-panel{width:calc(var(--u) * 340); display:flex; flex-direction:column; gap:calc(var(--u) * 6); padding:calc(var(--u) * 12) calc(var(--u) * 14);}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:calc(var(--u) * 10); min-height:calc(var(--u) * 20);}
.set-label{font:calc(var(--u) * 12)/1 var(--FD); letter-spacing:.05em; text-transform:uppercase; color:var(--bone);}
.seg{display:flex; gap:calc(var(--u) * 2); padding:calc(var(--u) * 2); background:#060404; box-shadow:inset 0 0 0 var(--u) #000, 0 var(--u) 0 rgba(255,255,255,.08);}
.seg button{
  min-width:calc(var(--u) * 46); height:calc(var(--u) * 16); padding:calc(var(--u) * 2) calc(var(--u) * 6) 0;
  font:calc(var(--u) * 10)/1 var(--FD); letter-spacing:.06em; text-transform:uppercase;
  color:#8a7766; background:#151313; outline:none;
}
.seg button:hover, .seg button:focus-visible{color:var(--bone); background:#262222;}
.seg button:focus-visible{box-shadow:inset 0 0 0 var(--u) var(--gold);}
.seg button.on{color:#fff1dc; background:linear-gradient(#c22a12, #5a0704); box-shadow:inset 0 var(--u) 0 rgba(255,200,150,.45);}
.range{display:flex; align-items:center; gap:calc(var(--u) * 6);}
.range-val{width:calc(var(--u) * 22); text-align:right; font:calc(var(--u) * 12)/1 var(--FD); color:var(--gold);}
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:calc(var(--u) * 150); height:calc(var(--u) * 12);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--u) * 6.5), #060404 calc(var(--u) * 6.5) calc(var(--u) * 7.5)),
    linear-gradient(90deg, #d8361a 0, #ffb26a var(--val, 50%), #1d1513 var(--val, 50%));
  box-shadow:inset 0 0 0 calc(var(--u) * 2) #060404, 0 var(--u) 0 rgba(255,255,255,.08), 0 0 0 var(--u) #000;
  outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:calc(var(--u) * 8); height:calc(var(--u) * 16);
  background:linear-gradient(90deg, #9aa0a6, #4a4d52); box-shadow:0 0 0 var(--u) #050404, inset 0 var(--u) 0 #fff8;
}
input[type=range]::-moz-range-thumb{width:calc(var(--u) * 8); height:calc(var(--u) * 16); border:0; border-radius:0; background:linear-gradient(90deg, #9aa0a6, #4a4d52); box-shadow:0 0 0 var(--u) #050404;}
input[type=range]:focus-visible{box-shadow:inset 0 0 0 calc(var(--u) * 2) #060404, 0 0 0 var(--u) var(--gold);}

/* =============================================== FIELD MANUAL */
.help-body{display:flex; gap:calc(var(--u) * 10); align-items:stretch;}
.help-panel{width:calc(var(--u) * 256); display:flex; flex-direction:column; gap:calc(var(--u) * 4);}
.help-panel p{font:calc(var(--u) * 10)/1.25 var(--FT); color:var(--bone); margin:0 calc(var(--u) * 4) calc(var(--u) * 4);}
.help-panel p b{color:var(--gold);}
.keys{list-style:none; display:flex; flex-direction:column; gap:calc(var(--u) * 4); margin:0 calc(var(--u) * 4);}
.keys li{display:flex; align-items:center; font:calc(var(--u) * 10)/1 var(--FT); color:var(--bone-dim);}
.keys kbd{margin:0 calc(var(--u) * 3) 0 0;}
.keys span{margin:0 calc(var(--u) * 8) 0 calc(var(--u) * 3);}
.evo-list{display:flex; flex-direction:column; gap:calc(var(--u) * 3); margin:0 calc(var(--u) * 3);}
.evo-row{display:flex; align-items:center; gap:calc(var(--u) * 3); padding:calc(var(--u) * 2) calc(var(--u) * 4); font:calc(var(--u) * 10)/1 var(--FT); color:var(--bone-dim);}
.evo-row canvas{width:calc(var(--u) * 20); height:calc(var(--u) * 20); background:#0b0807; box-shadow:0 0 0 var(--u) #3c3d40;}
.evo-row .op{font:calc(var(--u) * 12)/1 var(--FD); color:var(--ember); width:calc(var(--u) * 8); text-align:center;}
.evo-row .evo-name{margin-left:calc(var(--u) * 4); font:calc(var(--u) * 11)/1 var(--FD); color:var(--gold); letter-spacing:.03em; text-transform:uppercase;}
.evo-row canvas.evo-ic{box-shadow:0 0 0 var(--u) var(--gold), 0 0 calc(var(--u) * 6) rgba(255,190,60,.4);}

/* report tabs + ARSENAL REPORT (end screens) */
.report-tabs{display:flex; gap:calc(var(--u) * 3); margin:calc(var(--u) * -2) calc(var(--u) * 3) calc(var(--u) * 5);}
.rtab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:calc(var(--u) * 2);
  padding:calc(var(--u) * 4) 0 calc(var(--u) * 2);
  font:calc(var(--u) * 10.5)/1 var(--FD); letter-spacing:.06em; text-transform:uppercase; color:var(--bone-dim);
  background:linear-gradient(#2a2b2e, #151517);
  box-shadow:inset 0 var(--u) 0 rgba(255,255,255,.12), inset 0 0 0 var(--u) #0a0909;
  clip-path:polygon(calc(var(--u) * 5) 0, calc(100% - calc(var(--u) * 5)) 0, 100% 100%, 0 100%);
  outline:none;
}
.rtab kbd{margin-left:calc(var(--u) * 3); height:calc(var(--u) * 8); min-width:calc(var(--u) * 9); font-size:calc(var(--u) * 7);}
.rtab:hover, .rtab:focus-visible{color:var(--bone);}
.rtab.active{color:#fff1dc; background:linear-gradient(#a8200e, #4a0603); box-shadow:inset 0 var(--u) 0 rgba(255,200,150,.45), inset 0 0 0 var(--u) #1c0201;}
.rpane{display:flex; flex-direction:column; flex:1; min-height:0;}
.rpane.hidden{display:none;}
.mini-slots{cursor:pointer;}
.arsenal{margin:0 calc(var(--u) * 1);}
.ars-head, .ars-row{
  display:grid; align-items:center; column-gap:calc(var(--u) * 3);
  grid-template-columns:minmax(0, 1fr) calc(var(--u) * 64) calc(var(--u) * 30) calc(var(--u) * 28) calc(var(--u) * 24);
}
.ars-head{padding:0 calc(var(--u) * 3) calc(var(--u) * 2); font:calc(var(--u) * 7.5)/1 var(--FT); letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim); box-shadow:0 var(--u) 0 rgba(255,179,71,.25);}
.ars-head > :nth-child(n+3){text-align:right;}
.ars-head > :nth-child(3){color:var(--gold);}
.ars-rows{max-height:calc(var(--u) * 112); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; padding-top:calc(var(--u) * 2);}
.ars-row{min-height:calc(var(--u) * 15); padding:calc(var(--u) * 1) calc(var(--u) * 3); font:calc(var(--u) * 9)/1 var(--FT); color:var(--bone);}
.ars-row:nth-child(odd){background:rgba(255,255,255,.025);}
.ars-row:first-child{background:linear-gradient(90deg, rgba(200,30,10,.22), transparent 70%);}
.ars-w{display:flex; align-items:center; gap:calc(var(--u) * 3); min-width:0;}
.ars-ic{flex:0 0 auto; width:calc(var(--u) * 13); height:calc(var(--u) * 13); display:grid; place-items:center; background:#0b0807; box-shadow:inset 0 0 0 var(--u) #050404, 0 0 0 var(--u) #3c3d40;}
.ars-ic canvas{width:calc(var(--u) * 11); height:calc(var(--u) * 11); display:block;}
.ars-n{display:grid; grid-template-columns:minmax(0, max-content) auto; justify-content:start; align-items:baseline; column-gap:calc(var(--u) * 3); min-width:0; line-height:1.05;}
.ars-n b{font:calc(var(--u) * 9)/1 var(--FD); letter-spacing:.03em; text-transform:uppercase; color:#fff1dc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.ars-n em{font:calc(var(--u) * 8)/1 var(--FD); font-style:normal; color:var(--ember);}
.ars-n small{grid-column:1 / -1; contain:inline-size; font:calc(var(--u) * 7)/1.1 var(--FT); letter-spacing:.04em; color:#8a7766; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ars-row.evo .ars-ic, .ars-row.union .ars-ic{box-shadow:inset 0 0 0 var(--u) #050404, 0 0 0 var(--u) var(--gold), 0 0 calc(var(--u) * 5) rgba(255,190,60,.35);}
.ars-row.evo .ars-n b, .ars-row.evo .ars-n em{color:var(--gold);}
.ars-row.union .ars-n b, .ars-row.union .ars-n em{color:#ffb347;}
.ars-row.gone{opacity:.62;}
.ars-d{display:flex; align-items:center; gap:calc(var(--u) * 3);}
.ars-bar{flex:1; height:calc(var(--u) * 5); padding:calc(var(--u) * .7); background:#060404; box-shadow:inset 0 0 0 calc(var(--u) * .7) #000, 0 calc(var(--u) * .7) 0 rgba(255,255,255,.06);}
.ars-bar i{display:block; height:100%; background:linear-gradient(#ffb26a, #d8361a 60%, #8a1206);}
.ars-row:first-child .ars-bar i{background:linear-gradient(#fff3c0, var(--gold) 50%, #c8701a);}
.ars-d b{min-width:calc(var(--u) * 24); text-align:right; font:calc(var(--u) * 9)/1 var(--FD); color:#fff1dc;}
.ars-dps{text-align:right; font:calc(var(--u) * 10)/1 var(--FD); color:var(--gold); text-shadow:0 0 calc(var(--u) * 4) rgba(255,180,60,.35);}
.ars-dps.top{color:#fff; text-shadow:0 0 calc(var(--u) * 5) rgba(255,90,30,.9), 0 calc(var(--u) * .7) 0 #000;}
.ars-k, .ars-t{text-align:right; color:var(--bone-dim);}
.ars-empty{padding:calc(var(--u) * 12) calc(var(--u) * 4); text-align:center; color:var(--bone-dim); font:calc(var(--u) * 9.5)/1.2 var(--FT);}
.ars-foot{margin-top:auto; padding-top:calc(var(--u) * 5); display:flex; align-items:center; gap:calc(var(--u) * 6); flex-wrap:wrap;}
.ars-pass{display:flex; gap:calc(var(--u) * 2); flex-wrap:wrap;}
.ars-pass .mini-slot{width:calc(var(--u) * 14); height:calc(var(--u) * 14);}
.ars-pass .mini-slot canvas{width:calc(var(--u) * 11); height:calc(var(--u) * 11);}
.ars-env{margin-left:auto; font:calc(var(--u) * 7.5)/1.1 var(--FT); letter-spacing:.04em; color:#8a7766; text-transform:uppercase;}

/* =============================================== motion & small screens */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation-duration:.01s !important; animation-iteration-count:1 !important; transition:none !important;}
}
@media (max-height:500px){
  #cabinet{padding:0;}
  #screen{border-radius:0; box-shadow:none; --pad:0px;}
}

/* ---------------- arsenal: banish, curse/pair cards, two-column evolution manual */
#banishBtn.armed{color:#fff; background:linear-gradient(180deg, #6a0b06, #300302); box-shadow:inset 0 0 0 var(--u) var(--blood-hi), 0 0 calc(var(--u) * 8) rgba(255,40,20,.45);}
#levelup.banishing .card{--accent:#ff2a1a; filter:saturate(.55) brightness(.85);}
#levelup.banishing .card:hover, #levelup.banishing .card:focus-visible{filter:none;}
#levelup.banishing .card::before{content:attr(data-banish); white-space:nowrap; position:absolute; inset:auto; width:auto; height:auto; left:50%; top:24%; z-index:3; padding:calc(var(--u) * 3) calc(var(--u) * 6) calc(var(--u) * 1); border:calc(var(--u) * 2) solid #ff3a1a; background:rgba(20,2,0,.55); translate:-50% 0; text-align:center; font:calc(var(--u) * 20)/1 var(--FD); letter-spacing:.08em; color:#ff3a1a; text-shadow:0 0 calc(var(--u) * 8) rgba(255,30,10,.8), 0 calc(var(--u) * 1) 0 #000; transform:rotate(-8deg); pointer-events:none;}
.card.curse{--accent:#c0140c;}
.card.curse .cdesc{color:#ff7a5a;}
.card.pair{box-shadow:0 0 calc(var(--u) * 7) rgba(90,170,255,.45);}
.evo-panel{width:calc(var(--u) * 340);}
.evo-panel .evo-list{display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--u) * 1) calc(var(--u) * 6); max-height:calc(var(--u) * 200); overflow-y:auto; overscroll-behavior:contain;}
.evo-panel .evo-row{padding:calc(var(--u) * 1) calc(var(--u) * 2); gap:calc(var(--u) * 2); min-width:0;}
.evo-panel .evo-row canvas{width:calc(var(--u) * 15); height:calc(var(--u) * 15); flex:0 0 auto;}
.evo-panel .evo-row .op{width:calc(var(--u) * 5); font-size:calc(var(--u) * 9);}
.evo-panel .evo-row .evo-name{margin-left:calc(var(--u) * 2); font-size:calc(var(--u) * 8.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.evo-panel .evo-head{grid-column:1 / -1; margin-top:calc(var(--u) * 3); font:calc(var(--u) * 9)/1.2 var(--FT); color:#ff9a3a;}
.evo-panel .evo-row.union .evo-name{color:#ffb347;}

/* =============================================== MOBILE: orientation-aware layout
   main.js sizes #screen to the view (640x360 landscape, ~340x680 portrait) and sets
   html[data-orient]. Portrait overlays are authored on a 320-unit-wide grid. */
html, body{overscroll-behavior:none;}
body{position:fixed; inset:0;}
#screen{--hu:calc(100cqw / var(--gw, 640));}
html[data-orient=portrait] #ui{--u:calc(100cqw / 320);}
@media (pointer:coarse){
  #cabinet{padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);}
  #screen{border-radius:0; box-shadow:none;}
}
/* pause button: placed in HUD units, beside the timer; invisible margin grows the hit area to ~48px */
@media (pointer:coarse){
  .corner-btn{right:calc(var(--hu) * 5); top:calc(var(--hu) * 10); width:calc(var(--hu) * 26); height:calc(var(--hu) * 26); opacity:.85;}
  .corner-btn i{inset:calc(var(--hu) * 7.5) calc(var(--hu) * 8);}
  .corner-btn::after{content:""; position:absolute; inset:-10px;}
  .corner-btn{clip-path:none; overflow:visible;}
}
html[data-orient=portrait] .corner-btn{right:calc(var(--hu) * 5); top:calc(var(--hu) * 11); width:calc(var(--hu) * 30); height:calc(var(--hu) * 30);}
html[data-orient=portrait] .corner-btn i{inset:calc(var(--hu) * 9) calc(var(--hu) * 9.5);}

/* ---------- touch: no sticky hover, kbd hints off, 44px targets */
@media (hover:none){
  .btn:hover{filter:none; transform:none;}
  .card:hover{transform:none;}
  .card:hover::after{content:none;}
  .btn:active{filter:brightness(1.25);}
}
@media (pointer:coarse){
  kbd{display:none !important;}
  .touch-only kbd{display:inline-flex !important;}
  .btn{min-height:max(44px, calc(var(--u) * 21));}
  .btn-sm{min-height:max(44px, calc(var(--u) * 17));}
  .menu-row .btn{min-height:max(44px, calc(var(--u) * 18));}
  .name-form .btn, .name-input{min-height:max(44px, calc(var(--u) * 21));}
  .name-input{font-size:max(16px, calc(var(--u) * 13));}   /* >=16px: iOS does not zoom the page on focus */
  .diff-arrow{min-width:max(44px, calc(var(--u) * 22));}
  .tab{min-height:max(40px, calc(var(--u) * 20));}
  .seg button{min-height:max(40px, calc(var(--u) * 16)); min-width:max(52px, calc(var(--u) * 46));}
  /* fat slider: tall track and thumb so a thumb can actually grab it */
  input[type=range]{height:max(28px, calc(var(--u) * 16));}
  input[type=range]::-webkit-slider-thumb{width:max(22px, calc(var(--u) * 12)); height:max(40px, calc(var(--u) * 26));}
  input[type=range]::-moz-range-thumb{width:max(22px, calc(var(--u) * 12)); height:max(40px, calc(var(--u) * 26));}
  .set-row{min-height:max(44px, calc(var(--u) * 20));}
  .slot{touch-action:manipulation;}
  .inspector, .board-list, .cdesc, .overlay{-webkit-overflow-scrolling:touch;}
}

/* ---------- landscape phones: only ~390px tall, trim vertical rhythm */
@media (pointer:coarse) and (max-height:500px) and (orientation:landscape){
  #title{padding-top:calc(var(--u) * 14); gap:calc(var(--u) * 4);}
  .logo-doom{font-size:calc(var(--u) * 112); margin-bottom:calc(var(--u) * -10);}
  .logo::after{top:calc(var(--u) * 66);}
  .menu{gap:calc(var(--u) * 5); margin-top:calc(var(--u) * 4);}
  .btn-big{min-height:max(44px, calc(var(--u) * 28));}
  #levelup{gap:calc(var(--u) * 4); padding-top:calc(var(--u) * 6); padding-bottom:calc(var(--u) * 6);}
  .lv-title{font-size:calc(var(--u) * 32);}
  .card{height:calc(var(--u) * 212);}
  .socket{margin:calc(var(--u) * 8) 0 calc(var(--u) * 5);}
  .overlay{padding-top:calc(var(--u) * 8); padding-bottom:calc(var(--u) * 8); gap:calc(var(--u) * 5);}
  .screen-title{font-size:calc(var(--u) * 28);}
  .inspector{height:calc(var(--u) * 70);}
  .slots{grid-template-columns:repeat(6, calc(var(--u) * 36)); gap:calc(var(--u) * 4);}
  .slot{width:calc(var(--u) * 36); height:calc(var(--u) * 36);}
  .stat-rows{gap:calc(var(--u) * 2);}
  .board-list{height:calc(var(--u) * 190);}
  .settings-panel{gap:calc(var(--u) * 2); padding-top:calc(var(--u) * 8); padding-bottom:calc(var(--u) * 8);}
  .end-title{font-size:calc(var(--u) * 52);}
  #gameover .end-sub{margin-top:calc(var(--u) * 8);}
}

/* ---------- portrait: every overlay becomes a single scrolling column */
html[data-orient=portrait] .overlay{
  justify-content:flex-start; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  padding:calc(var(--u) * 12) calc(var(--u) * 10) calc(var(--u) * 14); gap:calc(var(--u) * 8);
}
/* auto margins centre short content but never clip tall content (unlike justify-content:center) */
html[data-orient=portrait] .overlay > :first-child{margin-top:auto;}
html[data-orient=portrait] .overlay > :last-child{margin-bottom:auto;}
html[data-orient=portrait] .panel{width:100% !important; max-width:calc(var(--u) * 300);}
html[data-orient=portrait] .screen-head .hazard{width:calc(var(--u) * 34);}
html[data-orient=portrait] .screen-title{font-size:calc(var(--u) * 32);}
html[data-orient=portrait] .row-btns{display:grid; grid-template-columns:1fr 1fr; width:100%; max-width:calc(var(--u) * 300); gap:calc(var(--u) * 6);}
html[data-orient=portrait] .row-btns .btn{padding-left:calc(var(--u) * 6); padding-right:calc(var(--u) * 6); min-height:max(44px, calc(var(--u) * 34));}
html[data-orient=portrait] .row-btns .btn:only-child{grid-column:1 / -1;}
html[data-orient=portrait] .row-btns .btn-hell{grid-column:1 / -1;}

/* title */
html[data-orient=portrait] #title{padding-top:calc(var(--u) * 20); gap:calc(var(--u) * 8);}
html[data-orient=portrait] #title > :first-child{margin-top:auto;}
html[data-orient=portrait] .logo-doom{font-size:calc(var(--u) * 128);}
html[data-orient=portrait] .logo::after{top:calc(var(--u) * 76); left:8%;}
html[data-orient=portrait] .logo-surv{font-size:calc(var(--u) * 26);}
html[data-orient=portrait] .tagline{font-size:calc(var(--u) * 10); letter-spacing:.1em;}
html[data-orient=portrait] .menu{width:100%; max-width:calc(var(--u) * 280); gap:calc(var(--u) * 8); margin-top:calc(var(--u) * 14);}
html[data-orient=portrait] .diff-sel{width:100%;}
html[data-orient=portrait] .diff-arrow{width:calc(var(--u) * 40);}
html[data-orient=portrait] .diff-face{padding:calc(var(--u) * 7) 0 calc(var(--u) * 6);}
html[data-orient=portrait] #startBtn{width:100%; min-height:max(52px, calc(var(--u) * 44)); font-size:calc(var(--u) * 20); padding-left:calc(var(--u) * 14); padding-right:calc(var(--u) * 14);}
html[data-orient=portrait] .menu-row{flex-direction:column; width:100%; gap:calc(var(--u) * 6);}
html[data-orient=portrait] .menu-row .btn{width:100%; min-height:max(44px, calc(var(--u) * 34)); font-size:calc(var(--u) * 13);}
html[data-orient=portrait] .best-line{margin-top:auto; flex-wrap:wrap; justify-content:center; gap:calc(var(--u) * 4) calc(var(--u) * 10); max-width:calc(var(--u) * 290); line-height:1.2; padding:calc(var(--u) * 5) calc(var(--u) * 8) calc(var(--u) * 4);}
html[data-orient=portrait] .title-keys{flex-wrap:wrap; justify-content:center; gap:calc(var(--u) * 6) calc(var(--u) * 12); font-size:calc(var(--u) * 10); margin-bottom:auto;}

/* level-up: a vertical list of compact cards, icon on the left */
html[data-orient=portrait] #levelup{gap:calc(var(--u) * 6); padding-top:calc(var(--u) * 10);}
html[data-orient=portrait] .lv-head{gap:calc(var(--u) * 6);}
html[data-orient=portrait] .lv-haz{width:calc(var(--u) * 40);}
html[data-orient=portrait] .lv-title{font-size:calc(var(--u) * 36);}
html[data-orient=portrait] .cards{flex-direction:column; align-items:stretch; gap:calc(var(--u) * 6); max-width:calc(var(--u) * 300); flex:0 0 auto;}
html[data-orient=portrait] .card{
  flex:0 0 auto; height:auto; min-height:calc(var(--u) * 86);
  display:grid; grid-template-columns:calc(var(--u) * 62) 1fr; grid-template-rows:auto auto auto 1fr; column-gap:calc(var(--u) * 6);
  align-items:start; justify-items:start; text-align:left;
  padding:0 calc(var(--u) * 9) calc(var(--u) * 7) calc(var(--u) * 6);
  animation-name:dealInP;
}
@keyframes dealInP{from{opacity:0; transform:translateX(calc(var(--u) * 30));} to{opacity:1; transform:none;}}
html[data-orient=portrait] .card-band{grid-column:1 / -1; justify-self:stretch; margin:0 calc(var(--u) * -9) calc(var(--u) * 2) calc(var(--u) * -6); padding:calc(var(--u) * 3) calc(var(--u) * 10) calc(var(--u) * 2); text-align:left; font-size:calc(var(--u) * 9);}
html[data-orient=portrait] .socket{grid-column:1; grid-row:2 / span 3; width:calc(var(--u) * 54); height:calc(var(--u) * 54); margin:calc(var(--u) * 5) 0 0 calc(var(--u) * 3);}
html[data-orient=portrait] .socket canvas{width:calc(var(--u) * 44); height:calc(var(--u) * 44);}
html[data-orient=portrait] .cname{grid-column:2; font-size:calc(var(--u) * 16); margin-top:calc(var(--u) * 4);}
html[data-orient=portrait] .pips{grid-column:2; margin:calc(var(--u) * 3) 0 calc(var(--u) * 3); justify-content:flex-start;}
html[data-orient=portrait] .cdesc{grid-column:2; max-width:none; overflow:visible; font-size:calc(var(--u) * 10.5);}
html[data-orient=portrait] .cdesc .up{display:inline; margin-right:calc(var(--u) * 7); line-height:1.35;}
html[data-orient=portrait] .cdesc .lead{margin-bottom:calc(var(--u) * 2);}
html[data-orient=portrait] .cdesc .evo-line{margin-top:calc(var(--u) * 3);}
html[data-orient=portrait] .cflavor{display:none;}
html[data-orient=portrait] .card .newtag{top:calc(var(--u) * 1); right:calc(var(--u) * 4); transform:rotate(3deg);}
html[data-orient=portrait] #levelup.banishing .card::before{top:50%; left:62%; translate:-50% -50%; font-size:calc(var(--u) * 18);}
html[data-orient=portrait] .lv-actions{display:grid; grid-template-columns:1fr 1fr; width:100%; max-width:calc(var(--u) * 300); gap:calc(var(--u) * 6);}
html[data-orient=portrait] .lv-actions .btn{min-height:max(44px, calc(var(--u) * 36)); font-size:calc(var(--u) * 13);}
html[data-orient=portrait] #skipBtn{grid-column:1 / -1;}

/* pause */
html[data-orient=portrait] .run-strip{flex-wrap:wrap; justify-content:center; gap:calc(var(--u) * 4) calc(var(--u) * 12); max-width:calc(var(--u) * 300);}
html[data-orient=portrait] .pause-body{flex-direction:column; width:100%; align-items:center; gap:calc(var(--u) * 8);}
html[data-orient=portrait] .slots{grid-template-columns:repeat(6, 1fr); gap:calc(var(--u) * 5); margin-left:calc(var(--u) * 2); margin-right:calc(var(--u) * 2);}
html[data-orient=portrait] .slot{width:100%; height:auto; aspect-ratio:1;}
html[data-orient=portrait] .inspector{height:auto; min-height:calc(var(--u) * 80); max-height:calc(var(--u) * 150);}
html[data-orient=portrait] .stat{grid-template-columns:calc(var(--u) * 70) 1fr calc(var(--u) * 44);}

/* end screens */
html[data-orient=portrait] .end-title{font-size:calc(var(--u) * 54);}
html[data-orient=portrait] .end-title.win{font-size:calc(var(--u) * 40);}
html[data-orient=portrait] #gameover .end-sub{margin-top:calc(var(--u) * 8);}
html[data-orient=portrait] .end-sub{max-width:calc(var(--u) * 290); line-height:1.25;}
html[data-orient=portrait] .end-body{flex-direction:column; width:100%; align-items:center; margin-top:0; gap:calc(var(--u) * 8);}
html[data-orient=portrait] .report, html[data-orient=portrait] .rank-panel{min-height:0;}
html[data-orient=portrait] .mini-slots{flex-wrap:wrap; row-gap:calc(var(--u) * 4);}
html[data-orient=portrait] .end-best{padding-top:calc(var(--u) * 6);}

/* leaderboard: drop kills/level columns, list fills the screen */
html[data-orient=portrait] #board{justify-content:flex-start;}
html[data-orient=portrait] .board-panel{display:flex; flex-direction:column; flex:1 1 auto; min-height:0;}
html[data-orient=portrait] .board-list{height:auto; flex:1 1 auto; min-height:calc(var(--u) * 200);}
html[data-orient=portrait] .tab{font-size:calc(var(--u) * 10); padding-left:calc(var(--u) * 3); padding-right:calc(var(--u) * 3); line-height:1.05;}
html[data-orient=portrait] .board-list .brow{grid-template-columns:calc(var(--u) * 22) calc(var(--u) * 10) 1fr calc(var(--u) * 58) calc(var(--u) * 38); height:calc(var(--u) * 18);}
html[data-orient=portrait] .board-list .brow > :nth-child(n+6){display:none;}

/* settings */
html[data-orient=portrait] .set-row{flex-wrap:wrap; row-gap:calc(var(--u) * 4);}
html[data-orient=portrait] .range{flex:1 1 calc(var(--u) * 170); justify-content:flex-end;}
html[data-orient=portrait] .range input{flex:1; width:auto; min-width:0;}

/* field manual */
html[data-orient=portrait] .help-body{flex-direction:column; width:100%; align-items:center; gap:calc(var(--u) * 8);}
html[data-orient=portrait] .evo-panel .evo-list{grid-template-columns:1fr; max-height:none;}
html[data-orient=portrait] .evo-panel .evo-row .evo-name{font-size:calc(var(--u) * 10);}
html[data-orient=portrait] .keys li{flex-wrap:wrap; row-gap:calc(var(--u) * 3);}
@media (pointer:coarse){
  .keys li.touch-only{display:grid !important; grid-template-columns:calc(var(--u) * 34) 1fr; align-items:center; line-height:1.2;}
  .keys li.touch-only kbd{justify-self:start; min-width:calc(var(--u) * 28);}
  .keys li.touch-only span{margin:0;}
}

/* name entry with the on-screen keyboard up: keep only the rank form, pinned to the top */
html.kb-open .end-screen .end-title, html.kb-open .end-screen .end-sub, html.kb-open .end-screen .report,
html.kb-open .end-screen .victory-rays{display:none;}
html.kb-open .end-screen{justify-content:flex-start;}
html.kb-open .end-screen > :first-child{margin-top:0;}
/* short landscape phones: overlays scroll instead of clipping */
@media (pointer:coarse) and (max-height:500px) and (orientation:landscape){
  .overlay{justify-content:flex-start; overflow-y:auto; overscroll-behavior:contain;}
  .overlay > :first-child, #victory > .end-title{margin-top:auto;}
  .overlay > :last-child{margin-bottom:auto;}
}
html[data-orient=portrait] #victory > .end-title{margin-top:auto;}
html[data-orient=portrait] #quitBtn, html[data-orient=portrait] #menuBtn, html[data-orient=portrait] #winMenuBtn{grid-column:1 / -1;}
/* portrait pause: stats in two columns so Resume stays in reach on short phones */
html[data-orient=portrait] .stats-panel .stat-rows{display:grid; grid-template-columns:1fr 1fr; gap:calc(var(--u) * 4) calc(var(--u) * 12);}
html[data-orient=portrait] .stat{grid-template-columns:calc(var(--u) * 54) 1fr calc(var(--u) * 34); gap:calc(var(--u) * 4);}
html[data-orient=portrait] .stat-l{font-size:calc(var(--u) * 9);}
html[data-orient=portrait] .stat-bar{gap:calc(var(--u) * .6);}
html[data-orient=portrait] .inspector{min-height:calc(var(--u) * 72);}
/* menus scroll by touch; the playfield itself never pans or zooms */
.overlay, .inspector, .board-list, .cdesc, .evo-list{touch-action:pan-y;}
html[data-orient=portrait] .evo-panel .evo-list{overflow:visible;}

/* arsenal report: portrait gets a taller list; touch has no A key */
html[data-orient=portrait] .ars-rows{max-height:none; overflow:visible;}
html[data-orient=portrait] .ars-head, html[data-orient=portrait] .ars-row{grid-template-columns:minmax(0, 1fr) calc(var(--u) * 62) calc(var(--u) * 32) calc(var(--u) * 28) calc(var(--u) * 26);}
html[data-orient=portrait] .ars-row{min-height:calc(var(--u) * 18);}
html[data-orient=portrait] .rtab{min-height:max(40px, calc(var(--u) * 20)); font-size:calc(var(--u) * 11);}
@media (pointer:coarse){ .rtab{min-height:max(40px, calc(var(--u) * 18));} .rtab kbd{display:none !important;} }
@media (pointer:coarse) and (max-height:500px) and (orientation:landscape){ .ars-rows{max-height:calc(var(--u) * 96);} }