/* 🧰 Giao diện nền cho game nhỏ (dùng với gamekit.js). Mỗi game đặt màu nhấn qua --acc, --acc2 và nền qua --bg. */
:root{--ink:#2a2340;--muted:#7b7391;--bg:#fff7ef;--card:#fffdf9;--line:#ecdfd0;--acc:#ff4d6a;--acc2:#ffa23d}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:600 16px/1.5 Nunito,system-ui,sans-serif;overflow-x:hidden;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:"Baloo 2",Nunito,sans-serif;margin:0}
.screen{display:none;min-height:100dvh;position:relative}.screen.active{display:block}
.back-hub{position:absolute;left:14px;top:12px;z-index:5}
.gk-av{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:800;flex:none;box-shadow:inset 0 -3px 0 #0000001f}
/* màn hình đầu */
#screen-home{display:none;place-items:center;padding:64px 16px 28px}#screen-home.active{display:grid}
.home-card{width:min(440px,100%);background:var(--card);border-radius:30px;padding:22px 22px 18px;box-shadow:0 30px 60px -30px #2a2340aa,0 0 0 1.5px #2a23400d;text-align:center}
.home-card .hero{height:150px;display:grid;place-items:center;margin:-4px 0 4px}.home-card .hero img{height:100%;max-width:90%;object-fit:contain;animation:gk-bob 3.2s ease-in-out infinite}
@keyframes gk-bob{50%{transform:translateY(-8px)}}
.logo{font-size:clamp(34px,10vw,46px);line-height:1;letter-spacing:-.5px}
.logo span{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{margin:8px 0 14px;color:var(--muted)}
.fld{display:block;text-align:left;margin-bottom:10px}.fld span{display:block;font-weight:800;font-size:13px;color:var(--muted);margin:0 0 4px 4px}
input[type=text],input:not([type]),select,textarea{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;font:700 16px Nunito,sans-serif;background:#fff;color:var(--ink);outline:none}
input:focus,select:focus,textarea:focus{border-color:#7b61ff;box-shadow:0 0 0 3px #7b61ff33}
.btn-col{display:flex;flex-direction:column;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:800 16px "Baloo 2",Nunito,sans-serif;cursor:pointer;text-decoration:none;transition:transform .12s,filter .15s,box-shadow .15s;box-shadow:0 8px 18px -14px #2a234088}
.btn:hover{filter:brightness(1.03);transform:translateY(-1px)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.big{min-height:54px;font-size:18px;width:100%}
.btn.pri{border:0;color:#fff;background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 14px 26px -14px var(--acc),inset 0 -3px 0 #0000001f}
.btn.dark{border:0;color:#fff;background:var(--ink)}
.btn.sm{min-height:38px;padding:4px 14px;font-size:14.5px}
.join-row{display:flex;gap:8px}.join-row input{text-align:center;letter-spacing:4px;text-transform:uppercase;font-weight:800}.join-row .btn{flex:none}
.home-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 6px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:4px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:800 14px Nunito,sans-serif;cursor:pointer;position:relative}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}.chip.ic{width:42px;height:42px;padding:0;justify-content:center;font-size:18px}
.note{font-size:12.5px;color:var(--muted);margin:10px 0 0;text-align:center}
/* phòng chờ */
.lobby{max-width:860px;margin:0 auto;padding:14px 14px 110px}
.lobby-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.code-box{display:flex;align-items:center;gap:10px;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:6px 8px 6px 16px;font-weight:800;color:var(--muted)}
.code-box b{font:800 22px "Baloo 2",ui-monospace,monospace;letter-spacing:3px;color:var(--acc)}
.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.panel{background:var(--card);border-radius:22px;padding:14px 16px;box-shadow:0 16px 34px -26px #2a2340aa,0 0 0 1.5px #2a23400d}
.panel h3{font-size:19px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:baseline}.panel h3 small{font:800 13px Nunito;color:var(--muted)}
.plist{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.plist li{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:6px 8px;font-weight:800}
.plist li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.plist li small{color:var(--muted);font-weight:700}
.plist li .x{width:32px;height:32px;border-radius:50%;border:0;background:#ffe3e6;color:#c0263b;font-weight:800;cursor:pointer;flex:none}
.plist li.off{opacity:.55}
.row-btns{display:flex;flex-wrap:wrap;gap:8px}
.opt{margin:10px 0}.opt>b{display:block;font-size:14.5px;margin-bottom:5px}.opt small{display:block;color:var(--muted);font-size:12.5px;font-weight:700;margin-top:4px}
.seg{display:flex;flex-wrap:wrap;gap:6px}.seg button{border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:6px 14px;min-height:38px;font:800 14px Nunito,sans-serif;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}.seg button:disabled{opacity:.6;cursor:default}
.start-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px 14px max(12px,env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 34%);display:flex;justify-content:center}
.start-bar .btn{max-width:520px}.wait{text-align:center;color:var(--muted);font-weight:800;margin:14px 0}
/* ván chơi */
.topbar{display:flex;align-items:center;gap:8px;padding:8px 10px;position:sticky;top:0;z-index:10}
.topbar .sp{flex:1}.topbar .tools{display:flex;gap:6px}
/* hộp thoại + toast */
.modal{position:fixed;inset:0;z-index:900;background:#1a1426b3;display:none;place-items:center;padding:14px;backdrop-filter:blur(3px)}.modal.open{display:grid}
.modal-box{width:min(480px,100%);max-height:calc(100dvh - 28px);overflow:auto;background:#fffaf3;border-radius:26px;padding:20px;box-shadow:0 24px 70px #0008;animation:gk-pop .24s cubic-bezier(.2,1.2,.4,1)}
.modal-box h2{font-size:24px;text-align:center;margin-bottom:8px}.modal-box .btns{display:flex;gap:10px;margin-top:16px}.modal-box .btns .btn{flex:1}
@keyframes gk-pop{from{opacity:0;transform:translateY(12px) scale(.96)}}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:950;background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-weight:800;box-shadow:0 10px 28px #0005;opacity:0;pointer-events:none;transition:.25s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:700px){.lobby-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}