:root{--bg:#f7f6f2;--bg-canvas:#f2f0ea;--surface-muted:#f1efe8;--surface-hover:#fbfaf7;--white:#fff;--ink-strong:#1a1a1a;--ink:#1f1f1f;--ink-muted:#6b6656;--ink-soft:#4a463d;--ink-subtle:#8a8578;--ink-faint:#a39d8c;--ink-quiet:#b3ada0;--border-hover:#b9b09a;--border-soft:#ddd8cb;--border:#e6e3da;--border-faint:#eeece4;--border-faintest:#f3f1ea;--dot-empty:#d9d4c7;--accent-live:#e0453c;--font-serif:Georgia,"Iowan Old Style","Palatino Linotype",serif}*{box-sizing:border-box}body,html{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:Helvetica Neue,Helvetica,Arial,sans-serif;overflow:hidden}.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:8px}.line-grid{display:flex;flex-wrap:wrap;gap:10px}.line-chip{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;cursor:pointer;border:2px solid transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:opacity .12s ease,transform .12s ease,box-shadow .12s ease,filter .12s ease;opacity:.32;filter:grayscale(.5)}.line-chip img{width:100%;height:100%;pointer-events:none}.line-chip.selected{opacity:1;filter:none;box-shadow:0 4px 14px -4px rgba(0,0,0,.35);transform:translateY(-1px)}.line-chip.disabled{cursor:not-allowed}.line-chip-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}.difficulty-dots{display:flex;gap:2px}.difficulty-dot{width:4px;height:4px;border-radius:50%;background:var(--dot-empty)}.difficulty-dot.filled{background:var(--ink-faint)}.mode-toggle{display:flex;gap:4px;background:var(--surface-muted);padding:4px;border-radius:10px}.mode-btn{flex:1 1;padding:9px;border-radius:7px;border:none;background:transparent;color:var(--ink-subtle);font-size:13px;font-weight:600;cursor:pointer;transition:background .12s ease,color .12s ease}.mode-btn.active{background:var(--ink-strong);color:var(--white)}.game-page{height:100vh;height:100dvh;width:100vw;background:var(--bg);flex-direction:column;justify-content:center;padding:calc(76px + env(safe-area-inset-top, 0px)) max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}.game-page,.game-topbar{display:flex;align-items:center}.game-topbar{position:fixed;top:0;left:0;right:0;height:calc(56px + env(safe-area-inset-top, 0px));padding-top:env(safe-area-inset-top,0);z-index:30;background:hsla(48,24%,96%,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}.game-topbar-inner{width:min(94vw,1700px);margin:0 auto;display:flex;align-items:center;gap:12px}.game-title{font-family:var(--font-serif);font-size:18px;color:var(--ink-strong);margin:0}.mode-tag{font-weight:700;letter-spacing:.06em;padding:4px 12px;border-radius:999px;font-size:10px;text-transform:uppercase}.mode-tag.mode-play{background:var(--ink-strong);color:var(--white)}.mode-tag.mode-listen{background:var(--surface-muted);color:var(--ink-subtle)}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:16px}.streak-badge{display:flex;align-items:baseline;gap:6px;font-size:12px;color:var(--ink-muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.streak-current{font-family:var(--font-serif);font-size:16px;font-weight:700;color:var(--ink-strong)}.streak-label{text-transform:uppercase;letter-spacing:.04em;font-size:10px}.streak-best{color:var(--ink-faint);border-left:1px solid var(--border-soft);padding-left:6px}.live-badge{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-muted);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-live);animation:live-pulse 1.6s ease-out infinite}@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(224,69,60,.45)}70%{box-shadow:0 0 0 7px rgba(224,69,60,0)}to{box-shadow:0 0 0 0 rgba(224,69,60,0)}}.settings-toggle{position:absolute;left:50%;top:0;transform:translateX(-50%);width:72px;height:24px;border-radius:0 0 8px 8px;border:1px solid var(--border-soft);border-top:none;background:var(--white);color:var(--ink-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px rgba(20,16,8,.2);transition:border-color .12s ease,background .12s ease;flex-shrink:0}.settings-toggle:hover{border-color:var(--border-hover);background:var(--surface-hover)}.settings-toggle-icon{transition:transform .16s ease}.settings-toggle-icon.open{transform:rotate(180deg)}.settings-backdrop{position:fixed;inset:0;background:rgba(20,16,8,.15);z-index:28}.settings-panel{position:fixed;top:calc(56px + env(safe-area-inset-top, 0px));left:0;right:0;z-index:29;background:var(--white);border-bottom:1px solid var(--border);box-shadow:0 16px 40px -20px rgba(30,25,15,.18);animation:settings-drop .18s ease}.settings-panel-inner{width:min(94vw,1700px);margin:0 auto;padding:22px 4px 26px}.settings-prompt{margin:0 0 16px;font-size:14px;color:var(--ink-soft)}@keyframes settings-drop{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.settings-body{display:flex;flex-wrap:wrap;gap:28px}.settings-field-lines{flex:2 1;min-width:280px}.settings-field-side{flex:1 1;min-width:220px}.game-stage{width:min(94vw,1700px);height:min(80vh,940px);display:flex;gap:18px}.canvas-frame{flex:1 1;min-width:0;border-radius:18px;overflow:hidden;box-shadow:0 24px 70px -24px rgba(20,16,8,.35);border:1px solid var(--border);position:relative;background:var(--bg-canvas)}.canvas-viewport{position:absolute;left:0;right:0;bottom:0}.canvas-frame canvas{display:block;touch-action:none}.log-panel{width:clamp(240px,20vw,320px);flex-shrink:0;background:var(--white);border:1px solid var(--border);border-radius:18px;overflow:hidden}.canvas-hud,.log-panel{display:flex;flex-direction:column}.canvas-hud{position:absolute;top:0;left:0;right:0;z-index:1;padding:12px;gap:10px;pointer-events:none}.canvas-hud-badges{display:flex;align-items:center;gap:10px;flex-shrink:0}.canvas-hud-badges .live-badge,.canvas-hud-badges .streak-badge{background:hsla(48,24%,96%,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:999px;padding:6px 14px}.canvas-hud-log{height:34vh;pointer-events:auto}.canvas-hud-log .log-panel{height:100%;background:hsla(0,0%,100%,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}@media (max-width:1300px){.game-page{padding:calc(64px + env(safe-area-inset-top, 0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}.game-stage{width:100%;height:100%;flex-direction:column;gap:14px}.canvas-frame{width:100%;flex:1 1;min-height:0}.log-panel{width:100%;height:160px;flex-shrink:0}}.log-header{padding:16px 18px 12px;border-bottom:1px solid var(--border-faint);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint)}.log-list{flex:1 1;overflow-y:auto;padding:6px 10px}.log-row{display:flex;align-items:flex-start;gap:8px;padding:10px 8px}.log-row+.log-row{border-top:1px solid var(--border-faintest)}.log-bullet{width:18px;height:18px;flex-shrink:0;margin-top:4px}.log-time{color:var(--ink-quiet);font-family:ui-monospace,monospace;font-size:10.5px;flex-shrink:0;margin-top:1px}.log-station{color:var(--ink-soft);font-size:12.5px;flex:1 1;min-width:0;overflow-wrap:break-word}.log-destination{display:block;width:-moz-fit-content;width:fit-content;margin-top:4px;padding:2px 8px;border-radius:999px;background:var(--border-faintest);border:1px solid var(--border);color:var(--ink-subtle);font-size:10px;letter-spacing:.02em}.log-empty{padding:28px 12px;color:var(--ink-quiet);font-size:12.5px;text-align:center}