:root{--bg:#14213d;--card:#1f2f55;--ink:#f4f1de;--mut:#b9c3d9;--acc:#fca311;--vip:#c77dff;--ok:#52b788;--line:#3a4c7a;--deep:#0f1a33;--bad:#8a3140}
*{box-sizing:border-box}
body,button,input,.row,.players{touch-action:manipulation}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,"Segoe UI",Tahoma,sans-serif}
#app{max-width:680px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}
.screen{display:flex;flex-direction:column;gap:12px}.hidden{display:none!important}
h1{text-align:center;margin:24px 0 0}h1.brand{display:flex;align-items:center;justify-content:center;gap:12px}h1.brand .logo{width:64px;height:64px;border-radius:16px;box-shadow:0 4px 14px #0007}.sub{text-align:center;color:var(--mut);margin:0}.sub.age{margin-top:6px;font-weight:700;color:var(--acc,#fca311)}
h3{margin:12px 0 0;color:var(--acc)}h4{margin:0;font-size:16px}.dim{color:var(--mut)}p{margin:0}
hr{border:0;border-top:1px solid var(--line);margin:0;width:100%}
input{background:var(--deep);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:16px;flex:1;min-width:0;min-height:44px}
button{background:#33477a;color:var(--ink);border:0;border-radius:10px;padding:10px 16px;font-size:16px;cursor:pointer;min-height:44px}
button.primary{background:var(--acc);color:#14213d;font-weight:700}button.vip{background:var(--vip);color:#14213d;font-weight:700}button.danger{background:var(--bad)}
button.ghost{background:transparent;border:1px solid var(--line);padding:6px 10px;font-size:14px}
button:disabled{opacity:.6;cursor:default}
button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:2px}
.row{display:flex;gap:8px;flex-wrap:wrap}.row.center{justify-content:center;align-items:center}
.bar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.bar h3{margin:0}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.list li{background:var(--card);border-radius:10px;padding:6px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px}
.list li.dim{color:var(--mut);display:block}
.who{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.who .txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.who small{display:block;color:var(--mut);font-size:13px}
/* avatars, chips, profile card */
.avatar{width:56px;height:56px;border-radius:50%;background:var(--deep);display:inline-grid;place-items:center;font-size:30px;line-height:1;overflow:hidden;flex:0 0 auto;font-weight:700;color:var(--acc)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}.avatar.sm{width:32px;height:32px;font-size:18px}
.online{width:10px;height:10px;border-radius:50%;background:#666;flex:0 0 auto}.online.on{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--deep);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:700;min-height:32px;color:var(--ink)}
button.chip{cursor:pointer}button.chip:disabled{opacity:.9}
#meCode{letter-spacing:2px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16px}
.profile{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:12px;flex-wrap:wrap}
.pinfo{flex:1;min-width:120px;display:flex;flex-direction:column;gap:6px}.pinfo b{font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.chips button{padding:6px 12px}
#editProfile{margin-inline-start:auto}
/* games hub: 2 columns, seven tiles (the page scrolls), one gradient per game; the picked one gets the accent ring */
.ggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gtile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:112px;padding:12px;border:3px solid transparent;border-radius:16px;text-align:start;color:#fff;text-shadow:0 1px 2px #0008;box-shadow:0 6px 18px #0006}
.gtile .gi{font-size:34px;line-height:1;margin-bottom:4px}.gtile b{font-size:17px}.gtile small{font-size:13px;opacity:.9;line-height:1.35}.gtile .gp{font-size:12px;opacity:.8;margin-top:auto}
.gtile.sel{border-color:var(--acc);box-shadow:0 0 0 3px #fca31155,0 6px 18px #0006}
.gtile:active{transform:scale(.97)}
.g-ludo{background:linear-gradient(135deg,#e63946,#7b1e33)}
.g-domino{background:linear-gradient(135deg,#2a9d8f,#0f4c5c)}
.g-colors{background:linear-gradient(135deg,#e63946 0%,#f77f00 35%,#2a9d8f 70%,#457b9d 100%)}
.g-four{background:linear-gradient(135deg,#457b9d,#1d3557)}
.g-carrom{background:linear-gradient(135deg,#c98b4a,#5b3a1b)}
.g-baloot{background:linear-gradient(135deg,#1f7a4d,#0b3b2a)}
.g-island{background:linear-gradient(135deg,#ff7a1a,#c1272d 45%,#0b6bb8)}
.g-world{background:linear-gradient(135deg,#3aa6e0,#2a9d5c);min-height:96px}
.gtile .gp{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gtile .live{font-style:normal;font-weight:700;font-size:11px;background:#fff;color:#14213d;border-radius:999px;padding:0 7px;text-shadow:none}
.badge-open{flex:0 0 auto;background:var(--ok);color:#0f1a33;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700}
.list li .badge-open{margin-inline-start:auto}
#memberCount{font-variant-numeric:tabular-nums}
/* room filter chips */
.filter{display:flex;gap:6px;flex-wrap:wrap}
.filter .chip{min-height:44px;padding:6px 14px;cursor:pointer;font-weight:600}
.filter .chip.on{background:var(--acc);color:#14213d;border-color:var(--acc)}
/* room header */
.rinfo{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.gtag{font-weight:700;white-space:nowrap}
.tag{background:var(--vip);color:#14213d;border-radius:6px;padding:0 6px;font-size:12px;font-weight:700}
#settingsBtn{font-size:20px;min-width:44px}
/* player cards; the turn ring itself (.ringed::before, --frac) is drawn by chatpanel.js + chatpanel.css, we only give it --ring per seat */
.players{display:flex;gap:10px;flex-wrap:wrap}
.pl{position:relative;background:var(--card);border-radius:12px;padding:4px 10px;border:2px solid transparent;display:flex;gap:6px;align-items:center;min-height:44px;cursor:pointer}
.pl.s0{--seat:#e63946}.pl.s1{--seat:#2a9d8f}.pl.s2{--seat:#e9c46a}.pl.s3{--seat:#457b9d}.pl{--ring:var(--seat,var(--acc))}
.pl.me{cursor:default}.pl.turn{border-color:var(--acc)}.pl.off{opacity:.5}
.pl .avatar.sm{box-shadow:0 0 0 2px var(--seat,var(--acc))}
.pl .pname{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.pl .talk{width:8px;height:8px;border-radius:50%;background:#555;flex:0 0 auto}.pl .talk.on{background:var(--ok);box-shadow:0 0 6px var(--ok)}
.pl .vs{opacity:.8;font-size:12px}.pl .badge{font-size:14px}
.turn{text-align:center;color:var(--mut);min-height:1.5em}
@keyframes urgentPulse{0%,100%{opacity:1}50%{opacity:.5}}
#turnInfo.urgent{color:#ff6b6b;font-weight:700;animation:urgentPulse 1s ease-in-out infinite}
/* stage (3D board) + per-theme tint */
#stage{position:relative;width:100%;max-width:560px;aspect-ratio:1/.9;align-self:center;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#2b3f75 0%,#14213d 70%);box-shadow:0 10px 30px #0008,inset 0 0 0 1px #ffffff14}
#stage canvas{width:100%;height:100%;display:block}
#stage[data-theme=majlis]{background:radial-gradient(ellipse at 50% 35%,#4b2160 0%,#190a22 70%)}
#stage[data-theme=night]{background:radial-gradient(ellipse at 50% 35%,#1e2430 0%,#07090e 70%)}
#stage[data-theme=marble]{background:radial-gradient(ellipse at 50% 35%,#6c7a8f 0%,#2b3340 70%)}
#stage[data-theme=desert]{background:radial-gradient(ellipse at 50% 35%,#a86a3c 0%,#3b2212 70%)}
#stage[data-theme=candy]{background:radial-gradient(ellipse at 50% 35%,#c86fa0 0%,#3b1c3a 70%)}
/* per-game stage sizing (data-game is set by app.js): world ~70vh, carrom a square, baloot its natural height */
#stage[data-game=world]{min-height:0;background:#9fd0f2}   /* the module sizes its canvas: min(1.15 x width, 70vh) */
#stage[data-game=world] .game-host{min-height:0}
#stage[data-game=world] .gwait{min-height:min(70vh,115vw)}
#stage[data-game=island]{min-height:0;background:#9fd0f2}
#stage[data-game=island] .game-host{min-height:0}
#stage[data-game=island] .gwait{min-height:min(80vh,150vw)}
#stage[data-game=carrom]{max-width:560px;min-height:0;background:transparent;box-shadow:none;overflow:visible}
#stage[data-game=carrom] .game-host,#stage[data-game=baloot] .game-host{min-height:0}
#stage[data-game=carrom] .gwait{min-height:min(100vw - 32px,560px)}
@media(max-width:600px){#stage[data-game=carrom]{width:calc(100% + 24px);max-width:none;margin-inline:-12px;border-radius:0;background:none;box-shadow:none}}   /* phone: the carrom board runs nearly edge to edge */
#stage[data-game=baloot]{min-height:0;overflow:visible}
#stage[data-game=baloot] .gwait{min-height:240px}
/* a mounted game module (non-Ludo): natural height, no aspect lock, full width; the module paints inside #gameHost */
#stage.flat{aspect-ratio:auto;max-width:none;min-height:320px;background:var(--deep)}
.game-host{width:100%;min-height:320px}
.gwait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:320px;padding:16px;text-align:center}
.gwait .gi{font-size:56px;line-height:1}.gwait b{font-size:20px}.gwait small{color:var(--mut)}
@keyframes sixPop{0%{opacity:0;transform:scale(.3)}18%{opacity:1;transform:scale(1.15)}30%{transform:scale(1)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
.six-badge{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;pointer-events:none;z-index:2;color:#fff;text-shadow:0 0 22px var(--c,var(--acc)),0 2px 8px #000c;animation:sixPop 1.1s ease-out forwards}
.six-badge b{font-size:clamp(60px,22vw,110px);line-height:1;font-weight:900}
.six-badge small{font-size:16px;font-weight:700;background:#000a;border:2px solid var(--c,var(--acc));border-radius:999px;padding:2px 14px;text-shadow:none}
.auto-banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:3;max-width:92%;text-align:center;background:#000c;border:1px solid var(--acc);color:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px;pointer-events:none;animation:urgentPulse 1.6s ease-in-out infinite}
.auto-banner.tap{pointer-events:auto;cursor:pointer;animation:none}
/* sound */
.vol{display:flex;align-items:center;gap:6px}
input[type=range]{-webkit-appearance:none;appearance:none;flex:0 0 auto;width:120px;min-width:120px;height:44px;padding:0;margin:0;border:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--acc);border:2px solid #14213d;box-shadow:0 0 0 1px var(--line)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
input[type=range]::-moz-range-thumb{box-sizing:border-box;width:22px;height:22px;border-radius:50%;background:var(--acc);border:2px solid #14213d}
/* chat panel host (chatpanel.js renders inside) */
.chat-host{min-height:44px;position:relative}
/* modals: bottom sheet on phones, centred card on wide screens */
.modal{position:fixed;inset:0;background:#000a;display:flex;align-items:flex-end;justify-content:center;z-index:8}
.sheet{background:var(--card);border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));width:100%;max-width:520px;max-height:88vh;overflow:auto;display:flex;flex-direction:column;gap:12px;box-shadow:0 -10px 40px #0008}
@media (min-width:600px){.modal{align-items:center}.sheet{border-radius:18px;padding-bottom:16px}}
.menu .mrow,.sheet .mrow{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px}
/* language switch (settings menu + profile sheet): two chips, the current language lit */
.seg{display:inline-flex;gap:6px}.seg .chip{min-height:44px;cursor:pointer}.seg .chip.on{background:var(--acc);color:#14213d;border-color:var(--acc)}
.actions{display:flex;flex-direction:column;gap:8px}
.rules{line-height:1.8}.rules ul,.rules ol{padding-inline-start:20px;margin:4px 0}.rules h4{color:var(--acc);margin-top:8px}
/* switch */
.sw{position:relative;display:inline-block;width:52px;height:30px;flex:0 0 auto}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw span{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:.2s}
.sw span::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.2s}
.sw input:checked+span{background:var(--ok)}.sw input:checked+span::after{inset-inline-start:25px}   /* knob slides to the inline end in both directions */
.sw input:focus-visible+span{outline:3px solid #fff;outline-offset:2px}
/* avatar picker */
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}
.ebtn{font-size:26px;padding:4px;min-height:48px;background:var(--deep);border:2px solid transparent}.ebtn.sel{border-color:var(--acc)}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.filebtn{display:inline-flex;align-items:center;justify-content:center;flex:1;background:#33477a;border-radius:10px;padding:10px 16px;min-height:44px;cursor:pointer}
.row:has(.vh:focus-visible) .filebtn{outline:3px solid #fff;outline-offset:2px}
/* theme tiles */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;background:var(--deep);border:2px solid transparent;font-weight:700}
.tile.sel{border-color:var(--acc)}
.swatch{width:100%;aspect-ratio:1;border-radius:10px;box-shadow:inset 0 0 0 1px #fff3}
.th-wood .swatch{background:radial-gradient(circle,#b9a98a 0 50%,transparent 51%),linear-gradient(135deg,#7a4e30,#3a2418)}
.th-majlis .swatch{background:radial-gradient(circle,#5b2a86 0 50%,transparent 51%),linear-gradient(135deg,#c9a227,#6b5212)}
.th-night .swatch{background:radial-gradient(circle,#2b2f3a 0 50%,transparent 51%),linear-gradient(135deg,#6b7384,#2e3440)}
.th-marble .swatch{background:radial-gradient(circle,#d9dde3 0 50%,transparent 51%),linear-gradient(135deg,#fff,#c9ced6 60%,#eef0f3)}
.th-desert .swatch{background:radial-gradient(circle,#e2c290 0 50%,transparent 51%),linear-gradient(135deg,#c86a48,#8a3e2a)}
.th-candy .swatch{background:radial-gradient(circle,#f7c6d9 0 50%,transparent 51%),linear-gradient(135deg,#b6f0d6,#7fd3b2)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#000c;border-radius:10px;padding:10px 16px;z-index:20;max-width:92vw;text-align:center}