:root{--color-pink-200: #ffc1d9;--color-pink-400: #ff6b9d;--color-pink-600: #f06292;--color-purple-400: #a18cd1;--color-purple-600: #8e6bb8;--color-sky-200: #b3e5fc;--color-sky-400: #64b5f6;--color-sky-600: #42a5f5;--color-green-400: #66bb6a;--color-green-600: #43a047;--color-amber-300: #ffd54f;--color-amber-400: #ffb347;--color-amber-600: #ff8c42;--color-red-400: #ef5350;--color-red-600: #e53935;--color-teal-400: #4db6ac;--color-teal-600: #26a69a;--color-peach-400: #ffab91;--color-peach-600: #ff8a65;--color-neutral-100: #f5f5f8;--color-neutral-200: #e8e8f0;--color-neutral-400: #94a3b8;--color-neutral-600: #64748b;--color-neutral-800: #4a4a6a;--color-white: #ffffff;--color-black: #000000;--color-text: var(--color-neutral-800);--color-text-muted: var(--color-neutral-600);--color-text-on-brand: var(--color-white);--color-text-on-color: var(--color-white);--color-heading: var(--color-purple-400);--color-accent: var(--color-sky-600);--color-surface: var(--color-white);--color-border: var(--color-neutral-200);--color-overlay: rgba(74, 74, 106, .45);--color-overlay-heavy: rgba(74, 74, 106, .65);--color-surface-glass: rgba(255, 255, 255, .92);--color-surface-elevated: rgba(255, 255, 255, .97);--color-badge-overlay: rgba(255, 255, 255, .25);--color-disabled-bg: var(--color-neutral-400);--color-disabled-text: var(--color-neutral-600);--color-correct: var(--color-green-400);--color-incorrect: var(--color-red-400);--color-note-correct: var(--color-green-400);--color-note-incorrect: rgba(239, 83, 80, .5);--color-ink: var(--color-neutral-800);--color-glass-tint: rgba(225, 245, 254, .35);--gradient-brand: linear-gradient(135deg, var(--color-pink-200) 0%, var(--color-purple-400) 100%);--gradient-surface: linear-gradient(165deg, var(--color-white) 0%, var(--color-neutral-100) 100%);--gradient-accent: linear-gradient(135deg, var(--color-sky-400) 0%, var(--color-sky-600) 100%);--gradient-success: linear-gradient(135deg, var(--color-green-400) 0%, var(--color-green-600) 100%);--gradient-warning: linear-gradient(135deg, var(--color-amber-400) 0%, var(--color-amber-600) 100%);--gradient-danger: linear-gradient(135deg, var(--color-red-400) 0%, var(--color-red-600) 100%);--gradient-purple: linear-gradient(135deg, var(--color-purple-400) 0%, var(--color-purple-600) 100%);--gradient-teal: linear-gradient(135deg, var(--color-teal-400) 0%, var(--color-teal-600) 100%);--gradient-neutral: linear-gradient(135deg, var(--color-neutral-400) 0%, var(--color-neutral-600) 100%);--gradient-scene: linear-gradient(180deg, var(--color-sky-200) 0%, var(--color-pink-200) 100%);--space-0: 0;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-14: 56px;--space-16: 64px;--text-fluid-xs: clamp(.8rem, 2vh, .9rem);--text-fluid-sm: clamp(.9rem, 2vh, 1.05rem);--text-fluid-base: clamp(1rem, 2.5vh, 1.15rem);--text-fluid-lg: clamp(1.35rem, 3.5vh, 1.85rem);--text-fluid-heading: clamp(1.5rem, 4vh, 2.5rem);--text-fluid-icon: clamp(2rem, 5vh, 3rem);--text-fluid-emoji: clamp(2rem, 5vh, 2.75rem);--space-fluid-gap: clamp(.65rem, 1.8vh, 1.5rem);--space-fluid-gap-sm: clamp(.5rem, 1.5vh, .85rem);--space-fluid-panel-y: clamp(1rem, 2.5vh, 2rem);--space-fluid-panel-x: clamp(1rem, 3vw, 1.75rem);--space-fluid-bottom: clamp(4rem, 10vh, 5rem);--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--text-icon: 3.5rem;--text-icon-sm: 3rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--leading-tight: 1.2;--leading-normal: 1.5;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-panel: 14px;--radius-2xl: 24px;--radius-full: 9999px;--shadow-sm: 0 2px 4px rgba(74, 74, 106, .12);--shadow-md: 0 4px 12px rgba(74, 74, 106, .18);--shadow-lg: 0 6px 16px rgba(74, 74, 106, .22);--shadow-xl: 0 16px 48px rgba(74, 74, 106, .28);--shadow-up: 0 -2px 8px rgba(74, 74, 106, .1);--shadow-panel: 0 4px 24px rgba(161, 140, 209, .15);--shadow-text: 2px 2px 4px rgba(74, 74, 106, .2);--shadow-text-strong: 0 1px 4px rgba(74, 74, 106, .35);--shadow-inset-press: 0 2px 0 rgba(74, 74, 106, .2);--shadow-press-md: 0 4px 0 rgba(74, 74, 106, .25);--shadow-knob: 0 2px 8px rgba(74, 74, 106, .25);--shadow-syllable-hover: 0 4px 12px rgba(100, 181, 246, .35);--shadow-hint: 0 0 20px rgba(255, 179, 71, .45);--duration-fast: .15s;--duration-normal: .3s;--ease-default: ease;--transition-default: all var(--duration-normal) var(--ease-default);--transition-fast: all var(--duration-fast) var(--ease-default);--z-base: 1;--z-dropdown: 10;--z-fixed: 100;--z-modal: 200;--z-overlay: 300;--border-width: 2px;--border-width-thin: 1px;--border-width-thick: 3px;--border-accent: 1px solid rgba(161, 140, 209, .25);--opacity-muted: .5;--opacity-subtle: .7;--opacity-badge: .9;--opacity-disabled: .45;--opacity-overlay-light: .85;--size-touch: 44px;--size-touch-lg: 48px;--size-joystick: 112px;--size-joystick-lg: 148px;--size-joystick-knob: 48px;--size-joystick-knob-lg: 56px;--size-panel-side: 300px;--size-piano-white-key: clamp(var(--size-touch), 8vw, calc(var(--space-14) + var(--space-1)));--size-piano-black-key: clamp(calc(var(--space-8) - var(--space-1)), 5.5vw, var(--space-10));--size-piano-white-key-height: clamp(calc(var(--space-16) + var(--space-10)), 25vh, calc(var(--space-16) * 3 + var(--space-8)));--size-piano-black-key-height: clamp(calc(var(--space-16) + var(--space-2)), 15vh, calc(var(--space-16) + var(--space-10)))}@media(max-width:768px){:root{--size-piano-white-key: clamp(var(--space-10), 7vw, var(--space-12));--size-piano-black-key: clamp(calc(var(--space-6) + var(--space-2)), 5vw, calc(var(--space-8) + var(--space-1)));--size-piano-white-key-height: clamp(calc(var(--space-16) + var(--space-6)), 20vh, calc(var(--space-16) + var(--space-10)));--size-piano-black-key-height: clamp(calc(var(--space-12) + var(--space-2)), 12vh, calc(var(--space-16) + var(--space-2)))}}@media(max-width:480px){:root{--size-piano-white-key: clamp(calc(var(--space-8) + var(--space-1)), 6vw, var(--size-touch));--size-piano-black-key: clamp(calc(var(--space-5) + var(--space-1)), 4.5vw, var(--space-8));--size-piano-white-key-height: clamp(calc(var(--space-16) + var(--space-2)), 18vh, calc(var(--space-16) + var(--space-6)));--size-piano-black-key-height: clamp(var(--space-12), 10vh, var(--space-16))}}*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:var(--leading-normal);font-weight:var(--font-normal);color-scheme:light;color:var(--color-text);background-color:var(--color-surface);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}button{font-family:inherit}#root{width:100%;min-height:100vh}.game-canvas-root{position:relative;width:100%;height:100%;touch-action:none;overflow:hidden}.game-canvas-loader{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--color-surface, #fff) 72%,#9bd3e8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;animation:game-canvas-loader-fade .2s ease-out}.game-canvas-loader-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-radius:var(--radius-2xl);background:var(--color-surface-elevated);box-shadow:var(--shadow-md)}.game-canvas-loader--compact .game-canvas-loader-card{padding:var(--space-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .12))}.game-canvas-loader-spinner{width:1.75rem;height:1.75rem;border-radius:50%;border:3px solid color-mix(in srgb,var(--color-text, #2d3436) 18%,transparent);border-top-color:#0984e3;animation:game-canvas-loader-spin .7s linear infinite}.game-canvas-loader--compact .game-canvas-loader-spinner{width:1.1rem;height:1.1rem;border-width:2px}.game-canvas-loader-label{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-text);line-height:1.2}.game-canvas-loader-pct{font-size:var(--text-sm);font-weight:700;color:#636e72;font-variant-numeric:tabular-nums}@keyframes game-canvas-loader-spin{to{transform:rotate(360deg)}}@keyframes game-canvas-loader-fade{0%{opacity:0}to{opacity:1}}.back-button-pill{position:fixed;top:var(--space-4);left:var(--space-4);display:flex;align-items:center;justify-content:center;min-width:var(--size-touch-lg);min-height:var(--size-touch-lg);padding:var(--space-3) var(--space-5);border:none;border-radius:var(--radius-2xl);background:var(--color-surface-elevated);box-shadow:var(--shadow-md);z-index:var(--z-overlay);font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--color-text);cursor:pointer;-webkit-backdrop-filter:blur(calc(var(--space-2) + var(--space-1) * .5));backdrop-filter:blur(calc(var(--space-2) + var(--space-1) * .5));touch-action:manipulation}.back-button-pill:hover{transform:scale(1.05);filter:brightness(.95)}.back-button-pill:active{transform:scale(.98)}@media(max-width:768px){.back-button-pill{top:var(--space-2);left:var(--space-2);min-width:calc(var(--size-touch-lg) - var(--space-1));min-height:calc(var(--size-touch-lg) - var(--space-1));padding:var(--space-2) var(--space-4);font-size:var(--text-xl)}}.bgm-mute-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;font-size:var(--text-xl);line-height:var(--leading-tight);cursor:pointer}.bgm-mute-button:hover{transform:scale(1.1);filter:brightness(.95)}.coins-display{position:relative;top:auto;right:auto;display:flex;align-items:center;gap:var(--space-2);background:var(--color-surface-elevated);padding:var(--space-3) var(--space-5);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-text);-webkit-backdrop-filter:blur(calc(var(--space-2) + var(--space-1) * .5));backdrop-filter:blur(calc(var(--space-2) + var(--space-1) * .5));flex-shrink:0}.coins-icon{font-size:var(--text-2xl);line-height:var(--leading-tight)}.coins-amount{min-width:var(--space-8);text-align:center}@media(max-width:768px){.coins-display{padding:var(--space-2) var(--space-4);font-size:var(--text-base)}.coins-icon{font-size:var(--text-xl)}}.midi-toggle{position:relative;display:flex;align-items:center;flex-shrink:0}.midi-toggle-button{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--size-touch-lg);padding:var(--space-3) var(--space-5);border:none;border-radius:var(--radius-2xl);background:var(--color-surface-elevated);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(calc(var(--space-2) + var(--space-1) * .5));backdrop-filter:blur(calc(var(--space-2) + var(--space-1) * .5));font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-text);cursor:pointer;transition:var(--transition-fast);touch-action:manipulation;line-height:var(--leading-tight)}.midi-toggle-button:hover{transform:scale(1.05);filter:brightness(.95)}.midi-toggle-button:active{transform:scale(.98)}.midi-toggle-button.active{color:var(--color-sky-600)}.midi-toggle-button.active:hover{filter:brightness(.95)}.midi-toggle-label{font-size:var(--text-base);letter-spacing:.02em}.midi-status-indicator{width:.55rem;height:.55rem;border-radius:50%;background:var(--color-green-400);box-shadow:0 0 0 2px #66bb6a40;animation:midi-pulse 2s infinite;flex-shrink:0}.midi-toggle-device{display:none}.midi-input-picker{position:absolute;top:calc(100% + var(--space-3));right:0;z-index:30;min-width:17rem;max-width:min(22rem,calc(100vw - var(--space-8)));padding:var(--space-4);border:none;border-radius:var(--radius-2xl);background:var(--color-surface-elevated);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(calc(var(--space-2) + var(--space-1) * .5));backdrop-filter:blur(calc(var(--space-2) + var(--space-1) * .5));display:flex;flex-direction:column;gap:var(--space-3)}.midi-input-picker-title{margin:0;font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-text);text-align:center}.midi-input-picker-empty{margin:0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-xl);background:#ef53501f;color:var(--color-red-600);font-size:var(--text-sm);font-weight:var(--font-medium);line-height:var(--leading-normal);text-align:center}.midi-input-picker-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.midi-input-picker-option{width:100%;text-align:left;padding:var(--space-3) var(--space-4);border:none;border-radius:var(--radius-xl);background:var(--color-neutral-100);color:var(--color-text);cursor:pointer;display:flex;flex-direction:column;gap:var(--space-1);transition:var(--transition-fast);touch-action:manipulation;box-shadow:var(--shadow-sm)}.midi-input-picker-option:hover{background:var(--color-surface);transform:scale(1.02);filter:brightness(.98)}.midi-input-picker-option:active{transform:scale(.98)}.midi-input-picker-name{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text)}.midi-input-picker-meta{font-size:var(--text-xs);color:var(--color-text-muted)}.midi-input-picker-cancel{align-self:stretch;min-height:calc(var(--size-touch-lg) - var(--space-2));padding:var(--space-2) var(--space-4);font-size:var(--text-base);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-xl);background:var(--color-neutral-100);color:var(--color-text);cursor:pointer;touch-action:manipulation;transition:var(--transition-fast);box-shadow:var(--shadow-sm)}.midi-input-picker-cancel:hover{transform:scale(1.02);filter:brightness(.95);color:var(--color-sky-600)}.midi-input-picker-cancel:active{transform:scale(.98)}@keyframes midi-pulse{0%,to{opacity:1}50%{opacity:.45}}@media(max-width:768px){.midi-toggle-button{min-height:calc(var(--size-touch-lg) - var(--space-1));padding:var(--space-2) var(--space-4);font-size:var(--text-xl)}.midi-toggle-label{font-size:var(--text-sm)}.midi-input-picker{min-width:15rem;padding:var(--space-3)}}.app-top-controls{position:fixed;top:var(--space-4);right:var(--space-4);display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);z-index:var(--z-overlay);max-width:calc(100vw - var(--space-8))}.app-top-controls--with-title{left:0;right:0;max-width:none;padding:0 var(--space-4);box-sizing:border-box;pointer-events:none}.app-top-controls--with-title>:not(.app-screen-title){pointer-events:auto}.app-screen-title{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center;background:var(--color-surface-elevated);padding:var(--space-3) var(--space-5);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-text);-webkit-backdrop-filter:blur(calc(var(--space-2) + var(--space-1) * .5));backdrop-filter:blur(calc(var(--space-2) + var(--space-1) * .5));white-space:nowrap;max-width:min(70vw,22rem);overflow:hidden;text-overflow:ellipsis;pointer-events:none}@media(max-width:768px){.app-top-controls{top:var(--space-2);right:var(--space-2);gap:var(--space-2)}.app-top-controls--with-title{padding:0 var(--space-2)}.app-screen-title{padding:var(--space-2) var(--space-4);font-size:var(--text-base);max-width:min(52vw,14rem)}}.difficulty-picker{width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-fluid-gap);padding:var(--space-fluid-panel-y) var(--space-fluid-panel-x);padding-bottom:var(--space-fluid-bottom)}.difficulty-picker__panel{background:var(--color-surface-elevated);border-radius:var(--radius-xl);padding:var(--space-fluid-panel-y) var(--space-fluid-panel-x);box-shadow:var(--shadow-panel);border:var(--border-width) solid rgba(74,74,106,.22);text-align:center}.difficulty-picker__hero{margin-bottom:var(--space-fluid-gap-sm)}.difficulty-picker__emoji{display:block;font-size:var(--text-fluid-emoji);line-height:var(--leading-tight);margin-bottom:var(--space-2)}.difficulty-picker__title{color:var(--color-text);font-size:var(--text-fluid-lg);font-weight:var(--font-bold);margin:0 0 var(--space-2);letter-spacing:-.02em}.difficulty-picker__subtitle{color:var(--color-text-muted);font-size:var(--text-fluid-sm);line-height:var(--leading-normal);margin:0;max-width:calc(var(--space-8) * 16);margin-inline:auto}.difficulty-picker__list{display:flex;flex-direction:column;gap:var(--space-fluid-gap-sm)}.difficulty-picker__btn{display:flex;align-items:center;gap:var(--space-4);width:100%;max-width:400px;margin-inline:auto;padding:var(--space-fluid-gap-sm) var(--space-fluid-panel-x);border:none;border-radius:var(--radius-panel);cursor:pointer;color:var(--color-text-on-brand);text-align:left;transition:var(--transition-fast);box-shadow:var(--shadow-md);touch-action:manipulation}.difficulty-picker__btn:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -.5));box-shadow:var(--shadow-lg)}.difficulty-picker__btn-icon{font-size:var(--text-fluid-lg);flex-shrink:0;width:var(--space-10);text-align:center}.difficulty-picker__btn-body{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}.difficulty-picker__btn-label{font-size:var(--text-fluid-base);font-weight:var(--font-bold)}.difficulty-picker__btn-desc{font-size:var(--text-fluid-xs);opacity:1;color:#ffffffeb}.difficulty-picker__btn-reward{font-size:var(--text-fluid-sm);font-weight:var(--font-bold);background:#00000038;padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);flex-shrink:0}.difficulty-picker__btn--easy{background:var(--gradient-success)}.difficulty-picker__btn--medium{background:var(--gradient-warning)}.difficulty-picker__btn--hard{background:var(--gradient-danger)}.difficulty-picker__btn--expert{background:var(--gradient-teal)}@media(max-height:700px){.difficulty-picker__hero{margin-bottom:var(--space-2)}.difficulty-picker__list{gap:var(--space-1)}}.numeric-keypad{width:100%;max-width:calc(var(--space-10) * 18);margin:0 auto}.numeric-keypad__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(var(--space-2),2vw,var(--space-4))}.numeric-keypad__key{min-height:clamp(var(--space-10),6vw,calc(var(--space-10) * 1.5));font-size:var(--text-fluid-lg);font-weight:var(--font-bold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);touch-action:manipulation;box-shadow:var(--shadow-sm);color:var(--color-text-on-brand)}.numeric-keypad__key--digit{background:var(--color-white);color:var(--color-ink);border:var(--border-width-thin) solid var(--color-neutral-400)}.numeric-keypad__key--backspace{background:var(--color-neutral-100);color:var(--color-ink);border:var(--border-width-thin) solid var(--color-neutral-400)}.numeric-keypad__icon{width:clamp(var(--space-6),5vw,var(--space-8));height:clamp(var(--space-6),5vw,var(--space-8));display:block;margin:0 auto}.numeric-keypad__key--submit{background:var(--gradient-success);color:var(--color-text-on-brand);border:var(--border-width-thin) solid var(--color-green-600)}.numeric-keypad__key:hover:not(:disabled){filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.numeric-keypad__key:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-inset-press)}.numeric-keypad__key:disabled{opacity:var(--opacity-disabled, .5);cursor:not-allowed}.game-controls-bar{position:fixed;bottom:0;left:50%;transform:translate(-50%);display:flex;gap:var(--space-4);padding:var(--space-4);background:var(--color-surface);border-radius:var(--radius-md) var(--radius-md) 0 0;box-shadow:var(--shadow-up);justify-content:center;align-items:center;flex-wrap:wrap;z-index:var(--z-fixed);width:100%;max-width:1400px}.control-button{padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-default);color:var(--color-text-on-brand);box-shadow:var(--shadow-sm);min-width:calc(var(--space-10) * 3)}.control-button:hover:not(:disabled){filter:brightness(.95);transform:translateY(calc(var(--space-1) * -.5));box-shadow:var(--shadow-md)}.control-button:disabled{opacity:var(--opacity-muted);cursor:not-allowed}.secondary-button{background:var(--gradient-purple)}.arithmetic-game{width:100%;max-width:calc(var(--space-10) * 35);display:flex;flex-direction:column;gap:var(--space-6);position:relative;padding:var(--space-4) var(--space-fluid-panel-x) calc(var(--space-16) * 3 + var(--space-8));margin:0 auto}.arithmetic-game__header{text-align:center;background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-6);border:var(--border-width-thin) solid var(--color-border)}.arithmetic-game__header h2{color:var(--color-ink);font-size:var(--text-fluid-lg);margin:0 0 var(--space-3)}.arithmetic-game__progress{display:flex;justify-content:center;gap:var(--space-6);font-size:var(--text-fluid-sm);color:var(--color-neutral-800);font-weight:var(--font-medium)}.arithmetic-game__lives{display:flex;justify-content:center;gap:var(--space-2)}.arithmetic-game__life{font-size:var(--text-2xl);opacity:1;transition:opacity var(--transition-fast)}.arithmetic-game__life.is-lost{opacity:.25}.arithmetic-game__play{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);padding:var(--space-6) var(--space-4);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:var(--border-width-thin) solid var(--color-border)}.arithmetic-game__equation{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3);font-size:clamp(var(--text-3xl),8vw,calc(var(--text-3xl) * 1.5));font-weight:var(--font-bold);font-variant-numeric:tabular-nums;color:var(--color-ink);letter-spacing:.02em}.arithmetic-game__equation-operator{color:var(--color-neutral-600)}.arithmetic-game__answer{display:inline-flex;align-items:center;justify-content:center;min-width:calc(var(--space-10) * 2.5);min-height:calc(var(--space-10) * 2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);background:var(--color-neutral-100);border:calc(var(--border-width-thin) * 2) solid var(--color-neutral-400);box-shadow:var(--shadow-inset-press);color:var(--color-ink)}.arithmetic-game__answer--empty{color:var(--color-neutral-600)}.arithmetic-game__hint{min-height:var(--text-xl);font-size:var(--text-fluid-base);color:var(--color-amber-600);font-weight:var(--font-bold);text-align:center;opacity:0;transition:opacity var(--transition-fast)}.arithmetic-game__hint--visible{opacity:1}.arithmetic-game__result{text-align:center;padding:var(--space-8);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:var(--border-width-thin) solid var(--color-border)}.arithmetic-game__result h3{color:var(--color-ink);font-size:var(--text-2xl);margin:0 0 var(--space-4)}.arithmetic-game__result p{color:var(--color-neutral-800);margin:0 0 var(--space-6);font-size:var(--text-lg)}.arithmetic-game__result-button{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;background:var(--gradient-success);color:var(--color-text-on-brand);touch-action:manipulation}.simple-game-container{width:100%;max-width:calc(var(--space-10) * 35);display:flex;flex-direction:column;gap:var(--space-6);position:relative;padding-bottom:calc(var(--space-16) * 3 + var(--space-8))}.simple-game-start{text-align:center;padding:var(--space-8);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.simple-game-start h2{color:var(--color-heading);margin-bottom:var(--space-4);font-size:var(--text-3xl)}.simple-game-start p{color:var(--color-text-muted);margin-bottom:var(--space-8);font-size:var(--text-lg)}.difficulty-button{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);min-width:calc(var(--space-16) * 5 + var(--space-10));color:var(--color-text-on-brand);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.simple-game-close-button{padding:var(--space-3) var(--space-8);font-size:var(--text-base);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);background:var(--gradient-neutral);color:var(--color-text-on-brand);min-width:calc(var(--space-16) * 3 + var(--space-8))}.simple-game-close-button:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1))}.simple-game-header{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-6)}.simple-game-header h2{color:var(--color-heading);margin:0 0 var(--space-4) 0;font-size:var(--text-fluid-lg);text-align:center}.simple-game-progress{display:flex;flex-direction:column;gap:var(--space-3)}.progress-info{display:flex;justify-content:space-between;align-items:center;font-weight:var(--font-semibold);font-size:var(--text-base);color:var(--color-text)}.progress-bar{width:100%;height:var(--space-6);background:var(--color-neutral-200);border-radius:var(--radius-md);overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--color-green-400);transition:width var(--duration-normal) var(--ease-default);border-radius:var(--radius-md)}.simple-game-content{display:flex;flex-direction:column;gap:var(--space-6);padding-bottom:var(--space-fluid-bottom)}.syllables-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--space-16) * 2 + var(--space-8)),1fr));gap:var(--space-4);padding:var(--space-6);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.syllable-button{padding:var(--space-3);font-size:var(--text-2xl);font-weight:var(--font-semibold);border:var(--border-width-thick) solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);background:var(--gradient-surface);color:var(--color-text);box-shadow:var(--shadow-sm);min-height:calc(var(--space-16) + var(--space-4));display:flex;align-items:center;justify-content:center}.syllable-button:hover:not(:disabled){border-color:var(--color-sky-400);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-syllable-hover);background:var(--color-neutral-100);color:var(--color-text)}.syllable-button:active:not(:disabled){color:var(--color-text)}.syllable-button:focus:not(:disabled){color:var(--color-text);outline:none}.syllable-button:disabled{cursor:not-allowed;opacity:var(--opacity-subtle)}.syllable-button.correct{background:var(--gradient-success);color:var(--color-text-on-brand);border-color:var(--color-green-600);animation:correctPulse var(--duration-normal) var(--ease-default)}.syllable-button.incorrect{background:var(--gradient-danger);color:var(--color-text-on-brand);border-color:var(--color-red-600);animation:incorrectShake var(--duration-normal) var(--ease-default)}.syllable-button.target-hint{border-color:var(--color-amber-400);background:var(--color-neutral-100);animation:hintPulse 1s var(--ease-default) infinite}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes incorrectShake{0%,to{transform:translate(0)}25%{transform:translate(calc(var(--space-2) * -1 - var(--space-1)))}75%{transform:translate(calc(var(--space-2) + var(--space-1)))}}@keyframes hintPulse{0%,to{box-shadow:var(--shadow-sm)}50%{box-shadow:var(--shadow-hint)}}.simple-game-controls{position:fixed;bottom:0;left:0;right:0;display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;background:var(--color-surface);box-shadow:var(--shadow-up);padding:var(--space-4) var(--space-6);z-index:var(--z-overlay);border-top:var(--border-width) solid var(--color-border)}.game-control-button{padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);box-shadow:var(--shadow-sm);color:var(--color-text-on-brand);min-width:calc(var(--space-16) * 3 + var(--space-8))}.repeat-button:hover:not(:disabled){filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}@media(max-width:768px){.simple-game-header h2,.simple-game-start h2{font-size:var(--text-2xl)}.difficulty-button{min-width:calc(var(--space-16) * 3 + var(--space-8));padding:var(--space-3) var(--space-6);font-size:var(--text-base)}.syllables-grid{grid-template-columns:repeat(auto-fill,minmax(calc(var(--space-16) * 2),1fr));gap:var(--space-3);padding:var(--space-4)}.syllable-button{padding:var(--space-2);font-size:var(--text-xl);min-height:calc(var(--space-14) + var(--space-2))}.simple-game-content{padding-bottom:calc(var(--space-16) * 3 + var(--space-8))}.simple-game-controls{padding:var(--space-3) var(--space-4)}.game-control-button{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);min-width:calc(var(--space-16) * 3 + var(--space-4))}}.word-builder-container{width:100%;max-width:calc(var(--space-10) * 35);display:flex;flex-direction:column;gap:var(--space-6);padding-bottom:var(--space-fluid-bottom)}.word-builder-start{text-align:center;padding:var(--space-8);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.word-builder-start h2{color:var(--color-heading);margin-bottom:var(--space-4);font-size:var(--text-3xl)}.word-builder-start p{color:var(--color-text-muted);margin-bottom:var(--space-8);font-size:var(--text-lg)}.word-builder-start-button,.word-builder-close-button{padding:var(--space-3) var(--space-8);font-size:var(--text-base);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);margin:var(--space-2);min-width:calc(var(--space-16) * 3 + var(--space-8))}.word-builder-start-button{background:var(--gradient-success);color:var(--color-text-on-color)}.word-builder-start-button:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.word-builder-close-button{background:var(--gradient-neutral);color:var(--color-text-on-color)}.word-builder-close-button:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1))}.word-builder-header{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-6)}.word-builder-header h2{color:var(--color-heading);margin:0 0 var(--space-4) 0;font-size:var(--text-fluid-lg);text-align:center}.word-builder-progress{display:flex;justify-content:center;gap:var(--space-8);font-weight:var(--font-semibold);font-size:var(--text-lg);color:var(--color-text)}.word-builder-content{display:flex;flex-direction:column;gap:var(--space-6)}.available-syllables-section,.current-word-section,.target-words-section{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-6)}.available-syllables-section h3,.current-word-section h3,.target-words-section h3{color:var(--color-heading);margin:0 0 var(--space-4) 0;font-size:var(--text-xl)}.syllables-grid{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}.syllable-button{padding:var(--space-3) var(--space-8);font-size:var(--text-fluid-lg);font-weight:var(--font-semibold);border:var(--border-width-thick) solid var(--color-border);border-radius:var(--radius-lg);background:var(--gradient-surface);color:var(--color-text);cursor:pointer;transition:var(--transition-default);min-width:calc(var(--space-16) + var(--space-10))}.syllable-button:hover:not(:disabled){background:var(--color-neutral-100);color:var(--color-text);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-syllable-hover)}.syllable-button.disabled,.syllable-button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed;background:var(--color-neutral-100);border-color:var(--color-neutral-200);color:var(--color-text-muted)}.current-word-display{display:flex;flex-wrap:wrap;gap:var(--space-3);min-height:calc(var(--space-16) + var(--space-4));padding:var(--space-4);background:var(--color-neutral-100);border-radius:var(--radius-md);border:var(--border-width) solid var(--color-border);align-items:center;justify-content:center}.empty-word{color:var(--color-text-muted);font-style:italic;text-align:center;width:100%}.word-syllables{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:center}.syllable-chip{padding:var(--space-3) var(--space-8);font-size:var(--text-fluid-lg);font-weight:var(--font-semibold);border:var(--border-width-thick) solid var(--color-sky-600);border-radius:var(--radius-lg);background:var(--gradient-accent);color:var(--color-text-on-color);cursor:pointer;transition:var(--transition-default);min-width:calc(var(--space-16) + var(--space-10))}.syllable-chip:hover{filter:brightness(.95);border-color:var(--color-sky-600);transform:scale(1.05)}.clear-word-button{display:block;margin:var(--space-4) auto 0;padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);color:var(--color-text-on-color);background:var(--gradient-danger);min-width:calc(var(--space-16) * 3 + var(--space-4))}.clear-word-button:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.word-slots{display:flex;flex-wrap:wrap;gap:var(--space-3);min-height:calc(var(--space-16) + var(--space-4));padding:var(--space-4);background:var(--color-neutral-100);border-radius:var(--radius-md);border:var(--border-width) solid var(--color-border);align-items:center;justify-content:center}.empty-slots{color:var(--color-text-muted);font-style:italic;text-align:center;width:100%}.word-syllable{padding:var(--space-3) var(--space-8);font-size:var(--text-fluid-lg);font-weight:var(--font-semibold);border:var(--border-width-thick) solid var(--color-sky-600);border-radius:var(--radius-lg);background:var(--gradient-accent);color:var(--color-text-on-color);cursor:pointer;transition:var(--transition-default);min-width:calc(var(--space-16) + var(--space-10))}.word-syllable:hover{filter:brightness(.95);border-color:var(--color-sky-600);transform:scale(1.05)}.word-actions{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-4)}.action-button{padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);color:var(--color-text-on-color);min-width:calc(var(--space-16) * 3 + var(--space-4))}.check-button{background:var(--gradient-success)}.check-button:hover:not(:disabled){filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.clear-button{background:var(--gradient-danger);padding:var(--space-4) var(--space-8);font-size:var(--text-xl)}.clear-button:hover:not(:disabled){filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.action-button:disabled{opacity:var(--opacity-muted);cursor:not-allowed}.word-limit-message{text-align:center;margin-top:var(--space-4);padding:var(--space-3);background:var(--color-neutral-100);border-radius:var(--radius-md);color:var(--color-text);font-weight:var(--font-semibold);font-size:var(--text-lg);border:var(--border-width) solid var(--color-amber-400)}.target-words-list{display:flex;flex-wrap:wrap;gap:var(--space-3)}.target-word{padding:var(--space-4) var(--space-8);background:var(--color-neutral-100);border-radius:var(--radius-md);font-weight:var(--font-bold);font-size:var(--text-2xl);color:var(--color-text);border:var(--border-width-thick) solid var(--color-accent);display:inline-block;transition:var(--transition-default);cursor:pointer;-webkit-user-select:none;user-select:none}.target-word:hover{background:var(--color-neutral-200);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.target-word:active{transform:translateY(0)}.target-word.current{border-color:var(--color-amber-400);box-shadow:var(--shadow-md)}.target-word.completed{background:var(--color-green-400);color:var(--color-text-on-color);border-color:var(--color-green-600)}.target-word.completed:hover{filter:brightness(.95);background:var(--color-green-400)}.word-builder-controls{position:fixed;bottom:0;left:0;right:0;display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;background:var(--color-surface);box-shadow:var(--shadow-up);padding:var(--space-4) var(--space-6);z-index:var(--z-overlay);border-top:var(--border-width) solid var(--color-border)}.hint-button{background:var(--gradient-warning)}.hint-button:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.new-game-button{background:var(--gradient-accent)}.new-game-button:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}@media(max-width:768px){.word-builder-header h2{font-size:var(--text-2xl)}.word-builder-progress{flex-direction:column;gap:var(--space-2)}.syllable-button,.syllable-chip,.word-syllable{font-size:var(--text-xl);padding:var(--space-3) var(--space-4);min-width:calc(var(--space-16) + var(--space-6))}.word-builder-controls{padding:var(--space-3) var(--space-4)}.control-button{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);min-width:calc(var(--space-16) * 3 + var(--space-4))}}.word-composer-container{width:100%;max-width:calc(var(--space-10) * 35);display:flex;flex-direction:column;gap:var(--space-6);position:relative;padding-bottom:calc(var(--space-16) * 3 + var(--space-8))}.letter-tile-drag-ghost{position:fixed;width:var(--space-14);height:var(--space-14);margin-left:calc(var(--space-14) / -2);margin-top:calc(var(--space-14) / -2);display:flex;align-items:center;justify-content:center;font-size:var(--text-fluid-lg);font-weight:var(--font-semibold);border:var(--border-width-thick) solid var(--color-sky-600);border-radius:var(--radius-md);background:var(--gradient-surface);color:var(--color-text);box-shadow:var(--shadow-lg);pointer-events:none;z-index:var(--z-overlay)}@media(max-width:768px){.letter-tile-drag-ghost{width:var(--size-touch-lg);height:var(--size-touch-lg);margin-left:calc(var(--size-touch-lg) / -2);margin-top:calc(var(--size-touch-lg) / -2);font-size:var(--text-2xl)}}.word-composer-start{text-align:center;padding:var(--space-8);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.word-composer-start h2{color:var(--color-heading);margin-bottom:var(--space-4);font-size:var(--text-3xl)}.word-composer-start p{color:var(--color-text-muted);margin-bottom:var(--space-8);font-size:var(--text-lg)}.word-composer-close-button{padding:var(--space-3) var(--space-8);font-size:var(--text-base);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);background:var(--gradient-neutral);color:var(--color-text-on-color);min-width:calc(var(--space-16) * 3 + var(--space-8))}.word-composer-close-button:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1))}.word-composer-header{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-6)}.word-composer-header h2{color:var(--color-heading);margin:0 0 var(--space-4) 0;font-size:var(--text-fluid-lg);text-align:center}.word-composer-header .game-complete{text-align:center;padding:var(--space-2) 0}.word-composer-header .game-complete p{margin:0;font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-green-600)}.word-composer-content{display:flex;flex-direction:column;gap:var(--space-6);flex:1;min-height:0}.letter-slots-section{display:flex;justify-content:center;align-items:center;gap:var(--space-4);padding:var(--space-6);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);min-height:calc(var(--space-16) * 2 + var(--space-8))}.letter-slots-row{display:flex;justify-content:center;align-items:center;gap:var(--space-2);flex-wrap:wrap}.speak-composed-button{width:var(--size-touch-lg);height:var(--size-touch-lg);padding:0;font-size:var(--text-2xl);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;transition:var(--transition-fast);flex-shrink:0}.speak-composed-button:hover:not(:disabled){background:var(--color-neutral-100);transform:translateY(calc(var(--border-width-thin) * -1))}.speak-composed-button:disabled{opacity:var(--opacity-muted);cursor:not-allowed}.letter-slot{width:var(--space-14);height:var(--space-14);display:flex;align-items:center;justify-content:center;font-size:var(--text-fluid-lg);font-weight:var(--font-semibold);border:var(--border-width-thick) solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);background:var(--gradient-surface);color:var(--color-text)}.letter-slot.empty{background:var(--color-neutral-100)}.letter-slot.filled{background:var(--gradient-surface);cursor:grab}.letter-slot.filled:active{cursor:grabbing}.letter-slot.correct{background:var(--gradient-success);color:var(--color-text-on-color);border-color:var(--color-green-600)}.letter-slot.wrong-position{background:var(--gradient-danger);color:var(--color-text-on-color);border-color:var(--color-red-600)}.letter-slot.incorrect{background:var(--color-neutral-100);color:var(--color-text);border-color:var(--color-red-400)}.letter-slot:focus{outline:none}.letter-slot.empty:focus-visible{border-color:var(--color-sky-400);box-shadow:var(--shadow-syllable-hover)}.letter-pool-section{flex:1;display:flex;flex-direction:column;min-height:calc(var(--space-16) * 3 + var(--space-8))}.letter-pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--space-14),1fr));gap:var(--space-3);padding:var(--space-6);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.letter-tile{width:var(--space-14);height:var(--space-14);display:flex;align-items:center;justify-content:center;font-size:var(--text-fluid-lg);font-weight:var(--font-semibold);border:var(--border-width-thick) solid var(--color-border);border-radius:var(--radius-md);cursor:grab;transition:var(--transition-fast);background:var(--gradient-surface);color:var(--color-text);justify-self:center}.letter-tile:hover:not(.disabled){border-color:var(--color-sky-400);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-sm)}.letter-tile.selected{border-color:var(--color-sky-400);background:var(--gradient-accent);box-shadow:var(--shadow-syllable-hover)}.letter-tile.disabled{cursor:default;opacity:var(--opacity-subtle)}.letter-tile:focus{outline:none}.letter-tile:focus-visible:not(.disabled){border-color:var(--color-sky-400);box-shadow:var(--shadow-syllable-hover)}.difficulty-button{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);min-width:calc(var(--space-16) * 5 + var(--space-10));color:var(--color-text-on-color);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.difficulty-button.easy{background:var(--gradient-success)}.difficulty-button.easy:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.difficulty-button.medium{background:var(--gradient-warning)}.difficulty-button.medium:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.difficulty-button.hard{background:var(--gradient-danger)}.difficulty-button.hard:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.reward-badge{font-size:var(--text-lg);font-weight:var(--font-semibold);background:var(--color-badge-overlay);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}@media(max-width:768px){.word-composer-header h2,.word-composer-start h2{font-size:var(--text-2xl)}.difficulty-button{min-width:calc(var(--space-16) * 3 + var(--space-8));padding:var(--space-3) var(--space-6);font-size:var(--text-base)}.letter-slot,.letter-tile{width:var(--size-touch-lg);height:var(--size-touch-lg);font-size:var(--text-2xl)}.letter-pool-grid{grid-template-columns:repeat(auto-fill,minmax(var(--size-touch-lg),1fr));gap:var(--space-2);padding:var(--space-4)}.letter-slots-section{padding:var(--space-4);min-height:calc(var(--space-16) * 2)}}.memory-card{position:relative;width:100%;aspect-ratio:1;border:var(--border-width-thick) solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);background:var(--gradient-surface);box-shadow:var(--shadow-sm);perspective:calc(var(--space-16) * 16);overflow:hidden;padding:0;margin:0;display:block;text-align:center}.memory-card:disabled{cursor:not-allowed}.memory-card:not(:disabled):hover{transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.memory-card .card-front,.memory-card .card-back{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;transition:transform var(--duration-normal) var(--ease-default);box-sizing:border-box}.memory-card .card-front{background:var(--color-surface);color:var(--color-text);transform:rotateY(180deg)}.memory-card .card-back{background:var(--gradient-teal);color:var(--color-text-on-brand);transform:rotateY(0)}.memory-card.flipped .card-front,.memory-card.matched .card-front{transform:rotateY(0)}.memory-card.flipped .card-back,.memory-card.matched .card-back{transform:rotateY(180deg)}.memory-card.matched{border-color:var(--color-green-400);box-shadow:var(--shadow-md);animation:matchPulse var(--duration-normal) var(--ease-default)}.memory-card.matched .card-front{background:var(--color-neutral-100)}.card-syllable{font-size:var(--text-icon-sm);font-weight:var(--font-bold);text-shadow:var(--shadow-text);display:block;line-height:1;margin:0;padding:0}.card-question{font-size:var(--text-icon);font-weight:var(--font-bold);opacity:.6;display:block;line-height:1;margin:0;padding:0}@keyframes matchPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@media(max-width:768px){.card-syllable{font-size:var(--text-4xl)}.card-question{font-size:var(--text-fluid-icon)}}.memory-match-container{width:100%;max-width:calc(var(--space-10) * 35);display:flex;flex-direction:column;gap:var(--space-6);position:relative;padding-bottom:calc(var(--space-16) * 3 + var(--space-8))}.memory-match-start{text-align:center;padding:var(--space-8);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.memory-match-start h2{color:var(--color-heading);margin-bottom:var(--space-4);font-size:var(--text-3xl)}.memory-match-start p{color:var(--color-text-muted);margin-bottom:var(--space-8);font-size:var(--text-lg)}.difficulty-selection{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-8);align-items:center}.difficulty-button{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);min-width:calc(var(--space-16) * 5 + var(--space-10));color:var(--color-text-on-color);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.difficulty-info{font-size:var(--text-sm);opacity:var(--opacity-badge);font-weight:var(--font-normal)}.reward-badge{font-size:var(--text-lg);font-weight:var(--font-semibold);background:var(--color-badge-overlay);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);margin-top:var(--space-1)}.difficulty-button.difficulty-easy{background:var(--gradient-success)}.difficulty-button.difficulty-easy:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.difficulty-button.difficulty-medium{background:var(--gradient-warning)}.difficulty-button.difficulty-medium:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.difficulty-button.difficulty-hard{background:var(--gradient-danger)}.difficulty-button.difficulty-hard:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.memory-match-close-button{padding:var(--space-3) var(--space-8);font-size:var(--text-base);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);background:var(--gradient-neutral);color:var(--color-text-on-color);min-width:calc(var(--space-16) * 3 + var(--space-8))}.memory-match-close-button:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1))}.memory-match-header{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-6)}.memory-match-header h2{color:var(--color-heading);margin:0 0 var(--space-4) 0;font-size:var(--text-fluid-lg);text-align:center}.game-stats{display:flex;justify-content:center;gap:var(--space-8);margin-bottom:var(--space-4)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.stat-value{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-text)}.game-complete{text-align:center;padding:var(--space-4);background:var(--gradient-success);border-radius:var(--radius-md);color:var(--color-text-on-brand);font-weight:var(--font-semibold);font-size:var(--text-xl);margin-top:var(--space-4);animation:completePulse 1s var(--ease-default) infinite}@keyframes completePulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.memory-match-content{display:flex;flex-direction:column;gap:var(--space-6);padding-bottom:var(--space-fluid-bottom)}.cards-grid{display:grid;gap:var(--space-6);padding:var(--space-8);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);max-width:100%;margin:0 auto}.cards-grid>*{min-width:calc(var(--space-16) * 2 + var(--space-8));min-height:calc(var(--space-16) * 2 + var(--space-8))}.memory-match-controls{position:fixed;bottom:0;left:0;right:0;display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;background:var(--color-surface);box-shadow:var(--shadow-up);padding:var(--space-4) var(--space-6);z-index:var(--z-overlay);border-top:var(--border-width) solid var(--color-border)}.game-control-button{padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);box-shadow:var(--shadow-sm);color:var(--color-text-on-color);min-width:calc(var(--space-16) * 3 + var(--space-8))}.restart-button{background:var(--gradient-warning)}.restart-button:hover:not(:disabled){filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.stop-button:hover:not(:disabled){filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.close-button:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}@media(max-width:768px){.memory-match-header h2,.memory-match-start h2{font-size:var(--text-2xl)}.difficulty-button{min-width:calc(var(--space-16) * 3 + var(--space-8));padding:var(--space-3) var(--space-6);font-size:var(--text-base)}.cards-grid{gap:var(--space-4);padding:var(--space-6)}.cards-grid>*{min-width:calc(var(--space-16) * 2);min-height:calc(var(--space-16) * 2)}.memory-match-content{padding-bottom:calc(var(--space-16) * 3 + var(--space-8))}.memory-match-controls{padding:var(--space-3) var(--space-4)}.game-control-button{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);min-width:calc(var(--space-16) * 3 + var(--space-4))}.game-stats{gap:var(--space-4)}.stat-value{font-size:var(--text-xl)}}.syllable-cell{width:100%;height:100%;min-width:calc(var(--size-touch) + var(--space-4));min-height:calc(var(--size-touch) + var(--space-4));border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);background:var(--gradient-surface);font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--color-text);cursor:pointer;transition:var(--transition-default);display:flex;align-items:center;justify-content:center;padding:var(--space-1);box-shadow:var(--shadow-sm)}.syllable-cell:hover:not(.active){transform:translateY(calc(var(--space-1) * -.5));box-shadow:var(--shadow-md);border-color:var(--color-accent);filter:brightness(.95)}.syllable-cell.active{background:var(--gradient-accent);color:var(--color-text-on-brand);border-color:var(--color-sky-600);transform:scale(1.05);box-shadow:var(--shadow-syllable-hover)}.syllable-cell.animating{animation:pulse calc(var(--duration-fast) * 4) var(--ease-default)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1.05)}}@media(max-width:768px){.syllable-cell{min-width:var(--space-12);min-height:var(--space-12);font-size:var(--text-xl)}}.syllable-table-container{width:100%;overflow-x:auto;padding:var(--space-4);background:var(--color-neutral-100);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.syllable-table{width:100%;border-collapse:separate;border-spacing:var(--space-2);margin:0 auto}.table-header{padding:var(--space-3);text-align:center;font-weight:var(--font-bold);font-size:var(--text-xl)}.vowel-header{color:var(--color-text-on-color);background:var(--gradient-brand);border-radius:var(--radius-md);min-width:calc(var(--space-16) - var(--space-4))}.consonant-header{color:var(--color-text-on-color);background:var(--gradient-accent);border-radius:var(--radius-md);min-width:calc(var(--space-16) - var(--space-4))}.empty{background:transparent;border:none}.table-cell{padding:var(--space-1)}@media(max-width:768px){.syllable-table-container{padding:var(--space-2)}.syllable-table{border-spacing:var(--space-1)}.table-header{padding:var(--space-2);font-size:var(--text-lg)}.vowel-header,.consonant-header{min-width:calc(var(--space-16) - var(--space-6))}}.controls{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;padding:var(--space-6);background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:var(--space-8)}.control-button{padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);box-shadow:var(--shadow-sm);color:var(--color-text-on-color);min-width:calc(var(--space-16) * 3 + var(--space-8))}.play-all-button{background:var(--gradient-success)}.play-all-button:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.order-toggle-button{background:var(--gradient-purple)}.order-toggle-button:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.order-toggle-button.active{background:var(--gradient-warning)}.auto-play-button{background:var(--gradient-accent)}.auto-play-button:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}.auto-play-button.active{background:var(--gradient-accent);animation:pulse-button 2s infinite}.auto-play-button.active:hover{filter:brightness(.95)}.stop-button:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1));box-shadow:var(--shadow-md)}@keyframes pulse-button{0%,to{opacity:1}50%{opacity:.8}}@media(max-width:768px){.controls{padding:var(--space-4);gap:var(--space-3)}.control-button{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);min-width:calc(var(--space-16) * 3 + var(--space-4))}}.game-container{width:100%;max-width:1400px;display:flex;flex-direction:column;gap:var(--space-6);padding-bottom:calc(var(--space-10) * 2 + var(--space-5))}.game-header{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-6)}.game-header h2{color:var(--color-heading);margin:0 0 var(--space-4) 0;font-size:var(--text-3xl);text-align:center}.game-progress{display:flex;align-items:center;gap:var(--space-4)}.progress-bar{flex:1;height:var(--space-6);background:var(--color-border);border-radius:var(--radius-md);overflow:hidden;position:relative}.progress-fill{height:100%;background:var(--gradient-success);transition:width var(--duration-normal) var(--ease-default);border-radius:var(--radius-md)}.progress-text{font-weight:var(--font-semibold);font-size:var(--text-lg);color:var(--color-text);min-width:calc(var(--size-touch) + var(--space-4));text-align:center}.game-content{display:flex;flex-direction:column;gap:var(--space-6);padding-bottom:calc(var(--space-10) * 3)}.game-controls{position:fixed;bottom:0;left:0;right:0;display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;background:var(--color-surface);box-shadow:var(--shadow-up);padding:var(--space-4) var(--space-6);z-index:var(--z-overlay);border-top:var(--border-width) solid var(--color-border)}.game-control-button{padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-default);box-shadow:var(--shadow-knob);color:var(--color-text-on-brand);min-width:calc(var(--space-10) * 4)}.game-control-button:hover:not(:disabled){filter:brightness(.95);transform:translateY(calc(var(--space-1) * -.5))}.game-control-button:disabled{opacity:var(--opacity-muted);cursor:not-allowed;transform:none}.repeat-button{background:var(--gradient-accent)}.repeat-button:hover:not(:disabled){box-shadow:var(--shadow-syllable-hover)}.stop-button{background:var(--gradient-danger)}.stop-button:hover:not(:disabled){box-shadow:var(--shadow-lg)}.close-button{background:var(--gradient-neutral)}.close-button:hover{box-shadow:var(--shadow-lg)}@media(max-width:768px){.game-header h2{font-size:var(--text-2xl)}.game-content{padding-bottom:calc(var(--space-10) * 2 + var(--space-5))}.game-controls{padding:var(--space-3) var(--space-4)}.game-control-button{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);min-width:calc(var(--space-5) * 7)}}.story-reader{width:100%;max-width:calc(var(--space-10) * 23);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-5);padding-bottom:calc(var(--space-10) * 2 + var(--space-5))}.story-reader-panel{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-8) var(--space-fluid-panel-x);box-shadow:var(--shadow-panel);border:var(--border-width-thin) solid var(--color-border)}.story-reader-panel--intro,.story-reader-panel--quiz{text-align:center}.story-reader-panel__hero{margin-bottom:calc(var(--space-6) + var(--space-1))}.story-reader-panel__hero--compact{margin-bottom:var(--space-5)}.story-reader-panel__emoji{display:block;font-size:var(--text-fluid-emoji);line-height:1;margin-bottom:var(--space-2)}.story-reader-panel__title{color:var(--color-heading);font-size:var(--text-fluid-lg);font-weight:var(--font-bold);margin:0 0 var(--space-2);letter-spacing:-.02em}.story-reader-panel__subtitle{color:var(--color-text-muted);font-size:var(--text-fluid-sm);line-height:var(--leading-normal);margin:0;max-width:calc(var(--space-8) * 16);margin-inline:auto}.story-reader-go-quiz-wrap{display:flex;justify-content:center;padding:var(--space-2) var(--space-4) 0}.story-reader-go-quiz-btn{padding:var(--space-fluid-gap-sm) var(--space-6);border:none;border-radius:var(--radius-panel);font-size:var(--text-fluid-sm);font-weight:var(--font-bold);color:var(--color-text-on-brand);cursor:pointer;background:var(--gradient-accent);box-shadow:var(--shadow-md);touch-action:manipulation}.story-reader-go-quiz-btn:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -1))}.story-reader-reading-header{text-align:center;padding:0 var(--space-2)}.story-reader-reading-header__top{margin-bottom:var(--space-4)}.story-reader-reading-header__badge{display:inline-block;font-size:var(--text-xs);font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-on-brand);background:var(--color-badge-overlay);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);margin-bottom:var(--space-2)}.story-reader-reading-header__title{color:var(--color-heading);font-size:var(--text-2xl);font-weight:var(--font-bold);margin:0;line-height:var(--leading-tight)}.story-reader-progress{height:var(--space-2);background:var(--color-neutral-200);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-fluid-gap-sm)}.story-reader-progress__fill{height:100%;background:var(--color-green-400);border-radius:var(--radius-full);transition:width var(--duration-fast) var(--ease-default)}.story-reader-reading-header__hint{color:var(--color-text-muted);font-size:var(--text-sm);margin:0}.story-reader-text{background:var(--color-neutral-100);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8) calc(var(--space-8) + var(--space-1));box-shadow:var(--shadow-sm);font-size:var(--text-fluid-lg);line-height:2.4;cursor:pointer;-webkit-user-select:none;user-select:none;min-height:calc(var(--space-14) * 3 + var(--space-10) + var(--space-3))}.story-reader-space{display:inline-block;width:.65em;flex-shrink:0}.story-reader-word{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.06em;margin:0 0 .35em;vertical-align:baseline}.story-reader-syllable{display:inline-block;padding:.12em .28em;border:var(--border-width) solid var(--color-border);border-radius:var(--radius-sm);background:var(--gradient-surface);line-height:var(--leading-tight);transition:color var(--duration-fast) var(--ease-default),border-color var(--duration-fast) var(--ease-default),background var(--duration-fast) var(--ease-default),box-shadow var(--duration-fast) var(--ease-default),transform var(--duration-fast) var(--ease-default)}.story-reader-word.unread .story-reader-syllable{color:var(--color-text-muted);border-color:var(--color-neutral-200);background:var(--color-neutral-100)}.story-reader-word.read .story-reader-syllable{color:var(--color-green-600);border-color:var(--color-green-400);background:var(--color-neutral-100)}.story-reader-word.in-progress .story-reader-syllable.past-in-word{color:var(--color-text-muted);border-color:var(--color-neutral-200);background:var(--color-neutral-100)}.story-reader-word.in-progress .story-reader-syllable:not(.current):not(.past-in-word){color:var(--color-text-muted);border-color:var(--color-neutral-200);background:var(--color-neutral-100)}.story-reader-word .story-reader-syllable.current{position:relative;z-index:var(--z-base);color:var(--color-text-on-brand);font-weight:var(--font-bold);font-size:1.12em;padding:.18em .36em;border-width:var(--border-width-thick);border-color:var(--color-sky-600);background:var(--gradient-accent);box-shadow:var(--shadow-syllable-hover);transform:scale(1.1);animation:story-reader-syllable-pulse calc(var(--duration-normal) * 4) var(--ease-default) infinite}@keyframes story-reader-syllable-pulse{0%,to{box-shadow:var(--shadow-syllable-hover)}50%{box-shadow:var(--shadow-md)}}.story-reader-punct.unread{color:var(--color-text-muted)}.story-reader-punct.read{color:var(--color-green-600)}.story-reader-punct.current-context{color:var(--color-amber-600)}.story-reader-quiz-question{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-text);line-height:1.45;margin:0 0 var(--space-6);padding:var(--space-4) var(--space-5);background:var(--color-neutral-100);border-radius:var(--radius-md);border-left:var(--space-1) solid var(--color-accent)}.story-reader-quiz-options{display:flex;flex-direction:column;gap:var(--space-3);max-width:calc(var(--space-10) * 13);margin:0 auto}.story-reader-quiz-option{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-panel);background:var(--color-surface);font-size:var(--text-lg);cursor:pointer;text-align:left;transition:var(--transition-fast);width:100%}.story-reader-quiz-option:hover:not(:disabled){border-color:var(--color-sky-400);background:var(--color-neutral-100);transform:translate(var(--space-1));filter:brightness(.95)}.story-reader-quiz-option:disabled{opacity:var(--opacity-subtle);cursor:not-allowed}.story-reader-quiz-option__num{flex-shrink:0;width:calc(var(--space-4) + var(--space-6));height:calc(var(--space-4) + var(--space-6));display:flex;align-items:center;justify-content:center;background:var(--gradient-accent);color:var(--color-text-on-brand);border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-base)}.story-reader-quiz-option__text{flex:1;color:var(--color-text)}.story-reader-quiz-listening{display:flex;align-items:center;justify-content:center;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--text-fluid-sm);margin:var(--space-5) 0 0;font-weight:var(--font-medium)}.story-reader-quiz-listening__dot{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-full);background:var(--color-green-400);animation:story-reader-listen-pulse var(--duration-normal) var(--ease-default) infinite}@keyframes story-reader-listen-pulse{0%,to{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}@media(max-width:600px){.story-reader-text{font-size:var(--text-fluid-base);padding:var(--space-6) var(--space-5)}.story-reader-panel{padding:var(--space-6) var(--space-5)}.story-reader-difficulty-btn{padding:var(--space-fluid-gap-sm) var(--space-4)}}.piano-keyboard-container{display:flex;justify-content:center;padding:clamp(var(--space-2),2vw,var(--space-5));width:100%;overflow-x:auto}.piano-keyboard{position:relative;display:flex;justify-content:center;align-items:flex-start;gap:clamp(var(--space-2),2vw,var(--space-5));max-width:100%;margin:0 auto}.piano-keyboard-multiple{min-width:fit-content}.piano-octave{display:flex;flex-direction:column;gap:clamp(var(--space-1),1vw,var(--space-2));position:relative}.octave-label{text-align:center;font-size:var(--text-fluid-xs);font-weight:var(--font-bold);color:var(--color-text-muted);margin-bottom:var(--space-1)}.piano-octave-keys{position:relative;display:flex;justify-content:center;align-items:flex-start}.piano-keys-white{display:flex;position:relative;gap:0;z-index:var(--z-base)}.piano-keys-black{display:flex;position:absolute;top:0;left:0;right:0;justify-content:center;gap:0;z-index:calc(var(--z-base) + 1);pointer-events:none}.piano-key{cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:clamp(var(--space-1),1vw,var(--space-2)) clamp(var(--space-1),.8vw,var(--space-2));box-shadow:var(--shadow-sm);transition:var(--transition-fast);touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:none}.piano-key-white{min-width:var(--size-piano-white-key);min-height:var(--size-piano-white-key-height);width:var(--size-piano-white-key);max-width:calc(var(--space-10) * 2 + var(--space-5));background:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:0 0 var(--radius-sm) var(--radius-sm);position:relative}.piano-key-black{min-width:var(--size-piano-black-key);min-height:var(--size-piano-black-key-height);width:var(--size-piano-black-key);max-width:calc(var(--space-8) + var(--space-6));background:var(--color-neutral-800);border:var(--border-width-thin) solid var(--color-neutral-600);border-radius:0 0 var(--space-1) var(--space-1);position:absolute;pointer-events:auto;margin-left:calc(var(--size-piano-black-key) / -2)}.piano-key:hover:not(:disabled){transform:translateY(var(--space-1));box-shadow:var(--shadow-text)}.piano-key-white:hover:not(:disabled){background:var(--color-neutral-100)}.piano-key-black:hover:not(:disabled){background:var(--color-neutral-600)}.piano-key:active:not(:disabled){transform:translateY(var(--space-2));box-shadow:var(--shadow-inset-press)}.piano-key-white:active:not(:disabled){background:var(--color-neutral-200)}.piano-key-black:active:not(:disabled){background:var(--color-neutral-800)}.piano-key:disabled{opacity:var(--opacity-subtle);cursor:not-allowed}.piano-key.highlighted{box-shadow:var(--shadow-syllable-hover);border-color:var(--color-sky-400)}.piano-key-white.highlighted{background:var(--gradient-accent)}.piano-key-black.highlighted{background:var(--color-sky-600)}.piano-key.highlighted:active:not(:disabled){box-shadow:var(--shadow-md)}.note-name{font-size:clamp(var(--text-xs),1.5vw,var(--text-sm));font-weight:var(--font-bold);color:var(--color-text);margin-bottom:var(--border-width-thin)}.piano-key-black .note-name{color:var(--color-text-on-color);font-size:calc(clamp(var(--text-xs),1.5vw,var(--text-sm))*.85);text-shadow:var(--shadow-text-strong)}.note-name-en{font-size:clamp(calc(var(--text-xs) * .9),1.2vw,var(--text-xs));color:var(--color-text-muted)}.piano-key-black .note-name-en{color:var(--color-text-on-color);font-size:calc(clamp(calc(var(--text-xs) * .9),1.2vw,var(--text-xs))*.85);text-shadow:var(--shadow-text-strong)}.note-octave{font-size:clamp(calc(var(--text-xs) * .75),1vw,var(--text-xs));color:var(--color-text-muted);margin-top:var(--border-width-thin)}.piano-key.highlighted .note-name,.piano-key.highlighted .note-name-en,.piano-key-black.highlighted .note-name,.piano-key-black.highlighted .note-name-en{color:var(--color-text-on-color)}@media(max-width:768px){.piano-keyboard{gap:var(--space-3)}}@media(max-width:480px){.piano-keyboard{gap:var(--space-2)}}.dual-staff-note-container{display:flex;justify-content:center;align-items:center;width:100%;padding:var(--space-4);min-height:calc(var(--space-14) * 4 + var(--space-4));color:var(--color-text);background:var(--color-neutral-100);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-panel)}.dual-staff-viewport{position:relative;max-width:100%;overflow:hidden}.dual-staff-canvas{line-height:0}.dual-staff-canvas svg{display:block;max-width:none}.record-coin{position:absolute;top:0;z-index:2;font-size:1.35rem;line-height:1;pointer-events:none}.dual-staff-viewport:has(.record-coin.is-flying-to-coins){overflow:visible}@media(max-width:768px){.dual-staff-note-container{padding:var(--space-3)}.dual-staff-viewport{transform:scale(.85);transform-origin:center center}}@media(max-width:480px){.dual-staff-viewport{transform:scale(.7)}}.endless-note-game-container{display:flex;flex-direction:column;gap:var(--space-6);min-height:100vh;padding:var(--space-5);padding-bottom:calc(var(--space-16) + var(--space-8));max-width:calc(var(--space-10) * 35);margin:0 auto}.endless-note-game-header,.endless-note-game-content{background:var(--color-surface-elevated);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-panel)}.endless-note-game-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);padding:var(--space-5) var(--space-6)}.endless-note-game-header h2{font-size:var(--text-fluid-lg);margin:0;text-align:center;color:var(--color-text);letter-spacing:-.02em}.endless-note-game-stats{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);justify-content:center;width:100%;padding:var(--space-3) var(--space-4);background:var(--color-neutral-100);border-radius:var(--radius-panel)}.stat-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);min-width:4.5rem}.stat-label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--font-medium)}.stat-value{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--color-text);line-height:var(--leading-tight)}.endless-note-game-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--space-6);padding:var(--space-6)}.instruction-text{min-height:var(--space-8);text-align:center}.instruction-text p{font-size:var(--text-lg);color:var(--color-text);margin:0;font-weight:var(--font-medium)}@media(max-width:768px){.endless-note-game-container{padding:var(--space-3);padding-bottom:calc(var(--space-16) + var(--space-6));gap:var(--space-4)}.endless-note-game-header{gap:var(--space-4);padding:var(--space-4)}.endless-note-game-header h2{font-size:var(--text-2xl)}.endless-note-game-stats{gap:var(--space-3) var(--space-4);padding:var(--space-3)}.stat-label{font-size:var(--text-xs)}.stat-value{font-size:var(--text-xl)}.endless-note-game-content{gap:var(--space-5);padding:var(--space-4)}.instruction-text p{font-size:var(--text-base)}}@media(max-width:480px){.endless-note-game-header h2{font-size:var(--text-xl)}.stat-item{min-width:3.75rem}.stat-value{font-size:var(--text-lg)}}.claw-machine-root{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;background:var(--gradient-scene);touch-action:none;border-radius:var(--radius-xl)}.claw-machine-body,.claw-machine-canvas{position:absolute;inset:0}.claw-machine-body--desktop .claw-machine-canvas{right:calc(var(--space-4) + min(360px,calc(100% - 2 * var(--space-4))))}.claw-machine-canvas canvas{width:100%!important;height:100%!important;display:block}.claw-machine-panel{position:absolute;z-index:12;display:flex;flex-direction:column;justify-content:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--color-surface, #fff) 96%,white);box-shadow:var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, .2));overflow:auto;-webkit-overflow-scrolling:touch;pointer-events:auto;top:calc(var(--space-4) + 3.75rem);right:var(--space-4);bottom:var(--space-4);width:min(360px,calc(100% - 2 * var(--space-4)))}.claw-machine-body--tablet .claw-machine-panel{top:auto;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);width:auto;max-height:min(42%,420px);justify-content:flex-start}.claw-hud,.claw-hud *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.claw-hud{display:flex;flex-direction:column;gap:var(--space-3)}.claw-status-line{margin:0;text-align:center;color:var(--color-text-muted);font-size:var(--text-lg);min-height:1.4em;line-height:var(--leading-tight)}.claw-status-line--empty{visibility:hidden}.claw-hud--tablet .claw-status-line{font-size:var(--text-xl)}.claw-play-button{width:100%;min-height:var(--space-16);padding:var(--space-4) var(--space-6);font-size:var(--text-xl);font-weight:var(--font-bold);border:none;border-radius:var(--radius-panel);background:var(--gradient-warning);color:var(--color-text);cursor:pointer;touch-action:manipulation;box-shadow:var(--shadow-press-md);transition:var(--transition-fast)}.claw-play-button:not(:disabled):hover{filter:brightness(.95)}.claw-play-button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed;box-shadow:none;background:var(--color-disabled-bg);color:var(--color-disabled-text)}.claw-play-button:not(:disabled):active{transform:translateY(var(--space-1));box-shadow:var(--shadow-sm)}.claw-play-button__coin{white-space:nowrap}.claw-hud-play-area{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-3)}.claw-hud--desktop .claw-hud-play-area{align-items:center}.claw-move-controls{display:flex;align-items:center;justify-content:center}.claw-grab-button{width:100%;min-height:var(--space-14);padding:var(--space-3) var(--space-5);font-size:var(--text-lg);font-weight:var(--font-bold);border:none;border-radius:var(--radius-panel);background:var(--gradient-success);color:var(--color-text-on-color);cursor:pointer;touch-action:manipulation;box-shadow:var(--shadow-press-md);transition:var(--transition-fast)}.claw-grab-button:not(:disabled):hover{filter:brightness(.95)}.claw-grab-button:disabled{opacity:var(--opacity-disabled);cursor:not-allowed;box-shadow:none}.claw-grab-button:not(:disabled):active{transform:translateY(var(--space-1));box-shadow:var(--shadow-sm)}.claw-grab-button--touch{min-height:var(--space-16);font-size:var(--text-xl);padding:var(--space-4) var(--space-6)}.claw-joystick{width:var(--size-joystick);height:var(--size-joystick);border-radius:50%;background:var(--color-overlay-heavy);border:var(--border-width-thick) solid var(--color-neutral-600);position:relative;touch-action:none;flex-shrink:0;-webkit-tap-highlight-color:transparent}.claw-joystick--large{width:var(--size-joystick-lg);height:var(--size-joystick-lg)}.claw-joystick--large .claw-joystick-knob{width:var(--size-joystick-knob-lg);height:var(--size-joystick-knob-lg)}.claw-joystick--disabled{opacity:.4;pointer-events:none}.claw-joystick-knob{position:absolute;left:50%;top:50%;width:var(--size-joystick-knob);height:var(--size-joystick-knob);border-radius:50%;background:var(--gradient-warning);box-shadow:var(--shadow-knob);pointer-events:none}.claw-keyboard-hint{margin:0;text-align:center;font-size:var(--text-xs);color:var(--color-text-muted)}.reward-modal-overlay{position:fixed;inset:0;background:var(--color-overlay-heavy);display:flex;align-items:center;justify-content:center;z-index:var(--z-fixed)}.reward-modal{background:var(--color-surface-elevated);border:var(--border-width) solid var(--color-border);border-radius:calc(var(--radius-panel) + var(--space-1));padding:var(--space-6);max-width:calc(var(--space-10) * 9);width:90%;text-align:center;color:var(--color-text);box-shadow:var(--shadow-xl)}.reward-modal-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}.reward-modal-header h3{margin:0;font-size:var(--text-xl);color:var(--color-text)}.modal-close{flex-shrink:0;background:var(--color-badge-overlay);border:var(--border-width-thin) solid var(--color-border);color:var(--color-text);width:var(--size-touch-lg);height:var(--size-touch-lg);border-radius:var(--radius-panel);font-size:var(--text-xl);cursor:pointer;touch-action:manipulation}.modal-close:active{transform:scale(.96)}.reward-modal-content p{margin:var(--space-2) 0;color:var(--color-text-muted)}.reward-name{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-text)!important}.reward-description{color:var(--color-text-muted)!important}.reward-modal-preview{width:100%;max-width:calc(var(--space-10) * 7);margin:var(--space-3) auto;border-radius:var(--radius-panel);overflow:hidden;background:var(--color-neutral-800);border:var(--border-width-thin) solid var(--color-border)}.reward-modal-canvas{height:calc(var(--space-16) * 3 + var(--space-2))}.reward-modal-done{margin-top:var(--space-4)}@media(min-width:1024px){.reward-modal-canvas{height:calc(var(--space-16) * 3 + var(--space-6) + var(--space-1))}.claw-hud--desktop .claw-play-button{min-height:var(--space-14);font-size:var(--text-lg);padding:var(--space-3) var(--space-5)}}@media(max-width:1023px)and (orientation:portrait){.claw-machine-portrait-hint{display:flex}}.claw-machine-portrait-hint{display:none;position:absolute;inset:0;z-index:5;align-items:center;justify-content:center;background:var(--color-overlay-heavy);color:var(--color-text);font-size:var(--text-lg);font-weight:var(--font-bold);text-align:center;padding:var(--space-6);pointer-events:none;-webkit-user-select:none;user-select:none}.collection-container{display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;overflow:hidden;background:var(--gradient-scene);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.collection-container *,.collection-container *:before,.collection-container *:after{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.collection-header{display:flex;align-items:center;justify-content:center;padding:var(--space-3) var(--space-5);flex-shrink:0;z-index:var(--z-dropdown)}.collection-header h1{margin:0;font-size:var(--text-2xl);color:var(--color-heading)}.collection-bottom-hud{flex-shrink:0;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:var(--space-2) var(--space-4) max(var(--space-3),env(safe-area-inset-bottom));background:var(--color-surface-glass);border-top:var(--border-width) solid var(--color-border);z-index:var(--z-dropdown)}.collection-detail-close{background:var(--color-neutral-100);border:var(--border-width-thin) solid var(--color-border);color:var(--color-text);width:var(--size-touch);height:var(--size-touch);border-radius:var(--radius-md);font-size:var(--text-xl);cursor:pointer;touch-action:manipulation;flex-shrink:0}.collection-detail-close:active{transform:scale(.96)}.collection-main{flex:1;display:flex;flex-direction:column;min-height:0}.collection-hint{margin:0;padding:0 var(--space-4) var(--space-2);text-align:center;color:var(--color-text-muted);font-size:var(--text-lg)}.collection-canvas-wrap{flex:1;min-height:0;position:relative}.collection-canvas{width:100%;height:100%;min-height:calc(var(--space-14) * 4 - var(--space-6));touch-action:none}.collection-canvas canvas{width:100%!important;height:100%!important;cursor:pointer}.collection-page-names{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:var(--space-2) var(--space-4);justify-content:center;flex-shrink:0}.collection-name-chip{background:var(--color-neutral-100);border:var(--border-width-thin) solid var(--color-border);color:var(--color-text);padding:var(--space-2) calc(var(--space-3) + var(--space-1));border-radius:var(--radius-full);font-size:var(--text-lg);cursor:pointer;touch-action:manipulation}.collection-name-chip:active{background:var(--color-neutral-200)}.collection-pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-4);width:100%;max-width:calc(var(--space-14) * 5)}.collection-page-button{min-width:var(--size-touch-lg);min-height:var(--size-touch-lg);border:none;border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:var(--text-4xl);line-height:1;cursor:pointer;touch-action:manipulation}.collection-page-button:disabled{opacity:.35;cursor:not-allowed}.collection-page-button:not(:disabled):active{background:var(--color-neutral-200)}.collection-page-indicator{min-width:calc(var(--space-6) + var(--space-3) + var(--space-1));text-align:center;color:var(--color-text-muted);font-size:var(--text-lg);font-weight:var(--font-semibold)}.collection-detail-overlay{position:fixed;inset:0;z-index:var(--z-fixed);background:var(--color-overlay);display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.collection-detail-panel{width:min(calc(var(--space-16) * 10 + var(--space-8)),100%);max-height:min(90dvh,calc(var(--space-16) * 10));display:flex;flex-direction:column;background:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xl)}.collection-detail-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:calc(var(--space-3) + var(--space-1)) var(--space-4) 0}.collection-detail-title{margin:0;font-size:var(--text-xl);color:var(--color-heading)}.collection-detail-hint{margin:var(--space-2) var(--space-4) 0;text-align:center;color:var(--color-text-muted);font-size:var(--text-sm)}.collection-detail-canvas{flex:1;min-height:calc(var(--space-14) * 5);padding:var(--space-2)}.collection-detail-canvas .collection-canvas{min-height:calc(var(--space-14) * 5 - var(--space-4));border-radius:var(--radius-md);overflow:hidden}.collection-detail-canvas .collection-canvas canvas{cursor:grab}.empty-collection{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6) var(--space-6) var(--space-3);text-align:center;min-height:0}.empty-message{font-size:var(--text-2xl);color:var(--color-heading);margin:0 0 var(--space-3)}.empty-hint{font-size:var(--text-base);color:var(--color-text-muted);margin:0}@media(min-width:1024px){.collection-detail-panel{width:min(calc(var(--space-16) * 10),90vw)}.collection-detail-canvas{min-height:calc(var(--space-16) * 6 - var(--space-8))}}.town-map-root{position:relative;width:100%;height:100%;min-height:0}.town-map-canvas{position:relative;width:100%;height:100%;min-height:0;border-radius:var(--radius-xl);overflow:hidden;background:#9bd3e8}.town-onboarding-overlay{position:absolute;inset:0;z-index:var(--z-modal, 200);display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:var(--color-overlay-heavy, rgba(74, 74, 106, .65));pointer-events:auto}.town-onboarding-modal{width:min(420px,100%);display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-5) var(--space-4);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--color-surface, #fff) 96%,white);box-shadow:var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, .28))}.town-onboarding-title{margin:0;text-align:center;font-size:clamp(1.35rem,4vw,1.75rem);font-weight:800;color:#2d3436}.town-onboarding-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}.town-onboarding-step{display:flex;align-items:center;gap:var(--space-3);min-height:52px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);border:2px solid transparent;background:#eef2f5;color:#636e72;transition:background var(--transition-fast, .15s ease),border-color var(--transition-fast, .15s ease),color var(--transition-fast, .15s ease),transform var(--transition-fast, .15s ease)}.town-onboarding-step--active{background:#dff9fb;border-color:#00cec9;color:#2d3436;transform:scale(1.03);box-shadow:0 4px 14px #00b89438}.town-onboarding-step-emoji{flex:0 0 auto;font-size:1.75rem;line-height:1}.town-onboarding-step-label{font-size:clamp(1rem,3.2vw,1.2rem);font-weight:800;line-height:1.25}.town-onboarding-dismiss{align-self:stretch;min-height:56px;border:none;border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);background:linear-gradient(135deg,#00b894,#0984e3);color:#fff;font-size:1.15rem;font-weight:800;cursor:pointer;touch-action:manipulation}.town-debug-badge{position:absolute;z-index:3;left:var(--space-4);top:calc(var(--space-4) + 3.75rem);padding:.35rem .65rem;border-radius:var(--radius-md);background:#2d3436d1;color:#ffeaa7;font-size:var(--text-sm);font-weight:700;pointer-events:none}.town-debug-panel{position:absolute;z-index:14;left:var(--space-4);bottom:var(--space-4);width:min(360px,calc(100% - 2 * var(--space-4)));max-height:min(46vh,420px);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-lg);background:color-mix(in srgb,#1e272e 92%,black);color:#dfe6e9;box-shadow:var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, .28))}.town-debug-panel-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.town-debug-panel-close{border:none;background:transparent;color:#dfe6e9;font-size:1.4rem;line-height:1;cursor:pointer}.town-debug-panel-body{margin:0;overflow:auto;flex:1;min-height:0;padding:var(--space-2);border-radius:var(--radius-md);background:#00000047;font-size:12px;line-height:1.35;white-space:pre-wrap;word-break:break-word}.town-debug-panel-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.town-debug-panel-button{min-height:36px;border:none;border-radius:var(--radius-md);padding:.4rem .75rem;background:#0984e3;color:#fff;font-weight:700;cursor:pointer}.town-debug-panel-button--secondary{background:#636e72}.town-building-menu{position:absolute;z-index:12;top:calc(var(--space-4) + 3.75rem);right:var(--space-4);bottom:var(--space-4);width:min(360px,calc(100% - 2 * var(--space-4)));padding:var(--space-4);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--color-surface, #fff) 96%,white);box-shadow:var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, .2));display:flex;flex-direction:column;gap:var(--space-3);overflow:hidden;pointer-events:auto}.town-building-menu--factory{border-top:6px solid #00b894}.town-building-menu--delivery{border-top:6px solid #f39c12}.town-building-menu--shop{border-top:6px solid #a29bfe}.town-building-menu-scroll{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--space-2);-webkit-overflow-scrolling:touch}.town-building-footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-1)}.town-building-footer .town-building-menu-primary{width:100%}.town-building-progress{position:relative;min-height:72px;border-radius:var(--radius-lg);background:#e9eef2;overflow:hidden}.town-building-progress-fill{position:absolute;inset:0 auto 0 0;height:100%;background:linear-gradient(90deg,#00b894,#0984e3);transition:width .35s ease-out}.town-building-progress--ready .town-building-progress-fill{background:linear-gradient(90deg,#f1c40f,#e67e22)}.town-building-progress--idle{background:#dfe6e9}.town-building-progress-text{position:relative;z-index:1;min-height:72px;padding:var(--space-2) var(--space-3);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.town-building-progress-emoji{font-size:2rem;line-height:1}.town-building-menu-header{display:flex;gap:var(--space-2);align-items:center;padding-right:var(--space-6)}.town-building-menu-emoji{font-size:2.75rem;line-height:1}.town-building-menu-index{font-size:1.75rem;font-weight:800;color:#2d3436;line-height:1}.town-building-menu-speak{margin-left:auto;margin-right:var(--space-4);min-width:52px;min-height:52px;border:none;border-radius:var(--radius-md);background:#dfefff;font-size:1.5rem;cursor:pointer;touch-action:manipulation}.town-building-status{display:flex;flex-wrap:wrap;gap:var(--space-2)}.town-building-chip{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:.35rem .75rem;border-radius:999px;background:#eef2f5;font-size:1.15rem;font-weight:800;color:#2d3436}.town-building-menu-primary,.town-building-menu-secondary{border:none;border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);font-weight:800;font-size:clamp(1.5rem,4vw,2rem);cursor:pointer;min-height:72px;touch-action:manipulation}.town-building-menu-primary{background:linear-gradient(135deg,#00b894,#0984e3);color:#fff}.town-building-menu-primary--warn{background:var(--gradient-danger, linear-gradient(135deg, #ef5350, #e53935))}.town-building-menu-primary--coins{background:linear-gradient(135deg,#f1c40f,#e67e22)}.town-building-menu-primary:disabled{opacity:.45;cursor:not-allowed}.town-building-menu-secondary{background:#dfefff;color:#2d3436}.town-building-menu-close{position:absolute;top:var(--space-2);right:var(--space-3);border:none;background:transparent;font-size:1.8rem;line-height:1;cursor:pointer;color:#636e72}@media(max-width:700px){.town-building-menu{top:auto;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);width:auto;max-height:min(58%,420px)}}.badge-warn{color:#d35400;font-weight:700}.badge-coins{color:#b7950b;font-weight:700}.badge-ok{color:#1e8449;font-weight:700}.game-button.town-marker-btn{width:max-content;max-width:120px;min-width:64px;padding:6px 8px;gap:4px;transform:translateZ(0);align-items:center}.game-button.town-marker-btn--compact{min-width:56px;max-width:96px;padding:4px 6px}.town-marker-head{display:inline-flex;align-items:center;gap:4px;line-height:1}.game-button.town-marker-btn .button-icon{font-size:1.45rem;line-height:1}.town-marker-index{font-size:1.1rem;font-weight:800;line-height:1}.game-button.town-marker-btn--compact .button-icon{font-size:1.2rem}.game-button.town-marker-btn--compact .town-marker-index{font-size:.95rem}.town-marker-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:110px}.town-marker-chip{display:inline-flex;align-items:center;gap:2px;padding:2px 6px;border-radius:999px;background:#00000038;font-size:.72rem;font-weight:800;line-height:1.1;white-space:nowrap}.town-marker-chip--warn{background:#c0392bd9}.town-marker-btn--factory{background:linear-gradient(135deg,#00b894,#0984e3)}.town-marker-btn--delivery{background:var(--gradient-warning)}.town-marker-btn--shop{background:var(--gradient-purple)}.town-marker-btn--locked{background:var(--gradient-neutral)}.town-marker-btn--jam{background:var(--gradient-danger);animation:town-marker-jam-pulse 1.1s ease-in-out infinite}.town-marker-head--jam .button-icon{font-size:1.75rem}@keyframes town-marker-jam-pulse{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.08);filter:brightness(1.12)}}.town-marker-btn--coins{background:var(--gradient-warning)}.town-marker-btn--active:not(.town-marker-btn--jam):not(.town-marker-btn--coins){filter:none}.town-marker-btn--selected{outline:3px solid #ffeaa7;outline-offset:2px;box-shadow:var(--shadow-lg)}.town-marker-btn:hover{filter:brightness(.95);transform:translateY(calc(var(--space-1) * -.5));box-shadow:var(--shadow-lg)}.town-truck-marker{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:999px;background:#ffffffeb;box-shadow:0 2px 8px #0000002e;font-size:16px;line-height:1.2;white-space:nowrap;-webkit-user-select:none;user-select:none}.town-truck-marker-arrow{font-size:12px;color:#636e72;font-weight:700}.worker-picker{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--color-ink) 40%,transparent);padding:var(--space-4)}.worker-picker-card{position:relative;width:min(420px,100%);background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}.worker-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.worker-picker-item{aspect-ratio:1;min-height:0;padding:0;border:none;border-radius:var(--radius-lg);background:var(--color-sky-100, #e8f4ff);overflow:hidden;cursor:pointer}.worker-picker-canvas{width:100%;height:100%;pointer-events:none}.worker-picker-pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.worker-picker-page-button{min-width:44px;min-height:44px;border:none;border-radius:var(--radius-md);background:var(--color-sky-100, #e8f4ff);font-size:1.75rem;line-height:1;cursor:pointer}.worker-picker-page-button:disabled{opacity:.35;cursor:not-allowed}.worker-picker-page-indicator{min-width:3.5rem;text-align:center;font-weight:700;color:var(--color-muted, #666)}.worker-picker-close{position:absolute;top:var(--space-2);right:var(--space-3);border:none;background:transparent;font-size:1.8rem;line-height:1;cursor:pointer;color:#636e72}.worker-picker-title{margin:0;font-size:2.5rem;line-height:1;text-align:center}.worker-picker-empty{display:flex;flex-direction:column;gap:var(--space-3);align-items:stretch}.worker-picker-empty-icons{margin:0;text-align:center;font-size:2rem;font-weight:800}.worker-picker-cta{min-height:72px;border:none;border-radius:var(--radius-lg);background:var(--gradient-primary, #4f8cff);color:#fff;font-size:2.25rem;font-weight:700;cursor:pointer;touch-action:manipulation}.slot-row{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-surface) 88%,white)}.slot-row-label{font-size:1.5rem;font-weight:800;line-height:1}.slot-row-slots{display:flex;flex-wrap:wrap;gap:var(--space-2)}.slot-chip{width:80px;height:80px;min-width:80px;min-height:80px;padding:0;border:none;border-radius:var(--radius-lg);background:#dfefff;font-weight:800;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:manipulation}.slot-chip--empty{background:linear-gradient(135deg,#74b9ff,#0984e3);color:#fff;box-shadow:0 4px 12px #0984e347}.slot-chip--filled{overflow:hidden;background:#7ed6a5}.slot-chip-canvas{width:100%;height:100%;pointer-events:none}.slot-chip-icon{font-size:2rem;line-height:1}.slot-chip-price{font-size:.95rem;line-height:1}.slot-chip--locked{background:#ececec;color:#2d3436}.slot-chip--locked:disabled{opacity:.45;cursor:not-allowed}.notes-menu .menu-screen-header .subtitle{opacity:1;color:var(--color-text-on-brand);text-shadow:0 1px 2px rgba(0,0,0,.35);font-weight:var(--font-medium)}.notes-menu .menu-screen-header h1{text-shadow:0 2px 4px rgba(0,0,0,.35)}.notes-menu .menu-screen-grid{grid-template-columns:1fr;max-width:420px}.notes-menu .endless-note-button .button-text{text-shadow:0 1px 2px rgba(0,0,0,.3)}.menu-screen{min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;width:100%}.menu-screen-header{flex-shrink:0;text-align:center;padding:var(--space-fluid-panel-y) var(--space-fluid-panel-x) var(--space-2);color:var(--color-text-on-brand)}.menu-screen-header h1{font-size:var(--text-fluid-heading);font-weight:var(--font-bold);margin:0 0 var(--space-1);text-shadow:var(--shadow-text)}.menu-screen-header .subtitle{font-size:var(--text-fluid-sm);margin:0;opacity:var(--opacity-overlay-light)}.menu-screen-main{flex:1;min-height:0;width:100%;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;align-items:center;padding:0 var(--space-fluid-panel-x) var(--space-fluid-bottom);overflow-y:auto}.menu-screen-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-fluid-gap);width:100%;max-width:1200px}.menu-screen-grid .game-button{padding:var(--space-fluid-gap) var(--space-fluid-panel-x)}.menu-screen-grid .button-icon{font-size:var(--text-fluid-icon)}.menu-screen-grid .button-text{font-size:var(--text-fluid-base)}.menu-screen-content{width:100%}@media(max-height:700px){.menu-screen-header{padding-top:var(--space-2);padding-bottom:var(--space-1)}.menu-screen-main{padding-bottom:var(--space-16)}}.app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;background:var(--gradient-purple)}.app--collection{min-height:100dvh;height:100dvh;overflow:hidden;align-items:stretch}.app--collection>.collection-container{flex:1;min-height:0}.app--town,.app--slot-machine{min-height:100dvh;height:100dvh;overflow:hidden;align-items:stretch;padding:var(--space-3);box-sizing:border-box}.app--town>.town-map-root,.app--town>.factory-root,.app--town>.delivery-root,.app--town>.shop-root,.app--slot-machine>.claw-machine-root{flex:1;min-height:0;width:100%}.app-header{text-align:center;margin-bottom:var(--space-8);color:var(--color-text-on-brand)}.app-header h1{font-size:var(--text-4xl);font-weight:var(--font-bold);margin:0 0 var(--space-2) 0;text-shadow:var(--shadow-text)}.subtitle{font-size:var(--text-lg);margin:0;opacity:var(--opacity-overlay-light);font-weight:var(--font-normal)}.app-main{width:100%;max-width:1400px;display:flex;flex-direction:column;align-items:center}.game-section{width:100%;margin-bottom:var(--space-8)}.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8);width:100%;max-width:1200px;margin:0 auto}.game-button{padding:var(--space-8) var(--space-10);font-size:var(--text-2xl);font-weight:var(--font-semibold);border:none;border-radius:var(--radius-xl);cursor:pointer;transition:var(--transition-default);color:var(--color-text-on-brand);box-shadow:var(--shadow-md);width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);justify-content:center}.game-button:hover{filter:brightness(.95)}.button-icon{font-size:var(--text-icon);line-height:var(--leading-tight);display:block}.button-text{font-size:var(--text-2xl);line-height:var(--leading-tight)}.reward-badge{font-size:var(--text-lg);font-weight:var(--font-semibold);background:var(--color-badge-overlay);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);margin-top:var(--space-1)}.find-syllable-button{background:var(--gradient-warning)}.word-builder-button{background:var(--gradient-purple)}.simple-find-syllable-button{background:var(--gradient-accent)}.word-composer-button{background:linear-gradient(135deg,var(--color-peach-400) 0%,var(--color-peach-600) 100%)}.story-reader-button{background:var(--gradient-brand)}.memory-match-button{background:var(--gradient-teal);color:var(--color-text-on-brand)}.endless-note-button{background:var(--gradient-accent);color:var(--color-text-on-brand);text-shadow:0 1px 2px rgba(0,0,0,.25)}.endless-note-button .reward-badge{background:#00000038}.memory-match-button:active{transform:translateY(0);box-shadow:var(--shadow-knob)}.navigation-buttons{display:flex;flex-direction:column;gap:var(--space-4);width:100%;max-width:500px;margin-top:var(--space-8)}.navigation-button{background:var(--gradient-success);margin-top:0;max-width:100%;width:100%}.slot-machine-button{background:var(--gradient-danger)}.collection-button{background:var(--gradient-warning)}.town-button{background:linear-gradient(135deg,#00b894,#0984e3)}.game-button:not(.slot-machine-button):not(.collection-button):not(.town-button):hover{transform:translateY(calc(var(--space-1) * -.5));box-shadow:var(--shadow-lg)}.slot-machine-button:hover,.collection-button:hover,.town-button:hover{box-shadow:var(--shadow-lg)}@media(max-width:768px){.app{padding:var(--space-4) var(--space-2)}.app-header h1{font-size:var(--text-3xl)}.subtitle{font-size:var(--text-base)}.games-grid{gap:var(--space-6)}.game-button{padding:var(--space-6) var(--space-8);font-size:var(--text-xl)}.button-icon{font-size:var(--text-icon-sm)}.button-text{font-size:var(--text-xl)}.navigation-button{max-width:100%}}