:root{--bg:#08111f;--panel:#101d31;--card:#16263d;--line:#2a3d58;--text:#f7fbff;--muted:#aebdd0;--accent:#f7c65d;--accent2:#6ed3b7;--danger:#ff7e7e;--ok:#74df9a}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#07101c,#0b1626 55%,#0b1320);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}button,input,select{font:inherit}.hidden{display:none!important}.visualTop{display:flex;justify-content:space-between;align-items:center;padding:16px clamp(16px,4vw,42px);border-bottom:1px solid #1d2a3c;background:#08111fe6;position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.visualBrand{font-weight:900;color:var(--text);text-decoration:none;letter-spacing:.16em}.visualHome,.visualRoom{max-width:1180px;margin:0 auto;padding:30px 18px 70px}.visualHero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);gap:24px;align-items:stretch}.heroMain,.howCard,.visualPanel{background:linear-gradient(145deg,#102039,#0e192a);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,4vw,38px)}.eyebrow{font-size:.75rem;letter-spacing:.14em;font-weight:800;color:var(--accent)}.heroIcon{font-size:58px;margin:12px 0}.heroMain h1{font-size:clamp(2rem,5vw,4rem);line-height:1;margin:8px 0 16px}.heroMain p,.howCard li,.summary{color:var(--muted);line-height:1.6}.heroActions,.hostActions,.answerGrid,.tabs{display:flex;gap:10px;flex-wrap:wrap}.visualBtn{border:1px solid var(--line);border-radius:12px;padding:12px 16px;min-height:44px;font-weight:800;cursor:pointer;background:var(--card);color:var(--text)}.visualBtn.primary{background:var(--accent);color:#2a1b04;border-color:transparent}.visualBtn.secondary{background:var(--accent2);color:#05231b;border-color:transparent}.visualBtn.ghost{background:transparent}.visualBtn.small{padding:8px 12px;min-height:38px}.visualBtn:disabled{opacity:.45;cursor:not-allowed}.statStrip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}.statStrip>div{padding:14px;background:#091526;border:1px solid var(--line);border-radius:14px}.statStrip b{display:block;font-size:1.3rem}.statStrip span{color:var(--muted);font-size:.8rem}.howCard ol{padding-left:20px}.howCard li{margin:10px 0}.section{margin-top:28px}.sectionHead{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}.sectionHead h2{margin:4px 0}.roomList,.levelGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:14px}.publicCard,.levelCard{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:16px}.levelCard.active{outline:2px solid var(--accent)}.levelCard h3{margin:7px 0}.levelMeta,.roomMeta{color:var(--muted);font-size:.85rem}.tag{display:inline-block;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.78rem}.visualEmpty{padding:24px;border:1px dashed var(--line);border-radius:16px;color:var(--muted)}.modal{position:fixed;inset:0;background:#02060dcc;z-index:60;display:grid;place-items:center;padding:16px}.modalPanel{width:min(680px,100%);max-height:90vh;overflow:auto;background:#0e1b2e;border:1px solid var(--line);border-radius:22px;padding:24px;position:relative}.modalClose{position:absolute;right:14px;top:12px;border:0;background:transparent;color:var(--text);font-size:28px}.modalTitle h2{margin:5px 0 18px}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.formGrid label{display:grid;gap:7px;font-weight:700}.formGrid input,.formGrid select{width:100%;padding:12px;background:#081321;border:1px solid var(--line);color:var(--text);border-radius:10px}.formGrid small{color:var(--muted);font-weight:400}.full{grid-column:1/-1}.checkRow{display:flex!important;align-items:center;gap:10px}.checkRow input{width:auto}.toast{position:fixed;left:50%;top:72px;transform:translate(-50%,-20px);opacity:0;pointer-events:none;background:#17283e;border:1px solid var(--line);padding:12px 16px;border-radius:12px;z-index:90;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{border-color:#87434b}.roomHeader{display:flex;justify-content:space-between;gap:15px;align-items:start;margin-bottom:16px}.roomHeader h1{margin:4px 0}.roomGrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}.visualPanel{padding:20px}.panelTitle{display:flex;justify-content:space-between;gap:12px;align-items:center}.rankRow{display:grid;grid-template-columns:28px 1fr auto;gap:9px;padding:10px 0;border-bottom:1px solid #20324a}.rankRow small{color:var(--muted)}.players{margin-top:10px}.settingGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.settingGrid label{display:grid;gap:5px}.settingGrid input,.settingGrid select{padding:10px;border-radius:9px;border:1px solid var(--line);background:#07121f;color:white}.countdown{min-height:360px;display:grid;place-items:center;text-align:center}.countdown strong{font-size:7rem;color:var(--accent)}.timerWrap{height:8px;background:#08111e;border-radius:999px;overflow:hidden;margin:12px 0 18px}.timerBar{height:100%;background:var(--accent);width:100%}.memoryGrid{display:grid;gap:10px;margin-top:16px}.memoryCard{aspect-ratio:4/3;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#17314a,#0b1b2a);padding:0;overflow:hidden;cursor:pointer;position:relative;min-width:0}.memoryCard.back::after{content:'✦';font-size:34px;color:var(--accent)}.memoryCard.back{display:grid;place-items:center}.memoryCard img{width:100%;height:100%;object-fit:cover}.memoryCard.matched{outline:3px solid var(--ok)}.knowledge{margin-top:14px;padding:14px;border-radius:14px;background:#0b2530;border:1px solid #275b62}.knowledge b{color:var(--accent2)}.wordGrid{display:grid;gap:2px;max-width:720px;margin:14px auto;touch-action:none;user-select:none}.wordCell{aspect-ratio:1;border:1px solid #29405f;background:#0d1c2e;color:#fff;border-radius:4px;display:grid;place-items:center;font-weight:900;font-size:clamp(.65rem,2vw,1rem);padding:0}.wordCell.selected{background:#684f1f}.wordCell.found{background:#164734}.wordList{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.wordPill{padding:7px 10px;border-radius:999px;background:#0a1625;border:1px solid var(--line);font-size:.83rem}.wordPill.found{text-decoration:line-through;color:var(--ok)}.visualQuestion{text-align:center}.objectImage,.silhouetteImage{width:min(100%,650px);aspect-ratio:5/3;object-fit:contain;border-radius:18px;border:1px solid var(--line);background:#050b12}.silhouetteImage{object-fit:cover;transition:filter .15s linear;filter:brightness(.05) saturate(.15) contrast(1.55)}.answerGrid{display:grid;grid-template-columns:1fr 1fr;margin-top:16px}.answerBtn{padding:14px;border-radius:14px;border:1px solid var(--line);background:#13253b;color:white;font-weight:800;min-height:58px}.answerBtn.correct{outline:2px solid var(--ok)}.answerBtn.wrong{outline:2px solid var(--danger)}.revealBox{text-align:center;padding:22px}.revealBox h2{font-size:2rem}.scoreBig{font-size:2.4rem;color:var(--accent);font-weight:900}.finished{text-align:center}.finished h2{font-size:2.4rem}.turnNotice{padding:10px 12px;border-radius:12px;background:#171e2a;border:1px solid var(--line);margin:10px 0;font-weight:800}.turnNotice.mine{background:#173529;border-color:#2d7a57}.progressText{color:var(--muted);font-size:.9rem}.tabs button.active{background:var(--accent);color:#211706}.sourceCredit{font-size:.72rem;color:var(--muted);margin-top:7px}
@media(max-width:820px){.visualHero,.roomGrid{grid-template-columns:1fr}.roomGrid aside{order:-1}.settingGrid{grid-template-columns:1fr 1fr}.memoryGrid{gap:6px}.answerGrid{grid-template-columns:1fr}.statStrip{grid-template-columns:1fr 1fr 1fr}}@media(max-width:520px){.visualHome,.visualRoom{padding:18px 10px 50px}.visualTop{padding:12px}.heroMain,.howCard,.visualPanel{padding:16px;border-radius:16px}.formGrid,.settingGrid{grid-template-columns:1fr}.full{grid-column:auto}.memoryGrid{gap:4px}.wordGrid{gap:1px}.wordCell{border-radius:2px}.statStrip{grid-template-columns:1fr}.roomHeader{align-items:center}.roomHeader h1{font-size:1.25rem}}

/* ===== 7Game v0.5.3 — visual gamer / performance ===== */
:root{--bg:#050915;--panel:#0a1223;--card:#0d1930;--line:#203557;--text:#f7fbff;--muted:#9fb2cf;--accent:#2f80ff;--accent2:#43c7ff;--danger:#ff6f91;--ok:#5ee6a8;--shadow:0 18px 48px rgba(0,0,0,.34)}
body{background:radial-gradient(circle at 18% -8%,rgba(47,128,255,.24),transparent 34%),radial-gradient(circle at 94% 15%,rgba(67,199,255,.11),transparent 28%),linear-gradient(180deg,#040812 0,#07101e 58%,#050a13 100%)}
.visualTop{min-height:64px;padding:10px clamp(14px,4vw,40px);background:rgba(4,9,20,.86);border-bottom:1px solid rgba(125,177,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.02);backdrop-filter:blur(18px) saturate(125%)}
.visualBrand{font-size:1.05rem;letter-spacing:.22em;color:#fff}.visualHome,.visualRoom{max-width:1240px}.visualHero{gap:18px}.heroMain,.howCard,.visualPanel{border:1px solid rgba(116,163,230,.18);background:linear-gradient(145deg,rgba(12,26,50,.96),rgba(7,15,30,.97));box-shadow:var(--shadow)}
.heroMain{position:relative;overflow:hidden}.heroMain:before{content:"";position:absolute;inset:auto -80px -140px auto;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(47,128,255,.26),transparent 68%);pointer-events:none}.eyebrow{color:#74b5ff}.heroIcon{filter:drop-shadow(0 8px 28px rgba(47,128,255,.25))}.visualBtn{transition:transform .14s ease,border-color .14s ease,background .14s ease,opacity .14s ease;box-shadow:none}.visualBtn:hover{transform:translateY(-1px);border-color:#4679b9}.visualBtn.primary{background:linear-gradient(135deg,#2f80ff,#45b9ff);color:white}.visualBtn.secondary{background:#123462;color:#dfeeff;border-color:#24558c}.visualBtn.ghost{background:rgba(9,20,39,.62)}.visualBtn:focus-visible,.answerBtn:focus-visible,.wordCell:focus-visible,.memoryCard:focus-visible{outline:3px solid rgba(85,169,255,.55);outline-offset:2px}.statStrip>div{background:linear-gradient(145deg,#071326,#0a172c);border-color:#1e3658}.publicCard,.levelCard{background:linear-gradient(145deg,rgba(12,27,50,.92),rgba(7,16,31,.96));border-color:rgba(98,151,222,.18);transition:transform .16s ease,border-color .16s ease,background .16s ease;content-visibility:auto;contain-intrinsic-size:170px}.publicCard:hover,.levelCard:hover{transform:translateY(-2px);border-color:#3e6fa9;background:linear-gradient(145deg,#102c52,#09182e)}.levelGrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.levelMore{grid-column:1/-1;justify-self:center;margin-top:8px;min-width:220px}.visualPanel{contain:layout paint}.panelDivider{height:1px;background:var(--line);margin:18px 0}.scorePanel{position:sticky;top:84px}.countdown strong{color:#5db5ff;text-shadow:0 0 38px rgba(47,128,255,.28)}.preloadHint{display:block;color:var(--muted);margin-top:10px}.timerBar{background:linear-gradient(90deg,#2f80ff,#54c8ff)}.memoryCard{border-color:#24466f;background:linear-gradient(145deg,#143766,#08172e);transition:transform .12s ease,border-color .12s ease,opacity .12s ease;contain:paint}.memoryCard:not(:disabled):active{transform:scale(.975)}.memoryCard.pending{opacity:.7}.memoryCard.back::after{color:#67b9ff}.memoryCard.matched{outline:2px solid var(--ok);box-shadow:0 0 0 2px rgba(94,230,168,.12),0 10px 28px rgba(0,0,0,.22)}.knowledge{background:linear-gradient(145deg,#082a31,#0a1f35);border-color:#275b72}.knowledge b{color:#63dfff}.wordHelp b{color:#7cc2ff}.wordGrid{touch-action:none;overscroll-behavior:contain;contain:layout paint;max-width:760px}.wordCell{border-color:#294d77;background:#0b1b32;transition:background .08s linear,transform .08s linear,box-shadow .08s linear;touch-action:none}.wordCell.selected{background:#1e64b5;box-shadow:inset 0 0 0 1px #69b5ff;color:#fff}.wordCell.checking{background:#256dca;transform:scale(.96)}.wordCell.invalid{background:#7b233b;box-shadow:inset 0 0 0 1px #ff8ca8}.wordCell.found{background:#12604d!important;color:#effff9;box-shadow:inset 0 0 0 1px #5ee6a8}.wordPill.found{background:#0b3f34;border-color:#1f8068;color:#79efba;text-decoration:none}.objectImage,.silhouetteImage{background:#040912;border-color:#26496e;box-shadow:0 18px 45px rgba(0,0,0,.28)}.answerBtn{background:linear-gradient(145deg,#0f2542,#0a172b);border-color:#27486e;transition:transform .1s ease,border-color .12s ease,background .12s ease,opacity .12s ease}.answerBtn:not(:disabled):hover{border-color:#4e8fd0;background:#12315a}.answerBtn.pending{opacity:.62;transform:scale(.985);border-color:#4b9dff}.answerBtn.correct{outline:2px solid var(--ok);background:#0e4438}.answerBtn.wrong{outline:2px solid var(--danger);background:#492033}.silhouetteFrame{--veil:.94;width:min(100%,650px);aspect-ratio:5/3;margin:0 auto;position:relative;border-radius:18px;overflow:hidden;background:#02050a;border:1px solid #26496e;box-shadow:0 18px 45px rgba(0,0,0,.32);contain:paint}.silhouetteFrame .silhouetteImage{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;filter:saturate(.46) contrast(1.08);transform:translateZ(0)}.silhouetteVeil{position:absolute;inset:0;background:#000;opacity:var(--veil);pointer-events:none;transition:opacity .16s linear;will-change:opacity}.scoreBig{color:#65b9ff}.turnNotice.mine{background:#0d3546;border-color:#2c7395}.tag{border-color:#29486c;background:rgba(8,20,38,.55)}.modal{background:rgba(1,5,13,.82);backdrop-filter:blur(14px)}.modalPanel{background:linear-gradient(145deg,#0c1c35,#081224);border-color:#294b75;box-shadow:0 28px 90px rgba(0,0,0,.5)}.formGrid input,.formGrid select,.settingGrid input,.settingGrid select{border-color:#28486c;background:#071426}.formGrid input:focus,.formGrid select:focus,.settingGrid input:focus,.settingGrid select:focus{border-color:#4d9fff;outline:3px solid rgba(47,128,255,.15)}
@media(max-width:820px){.scorePanel{position:static}.levelGrid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}.wordGrid{max-width:min(100%,680px)}}
@media(max-width:520px){.visualTop{min-height:58px}.levelGrid{grid-template-columns:1fr 1fr}.levelCard{padding:12px}.levelCard .heroActions{gap:6px}.levelCard .visualBtn{flex:1}.wordCell{font-size:clamp(.58rem,2.9vw,.92rem)}.answerBtn{min-height:52px}}
@media(prefers-reduced-motion:reduce){.visualBtn,.levelCard,.publicCard,.answerBtn,.memoryCard,.silhouetteVeil{transition:none!important}}