/* 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}
.controls .wideCtl{grid-column:1/-1}
@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{position:relative;z-index:2;align-self:flex-start;margin: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))}
}

/* laptops and desktops: while a friend's invite waits in the lobby, it takes the save card's place (both don't fit) */
@media (min-width:901px) and (min-aspect-ratio:1/1){
  #lobby .menu{justify-content:safe center}
  #lobby .menu:has(#inviteBanner:not([hidden])) .saveCard{display:none}
}
/* ---------- short laptop screens ----------
   Chromebooks lose 100-170 px to the browser's tabs and bars (1366x625, 1280x600, 1024x600 windows). The lobby's
   right column tightens its spacing so the name, PLAY, the buttons and the save card sit clear of the pet grid. */
@media (min-width:901px) and (min-aspect-ratio:1/1) and (min-height:501px) and (max-height:700px){
  #lobby{padding-top:max(calc(16*var(--s)),var(--sat))}
  #lobby .menu{gap:calc(12*var(--s))}
  #lobby .tab{margin-bottom:calc(4*var(--s))}
  #nameMsg{min-height:calc(14*var(--s));margin-top:calc(4*var(--s));font-size:calc(12*var(--s))}
  #lobby .playBtn{height:calc(92*var(--s))}
  #lobby .row2 .ghost{height:calc(48*var(--s))}
  .saveCard .u-block{padding-top:calc(9*var(--s));padding-bottom:calc(9*var(--s))}
  .saveCard button{height:calc(40*var(--s))}
  .inviteBanner .u-block{padding-top:calc(7*var(--s));padding-bottom:calc(7*var(--s))}
  #kinds{margin-top:calc(6*var(--s))}
  /* results: a little less air between the rows */
  .resMain{gap:calc(11*var(--s))}
}

/* ---------- connection status, short notes, invite links, what's new ---------- */
/* status slab ("RECONNECTING…" / "OFFLINE · TRY AGAIN") and notes ("BACK ONLINE", "LINK COPIED") sit top-centre,
   under the HUD's top row, above the results screen and below modals; they never block the game view */
#netNotes{position:fixed;z-index:35;left:50%;top:calc(max(calc(16*var(--s)),var(--sat)) + calc(70*var(--s)));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--s));
  width:max-content;max-width:calc(100vw - calc(32*var(--s)));pointer-events:none}
