@font-face{font-family:"Fredoka";src:url(/art/ui/fonts/fredoka-latin-wght.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
:root{--o:#ff8a3d;--c:#3ed6ff;--p:#ff5c9a;--y:#ffd23a;--bg:#120c2a;--panel:rgba(18,14,44,.88);--line:rgba(255,255,255,.13);--fg:#fff;--dim:#bcb6dc;font-family:"Fredoka",ui-rounded,"Nunito","Segoe UI Rounded","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation}
#scene{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none}
.screen{position:fixed;inset:0;display:none;z-index:5;overflow:auto;padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.screen.on{display:flex}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dim{color:var(--dim)}.small{font-size:13px}
.panel{margin:auto;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:22px 22px 18px;width:min(520px,100%);box-shadow:0 20px 60px rgba(0,0,0,.5);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:10px}
.panel.wide{width:min(840px,100%)}
h2{margin:0 0 4px;font-size:28px;letter-spacing:.5px}
h3{margin:8px 0 2px;font-size:14px;color:var(--dim);text-transform:uppercase;letter-spacing:1px}
p{margin:0}
.btn{font:inherit;font-weight:800;font-size:17px;color:#fff;background:rgba(255,255,255,.1);border:1px solid var(--line);border-radius:14px;padding:12px 18px;cursor:pointer;transition:transform .08s,background .15s}
.btn:hover{background:rgba(255,255,255,.18)}.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,#ffa25a,#ff6a2a);border-color:#ffb27a;box-shadow:0 5px 0 #b8440f,0 10px 24px rgba(255,120,40,.3)}
.btn.hot{background:linear-gradient(180deg,#4fe0ff,#1e9ed8);border-color:#8eeaff;box-shadow:0 5px 0 #0d5f8a}
.btn.ghost{background:transparent}.btn.sm{font-size:14px;padding:9px 8px}
.btn:disabled{opacity:.45;cursor:default}
[hidden]{display:none!important}
.btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{font:inherit;font-weight:800;color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer}
.chip.on{background:var(--o);border-color:#ffc08f;color:#1a0f00}.chip:disabled{cursor:default}
.opt{display:flex;align-items:center;gap:12px;font-weight:800}.opt>span{min-width:64px;color:var(--dim)}
label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--dim)}
input{font:inherit;font-size:18px;font-weight:800;color:#fff;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:12px;padding:10px 12px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
label.tog{flex-direction:row;align-items:center;gap:10px;color:#fff}.tog input{width:22px;height:22px}
#title{align-items:center;justify-content:center;gap:26px;background:radial-gradient(circle at 30% 30%,#3b1f6e,#120c2a 70%)}
#title .art{flex:1.5;max-width:62vw;display:flex;justify-content:center}
#title .art img{width:100%;max-height:88vh;object-fit:contain;border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
#title .menu{flex:1;max-width:340px;display:flex;flex-direction:column;gap:10px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (orientation:portrait){#title{flex-direction:column}#title .art{max-width:100%}#title .art img{max-height:36vh}#title .menu{width:100%}}
@media (max-height:520px){.btn{padding:8px 12px;font-size:15px}#title .menu{gap:7px}h2{font-size:22px}.panel{padding:14px;gap:7px}}
.or{text-align:center;color:var(--dim);font-size:14px}
.join{display:flex;gap:8px}.join input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:4px;text-align:center}
.lobbytop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.code{font-size:40px;font-weight:900;letter-spacing:8px;color:var(--y);line-height:1.1}
#slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px}
.slot{display:flex;align-items:center;gap:7px;padding:9px 11px;border-radius:14px;background:rgba(255,255,255,.06);border:2px solid var(--c,rgba(255,255,255,.25));min-height:50px}
.slot .av{width:24px;text-align:center;color:var(--c,#fff);font-size:20px}
.slot b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot.bot{border-style:dashed;border-color:#9aa0c8;background:rgba(150,160,220,.08)}
.slot.empty{border-style:dotted;border-color:var(--line);opacity:.75}
.slot .rd{font-size:13px;color:var(--dim);white-space:nowrap}
.tg{font-style:normal;font-size:11px;font-weight:900;padding:3px 7px;border-radius:6px;background:#fff;color:#111}
.tg.host{background:var(--y)}.tg.you{background:var(--c)}.tg.botb{background:#9aa0c8;color:#10102a}.tg.t0{background:var(--o)}.tg.t1{background:#4f8cff;color:#fff}
.mini{font:inherit;font-size:12px;font-weight:800;color:#fff;background:rgba(255,255,255,.14);border:0;border-radius:8px;padding:5px 8px;cursor:pointer}
.hint{text-align:center;font-weight:800;color:var(--y);min-height:1.2em;margin:4px 0}
#resTitle{font-size:42px;text-align:center;background:linear-gradient(90deg,var(--y),var(--o),var(--p));-webkit-background-clip:text;background-clip:text;color:transparent}
#resSub{text-align:center;color:var(--dim)}
#resTable{display:flex;flex-direction:column;gap:6px}
.rrow{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-left:5px solid var(--c);background:rgba(255,255,255,.06);border-radius:10px}
.rrow span{font-size:13px;color:var(--dim)}
.xp{text-align:center;font-weight:800;color:var(--y)}
.bot{display:inline-block;font-size:10px;font-weight:900;background:#9aa0c8;color:#10102a;border-radius:5px;padding:2px 5px;margin-right:6px;vertical-align:2px}
.you{display:inline-block;font-size:10px;font-weight:900;background:var(--c);color:#002;border-radius:5px;padding:2px 5px;margin-left:6px;vertical-align:2px}
#lvl b{font-size:20px}.xpbar{height:10px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;margin:6px 0}.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--c),var(--p))}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.pick{font:inherit;color:#fff;background:rgba(255,255,255,.07);border:2px solid transparent;border-radius:14px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.pick small{font-size:11px;color:var(--dim)}.pick.sel{border-color:var(--y);background:rgba(255,210,58,.12)}.pick.locked{opacity:.45;cursor:default}
.sw{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}.ic{font-size:24px;height:30px}
.rp{width:8px;height:30px;border-radius:4px;background:#eee}.rp.r1{background:#3ed6ff;box-shadow:0 0 10px #3ed6ff}.rp.r2{background:linear-gradient(#ffe066,#ff5a1f);box-shadow:0 0 10px #ff7a2a}.rp.r3{background:linear-gradient(red,orange,yellow,lime,cyan,blue,violet)}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.hc{background:rgba(255,255,255,.06);border-radius:14px;padding:12px}.hc p{margin-top:6px;color:var(--dim);font-size:14px;line-height:1.4}
#game{pointer-events:none;padding:0;overflow:hidden} /* the HUD layer never scrolls: a float or banner passing the edge is clipped, not a scroll area */
#game button,#stickzone{pointer-events:auto}
#cards{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));display:flex;gap:6px;max-width:56vw;flex-wrap:wrap}
.card{min-width:100px;padding:5px 9px 6px;border-radius:12px;background:rgba(10,8,30,.62);border:2px solid var(--c);font-size:12px;line-height:1.25;backdrop-filter:blur(6px)}
.card.down{opacity:.45;filter:grayscale(.8)}.card.isbot{border-style:dashed}
.card .nm{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.card .row{display:flex;justify-content:space-between;gap:6px}.card .hp{color:#ff6b8b;letter-spacing:1px}.card .wn{color:var(--y)}
.card .sc{font-weight:900;font-size:16px}
.spb{height:5px;border-radius:5px;background:rgba(255,255,255,.15);overflow:hidden}.spb i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--c),#fff)}.spb.full i{background:linear-gradient(90deg,var(--y),var(--o))}
#obj{position:absolute;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;padding:6px 14px;border-radius:999px;background:rgba(10,8,30,.62);font-size:13px;white-space:nowrap;backdrop-filter:blur(6px)}
#obj b{color:var(--y)}#obj i{font-style:normal;font-weight:900;color:#fff;background:var(--p);border-radius:999px;padding:1px 8px}
@media (max-width:1000px){#obj{top:auto;bottom:max(8px,env(safe-area-inset-bottom));font-size:12px}}
#btnPause{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:rgba(10,8,30,.62);color:#fff;font-size:18px;font-weight:900}
#tags .tag{position:absolute;left:0;top:0;font-size:9px;font-weight:900;padding:1px 6px;border-radius:999px;background:rgba(10,8,30,.72);border:1.5px solid var(--c);white-space:nowrap;pointer-events:none}
#tags .tag.isbot{border-style:dashed;color:#d7dbff}#tags .tag.me{background:var(--c);color:#06121a;border-color:#fff}#tags .tag.down{opacity:.4}
#floats .float{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:17px;color:#fff;text-shadow:-1.5px 0 #2a1038,1.5px 0 #2a1038,0 -1.5px #2a1038,0 1.5px #2a1038,-1px -1px #2a1038,1px -1px #2a1038,-1px 1px #2a1038,1px 1px #2a1038,0 3px 0 #2a1038;animation:rise .95s cubic-bezier(.2,.8,.3,1) forwards;pointer-events:none;white-space:nowrap}
.float.me{color:var(--y)}.float.perfect{font-size:28px;color:#ffe36e;text-shadow:-2px 0 #8a3208,2px 0 #8a3208,0 -2px #8a3208,0 2px #8a3208,-1.5px -1.5px #8a3208,1.5px -1.5px #8a3208,-1.5px 1.5px #8a3208,1.5px 1.5px #8a3208,0 4px 0 #8a3208,0 0 14px #ff8a3d}.float.combo{color:var(--p);font-size:20px}.float.item{color:var(--c);font-size:18px}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-20%) scale(.5)}13%{opacity:1;transform:translate(-50%,-66%) scale(1.25)}24%{transform:translate(-50%,-78%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-185%) scale(.96)}}
#weapon{position:absolute;bottom:max(46px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-weight:900;color:var(--y);text-shadow:0 2px 4px #000}
#keys{position:absolute;bottom:10px;left:12px;font-size:12px;color:rgba(255,255,255,.55)}
#stickzone,#btnFire,#btnSpecial{display:none}
#stickzone{touch-action:none} /* the thumb zone steers by its own drags: without this, a browser that pans by touch takes a drag over after the first move (pointercancel) and the hero stops */
@media (pointer:coarse){#keys{display:none}#stickzone{display:block;position:absolute;left:0;bottom:0;width:50vw;height:72vh}#btnFire,#btnSpecial{display:flex}}
#stickbase{position:absolute;width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);opacity:0;transition:opacity .15s}#stickbase.on{opacity:1}
#knob{position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.55);transform:translate(-50%,-50%)}
#btnFire{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:104px;height:104px;border-radius:50%;align-items:center;justify-content:center;font:inherit;font-weight:900;font-size:18px;color:#fff;background:radial-gradient(circle at 35% 30%,#ffb27a,#ff5a1f);border:3px solid rgba(255,255,255,.7);box-shadow:0 8px 20px rgba(0,0,0,.4);touch-action:none}
#btnFire:active{transform:scale(.93)}
#btnSpecial{position:absolute;right:calc(max(18px,env(safe-area-inset-right)) + 116px);bottom:max(26px,env(safe-area-inset-bottom));width:72px;height:72px;border-radius:50%;align-items:center;justify-content:center;font:inherit;font-weight:900;font-size:11px;color:#fff;border:3px solid rgba(255,255,255,.35);background:conic-gradient(var(--y) calc(var(--p,0)*360deg),rgba(10,8,30,.6) 0);opacity:.75;touch-action:none}
#btnSpecial.ready{opacity:1;border-color:#fff;animation:glow .45s infinite alternate}
@keyframes glow{from{box-shadow:0 0 6px rgba(255,210,58,.4)}to{box-shadow:0 0 26px rgba(255,210,58,.95)}}
body.spectate #stickzone,body.spectate #btnFire,body.spectate #btnSpecial{display:none}
#fxTint{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .3s;box-shadow:inset 0 0 120px 30px rgba(140,220,255,.55)}
body.freeze #fxTint{opacity:1}body.slow #fxTint{opacity:.8;box-shadow:inset 0 0 120px 30px rgba(170,110,255,.45)}
#banner{position:fixed;left:50%;top:36%;transform:translate(-50%,-50%);z-index:20;text-align:center;pointer-events:none;opacity:0;width:96vw}
#banner b{display:block;font-size:clamp(26px,6vw,64px);font-weight:900;letter-spacing:1px;color:#fff;text-shadow:0 4px 0 #ff5a1f,0 8px 24px rgba(0,0,0,.6)}
#banner small{display:block;font-size:clamp(13px,2vw,20px);font-weight:800;color:var(--y);text-shadow:0 2px 6px #000;margin-top:4px}
#banner.on{animation:ban 1.9s ease-out forwards}
@keyframes ban{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%)}}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,40px);z-index:30;background:rgba(10,8,30,.94);border:1px solid var(--line);border-radius:12px;padding:10px 16px;font-weight:800;opacity:0;transition:.2s;max-width:90vw;text-align:center;pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0)}
#net{position:fixed;top:58px;right:12px;z-index:30;color:var(--p);font-weight:900;font-size:13px}
#rotate{display:none;position:fixed;inset:0;z-index:50;background:#120c2a;align-items:center;justify-content:center;text-align:center;font-size:56px}
#rotate p{font-size:18px;font-weight:800}
@media (orientation:portrait) and (pointer:coarse){#obj{top:calc(50% + 30vw + 8px);bottom:auto}#weapon{top:calc(50% + 30vw + 42px);bottom:auto}}

#title{background:linear-gradient(rgba(18,12,42,.5),rgba(18,12,42,.88)),url(/art/bg1-focus3.jpg) center/cover}
.brand{flex:1.4;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:64vw}
.logo{display:flex;flex-wrap:wrap;justify-content:center;gap:.22em;font-weight:900;font-size:clamp(42px,7.5vw,104px);line-height:.95;letter-spacing:2px}
.logo span{background:linear-gradient(180deg,#ffe36e,#ff8a3d 55%,#ff4d7d);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 #7a1f4d) drop-shadow(0 12px 22px rgba(0,0,0,.5))}
.logo span+span{background:linear-gradient(180deg,#c9f8ff,#3ed6ff 55%,#4f6dff);-webkit-background-clip:text;background-clip:text}
.by{font-weight:800;letter-spacing:6px;color:#fff;opacity:.9;text-transform:uppercase;font-size:14px}
.lineup{display:flex;gap:10px;justify-content:center;margin-top:10px}
.lineup button{border:3px solid rgba(255,255,255,.15);border-radius:18px;padding:0;background:rgba(255,255,255,.06);cursor:pointer;overflow:hidden;width:clamp(58px,9.5vw,128px);aspect-ratio:3/4.4;transition:transform .15s,border-color .15s}
.lineup button img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.lineup button.sel{border-color:var(--y);transform:translateY(-6px);box-shadow:0 10px 24px rgba(255,210,58,.3)}
.hint2{font-size:12px;color:var(--dim);margin:2px 0 0}
.row4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.heroes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.hero{font:inherit;color:#fff;background:rgba(255,255,255,.06);border:3px solid transparent;border-radius:16px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.hero img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:10px}
.hero.sel{border-color:var(--y);background:rgba(255,210,58,.12)}
.hero small{color:var(--dim);font-size:11px}
.legacy{display:none}
.card .face{width:22px;height:22px;border-radius:50%;object-fit:cover;vertical-align:-7px;margin-right:4px;border:2px solid var(--c)}
.ic{color:var(--c);margin-right:4px;font-style:normal}
.tag .ic{color:inherit}#tags .tag .ic{font-size:9px;height:auto;margin-right:3px}
.slot img.av{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--c,#fff)}
.acct{display:flex;flex-direction:column;gap:8px}
.brow{display:grid;grid-template-columns:44px 1fr 64px 84px;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);margin-bottom:6px;font-weight:700}
.tg.acc{background:#6cff9a;color:#04210f}
@media (orientation:portrait){.brand{max-width:100%}}
@media (max-height:520px){.logo{font-size:40px}.lineup button{width:54px}.by{font-size:11px}}
/* Phones: player cards become one row of compact chips; sideways, the stage banner sits beside pause instead of over the heroes' feet */
@media (pointer:coarse){#cards{gap:4px;flex-wrap:nowrap;max-width:calc(100vw - 66px - env(safe-area-inset-left) - env(safe-area-inset-right))}
#cards .card{flex:0 1 auto;width:104px;min-width:68px;padding:3px 5px 4px;border-radius:9px;border-width:1.5px;font-size:10px;line-height:1.2;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:2px;align-items:center}
#cards .card:has(.you){background:rgba(46,40,86,.82)}
#cards .row{display:contents}#cards .nm{grid-area:1/1;max-width:none;font-size:9.5px}#cards .nm .bot,#cards .nm .you{display:none}
#cards .face{width:16px;height:16px;border-width:1.5px;vertical-align:-4px;margin-right:2px}#cards .ic{font-size:9px;height:auto;margin-right:2px}
#cards .wn{grid-area:1/2;font-size:8px}#cards .hp{grid-area:2/1;font-size:8px;letter-spacing:0;white-space:nowrap;overflow:hidden}
#cards .sc{grid-area:2/2;justify-self:end;font-size:10.5px}#cards .spb{grid-area:3/1/4/3;height:3px;margin-top:2px}}
@media (pointer:coarse) and (orientation:landscape){#cards{max-width:calc(100vw - 400px - env(safe-area-inset-left) - env(safe-area-inset-right))}
#obj{top:max(8px,env(safe-area-inset-top));bottom:auto;left:auto;right:calc(max(8px,env(safe-area-inset-right)) + 50px);transform:none;padding:4px 10px;gap:6px;font-size:11px}#obj span{max-width:30vw;overflow:hidden;text-overflow:ellipsis}}
@media (pointer:coarse) and (orientation:landscape) and (max-width:740px){#cards{max-width:calc(100vw - 66px - env(safe-area-inset-left) - env(safe-area-inset-right))}
#obj{top:calc(max(8px,env(safe-area-inset-top)) + 46px);right:auto;left:max(8px,env(safe-area-inset-left))}}
/* Gamyfy Omni Channel (AGENTS.md): the small-button row closes up when a build switches one of its buttons off; a marketplace build shows the menu once it works; the screen is held while the platform answers an ad request; a name the platform supplies cannot be edited */
.row4:has(>[hidden]){grid-template-columns:repeat(3,1fr)}
body.boot .menu{visibility:hidden}
input[readonly]{opacity:.7;cursor:default}
#adwait{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(18,12,42,.72)}
#adwait i{width:46px;height:46px;border-radius:50%;border:5px solid rgba(255,255,255,.25);border-top-color:#fff;opacity:0;animation:adspin .8s linear infinite,adin .2s .3s forwards}
@keyframes adspin{to{transform:rotate(360deg)}}@keyframes adin{to{opacity:1}}
/* The living title (js/showcase.js): the still picture is what loads first; once the real arena is drawing behind the menu it fades out, and a scrim keeps the menu readable with a clear window around the hero */
#title{background:none}
#title::before,#title::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
#title::before{background:linear-gradient(rgba(18,12,42,.5),rgba(18,12,42,.88)),url(/art/bg1-focus3.jpg) center/cover}
#title::after{opacity:0;background:linear-gradient(rgba(18,12,42,.62),rgba(18,12,42,.5) calc(var(--b1,30%) - 60px),rgba(18,12,42,0) calc(var(--b1,30%) + 46px),rgba(18,12,42,0) calc(var(--b2,58%) - 44px),rgba(18,12,42,.7) calc(var(--b2,58%) + 30px),rgba(18,12,42,.9))}
#title[data-live=wide]::after{background:radial-gradient(ellipse calc(var(--hr,90px)*1.5) calc(var(--hr,90px)*1.9) at var(--hx,53%) var(--hy,70%),rgba(18,12,42,0) 46%,rgba(18,12,42,.62) 100%)}
body.live #title::before{opacity:0;transition:opacity .5s}
body.live #title::after{opacity:1;transition:opacity .5s}
/* ── Skin: one family for every screen. Bundled type (Fredoka, SIL OFL: art/ui/fonts/OFL.txt), glass panels, arcade buttons with a lip that
   goes down when pressed. Looks only: no rule below changes where a control sits or how big it is. The line height is pinned to what the
   system fonts gave (their own "normal" is 1.17 to 1.19), so boxes keep their height with the new type. ── */
:root{font-weight:500;line-height:1.18;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h2{font-weight:700;letter-spacing:.3px;text-shadow:0 2px 0 rgba(0,0,0,.28)}
h3{font-weight:600;letter-spacing:1.3px}
.panel{background:linear-gradient(180deg,rgba(47,37,106,.94),rgba(22,16,58,.96));border-color:rgba(255,255,255,.17);box-shadow:0 22px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.35)}
.btn{font-weight:700;letter-spacing:.2px;background:linear-gradient(180deg,rgba(84,70,160,.82),rgba(44,34,102,.86));border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 0 rgba(8,5,28,.6),0 8px 16px rgba(4,2,16,.25);text-shadow:0 1px 0 rgba(0,0,0,.35);transition:transform .08s,filter .15s,box-shadow .08s}
.btn:hover{background:linear-gradient(180deg,rgba(84,70,160,.82),rgba(44,34,102,.86))}
@media (hover:hover){.btn:hover,.chip:hover{filter:brightness(1.14)}}
.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 0 rgba(8,5,28,.6)}
.btn.primary{background:linear-gradient(180deg,#ffb86e,#ff8f42 46%,#ff6a2a);border-color:#ffd0a4;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(168,56,10,.35),0 5px 0 #b8440f,0 12px 24px rgba(255,110,40,.3);text-shadow:0 1px 0 rgba(150,54,6,.75)}
.btn.primary:active{transform:translateY(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 0 #b8440f}
.btn.hot{background:linear-gradient(180deg,#7be9ff,#38c6f4 46%,#1e9ed8);border-color:#b4f2ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 0 rgba(10,84,128,.35),0 5px 0 #0d5f8a,0 12px 24px rgba(40,170,230,.28);text-shadow:0 1px 0 rgba(8,74,112,.75)}
.btn.hot:active{transform:translateY(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 0 #0d5f8a}
.btn.ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn:disabled{filter:saturate(.35) brightness(.8);transform:none}
.btn:focus-visible,.chip:focus-visible,.pick:focus-visible,.hero:focus-visible,.lineup button:focus-visible,.mini:focus-visible,#btnPause:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.chip{font-weight:700;background:linear-gradient(180deg,rgba(84,70,160,.6),rgba(44,34,102,.66));border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 0 rgba(8,5,28,.5);transition:transform .08s,filter .15s}
.chip:active{transform:translateY(1px)}
.chip.on{background:linear-gradient(180deg,#ffbd76,#ff8a3d);border-color:#ffd9b5;color:#3b1600;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 0 #b8440f}
.chip:disabled{filter:saturate(.6)}
.opt>span,label{font-weight:600}
input{font-weight:600;background:rgba(8,5,28,.6);border-color:rgba(255,255,255,.16);box-shadow:inset 0 2px 5px rgba(0,0,0,.4);transition:border-color .15s,box-shadow .15s}
input:focus{outline:none;border-color:var(--c);box-shadow:inset 0 2px 5px rgba(0,0,0,.4),0 0 0 3px rgba(62,214,255,.25)}
input::placeholder{color:rgba(188,182,220,.5)}
.tog input{-webkit-appearance:none;appearance:none;margin:3px 3px 3px 4px;padding:0;border-radius:7px;background:rgba(8,5,28,.6) center/14px 14px no-repeat;border:1.5px solid rgba(255,255,255,.28);box-shadow:inset 0 2px 4px rgba(0,0,0,.4);cursor:pointer;transition:background-color .15s,border-color .15s}
.tog input:checked{background-color:#2fb8ee;border-color:#b4f2ff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.6 7.4l3 3 5.8-6.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.tog input:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.screen:not(#title):not(#game)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgba(14,9,36,.55)}
.screen.on>.panel{animation:pin .18s ease-out}
@keyframes pin{from{opacity:0;transform:translateY(10px) scale(.975)}}
/* Title: the logo is the game's name (game.meta.json, written into index.html by scripts/brand.mjs) in the bundled face: POP in the warm
   colours and STRIKE in the cool ones, touching, so it reads as one word. It always reads left to right, Arabic included.
   Upright, the one line is drawn larger, about as wide as the hero cards below it (short screens keep their own size further down). */
.logo{font-weight:700;letter-spacing:.05em;direction:ltr;flex-wrap:nowrap;gap:0}
@media (orientation:portrait){.logo{font-size:clamp(42px,12.5vw,104px)}}
.logo span{background:linear-gradient(180deg,#fff7c4 6%,#ffd84a 32%,#ff9a3d 58%,#ff5a6e 94%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(.035em 0 0 #4a1259) drop-shadow(-.035em 0 0 #4a1259) drop-shadow(0 -.035em 0 #4a1259) drop-shadow(0 .035em 0 #4a1259) drop-shadow(0 .1em 0 #380c47) drop-shadow(0 .2em .28em rgba(0,0,0,.5));animation:bob 3.6s ease-in-out infinite}
.logo span+span{background:linear-gradient(180deg,#f0fdff 6%,#93ecff 32%,#3ec6ff 58%,#4f6dff 94%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(.035em 0 0 #16206b) drop-shadow(-.035em 0 0 #16206b) drop-shadow(0 -.035em 0 #16206b) drop-shadow(0 .035em 0 #16206b) drop-shadow(0 .1em 0 #0f1750) drop-shadow(0 .2em .28em rgba(0,0,0,.5))}
@keyframes bob{50%{transform:translateY(-.07em)}}
.by{font-weight:600;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.hint2{text-shadow:0 1px 4px rgba(0,0,0,.7)}
.lineup button{background:linear-gradient(180deg,rgba(84,70,160,.55),rgba(30,22,70,.75));border-color:rgba(255,255,255,.22);box-shadow:0 3px 0 rgba(8,5,28,.55);transition:transform .15s,border-color .15s,box-shadow .15s}
.lineup button.sel{border-color:var(--y);box-shadow:0 0 0 2px rgba(255,210,58,.35),0 10px 22px rgba(255,190,40,.4)}
#titleInfo{text-shadow:0 1px 4px rgba(0,0,0,.6)}
/* While the game loads: the logo, and three bubbles bouncing where the hero cards are about to be; the menu fades in the moment it works */
.lineup:empty{height:calc(clamp(58px,9.5vw,128px)*4.4/3);align-items:center}
.lineup:empty::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:-30px 0 var(--o),30px 0 var(--p);animation:load 1s ease-in-out infinite}
@keyframes load{0%,100%{transform:none;box-shadow:-30px -10px var(--o),30px 0 var(--p)}33%{transform:translateY(-10px);box-shadow:-30px 10px var(--o),30px 10px var(--p)}66%{transform:none;box-shadow:-30px 0 var(--o),30px -10px var(--p)}}
#title .menu,#title .hint2{transition:opacity .2s}
#title:has(.lineup:empty) .menu,#title:has(.lineup:empty) .hint2{opacity:0;pointer-events:none}
@media (max-height:520px){.lineup:empty{height:calc(54px*4.4/3)}}
/* Online lobby: a bot's row is a row like the others (it used to pick up the small BOT badge's own style by sharing its class name: 10 px dark text, no layout) */
.slot.bot{display:flex;font-size:inherit;font-weight:inherit;color:inherit;padding:9px 11px;margin-right:0;vertical-align:baseline;border-radius:14px}
.slot{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.slot b{min-width:2.5em;font-weight:700}
.code{font-weight:700;text-shadow:0 3px 0 rgba(120,70,0,.6),0 0 22px rgba(255,210,58,.35)}
.hint{font-weight:700}
.tg{font-weight:700;letter-spacing:.3px}
.mini{font-weight:700;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.12));box-shadow:0 2px 0 rgba(8,5,28,.5)}
.mini:active{transform:translateY(1px)}
/* Heroes & Locker, how to play, leaderboard */
.hero{background:linear-gradient(180deg,rgba(84,70,160,.5),rgba(30,22,70,.6));box-shadow:0 3px 0 rgba(8,5,28,.5);transition:transform .12s,border-color .15s,box-shadow .15s}
.hero b{font-weight:700}
.hero.sel{background:linear-gradient(180deg,rgba(255,210,58,.26),rgba(255,160,40,.12));box-shadow:0 0 0 2px rgba(255,210,58,.3),0 8px 20px rgba(255,190,40,.3)}
.hero:active,.pick:active:not(.locked){transform:scale(.97)}
.pick{background:linear-gradient(180deg,rgba(84,70,160,.5),rgba(30,22,70,.6));box-shadow:0 2px 0 rgba(8,5,28,.5);transition:transform .12s,border-color .15s}
.pick.sel{background:linear-gradient(180deg,rgba(255,210,58,.26),rgba(255,160,40,.12))}
#lvl b{font-weight:700}
.xpbar{background:rgba(8,5,28,.6);box-shadow:inset 0 2px 4px rgba(0,0,0,.45)}
.xpbar i{border-radius:9px;background:linear-gradient(90deg,var(--c),var(--p));box-shadow:inset 0 2px 0 rgba(255,255,255,.4)}
.hc{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.hc b{font-weight:700;color:var(--y)}
.brow{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));font-weight:600}
.brow:first-child b{color:var(--y)}
.or{font-weight:500}
/* Messages */
#toast{left:0;right:0;top:max(12px,env(safe-area-inset-top));bottom:auto;margin:0 auto;width:-moz-fit-content;width:fit-content;max-width:min(90vw,460px);transform:translateY(-8px);background:linear-gradient(180deg,rgba(52,41,116,.97),rgba(24,17,62,.98));border-color:rgba(255,255,255,.22);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18);font-weight:600}
#toast.on{transform:none}
body[data-screen="game"] #toast{top:calc(max(8px,env(safe-area-inset-top)) + 56px)}
body:not([data-screen="game"]) #banner{display:none}
#net{font-weight:700;text-shadow:0 1px 4px #000}
/* Results: each ending has its own face. A win is gold, with slow rays behind the title and the winner's row lit; a loss is cool and quiet.
   Every row: hero face, name, stars won, points, then the details; sideways a row is one line, so four players and the buttons fit without scrolling. */
#results .panel{position:relative;overflow:hidden}
#resTitle{font-weight:700;letter-spacing:.03em;line-height:1.05;background:linear-gradient(180deg,#fff,#cfc8f4);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 3px 0 #2c2466) drop-shadow(0 6px 10px rgba(0,0,0,.4))}
#results[data-res=win] #resTitle{background:linear-gradient(180deg,#fffbd0 8%,#ffe14d 40%,#ffb62e 74%,#ff9a2e);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 3px 0 #8a4300) drop-shadow(0 0 16px rgba(255,200,60,.6));animation:won .5s cubic-bezier(.2,1.5,.4,1) .12s backwards}
#results[data-res=over] #resTitle{background:linear-gradient(180deg,#ffd9e6 8%,#ff6fa5 48%,#d23f8f);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 3px 0 #5a1747) drop-shadow(0 6px 10px rgba(0,0,0,.4))}
#results[data-res=lose] #resTitle{background:linear-gradient(180deg,#eef2ff 8%,#a9b6f2 52%,#6f7fd6);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 3px 0 #232a66) drop-shadow(0 6px 10px rgba(0,0,0,.4))}
@keyframes won{from{transform:scale(.55);opacity:0}}
#results[data-res=win] #resTitle::before{content:"";display:block;width:56px;height:52px;margin:0 auto 2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 52'%3E%3Cg stroke='%238a4300' stroke-width='2.4' stroke-linejoin='round'%3E%3Cpath d='M15 9H5c0 9 4 15 12 16M41 9h10c0 9-4 15-12 16' fill='none' stroke-width='4.4'/%3E%3Cpath d='M15 9H5c0 9 4 15 12 16M41 9h10c0 9-4 15-12 16' fill='none' stroke='%23ffd23a' stroke-width='1.8'/%3E%3Cpath d='M14 4h28v13c0 9-6 15-14 15s-14-6-14-15z' fill='%23ffd23a'/%3E%3Cpath d='M24 31h8v8h-8z' fill='%23ffb62e'/%3E%3Cpath d='M16 38h24a2 2 0 0 1 2 2v6H14v-6a2 2 0 0 1 2-2z' fill='%23ffab2e'/%3E%3C/g%3E%3Cpath d='M15.4 5.4h25.2v5.2c-8.4 2.8-16.8 2.8-25.2 0z' fill='%23fff6b8' opacity='.75'/%3E%3Cpath d='M19 12v5c0 4 1.5 7 4 9' fill='none' stroke='%23fffbe0' stroke-width='2.6' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") center/contain no-repeat}
#results[data-res=win] .panel{border-color:rgba(255,214,90,.55);box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,200,60,.25),0 0 44px rgba(255,190,40,.22),inset 0 1px 0 rgba(255,255,255,.22)}
#results[data-res=win] .panel::before{content:"";position:absolute;z-index:-1;left:50%;top:44px;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(rgba(255,214,90,.2) 0 10deg,rgba(255,214,90,0) 10deg 20deg);-webkit-mask:radial-gradient(closest-side,#000,rgba(0,0,0,.5) 45%,transparent);mask:radial-gradient(closest-side,#000,rgba(0,0,0,.5) 45%,transparent);animation:rays 26s linear infinite}
@keyframes rays{to{transform:rotate(360deg)}}
#resSub{font-weight:500}
.rrow{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;grid-template-areas:"f n w s" "f d d d";column-gap:8px;row-gap:1px;align-items:center;padding:6px 11px 6px 7px;background:linear-gradient(90deg,rgba(255,255,255,.11),rgba(255,255,255,.04))}
.rrow .rf{grid-area:f;width:34px;height:34px;border-radius:50%;object-fit:cover;background:#0b0822;border:2px solid var(--c)}
.rrow b{grid-area:n;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.rrow .bot{color:#10102a}.rrow .you{color:#002}
.rrow .rw{grid-area:w;font-size:14px;color:var(--y);letter-spacing:1px;text-shadow:0 1px 0 rgba(120,70,0,.7)}
.rrow .rs{grid-area:s;font-size:16px;font-weight:700;color:#fff}
.rrow .rd{grid-area:d;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow.me{background:linear-gradient(90deg,rgba(62,214,255,.24),rgba(62,214,255,.06));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
#results[data-res=win] .rrow.top,#results[data-res=lose] .rrow.top,#results[data-res=end] .rrow.top{background:linear-gradient(90deg,rgba(255,210,58,.3),rgba(255,210,58,.07));box-shadow:inset 0 0 0 1.5px rgba(255,214,90,.5)}
.rrow.top .rf{box-shadow:0 0 0 2px #ffd23a,0 0 12px rgba(255,210,58,.65)}
.xp{align-self:center;padding:4px 14px;border-radius:999px;background:rgba(255,210,58,.12);box-shadow:inset 0 0 0 1px rgba(255,210,58,.35);font-weight:700}
.xp:empty{display:none}
@media (max-height:520px){#results .panel{width:min(640px,100%)}#resTitle{font-size:30px}#results[data-res=win] #resTitle::before{display:none}
.rrow{grid-template-columns:26px minmax(0,auto) auto minmax(0,1fr) auto;grid-template-areas:"f n w d s";padding:4px 11px 4px 6px}.rrow .rf{width:26px;height:26px}.rrow .rd{text-align:right}}
/* In play. Big moments keep off the heroes: upright they live in the sky above the play band, sideways under the top row.
   The stage banner is the big one; a note (lance ready, a player out) is small because it arrives in the middle of play. */
#banner b{font-weight:700;letter-spacing:.02em;text-shadow:0 .07em 0 #ff5a1f,0 .14em 0 #a72c08,0 .24em .4em rgba(0,0,0,.55)}
#banner small{font-weight:600;text-shadow:0 2px 0 rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.6)}
#banner.note{top:24%}
#banner.note b{font-size:clamp(17px,3.4vw,30px);text-shadow:0 .08em 0 #ff5a1f,0 .16em .3em rgba(0,0,0,.55)}
#banner.note small{font-size:clamp(11px,1.7vw,16px);margin-top:1px}
@media (orientation:landscape){#banner.toL,#banner.toR{width:50vw}#banner.toL{left:25%}#banner.toR{left:75%}#banner.toL:not(.note) b,#banner.toR:not(.note) b{font-size:clamp(22px,4.6vw,52px)}}
#call{position:absolute;left:50%;top:calc(max(8px,env(safe-area-inset-top)) + 50px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;white-space:nowrap}
#call b,#call i{display:block;font-style:normal;font-weight:700;line-height:1.08;opacity:0}
#call b{font-size:clamp(20px,3.4vw,30px);color:#ffe36e;text-shadow:0 .08em 0 #b8440f,0 0 .5em rgba(255,138,61,.9)}
#call b.item{color:var(--c);text-shadow:0 .08em 0 #0d5f8a,0 0 .5em rgba(62,214,255,.7)}
#call i{font-size:clamp(15px,2.5vw,22px);color:#ff8fbd;text-shadow:0 .08em 0 #7a1f4d,0 0 .5em rgba(255,92,154,.7)}
#call .on{animation:call 1.15s ease-out forwards}
@keyframes call{0%{opacity:0;transform:scale(.5)}11%{opacity:1;transform:scale(1.2)}20%{transform:scale(1)}74%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
body:has(#banner.on) #call{visibility:hidden}
@media (orientation:portrait){#banner,#banner.note{top:calc((50vh - 29.7vw + 64px + env(safe-area-inset-top,0px))/2)}#banner b{font-size:clamp(26px,9vw,64px)}#banner small{font-size:clamp(13px,3.6vw,20px)}
#banner.note b{font-size:clamp(20px,6.2vw,40px)}#banner.note small{font-size:clamp(12px,3.2vw,18px)}
#call{top:calc((50vh - 29.7vw + 64px + env(safe-area-inset-top,0px))/2 - 26px)}#call b{font-size:clamp(24px,7.4vw,44px)}#call i{font-size:clamp(17px,5vw,30px)}}
#btnSpecial{padding:0 13px;line-height:1.15;text-align:center;font-weight:700}
#btnFire{font-weight:700;letter-spacing:.5px;text-shadow:0 1px 0 rgba(150,54,6,.8)}
.float.perfect{font-size:18px}
/* Frozen and slowed time: the bubbles carry the look themselves now (frost shells, the time-warp tint), so the screen's own glow is a thin rim.
   In a freeze's last moments it flickers, as the shells do (body.thaw, set by the HUD). */
#fxTint{box-shadow:inset 0 0 64px 10px rgba(140,220,255,.5)}
body.slow #fxTint{box-shadow:inset 0 0 64px 10px rgba(170,110,255,.42)}
body.freeze.thaw #fxTint{animation:thaw .16s linear infinite}
@keyframes thaw{0%,49%{opacity:1}50%,100%{opacity:.4}}
@media (prefers-reduced-motion:reduce){body.freeze.thaw #fxTint{animation:none}}
/* The HUD's drawn marks (a heart per life, the shield, a star per round won, the timed weapon): each takes the room of the letter it replaced
   and stays inside its line, so no card changes size. */
.mk{display:inline-block;width:1em;height:1em;margin-right:1px;vertical-align:-.15em;background:center/contain no-repeat}
.mk.h{background-image:var(--mk-h)}.mk.s{background-image:var(--mk-s);margin-left:.25em}.mk.w{background-image:var(--mk-w)}
#weapon .mk{width:1.3em;height:1.3em;vertical-align:-.3em;margin-right:.3em}
#tags .tag{font-weight:700;transition:opacity .15s}
/* Upright, a hero is about 38 px tall: name tags are a fifth smaller there, so the hero stays the thing the eye lands on. */
@media (orientation:portrait){#tags .tag{font-size:8px;padding:0 4px;border-width:1px}#tags .tag .ic{font-size:8px;margin-right:2px}}
#tags .tag.me{z-index:2}
#tags .tag.min .tn{display:none}
#tags .tag.min:not(.isbot) .tn{display:inline-block;max-width:2.4em;overflow:hidden;vertical-align:bottom}
#tags .tag.min .ic{margin-right:1px}
#tags .tag.thin{opacity:.18} /* a bubble is behind this tag: the tag gives way (js/ui.js, thinTags) */
/* While something is still on its way (the page carries the class "loading"): a thin line of light runs along the top edge. Nothing waits for it. */
body.loading::after{content:"";position:fixed;z-index:40;left:0;right:0;top:env(safe-area-inset-top,0px);height:3px;pointer-events:none;background:linear-gradient(90deg,rgba(62,214,255,0),var(--c),var(--p),rgba(255,92,154,0)) 0 0/45% 100% no-repeat;animation:onway 1.1s linear infinite}
@keyframes onway{from{background-position:-90% 0}to{background-position:190% 0}}
#btnPause{font-size:0;background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);background-size:5px 16px;background-position:calc(50% - 5px) 50%,calc(50% + 5px) 50%;background-repeat:no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 0 rgba(8,5,28,.5)}
#btnPause:active{transform:translateY(1px)}
/* Calm mode: where the player has asked the device for less motion, nothing bobs, slides or spins; things simply appear. */
@media (prefers-reduced-motion:reduce){.logo span,.lineup:empty::before,.screen.on>.panel,#results[data-res=win] #resTitle,#results[data-res=win] .panel::before,body.loading::after{animation:none}
.btn,.chip,.hero,.pick,.lineup button,input,#toast,#title .menu,#title .hint2,body.live #title::before,body.live #title::after{transition:none}
#banner.on{animation:none;opacity:1}#call .on{animation:none;opacity:1}#floats .float{animation:none;opacity:1;transform:translate(-50%,-110%)}
#btnSpecial.ready{animation:none;box-shadow:0 0 18px rgba(255,210,58,.85)}#adwait i{opacity:1}.lineup:empty::before{box-shadow:-30px 0 var(--o),30px 0 var(--p)}}
/* Players (20 Oct 2026): flags, languages, the profile, Score Attack and the leaderboards.
   A flag is one cell of one picture (js/flags.js): 4:3, as tall as the text around it. */
.flag{display:inline-block;flex:none;width:1.333em;height:1em;border-radius:.14em;vertical-align:-.12em;background:url(/art/ui/flags.webp) 0 0/1600% 1600% no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.35)}
.flag.none{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.flag.big{font-size:30px;border-radius:5px}
.btn.gold{background:linear-gradient(180deg,#ffe57a,#ffb52e);border-color:#fff0b0;color:#3b2200;box-shadow:0 5px 0 #a8650b,0 10px 24px rgba(255,190,40,.28)}
#game{direction:ltr}
.flagpick{font:inherit;color:#fff;display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;border-radius:14px;cursor:pointer;text-align:start;background:linear-gradient(180deg,rgba(84,70,160,.55),rgba(30,22,70,.7));border:1px solid rgba(255,255,255,.18);box-shadow:0 2px 0 rgba(8,5,28,.5)}
.flagpick:active{transform:translateY(1px)}
.flagpick .fn{flex:1;display:flex;flex-direction:column;min-width:0}.flagpick small{color:var(--dim);font-size:12px;font-weight:600}
.flagpick b{font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flagpick .go{font-size:24px;color:var(--dim);line-height:1}
[dir=rtl] .flagpick .go{transform:scaleX(-1)}
.langs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.langs .chip{padding:9px 6px;text-align:center}
@media (max-width:460px){.langs{grid-template-columns:repeat(2,1fr)}}
.togs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
@media (max-width:380px){.togs{grid-template-columns:1fr}}
.privacy{display:flex;flex-direction:column;gap:6px}.privacy .btns{justify-content:flex-start}
.btn.danger{color:#ff9ab8;border-color:rgba(255,92,154,.45)}
#flags .panel{max-height:calc(100dvh - 24px)}
.flaglist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;overflow:auto;min-height:120px;max-height:min(62vh,560px);padding:2px}
.fl{font:inherit;color:#fff;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06);border:1.5px solid transparent;cursor:pointer;text-align:start;font-weight:600;font-size:15px}
.fl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fl .flag{font-size:20px}
.fl.sel{border-color:var(--y);background:rgba(255,210,58,.14)}
input[type=search]{-webkit-appearance:none;appearance:none}
.tabs{display:flex;gap:6px;padding:4px;border-radius:14px;background:rgba(8,5,28,.55);box-shadow:inset 0 2px 5px rgba(0,0,0,.4)}
.tab{flex:1;font:inherit;font-weight:700;font-size:15px;color:var(--dim);background:transparent;border:0;border-radius:10px;padding:9px 8px;cursor:pointer}
.tab.on{color:#3b1600;background:linear-gradient(180deg,#ffbd76,#ff8a3d);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 0 #b8440f}
.tabs.sub .tab{font-size:13px;padding:6px 8px}.tabs.sub .tab.on{color:#002;background:linear-gradient(180deg,#9df0ff,#3ed6ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 0 #0d5f8a}
#boardRows{max-height:min(48vh,480px);overflow:auto;padding-inline-end:2px}
.brows .brow{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:5px;border-radius:12px;font-weight:600}
.brow .rk{min-width:2.2em;text-align:center;color:var(--dim);font-weight:700}
.brow .flag{font-size:18px}
.brow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .sc{font-weight:700;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}.brow .sc small{font-size:11px;color:var(--dim);font-weight:600}
.brow.top1 .rk{color:#ffd23a}.brow.top2 .rk{color:#dfe6ff}.brow.top3 .rk{color:#ffab6b}
.brow.top1{background:linear-gradient(90deg,rgba(255,210,58,.22),rgba(255,210,58,.05))}
.brow.me{background:linear-gradient(90deg,rgba(62,214,255,.26),rgba(62,214,255,.07));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
#boardMe:empty{display:none}#boardMe .brow{margin:0}
#ask{position:fixed;inset:0;z-index:60;display:flex;padding:16px;background:rgba(8,5,24,.72)}
#ask .panel{width:min(440px,100%)}#ask p{line-height:1.4}
.best{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;font-weight:700}
.best .nb{color:var(--y);font-size:18px}.best span{color:var(--dim);font-weight:600}
.rrow .flag{font-size:14px;margin-inline-end:4px}
.slot .flag{font-size:16px}
#obj .race{background:var(--y);color:#3b2200}
@media (max-height:520px){.flaglist{max-height:52vh}#boardRows{max-height:38vh}}
/* Arabic letters join one to the next: spacing them apart breaks the words, so Arabic text has none (the logo, the
   brand line and the room code are not Arabic and keep theirs) */
html[lang=ar] *{letter-spacing:0!important}
html[lang=ar] .logo span{letter-spacing:.05em!important}html[lang=ar] .by{letter-spacing:6px!important}html[lang=ar] .code{letter-spacing:8px!important}html[lang=ar] .join input{letter-spacing:4px!important}

/* The wallet, daily rewards, the prize wheel and boosters (js/economy.js, 21 Oct 2026) */
#title .tbar{position:absolute;top:max(10px,var(--safe-area-inset-top,env(safe-area-inset-top,0px)));left:max(10px,var(--safe-area-inset-left,env(safe-area-inset-left,0px)));right:max(10px,var(--safe-area-inset-right,env(safe-area-inset-right,0px)));display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:3}
#title .tbar>*{pointer-events:auto}
body.popped #toast{z-index:70;transition:opacity .2s,transform .2s}
/* Room for the bar. Upright, it sits above the logo, and short screens tighten the spacing so the title still fits without scrolling (checked down to 360x640). Sideways, it sits together above the logo, clear of the menu. */
@media (orientation:portrait){#title.wallet{padding-top:calc(max(8px,var(--safe-area-inset-top,env(safe-area-inset-top,0px))) + 50px);justify-content:safe center}
#title .tbar{top:max(8px,var(--safe-area-inset-top,env(safe-area-inset-top,0px)))}#title .perk{width:42px;height:42px;border-radius:13px}#title .perk svg{width:27px;height:27px}}
@media (orientation:portrait) and (max-height:760px){#title.wallet{gap:12px}#title.wallet .menu{gap:8px}#title.wallet .menu .btn:not(.sm){padding-top:10px;padding-bottom:10px}
#title.wallet .lineup{margin-top:6px}#title.wallet .lineup button{width:54px}#title.wallet .lineup:empty{height:calc(54px*4.4/3)}}
@media (orientation:portrait) and (max-height:680px){#title.wallet .brand{gap:4px}#title.wallet .logo{font-size:40px}#title.wallet .menu .btn:not(.sm){padding-top:9px;padding-bottom:9px}
#title.wallet .menu .btn.sm{padding-top:8px;padding-bottom:8px}#title.wallet .lineup button{width:50px}#title.wallet .lineup:empty{height:calc(50px*4.4/3)}}
@media (orientation:landscape){#title .tbar{justify-content:flex-start;gap:8px}}
.purse{display:flex;align-items:center;gap:4px;font:inherit;font-weight:800;font-size:15px;color:#fff;background:rgba(10,8,30,.66);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 12px 5px 6px;cursor:pointer;direction:ltr}
.purse b{margin-inline-end:8px}.purse b:last-child{margin-inline-end:0}
.cur{width:22px;height:22px;vertical-align:-5px;object-fit:contain;flex:none}
.perks{display:flex;gap:8px}
.perk{position:relative;width:46px;height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.24);background:linear-gradient(180deg,rgba(86,66,182,.94),rgba(40,28,98,.95));box-shadow:0 4px 0 rgba(0,0,0,.35);cursor:pointer;display:grid;place-items:center;padding:0}
.perk:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.perk svg{width:30px;height:30px}
.perk .dot{position:absolute;top:-5px;right:-5px;width:15px;height:15px;border-radius:50%;background:#ff3b5c;border:2px solid #fff;box-shadow:0 0 8px #ff3b5c;animation:dotp 1.4s ease-in-out infinite}
@keyframes dotp{50%{transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.perk .dot{animation:none}}
.pop{position:fixed;inset:0;z-index:58;display:flex;padding:max(14px,var(--safe-area-inset-top,env(safe-area-inset-top,0px))) max(14px,var(--safe-area-inset-right,env(safe-area-inset-right,0px))) max(14px,var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px))) max(14px,var(--safe-area-inset-left,env(safe-area-inset-left,0px)));background:rgba(8,5,24,.74);overflow:auto}
.pop .panel{width:min(440px,100%);text-align:center;align-items:stretch;gap:8px}
.ptitle{font-size:30px;font-weight:800;font-style:italic;letter-spacing:.5px;background:linear-gradient(180deg,#ffe27a,#ffb43a 55%,#ff8a2a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(120,50,0,.55))}
.psub{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:#aaa6d8;font-weight:700}
html[lang=ar] .psub,html[lang=ar] .dday small{letter-spacing:0}
.btns.col{flex-direction:column;align-items:stretch}
.days{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0}
.dday{position:relative;background:rgba(10,8,30,.55);border:1px solid var(--line);border-radius:14px;padding:9px 3px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:76px}
.dday small{font-size:11px;letter-spacing:1.5px;color:#aaa6d8;font-weight:800;text-transform:uppercase}
.dday .pzs{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px;font-weight:800;font-size:14px;direction:ltr}
.dday .pz{display:inline-flex;align-items:center;gap:2px}
.dday .cur{width:18px;height:18px}
.dday.got{opacity:.6}
.dday.now{border-color:#ffd23a;background:rgba(66,48,140,.75);box-shadow:0 0 0 2px rgba(255,210,58,.3),0 0 20px rgba(255,210,58,.35);opacity:1}
.dday.last{grid-column:span 2}
.dday .tick{position:absolute;top:6px;right:8px;width:7px;height:12px;border:solid #3be07f;border-width:0 3px 3px 0;transform:rotate(45deg)}
.won{min-height:24px;font-weight:800;font-size:18px;color:#ffd23a}
.wheelbox{position:relative;width:min(290px,70vw,52vh);aspect-ratio:1;margin:12px auto 2px;direction:ltr}
.wheel{position:absolute;inset:0;border-radius:50%;transition:transform 4.6s cubic-bezier(.12,.68,.1,1);box-shadow:0 0 0 8px #241a5a,0 0 0 10px rgba(255,255,255,.18),0 12px 30px rgba(0,0,0,.5)}
.wheel svg{width:100%;height:100%;display:block;border-radius:50%}
.wheel svg text{fill:#fff;font:800 22px Fredoka,ui-rounded,system-ui,sans-serif;text-anchor:middle;paint-order:stroke;stroke:rgba(0,0,0,.4);stroke-width:4px}
.wheel .wlines line{stroke:rgba(255,255,255,.4);stroke-width:2}
.wheelbox .pointer{position:absolute;left:50%;top:-16px;transform:translateX(-50%);width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:30px solid #ffcf3a;filter:drop-shadow(0 3px 2px rgba(0,0,0,.5));z-index:2}
.wheelbox .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28%;aspect-ratio:1;border-radius:50%;border:4px solid #1b1450;background:radial-gradient(circle at 40% 30%,#c4f7ff,#3ec3f0 48%,#1a7fc0);color:#08213f;font:800 16px Fredoka,ui-rounded,system-ui,sans-serif;letter-spacing:1px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.45);padding:0}
.boosts{display:flex;flex-direction:column;gap:8px}
.bwal{font-weight:800;display:flex;justify-content:center;gap:6px;align-items:center;direction:ltr}
.boo{display:flex;align-items:center;gap:10px;background:rgba(10,8,30,.55);border:1px solid var(--line);border-radius:14px;padding:8px 10px;text-align:start}
.boo.on{border-color:#ffd23a;box-shadow:0 0 14px rgba(255,210,58,.3)}
.boo>img{width:40px;height:40px;flex:none}
.boo .bn{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.boo .bn i{font-style:normal;color:#ffd23a;margin-inline-start:4px}
.boo .bn small{color:var(--dim);font-size:12px;line-height:1.25}
.boo .btn.sm{white-space:nowrap;display:inline-flex;align-items:center;gap:3px;padding:8px 9px}
/* Short sideways screens: the days in one row, the wheel beside its buttons, two buttons side by side, so nothing needs scrolling */
@media (max-height:520px){.days{grid-template-columns:repeat(7,1fr)}.dday.last{grid-column:auto}.dday{min-height:64px}.wheelbox{width:min(220px,56vh)}.pop .panel{gap:5px}.ptitle{font-size:24px}
.pop .btns.col{flex-direction:row}.pop .btns.col>.btn{flex:1}.boo{padding:6px 10px}.boo>img{width:34px;height:34px}}
@media (max-height:520px) and (orientation:landscape){#spin .panel{width:min(640px,100%);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto auto auto auto 1fr;column-gap:18px;align-items:center}
#spin .wheelbox{grid-column:1;grid-row:1/-1;width:min(290px,62vh,46vw);margin:18px 4px 4px}#spin .ptitle{grid-column:2;grid-row:2}#spin .psub{grid-column:2;grid-row:3}#spin .won{grid-column:2;grid-row:4}#spin .btns.col{grid-column:2;grid-row:5;flex-direction:column}
#boost .panel{width:min(720px,100%);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:1fr auto auto auto auto auto 1fr;column-gap:16px;align-items:center}
#boost .ptitle{grid-column:1;grid-row:2}#boost .psub{grid-column:1;grid-row:3}#boost .bwal{grid-column:1;grid-row:4}#boost .panel>p.dim{grid-column:1;grid-row:5}#boost .btns.col{grid-column:1;grid-row:6;flex-direction:column}#boost .boosts{grid-column:2;grid-row:1/-1}}
/* Tasks and invites (js/economy.js, stage 2 of the owner's request of 20 Oct 2026) */
.ttabs{display:flex;gap:8px;justify-content:center}
.ttab{position:relative;flex:1;max-width:170px;font:inherit;font-weight:800;font-size:15px;color:#cfcaf5;background:rgba(10,8,30,.55);border:1px solid var(--line);border-radius:999px;padding:8px 12px;cursor:pointer}
.ttab.on{color:#1b1450;background:linear-gradient(180deg,#ffe27a,#ffb43a);border-color:#ffd23a}
.ttab .dot{position:absolute;top:-4px;inset-inline-end:-2px;width:12px;height:12px;border-radius:50%;background:#ff3b5c;border:2px solid #fff}
.tlist{display:flex;flex-direction:column;gap:8px}
.trow{display:flex;align-items:center;gap:9px;background:rgba(10,8,30,.55);border:1px solid var(--line);border-radius:14px;padding:8px 10px;text-align:start}
.trow.done:not(.got){border-color:#ffd23a;box-shadow:0 0 14px rgba(255,210,58,.3)}
.trow.got{opacity:.62}
.trow .tic{width:34px;height:34px;flex:none;display:grid;place-items:center}
.trow .tic svg,.trow .tic img{width:31px;height:31px}
.trow .tb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.trow .tb b{font-size:14px;line-height:1.2}
.tprog{height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.tprog i{display:block;height:100%;background:linear-gradient(90deg,#3ec3f0,#8cf05a);border-radius:99px}
.tmeta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.trow .tb small{color:var(--dim);font-size:12px;direction:ltr}
.tpz{display:flex;align-items:center;font-weight:800;font-size:13px;direction:ltr;gap:6px;flex:none;color:#ffe9a8}
.tpz .pz{display:inline-flex;align-items:center;gap:2px}.tpz .cur{width:17px;height:17px}
.trow .btn.sm{white-space:nowrap;padding:8px 10px;min-width:56px;flex:none}
.trow .tick{width:9px;height:15px;margin-block:0;margin-inline:22px 26px;border:solid #3be07f;border-width:0 3px 3px 0;transform:rotate(45deg);flex:none}
.invite{background:linear-gradient(180deg,rgba(86,66,182,.55),rgba(40,28,98,.6));border:1px solid rgba(255,210,58,.45);border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:5px;text-align:start}
.invite .ihead{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:16px}
.invite .ihead .pz{display:inline-flex;align-items:center;gap:3px;font-weight:800;color:#ffd23a;direction:ltr}
.invite p{line-height:1.3;color:#d9d5ff}
.invite .irow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px} /* the button goes under the counts when both do not fit (Latin at 640x360) */
.invite .btn.sm{white-space:nowrap;flex:none}
/* Short upright screens (down to 360x640): the tasks sheet tightens so it fits without scrolling */
@media (orientation:portrait) and (max-height:700px){#tasks .panel{gap:6px}#tasks .ptitle{font-size:25px}.trow{padding:5px 9px;gap:8px}.trow .tic{width:30px;height:30px}.trow .tic svg,.trow .tic img{width:27px;height:27px}
.trow .tb{gap:2px}.trow .tb b{font-size:13px}.invite{padding:7px 10px;gap:3px}.invite p{font-size:12px;line-height:1.25}.ttab{padding:6px 12px}#tasksNote{margin:0}}
/* The sheet's two halves (the tasks; the time left, the invite and Close) follow each other, or stand side by side on short sideways screens */
.tcol{display:contents}
@media (max-height:520px) and (orientation:landscape){#tasks .panel{width:min(840px,100%);flex-direction:row;align-items:center;gap:16px}
#tasks .tcol{display:flex;flex-direction:column;gap:6px;min-width:0}#tasks .tcol:first-child{flex:1.25}#tasks .tcol:last-child{flex:.75}
.trow{padding:5px 9px}.trow .tic{width:28px;height:28px}.trow .tic svg,.trow .tic img{width:26px;height:26px}.invite{padding:7px 10px;gap:3px}.invite p{font-size:12px;line-height:1.25}}
/* The shortest sideways screens (640x360 and the like): a little tighter still */
@media (max-height:400px) and (orientation:landscape){#tasks .panel{padding:14px 16px 12px}#tasks .ptitle{font-size:22px}.ttab{padding:5px 10px;font-size:14px}
.tlist{gap:6px}.trow .tb{gap:2px}.trow .tb b{font-size:13px;line-height:1.15}.tprog{height:6px}}
/* Small frames (27 Oct 2026). The how-to panel never grows taller than the screen (its cards scroll inside it, so "Got it" is
   always on screen). Short sideways screens (640x360, the smallest frame a game portal shows, and the like): the three cards stand side by side; the lobby tightens. */
#howto .panel{max-height:100%}#howto .cards3{min-height:0;overflow:auto}
@media (max-height:520px) and (orientation:landscape){#howto .cards3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#howto .hc{padding:9px 11px}#howto .hc p{font-size:13px;line-height:1.32;margin-top:4px}
#lobby .panel{padding:12px 14px;gap:6px}#lobby .lobbytop>div{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;flex:1 1 0;min-width:min-content}#lobby .lobbytop small{white-space:nowrap}#lobby .code{font-size:30px}
#lobby .chip{padding:6px 11px;font-size:14px}#lobby .slot{min-height:42px;padding:5px 10px}#lobby .hint{margin:2px 0}}
@media (max-height:400px) and (orientation:landscape){#lobbyDesc{display:none}#title .menu{gap:5px}#title .menu .btn{padding-top:6px;padding-bottom:6px}
#title .row4 .btn.sm{font-size:13px;padding-left:5px;padding-right:5px}#setup .panel{padding-top:10px;padding-bottom:10px;gap:5px}
#lobby .panel{padding:10px 14px;gap:4px}#lobby .slot{min-height:38px;padding:3px 9px}#lobby .chip{padding:5px 10px}#lobby #slots{gap:5px}#lobby .btns{margin-top:2px}
#lobby .hint{margin:0;font-size:14px;line-height:1.2}#lobby .slot.empty{font-size:14px}
#howto .panel{padding-top:10px;padding-bottom:10px;gap:5px}#howto h2{font-size:20px;margin-bottom:0}#howto .hc{padding:7px 9px}#howto .hc p{font-size:12px;line-height:1.25}}
/* A narrow room card never runs past its edge: the room code and the invite button share a line when they fit (the code
   under its label if that is what makes them fit), a seat is never wider than the list, and a bot's level gives way (an
   ellipsis) before anything spills; narrow seats close up. */
.lobbytop{flex-wrap:wrap}#slots{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}.slot .rd{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-height:520px) and (orientation:landscape){#lobby .slot{gap:4px}#lobby .slot .mini{padding:5px 6px}}
@media (orientation:portrait) and (max-width:420px){#lobby .slot{gap:4px}#lobby .slot .mini{padding:5px 6px}}
/* Upright phones up to 700 px tall (360x640, 320x568): the lobby tightens as on short sideways screens; up to 600 px tall the title
   menu and the tasks sheet close up a little; up to 380 px wide the results row drops its YOU tag (the row itself is marked yours). */
@media (orientation:portrait) and (max-height:700px){#lobby .panel{padding:12px 14px;gap:6px}#lobby .lobbytop>div{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;flex:1 1 0;min-width:min-content}#lobby .lobbytop small{white-space:nowrap}#lobby .code{font-size:30px}
#lobby .chip{padding:6px 11px;font-size:14px}#lobby .slot{min-height:42px;padding:5px 10px}#lobby .hint{margin:2px 0}}
@media (orientation:portrait) and (max-height:700px){#howto .hc{padding:10px 12px}#howto .cards3{gap:8px}} /* 360x640: the three how-to cards fit without scrolling */
@media (orientation:portrait) and (max-height:600px){#title .menu{gap:5px}#title .menu .btn{padding-top:6px;padding-bottom:6px}#title .hint2{display:none}#tasks .ptitle{font-size:22px}#tasks .panel{gap:4px}}
@media (max-width:380px){.rrow .you{display:none}}
@media (max-height:340px) and (orientation:landscape){#title .hint2,#titleInfo{display:none} /* the smallest phones sideways (568x320): the title's two small lines go, */
#online .panel,#results .panel{padding-top:10px;padding-bottom:10px;gap:4px}#online input{padding-top:6px;padding-bottom:6px} /* and the online and results sheets close up */
#results .rrow{padding-top:2px;padding-bottom:2px}#resTitle{font-size:26px}}
/* A small desktop window: the objective pill sits at the bottom (max-width:1000px above), so the key hint beside it wraps into a
   narrow corner and the pill keeps clear of it (a long objective ends in an ellipsis); up to 760 px wide (a 640x360 portal frame) the
   hint goes instead, and the pill keeps all its text (the gold left too). The how-to shows the keys. */
@media (max-width:1000px) and (pointer:fine){#keys{max-width:150px;line-height:1.3}#obj{max-width:calc(100vw - 340px)}#obj span{min-width:0;overflow:hidden;text-overflow:ellipsis}}
@media (max-width:760px) and (pointer:fine){#keys{display:none}#obj{max-width:calc(100vw - 16px)}}
/* Sideways and 521-620 px tall (1031x580, 1080x607): the tasks sheet tightens as it does upright, and the wheel is a little smaller */
@media (orientation:landscape) and (min-height:521px) and (max-height:620px){#tasks .panel{gap:6px}#tasks .ptitle{font-size:25px}.trow{padding:5px 9px;gap:8px}.trow .tic{width:30px;height:30px}.trow .tic svg,.trow .tic img{width:27px;height:27px}
.trow .tb{gap:2px}.trow .tb b{font-size:13px}.invite{padding:7px 10px;gap:3px}.invite p{font-size:12px;line-height:1.25}.ttab{padding:6px 12px}#tasksNote{margin:0}.wheelbox{width:min(290px,70vw,46vh)}}
/* Three or four player cards fill the top of a desktop screen up to 1600 px wide: the pill goes to the bottom there too */
@media (min-width:1001px) and (max-width:1600px) and (pointer:fine){#cards[data-n="3"]~#obj,#cards[data-n="4"]~#obj{top:auto;bottom:max(8px,var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))}}
/* The narrowest seats (an upright phone up to 380 px wide, a sideways one up to 600): after every other seat rule */
@media (orientation:portrait) and (max-width:380px),(orientation:landscape) and (max-width:600px){#lobby .slot{padding-left:7px;padding-right:7px;gap:3px}#lobby .slot .mini{padding:5px}#lobby .slot .tg{padding:3px 5px}}
/* Four player cards on the narrowest phones (320 px wide): each may narrow to 56 px, so the row stays clear of the pause button */
@media (pointer:coarse) and (max-width:350px){#cards .card{min-width:56px}}