/* Style C ("Anime Action") shell shared by every game: slanted slabs, speed lines, a diagonal colour band,
   heavy display type (Dela Gothic One) over rounded body type (M PLUS Rounded 1c).
   Each game sets the colour variables from its theme in boot.js. Text inside slanted slabs is counter-slanted
   so everything players read stays upright. */
:root{
  --s:1px;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --bg:#0B0A1A; --bg2:#18153A; --ink:#0B0A1A; --paper:#FFFFFF;
  --accent:#6E40F5; --accent2:#A98BFF; --accent-ink:#5A2FE0; --hot:#FFE14D; --muted:#B4ADD6;
  --display:"Dela Gothic One","M PLUS Rounded 1c",system-ui,sans-serif;
  --ui:"M PLUS Rounded 1c",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --skew:-12deg; --unskew:12deg;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:#fff;font:calc(15*var(--s))/1.4 var(--ui);overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;outline:none}
button{font:800 calc(15*var(--s)) var(--ui);color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:calc(3*var(--s)) solid var(--hot);outline-offset:calc(3*var(--s))}
a{color:#fff}

/* slanted slab helpers */
.slab{transform:skewX(var(--skew))}
.slab>.u,.u{display:inline-block;transform:skewX(var(--unskew))}
.u-block{display:block;transform:skewX(var(--unskew))}

/* shared background pieces */
.band{position:absolute;left:-30vw;width:160vw;height:min(34vh,calc(260*var(--s)));top:42%;transform:rotate(-12deg);
  background-color:var(--accent);background-image:radial-gradient(rgba(0,0,0,.22) calc(2.5*var(--s)),transparent calc(3*var(--s)));background-size:calc(12*var(--s)) calc(12*var(--s));pointer-events:none}
.band::after{content:"";position:absolute;left:0;right:0;bottom:calc(-18*var(--s));height:calc(12*var(--s));background:var(--hot)}
.kana{position:absolute;left:-2vw;top:16%;transform:rotate(-12deg);font:400 clamp(calc(90*var(--s)),15vw,calc(200*var(--s)))/1 var(--display);white-space:nowrap;
  color:transparent;-webkit-text-stroke:calc(2*var(--s)) var(--accent2);opacity:.2;pointer-events:none}
.lines{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lines i{position:absolute;left:0;height:calc(2*var(--s));background:#fff;opacity:.25;transform:rotate(-12deg)}
.logo{transform:skewX(-10deg)}
.logo small{display:block;font:800 calc(12*var(--s))/1.2 var(--ui);letter-spacing:calc(6*var(--s));color:var(--accent2)}
.logo h1,.logo .h1{margin:0;font:400 clamp(calc(30*var(--s)),4vw,calc(46*var(--s)))/1 var(--display);color:#fff;text-shadow:calc(4*var(--s)) calc(4*var(--s)) 0 var(--accent);letter-spacing:.5px}

/* ---------- loading ---------- */
#loading{position:fixed;inset:0;z-index:60;background:var(--bg);overflow:hidden;transition:opacity .35s}
#loading.out{opacity:0;pointer-events:none}
#loading .band{top:36%}
#loading .logo{position:absolute;left:max(calc(36*var(--s)),calc(var(--sal) + calc(12*var(--s))));top:max(calc(26*var(--s)),var(--sat))}
#loadPet{position:absolute;left:50%;top:18%;width:min(40vw,calc(320*var(--s)));height:min(46vh,calc(340*var(--s)));transform:translateX(-50%);display:flex;align-items:flex-end;justify-content:center;animation:bob .6s ease-in-out infinite}
#loadPet img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(calc(10*var(--s)) calc(8*var(--s)) 0 var(--hot))}
#loadText{position:absolute;left:clamp(calc(16*var(--s)),5vw,calc(60*var(--s)));bottom:clamp(calc(110*var(--s)),18vh,calc(150*var(--s)));transform:skewX(var(--skew));font:400 clamp(calc(30*var(--s)),5.4vw,calc(62*var(--s)))/1 var(--display);text-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent)}
#loadText span{color:var(--hot);animation:blink .8s infinite}
#loadBar{position:absolute;left:clamp(calc(16*var(--s)),5vw,calc(60*var(--s)));bottom:clamp(calc(64*var(--s)),11vh,calc(90*var(--s)));width:min(calc(620*var(--s)),calc(100vw - calc(150*var(--s))));height:calc(22*var(--s));border:calc(2*var(--s)) solid #fff;background:rgba(255,255,255,.12);transform:skewX(-24deg);padding:calc(3*var(--s))}
#loadBar div{height:100%;width:0;background:var(--hot);transition:width .25s}
#loadPct{position:absolute;left:calc(clamp(calc(16*var(--s)),5vw,calc(60*var(--s))) + min(calc(620*var(--s)),calc(100vw - calc(150*var(--s)))) + calc(16*var(--s)));bottom:clamp(calc(60*var(--s)),11vh,calc(86*var(--s)));font:400 calc(28*var(--s)) var(--display);color:var(--hot)}
#loadTip{position:absolute;right:clamp(calc(16*var(--s)),4vw,calc(50*var(--s)));bottom:clamp(calc(150*var(--s)),26vh,calc(230*var(--s)));width:min(calc(460*var(--s)),calc(100vw - calc(32*var(--s))));background:#fff;color:var(--ink);box-shadow:calc(8*var(--s)) calc(8*var(--s)) 0 var(--accent)}
#loadTip .u-block{padding:calc(14*var(--s)) calc(24*var(--s))}
#loadTip b{display:inline-block;padding:calc(2*var(--s)) calc(12*var(--s));background:var(--ink);color:var(--hot);font-size:calc(12*var(--s));letter-spacing:calc(3*var(--s))}
#loadTip p{margin:calc(8*var(--s)) 0 0;font-weight:800;line-height:1.4}
@media (max-width:700px){#loadTip{bottom:auto;top:calc(18% + min(46vh,calc(340*var(--s))) + calc(10*var(--s)));right:calc(16*var(--s))}#loadText{bottom:calc(120*var(--s))}}

/* ---------- lobby ---------- */
#lobby{position:fixed;inset:0;z-index:20;overflow:hidden;background:color-mix(in srgb,var(--bg) 84%,transparent);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(calc(360*var(--s)),.85fr);grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"top top" "hero menu" "hero pets";column-gap:clamp(calc(20*var(--s)),3vw,calc(48*var(--s)));padding:max(calc(22*var(--s)),var(--sat)) max(clamp(calc(20*var(--s)),3vw,calc(40*var(--s))),var(--sar)) max(calc(18*var(--s)),var(--sab)) max(clamp(calc(20*var(--s)),3vw,calc(40*var(--s))),var(--sal))}
#lobby .band{top:46%}
#lobby .kana{top:20%}
.topbar{grid-area:top;position:relative;display:flex;align-items:center;justify-content:space-between;gap:calc(16*var(--s));z-index:2}
.who{display:flex;align-items:center;gap:calc(12*var(--s))}
.profile{display:flex;align-items:center;gap:calc(10*var(--s));padding:calc(4*var(--s)) calc(18*var(--s)) calc(4*var(--s)) calc(4*var(--s));background:#fff;color:var(--ink)}
.profile img{width:calc(38*var(--s));height:calc(38*var(--s));object-fit:cover;transform:skewX(var(--unskew));background:#EFEAFF}
.profile .u{display:flex;flex-direction:column;line-height:1.1}
.profile b{font-size:calc(15*var(--s));font-weight:800}
.profile span span{font-size:calc(11*var(--s));font-weight:800;letter-spacing:calc(2*var(--s));color:var(--accent-ink)}
.hotBtn{height:calc(46*var(--s));padding:0 calc(22*var(--s));background:var(--hot);color:var(--ink);letter-spacing:calc(2*var(--s));box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent)}
.hotBtn:hover{filter:brightness(1.06)}
.ghost{height:calc(52*var(--s));border:calc(2*var(--s)) solid #fff;color:#fff;letter-spacing:calc(3*var(--s));background:rgba(11,10,26,.35)}
.ghost:hover{background:rgba(255,255,255,.12)}
.iconBtn{width:calc(46*var(--s));height:calc(46*var(--s));border:calc(2*var(--s)) solid #fff;color:#fff;display:inline-flex;align-items:center;justify-content:center;background:rgba(11,10,26,.35)}

.hero{grid-area:hero;position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:0;z-index:2}
.heroArt{flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center;padding-top:calc(10*var(--s))}
.heroArt img{max-width:min(100%,calc(520*var(--s)));max-height:min(100%,calc(390*var(--s)));object-fit:contain;filter:drop-shadow(calc(10*var(--s)) calc(8*var(--s)) 0 var(--hot)) drop-shadow(0 0 calc(1*var(--s)) #000)}
.heroArt img.pop{animation:popIn .4s cubic-bezier(.3,1.6,.5,1)}
.arrow{position:absolute;top:38%;width:calc(52*var(--s));height:calc(52*var(--s));background:var(--ink);border:calc(2*var(--s)) solid #fff;color:#fff;transform:skewX(var(--skew));display:flex;align-items:center;justify-content:center}
.arrow svg{transform:skewX(var(--unskew))}
.arrow.prev{left:0}.arrow.next{right:6%}
.arrow:hover{background:var(--accent)}
.heroName{display:flex;align-items:flex-end;gap:calc(10*var(--s));margin-top:calc(-30*var(--s));position:relative}
.nameSlab{padding:calc(6*var(--s)) calc(26*var(--s));background:#fff;color:var(--ink);box-shadow:calc(7*var(--s)) calc(7*var(--s)) 0 var(--accent)}
.nameSlab .u{font:400 clamp(calc(34*var(--s)),4.4vw,calc(54*var(--s)))/1.05 var(--display);text-transform:uppercase}
.typeSlab{margin-bottom:calc(4*var(--s));padding:calc(4*var(--s)) calc(14*var(--s));background:var(--ink);border:calc(2*var(--s)) solid var(--hot)}
.typeSlab .u{font-size:calc(14*var(--s));font-weight:800;letter-spacing:calc(2*var(--s));color:var(--hot);text-transform:uppercase}
#heroBlurb{margin:calc(12*var(--s)) 0 0;max-width:calc(520*var(--s));color:#E9E5FF;font-weight:700;font-size:calc(15*var(--s));text-shadow:0 calc(1*var(--s)) calc(2*var(--s)) rgba(0,0,0,.6)}
.styles{display:flex;align-items:center;gap:calc(14*var(--s));margin-top:calc(12*var(--s));flex-wrap:wrap}
.lbl{font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(3*var(--s));color:var(--muted);text-transform:uppercase}
#styles{display:flex;gap:calc(12*var(--s))}
#styles button{width:calc(28*var(--s));height:calc(28*var(--s));transform:rotate(45deg);border:calc(2*var(--s)) solid var(--bg)}
#styles button[aria-checked="true"]{outline:calc(3*var(--s)) solid var(--hot);outline-offset:calc(2*var(--s))}

.menu{grid-area:menu;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:calc(16*var(--s));min-width:0}
.tab{display:inline-block;padding:calc(3*var(--s)) calc(14*var(--s));background:var(--accent);color:#fff;font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(3*var(--s));margin:0 0 calc(6*var(--s))}
.nameRow{display:flex;gap:calc(10*var(--s))}
.nameRow input{flex:1;min-width:0;height:calc(56*var(--s));padding:0 calc(20*var(--s));border:0;background:#fff;color:var(--ink);font:800 calc(22*var(--s)) var(--ui);-webkit-user-select:text;user-select:text;border-radius:0}
.nameRow input:focus{outline:calc(3*var(--s)) solid var(--hot);outline-offset:0}
.nameRow button{width:calc(56*var(--s));height:calc(56*var(--s));background:var(--ink);border:calc(2*var(--s)) solid #fff;color:#fff;display:flex;align-items:center;justify-content:center}
.nameRow button svg{transform:skewX(var(--unskew))}
#nameMsg{min-height:calc(18*var(--s));margin:calc(6*var(--s)) 0 0;font-size:calc(13*var(--s));font-weight:800;color:var(--hot)}
.playBtn{width:100%;height:clamp(calc(96*var(--s)),15vh,calc(132*var(--s)));background:var(--hot);color:var(--ink);box-shadow:calc(10*var(--s)) calc(10*var(--s)) 0 var(--accent);display:block;text-align:left}
.playBtn .u-block{display:flex;align-items:center;justify-content:space-between;padding:0 calc(34*var(--s))}
.playBtn b{display:block;font:400 clamp(calc(48*var(--s)),6vw,calc(70*var(--s)))/1 var(--display)}
.playBtn small{display:block;font-size:calc(13*var(--s));font-weight:800;letter-spacing:calc(2*var(--s))}
.playBtn:hover{filter:brightness(1.05)}
.playBtn:active{transform:skewX(var(--skew)) translate(calc(4*var(--s)),calc(4*var(--s)));box-shadow:calc(6*var(--s)) calc(6*var(--s)) 0 var(--accent)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(14*var(--s))}
.saveCard{background:#fff;color:var(--ink);box-shadow:calc(8*var(--s)) calc(8*var(--s)) 0 var(--accent)}
.saveCard .u-block{display:flex;align-items:center;gap:calc(16*var(--s));padding:calc(14*var(--s)) calc(12*var(--s)) calc(14*var(--s)) calc(22*var(--s))}
.saveCard div{flex:1}
.saveCard b{display:block;font:400 calc(19*var(--s))/1.15 var(--display)}
.saveCard span{display:block;margin-top:calc(3*var(--s));font-size:calc(13*var(--s));font-weight:700;color:#3A3550}
.saveCard button{height:calc(46*var(--s));padding:0 calc(16*var(--s));background:var(--ink);color:#fff;font-size:calc(14*var(--s));letter-spacing:calc(1*var(--s));white-space:nowrap}
#mode{align-self:flex-start;margin:0;padding:calc(4*var(--s)) calc(14*var(--s));background:rgba(11,10,26,.78);transform:skewX(var(--skew));font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(2*var(--s));color:var(--muted)}
.pets{grid-area:pets;position:relative;z-index:2;align-self:end}
#kinds{margin-top:calc(8*var(--s));display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:calc(8*var(--s)) calc(6*var(--s));max-width:calc(520*var(--s))}
#kinds button{width:100%;max-width:calc(60*var(--s));aspect-ratio:58/60;overflow:hidden;background:var(--bg2);border:calc(2*var(--s)) solid rgba(255,255,255,.35);transform:skewX(var(--skew));transition:transform .12s}
#kinds button img{width:120%;height:100%;margin-left:-10%;object-fit:cover;display:block;transform:skewX(var(--unskew))}
#kinds button[aria-checked="true"]{border:calc(3*var(--s)) solid var(--hot);box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent);transform:skewX(var(--skew)) translateY(-6px)}
#kinds button:hover{border-color:#fff}
.also{position:absolute;right:max(clamp(calc(20*var(--s)),3vw,calc(40*var(--s))),var(--sar));bottom:max(calc(4*var(--s)),var(--sab));font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(2*var(--s));color:var(--muted);text-decoration:none;z-index:2}
.also b{font:400 calc(13*var(--s)) var(--display);letter-spacing:0;color:#fff}

/* phones and narrow windows: one scrolling column */
@media (max-width:900px),(max-aspect-ratio:1/1){
  #lobby{display:flex;flex-direction:column;gap:calc(16*var(--s));overflow-y:auto;overflow-x:hidden;padding:max(calc(16*var(--s)),var(--sat)) max(calc(16*var(--s)),var(--sar)) max(calc(28*var(--s)),calc(var(--sab) + calc(12*var(--s)))) max(calc(16*var(--s)),var(--sal));-webkit-overflow-scrolling:touch}
  .topbar{flex-wrap:wrap}
  .logo h1{font-size:calc(30*var(--s))}
  .profile b{font-size:calc(13*var(--s))}
  .hotBtn{height:calc(40*var(--s));padding:0 calc(14*var(--s));font-size:calc(13*var(--s))}
  .hero{flex:none}
  .heroArt{height:min(34vh,calc(260*var(--s)));flex:none}
  .heroArt img{max-height:100%}
  .arrow{top:22%;width:calc(44*var(--s));height:calc(44*var(--s))}
  .arrow.next{right:calc(4*var(--s))}
  .nameSlab .u{font-size:calc(34*var(--s))}
  #heroBlurb{font-size:calc(14*var(--s))}
  .menu{gap:calc(12*var(--s))}
  .playBtn{height:calc(96*var(--s))}
  .pets{align-self:stretch}
  #kinds{grid-template-columns:repeat(8,minmax(0,1fr));gap:calc(8*var(--s)) calc(5*var(--s));max-width:none}
  #kinds button{max-width:none}
  .also{position:static;align-self:flex-end}
  .band{top:24%}
}

/* ---------- modals (how to play, sign in, menu) ---------- */
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:max(calc(16*var(--s)),var(--sat)) max(calc(16*var(--s)),var(--sar)) max(calc(16*var(--s)),var(--sab)) max(calc(16*var(--s)),var(--sal));background:rgba(0,0,0,.55)}
.sheet{position:relative;width:min(calc(900*var(--s)),100%);max-height:calc(100dvh - calc(40*var(--s)));overflow:auto;background:var(--bg2);padding:0 clamp(calc(18*var(--s)),3vw,calc(36*var(--s))) calc(26*var(--s));box-shadow:calc(10*var(--s)) calc(10*var(--s)) 0 var(--accent)}
.sheet .head{display:inline-block;margin:0 0 0 calc(-8*var(--s));padding:calc(10*var(--s)) calc(30*var(--s));background:#fff;color:var(--ink);box-shadow:calc(7*var(--s)) calc(7*var(--s)) 0 var(--hot)}
.sheet .head small{display:block;font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(5*var(--s));color:var(--accent-ink)}
.sheet h2{margin:0;font:400 clamp(calc(26*var(--s)),3.4vw,calc(38*var(--s)))/1.1 var(--display)}
.sheetTop{position:sticky;top:0;padding-top:calc(18*var(--s));z-index:2}
.close{position:absolute;top:calc(18*var(--s));right:0}
.sheet .sub{margin:calc(16*var(--s)) 0 0;color:var(--muted);font-weight:700;font-size:calc(16*var(--s))}
.steps{margin-top:calc(20*var(--s));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(20*var(--s))}
.card{padding:calc(20*var(--s)) calc(22*var(--s));background:#fff;color:var(--ink);clip-path:polygon(calc(24*var(--s)) 0,100% 0,100% 100%,0 100%,0 calc(24*var(--s)));display:flex;flex-direction:column;gap:calc(12*var(--s))}
.card.dark{background:transparent;color:#fff;border:calc(2*var(--s)) solid rgba(255,255,255,.4);clip-path:none}
.card .num{font:400 calc(40*var(--s))/1 var(--display);color:var(--accent-ink)}
.card.dark .num{color:var(--accent2)}
.card h3{margin:0;font-size:calc(21*var(--s));font-weight:800;display:flex;align-items:baseline;gap:calc(12*var(--s))}
.card p{margin:0;font-size:calc(14*var(--s));font-weight:700;line-height:1.4;color:#4A4560}
.card.dark p{color:var(--muted)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(12*var(--s))}
.fields label{display:flex;flex-direction:column;gap:calc(6*var(--s));font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(3*var(--s))}
.fields select{height:calc(50*var(--s));padding:0 calc(10*var(--s));background:#F1EFF7;border:calc(2*var(--s)) solid var(--ink);border-radius:0;color:var(--ink);font:800 calc(17*var(--s)) var(--ui)}
.wide{height:calc(54*var(--s));width:100%;font-size:calc(16*var(--s));letter-spacing:calc(1*var(--s))}
.inkBtn{background:var(--ink);color:#fff;letter-spacing:calc(3*var(--s))}
.whiteBtn{background:#fff;color:#1F1F1F;display:flex;align-items:center;justify-content:center;gap:calc(12*var(--s))}
.whiteBtn i{width:calc(24*var(--s));height:calc(24*var(--s));border-radius:50%;border:calc(2*var(--s)) solid #4285F4;color:#4285F4;font-style:normal;font-size:calc(14*var(--s));display:inline-flex;align-items:center;justify-content:center}
.outBtn{border:calc(2*var(--s)) solid #fff;color:#fff;display:flex;align-items:center;justify-content:center;gap:calc(12*var(--s))}
.or{display:flex;align-items:center;gap:calc(12*var(--s));font-size:calc(13*var(--s));font-weight:800;letter-spacing:calc(3*var(--s));color:var(--muted)}
.or::before,.or::after{content:"";flex:1;height:calc(2*var(--s));background:rgba(255,255,255,.3)}
.guestBtn{height:calc(62*var(--s));width:100%;background:var(--hot);color:var(--ink);box-shadow:calc(7*var(--s)) calc(7*var(--s)) 0 var(--accent);font:400 calc(24*var(--s)) var(--display)}
.note{margin-top:calc(18*var(--s));display:flex;align-items:center;gap:calc(14*var(--s));flex-wrap:wrap}
.note .slab{padding:calc(8*var(--s)) calc(18*var(--s));background:var(--hot);color:var(--ink)}
.note .slab .u{font-size:calc(14*var(--s));font-weight:800}
.note .links{margin-left:auto;font-size:calc(13*var(--s));font-weight:800}
.status{min-height:calc(20*var(--s));font-size:calc(14*var(--s));font-weight:800;color:var(--accent-ink)}
.card.dark .status{color:var(--hot)}
.rules{margin:calc(18*var(--s)) 0 0;padding:0;list-style:none;display:grid;gap:calc(12*var(--s))}
.rules li{display:flex;gap:calc(14*var(--s));align-items:baseline;font-size:calc(16*var(--s));font-weight:700;color:#E9E5FF}
.rules li::before{content:counter(r,decimal-leading-zero);counter-increment:r;font:400 calc(24*var(--s)) var(--display);color:var(--hot)}
.rules{counter-reset:r}
.rules b{color:#fff}
.controls{margin-top:calc(18*var(--s));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(12*var(--s))}
.controls div{padding:calc(12*var(--s)) calc(14*var(--s));border:calc(2*var(--s)) solid rgba(255,255,255,.35)}
.controls b{display:block;font-size:calc(12*var(--s));letter-spacing:calc(3*var(--s));color:var(--hot)}
.controls span{font-size:calc(14*var(--s));font-weight:700;color:#E9E5FF}
@media (max-width:700px){.steps,.controls{grid-template-columns:minmax(0,1fr)}.fields{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.hudTop{position:absolute;left:max(calc(18*var(--s)),var(--sal));top:max(calc(16*var(--s)),var(--sat));display:flex;gap:calc(10*var(--s));align-items:flex-start}
#stats{display:flex;gap:calc(10*var(--s))}
#stats .s{min-width:calc(88*var(--s));padding:calc(5*var(--s)) calc(14*var(--s));background:#fff;color:var(--ink);transform:skewX(var(--skew));box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent)}
#stats .s.hot{background:var(--hot)}
#stats .u-block{display:flex;flex-direction:column;align-items:center}
#stats b{font:400 calc(28*var(--s))/1.1 var(--display)}
#stats small{font-size:calc(10.5*var(--s));font-weight:800;letter-spacing:calc(3*var(--s))}
#menuBtn{pointer-events:auto;width:calc(46*var(--s));height:calc(46*var(--s));border:calc(2*var(--s)) solid #fff;color:#fff;background:rgba(11,10,26,.55);transform:skewX(var(--skew));display:flex;align-items:center;justify-content:center}
#menuBtn svg{transform:skewX(var(--unskew))}
#toast{position:absolute;left:50%;top:max(calc(18*var(--s)),var(--sat));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;opacity:0}
#toast.on{animation:toast 1.5s ease-out both}
#toast .big{font:400 clamp(calc(40*var(--s)),5vw,calc(62*var(--s)))/1 var(--display);color:var(--hot);transform:skewX(var(--skew)) rotate(-4deg);text-shadow:calc(4*var(--s)) calc(4*var(--s)) 0 var(--ink),calc(8*var(--s)) calc(8*var(--s)) 0 var(--accent);white-space:nowrap}
#toast .small{margin-top:calc(10*var(--s));display:flex;align-items:center;gap:calc(8*var(--s));padding:calc(3*var(--s)) calc(14*var(--s)) calc(3*var(--s)) calc(3*var(--s));background:#fff;color:var(--ink);transform:skewX(var(--skew))}
#toast .small img{width:calc(30*var(--s));height:calc(30*var(--s));object-fit:cover;transform:skewX(var(--unskew))}
#toast .small span{transform:skewX(var(--unskew));font-size:calc(15*var(--s));font-weight:800;white-space:nowrap}
#lbCard{position:absolute;right:max(calc(18*var(--s)),var(--sar));top:max(calc(16*var(--s)),var(--sat));width:calc(270*var(--s))}
.lbHead{padding:calc(6*var(--s)) calc(18*var(--s));background:var(--accent);box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--ink)}
.lbHead .u-block{display:flex;align-items:baseline;justify-content:space-between}
.lbHead b{font:400 calc(19*var(--s)) var(--display)}
.lbHead small{font-size:calc(11*var(--s));font-weight:800;letter-spacing:calc(3*var(--s));opacity:.85}
#lb{list-style:none;margin:calc(8*var(--s)) 0 0;padding:0;display:flex;flex-direction:column;gap:calc(4*var(--s))}
#lb li{height:calc(30*var(--s));background:rgba(11,10,26,.62);transform:skewX(var(--skew))}
#lb li .u-block{height:100%;display:flex;align-items:center;gap:calc(9*var(--s));padding:0 calc(12*var(--s))}
#lb .rk{width:calc(24*var(--s));font:400 calc(16*var(--s)) var(--display);color:var(--muted)}
#lb li:nth-child(1) .rk{color:var(--hot)}#lb li:nth-child(2) .rk{color:#E6E8F0}#lb li:nth-child(3) .rk{color:#F0A86A}
#lb img{width:calc(24*var(--s));height:calc(24*var(--s));object-fit:cover;background:var(--bg2)}
#lb .nm{flex:1;font-size:calc(14*var(--s));font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lb .sc{font:400 calc(16*var(--s)) var(--display)}
#lb li.me{background:#fff;color:var(--ink);box-shadow:calc(4*var(--s)) calc(4*var(--s)) 0 var(--hot)}
#lb li.me .rk{color:var(--accent-ink)}
#lb li.gap{margin-top:calc(8*var(--s))}
#hint{position:absolute;left:50%;bottom:max(calc(22*var(--s)),var(--sab));transform:translateX(-50%) skewX(var(--skew));display:flex;align-items:center;gap:calc(12*var(--s));padding:calc(7*var(--s)) calc(18*var(--s)) calc(7*var(--s)) calc(8*var(--s));background:rgba(11,10,26,.66);white-space:nowrap;transition:opacity .4s;max-width:calc(100vw - calc(220*var(--s)))}
#hint.fade{opacity:0}
#hint kbd{transform:skewX(var(--unskew));padding:calc(3*var(--s)) calc(12*var(--s));background:#fff;color:var(--ink);font:800 calc(13*var(--s)) var(--ui);letter-spacing:calc(2*var(--s))}
#hint span{transform:skewX(var(--unskew));font-size:calc(14*var(--s));font-weight:800;overflow:hidden;text-overflow:ellipsis}
#net{position:absolute;right:max(calc(18*var(--s)),var(--sar));bottom:max(calc(18*var(--s)),var(--sab));padding:calc(6*var(--s)) calc(14*var(--s));background:rgba(11,10,26,.6);transform:skewX(var(--skew));font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(1*var(--s));color:var(--muted)}
#net .u{white-space:nowrap}
#net i{font-style:normal;color:#4BE38A}
#actBtn{position:fixed;z-index:12;right:max(calc(22*var(--s)),var(--sar));bottom:max(calc(44*var(--s)),calc(var(--sab) + calc(30*var(--s))));width:calc(94*var(--s));height:calc(94*var(--s));border-radius:50%;
  background:var(--hot);color:var(--ink);font:400 calc(17*var(--s)) var(--display);box-shadow:calc(6*var(--s)) calc(6*var(--s)) 0 var(--accent),0 0 0 calc(3*var(--s)) var(--ink) inset;touch-action:none;-webkit-touch-callout:none}
#actBtn.on{transform:translate(calc(3*var(--s)),calc(3*var(--s))) scale(.96);box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--accent),0 0 0 calc(3*var(--s)) var(--ink) inset}
@media (max-width:700px){
  .hudTop{left:calc(12*var(--s));top:max(calc(12*var(--s)),var(--sat));gap:calc(6*var(--s))}
  #stats{gap:calc(6*var(--s))}#stats .s{min-width:calc(52*var(--s));padding:calc(3*var(--s)) calc(8*var(--s));box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--accent)}#stats b{font-size:calc(18*var(--s))}#stats small{font-size:calc(8.5*var(--s));letter-spacing:calc(1.5*var(--s))}
  #menuBtn{width:calc(38*var(--s));height:calc(38*var(--s))}
  #lbCard{width:calc(158*var(--s));right:calc(12*var(--s));top:calc(max(calc(12*var(--s)),var(--sat)) + calc(58*var(--s)))}
  #lb{gap:calc(3*var(--s));margin-top:calc(6*var(--s))}#lb li{height:calc(24*var(--s))}#lb li .u-block{gap:calc(6*var(--s));padding:0 calc(9*var(--s))}#lb .nm{font-size:calc(12*var(--s))}#lb img{width:calc(18*var(--s));height:calc(18*var(--s))}#lb .rk{width:calc(18*var(--s))}#lb .rk,#lb .sc{font-size:calc(13*var(--s))}
  #lb li:nth-child(n+6):not(.me){display:none}.lbHead{padding:calc(4*var(--s)) calc(12*var(--s))}.lbHead b{font-size:calc(13*var(--s))}.lbHead small{display:none}
  #toast{top:30%}#toast .big{font-size:calc(40*var(--s))}
  #hint{left:calc(12*var(--s));top:calc(max(calc(12*var(--s)),var(--sat)) + calc(58*var(--s)));bottom:auto;transform:skewX(var(--skew));max-width:calc(100vw - calc(196*var(--s)));white-space:normal;padding:calc(6*var(--s)) calc(12*var(--s)) calc(6*var(--s)) calc(6*var(--s));gap:calc(8*var(--s))}
  #hint kbd{font-size:calc(10*var(--s));padding:calc(2*var(--s)) calc(6*var(--s));letter-spacing:calc(1*var(--s))}#hint span{font-size:calc(11*var(--s));line-height:1.25}
  #net{display:none}
}

/* ---------- results ---------- */
#results{position:fixed;inset:0;z-index:30;overflow:hidden auto;background:color-mix(in srgb,var(--bg) 88%,transparent)}
#results .band{top:36%;left:-60vw;width:110vw}
.resWrap{position:relative;min-height:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(calc(16*var(--s)),3vw,calc(40*var(--s)));padding:max(clamp(calc(18*var(--s)),4vh,calc(40*var(--s))),var(--sat)) max(clamp(calc(18*var(--s)),3vw,calc(48*var(--s))),var(--sar)) max(clamp(calc(18*var(--s)),4vh,calc(40*var(--s))),calc(var(--sab) + calc(10*var(--s)))) max(clamp(calc(18*var(--s)),3vw,calc(48*var(--s))),var(--sal))}
.resPet{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:0}
.resPet .art{flex:1;min-height:calc(200*var(--s));width:100%;display:flex;align-items:flex-end;justify-content:center}
.resPet img{max-width:100%;max-height:min(56vh,calc(380*var(--s)));object-fit:contain;filter:drop-shadow(calc(10*var(--s)) calc(8*var(--s)) 0 var(--hot))}
.resPet .nameSlab{margin-top:calc(-20*var(--s))}
.resPet .nameSlab .u{font-size:clamp(calc(22*var(--s)),2.4vw,calc(28*var(--s)))}
.resPet .nameSlab small{display:block;font:800 calc(12*var(--s)) var(--ui);letter-spacing:calc(2*var(--s));color:var(--accent-ink)}
.resMain{display:flex;flex-direction:column;gap:calc(14*var(--s));justify-content:center}
.resMain .over{align-self:flex-start;padding:calc(3*var(--s)) calc(14*var(--s));background:var(--hot);color:var(--ink);font-size:calc(13*var(--s));font-weight:800;letter-spacing:calc(4*var(--s))}
#resTitle{margin:0;font:400 clamp(calc(40*var(--s)),6vw,calc(76*var(--s)))/1 var(--display);transform:skewX(-8deg);text-shadow:calc(4*var(--s)) calc(4*var(--s)) 0 var(--ink),calc(9*var(--s)) calc(9*var(--s)) 0 var(--accent)}
#resBy{align-self:flex-start;display:flex;align-items:center;gap:calc(10*var(--s));padding:calc(4*var(--s)) calc(18*var(--s)) calc(4*var(--s)) calc(4*var(--s));background:rgba(255,255,255,.1);border:calc(2*var(--s)) solid rgba(255,255,255,.35)}
#resBy img{width:calc(32*var(--s));height:calc(32*var(--s));object-fit:cover;transform:skewX(var(--unskew))}
#resBy span{font-size:calc(16*var(--s));font-weight:800}
#resBy b{color:var(--hot)}
#resStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(12*var(--s)) calc(18*var(--s))}
#resStats div{height:calc(54*var(--s));background:rgba(0,0,0,.55);border:calc(2*var(--s)) solid rgba(255,255,255,.25);transform:skewX(var(--skew));animation:slideIn .45s ease-out both}
#resStats div.hot{background:var(--hot);color:var(--ink);border-color:var(--hot)}
#resStats .u-block{height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 calc(20*var(--s))}
#resStats small{font-size:calc(13*var(--s));font-weight:800;letter-spacing:calc(3*var(--s))}
#resStats b{font:400 calc(28*var(--s)) var(--display)}
.xp{margin-top:calc(4*var(--s))}
.xp .row{display:flex;align-items:center;justify-content:space-between;font-size:calc(13*var(--s));font-weight:800;letter-spacing:calc(3*var(--s))}
.xp .gain{font:400 calc(22*var(--s)) var(--display);letter-spacing:0;color:var(--hot)}
.xp .bar{margin-top:calc(6*var(--s));height:calc(20*var(--s));border:calc(2*var(--s)) solid #fff;background:rgba(255,255,255,.12);transform:skewX(-24deg);padding:calc(3*var(--s))}
.xp .bar div{height:100%;background:var(--hot);transition:width 1.1s ease-out}
#lvlUp{color:var(--hot)}
.guestNote{background:#fff;color:var(--ink)}
.guestNote .u-block{display:flex;align-items:center;gap:calc(14*var(--s));padding:calc(10*var(--s)) calc(10*var(--s)) calc(10*var(--s)) calc(22*var(--s))}
.guestNote span{flex:1;font-size:calc(14*var(--s));font-weight:800;line-height:1.35}
.guestNote button{height:calc(44*var(--s));padding:0 calc(16*var(--s));background:var(--ink);color:#fff;font-size:calc(14*var(--s));white-space:nowrap}
.resBtns{display:flex;gap:calc(16*var(--s));margin-top:calc(6*var(--s))}
.resBtns .playBtn{flex:1;height:calc(88*var(--s))}
.resBtns .playBtn .u-block{justify-content:center;gap:calc(16*var(--s))}
.resBtns .playBtn b{font-size:clamp(calc(28*var(--s)),3.4vw,calc(40*var(--s)))}
.resBtns kbd{padding:calc(2*var(--s)) calc(8*var(--s));border:calc(2*var(--s)) solid var(--ink);font:800 calc(12*var(--s)) var(--ui);letter-spacing:calc(2*var(--s))}
.resBtns .ghost{height:calc(88*var(--s));width:calc(130*var(--s));font-size:calc(14*var(--s));letter-spacing:calc(2*var(--s))}
@media (max-width:900px),(max-aspect-ratio:1/1){
  .resWrap{grid-template-columns:minmax(0,1fr);gap:calc(12*var(--s))}
  .resPet .art{min-height:0;height:24vh}
  .resPet img{max-height:24vh}
  #resStats div{height:calc(46*var(--s))}#resStats b{font-size:calc(22*var(--s))}
  .resBtns{flex-wrap:wrap}.resBtns .playBtn{flex-basis:100%;height:calc(80*var(--s))}.resBtns .ghost{flex:1;height:calc(60*var(--s))}
}

/* ---------- menu extras ---------- */
.sheet.narrow{width:min(calc(460*var(--s)),100%)}
.menuList{display:grid;gap:calc(14*var(--s));margin-top:calc(22*var(--s))}
.gap12{height:calc(12*var(--s))}
.or.spaced{margin:calc(14*var(--s)) 0}

/* decorations sit in their own clipped layer so they never make a screen scroll */
.deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* small labels stay readable where the yellow stripe crosses them */
.styles .lbl,.pets>.lbl{display:inline-block;padding:calc(2*var(--s)) calc(8*var(--s));margin-left:calc(-8*var(--s));background:rgba(11,10,26,.72)}
#heroBlurb{text-shadow:0 calc(1*var(--s)) calc(2*var(--s)) rgba(0,0,0,.7),0 0 calc(10*var(--s)) rgba(11,10,26,.9)}

/* ---------- turn-sideways card (phones) ---------- */
.rotArt{display:flex;justify-content:center;padding:calc(26*var(--s)) 0 calc(8*var(--s))}
.rotArt .phone{width:calc(54*var(--s));height:calc(92*var(--s));border:calc(4*var(--s)) solid #fff;border-radius:calc(12*var(--s));position:relative;animation:turn 2.4s ease-in-out infinite;box-shadow:calc(6*var(--s)) calc(6*var(--s)) 0 var(--accent)}
.rotArt .phone i{position:absolute;inset:calc(8*var(--s)) calc(5*var(--s));background:var(--hot)}
.rotArt .phone::after{content:"";position:absolute;left:50%;bottom:calc(3*var(--s));width:calc(14*var(--s));height:calc(3*var(--s));margin-left:calc(-7*var(--s));background:var(--ink);border-radius:calc(2*var(--s))}
@keyframes turn{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
#rotate .sub{text-align:center}
.rotLock{margin:calc(10*var(--s)) 0 calc(18*var(--s));text-align:center;font-size:calc(13*var(--s));font-weight:700;color:var(--muted)}
#uprightBtn{height:calc(50*var(--s));font-size:calc(13*var(--s));letter-spacing:calc(2*var(--s))}

/* ---------- lobby extras: stats button row, profile chip, legal line ---------- */
.row3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row3 .ghost{font-size:calc(13*var(--s));letter-spacing:calc(2*var(--s))}
button.profile{text-align:left;cursor:pointer}
button.profile:hover{filter:brightness(.96)}
.legal{align-self:flex-start;margin:calc(-6*var(--s)) 0 0;padding:calc(3*var(--s)) calc(10*var(--s));background:rgba(11,10,26,.78);font-size:calc(12*var(--s));font-weight:700;color:#C9C3E6;letter-spacing:calc(.5*var(--s))}
.legalTop{display:none;margin:0;font-size:calc(10*var(--s));font-weight:700;color:var(--muted);white-space:nowrap}
.legalTop a{color:#fff;font-weight:800}
.legal a,.sheetLegal a{color:#fff;font-weight:800}
.sheetLegal{margin:calc(18*var(--s)) 0 0;font-size:calc(13*var(--s));font-weight:700;color:var(--muted)}
.textBtn{align-self:flex-end;padding:calc(6*var(--s)) 0;font-size:calc(13*var(--s));font-weight:800;letter-spacing:calc(2*var(--s));color:var(--hot);min-height:calc(36*var(--s))}
.textBtn:hover{text-decoration:underline}

/* ---------- My Stats ---------- */
.stHead{margin-top:calc(18*var(--s));display:flex;align-items:center;gap:calc(16*var(--s))}
.stHead img{width:calc(64*var(--s));height:calc(64*var(--s));object-fit:cover;background:#EFEAFF;transform:skewX(var(--skew));box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent)}
.stWho{flex:1;min-width:0}
.stWho b{display:block;font:400 calc(26*var(--s))/1.1 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stWho span{font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(3*var(--s));color:var(--accent2)}
.stWho .bar{margin-top:calc(6*var(--s));height:calc(14*var(--s));border:calc(2*var(--s)) solid #fff;background:rgba(255,255,255,.12);transform:skewX(-24deg);padding:calc(2*var(--s))}
.stWho .bar div{height:100%;background:var(--hot)}
.stWho small{display:block;margin-top:calc(4*var(--s));font-size:calc(11*var(--s));font-weight:800;letter-spacing:calc(1.5*var(--s));color:var(--muted)}
.kda{margin-top:calc(20*var(--s));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(12*var(--s))}
.kda .t{background:#fff;color:var(--ink);box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent);padding:calc(8*var(--s)) 0}
.kda .t.hot{background:var(--hot)}
.kda .u-block{display:flex;flex-direction:column;align-items:center}
.kda b{font:400 calc(34*var(--s))/1.05 var(--display)}
.kda small{font-size:calc(10.5*var(--s));font-weight:800;letter-spacing:calc(2*var(--s));text-align:center}
.stGrid{margin-top:calc(16*var(--s));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(10*var(--s))}
.stGrid .g{padding:calc(10*var(--s)) calc(12*var(--s));border:calc(2*var(--s)) solid rgba(255,255,255,.3);background:rgba(11,10,26,.35);min-width:0}
.stGrid b{display:block;font:400 calc(22*var(--s))/1.15 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stGrid small{display:block;margin-top:calc(2*var(--s));font-size:calc(10.5*var(--s));font-weight:800;letter-spacing:calc(1.5*var(--s));color:var(--muted)}
.stGrid .fav{display:flex;align-items:center;gap:calc(8*var(--s));font:400 calc(18*var(--s))/1.15 var(--display)}
.stGrid .fav img{width:calc(26*var(--s));height:calc(26*var(--s));object-fit:cover;background:#EFEAFF}
.stSub{margin:calc(22*var(--s)) 0 calc(8*var(--s));font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(3*var(--s));color:var(--hot)}
.hist{list-style:none;margin:0;padding:0;display:grid;gap:calc(6*var(--s))}
.hist li{display:grid;grid-template-columns:calc(34*var(--s)) minmax(0,1fr) calc(70*var(--s)) calc(70*var(--s)) calc(52*var(--s)) calc(72*var(--s));align-items:center;gap:calc(10*var(--s));padding:calc(6*var(--s)) calc(12*var(--s)) calc(6*var(--s)) calc(6*var(--s));background:rgba(11,10,26,.45);border-left:calc(4*var(--s)) solid var(--accent)}
.hist li.empty{display:block;padding:calc(14*var(--s));color:var(--muted);font-weight:700;border-left-color:rgba(255,255,255,.3)}
.hist img{width:calc(34*var(--s));height:calc(34*var(--s));object-fit:cover;background:#EFEAFF}
.hist .kd{font-size:calc(13*var(--s));font-weight:700;color:#E9E5FF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist .kd b{font:400 calc(17*var(--s)) var(--display);color:#fff}
.hist .kd i{font-style:normal;color:var(--muted)}
.hist .tm,.hist .pk,.hist .rk{font:400 calc(17*var(--s))/1 var(--display);text-align:center}
.hist small{display:block;margin-top:calc(3*var(--s));font:800 calc(8.5*var(--s)) var(--ui);letter-spacing:calc(1*var(--s));color:var(--muted)}
.hist .ago{font-size:calc(11*var(--s));font-weight:700;color:var(--muted);text-align:right}
.stNote{margin:calc(16*var(--s)) 0 0;font-size:calc(13*var(--s));font-weight:700;color:var(--muted)}

/* ---------- every screen size ----------
   Everything is sized in var(--s) units. Phones and small tablets use 1px; laptops, desktops and landscape
   tablets scale the whole UI with the window (1366x768 = 1px), so a 1920 monitor doesn't look empty and a
   1280x720 Chromebook doesn't look crowded. */
@media (min-width:901px) and (min-aspect-ratio:1/1) and (min-height:501px){
  :root{--s:clamp(.86px, min(100vw / 1366, 100vh / 768), 1.75px)}
}
@media (min-width:701px) and (max-aspect-ratio:1/1){
  :root{--s:clamp(1px, 100vw / 720, 1.35px)}
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,input,select,label{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img{-webkit-user-drag:none;-webkit-touch-callout:none}
#lobby,#results,#hud,#loading{-webkit-user-select:none;user-select:none}
#name{-webkit-user-select:text;user-select:text}
/* style diamonds are small: give them a finger-sized hit area */
#styles button{position:relative}
#styles button::after{content:"";position:absolute;inset:calc(-9*var(--s))}

/* touch screens have no hover: don't leave buttons stuck in their hover look after a tap */
@media (hover:none){
  .hotBtn:hover,.playBtn:hover{filter:none}
  .ghost:hover{background:rgba(11,10,26,.35)}
  .arrow:hover{background:var(--ink)}
  #kinds button:hover{border-color:rgba(255,255,255,.35)}
  #kinds button[aria-checked="true"]:hover{border-color:var(--hot)}
  }

/* phones in portrait: bigger pet buttons (3 rows of 6 instead of 2 rows of 8), one-line top bar,
   and a results screen that fits without scrolling */
@media (max-width:480px) and (max-aspect-ratio:1/1){
  .topbar{flex-wrap:nowrap}
  .logo small{font-size:calc(9*var(--s));letter-spacing:calc(4*var(--s))}
  #signinBtn{display:none}
  .logo h1{font-size:clamp(calc(18*var(--s)),5.4vw,calc(23*var(--s)))}
  .profile{min-width:0;flex-shrink:1;padding:calc(3*var(--s)) calc(12*var(--s)) calc(3*var(--s)) calc(3*var(--s));gap:calc(8*var(--s))}
  .profile img{width:calc(32*var(--s));height:calc(32*var(--s))}
  .profile .u{min-width:0}
  .profile b{max-width:calc(108*var(--s));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .profile span span{white-space:nowrap;letter-spacing:calc(1*var(--s))}
  .profile b{font-size:calc(13*var(--s))}
  .heroName{flex-wrap:wrap;row-gap:calc(6*var(--s))}
  .typeSlab .u{white-space:nowrap;font-size:calc(12*var(--s));letter-spacing:calc(1*var(--s))}
  .playBtn small{font-size:calc(10.5*var(--s));letter-spacing:calc(1*var(--s))}
  .resWrap{gap:calc(10*var(--s))}
  .resPet{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:end;gap:calc(8*var(--s))}
  .resPet .art{height:min(20vh,calc(170*var(--s)))}
  .resPet img{max-height:100%}
  .resPet .nameSlab{margin:0 0 calc(10*var(--s));padding:calc(5*var(--s)) calc(14*var(--s))}
  .resPet .nameSlab{min-width:0;max-width:100%;justify-self:start}
  .resPet .nameSlab .u{display:block;font-size:calc(17*var(--s));max-width:100%}
  #resName{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .resPet .nameSlab small{font-size:calc(9.5*var(--s));letter-spacing:calc(1*var(--s));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .resMain{gap:calc(10*var(--s))}
  #resTitle{font-size:calc(40*var(--s))}
  #resStats{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(6*var(--s))}
  #resStats div{height:calc(50*var(--s))}
  #resStats .u-block{flex-direction:column-reverse;justify-content:center;gap:0;padding:0 calc(4*var(--s))}
  #resStats small{font-size:calc(8*var(--s));letter-spacing:calc(.5*var(--s));white-space:nowrap}#resStats b{font-size:calc(20*var(--s));line-height:1.05}
  .guestNote span{font-size:calc(12.5*var(--s))}
  .resBtns kbd{display:none}
  #kinds{grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(9*var(--s)) calc(7*var(--s))}
  .who{gap:calc(8*var(--s));min-width:0}
  .playBtn .u-block{padding:0 calc(22*var(--s))}
  .playBtn b{font-size:calc(46*var(--s))}
  .playBtn svg{width:calc(48*var(--s));height:auto}
  .row3 .ghost{font-size:calc(11*var(--s));letter-spacing:calc(1*var(--s));height:calc(48*var(--s))}
  .kda{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hist li{grid-template-columns:calc(30*var(--s)) minmax(0,1fr) calc(46*var(--s)) calc(40*var(--s)) calc(34*var(--s));gap:calc(6*var(--s))}
  .hist .ago{display:none}
  .hist .kd{white-space:normal;font-size:calc(11*var(--s));line-height:1.3}
}
@media (max-width:480px) and (max-height:760px) and (max-aspect-ratio:1/1){
  .heroArt{height:min(23vh,calc(200*var(--s)))}
  .nameSlab .u{font-size:calc(28*var(--s))}
  #heroBlurb{font-size:calc(13*var(--s));margin-top:calc(8*var(--s))}
  .styles{margin-top:calc(8*var(--s))}
  .tab{display:none}
  .playBtn{height:calc(84*var(--s))}
  .resWrap{padding-top:max(calc(14*var(--s)),var(--sat))}
  .resPet .art{height:min(17vh,calc(150*var(--s)))}
  #resTitle{font-size:calc(31*var(--s))}
  #resBy span{font-size:calc(14*var(--s))}
  .resMain{gap:calc(8*var(--s))}
  .resBtns .playBtn{height:calc(66*var(--s))}.resBtns .ghost{height:calc(50*var(--s))}
  .resMain{gap:calc(7*var(--s))}.textBtn{min-height:calc(24*var(--s));padding:0}
}
/* touch tablets: the round button owns the bottom-right corner, so the connection label goes and the tip can wrap */
@media (pointer:coarse){#net{display:none}.resBtns kbd{display:none}}
@media (pointer:coarse) and (min-width:701px){#hint{white-space:normal;max-width:calc(100vw - calc(300*var(--s)))}}
/* iPad portrait: keep the single column from stretching edge to edge */
@media (min-width:701px) and (max-aspect-ratio:1/1){
  #lobby>.topbar,#lobby>.hero,#lobby>.menu,#lobby>.pets{width:100%;max-width:calc(620*var(--s));margin-left:auto;margin-right:auto}
  .heroArt{height:min(30vh,calc(300*var(--s)))}
  .resWrap{max-width:calc(680*var(--s));margin:0 auto}
}

/* ---------- phones held sideways (short landscape) ---------- */
@media (orientation:landscape) and (max-height:500px){
  /* lobby: two columns, everything on one screen */
  #lobby{display:grid;overflow:hidden auto;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"top top" "hero menu" "hero pets";column-gap:calc(18*var(--s));row-gap:calc(6*var(--s));
    padding:max(calc(8*var(--s)),var(--sat)) max(calc(14*var(--s)),var(--sar)) max(calc(8*var(--s)),var(--sab)) max(calc(14*var(--s)),var(--sal))}
  .band{top:40%;height:28vh}.kana{font-size:calc(90*var(--s))}
  .topbar{flex-wrap:nowrap}
  .logo small{font-size:calc(9*var(--s));letter-spacing:calc(4*var(--s))}
  .logo h1,#loading .logo .h1{font-size:calc(22*var(--s));text-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--accent)}
  .profile{padding:calc(2*var(--s)) calc(12*var(--s)) calc(2*var(--s)) calc(2*var(--s))}
  .profile img{width:calc(30*var(--s));height:calc(30*var(--s))}
  .profile b{font-size:calc(12*var(--s))}.profile span span{font-size:calc(9*var(--s))}
  .hotBtn{height:calc(40*var(--s));padding:0 calc(14*var(--s));font-size:calc(12*var(--s))}
  .hero{flex:1;min-height:0}
  .heroArt{height:auto;flex:1;min-height:0;padding-top:0}
  .heroArt img{max-height:100%;max-width:100%}
  .arrow{top:30%;width:calc(44*var(--s));height:calc(44*var(--s))}
  .arrow.next{right:0}
  .heroName{margin-top:calc(-12*var(--s))}
  .nameSlab{padding:calc(3*var(--s)) calc(16*var(--s));box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent)}
  .nameSlab .u{font-size:calc(24*var(--s))}
  .typeSlab{padding:calc(2*var(--s)) calc(10*var(--s))}.typeSlab .u{font-size:calc(11*var(--s))}
  #heroBlurb{display:none}
  .styles{margin-top:calc(6*var(--s));gap:calc(10*var(--s))}
  .styles .lbl{font-size:calc(10*var(--s));letter-spacing:calc(2*var(--s))}
  #styles{gap:calc(14*var(--s))}#styles button{width:calc(24*var(--s));height:calc(24*var(--s))}#styles button::after{inset:calc(-5*var(--s))}
  .menu{gap:calc(8*var(--s));justify-content:flex-end}
  .tab,#mode,.saveCard,.also,.pets>.lbl{display:none}
  .nameRow input{height:calc(44*var(--s));font-size:calc(18*var(--s));padding:0 calc(14*var(--s))}
  .nameRow button{width:calc(44*var(--s));height:calc(44*var(--s))}
  #nameMsg{min-height:0;margin:calc(2*var(--s)) 0 0;font-size:calc(11*var(--s))}
  #nameMsg:empty{margin:0}
  .playBtn{height:calc(62*var(--s));box-shadow:calc(7*var(--s)) calc(7*var(--s)) 0 var(--accent)}
  .playBtn .u-block{padding:0 calc(20*var(--s))}
  .playBtn b{font-size:calc(38*var(--s))}.playBtn small{font-size:calc(10*var(--s));letter-spacing:calc(1*var(--s))}
  .playBtn svg{width:calc(42*var(--s));height:auto}
  .row2{gap:calc(10*var(--s))}.row2 .ghost{height:calc(40*var(--s));font-size:calc(12*var(--s));letter-spacing:calc(2*var(--s))}
  .row3 .ghost{font-size:calc(11*var(--s));letter-spacing:calc(1*var(--s))}
  .legal{display:none}.legalTop{display:block}
  .textBtn{padding:0;min-height:calc(28*var(--s));font-size:calc(11*var(--s))}
  .kda b{font-size:calc(26*var(--s))}.stGrid b{font-size:calc(18*var(--s))}
  .pets{align-self:end}
  #kinds{margin-top:0;grid-template-columns:repeat(8,minmax(0,1fr));gap:calc(5*var(--s)) calc(5*var(--s));max-width:none}
  #kinds button{max-width:none}

  /* modals */
  .sheet{max-height:calc(100dvh - calc(16*var(--s)))}
  .modal{padding-top:max(calc(8*var(--s)),var(--sat));padding-bottom:max(calc(8*var(--s)),var(--sab))}

  /* loading */
  #loading .logo{top:max(calc(12*var(--s)),var(--sat))}
  #loadPet{top:10%;height:52vh;width:min(32vw,calc(260*var(--s)))}
  #loadTip{display:none}
  #loadText{bottom:calc(64*var(--s));font-size:calc(30*var(--s))}
  #loadBar{bottom:calc(30*var(--s));left:max(calc(16*var(--s)),var(--sal));width:min(calc(480*var(--s)),calc(100vw - calc(160*var(--s))));height:calc(18*var(--s))}
  #loadPct{bottom:calc(26*var(--s));left:calc(max(calc(16*var(--s)),var(--sal)) + min(calc(480*var(--s)),calc(100vw - calc(160*var(--s)))) + calc(16*var(--s)));font-size:calc(22*var(--s))}

  /* in-game HUD: small panels in the corners, button bottom-right, tip bottom-centre */
  .hudTop{left:max(calc(10*var(--s)),var(--sal));top:max(calc(8*var(--s)),var(--sat));gap:calc(6*var(--s))}
  #stats{gap:calc(6*var(--s))}#stats .s{min-width:calc(54*var(--s));padding:calc(2*var(--s)) calc(9*var(--s));box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--accent)}
  #stats b{font-size:calc(18*var(--s))}#stats small{font-size:calc(8.5*var(--s));letter-spacing:calc(1.5*var(--s))}
  #menuBtn{width:calc(38*var(--s));height:calc(38*var(--s))}
  #lbCard{width:calc(176*var(--s));right:max(calc(10*var(--s)),var(--sar));top:max(calc(8*var(--s)),var(--sat))}
  .lbHead{padding:calc(3*var(--s)) calc(12*var(--s));box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--ink)}.lbHead b{font-size:calc(13*var(--s))}.lbHead small{display:none}
  #lb{gap:calc(3*var(--s));margin-top:calc(5*var(--s))}#lb li{height:calc(22*var(--s))}#lb li .u-block{gap:calc(6*var(--s));padding:0 calc(8*var(--s))}
  #lb .nm{font-size:calc(11.5*var(--s))}#lb img{width:calc(17*var(--s));height:calc(17*var(--s))}#lb .rk{width:calc(18*var(--s))}#lb .rk,#lb .sc{font-size:calc(12*var(--s))}
  #lb li:nth-child(n+6):not(.me){display:none}#lb li.gap{margin-top:calc(4*var(--s))}
  #toast{top:18%}#toast .big{font-size:calc(36*var(--s))}#toast .small{margin-top:calc(6*var(--s))}
  #hint{left:50%;top:auto;bottom:max(calc(10*var(--s)),var(--sab));transform:translateX(-50%) skewX(var(--skew));max-width:min(calc(420*var(--s)),calc(100vw - calc(380*var(--s))));white-space:normal;padding:calc(4*var(--s)) calc(12*var(--s)) calc(4*var(--s)) calc(5*var(--s));gap:calc(8*var(--s))}
  #hint kbd{font-size:calc(10*var(--s));padding:calc(2*var(--s)) calc(6*var(--s));letter-spacing:calc(1*var(--s))}#hint span{font-size:calc(11*var(--s));line-height:1.25}
  #net{display:none}
    #actBtn{width:calc(80*var(--s));height:calc(80*var(--s));font-size:calc(15*var(--s));right:max(calc(18*var(--s)),calc(var(--sar) + calc(6*var(--s))));bottom:max(calc(18*var(--s)),calc(var(--sab) + calc(8*var(--s))))}

  /* results: pet on the left, everything else on the right, no scrolling */
  .resWrap{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:calc(16*var(--s));align-items:stretch;
    padding:max(calc(10*var(--s)),var(--sat)) max(calc(16*var(--s)),var(--sar)) max(calc(10*var(--s)),var(--sab)) max(calc(16*var(--s)),var(--sal))}
  .resPet .art{min-height:0;height:auto}
  .resPet img{max-height:62vh}
  .resPet .nameSlab .u{font-size:calc(18*var(--s))}.resPet .nameSlab small{font-size:calc(10*var(--s))}
  .resMain{gap:calc(7*var(--s))}
  .resMain .over{font-size:calc(10*var(--s));letter-spacing:calc(3*var(--s))}
  #resTitle{font-size:calc(34*var(--s));text-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--ink),calc(6*var(--s)) calc(6*var(--s)) 0 var(--accent)}
  #resBy{padding:calc(2*var(--s)) calc(12*var(--s)) calc(2*var(--s)) calc(2*var(--s))}#resBy img{width:calc(24*var(--s));height:calc(24*var(--s))}#resBy span{font-size:calc(13*var(--s))}
  #resStats{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(8*var(--s))}
  #resStats div{height:calc(46*var(--s))}
  #resStats .u-block{flex-direction:column-reverse;justify-content:center;gap:0;padding:0 calc(6*var(--s))}
  #resStats small{font-size:calc(8.5*var(--s));letter-spacing:calc(1*var(--s));white-space:nowrap}#resStats b{font-size:calc(20*var(--s));line-height:1.05}
  .xp{margin-top:0}.xp .row{font-size:calc(11*var(--s))}.xp .gain{font-size:calc(16*var(--s))}.xp .bar{height:calc(14*var(--s));margin-top:calc(3*var(--s));padding:calc(2*var(--s))}
  .guestNote .u-block{padding:calc(5*var(--s)) calc(6*var(--s)) calc(5*var(--s)) calc(14*var(--s));gap:calc(10*var(--s))}
  .guestNote span{font-size:calc(11.5*var(--s));line-height:1.25}.guestNote button{height:calc(36*var(--s));font-size:calc(12*var(--s))}
  .resBtns{flex-wrap:nowrap;gap:calc(10*var(--s));margin-top:calc(2*var(--s))}
  .resBtns .playBtn{flex:1;flex-basis:auto;height:calc(56*var(--s))}.resBtns .playBtn b{font-size:calc(26*var(--s))}
  .resBtns kbd{display:none}
  .resBtns .ghost{flex:none;height:calc(56*var(--s));width:calc(96*var(--s));font-size:calc(11*var(--s));letter-spacing:calc(1*var(--s))}
}

/* ---------- motion ---------- */
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0) rotate(-3deg)}50%{transform:translateX(-50%) translateY(-12px) rotate(-1deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes popIn{0%{transform:translateY(calc(12*var(--s))) scale(.75,1.2)}60%{transform:translateY(-6px) scale(1.06,.95)}100%{transform:none}}
@keyframes toast{0%{opacity:0;transform:translateX(-50%) scale(1.4)}12%{opacity:1;transform:translateX(-50%) scale(.96)}20%{transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}
@keyframes slideIn{from{transform:translateX(-50px) skewX(var(--skew));opacity:0}to{transform:skewX(var(--skew));opacity:1}}
@keyframes streak{from{transform:translateX(110vw) rotate(-12deg)}to{transform:translateX(-120vw) rotate(-12deg)}}
.lines.move i{animation:streak 1.1s linear infinite}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
  #toast.on{animation:none;opacity:1}
}