@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;600;800&display=swap');
:root{--bg:#16122E;--card:#231D45;--line:#3B3370;--ink:#fff;--muted:#B9B3DA;--accent:#FFC83D;--good:#22C55E;--bad:#FF5A5F;--c0:#E21B3C;--c1:#1368CE;--c2:#C98A00;--c3:#26890C}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Lexend,system-ui,sans-serif;transition:background .4s}
body.ok{background:#0E3A23}
body.no{background:#45131D}
.screen{display:none;min-height:100vh;min-height:100dvh;padding:24px 16px;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.screen.on{display:flex}
h1{font-size:clamp(30px,5vw,56px);margin:0;font-weight:800}
h2{font-size:clamp(22px,3.4vw,40px);margin:0;font-weight:600}
p{margin:0}
.muted{color:var(--muted)}
.small{font-size:14px}
.err{color:var(--bad);min-height:1.2em}
.warn{background:var(--bad);color:#fff;padding:12px;text-align:center;margin:0}
.card{background:var(--card);border-radius:20px;padding:22px;width:100%;max-width:900px}
.stack{display:flex;flex-direction:column;gap:12px;align-items:stretch;text-align:left}
.narrow{max-width:420px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}
label.row{justify-content:flex-start;cursor:pointer}
input,textarea{font:inherit;padding:14px 16px;border-radius:12px;border:2px solid var(--line);background:#0F0C22;color:#fff;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent);flex:none}
#pin{font-size:28px;text-align:center;letter-spacing:.2em;font-weight:800}
textarea{min-height:300px;font-family:ui-monospace,Menlo,monospace;font-size:14px;line-height:1.5}
button{font:inherit;font-weight:600;font-size:18px;padding:14px 28px;border-radius:12px;border:0;background:var(--accent);color:#231a00;cursor:pointer;box-shadow:0 4px 0 #a87d0c;transition:transform .05s}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #a87d0c}
button.ghost{background:transparent;color:var(--muted);box-shadow:none;border:2px solid var(--line);font-size:16px}
button:disabled{opacity:.35;cursor:not-allowed}
.pin{font-size:clamp(56px,11vw,128px);font-weight:800;letter-spacing:.06em;color:var(--accent);line-height:1}
.lobbyTop{display:flex;gap:32px;align-items:center;justify-content:center;flex-wrap:wrap}
.qr{background:#fff;padding:12px;border-radius:14px;line-height:0}
.grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:1100px}
.chip{background:var(--card);color:#fff;box-shadow:none;border:2px solid var(--line);padding:8px 14px;border-radius:999px;font-size:18px;animation:pop .35s ease-out}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.qHead{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1100px;gap:12px}
.timer{width:92px;height:92px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:38px;font-weight:800;background:var(--card);border:6px solid var(--accent)}
.timer.sm{width:60px;height:60px;font-size:24px;border-width:4px}
.timer.low{border-color:var(--bad);animation:pulse .5s infinite alternate}
@keyframes pulse{to{transform:scale(1.08)}}
.qText{max-width:1100px;line-height:1.3}
.qImg{max-height:32vh;max-width:90%;border-radius:14px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:1100px}
.tile{position:relative;padding:22px;border-radius:14px;font-size:clamp(17px,2.3vw,28px);font-weight:600;display:flex;align-items:center;gap:14px;text-align:left;color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.35);border:0;transition:opacity .3s,transform .3s}
.tile .sh{font-size:1.25em;flex:none}
.tile .cnt{margin-left:auto;background:rgba(0,0,0,.3);padding:4px 12px;border-radius:999px;font-size:.8em}
.t0{background:var(--c0)}.t1{background:var(--c1)}.t2{background:var(--c2)}.t3{background:var(--c3)}
.tile.dim{opacity:.22}
.tile.win{transform:scale(1.03);outline:4px solid #fff}
.ptiles{flex:1;max-height:60vh}
.ptiles .tile{justify-content:center;flex-direction:column;text-align:center;font-size:clamp(15px,4.4vw,22px);min-height:110px;cursor:pointer;padding:14px}
.ptiles .tile .sh{font-size:34px}
.ptiles .tile:disabled{opacity:.3}
.aText{font-size:18px;font-weight:600;max-width:600px;line-height:1.35}
.powers{display:flex;gap:10px}
.pw{font-size:15px;padding:10px 16px;background:var(--card);color:#fff;border:2px solid var(--line);box-shadow:none}
.pw.sel{background:var(--accent);color:#231a00;border-color:var(--accent)}
.expl{background:var(--card);border-left:5px solid var(--accent);padding:14px 18px;border-radius:0;max-width:900px;text-align:left;font-size:clamp(15px,1.8vw,20px);line-height:1.45}
.lb{display:flex;flex-direction:column;gap:10px;width:100%;max-width:760px}
.lbRow{display:flex;align-items:center;gap:14px;background:var(--card);padding:14px 20px;border-radius:14px;font-size:clamp(17px,2.2vw,26px);animation:slide .4s ease-out backwards;text-align:left}
.lbRow .r{font-weight:800;color:var(--accent);width:36px}
.lbRow .s{margin-left:auto;font-weight:800}
.lbRow .mv{font-size:.7em;color:var(--good);width:48px;text-align:right}
@keyframes slide{from{transform:translateX(-40px);opacity:0}}
.climber{font-size:clamp(16px,2vw,22px);color:var(--accent);font-weight:600}
.teams{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.teamPill,.teamBadge{padding:10px 18px;border-radius:999px;font-weight:600;color:#fff}
.podium{display:flex;align-items:flex-end;gap:14px;justify-content:center;margin-top:20px}
.pod{background:var(--card);border-radius:14px 14px 0 0;width:clamp(100px,18vw,200px);padding:16px 10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;animation:rise .8s ease-out backwards}
.pod .av{font-size:48px}
.pod .nm{font-weight:800;font-size:20px;word-break:break-word}
.pod .pl{font-size:40px;font-weight:800;color:var(--accent);margin-top:auto}
@keyframes rise{from{transform:translateY(80px);opacity:0}}
.bigAv{font-size:96px;line-height:1}
.avatars{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.avatars button{font-size:24px;padding:6px 0;background:#0F0C22;box-shadow:none;border:2px solid transparent}
.avatars button.sel{border-color:var(--accent);background:var(--line)}
.reacts{display:flex;gap:10px;margin-top:12px}
.reacts button{font-size:26px;padding:8px 12px;background:var(--card);box-shadow:none;border:2px solid var(--line)}
.lockTile{width:120px;height:120px;border-radius:20px;display:grid;place-items:center;font-size:56px;background:var(--card)}
.resBadge{font-size:84px;line-height:1}
.resPts{font-size:44px;font-weight:800;color:var(--accent)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:420px}
.stat{background:var(--card);border-radius:14px;padding:14px;color:var(--muted)}
.stat b{display:block;font-size:28px;color:var(--accent)}
#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.float{position:absolute;bottom:-70px;font-size:44px;animation:up 3s ease-out forwards;text-align:center}
.float small{display:block;font-size:12px;color:var(--muted)}
@keyframes up{to{transform:translateY(-75vh);opacity:0}}
.conf{position:absolute;top:-20px;width:10px;height:16px;animation:fall 2.4s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.endBtn{position:fixed;top:12px;right:12px;font-size:13px;padding:6px 12px;z-index:60}
@media (max-width:600px){.tiles{gap:10px}.lobbyTop{gap:16px}.qHead .muted{font-size:13px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
/* Saksham additions */
.brandbar{display:flex;align-items:center;gap:12px;text-align:left}
.brandbar img{width:40px;height:40px;border-radius:10px}
.brandbar.big img{width:64px;height:64px;border-radius:16px}
.brandbar.big h1{font-size:clamp(28px,6vw,44px)}
.topbar{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:900px;gap:12px;flex-wrap:wrap}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.checks{display:flex;flex-direction:column;gap:8px}
select{font:inherit;padding:14px 16px;border-radius:12px;border:2px solid var(--line);background:#0F0C22;color:#fff;width:100%}
button.small{font-size:13px;padding:6px 12px}
.gameInfo{background:var(--line);border-radius:10px;padding:10px 14px;font-weight:600;text-align:center}
.foot{position:fixed;bottom:8px;left:0;right:0;text-align:center;pointer-events:none;opacity:.7}
code{background:#0F0C22;padding:2px 8px;border-radius:6px;font-size:13px;word-break:break-all;user-select:all}
#insights{max-width:760px;gap:10px}
#insights h2{font-size:22px}
@media (max-width:600px){.fields{grid-template-columns:1fr}}