[data-game=reflex]{--game-accent-h: 310;--game-accent-s: 90%;--game-accent-l: 58%;--game-accent: hsl(var(--game-accent-h), var(--game-accent-s), var(--game-accent-l));--game-accent-hover: hsl(var(--game-accent-h), var(--game-accent-s), 65%);--game-accent-muted: hsl(var(--game-accent-h), 60%, 35%);--game-accent-subtle: hsl(var(--game-accent-h), 45%, 15%);--game-accent-glow: hsla(var(--game-accent-h), var(--game-accent-s), var(--game-accent-l), .3)}.reflex-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:520px;margin:0 auto;padding:var(--space-4);box-sizing:border-box}.reflex-progress{display:flex;justify-content:space-between;width:100%;max-width:320px;margin:var(--space-4) auto var(--space-6);position:relative}.reflex-progress:before{content:"";position:absolute;top:50%;left:0;right:0;height:3px;background:var(--color-surface-overlay);z-index:1;transform:translateY(-50%);border-radius:var(--radius-full)}.reflex-progress-bar{position:absolute;top:50%;left:0;height:3px;background:var(--game-accent);z-index:2;transform:translateY(-50%);transition:width var(--duration-normal) var(--ease-out);border-radius:var(--radius-full)}.reflex-step{width:28px;height:28px;border-radius:var(--radius-full);background:var(--color-surface-sunken);border:2px solid var(--color-border-default);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:var(--text-xs);color:var(--color-text-secondary);z-index:3;transition:all var(--duration-normal) var(--ease-spring)}.reflex-step[data-active]{background:var(--game-accent-subtle);border-color:var(--game-accent);color:var(--game-accent);box-shadow:0 0 12px var(--game-accent-glow);transform:scale(1.15)}.reflex-step[data-complete]{background:var(--game-accent);border-color:var(--game-accent);color:#fff}.reflex-board{width:100%;min-height:340px;background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-card);padding:var(--space-6);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 8px 30px #0006}.reflex-trigger-zone{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;z-index:10;background:transparent;outline:none;border:none}.reflex-header{text-align:center;margin-bottom:var(--space-6)}.reflex-header h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;color:var(--color-text-primary);margin-bottom:var(--space-1)}.reflex-header p{font-size:var(--text-sm);color:var(--color-text-secondary)}.reflex-timer-display{font-family:var(--font-mono);font-size:var(--text-4xl);font-weight:800;color:var(--color-text-primary);text-shadow:0 0 15px var(--game-accent-glow);margin:var(--space-6) 0;letter-spacing:.05em;transition:opacity 1s var(--ease-out)}.reflex-timer-display.hidden{opacity:0}.reflex-prompt{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--game-accent);text-transform:uppercase;letter-spacing:.05em;margin-top:var(--space-4);pointer-events:none}.reflex-canvas{width:100%;max-width:440px;height:200px;background:var(--color-surface-sunken);border-radius:var(--radius-lg);border:1px solid var(--color-border-subtle);display:block}.reflex-sound-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);width:100%;max-width:320px;margin-top:var(--space-4)}.reflex-sound-btn{background:var(--color-surface-overlay);border:1.5px solid var(--color-border-default);color:var(--color-text-primary);padding:var(--space-4);border-radius:var(--radius-lg);font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);text-align:center;transition:all var(--duration-normal) ease}.reflex-sound-btn:hover:not(:disabled){border-color:var(--game-accent);background:var(--game-accent-subtle);transform:translateY(-2px)}.reflex-sound-btn:active:not(:disabled){transform:translateY(0)}.reflex-sound-btn.correct{background:#34d39926;border-color:var(--color-status-success);color:var(--color-status-success)}.reflex-sound-btn.wrong{background:#ef444426;border-color:var(--color-status-error);color:var(--color-status-error)}.reflex-prewarm-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center}.reflex-snap-grid{display:flex;justify-content:center;gap:var(--space-6);width:100%;max-width:380px;margin:var(--space-4) 0}.reflex-card-holder{flex:1;max-width:140px;aspect-ratio:2/3;background:var(--color-surface-sunken);border:2px dashed var(--color-border-default);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;position:relative;transition:border-color var(--duration-normal) ease}.reflex-card{width:100%;height:100%;background:var(--color-surface-page);border:2px solid var(--game-accent);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;font-size:var(--text-4xl);box-shadow:0 4px 15px #0000004d;transform:rotate(0);transition:transform var(--duration-fast) var(--ease-spring)}.reflex-card.pop{animation:card-pop .15s var(--ease-spring)}@keyframes card-pop{0%{transform:scale(.9)}50%{transform:scale(1.08)}to{transform:scale(1)}}.reflex-flash-success{animation:flash-green .3s ease}.reflex-flash-fail{animation:flash-red-shake .4s ease}@keyframes flash-green{0%{box-shadow:inset 0 0 #34d39900}50%{box-shadow:inset 0 0 100px 10px #34d39959}to{box-shadow:inset 0 0 #34d39900}}@keyframes flash-red-shake{0%,to{transform:translate(0);box-shadow:inset 0 0 #ef444400}20%,60%{transform:translate(-8px);box-shadow:inset 0 0 80px 10px #ef44444d}40%,80%{transform:translate(8px);box-shadow:inset 0 0 80px 10px #ef44444d}}