:root{--md-sys-color-primary: var(--accent-primary);--md-sys-color-on-primary: #ffffff;--md-sys-color-primary-container: var(--bg-tertiary);--md-sys-color-on-primary-container: var(--text-primary);--md-sys-color-secondary: var(--accent-secondary);--md-sys-color-on-secondary: var(--text-primary);--md-sys-color-surface: var(--bg-secondary);--md-sys-color-on-surface: var(--text-primary);--md-sys-color-surface-variant: var(--bg-tertiary);--md-sys-color-on-surface-variant: var(--text-secondary);--md-sys-color-surface-container-low: var(--bg-secondary);--md-sys-color-surface-container: var(--bg-tertiary);--md-sys-color-surface-container-high: var(--bg-primary);--md-sys-color-outline: color-mix(in srgb, var(--text-secondary) 60%, transparent);--md-sys-color-outline-variant: color-mix(in srgb, var(--border-color) 70%, transparent);--md-sys-color-scrim: rgba(0, 0, 0, .6);--md-sys-typescale-title-large-size: 1.125rem;--md-sys-typescale-title-large-weight: 600;--md-sys-typescale-title-medium-size: .95rem;--md-sys-typescale-title-medium-weight: 600;--md-sys-typescale-label-large-size: .875rem;--md-sys-typescale-label-large-weight: 500;--md-sys-typescale-label-medium-size: .75rem;--md-sys-typescale-label-medium-weight: 600;--md-sys-shape-corner-extra-small: 6px;--md-sys-shape-corner-small: 10px;--md-sys-shape-corner-medium: 14px;--md-sys-shape-corner-large: 20px;--md-sys-motion-easing-standard: cubic-bezier(.2, 0, 0, 1);--md-sys-motion-duration-medium: .25s}.m3-canary .header{background:var(--md-sys-color-surface-container);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium);padding:.6rem .75rem;box-shadow:0 1px #0003}.m3-canary .title{font-size:var(--md-sys-typescale-title-large-size);font-weight:var(--md-sys-typescale-title-large-weight);letter-spacing:.01em}.m3-canary .btn{font-size:var(--md-sys-typescale-label-large-size);font-weight:var(--md-sys-typescale-label-large-weight);padding:.55rem .9rem;border-radius:var(--md-sys-shape-corner-small);background:var(--md-sys-color-surface-container);border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface);transition:background var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),border-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard)}.m3-canary .btn:hover:not(:disabled){background:var(--md-sys-color-surface-variant);border-color:var(--md-sys-color-outline)}.m3-canary .btn:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.m3-canary .btn-primary{background:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);box-shadow:0 6px 12px #0000002e}.m3-canary .btn-primary:hover:not(:disabled){background:var(--md-sys-color-secondary);border-color:var(--md-sys-color-secondary)}.m3-canary .btn-icon{min-width:2.75rem}.m3-canary .dropdown{font-size:var(--md-sys-typescale-label-large-size);font-weight:var(--md-sys-typescale-label-large-weight);min-height:2.5rem;padding:.5rem .75rem;border-radius:var(--md-sys-shape-corner-small);border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface)}.m3-canary .dropdown:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.m3-canary .drawer-backdrop{background:var(--md-sys-color-scrim)}.m3-canary .drawer{background:var(--md-sys-color-surface-container-low);border-left:1px solid var(--md-sys-color-outline-variant);border-top-left-radius:var(--md-sys-shape-corner-large);border-bottom-left-radius:var(--md-sys-shape-corner-large);box-shadow:-18px 0 36px #00000059}.m3-canary .drawer-title{font-size:var(--md-sys-typescale-title-medium-size);font-weight:var(--md-sys-typescale-title-medium-weight)}.m3-canary .drawer-section{background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium)}.m3-canary .drawer-section-title{font-size:var(--md-sys-typescale-label-medium-size);font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:.12em;color:var(--md-sys-color-on-surface-variant)}.m3-canary .drawer-row label{font-size:var(--md-sys-typescale-label-large-size);font-weight:var(--md-sys-typescale-label-large-weight)}.m3-canary .drawer-help{color:var(--md-sys-color-on-surface-variant)}.m3-canary .drawer-footer{border-top:1px solid var(--md-sys-color-outline-variant)}.m3-canary .drawer-footer .version-badge{color:var(--md-sys-color-on-surface-variant)}.m3-canary .card{background:var(--md-sys-color-surface-container);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium)}.m3-canary .card-header{font-size:var(--md-sys-typescale-label-large-size);font-weight:var(--md-sys-typescale-label-large-weight)}.m3-canary .toggle{width:2.875rem;height:1.5rem}.m3-canary .toggle-slider{background:var(--md-sys-color-surface-variant);transition:background var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard)}.m3-canary .toggle-slider:before{left:.1875rem;top:.1875rem;width:1.125rem;height:1.125rem;background:var(--md-sys-color-outline);transition:transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),background var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard)}.m3-canary .toggle input:checked+.toggle-slider{background:var(--md-sys-color-primary)}.m3-canary .toggle input:checked+.toggle-slider:before{transform:translate(1.375rem);background:var(--md-sys-color-on-primary)}.m3-canary .modal{background:var(--md-sys-color-scrim)}.m3-canary .modal-content{background:var(--md-sys-color-surface-container-high);border-radius:var(--md-sys-shape-corner-large);box-shadow:0 16px 36px #00000059}.m3-canary .modal-content h2{font-size:1.4rem}.m3-canary .modal-score{color:var(--md-sys-color-primary)}.home-view{display:none;flex-direction:column;align-items:center;max-width:420px;width:100%;margin:0 auto;padding:clamp(.5rem,2dvh,1rem) 1.25rem 0;flex:1;min-height:0;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;position:relative;isolation:isolate}.home-ambient-lattice{position:absolute;top:clamp(.75rem,3dvh,2rem);left:50%;transform:translate(-50%);width:300px;height:300px;display:grid;grid-template-columns:repeat(9,28px);grid-template-rows:repeat(9,28px);gap:6px;opacity:.4;pointer-events:none;z-index:-1;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,rgba(0,0,0,.55) 62%,transparent 96%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,rgba(0,0,0,.55) 62%,transparent 96%)}.home-ambient-lattice .lattice-cell{border-radius:3px;box-sizing:border-box}[data-family=dark] .home-ambient-lattice .lattice-cell{background-color:#ffffff0a;border:1px solid rgba(255,255,255,.06)}[data-family=light] .home-ambient-lattice .lattice-cell{background-color:#1d24330d;border:1px solid rgba(29,36,51,.1)}@media(max-width:359px){.home-ambient-lattice{width:256px;height:256px;grid-template-columns:repeat(9,24px);grid-template-rows:repeat(9,24px);gap:5px}}.home-ambient-lattice .lattice-cell.alive{background-color:var(--ambient-color, transparent);border-color:transparent;box-shadow:0 0 5px var(--ambient-color-glow, rgba(0, 0, 0, 0));opacity:.35;animation:home-lattice-appear 1.2s ease-out}.home-ambient-lattice .lattice-cell.clearing{background-color:var(--ambient-color, transparent);border-color:transparent;box-shadow:0 0 5px var(--ambient-color-glow, rgba(0, 0, 0, 0));animation:home-lattice-clear 1.6s cubic-bezier(.4,0,.2,1) forwards}@keyframes home-lattice-appear{0%{opacity:0}to{opacity:.35}}@keyframes home-lattice-clear{0%{opacity:.35;filter:brightness(1)}35%{opacity:.65;filter:brightness(1.25)}to{opacity:0;filter:brightness(1)}}@media(prefers-reduced-motion:reduce){.home-ambient-lattice .lattice-cell.alive,.home-ambient-lattice .lattice-cell.clearing{animation:none}.home-ambient-lattice .lattice-cell.alive.static-only{opacity:.35;background-color:var(--ambient-color, transparent)}}.home-title{width:100%;text-align:center;padding-top:clamp(.75rem,3dvh,2rem)}.home-title h1{font-size:1.5rem;font-weight:600;letter-spacing:.02em;color:var(--text-primary, #eaf2ff);margin:0}.home-mascot{display:block;width:60px;height:auto;margin:0 auto .25rem;filter:drop-shadow(0 1px 4px rgba(0,0,0,.3))}.home-status-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:9999px;background:var(--pill-surface, var(--bg-secondary, #121a24));border:1px solid var(--pill-border, var(--border-color, #2a3a4f));cursor:pointer;touch-action:manipulation;margin:clamp(1rem,2.5dvh,1.75rem) 0;font-size:.875rem;color:var(--text-primary, #eaf2ff);transition:background .15s ease}.home-status-chip:active{background:var(--bg-tertiary, #1a2533)}.chip-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--accent-primary, var(--text-secondary, #9fb3c8))}.home-primary-action{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.home-primary-action--resume{flex-direction:row;gap:.5rem}.home-primary-action--resume .btn-primary-action{flex:3}.home-primary-action--resume .btn-secondary-action{flex:2;height:56px}.btn-primary-action{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:56px;border-radius:9999px;background:linear-gradient(152deg,var(--piece-hero-highlight) 0%,var(--piece-hero-base) 42%,var(--piece-hero-shadow) 100%);color:#fff;font-size:1.125rem;font-weight:500;border:none;cursor:pointer;touch-action:manipulation;transition:opacity .15s ease,transform .1s ease}[data-family=dark] .btn-primary-action{box-shadow:inset 0 1px #ffffff38,inset 0 -2px 4px -1px #00000047,0 4px 12px var(--piece-hero-glow)}[data-family=light] .btn-primary-action{box-shadow:inset 0 1px #ffffff4d,inset 0 -2px 4px -1px #00000029,0 4px 12px var(--piece-hero-glow-light)}.btn-primary-action:active{opacity:.85;transform:scale(.98)}.btn-label-row{display:inline-flex;align-items:center;gap:.375rem}.btn-label-row .btn-icon{font-size:.75rem;line-height:1;min-width:0}.btn-secondary-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.25rem 1.25rem;border-radius:9999px;background:var(--bg-tertiary, #1a2533);color:var(--text-primary, #eaf2ff);font-size:.875rem;font-weight:500;border:1px solid var(--border-color, #2a3a4f);cursor:pointer;touch-action:manipulation;transition:opacity .15s ease}.btn-secondary-action:active{opacity:.8}.btn-secondary-action[hidden]{display:none}.home-spacer{flex:1;min-height:clamp(16px,3dvh,28px);max-height:clamp(40px,8dvh,96px)}.home-spacer-grow{flex:2;min-height:.5rem;max-height:clamp(2rem,6dvh,4rem)}.home-config-area{width:100%;display:flex;flex-direction:column;gap:clamp(10px,2dvh,18px)}.home-config-row{display:flex;align-items:center;gap:10px}.home-config-row[hidden]{display:none}.config-row-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary, #b9c6d9);flex-shrink:0;min-width:66px}.mode-options,.difficulty-options{display:flex;flex-direction:row;gap:6px;flex:1}.mode-option,.difficulty-option,.audio-mode-segment{display:flex;align-items:center;justify-content:center;flex:1;min-height:48px;padding:0 .75rem;border-radius:9999px;background:var(--pill-surface, var(--bg-secondary, #121a24));color:var(--text-primary, #eaf2ff);font-size:.9375rem;font-weight:500;border:1px solid var(--pill-border, var(--border-color, #2a3a4f));cursor:pointer;touch-action:manipulation;transition:background .15s ease,color .15s ease,border-color .15s ease}.mode-option[aria-checked=true],.difficulty-option[aria-checked=true],.audio-mode-segment[aria-checked=true]{background:linear-gradient(148deg,var(--piece-hero-highlight) 0%,var(--piece-hero-base) 42%,var(--piece-hero-shadow) 100%);color:#fff;border:1px solid transparent}[data-family=dark] .mode-option[aria-checked=true],[data-family=dark] .difficulty-option[aria-checked=true],[data-family=dark] .audio-mode-segment[aria-checked=true]{box-shadow:inset 0 1px #ffffff38,inset 0 -2px 4px -1px #00000040,0 2px 6px var(--piece-hero-glow)}[data-family=light] .mode-option[aria-checked=true],[data-family=light] .difficulty-option[aria-checked=true],[data-family=light] .audio-mode-segment[aria-checked=true]{box-shadow:inset 0 1px #ffffff4d,inset 0 -2px 4px -1px #0000001f,0 2px 5px var(--piece-hero-glow)}.mode-option:active,.difficulty-option:active,.audio-mode-segment:active{opacity:.85}.mode-option:focus-visible,.difficulty-option:focus-visible,.audio-mode-segment:focus-visible{outline:2px solid var(--text-primary, #eaf2ff);outline-offset:2px}.home-config-row.config-row--locked .mode-option,.home-config-row.config-row--locked .difficulty-option{opacity:.4;pointer-events:none}.home-config-note{margin:0;font-size:.75rem;line-height:1.35;color:var(--text-secondary, #b9c6d9);font-style:italic}.quick-match-card{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;text-align:left;min-height:56px;padding:10px 16px;border-radius:12px;background:var(--pill-surface, var(--bg-secondary, #121a24));color:var(--text-primary, #eaf2ff);border:1px solid var(--pill-border, var(--border-color, #2a3a4f));cursor:pointer;touch-action:manipulation;font-family:inherit;transition:background .15s ease,color .15s ease,border-color .15s ease}.quick-match-card[hidden]{display:none}.quick-match-card-text{display:flex;flex-direction:column;gap:2px;min-width:0}.quick-match-card-title{font-size:.9375rem;font-weight:600}.quick-match-card-sub{font-size:.75rem;color:var(--text-secondary, #b9c6d9)}.quick-match-card-state:after{content:"Off";font-size:.75rem;font-weight:600;opacity:.7;flex-shrink:0}.quick-match-card--active{background:linear-gradient(148deg,var(--piece-hero-highlight) 0%,var(--piece-hero-base) 42%,var(--piece-hero-shadow) 100%);color:#fff;border:1px solid transparent}.quick-match-card--active .quick-match-card-sub{color:#ffffffd9}.quick-match-card--active .quick-match-card-state:after{content:"On";opacity:1}[data-family=dark] .quick-match-card--active{box-shadow:inset 0 1px #ffffff38,inset 0 -2px 4px -1px #00000040,0 2px 6px var(--piece-hero-glow)}[data-family=light] .quick-match-card--active{box-shadow:inset 0 1px #ffffff4d,inset 0 -2px 4px -1px #0000001f,0 2px 5px var(--piece-hero-glow)}.quick-match-card:active{opacity:.9}.quick-match-card:focus-visible{outline:2px solid var(--text-primary, #eaf2ff);outline-offset:2px}.today-twist-card{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;text-align:left;min-height:56px;padding:10px 16px;border-radius:12px;background:var(--pill-surface, var(--bg-secondary, #121a24));color:var(--text-primary, #eaf2ff);border:1px solid var(--pill-border, var(--border-color, #2a3a4f));cursor:pointer;touch-action:manipulation;font-family:inherit;transition:background .15s ease,color .15s ease,border-color .15s ease}.today-twist-card[hidden]{display:none}.today-twist-card-text{display:flex;flex-direction:column;gap:2px;min-width:0}.today-twist-card-title{font-size:.9375rem;font-weight:600}.today-twist-card-sub{font-size:.75rem;color:var(--text-secondary, #b9c6d9)}.today-twist-card-best{font-size:.75rem;font-weight:600;color:var(--text-secondary, #b9c6d9);opacity:.85;flex-shrink:0;white-space:nowrap}.today-twist-card:active{opacity:.9}.today-twist-card:focus-visible{outline:2px solid var(--text-primary, #eaf2ff);outline-offset:2px}.home-musical-card{width:100%;padding:12px 16px;border-radius:12px;box-sizing:border-box;transition:opacity .2s}.home-musical-card[data-sound-off]{opacity:.4}.audio-mode-segments{display:flex;gap:6px;margin-bottom:10px}.musical-pack-link{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:.8125rem;color:var(--piece-hero-base, #4cc9f0);touch-action:manipulation;min-height:44px}[data-family=dark] .musical-pack-link{color:var(--mist-tint)}.musical-note{flex-shrink:0;font-size:.8125rem}.musical-waveform{flex-shrink:0}.home-musical-card[data-audio-mode=game-sounds] .musical-note,.home-musical-card[data-audio-mode=music] .musical-waveform{display:none}.musical-pack-link #musical-pack-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.musical-chevron{flex-shrink:0;font-size:.875rem;line-height:1}.build-stamp{display:none;font-size:.6875rem;color:var(--text-secondary);text-align:center;width:100%;margin-top:auto;flex-shrink:0}body.debug-enabled .build-stamp{display:block}.home-bottom-actions{display:flex;flex-direction:row;justify-content:center;align-items:flex-end;gap:2rem;flex-shrink:0;width:100%;padding:.5rem 0 calc(.75rem + env(safe-area-inset-bottom,0px));margin-top:auto;position:sticky;bottom:0;background:transparent}.icon-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:44px;min-height:44px;justify-content:center;background:none;border:none;cursor:pointer;touch-action:manipulation;padding:.25rem;color:var(--text-secondary, #b9c6d9);transition:color .15s ease}.icon-btn:active{opacity:.7}.icon-btn .icon{font-size:1.375rem;line-height:1}.icon-btn .nav-icon{width:22px;height:22px}.score-bar-btn .nav-icon{width:18px;height:18px}.icon-label{font-size:.6875rem;font-weight:500;color:var(--text-secondary, #b9c6d9)}.score-bar-right{display:flex;align-items:center;gap:4px;flex-shrink:0}.score-bar-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;cursor:pointer;font-size:1.35rem;color:var(--text-secondary, #8899aa);touch-action:manipulation;border-radius:8px;transition:background .15s ease}.score-bar-btn:active{background:var(--bg-tertiary, #1a2533)}.back-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;cursor:pointer;font-size:1.5rem;color:var(--text-primary, #eaf2ff);touch-action:manipulation;border-radius:8px;transition:background .15s ease}.back-btn:active{background:var(--bg-tertiary, #1a2533)}.btn-secondary{background:var(--bg-tertiary, #1a2533);color:var(--text-primary, #eaf2ff);border:1px solid var(--border-color, #2a3a4f)}.btn-secondary:hover{opacity:.85}@media(orientation:portrait)and (min-width:600px){body[data-page=home] .home-view{max-width:clamp(420px,70vw,600px)}body[data-page=home] .home-title h1{font-size:clamp(1.5rem,3.7vw,2rem)}body[data-page=home] .home-status-chip{font-size:clamp(.875rem,2.1vw,1.125rem);padding:clamp(.5rem,1.2vw,.65rem) clamp(1rem,2.4vw,1.3rem)}body[data-page=home] .chip-icon{font-size:clamp(1rem,2.3vw,1.25rem)}body[data-page=home] .home-primary-action{gap:clamp(.5rem,1.2vw,.65rem)}body[data-page=home] .btn-primary-action{height:clamp(56px,8.4vw,72px);font-size:clamp(1.125rem,2.7vw,1.4375rem)}body[data-page=home] .home-primary-action--resume .btn-secondary-action{height:clamp(56px,8.4vw,72px)}body[data-page=home] .btn-secondary-action{min-height:clamp(44px,6.5vw,56px);font-size:clamp(.875rem,2.1vw,1.125rem);padding:.25rem clamp(1.25rem,3vw,1.6rem)}body[data-page=home] .btn-label-row{gap:clamp(.375rem,1vw,.5rem)}body[data-page=home] .btn-label-row .btn-icon{font-size:clamp(.75rem,1.8vw,.95rem)}body[data-page=home] .home-config-area{gap:clamp(18px,2.6vw,24px)}body[data-page=home] .home-config-row{gap:clamp(10px,1.6vw,14px)}body[data-page=home] .config-row-label{font-size:clamp(.75rem,1.75vw,.9375rem);min-width:clamp(66px,9.8vw,84px)}body[data-page=home] .mode-options,body[data-page=home] .difficulty-options{gap:clamp(6px,1vw,8px)}body[data-page=home] .mode-option,body[data-page=home] .difficulty-option,body[data-page=home] .audio-mode-segment{min-height:clamp(48px,7vw,60px);font-size:clamp(.9375rem,2.2vw,1.1875rem);padding:0 clamp(.75rem,1.9vw,1rem)}body[data-page=home] .home-config-note{font-size:clamp(.75rem,1.75vw,.9375rem)}body[data-page=home] .quick-match-card{min-height:clamp(56px,8.1vw,70px);padding:clamp(10px,1.6vw,13px) clamp(16px,2.6vw,22px)}body[data-page=home] .quick-match-card-title{font-size:clamp(.9375rem,2.2vw,1.1875rem)}body[data-page=home] .quick-match-card-sub,body[data-page=home] .quick-match-card-state:after{font-size:clamp(.75rem,1.75vw,.9375rem)}body[data-page=home] .home-musical-card{padding:clamp(12px,1.9vw,16px) clamp(16px,2.6vw,22px)}body[data-page=home] .audio-mode-segments{gap:clamp(6px,1vw,8px);margin-bottom:clamp(10px,1.6vw,14px)}body[data-page=home] .musical-pack-link{font-size:clamp(.8125rem,1.9vw,1rem);min-height:clamp(44px,6.5vw,56px)}body[data-page=home] .musical-note{font-size:clamp(.8125rem,1.9vw,1rem)}body[data-page=home] .musical-chevron{font-size:clamp(.875rem,2vw,1.1rem)}body[data-page=home] .musical-waveform{width:clamp(14px,2vw,18px);height:clamp(14px,2vw,18px)}body[data-page=home] .home-bottom-actions{gap:clamp(2rem,5vw,2.75rem)}body[data-page=home] .icon-btn .icon{font-size:clamp(1.375rem,3.3vw,1.75rem)}body[data-page=home] .icon-btn .nav-icon{width:clamp(22px,3.3vw,28px);height:clamp(22px,3.3vw,28px)}body[data-page=home] .icon-label{font-size:clamp(.6875rem,1.6vw,.875rem)}body[data-page=home] .home-spacer{max-height:clamp(96px,14dvh,200px)}body[data-page=home] .home-spacer-grow{max-height:clamp(64px,10dvh,170px)}}.sounds-view{display:none;flex-direction:column;height:100vh;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;color:var(--text-primary);padding:0 20px env(safe-area-inset-bottom)}body[data-page=sounds] .sounds-view{display:flex}.sounds-nav{display:flex;align-items:center;min-height:48px;padding:8px 0;position:relative;flex-shrink:0}.sounds-nav .back-btn{color:var(--text-secondary);padding:8px 0;min-width:44px;min-height:44px}.sounds-nav h2{font-size:17px;font-weight:600;margin:0;margin-right:.5rem}.sounds-nav-spacer{flex:1}.audio-mode-selector{padding:8px 0 4px}.audio-mode-chips{display:flex}.audio-mode-chips .mode-chip{flex:1;height:44px;border:1px solid var(--board-border, #c7d2e0);border-radius:0;background:var(--pill-surface, var(--bg-secondary, #eef2f7));color:var(--text-primary);font-size:15px;font-weight:500;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}.audio-mode-chips .mode-chip:first-child{border-radius:12px 0 0 12px}.audio-mode-chips .mode-chip+.mode-chip{border-left:none}.audio-mode-chips .mode-chip:last-child{border-radius:0 12px 12px 0}.audio-mode-chips .mode-chip[aria-checked=true]{background:linear-gradient(148deg,var(--piece-hero-highlight) 0%,var(--piece-hero-base) 42%,var(--piece-hero-shadow) 100%);color:#fff;border-color:transparent}[data-family=dark] .audio-mode-chips .mode-chip[aria-checked=true]{box-shadow:inset 0 1px #ffffff38,inset 0 -2px 4px -1px #00000040,0 2px 6px var(--piece-hero-glow)}[data-family=light] .audio-mode-chips .mode-chip[aria-checked=true]{box-shadow:inset 0 1px #ffffff4d,inset 0 -2px 4px -1px #0000001f,0 2px 5px var(--piece-hero-glow)}.audio-mode-intro{font-size:14px;font-style:italic;line-height:1.4;color:var(--text-secondary);margin:0 0 12px}.sounds-content-area{flex:1;padding-bottom:24px}.pack-card{display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:8px;background:var(--pill-surface, var(--bg-secondary, #eef2f7));border:1px solid var(--board-border, #c7d2e0);border-radius:12px;cursor:pointer;min-height:44px;transition:background-color .15s}.pack-card:not(:has(.pack-meta)){padding-top:8px;padding-bottom:8px;margin-bottom:6px}.pack-card[aria-checked=true]{border-color:var(--accent-primary, #2563eb);background:color-mix(in srgb,var(--accent-primary, #2563eb) 8%,var(--pill-surface, var(--bg-secondary, #eef2f7)))}.pack-icon{font-size:18px;color:var(--text-secondary);flex-shrink:0;width:24px;text-align:center}.pack-info{flex:1;min-width:0}.pack-name{display:block;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pack-meta{display:block;font-size:13px;color:var(--text-secondary)}.pack-check{color:var(--accent-primary, #2563eb);font-size:16px;font-weight:600;flex-shrink:0}.audition-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--board-border, #c7d2e0);background:var(--bg-primary);color:var(--text-secondary);font-size:14px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s}.audition-btn:disabled{opacity:.4;cursor:default}.audition-btn.playing{background:var(--accent-primary, #2563eb);color:#fff;border-color:var(--accent-primary, #2563eb)}.pack-category-section{margin-top:12px}.pack-category-section:first-child{margin-top:4px}.pack-category-header{display:flex;align-items:center;width:100%;padding:10px 4px;border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.pack-category-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary)}.pack-category-count{font-size:11px;font-weight:600;color:var(--text-secondary);opacity:.6;margin-left:6px}.pack-category-chevron{margin-left:auto;font-size:14px;color:var(--text-secondary);transition:transform .2s ease}.pack-category-section.expanded .pack-category-chevron{transform:rotate(90deg)}.pack-category-preview{display:block}.pack-category-body{max-height:0;overflow:hidden;transition:max-height .25s ease}.pack-category-section.expanded .pack-category-body{max-height:2000px;transition:max-height .35s ease}.pack-category-toggle{display:block;width:100%;padding:10px 4px;border:none;background:none;font-size:13px;font-weight:600;color:var(--accent-primary, #2563eb);cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}.instrument-selector-slot{display:flex;align-items:center;justify-content:space-between;padding:8px 0 12px;gap:12px}.instrument-selector-slot[hidden]{display:none}.instrument-selector-slot label{font-size:15px;font-weight:500;color:var(--text-primary)}.instrument-selector-slot select{flex:1;max-width:220px;height:40px;padding:0 12px;border:1px solid var(--board-border, #c7d2e0);border-radius:8px;background:var(--bg-secondary, #eef2f7);color:var(--text-primary);font-size:14px;cursor:pointer}.sounds-view[data-sound-off] .audio-mode-selector,.sounds-view[data-sound-off] .instrument-selector-slot,.sounds-view[data-sound-off] .sounds-content-area{opacity:.4;pointer-events:none}@media(orientation:portrait)and (min-width:600px){body[data-page=sounds] .sounds-view{max-width:clamp(540px,90vw,560px);margin-inline:auto}body[data-page=sounds] .sounds-nav h2{font-size:clamp(17px,2.57vw,22.1px)}body[data-page=sounds] .sounds-nav .back-btn{font-size:clamp(1.5rem,3.63vw,1.95rem);min-width:clamp(44px,6.65vw,57.2px);min-height:clamp(44px,6.65vw,57.2px);padding-block:clamp(8px,1.21vw,10.4px)}body[data-page=sounds] .audio-mode-chips .mode-chip{height:clamp(44px,6.65vw,57.2px);font-size:clamp(15px,2.27vw,19.5px)}body[data-page=sounds] .audio-mode-chips .mode-chip:first-child{border-radius:clamp(12px,1.81vw,15.6px) 0 0 clamp(12px,1.81vw,15.6px)}body[data-page=sounds] .audio-mode-chips .mode-chip:last-child{border-radius:0 clamp(12px,1.81vw,15.6px) clamp(12px,1.81vw,15.6px) 0}body[data-page=sounds] .audio-mode-intro{font-size:clamp(14px,2.12vw,18.2px)}body[data-page=sounds] .pack-card{min-height:clamp(44px,6.65vw,57.2px);gap:clamp(12px,1.81vw,15.6px);padding:clamp(12px,1.81vw,15.6px) clamp(16px,2.42vw,20.8px);margin-bottom:clamp(8px,1.21vw,10.4px);border-radius:clamp(12px,1.81vw,15.6px)}body[data-page=sounds] .pack-card:not(:has(.pack-meta)){padding-top:clamp(8px,1.21vw,10.4px);padding-bottom:clamp(8px,1.21vw,10.4px);margin-bottom:clamp(6px,.91vw,7.8px)}body[data-page=sounds] .pack-icon{font-size:clamp(18px,2.72vw,23.4px);width:clamp(24px,3.63vw,31.2px)}body[data-page=sounds] .pack-name{font-size:clamp(15px,2.27vw,19.5px)}body[data-page=sounds] .pack-meta{font-size:clamp(13px,1.96vw,16.9px)}body[data-page=sounds] .pack-check{font-size:clamp(16px,2.42vw,20.8px)}body[data-page=sounds] .audition-btn{width:clamp(36px,5.44vw,46.8px);height:clamp(36px,5.44vw,46.8px);font-size:clamp(14px,2.12vw,18.2px)}body[data-page=sounds] .pack-category-header{padding:clamp(10px,1.51vw,13px) clamp(4px,.6vw,5.2px)}body[data-page=sounds] .pack-category-label,body[data-page=sounds] .pack-category-count{font-size:clamp(11px,1.66vw,14.3px)}body[data-page=sounds] .pack-category-chevron{font-size:clamp(14px,2.12vw,18.2px)}body[data-page=sounds] .pack-category-toggle{font-size:clamp(13px,1.96vw,16.9px);padding:clamp(10px,1.51vw,13px) clamp(4px,.6vw,5.2px)}body[data-page=sounds] .instrument-selector-slot{gap:clamp(12px,1.81vw,15.6px)}body[data-page=sounds] .instrument-selector-slot label{font-size:clamp(15px,2.27vw,19.5px)}body[data-page=sounds] .instrument-selector-slot select{height:clamp(40px,6.05vw,52px);max-width:clamp(220px,33.3vw,286px);font-size:clamp(14px,2.12vw,18.2px);padding:0 clamp(12px,1.81vw,15.6px)}}.help-view{display:none;flex-direction:column;flex:1;min-height:0;overflow:hidden;color:var(--text-primary);padding:0 calc(20px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(20px + env(safe-area-inset-left))}.help-view-header{display:flex;align-items:center;min-height:48px;padding:8px 0;position:relative;flex-shrink:0}.help-view-header .settings-pill{margin-left:auto}.help-view-header .back-btn{background:none;border:none;color:var(--text-secondary);font-size:1.5rem;padding:8px 0;cursor:pointer;min-width:44px;min-height:44px;display:flex;align-items:center}.help-view-header h2{position:absolute;left:50%;transform:translate(-50%);margin:0;font-size:1.1rem;font-weight:600;white-space:nowrap}.help-toolbar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:4px 0 10px;border-bottom:1px solid var(--border-color, rgba(128, 128, 128, .18))}.help-topic-count{font-size:.69rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:color-mix(in srgb,var(--text-secondary) 62%,transparent)}.help-expand-all{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;background:none;border:none;border-radius:8px;color:var(--accent-primary, var(--text-secondary));cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.help-expand-all:active{opacity:.6}[data-family=dark] .help-expand-all{color:var(--mist-tint)}.help-topic-list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 0 24px}.help-topic+.help-topic{border-top:1px solid var(--border-color, rgba(128, 128, 128, .14))}.help-topic-row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 2px;background:none;border:none;text-align:left;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.help-topic-tile{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;color:var(--accent-primary, var(--text-secondary));background:color-mix(in srgb,var(--accent-primary, #888) 12%,transparent);transition:background .18s ease,color .18s ease}[data-family=dark] .help-topic-tile{color:var(--mist-tint)}.help-topic.is-open .help-topic-tile{color:#fff;background:linear-gradient(148deg,var(--piece-hero-highlight, var(--accent-primary, #888)) 0%,var(--piece-hero-base, var(--accent-primary, #888)) 42%,var(--piece-hero-shadow, var(--accent-primary, #555)) 100%)}.help-topic-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}.help-topic-title{font-size:.97rem;font-weight:650;line-height:1.25;color:var(--text-primary)}.help-topic-preview{font-size:.78rem;line-height:1.3;color:var(--text-secondary);overflow:hidden;max-height:1.5em;transition:max-height .18s ease,opacity .16s ease}.help-topic.is-open .help-topic-preview{max-height:0;opacity:0}.help-topic-caret{flex:0 0 auto;display:flex;align-items:center;color:color-mix(in srgb,var(--text-secondary) 62%,transparent);transition:transform .18s ease,color .18s ease}.help-topic.is-open .help-topic-caret{transform:rotate(180deg);color:var(--accent-primary, var(--text-secondary))}[data-family=dark] .help-topic.is-open .help-topic-caret{color:var(--mist-tint)}.help-topic-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.22,.61,.36,1)}.help-topic.is-open .help-topic-body{grid-template-rows:1fr}.help-topic-body-inner{overflow:hidden;min-height:0}.help-topic-body-content{padding:0 2px 18px}.help-body-para{font-size:.88rem;line-height:1.5;color:var(--text-secondary);margin:0 0 10px}@media(prefers-reduced-motion:reduce){.help-topic-body,.help-topic-preview,.help-topic-caret,.help-topic-tile{transition:none}}.help-accent{color:var(--accent-primary, var(--text-primary));font-weight:600}[data-family=dark] .help-accent{color:var(--mist-tint)}.help-diagram-caption{text-align:center;font-style:italic;font-size:.85rem;color:var(--accent-primary, var(--text-secondary));margin:-4px 0 14px}[data-family=dark] .help-diagram-caption{color:var(--mist-tint)}.help-callout{margin:10px 0 4px;padding:10px 12px;border-radius:12px;background:var(--bg-secondary, rgba(128, 128, 128, .08));border:1px solid var(--border-color, rgba(128, 128, 128, .14))}.help-callout-tag{display:inline-block;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-primary, var(--text-secondary));margin-bottom:4px}[data-family=dark] .help-callout-tag{color:var(--mist-tint)}.help-callout-text{margin:0;font-size:.84rem;line-height:1.45}.help-mini-cards{display:flex;gap:10px;margin:12px 0 4px}.help-mini-card{flex:1 1 0;min-width:0;padding:10px 12px;border-radius:12px;background:var(--bg-secondary, rgba(128, 128, 128, .08));border:1px solid var(--border-color, rgba(128, 128, 128, .14))}.help-mini-label{display:block;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:color-mix(in srgb,var(--text-secondary) 62%,transparent);margin-bottom:4px}.help-mini-value{margin:0;font-size:.82rem;line-height:1.35}.help-mode-card{display:flex;align-items:center;gap:12px;margin:10px 0;padding:12px;border-radius:12px;background:var(--bg-secondary, rgba(128, 128, 128, .08));border:1px solid var(--border-color, rgba(128, 128, 128, .14))}.help-mode-tile{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;color:var(--accent-primary, var(--text-secondary));background:color-mix(in srgb,var(--accent-primary, #888) 12%,transparent)}[data-family=dark] .help-mode-tile{color:var(--mist-tint)}.help-mode-text{display:flex;flex-direction:column;gap:2px;min-width:0}.help-mode-name{font-size:.9rem;font-weight:650;color:var(--text-primary)}.help-mode-desc{font-size:.8rem;line-height:1.35;color:var(--text-secondary)}.help-insights-demo{margin:12px 0;padding:14px 12px 12px;border-radius:12px;background:var(--bg-secondary, rgba(128, 128, 128, .08));border:1px solid var(--border-color, rgba(128, 128, 128, .14))}.help-insights-pieces{display:flex;justify-content:space-around;align-items:flex-end;gap:8px}.help-insights-piece{display:flex;flex-direction:column;align-items:center;gap:8px}.help-insights-dot{width:8px;height:8px;border-radius:50%;background:var(--accent-primary, var(--text-secondary));flex:0 0 auto}[data-family=dark] .help-insights-dot{background:var(--mist-tint)}.help-insights-dot.is-empty{background:transparent}.help-insights-legend{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;font-size:.78rem;color:var(--text-secondary)}.help-scoring-reward{color:var(--accent-primary, var(--text-secondary))}[data-family=dark] .help-scoring-reward{color:var(--mist-tint)}.help-difficulty-mount{margin:12px 0}.help-difficulty{margin:4px 0}.help-diff-segments{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--bg-secondary, rgba(128, 128, 128, .1));border:1px solid var(--border-color, rgba(128, 128, 128, .14))}.help-diff-segment{flex:1 1 0;min-width:0;min-height:36px;padding:8px 4px;border:none;border-radius:9px;background:transparent;color:var(--text-secondary);font-size:.84rem;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .16s ease}.help-diff-segment.is-selected{color:#fff;background:linear-gradient(148deg,var(--piece-hero-highlight, var(--accent-primary, #888)) 0%,var(--piece-hero-base, var(--accent-primary, #888)) 42%,var(--piece-hero-shadow, var(--accent-primary, #555)) 100%)}.help-diff-meter{display:flex;align-items:baseline;gap:6px;margin:14px 0 6px}.help-diff-count-num{font-size:1.6rem;font-weight:700;line-height:1;color:var(--accent-primary, var(--text-primary))}[data-family=dark] .help-diff-count-num{color:var(--mist-tint)}.help-diff-count-unit{font-size:.85rem;color:var(--text-secondary)}.help-diff-bar{height:6px;border-radius:999px;background:var(--bg-secondary, rgba(128, 128, 128, .15));overflow:hidden}.help-diff-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--piece-hero-base, var(--accent-primary, #888)),var(--piece-hero-highlight, var(--accent-primary, #888)));transition:width .32s cubic-bezier(.22,.61,.36,1)}.help-diff-caption{font-size:.84rem;line-height:1.4;color:var(--text-secondary);margin:10px 0 12px}.help-diff-pool{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-start}.help-diff-piece{display:flex;align-items:center;justify-content:center;min-width:34px;min-height:34px;padding:5px;border-radius:8px;transition:opacity .28s cubic-bezier(.22,.61,.36,1),transform .28s cubic-bezier(.22,.61,.36,1),background .28s ease}.help-diff-piece.is-out{opacity:.18}.help-diff-piece.is-added{background:color-mix(in srgb,var(--accent-primary, #888) 10%,transparent);transform:scale(1.04)}@media(prefers-reduced-motion:reduce){.help-diff-segment,.help-diff-bar-fill,.help-diff-piece{transition:none}}.game-over-tip{font-size:.8rem;line-height:1.4;color:var(--text-secondary);margin:12px 0 4px;padding:8px 12px;background:var(--bg-secondary, rgba(128, 128, 128, .08));border-radius:8px;font-style:italic}.game-over-tip:empty{display:none}.help-view{--help-board-grid: #d0d4da;--help-board-border: #b0b6c0;--help-cell-empty: #f4f5f7;--help-cell-empty-alt: #eaecf0;--help-cell-filled: var(--piece-hero-base, #5a4eb8);--help-cell-landed: var(--piece-hero-highlight, #9b8ff5);--help-cell-landed-glow: var(--piece-hero-glow, rgba(155, 143, 245, .4));--help-highlight-clear: rgba(124, 110, 224, .55);--help-highlight-place: rgba(124, 110, 224, .35)}[data-family=dark] .help-view{--help-board-grid: #2a3550;--help-board-border: #3a4a6c;--help-cell-empty: #22304e;--help-cell-empty-alt: #16223c}.piece-static{cursor:default;touch-action:auto;filter:none;transition:none;pointer-events:none}.piece-static .piece-cell:not(.empty){background:var(--help-cell-filled);border:1px solid rgba(255,255,255,.25);border-radius:2px}.mini-board{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);gap:.5px;aspect-ratio:1;border:1px solid var(--help-board-border);border-radius:3px;background-color:var(--help-board-grid);overflow:hidden}.mini-cell{background-color:var(--help-cell-empty);border-radius:1px}.mini-cell[data-box="1"],.mini-cell[data-box="3"],.mini-cell[data-box="5"],.mini-cell[data-box="7"]{background-color:var(--help-cell-empty-alt)}.mini-cell.filled{background-color:var(--help-cell-filled)}.mini-cell.highlight-clear{background-color:var(--help-highlight-clear);box-shadow:inset 0 0 0 1px #7c6ee04d}.mini-cell.highlight-place{background-color:var(--help-highlight-place)}.help-scene{position:relative;margin:10px auto 14px;width:171px;padding:0 8px}.help-board{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);gap:1px;aspect-ratio:1;width:100%;border:1.5px solid var(--help-board-border);border-radius:3px;background-color:var(--help-board-grid);overflow:visible;position:relative}.help-board-cell{background-color:var(--help-cell-empty);border-radius:.5px}.help-board-cell.help-cell-alt{background-color:var(--help-cell-empty-alt)}.help-board-cell.help-cell-filled{background-color:var(--help-cell-filled)}.help-board-cell.help-cell-landed{background-color:var(--help-cell-landed);background-image:repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(255,255,255,.5) 2px,rgba(255,255,255,.5) 4px);box-shadow:inset 0 0 0 1px #fff,0 0 4px 1.3px var(--help-cell-landed-glow);position:relative;z-index:2}.help-clear-overlay{position:absolute;border:1.5px solid #C8A828;border-radius:5px;pointer-events:none;z-index:3}.help-arrow-svg{position:absolute;top:0;left:0;width:100%;pointer-events:none;overflow:visible;color:var(--piece-hero-base, #a099cc)}.help-arrow-svg path{stroke:currentColor;opacity:.4}.help-arrow-svg polygon{fill:var(--piece-hero-base, #a099cc)}[data-family=dark] .help-arrow-svg path{opacity:.6}.help-tray{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 8px 2px}.help-tray-slot{display:flex;flex-direction:column;align-items:center}.help-tray-ghost{border:1.5px dashed rgba(124,110,224,.5);border:1.5px dashed color-mix(in srgb,var(--piece-hero-base, #7c6ee0) 50%,transparent);border-radius:3px;padding:3px 2px;min-width:26px;min-height:14px}.help-tray-ghost .help-tray-mini-cell{opacity:.3}.help-tray-dimmed{opacity:.25}.help-tray-mini{display:grid;gap:1px}.help-tray-mini-cell{width:6px;height:6px;background:var(--help-cell-filled);border-radius:1px}.help-tray-mini-empty{background:transparent}[data-family=dark] .help-tray-mini-cell{background:var(--piece-hero-highlight, #9b8ff5)}[data-family=dark] .help-tray-mini-empty{background:transparent}[data-family=dark] .help-tray-dimmed{opacity:.9}[data-family=dark] .help-tray-ghost .help-tray-mini-cell{opacity:.95}.help-scoring-table{width:100%;max-width:360px;border-collapse:collapse;font-size:.82rem;margin:12px auto;background:var(--bg-secondary, rgba(128, 128, 128, .08));border-radius:8px;overflow:hidden}.help-scoring-caption{caption-side:top;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-secondary);padding:8px 10px;text-align:left;border-bottom:1px solid var(--border-color, rgba(128, 128, 128, .2))}.help-scoring-table td{padding:6px 10px;color:var(--text-secondary)}.help-scoring-table td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}.help-scoring-table td:first-child{font-weight:500;color:var(--text-primary)}.help-scoring-table tr:not(:last-child) td{border-bottom:1px solid var(--border-color, rgba(128, 128, 128, .1))}.help-scoring-note{max-width:360px;margin:4px auto 0;font-size:.78rem;text-align:center;color:var(--text-secondary)}.help-diagram-mount:empty{display:none}@media(orientation:portrait)and (min-width:600px){body[data-page=help] .help-view{max-width:600px;margin-inline:auto}body[data-page=help] .help-view-header{min-height:clamp(48px,7.26vw,62.4px)}body[data-page=help] .help-view-header h2{font-size:clamp(1.1rem,2.66vw,1.43rem)}body[data-page=help] .help-view-header .back-btn{font-size:clamp(1.5rem,3.63vw,1.95rem);min-width:clamp(44px,6.65vw,57.2px);min-height:clamp(44px,6.65vw,57.2px);padding-block:clamp(8px,1.21vw,10.4px)}body[data-page=help] .help-topic-count{font-size:clamp(.69rem,1.67vw,.897rem)}body[data-page=help] .help-expand-all{min-width:clamp(44px,6.65vw,57.2px);min-height:clamp(44px,6.65vw,57.2px)}body[data-page=help] .help-topic-row{min-height:clamp(64px,9.67vw,83.2px);gap:clamp(12px,1.81vw,15.6px);padding-block:clamp(12px,1.81vw,15.6px)}body[data-page=help] .help-topic-tile,body[data-page=help] .help-mode-tile{width:clamp(36px,5.44vw,46.8px);height:clamp(36px,5.44vw,46.8px);border-radius:clamp(11px,1.66vw,14.3px)}body[data-page=help] .help-topic-title{font-size:clamp(.97rem,2.35vw,1.261rem)}body[data-page=help] .help-topic-preview{font-size:clamp(.78rem,1.89vw,1.014rem)}body[data-page=help] .help-body-para{font-size:clamp(.88rem,2.13vw,1.144rem)}body[data-page=help] .help-diagram-caption{font-size:clamp(.85rem,2.06vw,1.105rem)}body[data-page=help] .help-callout,body[data-page=help] .help-mini-card{padding:clamp(10px,1.51vw,13px) clamp(12px,1.81vw,15.6px);border-radius:clamp(12px,1.81vw,15.6px)}body[data-page=help] .help-callout-tag,body[data-page=help] .help-mini-label{font-size:clamp(.64rem,1.55vw,.832rem)}body[data-page=help] .help-callout-text{font-size:clamp(.84rem,2.03vw,1.092rem)}body[data-page=help] .help-mini-value{font-size:clamp(.82rem,1.98vw,1.066rem)}body[data-page=help] .help-mode-name{font-size:clamp(.9rem,2.18vw,1.17rem)}body[data-page=help] .help-mode-desc{font-size:clamp(.8rem,1.94vw,1.04rem)}body[data-page=help] .help-insights-dot{width:clamp(8px,1.21vw,10.4px);height:clamp(8px,1.21vw,10.4px)}body[data-page=help] .help-insights-legend{font-size:clamp(.78rem,1.89vw,1.014rem)}body[data-page=help] .help-diff-segment{min-height:clamp(36px,5.44vw,46.8px);font-size:clamp(.84rem,2.03vw,1.092rem)}body[data-page=help] .help-diff-count-num{font-size:clamp(1.6rem,3.87vw,2.08rem)}body[data-page=help] .help-diff-count-unit{font-size:clamp(.85rem,2.06vw,1.105rem)}body[data-page=help] .help-diff-caption{font-size:clamp(.84rem,2.03vw,1.092rem)}body[data-page=help] .help-diff-piece{min-width:clamp(34px,5.14vw,44.2px);min-height:clamp(34px,5.14vw,44.2px)}body[data-page=help] .help-scene{width:clamp(171px,25.85vw,222.3px)}body[data-page=help] .help-tray-mini-cell{width:clamp(6px,.91vw,7.8px);height:clamp(6px,.91vw,7.8px)}body[data-page=help] .help-tray-ghost{min-width:clamp(26px,3.93vw,33.8px);min-height:clamp(14px,2.12vw,18.2px)}body[data-page=help] .help-scoring-table{max-width:clamp(360px,54.4vw,468px);font-size:clamp(.82rem,1.98vw,1.066rem)}body[data-page=help] .help-scoring-table th{font-size:clamp(.72rem,1.74vw,.936rem);padding:clamp(8px,1.21vw,10.4px) clamp(10px,1.51vw,13px)}body[data-page=help] .help-scoring-table td{padding:clamp(6px,.91vw,7.8px) clamp(10px,1.51vw,13px)}}.scores-view{display:none;padding:calc(.5rem + env(safe-area-inset-top,0px)) 1rem 1rem;max-width:480px;margin:0 auto;width:100%;box-sizing:border-box}.scores-nav{display:flex;align-items:center;gap:.75rem;padding:.5rem 0}.scores-nav h2{font-size:1.25rem;font-weight:600;margin:0}.scores-nav .back-btn{font-size:1.75rem;line-height:1;background:none;border:none;color:var(--text-primary);cursor:pointer;padding:.25rem .5rem;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}.scores-nav .settings-pill{margin-left:auto}.scores-content{display:flex;flex-direction:column;gap:1.5rem;padding-top:.5rem}.scores-section-title{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin:0 0 .5rem}.scores-table{display:flex;flex-direction:column;gap:.25rem}.scores-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:var(--bg-secondary, #eef2f7);border-radius:8px}.scores-row.active{background:linear-gradient(148deg,var(--piece-hero-highlight) 0%,var(--piece-hero-base) 42%,var(--piece-hero-shadow) 100%);color:#fff}[data-family=dark] .scores-row.active{box-shadow:inset 0 1px #ffffff2e,inset 0 -2px 4px -1px #00000038,0 2px 8px var(--piece-hero-glow)}[data-family=light] .scores-row.active{box-shadow:inset 0 1px #ffffff47,inset 0 -2px 4px -1px #0000001a,0 2px 6px var(--piece-hero-glow)}.scores-difficulty{font-weight:500}.scores-value{font-weight:600;font-variant-numeric:tabular-nums}.scores-row.active .scores-value{color:#fff}@media(orientation:portrait)and (min-width:600px){body[data-page=scores] .scores-view{max-width:clamp(480px,80vw,560px);flex:1}body[data-page=scores] .scores-content{flex:1;justify-content:flex-start;padding-top:clamp(1.5rem,12vh,11rem);gap:clamp(1.5rem,3.63vw,1.95rem)}body[data-page=scores] .scores-nav{gap:clamp(.75rem,1.81vw,.975rem)}body[data-page=scores] .scores-nav h2{font-size:clamp(1.25rem,3.02vw,1.625rem)}body[data-page=scores] .scores-nav .back-btn{font-size:clamp(1.75rem,4.23vw,2.275rem);min-width:clamp(44px,6.65vw,57.2px);min-height:clamp(44px,6.65vw,57.2px);padding:clamp(.25rem,.6vw,.325rem) clamp(.5rem,1.21vw,.65rem)}body[data-page=scores] .scores-section-title{font-size:clamp(.875rem,2.12vw,1.1375rem);margin-bottom:clamp(.5rem,1.21vw,.65rem)}body[data-page=scores] .scores-table{gap:clamp(.25rem,.6vw,.325rem)}body[data-page=scores] .scores-row{padding:clamp(.75rem,1.81vw,.975rem) clamp(1rem,2.42vw,1.3rem);border-radius:clamp(8px,1.21vw,10.4px)}body[data-page=scores] .scores-difficulty,body[data-page=scores] .scores-value{font-size:clamp(1rem,2.42vw,1.3rem)}}@keyframes jb-pulse{0%{box-shadow:0 0 0 2px var(--jb-accent);transform:scale(1)}50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--jb-accent) 45%,transparent);transform:scale(1.03)}to{box-shadow:0 0 0 2px var(--jb-accent);transform:scale(1)}}@keyframes jb-touch{0%{transform:translate(-50%,-50%) scale(.6);opacity:.9}70%{transform:translate(-50%,-50%) scale(1.6);opacity:.1}to{transform:translate(-50%,-50%) scale(1.6);opacity:0}}@keyframes jb-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes jb-slide-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes jb-classic-pulse{0%{opacity:.9;transform:scale(1);filter:brightness(1.1)}35%{opacity:.85;transform:scale(1.12);filter:brightness(1.35)}to{opacity:0;transform:scale(1.4);filter:brightness(1)}}@keyframes jb-clear-preview{0%,to{opacity:.55}50%{opacity:.95}}@keyframes jb-celebrate{0%{opacity:0;transform:translateY(6px) scale(.9)}55%{opacity:1;transform:translateY(-2px) scale(1.06)}to{opacity:1;transform:translateY(0) scale(1)}}:root{--tutorial-safe-top: env(safe-area-inset-top, 0px);--tutorial-safe-bottom: env(safe-area-inset-bottom, 0px)}.tutorial-overlay{position:fixed;inset:0;z-index:900;pointer-events:none;color:var(--jb-ink, #0f1a3a);font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Inter,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.tutorial-overlay [hidden]{display:none!important}body.tutorial-active[data-page=game]{background:var(--jb-app-bg, #eef0f3);overflow:hidden}body.tutorial-active[data-page=game] #app{max-width:none;height:100vh;height:100dvh;padding:0;background:var(--jb-app-bg, #eef0f3)}body.tutorial-active[data-page=game] .main-content,body.tutorial-active[data-page=game] .game-column,body.tutorial-active[data-page=game] .board-section,body.tutorial-active[data-page=game] .tray-section{display:block;width:100%;height:100%;min-height:0;padding:0;margin:0}body.tutorial-active[data-page=game] .score-bar,body.tutorial-active[data-page=game] #status,body.tutorial-active[data-page=game] #undo-row,body.tutorial-active[data-page=game] .ad-placeholder{display:none!important}body.tutorial-active[data-page=game] #board-wrap{position:fixed;left:calc(50% - (var(--tutorial-board-px, 346px) / 2));top:calc((192px * var(--tutorial-scale, 1)) + env(safe-area-inset-top,0px));width:var(--tutorial-board-px, 346px);height:var(--tutorial-board-px, 346px);display:grid;place-items:center;z-index:220;flex:none;min-height:0;--board-max: none;--board-size: 100%}body.tutorial-active[data-page=game] #board{width:100%;height:100%;max-width:none;max-height:none;padding:calc(6px * var(--tutorial-scale, 1));gap:calc(2px * var(--tutorial-scale, 1));border-radius:calc(8px * var(--tutorial-scale, 1));box-shadow:0 10px 28px #0f1a3a14}body.tutorial-complete[data-page=game] #tray{display:none!important}body.tutorial-active[data-page=game] #board-overlay{display:none}body.tutorial-active[data-page=game] .cell{border-radius:calc(5px * var(--tutorial-scale, 1))}body.tutorial-active[data-page=game] #tray{position:fixed;left:calc(50% - (175px * var(--tutorial-scale, 1)));bottom:calc(140px * var(--tutorial-scale, 1));width:calc(350px * var(--tutorial-scale, 1));min-height:calc(86px * var(--tutorial-scale, 1));z-index:230;display:flex;align-items:center;gap:calc(12px * var(--tutorial-scale, 1));padding:calc(10px * var(--tutorial-scale, 1)) calc(12px * var(--tutorial-scale, 1));border-radius:calc(14px * var(--tutorial-scale, 1));background:color-mix(in srgb,var(--jb-app-bg, #eef0f3) 76%,var(--jb-ink, #0f1a3a) 10%);box-shadow:inset 0 1px #ffffff59,0 12px 22px #0f1a3a14}body.tutorial-active[data-page=game] .tray-slot{align-items:center;justify-content:center;padding:0;min-height:calc(66px * var(--tutorial-scale, 1))}body.tutorial-active[data-page=game] .slot-stats{display:none!important}body.tutorial-active[data-page=game] .tray-piece{gap:calc(2px * var(--tutorial-scale, 1));filter:drop-shadow(0 2px 4px rgba(15,26,58,.12))}body.tutorial-active[data-page=game] .tray-piece .piece-cell{width:calc(26px * var(--tutorial-scale, 1))!important;height:calc(26px * var(--tutorial-scale, 1))!important;border-radius:calc(4px * var(--tutorial-scale, 1))!important}body.tutorial-active[data-page=game] .tray-piece.dragging{visibility:visible;opacity:.5;filter:drop-shadow(0 2px 4px rgba(15,26,58,.12))}body.tutorial-active[data-page=game] .drag-proxy{z-index:1000;filter:drop-shadow(0 14px 22px rgba(15,26,58,.35))}body.tutorial-active[data-page=game] .drag-proxy.animating{filter:drop-shadow(0 10px 18px rgba(15,26,58,.28))}.tutorial-top{position:fixed;top:calc((66px * var(--tutorial-scale, 1)) + env(safe-area-inset-top,0px));left:20px;right:20px;z-index:930;text-align:center}.tutorial-top h1{margin:0;color:var(--jb-ink, #0f1a3a);font-size:calc(28px * var(--tutorial-scale, 1));line-height:1.05;font-weight:700;letter-spacing:-.5px}.tutorial-top p{max-width:calc(320px * var(--tutorial-scale, 1));margin:calc(6px * var(--tutorial-scale, 1)) auto 0;color:var(--jb-ink-soft, #5a6378);font-size:calc(14px * var(--tutorial-scale, 1));line-height:1.4;font-weight:400}.tutorial-chips{position:fixed;left:calc(50% - (175px * var(--tutorial-scale, 1)));top:calc((142px * var(--tutorial-scale, 1)) + env(safe-area-inset-top,0px));z-index:940;width:calc(350px * var(--tutorial-scale, 1));display:flex;align-items:center;gap:calc(6px * var(--tutorial-scale, 1));pointer-events:auto}.tutorial-chip{flex:1 1 0;height:calc(26px * var(--tutorial-scale, 1));min-width:0;border-radius:calc(7px * var(--tutorial-scale, 1));border:1.5px solid transparent;padding:0;display:flex;align-items:center;justify-content:center;gap:calc(3px * var(--tutorial-scale, 1));font:inherit;font-size:calc(10px * var(--tutorial-scale, 1));line-height:1;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;color:var(--jb-ink-mute, #98a0ae);background:color-mix(in srgb,var(--jb-block-mid, #5bb8ff) 10%,transparent);transition:background .3s,color .3s,border-color .3s}.tutorial-chip.is-current,.tutorial-chip.is-completed{color:#fff;background:linear-gradient(135deg,var(--jb-block-top, #8ed8ff) 0%,var(--jb-block-mid, #5bb8ff) 48%,var(--jb-block-bot, #3478f6) 100%);border-color:transparent;box-shadow:0 6px 14px color-mix(in srgb,var(--jb-block-bot, #3478f6) 18%,transparent)}.tutorial-chip svg{flex:0 0 auto}.tutorial-rule{position:fixed;left:calc(50% - (175px * var(--tutorial-scale, 1)));top:calc((562px * var(--tutorial-scale, 1)) + env(safe-area-inset-top,0px));z-index:930;width:calc(350px * var(--tutorial-scale, 1));text-align:center;animation:jb-slide-in .35s ease-out}.tutorial-rule h2{margin:0 0 calc(3px * var(--tutorial-scale, 1));color:var(--jb-ink, #0f1a3a);font-size:calc(22px * var(--tutorial-scale, 1));line-height:1.16;font-weight:700;letter-spacing:-.4px}.tutorial-rule-helper{min-height:calc(36px * var(--tutorial-scale, 1));margin:0;color:var(--jb-ink-mute, #98a0ae);font-size:calc(13px * var(--tutorial-scale, 1));line-height:1.35;font-weight:400;font-style:italic}.tutorial-rule-helper.is-success{color:var(--jb-success, #3ec28a);font-weight:700;font-style:normal;animation:jb-celebrate .7s cubic-bezier(.2,1.3,.4,1) both}.tutorial-skip{position:fixed;left:50%;bottom:calc(96px * var(--tutorial-scale, 1));z-index:940;transform:translate(-50%);display:flex;align-items:center;justify-content:center;gap:calc(6px * var(--tutorial-scale, 1));min-height:44px;padding:6px 14px;border:0;background:transparent;color:var(--jb-ink-mute, #98a0ae);font:inherit;font-size:calc(13px * var(--tutorial-scale, 1));font-weight:500;letter-spacing:0;cursor:pointer;pointer-events:auto}.tutorial-skip span{text-decoration:underline;text-underline-offset:3px}.tutorial-trail{position:fixed;inset:0;z-index:910;pointer-events:none;opacity:0;transition:opacity .18s ease-out}.tutorial-trail.is-visible{opacity:1}.tutorial-ghost-hand-wrap{position:fixed;left:0;top:0;z-index:1220;width:72px;height:72px;pointer-events:none;opacity:0;transform-origin:36px 4.5px;transform:translate(calc(var(--ghost-x, -100px) - 36px),calc(var(--ghost-y, -100px) - 4.5px)) scale(1);transition:transform 1.9s cubic-bezier(.45,0,.2,1),opacity .18s ease-out;filter:drop-shadow(0 3px 6px rgba(15,26,58,.22))}.tutorial-ghost-hand-wrap.is-visible{opacity:1}.tutorial-ghost-hand-wrap.is-pressed{transform:translate(calc(var(--ghost-x, -100px) - 36px),calc(var(--ghost-y, -100px) - 4.5px)) scale(.94)}.tutorial-touch-ripple{position:fixed;left:var(--ripple-x, -100px);top:var(--ripple-y, -100px);z-index:935;width:calc(44px * var(--tutorial-scale, 1));height:calc(44px * var(--tutorial-scale, 1));border-radius:50%;border:2px solid var(--jb-accent, #5bb8ff);transform:translate(-50%,-50%);pointer-events:none;animation:jb-touch 1.3s ease-out infinite}body.tutorial-complete[data-page=game] .tutorial-trail,body.tutorial-complete[data-page=game] .tutorial-touch-ripple{display:none!important}.tutorial-completion{position:fixed;left:calc(50% - (175px * var(--tutorial-scale, 1)));top:calc((562px * var(--tutorial-scale, 1)) + env(safe-area-inset-top,0px));bottom:auto;z-index:950;width:calc(350px * var(--tutorial-scale, 1));text-align:center;animation:jb-fade-in .4s ease-out;pointer-events:auto}.tutorial-completion[hidden]{display:none}.tutorial-completion h2,.tutorial-completion p{display:block}.tutorial-completion h2{margin:0;color:var(--jb-ink, #0f1a3a);font-size:calc(24px * var(--tutorial-scale, 1));line-height:1.15;font-weight:700}.tutorial-completion p{margin:calc(8px * var(--tutorial-scale, 1)) 0 0;color:var(--jb-ink-soft, #5b6475);font-size:calc(13.5px * var(--tutorial-scale, 1));line-height:1.4;font-weight:400}.tutorial-cta{margin-top:calc(28px * var(--tutorial-scale, 1));width:100%;height:calc(54px * var(--tutorial-scale, 1));min-height:44px;border:0;border-radius:calc(27px * var(--tutorial-scale, 1));background:linear-gradient(135deg,var(--jb-block-top, #8ed8ff) 0%,var(--jb-block-mid, #5bb8ff) 48%,var(--jb-block-bot, #3478f6) 100%);color:#fff;font:inherit;font-size:calc(16px * var(--tutorial-scale, 1));line-height:1;font-weight:600;letter-spacing:0;cursor:pointer;box-shadow:0 10px 24px color-mix(in srgb,var(--jb-block-bot, #3478f6) 28%,transparent)}.tutorial-restart{display:inline-flex;align-items:center;justify-content:center;margin:calc(14px * var(--tutorial-scale, 1)) auto 0;min-height:44px;padding:6px 14px;border:0;background:transparent;color:var(--jb-ink-mute, #98a0ae);font:inherit;font-size:calc(13px * var(--tutorial-scale, 1));font-weight:500;letter-spacing:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.tutorial-restart:focus-visible{outline:2px solid var(--jb-accent, #5bb8ff);outline-offset:3px;border-radius:4px}.cell.tutorial-target{box-shadow:0 0 0 2.5px var(--jb-accent, #5bb8ff),inset 0 0 0 1px #ffffffb8!important;animation:jb-pulse 1.4s ease-in-out infinite}.cell.tutorial-clear-preview{background:color-mix(in srgb,var(--jb-accent, #5bb8ff) 18%,transparent)!important;background-image:none!important;box-shadow:0 0 0 1.5px var(--jb-accent, #5bb8ff),0 0 12px 2px color-mix(in srgb,var(--jb-accent, #5bb8ff) 33%,transparent)!important;animation:jb-clear-preview 1.1s ease-in-out infinite}.cell.tutorial-clear-fx{position:relative;z-index:2;background:var(--jb-accent, #5bb8ff)!important;background-image:none!important;animation:jb-classic-pulse .9s ease-out forwards}@supports not (background: color-mix(in srgb,black,white)){body.tutorial-active[data-page=game] #tray{background:#dfe2e8}.tutorial-chip{background:#5bb8ff1a}.tutorial-chip.is-current,.tutorial-chip.is-completed{box-shadow:0 6px 14px #3478f62e}.tutorial-cta{box-shadow:0 10px 24px #3478f647}.cell.tutorial-clear-preview{background:#5bb8ff2e!important;box-shadow:0 0 0 1.5px var(--jb-accent, #5bb8ff),0 0 12px 2px #5bb8ff54!important}}@media(prefers-reduced-motion:reduce){.tutorial-chip,.tutorial-trail,.tutorial-ghost-hand-wrap{transition:none}.tutorial-rule,.tutorial-completion,.tutorial-rule-helper.is-success,.tutorial-touch-ripple,.cell.tutorial-target,.cell.tutorial-clear-preview,.cell.tutorial-clear-fx{animation:none}.cell.tutorial-target{box-shadow:0 0 0 2px var(--jb-accent, #5bb8ff)}.cell.tutorial-clear-fx{opacity:.35}}#coach-mark-layer{position:fixed;inset:0;pointer-events:none;z-index:50;font-family:inherit;transition:opacity .15s ease}#coach-mark-layer .cm-zone{position:fixed;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px 8px;text-align:center;background:var(--cm-fill, rgba(40, 50, 70, .06));border:1.5px dashed var(--cm-edge, rgba(40, 50, 70, .45));border-radius:10px;font-size:10.5px;font-weight:600;line-height:1.25;letter-spacing:.02em;color:var(--cm-zone-label, rgba(40, 50, 70, .82))}#coach-mark-layer .cm-caption{position:fixed;box-sizing:border-box;white-space:nowrap;border:1px solid var(--cm-chip-bd, rgba(40, 50, 70, .4));border-radius:999px;background:var(--cm-chip-bg, rgba(40, 50, 70, .07));padding:6px 14px;font-size:12px;font-weight:600;line-height:1.3;color:var(--cm-msg, rgba(40, 50, 70, .92))}#coach-mark-layer .cm-caption-dots{padding-left:28px}#coach-mark-layer .cm-caption-note{white-space:normal;max-width:min(80vw,320px);text-align:center;border-radius:14px}#coach-mark-layer .cm-caption-glyph{display:inline-flex;align-items:center;vertical-align:-3px}#coach-mark-layer .cm-swatch{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:var(--insights-chip-size, 8px);height:var(--insights-chip-size, 8px);border-radius:50%}#coach-mark-layer .cm-zone-dot{display:inline-block;width:var(--insights-chip-size, 8px);height:var(--insights-chip-size, 8px);border-radius:50%;vertical-align:-1px;margin:0 1px}#coach-mark-layer .cm-zone-glyph{display:inline-flex;align-items:center;vertical-align:-2px}#coach-mark-layer .cm-zone-glyph svg{width:12px;height:12px}@media(prefers-reduced-motion:reduce){#coach-mark-layer{transition:none}}@media(orientation:portrait)and (min-width:600px){#coach-mark-layer .cm-caption{font-size:clamp(12px,1.8vw,15px)}#coach-mark-layer .cm-zone{font-size:clamp(10.5px,1.55vw,13px)}#coach-mark-layer .cm-caption-glyph svg{width:clamp(14px,2.1vw,17px);height:clamp(14px,2.1vw,17px)}#coach-mark-layer .cm-zone-glyph svg{width:clamp(12px,1.8vw,15px);height:clamp(12px,1.8vw,15px)}}