:root{color:#28334e;background:#a0ace5;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,PingFang SC,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #28334e;--muted: #67738b;--line: #dce2ec;--accent: #3d76b6;--accent-dark: #295f9b;--danger: #d3435c}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;letter-spacing:0}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{-webkit-user-select:none;user-select:none}button,input{font:inherit;touch-action:manipulation}button{border:0;cursor:pointer}button:disabled{cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #f4bc36;outline-offset:3px}.game-shell{width:min(100%,520px);height:100vh;height:100dvh;margin:0 auto;display:grid;grid-template-rows:46px 34px 40px 4px minmax(0,1fr) 65px;gap:4px;padding:max(7px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));position:relative}.topbar{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;gap:6px;align-items:center}.brand-lockup{min-width:0;display:grid;justify-items:center;gap:2px;line-height:1.2}.brand-lockup strong{color:#fff;font-size:18px;font-weight:900;text-shadow:0 2px 0 #6f7db6;white-space:nowrap}.brand-lockup span{max-width:100%;color:#29345b;font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-actions{display:flex;gap:4px}.icon-button{width:36px;height:36px;display:inline-grid;place-items:center;flex:0 0 auto;padding:0;color:#364a70;background:#f3f6ff;border:1px solid #ffffffb3;border-radius:50%;box-shadow:0 3px #7787bd}.icon-button svg{width:19px;height:19px;stroke-width:2.4}.icon-button:active,.tool-button:active,.view-button:active,.command-button:active,.secondary-button:active{transform:translateY(2px)}.timer{height:28px;display:inline-flex;align-items:center;justify-content:center;gap:4px;color:#fff;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}.timer span{min-width:39px}.timer svg{width:15px;height:15px}.timer.urgent{color:#9d1734}.play-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 1px}.segmented-control,.speed-control{height:32px;display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:8px;background:#ffffff42}.segmented-control button,.speed-control button{min-width:43px;height:28px;padding:0 8px;border-radius:6px;color:#344669;background:transparent;font-size:11px;font-weight:800}.segmented-control button.active,.speed-control button.active{color:#29395c;background:#fff;box-shadow:0 2px 2px #5e71a629}.speed-control svg{width:16px;height:16px;margin:0 3px;color:#344669}.speed-control button{min-width:34px;padding:0 6px}.rhythm-hud{display:grid;grid-template-columns:124px minmax(0,1fr) 54px;gap:8px;align-items:center;min-width:0;padding:0 4px;color:#344361;font-variant-numeric:tabular-nums}.combo-readout{display:flex;align-items:center;gap:3px;min-width:0;height:40px}#combo-number{display:block;width:68px;flex:0 0 68px;text-align:center;color:#fff;font-size:30px;line-height:32px;font-weight:900;text-shadow:0 2px 0 #586490;transform-origin:center}.combo-label{position:relative;display:grid;align-content:center;min-height:30px;color:#354166;font-size:9px;font-weight:900;line-height:13px}#combo-held{position:absolute;top:2px;right:-14px;width:13px;height:13px;color:#165e54}#combo-held svg{width:12px;height:12px;stroke-width:3}#combo-held[hidden]{display:none}.rhythm-hud.held .combo-label{color:#165e54}#fever-label{color:#972962;font-size:8px;line-height:11px}#fever-label[hidden]{display:none}.score-readout,.best-readout{min-width:0;display:grid;gap:1px;justify-items:end}.rhythm-hud small{font-weight:800}.score-readout small,.best-readout small{color:#384a70;font-size:8px;line-height:10px}.score-readout strong{max-width:100%;font-size:17px;font-weight:850;line-height:21px}.best-readout strong{font-size:18px;line-height:21px}.rhythm-hud[data-tier="1"] #combo-number{color:#fff094;text-shadow:0 2px 0 #8a6423}.rhythm-hud[data-tier="2"] #combo-number{color:#b7fff5;text-shadow:0 2px 0 #267575}.rhythm-hud[data-tier="3"] #combo-number,.rhythm-hud[data-tier="4"] #combo-number{color:#ffd1eb;text-shadow:0 2px 0 #92375f}.rhythm-hud[data-tier="4"] #fever-label{color:#8e174d;font-weight:900}.progress-track{height:4px;margin:0 3px;overflow:hidden;border-radius:2px;background:#ffffff52}.progress-track span{display:block;width:0;height:100%;background:#fff1a7;border-radius:inherit;transition:width .22s ease}.canvas-wrap{min-height:0;min-width:0;position:relative;overflow:hidden}#game-canvas{position:absolute;inset:0}#game-canvas canvas{display:block;max-width:100%;max-height:100%;touch-action:none}.view-controls{position:absolute;z-index:2;bottom:62px;left:50%;transform:translate(-50%);display:flex;gap:12px;height:30px}.view-button{position:relative;width:30px;height:30px;display:grid;place-items:center;padding:0;border-radius:50%;background:#f8faffdf;color:#495879;box-shadow:0 2px #7887ba}.view-button svg{width:17px;height:17px;stroke-width:2.3}.tool-dock{display:flex;align-items:center;justify-content:space-evenly;gap:12px;padding:3px 18px 6px}.tool-button{width:50px;height:50px;flex:0 0 auto;display:grid;place-items:center;padding:0;border-radius:50%;color:#334966;background:#f9fbff;border:2px solid #ffffffb3;box-shadow:0 4px #7a89bf;position:relative}.tool-button.primary{color:#604920;background:#ffe39b;border-color:#fff1c7;box-shadow:0 4px #b7924e}.tool-button:disabled{opacity:.4}.tool-button svg{width:25px;height:25px;stroke-width:2.3}@media(hover:hover){.tool-button:hover:after,.view-button:hover:after{content:attr(aria-label);position:absolute;z-index:5;bottom:calc(100% + 9px);left:50%;transform:translate(-50%);padding:5px 8px;border-radius:4px;color:#fff;background:#2a3652;font-size:11px;line-height:1.4;white-space:nowrap;pointer-events:none}.view-button:hover:after{bottom:calc(100% + 9px)}}.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#1e28477a;opacity:0;transition:opacity .16s ease}.modal-backdrop[hidden]{display:none}.modal-backdrop.visible{opacity:1}.modal-sheet{width:min(100%,420px);max-height:100%;overflow:auto;overscroll-behavior:contain;padding:22px;border-radius:8px;color:var(--ink);background:#fbfdff;box-shadow:0 14px 50px #24325255;transform:translateY(10px);transition:transform .16s ease}.visible .modal-sheet{transform:translateY(0)}.modal-sheet.compact,.modal-sheet.result{text-align:center}.modal-sheet h2{margin:5px 0 10px;font-size:23px;line-height:1.3;overflow-wrap:anywhere}.modal-sheet p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.6}.result-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 22px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.result-stats div{min-width:0;display:grid;gap:5px}.result-stats dt{color:#62708b;font-size:12px}.result-stats dd{margin:0;color:#345483;font-size:24px;line-height:1.2;font-weight:900;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.result-stats small{color:#7c879b;font-size:10px;overflow-wrap:anywhere}.modal-icon{width:54px;height:54px;display:grid;place-items:center;margin:0 auto 12px;border-radius:50%;color:var(--accent);background:#e9f1ff}.modal-icon.success{color:#28814e;background:#e6f5e8}.modal-icon.danger{color:var(--danger);background:#fff0f2}.modal-icon svg{width:28px;height:28px}.eyebrow{color:var(--accent);font-size:12px;font-weight:800}.modal-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.modal-heading h2{margin-bottom:0}.modal-heading .icon-button{box-shadow:none;background:#eaf0f8}.command-button,.secondary-button{min-width:0;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border-radius:8px;font-size:15px;font-weight:800}.command-button{color:#fff;background:var(--accent);box-shadow:0 3px #24558c}.secondary-button{color:#526684;background:#edf2f9}.command-button svg{width:19px;height:19px;flex:0 0 auto}.command-button:disabled{opacity:.45;box-shadow:none}.text-button{display:block;margin:14px auto 0;padding:10px 14px;color:#496082;background:transparent;font-weight:700}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.level-button{min-width:0;min-height:68px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:center;padding:9px;text-align:left;color:#415774;background:#edf2f8;border:1px solid transparent;border-radius:8px}.level-button.current{color:var(--accent-dark);background:#e4efff;border-color:#97b9e7}.level-button:disabled{opacity:.45}.level-number{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--accent);font-size:13px;font-weight:800}.level-copy{min-width:0;display:grid;gap:4px}.level-copy strong{min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level-copy small{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.level-art{display:block;width:40px;height:48px}.library-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:14px;border-bottom:1px solid var(--line)}.library-tabs button{min-width:0;height:40px;display:flex;gap:7px;align-items:center;justify-content:center;color:#64738a;background:transparent;border-bottom:2px solid transparent;font-size:13px;font-weight:750}.library-tabs button[aria-selected=true]{color:#236553;border-bottom-color:#319779}.library-tabs svg{width:17px;height:17px}.library-filters{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:0 0 14px}.variant-control{background:#e6edf4}.variant-control button.active{color:#1b6b57}.mode-caption{color:var(--muted);font-size:11px;white-space:nowrap}.collection-summary{display:flex;align-items:baseline;justify-content:space-between;padding:0 1px 14px;color:#47625b;font-size:12px}.collection-summary strong{color:#258167;font-size:22px}.collection-summary small{color:#7a8993;font-size:12px}.collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}.collection-item{min-width:0;display:grid;grid-template-rows:82px 18px 16px;gap:3px;padding:5px;border:1px solid #dfe7ea;border-radius:6px;color:#42546b;background:#f3f7f8;text-align:center}.collection-item canvas{display:block;width:100%;height:82px}.collection-item strong{font-size:11px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collection-item small{color:#7a8798;font-size:9px;line-height:16px}.artwork-sheet{text-align:center}.artwork-hero{display:block;width:min(100%,240px);height:180px;margin:0 auto 16px}.artwork-sheet .variant-control{display:flex;width:min(100%,240px);margin:0 auto}.artwork-sheet .variant-control button{flex:1}.collection-modes{display:flex;justify-content:center;gap:18px;margin:12px 0}.collection-modes button{min-height:30px;padding:4px 10px;color:#77859a;font-size:12px;font-weight:700;background:transparent;border-bottom:2px solid transparent}.collection-modes button.active{color:#236b59;border-bottom-color:#3c9c80}.artwork-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--line)}.artwork-stats div{min-width:0;padding:12px 4px;border-bottom:1px solid var(--line)}.artwork-stats dt{font-size:11px;color:var(--muted)}.artwork-stats dd{margin:5px 0 0;font-size:20px;line-height:25px;color:#345e62;font-weight:800;overflow-wrap:anywhere}.legacy-label{display:block;margin-top:12px;color:#838ba0;font-size:11px}.result-art{display:block;width:116px;height:96px;margin:0 auto 12px}.result-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:0 10px}.result-actions .text-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;margin:12px 0 0;padding:8px 4px;font-size:12px}.result-actions svg{width:15px;height:15px;flex:0 0 auto}.setting-row{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}.setting-row strong{font-size:14px}.setting-row input{width:24px;height:24px;margin:0 2px;flex:0 0 auto;accent-color:var(--accent)}.full-width{width:100%;margin-top:20px}.version{display:block;margin-top:16px;text-align:center;color:#929cad;font-size:10px}.modal-sheet .storage-warning{margin:12px 0 0;color:#a34236;font-size:12px}.install-sheet ol{display:grid;gap:10px;margin:0 0 18px;padding-left:24px;color:#4a5f80;font-size:14px;line-height:1.5}.install-sheet .install-note{padding:10px 12px;border-left:3px solid #ebbd47;background:#fff9e7;color:#78602d;font-size:12px}@media(max-height:640px){.game-shell{grid-template-rows:40px 32px 40px 3px minmax(0,1fr) 52px;gap:3px;padding-top:max(3px,env(safe-area-inset-top));padding-bottom:max(5px,env(safe-area-inset-bottom))}.tool-button{width:43px;height:43px}.tool-button svg{width:23px;height:23px}.tool-dock{padding-bottom:5px}.modal-sheet{padding:18px}.artwork-hero{height:120px;margin-bottom:10px}.artwork-stats div{padding:8px 4px}.artwork-stats dd{margin-top:3px}}@media(max-width:350px){.game-shell{padding-left:7px;padding-right:7px}.topbar{gap:4px;grid-template-columns:34px minmax(0,1fr) auto auto}.icon-button{width:32px;height:32px}.brand-lockup strong{font-size:16px}.brand-lockup span{font-size:10px}.timer{font-size:11px;gap:3px}.timer span{min-width:35px}.timer svg{width:13px;height:13px}.level-button{grid-template-columns:28px minmax(0,1fr);gap:5px;padding:6px}.level-art{width:28px;height:42px}.level-copy strong{font-size:11px}.level-copy small{font-size:9px}.collection-grid{gap:8px 5px}.collection-item{padding:4px 2px;grid-template-rows:66px 18px 16px}.collection-item canvas{height:66px}.collection-item strong{font-size:10px}.result-art{width:90px;height:74px;margin-bottom:8px}.level-number{width:26px;height:26px}.rhythm-hud{grid-template-columns:116px minmax(0,1fr) 44px;gap:6px;padding:0 2px}.score-readout strong{font-size:15px}.result-stats dd{font-size:21px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}.lb-top3{margin-top:10px;font-size:12.5px;font-weight:600;color:#5e6d82;background:#f2f6f9;border:1px dashed #d8e2ea;border-radius:10px;padding:7px 12px;text-align:center}.lb-badge{margin-top:4px;font-size:10.5px;font-weight:600;letter-spacing:.3px;color:#ffffffb8;background:#ffffff1f;border-radius:999px;padding:2px 10px;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-badge.on{color:#ffe9a8;background:#00000038}