:root{--bg:#dbe9ff;--panel:#eef5ff;--card:#fff;--ink:#0b1f4a;--mute:#5b7399;--line:#c5d8f5;--accent:#0a5fe0;--cyan:#38d4ff;--navy:#0a2a8a;--gold:#1f7bff;--green:#0c9f6b;--red:#d93a52;
  --glow:0 0 14px rgba(56,180,255,.55)}
@media (prefers-color-scheme:dark){:root{--bg:#050c1f;--panel:#0b1735;--card:#12224a;--ink:#eaf2ff;--mute:#8fa8d6;--line:#223a70}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,system-ui,sans-serif;overscroll-behavior:none}
h1,h2,.b,.btn,.title{font-family:"Baloo 2",system-ui,sans-serif}
#app{height:100dvh;max-width:520px;margin:0 auto;position:relative;overflow:hidden;background:var(--panel);padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
.screen{position:absolute;inset:0;padding:calc(env(safe-area-inset-top,0px) + 12px) 14px calc(env(safe-area-inset-bottom,0px) + 12px);display:none;flex-direction:column;gap:12px;overflow:auto}
.screen.active{display:flex}
.btn{border:0;border-radius:14px;padding:12px 14px;font-size:18px;font-weight:700;color:#fff;cursor:pointer}
.btn.gold{background:linear-gradient(135deg,#1f7bff,#0a4fd6);box-shadow:var(--glow)}
.btn.green{background:linear-gradient(135deg,#12b57f,#0a8a5c)}
.btn.blue{background:linear-gradient(135deg,#38a0ff,#1f6fe0)}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink);font-size:15px;padding:10px 6px}
.btn.sm{font-size:14px;padding:8px 10px}.btn:disabled{opacity:.45}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:18px;cursor:pointer}
.icon-btn.sm{width:32px;height:32px;font-size:15px}
.home-top,.topbar,.gtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.coin-chip{display:flex;gap:6px;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:20px;padding:5px 12px;font-weight:800}
.coin{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,#e0a92a)}
.logo{display:flex;flex-direction:column;align-items:center;gap:0}
.logo img{width:150px;height:150px;border-radius:50%;box-shadow:0 0 30px rgba(42,200,255,.55)}
.logo h1{margin:6px 0 0;font-size:40px;letter-spacing:5px;line-height:1;background:linear-gradient(90deg,#0a4fd6,#2ad0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo p{margin:0;letter-spacing:8px;font-weight:800;font-family:"Baloo 2";color:var(--mute)}
.home-user{display:flex;align-items:center;gap:10px;justify-content:center}.home-user small{display:block;color:var(--mute)}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 15px "Baloo 2";color:#fff;background-size:cover;flex:none;border:3px solid transparent}
.avatar.big{width:48px;height:48px;font-size:20px}
.menu{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.join-row{display:flex;gap:8px}.join-row input{flex:1;border-radius:14px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);padding:0 14px;font:800 18px Nunito;text-transform:uppercase;letter-spacing:2px;min-width:0}
.menu-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.conn{text-align:center;font-size:12px;color:var(--mute)}
.title{font-size:20px;font-weight:700}.title b{letter-spacing:2px}
.opts{display:flex;flex-direction:column;gap:8px}
.seg{display:flex;gap:6px}.seg button{flex:1;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:9px;font:700 15px "Baloo 2";cursor:pointer}
.seg button.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--glow)}.seg button:disabled{opacity:.6}
.seatmap{display:flex;flex-direction:column;gap:8px}
.seat{display:flex;align-items:center;gap:10px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 10px;min-height:56px}
.seat.empty{border-style:dashed;color:var(--mute)}.seat .nm{flex:1;min-width:0;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat small{display:block;color:var(--mute);font-weight:600}
.seat button{border:1.5px solid var(--line);background:transparent;color:var(--ink);border-radius:10px;padding:6px 9px;font:700 13px "Baloo 2";cursor:pointer}
.lobby-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.hint{font-size:13px;color:var(--mute);text-align:center;line-height:1.4}
.round{font:700 15px "Baloo 2";color:var(--mute)}
.hud{display:flex;align-items:center;justify-content:space-between;gap:6px}
.side{display:flex;gap:4px;min-width:84px}.side:last-child{justify-content:flex-end}
.side .avatar.act{border-color:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.score{font:800 30px "Baloo 2";display:flex;gap:10px;align-items:center}.score i{color:var(--mute);font-style:normal}
.boardbox{position:relative}#bc{width:100%;aspect-ratio:1;display:block;touch-action:none;border-radius:16px;box-shadow:0 0 22px rgba(42,200,255,.45)}
.timer{height:5px;background:var(--line);border-radius:3px;overflow:hidden}.timer i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2ad0ff,#1f7bff)}
.caption{text-align:center;font:700 17px "Baloo 2";min-height:24px}.qs{text-align:center;font-size:13px;color:var(--mute);font-weight:800}
.toast{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.9);background:#000c;color:#fff;padding:10px 18px;border-radius:24px;font:700 18px "Baloo 2";opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.over{position:absolute;inset:0;background:rgba(5,12,31,.86);display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;color:#fff}
.over.on{display:flex}.over h2{font-size:44px;margin:0}.over .rows{width:100%;display:flex;flex-direction:column;gap:6px}
.over .row{display:flex;justify-content:space-between;background:rgba(255,255,255,.1);border-radius:10px;padding:8px 12px;font-weight:800}
.modal{position:absolute;inset:0;background:rgba(5,12,31,.7);display:none;align-items:center;justify-content:center;padding:18px;z-index:20}.modal.on{display:flex}
.modal-card{background:var(--card);border-radius:20px;padding:18px;max-height:85dvh;overflow:auto;width:100%;display:flex;flex-direction:column;gap:12px;font-size:14.5px;line-height:1.45}
.modal-card h2{margin:0;font-size:24px}.modal-card p{margin:0}.lb{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.field{display:flex;flex-direction:column;gap:6px}.field>b{font:700 14px "Baloo 2";color:var(--mute)}
.snack{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:#000d;color:#fff;padding:9px 16px;border-radius:20px;font-weight:800;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:30;max-width:90%;text-align:center}.snack.on{opacity:1}

/* ---- Home screen: Sky Blue ---- */
#screen-home{background:linear-gradient(180deg,#3aa9ff,#1478ee 55%,#0b4fc4);color:#fff;font-family:"Baloo 2",system-ui,sans-serif}
#screen-home .coin-chip{background:#0b4fc4aa;border:0;color:#fff;font-size:17px}
#screen-home .icon-btn{background:#0b4fc4aa;border:0;color:#fff}
#screen-home .hero{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
#screen-home .pfp{width:min(52vw,230px);aspect-ratio:1;border-radius:50%;border:6px solid #fff;box-shadow:0 10px 0 #0a47b0,0 0 40px #8fd0ff88;object-fit:cover}
#screen-home .tag{font-size:18px;letter-spacing:4px;margin-top:16px;font-weight:700}
.fc{position:absolute;border-radius:50%;box-shadow:0 4px 0 #0003}
.fc1{width:34px;height:34px;left:6%;top:10%;background:radial-gradient(circle at 35% 30%,#fff,#d6dde8)}
.fc2{width:30px;height:30px;right:6%;top:30%;background:radial-gradient(circle at 35% 30%,#555,#080808)}
.fc3{width:26px;height:26px;left:9%;bottom:14%;background:radial-gradient(circle at 35% 30%,#ff6b5c,#b01f14)}
#screen-home .home-user{background:#ffffff26;border-radius:30px;padding:6px 18px 6px 8px;align-self:center}
#screen-home .home-user small{color:#fff;opacity:.9}
#screen-home .avatar{border-color:#fff}
#screen-home .menu{margin-top:0}
#screen-home .btn.gold{background:#ffc933;color:#5a3300;box-shadow:0 6px 0 #d9962b}
#screen-home .btn.green{background:#2ed185;color:#053d22;box-shadow:0 6px 0 #159a5c}
#screen-home .join-row input{background:#fff;color:#0b4fc4;border:0}
#screen-home .btn.blue{background:#fff;color:#0b4fc4;box-shadow:0 5px 0 #b5c9ee;width:96px}
#screen-home .btn.ghost{background:#0b4fc4aa;border:0;color:#fff;box-shadow:0 4px 0 #083b94;display:flex;flex-direction:column;align-items:center;line-height:1.1}
#screen-home .btn.ghost span{font-size:20px}
#screen-home .conn{color:#fff}

/* ---- Modal polish: crisp, no glow ---- */
.modal{background:rgba(5,12,31,.82)}
.modal-card{background:#101d44;color:#fff;border:1px solid #2a4585;box-shadow:none}
#modal-body{display:flex;flex-direction:column;gap:12px}
.modal-card .field>b{color:#9db6e6}
.modal-card .seg button{background:#0b1636;border-color:#2d4a8f;color:#fff;padding:12px 4px;box-shadow:none}
.modal-card .seg button.on{background:#1f6fe8;border-color:#1f6fe8;box-shadow:none}
.btn.go{display:block;width:100%;background:#22c55e;color:#04210f;font-weight:800;box-shadow:0 4px 0 #15803d}
.btn.cancel{display:block;width:100%;background:transparent;border:1.5px solid #3b5aa6;color:#cfe0ff;box-shadow:none}
.lb{border-color:#2a4585}