*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:#0f172a;color:#e2e8f0;font-family:Pretendard,Segoe UI,Apple SD Gothic Neo,sans-serif;-webkit-font-smoothing:antialiased;touch-action:manipulation}#root{height:100%}.page{min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:1.5rem;text-align:center}.logo{font-size:clamp(2rem,10vw,3.2rem);letter-spacing:.28em;padding-left:.28em;font-weight:800}.tagline{color:#94a3b8;font-size:1rem}.auth{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-top:.5rem}.welcome{display:inline-flex;align-items:center;gap:.5rem;font-size:1rem;color:#e2e8f0}.avatar{width:32px;height:32px;border-radius:50%}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:0 1.4rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent}.btn.google{margin-top:.75rem;background:#fff;color:#1f2937}.btn.google:active{transform:scale(.98)}.btn.ghost{background:transparent;color:#94a3b8;border:1px solid #334155;min-height:44px;font-size:.9rem}.status{margin-top:1.25rem;display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:#cbd5e1;background:#1e293b;border-radius:999px;padding:.55rem 1.1rem}.dot{width:.6rem;height:.6rem;border-radius:50%}.dot.ok{background:#22c55e;box-shadow:0 0 8px #22c55e88}.dot.bad{background:#ef4444}.dot.wait{background:#eab308}.foot{padding:1rem;text-align:center;color:#475569;font-size:.8rem}.btn.play{margin-top:.25rem;background:#2563eb;color:#fff}.btn.play:active{transform:scale(.98)}.rank{width:100%;max-width:420px;margin-top:1.5rem}.rank-title{font-size:1rem;color:#cbd5e1;margin-bottom:.6rem}.rank-list{list-style:none;display:flex;flex-direction:column;gap:.35rem}.rank-list li{display:flex;align-items:center;gap:.6rem;background:#1e293b;border-radius:10px;padding:.5rem .8rem;font-size:.92rem}.rank-list li.me{outline:1px solid #2563eb}.rank-no{width:1.4rem;text-align:center;color:#94a3b8;font-weight:700}.avatar.sm{width:24px;height:24px}.avatar.ph{display:inline-block;background:#334155;border-radius:50%}.rank-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.rank-score{font-weight:700;color:#93c5fd}.my-rank{margin-top:.5rem;font-size:.85rem;color:#94a3b8;text-align:center}.game-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#0b1120;display:flex;flex-direction:column}.game-close{align-self:flex-end;margin:max(.5rem,env(safe-area-inset-top)) .75rem .25rem;min-height:44px;padding:0 1rem;background:#1e293b;color:#cbd5e1;border:none;border-radius:10px;font-size:.9rem;cursor:pointer}.game-frame{flex:1;width:100%;border:none}