:root{--ink:#3a2a28;--paper:#fff6ea;--cream:#fffaf2;--muted:#8a6a62;--peach:#e07a5f;--mint:#67b99a;--lav:#9a7fd1;--sky:#7eb8da;--shadow:0 18px 40px #2a183038}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:var(--ink);background:#2a1c3c;font-family:Noto Sans KR,sans-serif}h1,h2,.eyebrow{margin:0;font-family:Jua,sans-serif;font-weight:400}button,input{font:inherit}img{max-width:100%}.shell{background:linear-gradient(180deg, #2a18302e, #2a18308c), var(--scene) center / cover no-repeat;background-color:#3a2a58;min-height:100dvh;padding:24px}.sound-toggle{z-index:5;border:2px solid var(--ink);background:var(--cream);cursor:pointer;border-radius:999px;padding:6px 12px;position:absolute;top:16px;right:16px}.paper{border:3px solid var(--ink);box-shadow:var(--shadow);background:linear-gradient(#fffaf2eb,#ffecd6eb);border-radius:28px;padding:24px}.title-layout{grid-template-columns:minmax(280px,420px) minmax(280px,1fr);align-items:start;gap:20px;max-width:1080px;margin:48px auto 0;display:grid}.title-card{text-align:center}.logo{border:3px solid var(--ink);border-radius:24px;width:min(220px,70%);margin-bottom:8px}.eyebrow{color:var(--peach);letter-spacing:.04em}.title-card h1{margin:4px 0 8px;font-size:44px}.lede{color:var(--muted);margin:0 0 12px;line-height:1.5}.mascot{filter:drop-shadow(0 10px #3a2a2814);width:180px;margin:4px auto 12px}label{text-align:left;gap:6px;margin:10px 0;font-weight:700;display:grid}input{border:2px solid var(--ink);background:#fff;border-radius:14px;padding:10px 12px}.btn{border:2px solid var(--ink);cursor:pointer;background:#fff;border-radius:16px;padding:10px 16px;font-weight:700}.btn.primary{background:var(--peach);color:#fff;width:100%}.btn.tiny{border-radius:12px;padding:6px 10px;font-size:13px}.btn.ghost{color:#fff;background:0 0;border-color:#fff6ea73}.btn:disabled{opacity:.45;cursor:default}.row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.row .btn.primary{flex:1;width:auto}.error{color:#b43d5a;font-weight:700}.muted,.wait{color:var(--muted)}.room-card header{justify-content:space-between;align-items:baseline;display:flex}.room-card h2{font-size:28px}.room-list{gap:8px;margin:12px 0 0;padding:0;list-style:none;display:grid}.room-list li{border:2px solid var(--ink);background:#ffffffb3;border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;display:flex}.room-list li.mine{background:#ffe6d8}.room-list strong{display:block}.room-list span{color:var(--muted);font-size:13px}.empty-rooms{text-align:center;color:var(--muted)}.empty-rooms img{border:2px solid var(--ink);border-radius:18px;width:100%;margin:12px 0}.wait-box{text-align:left;border:2px dashed var(--ink);background:#ffffff8c;border-radius:18px;padding:12px}.player-list{margin:8px 0;padding:0;list-style:none}.player-list li{align-items:center;gap:8px;margin:6px 0;display:flex}.player-list i{border:2px solid var(--ink);border-radius:50%;width:12px;height:12px}.player-list em{border:1px solid var(--ink);background:#fff;border-radius:999px;padding:1px 8px;font-size:12px;font-style:normal}.play{background:linear-gradient(180deg, #18102859, #1810289e), var(--scene) center / cover no-repeat;color:#fff6ea;-webkit-user-select:none;user-select:none;min-height:100dvh;padding:12px 12px 96px}.hud{background:#1c12288c;border:2px solid #fff6ea40;border-radius:20px;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:8px 12px;display:flex}.hud h1{font-size:26px}.hud-players{gap:12px;margin:0;padding:0;font-weight:700;list-style:none;display:flex}.hud .sound-toggle{position:static}.stage{grid-template-columns:160px auto 160px;justify-content:center;align-items:start;gap:12px;margin-top:12px;display:grid}.side{gap:10px;display:grid}.mascot-play{filter:drop-shadow(0 8px #00000026);width:140px}.stat-card,.preview,.rival{color:var(--ink);border:2px solid var(--ink);background:#fff6eaeb;border-radius:16px;padding:8px}.stat-card p,.preview p,.rival p{margin:0 0 4px;font-family:Jua,sans-serif}.combo{color:var(--peach)}.garbage{color:#8a3a2a}.preview-grid{justify-content:center;min-height:40px;display:grid}.preview-grid img{width:18px;height:18px}.preview.dim{opacity:.45}.well{background:#fff6ea29;border:3px solid #24182c;border-radius:18px;padding:8px;position:relative;box-shadow:inset 0 0 0 4px #ffd6aa33}.board-canvas{border-radius:8px;display:block}.ko-stamp{color:#fff;text-shadow:0 4px #3a2a28;background:#2a183059;place-items:center;font-family:Jua,sans-serif;font-size:42px;display:grid;position:absolute;inset:0}.next-col{gap:6px;display:grid}.rivals{gap:8px;display:grid}.keys{text-align:center;opacity:.8;font-size:13px}.toast{border:2px solid var(--ink);background:#fff6eaeb;border-radius:999px;padding:8px 14px;font-weight:700;position:fixed;top:72px;left:50%;transform:translate(-50%)}.touch-pad{display:none}.overlay{background:#1c10288c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.count-card,.result-card{text-align:center;width:min(420px,100%)}.count-card img,.result-card img{width:180px}.count-card h2{font-size:72px}.rank{text-align:left;margin:12px 0;padding:0;list-style:none}.rank li{border-bottom:1px dashed #e7c9b4;grid-template-columns:48px 1fr auto;gap:8px;padding:6px 0;display:grid}@media (width<=900px){.title-layout{grid-template-columns:1fr;margin-top:48px}.stage{grid-template-columns:92px auto 92px;gap:6px}.mascot-play{width:92px}.preview-grid{grid-template-rows:repeat(2,12px)!important;grid-template-columns:repeat(3,12px)!important}.preview-grid img{width:12px;height:12px}.keys{display:none}.touch-pad{grid-template-columns:repeat(5,1fr);gap:6px;display:grid;position:fixed;bottom:8px;left:8px;right:8px}.touch-pad button{border:2px solid var(--ink);background:#fff6eaeb;border-radius:14px;height:48px;font-size:18px;font-weight:700}.touch-pad .hard{background:var(--peach);color:#fff}.touch-pad .wide{grid-column:2/6}}@media (width<=640px){.stage{grid-template-columns:1fr;justify-items:center}.left-side{align-items:center;gap:8px;width:min(320px,100%);display:flex}.next-col{grid-auto-flow:column}}