#netStatus,#notice{max-width:100%;padding:calc(7*var(--s)) calc(18*var(--s));background:#fff;color:var(--ink);box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent)}
#netStatus .u{display:flex;align-items:center;gap:calc(10*var(--s));white-space:nowrap}
#netStatus b{font:400 calc(16*var(--s))/1.2 var(--display);letter-spacing:calc(1*var(--s))}
.spin{flex:none;width:calc(16*var(--s));height:calc(16*var(--s));border:calc(3*var(--s)) solid rgba(11,10,26,.18);border-top-color:var(--accent-ink);border-radius:50%;animation:spin .75s linear infinite}
#netStatus.lost{background:var(--hot);box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--ink)}
#netStatus.lost .spin{display:none}
#netRetry{pointer-events:auto;height:calc(32*var(--s));margin-left:calc(4*var(--s));padding:0 calc(12*var(--s));background:var(--ink);color:#fff;font-size:calc(12*var(--s));letter-spacing:calc(2*var(--s))}
#notice .u{display:block;font-size:calc(14*var(--s));font-weight:800;letter-spacing:calc(2*var(--s));text-align:center;overflow-wrap:anywhere}
#notice.on{animation:noteIn .25s ease-out}
body:has(#results:not([hidden])) #netNotes{top:max(calc(10*var(--s)),var(--sat))} /* results: keep clear of the title */
@keyframes noteIn{from{opacity:0;transform:skewX(var(--skew)) translateY(calc(-10*var(--s)))}to{opacity:1;transform:skewX(var(--skew))}}
@keyframes spin{to{transform:rotate(360deg)}}

/* HUD: INVITE next to the menu button (icon only on small screens) */
#inviteBtn{pointer-events:auto;height:calc(46*var(--s));padding:0 calc(14*var(--s));border:calc(2*var(--s)) solid #fff;color:#fff;background:var(--accent);transform:skewX(var(--skew));display:flex;align-items:center;justify-content:center;box-shadow:calc(4*var(--s)) calc(4*var(--s)) 0 var(--ink)}
#inviteBtn .u{display:flex;align-items:center;gap:calc(8*var(--s))}
#inviteBtn b{font-size:calc(13*var(--s));letter-spacing:calc(2*var(--s))}
#inviteBtn:hover{filter:brightness(1.1)}
#menuInvite{border-color:var(--hot);color:var(--hot)}

/* lobby: invite banner over the name and PLAY, and the what's-new buttons */
.inviteBanner{background:#fff;color:var(--ink);box-shadow:calc(6*var(--s)) calc(6*var(--s)) 0 var(--hot);animation:slideIn .45s ease-out both}
.inviteBanner .u-block{display:flex;align-items:center;gap:calc(12*var(--s));padding:calc(10*var(--s)) calc(18*var(--s));font-size:calc(13*var(--s));font-weight:800;letter-spacing:calc(1.5*var(--s));line-height:1.3}
.inviteBanner svg{flex:none;width:calc(24*var(--s));height:calc(24*var(--s));color:var(--accent-ink)}
.inviteBanner b{display:block;font:400 calc(17*var(--s))/1.15 var(--display);letter-spacing:0;color:var(--accent-ink)}
.modeRow{display:flex;align-items:center;gap:calc(12*var(--s));flex-wrap:wrap}
.modeRow #mode{align-self:center}
.newsBtn{flex:none;height:calc(30*var(--s));padding:0 calc(12*var(--s));background:rgba(11,10,26,.78);border:calc(2*var(--s)) solid var(--hot);color:var(--hot);font-size:calc(12*var(--s));letter-spacing:calc(2*var(--s));white-space:nowrap}
.newsBtn .u{display:inline-flex;align-items:center;gap:calc(6*var(--s))}
.newsBtn:hover{background:var(--hot);color:var(--ink)}
.who .newsBtn{height:calc(40*var(--s))}
#newsLink{display:none} /* the top-bar button covers every layout except upright phones */

/* what's new card */
.sheet.newsSheet{width:min(calc(560*var(--s)),100%)}
#newsList{margin-top:calc(20*var(--s));display:grid;gap:calc(14*var(--s))}
.newsItem{padding:calc(14*var(--s)) calc(20*var(--s)) calc(16*var(--s));border:calc(2*var(--s)) solid rgba(255,255,255,.25);background:rgba(0,0,0,.22)}
.newsItem.old{opacity:.72}
.newsHead{display:flex;align-items:center;gap:calc(12*var(--s))}
.newsHead .ver{padding:calc(2*var(--s)) calc(12*var(--s));background:var(--hot);color:var(--ink);font:400 calc(15*var(--s)) var(--display)}
.newsHead time{font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(2*var(--s));color:var(--muted)}
.newsItem h3{margin:calc(10*var(--s)) 0 calc(10*var(--s));font:400 calc(22*var(--s))/1.15 var(--display)}
.newsItem ul{margin:0;padding:0;list-style:none;display:grid;gap:calc(8*var(--s))}
.newsItem li{position:relative;padding-left:calc(22*var(--s));font-size:calc(15*var(--s));font-weight:700;line-height:1.35;color:#E9E5FF}
.newsItem li::before{content:"";position:absolute;left:0;top:calc(6*var(--s));width:calc(10*var(--s));height:calc(10*var(--s));background:var(--hot);transform:skewX(var(--skew))}
#newsOk{margin-top:calc(18*var(--s))}

/* connection-lost card */
#lost .sub{margin-top:calc(18*var(--s))}
#lost .row2 .ghost{height:calc(52*var(--s))}

/* "servers are busy" / "too many players from your network" card: the connection-lost card's look */
.busyNote{display:inline-block;margin:calc(18*var(--s)) 0 0 calc(-4*var(--s));padding:calc(5*var(--s)) calc(16*var(--s));background:var(--hot);color:var(--ink);box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent)}
.busyNote .u{font:400 calc(16*var(--s))/1.2 var(--display);letter-spacing:calc(1*var(--s))}
#busy .sub{margin-top:calc(14*var(--s))}
#busy h2{font-size:clamp(calc(24*var(--s)),3vw,calc(32*var(--s)))}

/* Privacy Policy / Terms inside the game (portal builds that don't allow links out) */
.linkBtn{display:inline;min-height:0;padding:0;font:inherit;font-weight:800;letter-spacing:inherit;color:#fff;text-decoration:underline;cursor:pointer}
.sheet.legalSheet{width:min(calc(820*var(--s)),100%)}
.legalDoc{margin-top:calc(18*var(--s));padding:clamp(calc(16*var(--s)),3vw,calc(30*var(--s)));background:#fff;color:#16132E;font-size:calc(15*var(--s));font-weight:500;line-height:1.55;-webkit-user-select:text;user-select:text}
.legalDoc h1{margin:0;font:400 calc(28*var(--s))/1.1 var(--display)}
.legalDoc h2{margin:calc(24*var(--s)) 0 calc(6*var(--s));font:400 calc(19*var(--s))/1.2 var(--display)}
.legalDoc h3{margin:calc(16*var(--s)) 0 calc(4*var(--s));font-size:calc(16*var(--s));font-weight:800}
.legalDoc p,.legalDoc ul{margin:calc(8*var(--s)) 0}
.legalDoc ul{padding-left:1.2em}
.legalDoc .updated{margin-top:calc(4*var(--s));color:#55507A;font-weight:700}
.legalDoc .short{margin:calc(16*var(--s)) 0;padding:calc(12*var(--s)) calc(16*var(--s));background:#F3F0FF;border-left:calc(5*var(--s)) solid var(--accent)}
.legalDoc .short h2{margin-top:0}
.legalDoc .contact{margin-top:calc(10*var(--s));padding:calc(10*var(--s)) calc(14*var(--s));background:#FFF9D6;border-left:calc(5*var(--s)) solid var(--hot)}
.legalDoc .contact p{margin:calc(2*var(--s)) 0}
.legalDoc table{border-collapse:collapse;width:100%;margin:calc(10*var(--s)) 0;font-size:calc(14*var(--s))}
.legalDoc th,.legalDoc td{text-align:left;vertical-align:top;padding:calc(6*var(--s)) calc(8*var(--s));border-bottom:calc(1*var(--s)) solid #E2DEF2}
.legalDoc th{background:#F3F0FF;font-weight:800}

/* results: the friend button is a little wider so its label fits on two lines */
.resBtns #resInvite{width:calc(150*var(--s));border-color:var(--hot);color:var(--hot)}

@media (hover:none){.newsBtn:hover{background:rgba(11,10,26,.78);color:var(--hot)}#inviteBtn:hover{filter:none}}
/* phones and narrow windows */
@media (max-width:700px){
  #netNotes{top:38%}
  #inviteBtn{width:calc(38*var(--s));height:calc(38*var(--s));padding:0}
  #inviteBtn b{display:none}
  #inviteBtn svg{width:calc(18*var(--s));height:calc(18*var(--s))}
}
/* upright screens: the top bar is full, so what's new moves to the line under the lobby buttons */
@media (max-aspect-ratio:1/1){
  .who .newsBtn{display:none}
  #newsLink{display:inline-block}
}
@media (max-width:480px) and (max-aspect-ratio:1/1){
  .inviteBanner .u-block{padding:calc(9*var(--s)) calc(14*var(--s));font-size:calc(12*var(--s));letter-spacing:calc(1*var(--s))}
  .resBtns #resInvite{width:auto}
  .resBtns .ghost{font-size:calc(12*var(--s));letter-spacing:calc(1*var(--s))}
  .newsItem{padding:calc(12*var(--s)) calc(14*var(--s)) calc(14*var(--s))}
  .newsItem li{font-size:calc(14*var(--s))}
}
/* phones held sideways */
@media (orientation:landscape) and (max-height:500px){
  .modeRow{display:none}
  #netNotes{top:calc(max(calc(8*var(--s)),var(--sat)) + calc(50*var(--s)));max-width:max(calc(260*var(--s)),calc(100vw - calc(404*var(--s))))} /* clear of the leaderboard */
  #netStatus,#notice{padding:calc(5*var(--s)) calc(14*var(--s))}
  #netStatus b{font-size:calc(13*var(--s))}#notice .u{font-size:calc(12*var(--s));letter-spacing:calc(1*var(--s))}
  #netRetry{height:calc(28*var(--s));font-size:calc(11*var(--s))}
  #inviteBtn{width:calc(38*var(--s));height:calc(38*var(--s));padding:0;box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--ink)}
  #inviteBtn b{display:none}
  #inviteBtn svg{width:calc(18*var(--s));height:calc(18*var(--s))}
  .who .newsBtn{height:calc(34*var(--s));font-size:calc(11*var(--s));letter-spacing:calc(1*var(--s))}
  .inviteBanner{box-shadow:calc(4*var(--s)) calc(4*var(--s)) 0 var(--hot)}
  .inviteBanner .u-block{padding:calc(5*var(--s)) calc(12*var(--s));gap:calc(8*var(--s));font-size:calc(10.5*var(--s));letter-spacing:calc(.5*var(--s));line-height:1.25}
  .inviteBanner svg{width:calc(18*var(--s));height:calc(18*var(--s))}
  .inviteBanner b{font-size:calc(13*var(--s))}
  .resBtns #resInvite{width:calc(104*var(--s))}
  #newsList{margin-top:calc(12*var(--s));gap:calc(10*var(--s))}
  .newsItem{padding:calc(10*var(--s)) calc(14*var(--s)) calc(12*var(--s))}
  .newsItem h3{font-size:calc(18*var(--s));margin:calc(6*var(--s)) 0}
  .newsItem li{font-size:calc(13*var(--s))}
  .newsItem ul{gap:calc(5*var(--s))}
  #newsOk,#lostRetry{height:calc(50*var(--s));font-size:calc(20*var(--s))}
  #newsOk{margin-top:calc(12*var(--s))}
  #lost .sub{margin-top:calc(12*var(--s));font-size:calc(14*var(--s))}
  #lost .menuList{margin-top:calc(14*var(--s));gap:calc(10*var(--s))}
  #lost .row2 .ghost{height:calc(44*var(--s))}
  #busy .sheet.narrow{width:min(calc(600*var(--s)),100%)}
  #busy h2{font-size:calc(21*var(--s))}
  .busyNote{margin-top:calc(12*var(--s))}.busyNote .u{font-size:calc(13*var(--s))}
  #busy .sub{margin-top:calc(10*var(--s));font-size:calc(14*var(--s))}
  #busy .menuList{margin-top:calc(14*var(--s));grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:calc(12*var(--s))}
  #busyPractice{height:calc(50*var(--s));font-size:calc(20*var(--s))}
  #busyLobby{height:calc(50*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}
}

/* ---------- sound controls: speaker buttons (HUD, lobby) and the SOUND section of the game menu ---------- */
#sndBtn{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}
#sndBtn svg{transform:skewX(var(--unskew))}
#lobbySnd{flex:none;box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent)}
#lobbySnd:hover{background:rgba(255,255,255,.12)}
.sndToggle svg{width:calc(22*var(--s));height:calc(22*var(--s))}
.sndToggle.off{color:var(--hot);border-color:var(--hot)}
.sndToggle .i-off,.sndToggle.off .i-on{display:none}
.sndToggle.off .i-off{display:inline}
#soundPick+#floorPick{margin-top:calc(16*var(--s));padding-top:calc(12*var(--s))}
#soundPick{margin-top:calc(18*var(--s));padding-top:calc(12*var(--s));border-top:calc(2*var(--s)) solid rgba(255,255,255,.18)}
.volRow{display:grid;grid-template-columns:calc(92*var(--s)) minmax(0,1fr) calc(34*var(--s));align-items:center;gap:calc(12*var(--s));margin-top:calc(6*var(--s))}
.volRow label{font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(2*var(--s));white-space:nowrap}
.volRow output{font:400 calc(16*var(--s)) var(--display);color:var(--hot);text-align:right}
.vol{--p:60%;-webkit-appearance:none;appearance:none;width:100%;height:calc(32*var(--s));margin:0;padding:0;background:transparent;cursor:pointer;transform:skewX(var(--skew));touch-action:pan-y}
.vol::-webkit-slider-runnable-track{height:calc(16*var(--s));border:calc(2*var(--s)) solid #fff;background:linear-gradient(90deg,var(--hot) var(--p),rgba(255,255,255,.12) var(--p))}
.vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:calc(16*var(--s));height:calc(30*var(--s));margin-top:calc(-9*var(--s));border:calc(2*var(--s)) solid var(--ink);border-radius:0;background:#fff;box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--accent)}
.vol::-moz-range-track{height:calc(12*var(--s));border:calc(2*var(--s)) solid #fff;background:rgba(255,255,255,.12)}
.vol::-moz-range-progress{height:calc(12*var(--s));background:var(--hot)}
.vol::-moz-range-thumb{width:calc(12*var(--s));height:calc(26*var(--s));border:calc(2*var(--s)) solid var(--ink);border-radius:0;background:#fff;box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--accent)}
.soundHead{display:flex;align-items:center;justify-content:space-between;gap:calc(12*var(--s));margin-bottom:calc(4*var(--s))}
.muteAll{height:calc(38*var(--s));padding:0 calc(16*var(--s));font-size:calc(12*var(--s));letter-spacing:calc(2*var(--s));white-space:nowrap}
.muteAll .u{display:inline-flex;align-items:center;gap:calc(10*var(--s))}
.muteAll small{font-size:calc(10*var(--s));letter-spacing:calc(1*var(--s));opacity:.7}
.muteAll .tick{display:inline-block;width:calc(15*var(--s));height:calc(15*var(--s));border:calc(2*var(--s)) solid currentColor}
.muteAll[aria-pressed="true"]{background:var(--hot);color:var(--ink);border-color:var(--hot)}
.muteAll[aria-pressed="true"] .tick{background:var(--ink);box-shadow:inset 0 0 0 calc(3*var(--s)) var(--hot)}
@media (hover:none){.muteAll small{display:none}#lobbySnd:hover{background:rgba(11,10,26,.35)}.muteAll[aria-pressed="true"]:hover{background:var(--hot)}}
@media (max-width:900px),(max-aspect-ratio:1/1){#lobbySnd{width:calc(40*var(--s));height:calc(40*var(--s))}}
@media (max-width:700px){#sndBtn{width:calc(38*var(--s));height:calc(38*var(--s))}}
/* upright phones: the speaker shares the one-line top bar with the logo and profile chip, so the logo gives a little;
   in the menu the floor test buttons go three to a row */
@media (max-width:480px) and (max-aspect-ratio:1/1){
  #floors{grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8*var(--s))}
  #floors button{font-size:calc(11*var(--s));letter-spacing:calc(1*var(--s))}
  #lobbySnd{width:calc(34*var(--s));height:calc(34*var(--s));box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--accent)}
  .sndToggle svg{width:calc(19*var(--s));height:calc(19*var(--s))}
  #lobby .topbar{gap:calc(10*var(--s))}
  #lobby .logo h1{font-size:clamp(calc(16*var(--s)),4.6vw,calc(21*var(--s)))}
  #lobby .logo small{letter-spacing:calc(3*var(--s))}
  .profile{padding-right:calc(10*var(--s))}
}
/* short landscape screens (phones sideways, small laptop windows): the game menu splits into two columns */
@media (orientation:landscape) and (max-height:660px){
  #menu .sheet{width:min(calc(760*var(--s)),100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:calc(24*var(--s));align-content:start;padding-bottom:calc(16*var(--s))}
  #menu .sheetTop{grid-column:1/-1}
  #menu .menuList{grid-column:1;grid-row:2/span 2;align-self:start}
  #soundPick{grid-column:2;padding-top:0;border-top:0}
  #floorPick,#soundPick+#floorPick{grid-column:2}
}
/* phones sideways: smaller buttons and tighter spacing so the menu fits without scrolling */
@media (orientation:landscape) and (max-height:500px){
  #sndBtn,#lobbySnd{width:calc(38*var(--s));height:calc(38*var(--s))}
  #lobbySnd{box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--accent)}
  #menu .sheetTop{padding-top:calc(12*var(--s))}
  #menu .sheet h2{font-size:calc(24*var(--s))}
  #menu .menuList{margin-top:calc(14*var(--s));gap:calc(10*var(--s))}
  #menu .menuList .guestBtn{height:calc(50*var(--s));font-size:calc(20*var(--s))}
  #menu .menuList .ghost{height:calc(44*var(--s));font-size:calc(13*var(--s))}
  #soundPick{margin-top:calc(10*var(--s))}
  .volRow{margin-top:calc(4*var(--s))}
  .muteAll{height:calc(34*var(--s))}
  #floorPick,#soundPick+#floorPick{margin-top:calc(12*var(--s));padding-top:calc(10*var(--s))}
  #floors{grid-template-columns:repeat(auto-fill,minmax(calc(96*var(--s)),1fr));gap:calc(6*var(--s));margin-top:calc(6*var(--s))}
  #floors button{height:calc(34*var(--s));font-size:calc(11*var(--s))}
}
/* narrow upright tablets: a slimmer leaderboard keeps clear of the speaker button */
@media (min-width:701px) and (max-width:780px) and (max-aspect-ratio:1/1){#lbCard{width:calc(236*var(--s))}}
/* the smallest phones (iPhone SE / 8 size): squeeze the menu a little more */
@media (max-width:480px) and (max-height:760px) and (max-aspect-ratio:1/1){#soundPick{margin-top:calc(12*var(--s));padding-top:calc(10*var(--s))}#soundPick+#floorPick{margin-top:calc(12*var(--s));padding-top:calc(10*var(--s))}}
@media (orientation:landscape) and (max-height:420px){.volRow{margin-top:0}.vol{height:calc(28*var(--s))}#floors button{height:calc(30*var(--s))}#menu .menuList{margin-top:calc(10*var(--s))}}

/* ---------- coins: wallet chips, DAILY SPIN, style locks, unlock sheet, daily spin wheel, results coins ---------- */
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.coinChip{display:inline-flex;align-items:center;flex:none;height:calc(46*var(--s));padding:0 calc(16*var(--s)) 0 calc(12*var(--s));background:var(--ink);border:calc(2*var(--s)) solid var(--hot);color:#fff;box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent);white-space:nowrap}
.coinChip .u{display:inline-flex;align-items:center;gap:calc(8*var(--s))}
svg.coin{flex:none;width:calc(24*var(--s));height:calc(24*var(--s))}
.coinChip b{font:400 calc(19*var(--s))/1 var(--display);color:var(--hot);letter-spacing:calc(.5*var(--s))}
.coinChip.small{height:auto;padding:calc(2*var(--s)) calc(10*var(--s)) calc(2*var(--s)) calc(7*var(--s));box-shadow:none;border-width:calc(2*var(--s))}
.coinChip.small svg.coin{width:calc(18*var(--s));height:calc(18*var(--s))}.coinChip.small b{font-size:calc(15*var(--s))}
.wallet{display:flex;align-items:center;gap:calc(12*var(--s))}
.wallet.low{display:none}
.spinBtn{position:relative;flex:none;height:calc(46*var(--s));padding:0 calc(16*var(--s));background:var(--accent);border:calc(2*var(--s)) solid #fff;color:#fff;font-size:calc(14*var(--s));letter-spacing:calc(2*var(--s));box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--ink);white-space:nowrap}
.spinBtn .u{display:inline-flex;align-items:center;gap:calc(8*var(--s))}
.spinBtn svg{width:calc(22*var(--s));height:calc(22*var(--s))}
.spinBtn:hover{filter:brightness(1.1)}
.spinBtn .badge{display:none;position:absolute;top:calc(-11*var(--s));right:calc(-10*var(--s));padding:calc(1*var(--s)) calc(7*var(--s));background:var(--hot);color:var(--ink);border:calc(2*var(--s)) solid var(--ink);font:800 calc(10*var(--s))/1.25 var(--ui);font-style:normal;letter-spacing:calc(1.5*var(--s));animation:badgeGlow 1.4s ease-in-out infinite}
.spinBtn .badge::before{content:"FREE"}
.spinBtn.ready{border-color:var(--hot)}
.spinBtn.ready .badge{display:block}
@keyframes badgeGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hot) 75%,transparent)}50%{box-shadow:0 0 0 calc(8*var(--s)) color-mix(in srgb,var(--hot) 0%,transparent),0 0 calc(14*var(--s)) var(--hot)}}
.adBtn{display:inline-flex;align-items:center;justify-content:center;border:calc(2*var(--s)) solid var(--hot);color:var(--hot);background:rgba(11,10,26,.6)}
.adBtn .u{display:inline-flex;align-items:center;gap:calc(8*var(--s))}
.adBtn:hover{background:var(--hot);color:var(--ink)}

/* style picker: diamonds with a lock and a price under the locked ones */
#styles{gap:calc(12*var(--s));align-items:flex-start}
#styles button{width:calc(28*var(--s));height:auto;transform:none;border:0;display:flex;flex-direction:column;align-items:center;gap:calc(6*var(--s));padding-top:calc(6*var(--s));outline-offset:calc(6*var(--s))}
#styles button[aria-checked="true"]{outline:0}
#styles button:focus-visible{outline:calc(3*var(--s)) solid #fff}
#styles .dia{display:block;flex:none;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"] .dia{outline:calc(3*var(--s)) solid var(--hot);outline-offset:calc(2*var(--s))}
#styles .lock{display:none;position:absolute;left:50%;top:calc(13*var(--s));width:calc(18*var(--s));height:calc(18*var(--s));margin-left:calc(-9*var(--s));align-items:center;justify-content:center;background:var(--ink);color:#fff;border-radius:50%}
#styles .lock svg{width:calc(11*var(--s));height:calc(11*var(--s))}
#styles .locked .dia{filter:saturate(.55) brightness(.72)}
#styles .locked .lock{display:flex}
#styles small{font:800 calc(10*var(--s))/1.2 var(--ui);letter-spacing:calc(.5*var(--s));white-space:nowrap;padding:0 calc(3*var(--s));background:rgba(11,10,26,.78);color:var(--hot);visibility:hidden}
#styles .locked .price{visibility:visible}
#styles .tryTag{display:none;color:var(--ink);background:var(--hot)}
#styles .trial .price{display:none}#styles .trial .tryTag{display:block;visibility:visible}
#styles button:hover .dia{filter:brightness(1.12)}#styles .locked:hover .dia{filter:saturate(.7) brightness(.9)}

/* unlock sheet */
.sheet.unlockSheet{width:min(calc(440*var(--s)),100%);text-align:center}
.unlockSheet .sheetTop{text-align:left}
.unlockSheet .head,.spinSheet .head{max-width:calc(100% - calc(62*var(--s)))} /* clear of the close button */
.ulPreview{--hl:#fff;--base:#C9C1EE;--shade:#7D72B9;--glow:#B9AEF0;position:relative;height:calc(200*var(--s));margin-top:calc(10*var(--s));display:flex;align-items:center;justify-content:center}
.ulGlow{position:absolute;left:50%;top:50%;width:calc(230*var(--s));height:calc(230*var(--s));margin:calc(-115*var(--s)) 0 0 calc(-115*var(--s));border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--glow) 42%,transparent),transparent 68%)}
#ulPet{position:relative;z-index:1;max-height:calc(120*var(--s));max-width:calc(140*var(--s));object-fit:contain;filter:drop-shadow(calc(5*var(--s)) calc(4*var(--s)) 0 var(--hot))}
.orbit{position:absolute;left:50%;top:50%;width:0;height:0;animation:orbit 3.6s linear infinite}
.orb{position:absolute;left:0;top:0;width:calc(24*var(--s));height:calc(24*var(--s));margin:calc(-12*var(--s));border-radius:50%;background:radial-gradient(circle at 34% 30%,var(--hl),var(--base) 46%,var(--shade));box-shadow:0 0 calc(12*var(--s)) var(--glow)}
.moons .orb{z-index:2}
.moons .orb:nth-child(1){transform:rotate(0deg) translateX(calc(84*var(--s)))}
.moons .orb:nth-child(2){transform:rotate(72deg) translateX(calc(84*var(--s)))}
.moons .orb:nth-child(3){transform:rotate(144deg) translateX(calc(84*var(--s)))}
.moons .orb:nth-child(4){transform:rotate(216deg) translateX(calc(84*var(--s)))}
.moons .orb:nth-child(5){transform:rotate(288deg) translateX(calc(84*var(--s)))}
.ball .orbit{animation-duration:2.4s}
.ball .orb.big{width:calc(48*var(--s));height:calc(48*var(--s));margin:calc(-24*var(--s));transform:translateX(calc(92*var(--s)));box-shadow:0 0 calc(14*var(--s)) var(--glow),inset calc(-3*var(--s)) calc(-4*var(--s)) 0 rgba(0,0,0,.18)}
.ball .chain{position:absolute;left:0;top:calc(-2*var(--s));width:calc(72*var(--s));height:calc(4*var(--s));background:repeating-linear-gradient(90deg,#E4E0F2 0 calc(7*var(--s)),transparent calc(7*var(--s)) calc(10*var(--s)))}
@keyframes orbit{to{transform:rotate(360deg)}}
.ulPrice{display:flex;align-items:center;justify-content:center;gap:calc(16*var(--s));flex-wrap:wrap}
.ulCost{padding:calc(4*var(--s)) calc(18*var(--s)) calc(4*var(--s)) calc(12*var(--s));background:#fff;color:var(--ink);box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--hot)}
.ulCost .u{display:inline-flex;align-items:center;gap:calc(8*var(--s))}
.ulCost svg.coin{width:calc(28*var(--s));height:calc(28*var(--s))}
.ulCost b{font:400 calc(28*var(--s))/1.1 var(--display)}
.ulHave{display:inline-flex;align-items:center;gap:calc(8*var(--s));font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(2*var(--s));color:var(--muted)}
.unlockSheet .sub{margin:calc(14*var(--s)) 0 calc(16*var(--s));font-size:calc(14*var(--s))}
#ulBuy .u{display:inline-flex;align-items:center;gap:calc(8*var(--s))}
#ulBuy svg.coin{width:calc(26*var(--s));height:calc(26*var(--s))}
#ulBuy.short{background:rgba(255,255,255,.08);color:#fff;border:calc(2*var(--s)) solid rgba(255,255,255,.35);box-shadow:none;font:800 calc(16*var(--s)) var(--ui);letter-spacing:calc(2*var(--s));cursor:default}
.ulMsg{min-height:calc(20*var(--s));margin:calc(10*var(--s)) 0 0;font-size:calc(13*var(--s));font-weight:800;color:var(--hot)}
#ulTry{margin-top:calc(8*var(--s));height:calc(50*var(--s));font-size:calc(13*var(--s));letter-spacing:calc(1.5*var(--s))}
#unlock.done .ulPrice,#unlock.done .sub{visibility:hidden}
#unlock.done .ulPreview{animation:popIn .45s cubic-bezier(.3,1.6,.5,1)}

/* daily spin */
.sheet.spinSheet{width:min(calc(600*var(--s)),100%)}
.spinBody{display:flex;flex-direction:column;align-items:center;gap:calc(10*var(--s));margin-top:calc(18*var(--s))}
.wheelBox{position:relative;flex:none;width:min(calc(300*var(--s)),calc(100vw - calc(110*var(--s))),48vh);aspect-ratio:1}
.wheelBox::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);transform:translate(calc(8*var(--s)),calc(8*var(--s)))}
.wheelSpin{position:absolute;inset:0;will-change:transform}
#wheel{display:block;width:100%;height:100%;overflow:visible}
#wheel text{font-family:var(--display);letter-spacing:.3px;pointer-events:none}
#wheel .slice.win path{stroke:var(--hot);stroke-width:4;animation:winPulse .5s ease-in-out 3 alternate}
@keyframes winPulse{to{filter:brightness(1.35)}}
.hub{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#EFEAFF;border:calc(4*var(--s)) solid var(--ink);box-shadow:0 0 0 calc(3*var(--s)) #fff;overflow:hidden}
.hub img{display:block;width:120%;height:120%;margin:-10%;object-fit:cover}
.pointer{position:absolute;left:50%;top:calc(-16*var(--s));width:calc(34*var(--s));margin-left:calc(-17*var(--s));filter:drop-shadow(calc(3*var(--s)) calc(3*var(--s)) 0 var(--accent))}
.pointer svg{display:block;width:100%;height:auto}
.spinSide{display:flex;flex-direction:column;align-items:stretch;gap:calc(10*var(--s));width:100%;max-width:calc(420*var(--s));text-align:center}
.spinSheet .sub{margin:calc(4*var(--s)) 0 0;font-size:calc(14*var(--s))}
.spinMsg{min-height:calc(34*var(--s));margin:0;font:400 calc(26*var(--s))/1.25 var(--display);color:#fff}
.spinMsg b{color:var(--hot)}
#spin.won .spinMsg{animation:popIn .45s cubic-bezier(.3,1.6,.5,1)}
#spinGo .u{white-space:nowrap}
#spinGo:disabled{cursor:default}
#spinGo.wait{background:rgba(255,255,255,.08);color:#fff;border:calc(2*var(--s)) solid rgba(255,255,255,.3);box-shadow:none;font:800 calc(16*var(--s)) var(--ui);letter-spacing:calc(2*var(--s))}
#spinAd{height:calc(50*var(--s));font-size:calc(13*var(--s));letter-spacing:calc(1.5*var(--s))}
#oddsBtn{align-self:center}
.odds{list-style:none;margin:0;padding:calc(10*var(--s)) calc(12*var(--s));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(4*var(--s)) calc(16*var(--s));border:calc(2*var(--s)) solid rgba(255,255,255,.2);background:rgba(0,0,0,.2);text-align:left}
.odds li{display:flex;align-items:center;justify-content:space-between;gap:calc(8*var(--s));font-size:calc(13*var(--s));font-weight:800;color:var(--muted)}
.odds li span:first-child{display:inline-flex;align-items:center;gap:calc(6*var(--s));color:#fff}
.odds svg.coin{width:calc(16*var(--s));height:calc(16*var(--s))}
.odds b{font:400 calc(15*var(--s)) var(--display)}

/* results: coins for the round */
.coinRow{display:flex;align-items:center;gap:calc(12*var(--s)) calc(14*var(--s));flex-wrap:wrap;min-height:calc(40*var(--s))}
.coinGain{display:inline-flex;align-items:center;gap:calc(8*var(--s))}
.coinGain svg.coin{width:calc(30*var(--s));height:calc(30*var(--s))}
.coinGain b{font:400 calc(28*var(--s))/1 var(--display);color:var(--hot)}
.coinGain small{font-size:calc(13*var(--s));font-weight:800;letter-spacing:calc(3*var(--s))}
.coinGain.none b{color:var(--muted)}
#coinX2{padding:calc(1*var(--s)) calc(9*var(--s));background:var(--hot);color:var(--ink);font:400 calc(16*var(--s))/1.3 var(--display);font-style:normal;transform:skewX(var(--skew));animation:popIn .4s cubic-bezier(.3,1.6,.5,1)}
#doubleBtn{height:calc(40*var(--s));padding:0 calc(14*var(--s));font-size:calc(13*var(--s));letter-spacing:calc(1.5*var(--s));white-space:nowrap;animation:slideIn .35s ease-out both}
.coinRow .coinChip{margin-left:auto;height:calc(40*var(--s));box-shadow:calc(4*var(--s)) calc(4*var(--s)) 0 var(--accent)}
.resLinks{display:flex;justify-content:flex-end;align-items:center;gap:calc(6*var(--s)) calc(22*var(--s));flex-wrap:wrap}
#resUnlock{color:#fff}

/* ?ads=dev: the pretend ad used for testing */
.testAd{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:calc(16*var(--s));background:repeating-linear-gradient(-45deg,#121212 0 calc(26*var(--s)),#1C1C1C calc(26*var(--s)) calc(52*var(--s)))}
.testAdBox{max-width:100%;background:#fff;color:#111;box-shadow:calc(10*var(--s)) calc(10*var(--s)) 0 #FF3D7F}
.testAdBox .u-block{display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--s));padding:calc(22*var(--s)) calc(44*var(--s))}
.testAdBox small{font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(3*var(--s));color:#C2185B}
.testAdBox h2{margin:0;font:400 calc(58*var(--s))/1 var(--display)}
.testAdBox p{margin:0;font-size:calc(14*var(--s));font-weight:700}
.testAdCount b{display:block;font:400 calc(48*var(--s))/1.1 var(--display);color:#C2185B}
.testAd.earned .testAdCount b{font-size:calc(24*var(--s))}
.testAdClose{height:calc(44*var(--s));padding:0 calc(22*var(--s));background:#111;color:#fff;letter-spacing:calc(2*var(--s))}

@media (hover:none){.spinBtn:hover{filter:none}.adBtn:hover{background:rgba(11,10,26,.6);color:var(--hot)}}
/* one-column lobbies (phones, iPad upright, narrow windows) and phones held sideways: the top bar has no room,
   so the coins and DAILY SPIN sit above the name and PLAY */
@media (max-width:900px),(max-aspect-ratio:1/1),(max-height:500px){
  .wallet.top{display:none}
  .wallet.low{display:flex}
  .wallet.low .spinBtn{flex:1;min-width:0}
}
/* narrower laptop windows: WHAT'S NEW moves to the line under the lobby buttons to make room */
@media (min-width:901px) and (max-width:1120px) and (min-aspect-ratio:1/1) and (min-height:501px){
  .who .newsBtn{display:none}
  #newsLink{display:inline-block}
}
@media (max-width:480px) and (max-aspect-ratio:1/1){
  .wallet.low .coinChip,.wallet.low .spinBtn{height:calc(42*var(--s))}
  .coinRow{gap:calc(8*var(--s)) calc(10*var(--s))}
  .coinGain b{font-size:calc(24*var(--s))}.coinGain svg.coin{width:calc(26*var(--s));height:calc(26*var(--s))}
  #doubleBtn{height:calc(38*var(--s));padding:0 calc(10*var(--s));font-size:calc(11.5*var(--s));letter-spacing:calc(.5*var(--s))}
  .coinRow .coinChip{height:calc(36*var(--s));padding:0 calc(12*var(--s)) 0 calc(9*var(--s))}
  .coinRow .coinChip b{font-size:calc(16*var(--s))}
  .odds{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(4*var(--s)) calc(10*var(--s))}
  #doubleBtn{order:3;flex-basis:100%;justify-content:center} /* its own line under the coins */
  .testAdBox .u-block{padding:calc(18*var(--s)) calc(24*var(--s))}
}
@media (orientation:landscape) and (max-height:500px){
  .wallet.low{gap:calc(10*var(--s))}
  .wallet.low .coinChip,.wallet.low .spinBtn{height:calc(36*var(--s));box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--accent)}
  .wallet.low .spinBtn{box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--ink);font-size:calc(12*var(--s))}
  .wallet.low .coinChip b{font-size:calc(16*var(--s))}.wallet.low svg.coin{width:calc(20*var(--s));height:calc(20*var(--s))}
  #styles button{width:calc(24*var(--s));gap:calc(4*var(--s));padding-top:calc(4*var(--s))}
  #styles .dia{width:calc(24*var(--s));height:calc(24*var(--s))}
  #styles .lock{top:calc(10*var(--s))}
  #styles small{font-size:calc(9*var(--s))}
  /* results: coins share one slim row */
  .coinRow{min-height:0;gap:calc(10*var(--s))}
  .coinGain svg.coin{width:calc(20*var(--s));height:calc(20*var(--s))}.coinGain b{font-size:calc(18*var(--s))}.coinGain small{font-size:calc(10*var(--s));letter-spacing:calc(1.5*var(--s))}
  #doubleBtn{height:calc(30*var(--s));font-size:calc(11*var(--s));letter-spacing:calc(1*var(--s));padding:0 calc(10*var(--s))}
  .coinRow .coinChip{height:calc(30*var(--s));box-shadow:none}.coinRow .coinChip b{font-size:calc(14*var(--s))}
  /* sheets */
  .ulBody{display:flex;align-items:center;gap:calc(20*var(--s))}
  .ulPreview{flex:none;width:calc(190*var(--s));height:calc(190*var(--s));margin-top:0}
  .ulSide{flex:1;min-width:0}
  .sheet.unlockSheet{width:min(calc(640*var(--s)),100%)}
  #ulPet{max-height:calc(90*var(--s));max-width:calc(110*var(--s))}
  .moons .orb{width:calc(18*var(--s));height:calc(18*var(--s));margin:calc(-9*var(--s))}
  .moons .orb:nth-child(1){transform:rotate(0deg) translateX(calc(58*var(--s)))}
  .moons .orb:nth-child(2){transform:rotate(72deg) translateX(calc(58*var(--s)))}
  .moons .orb:nth-child(3){transform:rotate(144deg) translateX(calc(58*var(--s)))}
  .moons .orb:nth-child(4){transform:rotate(216deg) translateX(calc(58*var(--s)))}
  .moons .orb:nth-child(5){transform:rotate(288deg) translateX(calc(58*var(--s)))}
  .ball .orb.big{width:calc(34*var(--s));height:calc(34*var(--s));margin:calc(-17*var(--s));transform:translateX(calc(64*var(--s)))}
  .ball .chain{width:calc(48*var(--s))}
  .ulGlow{width:calc(150*var(--s));height:calc(150*var(--s));margin:calc(-75*var(--s)) 0 0 calc(-75*var(--s))}
  .unlockSheet .sub{margin:calc(8*var(--s)) 0 calc(10*var(--s));font-size:calc(12.5*var(--s))}
  .ulCost b{font-size:calc(22*var(--s))}
  #ulBuy,#spinGo{height:calc(50*var(--s));font-size:calc(20*var(--s))}
  #ulBuy.short,#spinGo.wait{font-size:calc(13*var(--s))}
  #ulTry,#spinAd{height:calc(42*var(--s))}
  .ulMsg{margin-top:calc(6*var(--s));min-height:calc(16*var(--s))}
  .sheet.spinSheet{width:min(calc(720*var(--s)),100%)}
  .spinBody{flex-direction:row;align-items:center;gap:calc(26*var(--s));margin-top:calc(12*var(--s))}
  .wheelBox{width:min(calc(100dvh - calc(110*var(--s))),calc(260*var(--s)))}
  .spinMsg{font-size:calc(20*var(--s));min-height:calc(26*var(--s))}
  .testAdBox h2{font-size:calc(40*var(--s))}.testAdBox .u-block{padding:calc(14*var(--s)) calc(30*var(--s));gap:calc(4*var(--s))}
}
/* ---------- v0.6: rounds, knocked-out card, thumb sticks ---------- */
/* round clock, top centre */
#timer{position:absolute;left:50%;top:max(calc(16*var(--s)),var(--sat));transform:translateX(-50%) skewX(var(--skew));padding:calc(3*var(--s)) calc(22*var(--s));background:#fff;color:var(--ink);box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent);font:400 calc(28*var(--s))/1.15 var(--display);pointer-events:none}
#timer.hot{background:var(--hot);animation:blink 1s steps(2,start) infinite}
#toast{top:calc(max(calc(16*var(--s)),var(--sat)) + calc(70*var(--s)))}
/* knocked out: who did it, and a countdown back into the same arena */
#dead{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:calc(14*var(--s));pointer-events:none;text-align:center}
#dead .big{font:400 clamp(calc(40*var(--s)),5vw,calc(64*var(--s)))/1 var(--display);color:#fff;transform:skewX(var(--skew)) rotate(-3deg);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}
#dead .by{display:flex;align-items:center;gap:calc(10*var(--s));padding:calc(4*var(--s)) calc(16*var(--s)) calc(4*var(--s)) calc(4*var(--s));background:#fff;color:var(--ink)}
#dead .by[hidden]{display:none}
#dead .by img{width:calc(34*var(--s));height:calc(34*var(--s));object-fit:cover;transform:skewX(var(--unskew))}
#dead .by span{font-size:calc(16*var(--s));font-weight:800}
#dead .by b{color:var(--accent-ink)}
#dead .cd{padding:calc(6*var(--s)) calc(22*var(--s));background:var(--hot);color:var(--ink);font-weight:800;font-size:calc(15*var(--s));letter-spacing:calc(2*var(--s));box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent)}
#dead .cd b{font:400 calc(26*var(--s)) var(--display);margin-left:calc(6*var(--s));letter-spacing:0}
/* phones: left thumb joystick (shown faintly at rest, jumps to wherever the thumb lands) */
#joy{position:fixed;z-index:12;left:max(calc(118*var(--s)),calc(var(--sal) + calc(96*var(--s))));top:calc(100% - max(calc(112*var(--s)),calc(var(--sab) + calc(92*var(--s)))));width:calc(128*var(--s));height:calc(128*var(--s));margin:calc(-64*var(--s)) 0 0 calc(-64*var(--s));border-radius:50%;background:rgba(255,255,255,.07);border:calc(3*var(--s)) solid rgba(255,255,255,.3);pointer-events:none;opacity:.5;transition:opacity .15s}
#joy.on{opacity:1;transition:none;background:rgba(255,255,255,.12)}
#joy .knob,#actBtn .knob{position:absolute;left:50%;top:50%;width:calc(54*var(--s));height:calc(54*var(--s));margin:calc(-27*var(--s)) 0 0 calc(-27*var(--s));border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 calc(3*var(--s)) var(--ink) inset,calc(3*var(--s)) calc(3*var(--s)) 0 var(--accent);pointer-events:none}
/* phones: right thumb attack stick (tap, drag to aim, hold) */
#actBtn{width:calc(112*var(--s));height:calc(112*var(--s));display:flex;align-items:center;justify-content:center;padding:0}
#actBtn b{position:relative;font:400 calc(18*var(--s)) var(--display);pointer-events:none;transition:opacity .1s}
#actBtn .knob{width:calc(46*var(--s));height:calc(46*var(--s));margin:calc(-23*var(--s)) 0 0 calc(-23*var(--s));opacity:0}
#actBtn.aim .knob{opacity:1}
#actBtn.aim b{opacity:.25}
/* round results: standings */
#podium{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(5*var(--s))}
#podium li{display:grid;grid-template-columns:calc(28*var(--s)) calc(30*var(--s)) minmax(0,1fr) auto;align-items:center;gap:calc(10*var(--s));padding:calc(3*var(--s)) calc(14*var(--s));background:rgba(0,0,0,.5);transform:skewX(var(--skew));font-weight:800;font-size:calc(15*var(--s));animation:slideIn .45s ease-out both}
#podium li>*{transform:skewX(var(--unskew))}
#podium li.first{background:rgba(255,255,255,.16)}
#podium li.me{background:#fff;color:var(--ink)}
#podium .pl{font:400 calc(19*var(--s)) var(--display);color:var(--hot);text-align:center}
#podium li.me .pl{color:var(--accent-ink)}
#podium img{width:calc(30*var(--s));height:calc(30*var(--s));object-fit:cover}
#podium .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#podium .ko{font-size:calc(11*var(--s));letter-spacing:calc(1.5*var(--s))}
#podium .ko b{font:400 calc(19*var(--s)) var(--display);letter-spacing:0;margin-right:calc(4*var(--s))}
#nextIn{cursor:default}
#nextIn i{font-style:normal;color:var(--accent-ink)}
@media (max-width:700px){
  #timer{font-size:calc(20*var(--s));padding:calc(2*var(--s)) calc(14*var(--s));top:max(calc(12*var(--s)),var(--sat))}
  #dead .big{font-size:calc(36*var(--s))}
  #podium li{font-size:calc(13*var(--s));padding:calc(2*var(--s)) calc(10*var(--s))}
}
@media (max-height:520px){
  #timer{font-size:calc(20*var(--s));padding:calc(2*var(--s)) calc(14*var(--s));top:max(calc(8*var(--s)),var(--sat))}
  #toast{top:calc(max(calc(8*var(--s)),var(--sat)) + calc(44*var(--s)))}
  #dead{top:40%;gap:calc(8*var(--s))}#dead .big{font-size:calc(34*var(--s))}
  #podium{gap:calc(3*var(--s))}#podium li{font-size:calc(12*var(--s));padding:calc(1*var(--s)) calc(10*var(--s));grid-template-columns:calc(22*var(--s)) calc(22*var(--s)) minmax(0,1fr) auto}
  #podium img{width:calc(22*var(--s));height:calc(22*var(--s))}#podium .pl,#podium .ko b{font-size:calc(15*var(--s))}
  #podium li:nth-child(n+4):not(.me){display:none}
  #joy{width:calc(112*var(--s));height:calc(112*var(--s));margin:calc(-56*var(--s)) 0 0 calc(-56*var(--s))}
  #actBtn{width:calc(100*var(--s));height:calc(100*var(--s))}
}
/* phones, Moonsling: the FLING button fills while you hold it to charge a Nova, then turns gold (let go for the
   Nova). CANCEL pops up next to it while charging: slide onto it and let go, or tap it, to stop with no Nova. */
#actBtn{--ch:0}
#actBtn::before{content:"";position:absolute;inset:calc(-7*var(--s));border-radius:50%;pointer-events:none;opacity:0;
  background:conic-gradient(var(--hot) calc(var(--ch) * 360deg),rgba(255,255,255,.18) 0);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 10*var(--s)),#000 calc(100% - 9*var(--s)));mask:radial-gradient(closest-side,transparent calc(100% - 10*var(--s)),#000 calc(100% - 9*var(--s)))}
#actBtn.charge::before,#actBtn.ready::before{opacity:1}
#actBtn.ready{background:var(--hot);color:var(--ink);animation:novaReady .5s ease-in-out infinite alternate}
#actBtn.ready b{font-size:0}#actBtn.ready b::after{content:"NOVA!";font-size:calc(18*var(--s))}
@keyframes novaReady{to{box-shadow:0 0 0 calc(6*var(--s)) color-mix(in srgb,var(--hot) 45%,transparent),0 0 calc(22*var(--s)) var(--hot)}}
#cancelBtn{position:fixed;z-index:12;right:max(calc(150*var(--s)),calc(var(--sar) + calc(128*var(--s))));bottom:max(calc(118*var(--s)),calc(var(--sab) + calc(104*var(--s))));width:calc(72*var(--s));height:calc(72*var(--s));border-radius:50%;padding:0;
  background:#fff;color:#E5283D;font:400 calc(10.5*var(--s)) var(--display);letter-spacing:calc(-.2*var(--s));box-shadow:calc(4*var(--s)) calc(4*var(--s)) 0 var(--ink),0 0 0 calc(3*var(--s)) #E5283D inset;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;animation:cancelIn .14s ease-out}
#cancelBtn.over{background:#E5283D;color:#fff;transform:scale(1.12);box-shadow:calc(2*var(--s)) calc(2*var(--s)) 0 var(--ink),0 0 0 calc(3*var(--s)) #fff inset}
#cancelBtn[hidden]{display:none}
#cancelBtn b{pointer-events:none}
@keyframes cancelIn{from{transform:scale(.4);opacity:0}}
@media (max-height:520px){#cancelBtn{width:calc(62*var(--s));height:calc(62*var(--s));right:max(calc(134*var(--s)),calc(var(--sar) + calc(114*var(--s))));bottom:max(calc(104*var(--s)),calc(var(--sab) + calc(90*var(--s))))}}
/* short screens (phones sideways): round results must fit without scrolling */
@media (max-height:520px){
  #results .guestNote,#results #resBy,#results #resMyStats{display:none}
  #podium li:nth-child(n+4):not(.me){display:none}
  #nextIn small{display:none}#nextIn b{font-size:calc(22*var(--s))}
  .resBtns .ghost{height:calc(46*var(--s))}
}
/* round results: top 3 + you; top 5 on tall screens. Countdown button sized to fit one line. */
#podium li:nth-child(n+4):not(.me){display:none}
@media (min-height:900px){#podium li:nth-child(n+4){display:grid}}
#nextIn .u-block{padding:0 calc(26*var(--s))}
#nextIn b{font-size:clamp(calc(26*var(--s)),2.8vw,calc(40*var(--s)));white-space:nowrap}
#nextIn small{white-space:nowrap}
.resBtns .ghost{white-space:nowrap}
@media (max-width:700px){
  #nextIn .u-block{padding:0 calc(16*var(--s))}#nextIn b{font-size:calc(22*var(--s))}#nextIn small{display:none}
  #results .guestNote{display:none}
}
/* results buttons: the countdown takes the room left over, the two small buttons keep their size */
.resBtns #nextIn{flex:1 1 0;min-width:0}
.resBtns #nextIn b{font-size:clamp(calc(22*var(--s)),2.4vw,calc(36*var(--s)))}
.resBtns .ghost{flex:0 0 auto;width:auto;min-width:calc(110*var(--s));padding:0 calc(14*var(--s))}
@media (max-width:700px){.resBtns .ghost{flex:1 1 0;min-width:0}}
.resBtns #nextIn .u-block{justify-content:center;padding:0 calc(12*var(--s))}
@media (max-width:700px){.resBtns #nextIn{flex:1 1 100%}}
/* v0.6.1 merge touch-ups: the countdown sits in the middle of its slab; the leaderboard's "THIS ROUND" stays on one line */
.resBtns #nextIn{display:flex;align-items:center;justify-content:center}
.resBtns #nextIn .u-block{height:auto}
.lbHead small{white-space:nowrap;margin-left:calc(10*var(--s));letter-spacing:calc(2*var(--s))}
/* short laptop screens (Chromebooks with the browser bar): the round's four numbers in one row, so the
   standings, coins and countdown all fit without scrolling */
@media (min-width:901px) and (min-aspect-ratio:1/1) and (min-height:501px) and (max-height:700px){
  #resStats{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(10*var(--s))}
  #resStats div{height:calc(50*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(10*var(--s));letter-spacing:calc(1*var(--s));white-space:nowrap}#resStats b{font-size:calc(22*var(--s));line-height:1.05}
}
/* sideways phones: no room for a third results link (INVITE stays in the HUD and the menu) */
@media (orientation:landscape) and (max-height:500px){ .resLinks #resInvite{display:none} }
/* the smallest sideways phones (740x360): top two of the standings, a smaller countdown */
@media (orientation:landscape) and (max-height:400px){
  #podium li:nth-child(n+3):not(.me){display:none}
  .resBtns #nextIn b{font-size:calc(18*var(--s))}
}

/* ---------- iPhone Safari ----------
   Safari's own bars leave a sideways iPhone only 325-380 px of height and an upright one 550-670 px: less than the
   phone layouts above were drawn for, so results buttons were cut off and the lobby's PLAY button half hidden.
   On those screens the whole UI scales down with the height Safari actually shows (dvh; vh where unsupported). */
@media (orientation:landscape) and (max-height:430px){:root{--s:clamp(.74px, 100vh / 430, 1px)}}
@media (max-width:480px) and (max-aspect-ratio:1/1) and (max-height:720px){:root{--s:clamp(.74px, 100vh / 720, 1px)}}
@supports (height:1dvh){
  @media (orientation:landscape) and (max-height:430px){:root{--s:clamp(.74px, 100dvh / 430, 1px)}}
  @media (max-width:480px) and (max-aspect-ratio:1/1) and (max-height:720px){:root{--s:clamp(.74px, 100dvh / 720, 1px)}}
}
/* upright phones: the top row (your numbers and the menu, sound and invite buttons) fills the width, so the round
   clock goes under it on the left, with the controls tip below the clock */
@media (max-width:480px) and (max-aspect-ratio:1/1){
  #timer{left:max(calc(12*var(--s)),var(--sal));top:calc(max(calc(12*var(--s)),var(--sat)) + calc(54*var(--s)));transform:skewX(var(--skew))}
  #hint{top:calc(max(calc(12*var(--s)),var(--sat)) + calc(100*var(--s)))}
  #lobby{overflow:hidden auto}
}
/* short upright phones: a little less pet art so the lobby menu and the results links fit */
@media (max-width:480px) and (max-aspect-ratio:1/1) and (max-height:720px){
  .heroArt{height:min(19vh,calc(170*var(--s)))}
  .resPet .art{height:min(14vh,calc(128*var(--s)))}
}
/* narrow sideways phones (iPhone SE): the countdown shares its row with CHANGE PET and LOBBY instead of squeezing them */
@media (orientation:landscape) and (max-height:500px) and (max-width:700px){
  .resBtns #nextIn{flex:1 1 0}.resBtns .ghost{flex:0 0 auto;min-width:calc(96*var(--s));padding:0 calc(10*var(--s))}
}
/* iPhone: a long press anywhere in the game never brings up Safari's copy/share callout */
#hud,#game,#joy,#actBtn,#cancelBtn{-webkit-touch-callout:none}
/* laptops 701-800 px tall: standings with your own row (finishing below 10th) still fit without scrolling */
@media (min-width:901px) and (min-aspect-ratio:1/1) and (min-height:701px) and (max-height:800px){.resMain{gap:calc(11*var(--s))}}

/* ---------- sideways matches on an upright phone (engine/client/sideways.js) ----------
   The page is turned 90° (or -90° when flipped); the notch insets turn with it. */
html.sideways body{position:fixed;left:0;top:0;width:var(--swW);height:var(--swH);transform-origin:0 0;transform:var(--swT);overflow:hidden}
html.sideways{--sat:env(safe-area-inset-right,0px);--sar:env(safe-area-inset-bottom,0px);--sab:env(safe-area-inset-left,0px);--sal:env(safe-area-inset-top,0px)}
html.sideways.flip{--sat:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-right,0px);--sal:env(safe-area-inset-bottom,0px)}
#turnCue{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%) skewX(var(--skew));z-index:25;display:flex;flex-direction:column;align-items:center;gap:calc(10*var(--s));padding:calc(14*var(--s)) calc(24*var(--s));background:rgba(11,10,26,.82);box-shadow:calc(6*var(--s)) calc(6*var(--s)) 0 var(--accent);pointer-events:auto}
#turnCue>*{transform:skewX(var(--unskew))}
#turnCue .phone{width:calc(64*var(--s));height:calc(38*var(--s));border:calc(4*var(--s)) solid #fff;border-radius:calc(10*var(--s));position:relative;animation:cueTilt 1.6s ease-in-out infinite}
#turnCue .phone i{position:absolute;inset:calc(5*var(--s)) calc(9*var(--s));background:var(--hot)}
#turnCue b{font:400 calc(18*var(--s)) var(--display);color:#fff;letter-spacing:calc(1*var(--s));white-space:nowrap}
#turnCue button{height:calc(38*var(--s));padding:0 calc(16*var(--s));font-size:calc(12*var(--s));letter-spacing:calc(1*var(--s))}
@keyframes cueTilt{0%,100%{transform:skewX(var(--unskew)) rotate(0)}50%{transform:skewX(var(--unskew)) rotate(-8deg)}}

/* ---------- coin shop (shop.js): SHOP button next to DAILY SPIN, the shop sheet ---------- */
.shopBtn{flex:none;height:calc(46*var(--s));padding:0 calc(16*var(--s));background:var(--hot);color:var(--ink);border:calc(2*var(--s)) solid var(--ink);font-size:calc(14*var(--s));letter-spacing:calc(2*var(--s));box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent);white-space:nowrap}
.shopBtn .u{display:inline-flex;align-items:center;gap:calc(8*var(--s))}
.shopBtn svg{width:calc(20*var(--s));height:calc(20*var(--s))}
.shopBtn:hover{filter:brightness(1.06)}
@media (hover:none){.shopBtn:hover{filter:none}}
@media (max-width:480px) and (max-aspect-ratio:1/1){.wallet.low .shopBtn{height:calc(42*var(--s))}}
@media (orientation:landscape) and (max-height:500px){.wallet.low .shopBtn{height:calc(36*var(--s));box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--ink);font-size:calc(12*var(--s))}}
.sheet.shopSheet{width:min(calc(940*var(--s)),100%)}
.shopSheet .head{max-width:calc(100% - calc(62*var(--s)))}
.shopTabs{display:flex;gap:calc(10*var(--s));margin-top:calc(18*var(--s));flex-wrap:wrap}
.shopTabs button{height:calc(40*var(--s));padding:0 calc(16*var(--s));border:calc(2*var(--s)) solid rgba(255,255,255,.55);color:#fff;background:rgba(11,10,26,.35);font:800 calc(13*var(--s))/1 var(--ui);letter-spacing:calc(2*var(--s));white-space:nowrap}
.shopTabs button:hover{border-color:#fff}
.shopTabs button[aria-selected="true"]{background:#fff;border-color:#fff;color:var(--ink);box-shadow:calc(4*var(--s)) calc(4*var(--s)) 0 var(--hot)}
.shopBody{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:calc(22*var(--s));margin-top:calc(18*var(--s));align-items:start}
.shopStage{display:flex;flex-direction:column;gap:calc(10*var(--s));text-align:center}
#shopCv{display:block;width:100%;height:calc(260*var(--s));background:radial-gradient(ellipse 60% 55% at 50% 60%,color-mix(in srgb,var(--accent2) 34%,transparent),transparent 72%),rgba(11,10,26,.5);border:calc(2*var(--s)) solid rgba(255,255,255,.14)}
.shopPick{display:flex;align-items:baseline;justify-content:center;gap:calc(10*var(--s));min-height:calc(26*var(--s));flex-wrap:wrap}
.shopPick b{font:400 calc(22*var(--s))/1.1 var(--display);color:#fff}
.shopTag{display:inline-flex;align-items:center;gap:calc(5*var(--s));font:800 calc(13*var(--s))/1 var(--ui);color:var(--hot);letter-spacing:calc(1*var(--s))}
.shopTag svg.coin{width:calc(16*var(--s));height:calc(16*var(--s))}
#shopAct .u{display:inline-flex;align-items:center;gap:calc(8*var(--s))}
#shopAct svg.coin{width:calc(26*var(--s));height:calc(26*var(--s))}
#shopAct.short{background:rgba(255,255,255,.08);color:#fff;border:calc(2*var(--s)) solid rgba(255,255,255,.35);box-shadow:none;font:800 calc(16*var(--s)) var(--ui);letter-spacing:calc(2*var(--s));cursor:default}
#shopAct.off{background:#fff;font-size:calc(20*var(--s))}
#shopMsg{margin-top:0}
.shopGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(100*var(--s)),1fr));gap:calc(10*var(--s))}
.shopItem{display:flex;flex-direction:column;align-items:center;gap:calc(4*var(--s));padding:calc(8*var(--s)) calc(4*var(--s));background:rgba(11,10,26,.5);border:calc(2*var(--s)) solid rgba(255,255,255,.16);color:#fff;cursor:pointer;min-width:0}
.shopItem canvas{width:calc(60*var(--s));height:calc(60*var(--s))}
.shopItem .nm{font:800 calc(12*var(--s))/1.15 var(--ui);letter-spacing:calc(.5*var(--s));text-align:center;overflow-wrap:anywhere}
.shopItem .pr{display:inline-flex;align-items:center;gap:calc(4*var(--s));padding:calc(2*var(--s)) calc(6*var(--s));font:800 calc(12*var(--s))/1 var(--ui);color:var(--hot);letter-spacing:calc(.5*var(--s))}
.shopItem .pr svg.coin{width:calc(14*var(--s));height:calc(14*var(--s))}
.shopItem.own .pr{color:var(--muted)}
.shopItem.on .pr{color:var(--ink);background:var(--hot)}
.shopItem:hover{border-color:rgba(255,255,255,.6)}
.shopItem[aria-pressed="true"]{background:var(--accent);border-color:#fff;box-shadow:calc(4*var(--s)) calc(4*var(--s)) 0 var(--hot)}
.shopItem[aria-pressed="true"].own .pr{color:#fff}
.shopItem:focus-visible{outline:calc(3*var(--s)) solid #fff;outline-offset:calc(2*var(--s))}
.shopFoot{display:flex;align-items:center;justify-content:space-between;gap:calc(8*var(--s)) calc(14*var(--s));flex-wrap:wrap;margin-top:calc(14*var(--s))}
.shopFoot .sub{margin:0;font-size:calc(13*var(--s))}
@media (hover:none){.shopItem:hover{border-color:rgba(255,255,255,.16)}.shopTabs button:hover{border-color:rgba(255,255,255,.55)}}
@media (max-width:700px){
  .shopBody{grid-template-columns:minmax(0,1fr);gap:calc(14*var(--s))}
  #shopCv{height:calc(180*var(--s))}
  .shopTabs{gap:calc(6*var(--s));flex-wrap:nowrap}.shopTabs button{flex:1;min-width:0;padding:0 calc(4*var(--s));font-size:calc(11*var(--s));letter-spacing:calc(.5*var(--s))}
  .shopGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(8*var(--s))}
  .shopItem canvas{width:calc(48*var(--s));height:calc(48*var(--s))}
  .shopItem .nm{font-size:calc(10.5*var(--s))}.shopItem .pr{font-size:calc(11*var(--s));padding:calc(2*var(--s)) calc(3*var(--s))}
  #shopAct{height:calc(52*var(--s));font-size:calc(20*var(--s))}#shopAct.short{font-size:calc(13*var(--s))}
}
@media (max-width:380px){.shopGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (orientation:landscape) and (max-height:500px){
  .shopTabs{margin-top:calc(10*var(--s))}.shopTabs button{height:calc(32*var(--s))}
  .shopBody{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:calc(14*var(--s));margin-top:calc(10*var(--s))}
  #shopCv{height:calc(150*var(--s))}
  #shopAct{height:calc(46*var(--s));font-size:calc(18*var(--s))}#shopAct.short{font-size:calc(12*var(--s))}
  .shopGrid{grid-template-columns:repeat(auto-fill,minmax(calc(84*var(--s)),1fr));gap:calc(8*var(--s))}
  .shopItem canvas{width:calc(44*var(--s));height:calc(44*var(--s))}
}
.wallet.low .shopBtn{padding:0 calc(12*var(--s));letter-spacing:calc(1*var(--s))}
.wallet.low .shopBtn svg{width:calc(18*var(--s));height:calc(18*var(--s))}
@media (max-width:700px) and (max-aspect-ratio:1/1){
  #shopCv{height:calc(150*var(--s))}
  .shopStage{gap:calc(6*var(--s))}.shopPick b{font-size:calc(18*var(--s))}
  #shopAct{height:calc(48*var(--s));font-size:calc(18*var(--s))}
  #shopMsg{min-height:0}#shopMsg:empty{display:none}
}
#heroHat{position:absolute;pointer-events:none;filter:drop-shadow(calc(10*var(--s)) calc(8*var(--s)) 0 var(--hot)) drop-shadow(0 0 calc(1*var(--s)) #000)}
#heroHat[hidden]{display:none}
#heroHat.pop{animation:popIn .4s cubic-bezier(.3,1.6,.5,1)}
#lobby .topbar{z-index:3} /* the logo and buttons stay above a tall hat on the big pet picture */
/* narrow phones sideways (iPhone SE and smaller): the top row reaches the middle, so the round clock goes under it
   on the left, like on upright phones */
@media (orientation:landscape) and (max-width:620px) and (max-height:430px){
  #timer{left:max(calc(12*var(--s)),var(--sal));top:calc(max(calc(8*var(--s)),var(--sat)) + calc(54*var(--s)));transform:skewX(var(--skew))}
}

/* ---------- v0.7: friend lobby, emotes, pings, friends board, spectating (lobby.js, social.js) ---------- */
/* lobby screen: PLAY WITH FRIENDS under PLAY (shows the lobby code and how many are in it once you're in one) */
.partyBtn{position:relative;width:100%;height:calc(46*var(--s));background:var(--accent);border-color:#fff;box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--ink);letter-spacing:calc(2*var(--s))}
.partyBtn .u{display:inline-flex;align-items:center;gap:calc(10*var(--s));font-size:calc(14*var(--s));white-space:nowrap}
.partyBtn svg{width:calc(20*var(--s));height:calc(20*var(--s))}
.partyBtn b{font:400 calc(17*var(--s))/1 var(--display);letter-spacing:calc(2*var(--s));color:var(--hot)}
.partyBtn:hover{background:var(--accent);filter:brightness(1.12)}
.partyBtn.in{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--hot)}
.partyBtn.in b{color:var(--accent-ink)}
.partyBtn.in:hover{background:#fff}
.partyBtn .badge{position:absolute;top:calc(-12*var(--s));right:calc(-34*var(--s));padding:calc(1*var(--s)) calc(7*var(--s));background:#FF3D5A;color:#fff;border:calc(2*var(--s)) solid var(--ink);font:800 calc(11*var(--s))/1.3 var(--ui);font-style:normal;letter-spacing:0}
@media (hover:none){.partyBtn:hover{filter:none}}

/* join or make a lobby */
.sheet.lobbyJoinSheet{width:min(calc(520*var(--s)),100%)}
.lobbyJoinSheet .head{max-width:calc(100% - calc(62*var(--s)))}
.lobbyJoinSheet #ljMake{margin-top:calc(20*var(--s))}
.ljOr{display:flex;align-items:center;gap:calc(12*var(--s));margin:calc(20*var(--s)) 0 calc(12*var(--s));font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(3*var(--s));color:var(--muted)}
.ljOr::before,.ljOr::after{content:"";flex:1;height:calc(2*var(--s));background:rgba(255,255,255,.3)}
.ljForm{display:flex;gap:calc(12*var(--s))}
.ljForm input{flex:1;min-width:0;height:calc(58*var(--s));padding:0 calc(14*var(--s));border:0;border-radius:0;background:#fff;color:var(--ink);font:400 calc(30*var(--s)) var(--display);letter-spacing:calc(10*var(--s));text-align:center;text-transform:uppercase;-webkit-user-select:text;user-select:text}
.ljForm input::placeholder{color:#C9C4DE;letter-spacing:calc(6*var(--s))}
.ljForm input:focus{outline:calc(3*var(--s)) solid var(--hot);outline-offset:0}
.ljForm .hotBtn{height:calc(58*var(--s));padding:0 calc(26*var(--s));font-size:calc(17*var(--s))}

/* the lobby: share bar, the friend leaderboard (left), chat and emotes (right), LEAVE / PLAY TOGETHER */
.sheet.lobbySheet{width:min(calc(980*var(--s)),100%);padding-bottom:calc(22*var(--s))}
.lobbySheet .head{max-width:calc(100% - calc(62*var(--s)))}
.lobbySheet .sheetTop{background:var(--bg2);padding-bottom:calc(12*var(--s))} /* rows scroll under the title, not through it */
#lobCode{font-weight:400;color:var(--accent-ink);letter-spacing:calc(4*var(--s))}
.lobShare{display:flex;align-items:center;justify-content:space-between;gap:calc(10*var(--s)) calc(16*var(--s));flex-wrap:wrap;margin-top:calc(6*var(--s));padding:calc(10*var(--s)) calc(10*var(--s)) calc(10*var(--s)) calc(18*var(--s));background:rgba(0,0,0,.25);border:calc(2*var(--s)) dashed rgba(255,255,255,.3)}
.lobShare>span{font-size:calc(15*var(--s));font-weight:800;color:#E9E5FF}
.lobShare i{font-style:normal}.lobShare .lsShort{display:none}
.lobShare b{margin:0 calc(4*var(--s));font:400 calc(24*var(--s))/1 var(--display);letter-spacing:calc(5*var(--s));color:var(--hot);-webkit-user-select:all;user-select:all}
#lobCopy .u{display:inline-flex;align-items:center;gap:calc(8*var(--s))}
#lobCopy svg{width:calc(18*var(--s));height:calc(18*var(--s))}
.lobBody{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:calc(22*var(--s));margin-top:calc(18*var(--s));align-items:start}
.lobPeople,.lobTalk{display:flex;flex-direction:column;gap:calc(10*var(--s));min-width:0}
.lobHead{display:flex;align-items:baseline;gap:calc(10*var(--s))}
.lobHead b{font:400 calc(18*var(--s))/1.1 var(--display)}
.lobHead span{font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(2*var(--s));color:var(--muted)}
.lobRules{display:flex;gap:calc(8*var(--s));flex-wrap:wrap}
.lobRules button{display:inline-flex;align-items:center;gap:calc(8*var(--s));height:calc(34*var(--s));padding:0 calc(12*var(--s)) 0 calc(8*var(--s));border:calc(2*var(--s)) solid rgba(255,255,255,.4);background:rgba(11,10,26,.35);color:#fff;font:800 calc(12*var(--s))/1 var(--ui);letter-spacing:calc(1.5*var(--s))}
.lobRules button::before{content:"";flex:none;width:calc(28*var(--s));height:calc(16*var(--s));border-radius:calc(8*var(--s));background:rgba(255,255,255,.25) radial-gradient(circle at calc(8*var(--s)) 50%,#fff calc(5.5*var(--s)),transparent calc(6.5*var(--s)))}
.lobRules button.on{border-color:#fff;background:var(--accent)}
.lobRules button.on::before{background:var(--hot) radial-gradient(circle at calc(20*var(--s)) 50%,var(--ink) calc(5.5*var(--s)),transparent calc(6.5*var(--s)))}
.lobList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(6*var(--s));max-height:calc(372*var(--s));overflow-y:auto;overscroll-behavior:contain}
.lobList li{display:flex;align-items:center;gap:calc(10*var(--s));min-height:calc(54*var(--s));padding:calc(6*var(--s)) calc(10*var(--s));background:rgba(11,10,26,.5);border:calc(2*var(--s)) solid rgba(255,255,255,.12)}
.lobList li.me{background:#fff;color:var(--ink);border-color:#fff;box-shadow:calc(4*var(--s)) calc(4*var(--s)) 0 var(--hot)}
.lobList .rk{flex:none;width:calc(26*var(--s));text-align:center;font:400 calc(18*var(--s))/1 var(--display);color:var(--muted)}
.lobList li:nth-child(1) .rk{color:var(--hot)}.lobList li:nth-child(2) .rk{color:#E6E8F0}.lobList li:nth-child(3) .rk{color:#F0A86A}
.lobList li.me .rk{color:var(--accent-ink)}
.lobList .face{position:relative;flex:none;width:calc(40*var(--s));height:calc(40*var(--s))}
.lobList .face>img:first-child{width:100%;height:100%;object-fit:cover;background:var(--bg2)}
.lobList .bub{position:absolute;right:calc(-16*var(--s));top:calc(-16*var(--s));width:calc(34*var(--s));height:calc(34*var(--s));animation:popIn .3s cubic-bezier(.3,1.6,.5,1)}
.lobList .who{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:calc(2*var(--s))}
.lobList .who b{max-width:100%;font-size:calc(15*var(--s));font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lobList .who i{margin-left:calc(4*var(--s));padding:0 calc(5*var(--s));font:800 calc(10*var(--s))/1.4 var(--ui);font-style:normal;letter-spacing:calc(1*var(--s));background:var(--accent);color:#fff;vertical-align:middle}
.lobList .who i.crown{background:var(--hot);color:var(--ink)}
.lobList .st{font-size:calc(10.5*var(--s));font-weight:800;letter-spacing:calc(1.5*var(--s));color:var(--muted)}
.lobList .stP{color:#4FE3B0}.lobList .stW{color:var(--hot)}.lobList .stA{opacity:.6}
.lobList li.me .st{color:#55507A}.lobList li.me .stP{color:#0E9F6E}
.lobList .sc{flex:none;text-align:right;font-size:calc(11*var(--s));font-weight:800;letter-spacing:calc(1*var(--s));white-space:nowrap}
.lobList .sc b{font:400 calc(17*var(--s)) var(--display);letter-spacing:0}
.lobList .sc small{display:block;font-size:calc(9.5*var(--s));color:var(--muted)}
.lobList li.me .sc small{color:#55507A}
.lobList .acts{flex:none;display:flex;gap:calc(5*var(--s))}
.lobList .acts:empty{display:none}
.lobList .act{height:calc(30*var(--s));padding:0 calc(9*var(--s));border:calc(2*var(--s)) solid rgba(255,255,255,.4);background:rgba(11,10,26,.35);color:#fff;font:800 calc(11*var(--s))/1 var(--ui);letter-spacing:calc(1*var(--s))}
.lobList .act[data-act="watch"]{background:#4FE3B0;border-color:#4FE3B0;color:var(--ink)}
.lobList .act.on{background:#fff;color:var(--ink)}
.lobList .act.kick{color:#FF8A9B;border-color:rgba(255,138,155,.6)}
.lobList .act:hover{border-color:#fff}
.lobChat{height:calc(264*var(--s));overflow-y:auto;overscroll-behavior:contain;padding:calc(10*var(--s)) calc(12*var(--s));background:rgba(0,0,0,.28);border:calc(2*var(--s)) solid rgba(255,255,255,.14);-webkit-user-select:text;user-select:text}
.lobChat p{margin:0 0 calc(6*var(--s));font-size:calc(14*var(--s));font-weight:700;line-height:1.35;color:#E9E5FF;overflow-wrap:anywhere}
.lobChat p b{color:var(--hot);font-weight:800}
.lobChat p.mine b{color:var(--accent2)}
.lobChat p.sys{font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(1*var(--s));color:var(--muted)}
.lobChat:empty::before{content:"Say hi! Chat stays in this lobby.";font-size:calc(13*var(--s));font-weight:700;color:var(--muted)}
.lobChatForm{display:flex;gap:calc(8*var(--s))}
.lobChatForm input{flex:1;min-width:0;height:calc(46*var(--s));padding:0 calc(14*var(--s));border:0;border-radius:0;background:#fff;color:var(--ink);font:700 calc(16*var(--s)) var(--ui);-webkit-user-select:text;user-select:text}
.lobChatForm input:disabled{background:#CFCBE0}
.lobChatForm input:focus{outline:calc(3*var(--s)) solid var(--hot);outline-offset:0}
.lobChatForm .hotBtn{height:calc(46*var(--s));padding:0 calc(16*var(--s))}
.lobEmotes{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:calc(6*var(--s))}
.emo{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:calc(2*var(--s));background:rgba(255,255,255,.08);border:calc(2*var(--s)) solid rgba(255,255,255,.16);transition:transform .1s}
.emo img{width:100%;height:100%;display:block;pointer-events:none}
.emo:hover{border-color:#fff;transform:translateY(calc(-2*var(--s)))}
.emo:active{transform:scale(.92)}
.lobFoot{display:flex;align-items:center;gap:calc(16*var(--s));margin-top:calc(20*var(--s))}
#lobLeave{flex:none;padding:0 calc(20*var(--s));font-size:calc(13*var(--s));letter-spacing:calc(2*var(--s))}
#lobPlay{flex:1;width:auto}
@media (hover:none){.emo:hover{border-color:rgba(255,255,255,.16);transform:none}.lobList .act:hover{border-color:rgba(255,255,255,.4)}}

/* in a match: the emote button (top row), the emote bar under it, the friends board, lobby chat lines, spectating */
.pingBtn{height:calc(48*var(--s));padding:0 calc(14*var(--s));background:var(--hot);color:var(--ink);border:calc(2*var(--s)) solid var(--ink);font:400 calc(15*var(--s)) var(--display);letter-spacing:calc(1*var(--s))}
#friendsCard{position:absolute;left:max(calc(18*var(--s)),var(--sal));top:calc(max(calc(16*var(--s)),var(--sat)) + calc(84*var(--s)));width:calc(200*var(--s))}
.fHead{display:inline-block;padding:calc(3*var(--s)) calc(14*var(--s));background:#4FE3B0;color:var(--ink);box-shadow:calc(4*var(--s)) calc(4*var(--s)) 0 var(--ink)}
.fHead .u{font:400 calc(14*var(--s))/1.2 var(--display);letter-spacing:calc(1*var(--s))}
#friendsLb{list-style:none;margin:calc(7*var(--s)) 0 0;padding:0;display:flex;flex-direction:column;gap:calc(4*var(--s))}
#friendsLb li{display:flex;align-items:center;gap:calc(8*var(--s));height:calc(28*var(--s));padding:0 calc(10*var(--s)) 0 calc(4*var(--s));background:rgba(11,10,26,.62);border-left:calc(4*var(--s)) solid #4FE3B0}
#friendsLb li.me{background:#fff;color:var(--ink)}
#friendsLb li.out{opacity:.55}
#friendsLb img{width:calc(22*var(--s));height:calc(22*var(--s));object-fit:cover;background:var(--bg2)}
#friendsLb .nm{flex:1;min-width:0;font-size:calc(13*var(--s));font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#friendsLb .sc{font:400 calc(15*var(--s)) var(--display)}
#chatFeed{position:absolute;left:max(calc(18*var(--s)),var(--sal));bottom:calc(max(calc(14*var(--s)),var(--sab)) + min(150px,19vmin) + 22px); /* above the minimap */width:min(calc(380*var(--s)),40vw);display:flex;flex-direction:column;align-items:flex-start;gap:calc(4*var(--s));pointer-events:none}
#chatFeed p{margin:0;max-width:100%;padding:calc(4*var(--s)) calc(10*var(--s));background:rgba(11,10,26,.7);font-size:calc(13.5*var(--s));font-weight:700;line-height:1.3;color:#fff;overflow-wrap:anywhere;animation:toastUp .2s ease-out;transition:opacity .5s}
#chatFeed p b{color:var(--hot);font-weight:800}
#chatFeed p.out{opacity:0}
#chatToast{position:fixed;z-index:45;left:50%;bottom:max(calc(22*var(--s)),calc(var(--sab) + calc(10*var(--s))));transform:translateX(-50%);max-width:min(calc(520*var(--s)),calc(100vw - calc(32*var(--s))));padding:calc(9*var(--s)) calc(16*var(--s));background:#fff;color:var(--ink);border-left:calc(6*var(--s)) solid var(--accent);box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent);font-size:calc(14*var(--s));font-weight:700;overflow-wrap:anywhere;pointer-events:none;animation:toastUp .2s ease-out}
#chatToast b{color:var(--accent-ink);font-weight:800}
@keyframes toastUp{from{opacity:0;translate:0 calc(10*var(--s))}to{opacity:1;translate:0 0}}
#watchBar{position:absolute;left:50%;bottom:max(calc(22*var(--s)),var(--sab));transform:translateX(-50%) skewX(var(--skew));padding:calc(6*var(--s));background:#fff;color:var(--ink);box-shadow:calc(6*var(--s)) calc(6*var(--s)) 0 var(--accent);pointer-events:auto;white-space:nowrap}
#watchBar .u{display:flex;align-items:center;gap:calc(10*var(--s))}
#watchBar span span{font-size:calc(12*var(--s));font-weight:800;letter-spacing:calc(2*var(--s));padding:0 calc(4*var(--s))}
#watchBar b{display:inline-block;max-width:calc(200*var(--s));overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;margin-left:calc(6*var(--s));font:400 calc(19*var(--s))/1.2 var(--display);letter-spacing:0;color:var(--accent-ink)}
#watchBar button{height:calc(40*var(--s));min-width:calc(40*var(--s));background:var(--ink);color:#fff;font-size:calc(18*var(--s))}
#watchBar button.stop{padding:0 calc(16*var(--s));background:var(--hot);color:var(--ink);font-size:calc(13*var(--s));letter-spacing:calc(2*var(--s));border:calc(2*var(--s)) solid var(--ink)}
#hud:has(#watchBar:not([hidden])) #hint{display:none}
#dead .rv{padding:calc(4*var(--s)) calc(20*var(--s));background:#FF3D5A;color:#fff;font-size:calc(13*var(--s));font-weight:800;letter-spacing:calc(2*var(--s));clip-path:polygon(calc(8*var(--s)) 0,100% 0,calc(100% - calc(8*var(--s))) 100%,0 100%)}
#dead .rv b{font:400 calc(16*var(--s)) var(--display);letter-spacing:calc(1*var(--s))}

/* phones and narrow windows */
@media (max-width:700px){
  .lobBody{grid-template-columns:minmax(0,1fr);gap:calc(16*var(--s))}
  .lobList{max-height:none}
  .lobChat{height:calc(170*var(--s))}
  .lobShare{padding:calc(8*var(--s)) calc(8*var(--s)) calc(8*var(--s)) calc(12*var(--s))}
  .lobShare>span{font-size:calc(13*var(--s))}
  .lobShare .lsLong{display:none}.lobShare .lsShort{display:inline}
  .lobbySheet .head{padding:calc(8*var(--s)) calc(18*var(--s))}
  .lobbySheet .head small{font-size:calc(10*var(--s));letter-spacing:calc(2*var(--s))}
  .lobbySheet h2{font-size:calc(22*var(--s))}
  #lobCode{letter-spacing:calc(2*var(--s))}
  .lobbyJoinSheet .head{padding:calc(8*var(--s)) calc(18*var(--s))}
  .lobbyJoinSheet .head small{font-size:calc(10*var(--s));letter-spacing:calc(2*var(--s))}
  .lobbyJoinSheet h2{font-size:calc(24*var(--s))}
  .lobList li{gap:calc(8*var(--s));padding:calc(5*var(--s)) calc(8*var(--s))}
  .lobList .acts{flex-direction:column;gap:calc(3*var(--s))}
  .lobList .act{height:calc(26*var(--s));padding:0 calc(7*var(--s));font-size:calc(10*var(--s))}
  .lobFoot{gap:calc(10*var(--s))}
  #lobLeave{padding:0 calc(12*var(--s));font-size:calc(11*var(--s));letter-spacing:calc(1*var(--s))}
  #lobPlay{font-size:calc(19*var(--s))}
  .ljForm input{font-size:calc(26*var(--s));letter-spacing:calc(7*var(--s))}
  #watchBar b{max-width:calc(120*var(--s));font-size:calc(15*var(--s))}
  #watchBar span span{font-size:calc(10*var(--s));letter-spacing:calc(1*var(--s))}
  #watchBar button{height:calc(36*var(--s));min-width:calc(36*var(--s))}
}
/* short laptop screens: a shorter chat box so the lobby fits without scrolling */
@media (min-width:901px) and (min-aspect-ratio:1/1) and (min-height:501px) and (max-height:700px){
  .lobChat{height:calc(206*var(--s))}
  .lobList{max-height:calc(300*var(--s))}
  .lobShare{padding-top:calc(6*var(--s));padding-bottom:calc(6*var(--s))}
}
/* phones in a match (sideways) and short windows: compact friends board, chat lines along the bottom middle */
@media (max-height:520px),(pointer:coarse) and (max-width:950px){
  #friendsCard{left:max(calc(10*var(--s)),var(--sal));top:calc(max(calc(8*var(--s)),var(--sat)) + calc(52*var(--s)));width:calc(150*var(--s))}
  .fHead{padding:calc(2*var(--s)) calc(10*var(--s))}.fHead .u{font-size:calc(11*var(--s))}
  #friendsLb{margin-top:calc(5*var(--s));gap:calc(3*var(--s))}
  #friendsLb li{height:calc(22*var(--s));gap:calc(6*var(--s));padding:0 calc(8*var(--s)) 0 calc(3*var(--s))}
  #friendsLb li:nth-child(n+4):not(.me){display:none}
  #friendsLb img{width:calc(18*var(--s));height:calc(18*var(--s))}
  #friendsLb .nm{font-size:calc(11*var(--s))}#friendsLb .sc{font-size:calc(13*var(--s))}
  #chatFeed{left:50%;bottom:max(calc(14*var(--s)),var(--sab));transform:translateX(-50%);width:min(calc(320*var(--s)),42vw);align-items:center}
  #chatFeed p{font-size:calc(12*var(--s));padding:calc(3*var(--s)) calc(8*var(--s))}
  #chatFeed p:nth-last-child(n+4){display:none}
}
/* phones held sideways */
@media (orientation:landscape) and (max-height:500px){
  .partyBtn{height:calc(36*var(--s));box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--ink)}
  .partyBtn.in{box-shadow:calc(3*var(--s)) calc(3*var(--s)) 0 var(--hot)}
  .partyBtn .u{font-size:calc(12*var(--s));gap:calc(8*var(--s))}.partyBtn svg{width:calc(16*var(--s));height:calc(16*var(--s))}.partyBtn b{font-size:calc(14*var(--s))}
  .lobbyJoinSheet #ljMake{margin-top:calc(12*var(--s));height:calc(50*var(--s));font-size:calc(20*var(--s))}
  .ljOr{margin:calc(12*var(--s)) 0 calc(8*var(--s))}
  .ljForm input,.ljForm .hotBtn{height:calc(48*var(--s))}
  .lobbySheet .sheetTop{padding-top:calc(10*var(--s))}
  .lobbySheet .close{top:calc(10*var(--s))}
  .lobbySheet .head{padding:calc(5*var(--s)) calc(20*var(--s))}
  .lobbySheet h2{font-size:calc(22*var(--s))}
  .lobShare{margin-top:calc(10*var(--s));padding:calc(5*var(--s)) calc(6*var(--s)) calc(5*var(--s)) calc(12*var(--s))}
  .lobShare>span{font-size:calc(12*var(--s))}.lobShare b{font-size:calc(18*var(--s))}
  #lobCopy{height:calc(34*var(--s))}
  .lobBody{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:calc(14*var(--s));margin-top:calc(10*var(--s))}
  .lobPeople,.lobTalk{gap:calc(6*var(--s))}
  .lobHead b{font-size:calc(14*var(--s))}
  .lobRules button{height:calc(28*var(--s));font-size:calc(10*var(--s));letter-spacing:calc(1*var(--s));padding:0 calc(8*var(--s)) 0 calc(6*var(--s))}
  .lobList{max-height:calc(100dvh - calc(250*var(--s)));min-height:calc(90*var(--s))}
  .lobList li{min-height:calc(42*var(--s));padding:calc(3*var(--s)) calc(8*var(--s));gap:calc(8*var(--s))}
  .lobList .face{width:calc(30*var(--s));height:calc(30*var(--s))}
  .lobList .who b{font-size:calc(13*var(--s))}
  .lobList .act{height:calc(26*var(--s));font-size:calc(10*var(--s));padding:0 calc(7*var(--s))}
  .lobChat{height:calc(100dvh - calc(330*var(--s)));min-height:calc(70*var(--s))}
  .lobChat p{font-size:calc(12.5*var(--s));margin-bottom:calc(3*var(--s))}
  .lobChatForm input,.lobChatForm .hotBtn{height:calc(38*var(--s))}
  .lobEmotes{gap:calc(4*var(--s))}
  .lobFoot{margin-top:calc(10*var(--s))}
  #lobLeave{height:calc(42*var(--s))}
  #lobPlay{height:calc(46*var(--s));font-size:calc(19*var(--s))}
  #watchBar{bottom:max(calc(12*var(--s)),var(--sab))}
  #dead .rv{font-size:calc(11*var(--s));padding:calc(3*var(--s)) calc(14*var(--s))}#dead .rv b{font-size:calc(13*var(--s))}
}
/* narrow sideways phones: the round clock sits under the top row on the left, so the friends board goes under it */
@media (orientation:landscape) and (max-width:620px) and (max-height:430px){
  #friendsCard{top:calc(max(calc(8*var(--s)),var(--sat)) + calc(96*var(--s)))}
  #friendsLb li:nth-child(n+3):not(.me){display:none}
}
/* emote button: bottom right, above the connection label (computers) or above the FLING button (touch). The top row
   stays as it was (numbers, menu, sound, invite), which keeps it clear of the round clock and the leaderboard. */
#emoteBtn{position:absolute;z-index:4;right:max(calc(18*var(--s)),var(--sar));bottom:calc(max(calc(18*var(--s)),var(--sab)) + calc(42*var(--s)));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;pointer-events:auto}
#emoteBtn svg{transform:skewX(var(--unskew))}
#emoteBtn[aria-expanded="true"]{background:var(--hot);color:var(--ink);border-color:var(--ink)}
#emoteBar{position:absolute;z-index:4;right:calc(max(calc(18*var(--s)),var(--sar)) + calc(58*var(--s)));bottom:calc(max(calc(18*var(--s)),var(--sab)) + calc(42*var(--s)));display:flex;gap:calc(6*var(--s));padding:calc(7*var(--s));background:rgba(11,10,26,.78);box-shadow:calc(5*var(--s)) calc(5*var(--s)) 0 var(--accent);pointer-events:auto;animation:toastUp .18s ease-out}
#emoteBar .emo{width:calc(48*var(--s));height:calc(48*var(--s))}
/* touch: over the FLING button, the bar opens to its left in two rows */
@media (pointer:coarse){
  #emoteBtn{width:calc(40*var(--s));height:calc(40*var(--s));right:calc(max(calc(22*var(--s)),var(--sar)) + calc(36*var(--s)));bottom:calc(max(calc(44*var(--s)),calc(var(--sab) + calc(30*var(--s)))) + calc(126*var(--s)))}
  #emoteBtn svg{width:calc(20*var(--s));height:calc(20*var(--s))}
  #emoteBar{display:grid;grid-template-columns:repeat(4,calc(44*var(--s)));gap:calc(5*var(--s));padding:calc(6*var(--s));right:calc(max(calc(22*var(--s)),var(--sar)) + calc(84*var(--s)));bottom:calc(max(calc(44*var(--s)),calc(var(--sab) + calc(30*var(--s)))) + calc(126*var(--s)))}
  #emoteBar .emo{width:calc(44*var(--s));height:calc(44*var(--s))}
  .pingBtn{grid-column:span 4;height:calc(38*var(--s))}
}
@media (pointer:coarse) and (max-height:520px){
  #emoteBtn{bottom:calc(max(calc(44*var(--s)),calc(var(--sab) + calc(30*var(--s)))) + calc(110*var(--s)));right:calc(max(calc(22*var(--s)),var(--sar)) + calc(31*var(--s)))}
  #emoteBar{bottom:calc(max(calc(44*var(--s)),calc(var(--sab) + calc(30*var(--s)))) + calc(70*var(--s)));right:calc(max(calc(22*var(--s)),var(--sar)) + calc(80*var(--s)))}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  #emoteBtn{width:calc(38*var(--s));height:calc(38*var(--s));bottom:calc(max(calc(18*var(--s)),calc(var(--sab) + calc(8*var(--s)))) + calc(112*var(--s)));right:calc(max(calc(18*var(--s)),calc(var(--sar) + calc(6*var(--s)))) + calc(31*var(--s)))}
  #emoteBar{grid-template-columns:repeat(4,calc(40*var(--s)));bottom:calc(max(calc(18*var(--s)),calc(var(--sab) + calc(8*var(--s)))) + calc(56*var(--s)));right:calc(max(calc(18*var(--s)),calc(var(--sar) + calc(6*var(--s)))) + calc(110*var(--s)))}
  #emoteBar .emo{width:calc(40*var(--s));height:calc(40*var(--s))}
  .pingBtn{height:calc(34*var(--s))}
}
/* computers, phones without a touch screen check: phones and narrow windows use the smaller sizes */
@media (max-width:700px) and (pointer:fine){#emoteBtn{width:calc(38*var(--s));height:calc(38*var(--s))}}
/* upright tablets: smaller numbers and buttons in the top row, the round clock under it on the left (like phones),
   so nothing runs under the leaderboard */
@media (min-width:701px) and (max-aspect-ratio:1/1){
  .hudTop{gap:calc(7*var(--s))}
  #stats{gap:calc(7*var(--s))}#stats .s{min-width:calc(54*var(--s));padding:calc(4*var(--s)) calc(9*var(--s));box-shadow:calc(4*var(--s)) calc(4*var(--s)) 0 var(--accent)}
  #stats b{font-size:calc(22*var(--s))}#stats small{font-size:calc(9*var(--s));letter-spacing:calc(2*var(--s))}
  #menuBtn,#sndBtn{width:calc(40*var(--s));height:calc(40*var(--s))}
  #inviteBtn{width:calc(40*var(--s));height:calc(40*var(--s));padding:0}#inviteBtn b{display:none}
  #timer{left:max(calc(18*var(--s)),var(--sal));top:calc(max(calc(16*var(--s)),var(--sat)) + calc(64*var(--s)));transform:skewX(var(--skew))}
  #friendsCard{top:calc(max(calc(16*var(--s)),var(--sat)) + calc(122*var(--s)))}
}
/* narrower laptop windows: INVITE becomes an icon so the top row stays clear of the round clock */
@media (min-width:901px) and (max-width:1180px) and (min-aspect-ratio:1/1){
  #inviteBtn{width:calc(46*var(--s));padding:0}#inviteBtn b{display:none}
}
/* "By playing you agree to the Terms · Privacy": the lowest line of the lobby. Laptops and desktops: its own row under
   the pet grid. One-column lobbies: the last thing on the page. (Phones held sideways keep the small Privacy · Terms
   in the top bar: that screen has no free line at the bottom.) */
@media (min-width:901px) and (min-aspect-ratio:1/1) and (min-height:501px){
  #lobby{grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"top top" "hero menu" "hero pets" "hero legal"}
  #lobby>.legal{grid-area:legal;justify-self:start;margin-top:calc(8*var(--s));padding:calc(2*var(--s)) calc(10*var(--s));font-size:calc(11.5*var(--s))}
}
@media (max-width:900px),(max-aspect-ratio:1/1){
  #lobby>.legal{align-self:center;margin-top:calc(4*var(--s));text-align:center}
}