:root{--bg: #12101a;--panel: #1c1930;--ink: #ece8ff;--muted: #9a92c4;--accent: #b48cff;--card-back: #2a2547;--card-face: #efeaff;--matched: #3ad29f;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:52px 0 24px;box-sizing:border-box;display:grid;place-items:center;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(circle at 50% 0%,#241f3d,var(--bg));color:var(--ink)}.topbar{position:fixed;top:0;left:0;right:0;height:52px;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;background:#141126eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #2a2547}.topbar .brand{font-weight:600;letter-spacing:.04em}.topbar-right{display:flex;align-items:center;gap:.75rem}.topbar-user{color:var(--muted);font-size:.85rem;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.burger{flex:0 0 auto;width:40px;height:40px;padding:0;font-size:1.25rem;background:#2a2547;color:var(--ink);border-radius:8px}.menu{position:fixed;top:56px;right:.75rem;z-index:101;background:var(--panel);border:1px solid #3a3460;border-radius:10px;box-shadow:0 12px 32px #00000080;padding:.35rem;display:flex;flex-direction:column;min-width:180px}.menu-item{flex:none;text-align:left;background:transparent;color:var(--ink);font-weight:500;padding:.65rem .75rem;border-radius:6px}.menu-item:hover{background:#2a2547}.menu-item.danger{color:#ff9a9a}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:grid;place-items:center;padding:1rem;background:#080612b8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.overlay-card{background:var(--panel);border:1px solid #3a3460;border-radius:16px;box-shadow:0 16px 48px #0000008c;padding:1.75rem 2rem;width:min(92vw,420px);text-align:center}.overlay-card h2{margin:0 0 .25rem}.overlay-card .row{margin-top:1.25rem}#modal-body{text-align:left;color:var(--muted);font-size:.92rem}#modal-body dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0}#modal-body dt{color:var(--ink)}#modal-body dd{margin:0;text-align:right}.panel{background:var(--panel);padding:1.75rem 2rem;border-radius:16px;box-shadow:0 12px 40px #00000073;width:min(92vw,480px)}.hidden{display:none}h1{margin:0 0 .25rem;letter-spacing:.04em}.tagline{margin:0 0 1.5rem;color:var(--muted)}label{display:block;margin-bottom:1rem;color:var(--muted);font-size:.9rem}input{display:block;width:100%;margin-top:.35rem;padding:.6rem .75rem;border-radius:8px;border:1px solid #3a3460;background:#15122a;color:var(--ink);font-size:1rem;text-transform:none}#room{text-transform:uppercase}.row{display:flex;gap:.75rem}button{flex:1;padding:.7rem 1rem;border:0;border-radius:8px;background:var(--accent);color:#1a1030;font-weight:600;font-size:1rem;cursor:pointer}button.secondary{background:#34305a;color:var(--ink)}button:disabled{opacity:.5;cursor:not-allowed}.status{color:var(--muted);font-size:.85rem;min-height:1.2em;margin:.75rem 0 0}.game-head{display:flex;justify-content:space-between;gap:1rem;margin-bottom:1rem;color:var(--muted);font-size:.85rem}.board{display:grid;gap:.6rem;grid-template-columns:repeat(var(--cols, 4),1fr)}.card{aspect-ratio:3 / 4;border-radius:10px;background:var(--card-back);border:1px solid #3a3460;display:grid;place-items:center;font-size:clamp(1.5rem,8vw,2.5rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .12s ease,background .2s ease}.card:hover{transform:translateY(-2px)}.card.face-up{background:var(--card-face);color:#1a1030}.card.matched{background:var(--matched);color:#05271c;cursor:default}.card.matched:hover{transform:none}.card:not(.face-up):not(.matched){color:transparent}