@font-face {
  font-family: 'Galmuri11';
  src: url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/Galmuri11.woff2') format('woff2');
}
:root { --yellow:#ffd23f; --navy:#1b1f3b; --paper:#fffaf0; --red:#e63946; --ink:#2a2a35; }
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body { font-family:'Galmuri11', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; background:var(--navy); color:var(--ink); overflow:hidden; touch-action:manipulation; }
canvas { position:fixed; inset:0; touch-action:none; }
.hidden, [hidden] { display:none !important; }

/* 오버레이 */
#app { position:fixed; inset:0; overflow:auto; z-index:5; background:rgba(20,22,43,.9); padding:20px 16px; }
#app > * { max-width:560px; margin-left:auto; margin-right:auto; }
.panel { background:var(--paper); border:4px solid var(--navy); border-radius:14px; box-shadow:0 6px 0 #000; padding:22px 18px; margin-bottom:16px; }
.center { text-align:center; }
h1 { font-size:32px; color:var(--navy); letter-spacing:1px; margin:6px 0; }
h2 { font-size:22px; color:var(--navy); margin-bottom:10px; }
.logo { font-size:60px; line-height:1.2; }
.tagline { color:#5a5e78; }
.small { font-size:13px; color:#6b6f8a; line-height:1.7; }
.howto { font-size:16px; line-height:1.8; margin:12px 0; }

button { font-family:inherit; font-size:16px; min-height:48px; cursor:pointer; background:var(--navy); color:#fff; border:3px solid #000; border-radius:10px; box-shadow:0 4px 0 #000; padding:8px 18px; margin:4px 2px; -webkit-tap-highlight-color:transparent; user-select:none; }
button:active { transform:translateY(3px); box-shadow:0 1px 0 #000; }
button.big { font-size:22px; padding:12px 30px; background:var(--yellow); color:var(--navy); }
button.sub { background:#6b6f8a; }
input[type=text] { font-family:inherit; font-size:18px; padding:10px 12px; width:100%; max-width:300px; border:3px solid var(--navy); border-radius:8px; background:#fff; }

/* HUD (룸 플레이 중) */
#hud { position:fixed; top:10px; left:10px; right:10px; z-index:6; display:flex; gap:8px; flex-wrap:wrap; align-items:center; pointer-events:none; }
.chip { background:var(--navy); color:#fff; padding:6px 12px; border:2px solid var(--yellow); border-radius:999px; font-size:15px; }
#hud-score { font-size:20px; font-weight:bold; color:var(--yellow); }
#hud-combo:empty { display:none; }
#hud-timer { margin-left:auto; min-width:64px; text-align:center; }
#hud-timer.low { color:var(--red); border-color:var(--red); animation:pulse .5s infinite; }
@keyframes pulse { 50% { transform:scale(1.12); } }

#fx { position:fixed; inset:0; pointer-events:none; z-index:7; }
.pop { position:absolute; top:34%; font-size:34px; font-weight:bold; color:var(--yellow); text-shadow:3px 3px 0 #000; animation:rise .9s ease-out forwards; }
.pop.combo { font-size:44px; color:#ff9f1c; }
.pop.bad { color:var(--red); }
@keyframes rise { from { opacity:1; transform:translateY(0) scale(.7); } 30% { transform:translateY(-20px) scale(1.15); } to { opacity:0; transform:translateY(-100px) scale(1); } }
body.shake { animation:shake .3s; }
@keyframes shake { 0%,100% { transform:none; } 25% { transform:translate(6px,-3px); } 50% { transform:translate(-6px,3px); } 75% { transform:translate(3px,4px); } }

#toast { position:fixed; top:64px; left:50%; transform:translateX(-50%); z-index:8; background:var(--navy); color:#fff; border:2px solid var(--yellow); border-radius:10px; padding:8px 14px; font-size:15px; max-width:90vw; text-align:center; }
#lobbybar { position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:6; display:flex; gap:8px; align-items:center; background:rgba(27,31,59,.92); border:2px solid var(--yellow); border-radius:14px; padding:6px 8px 6px 14px; color:#fff; font-size:14px; max-width:94vw; flex-wrap:wrap; justify-content:center; }
#lobbybar button { min-height:38px; padding:4px 12px; font-size:14px; margin:0; }
.pp { display:inline-block; background:var(--yellow); color:var(--navy); border-radius:999px; padding:2px 10px; font-size:13px; font-weight:bold; }

/* 룸 공통 */
#room { padding-top:52px; }
.order { background:var(--paper); border:4px solid var(--navy); border-radius:14px; padding:14px; text-align:center; }
.order b { display:block; font-size:28px; color:var(--navy); margin:6px 0; }
#steps span { font-size:34px; opacity:.3; margin:0 4px; }
#steps span.got { opacity:1; }

/* 반짝 */
.cue { text-align:center; margin:18px 0 22px; color:#fff; }
.cue small { display:block; font-size:18px; min-height:24px; color:var(--yellow); }
.cue b { font-size:64px; line-height:1.2; text-shadow:3px 3px 0 #000; display:inline-block; }
.cue.bump b { animation:bump .18s; }
@keyframes bump { from { transform:scale(.6); } }
.colors { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.colors button { height:110px; font-size:26px; color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.5); margin:0; }

/* 빨리스타 */
.lr { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.lr button { height:160px; font-size:60px; background:var(--paper); color:var(--navy); margin:0; }
.lr button small { display:block; font-size:16px; margin-top:4px; }

/* 초성 */
.cho { letter-spacing:6px; font-size:42px !important; }
.answer { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.answer input { flex:1; min-width:140px; max-width:none; }

/* 메모라이즈 */
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:330px; margin:16px auto; }
.grid3 button { aspect-ratio:1; background:#3a3f6b; margin:0; min-height:0; }
.grid3 button.lit { background:var(--yellow); box-shadow:0 0 26px var(--yellow); }

/* 로비(2D 폴백) · 결과 · 랭킹 */
.rooms { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:10px; margin:12px 0; }
button.room { height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:18px; margin:0; }
button.room small { font-size:12px; margin-top:4px; color:var(--yellow); }
button.room.done { opacity:.5; }
.score-big { font-size:64px; color:var(--navy); line-height:1.2; margin:8px 0; }
.score-big small { font-size:20px; margin-left:4px; }
.best { color:var(--red); font-size:22px; animation:bump .4s; }
table.result, table.board { width:100%; border-collapse:collapse; margin:12px 0; font-size:16px; }
table.result td, table.board td { padding:7px 10px; border-bottom:2px dotted #c9c1a8; text-align:left; }
table td:last-child { text-align:right; font-weight:bold; }
table.board tr.me { background:#fff1b8; }
.tabs { display:flex; flex-wrap:nowrap; gap:6px; margin:0 -18px 10px; padding:4px 18px 8px; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.tabs::-webkit-scrollbar { height:6px; } .tabs::-webkit-scrollbar-thumb { background:#c9c1a8; border-radius:3px; }
.tabs button { flex:0 0 auto; white-space:nowrap; scroll-snap-align:center; min-height:38px; padding:4px 12px; font-size:14px; margin:0; }
.tabs button.on { background:var(--yellow); color:var(--navy); }

@media (max-width:480px) {
  .lr button { height:124px; font-size:46px; }
  .cue b { font-size:46px; }
  .colors button { height:92px; }
  h1 { font-size:26px; }
}

/* 다른 그림 · 넘버 러시 */
.oddgrid, .numgrid { display:grid; grid-template-columns:repeat(var(--n, 4), 1fr); gap:6px; margin:14px auto; max-width:440px; }
.oddgrid button, .numgrid button { aspect-ratio:1; min-height:0; padding:0; margin:0; font-size:clamp(20px, 7vw, 34px); background:#3a3f6b; }
.numbers button:disabled, .numgrid button:disabled { opacity:.15; }

/* 암산 */
.eq { font-size:clamp(28px, 8vw, 44px) !important; letter-spacing:2px; }

/* 타이밍 스톱 */
.track { position:relative; height:60px; background:#2b2f5c; border:3px solid #000; border-radius:14px; margin:18px 0; overflow:hidden; }
.zone { position:absolute; top:0; bottom:0; background:#2a9d4a; }
.cursor { position:absolute; top:0; bottom:0; width:6px; background:#fff; box-shadow:0 0 10px #fff; animation:sweep 1.4s linear infinite alternate; }
@keyframes sweep { from { left:0; } to { left:calc(100% - 6px); } }
button.stop { display:block; width:100%; height:110px; font-size:34px; margin:0; }

/* 캔버스 룸 (스택 · 레이저) */
canvas.mini { display:block; margin:8px auto 0; max-width:100%; border:4px solid var(--navy); border-radius:14px; touch-action:none; background:#14162b; }