*{margin:0;padding:0;box-sizing:border-box}.hidden{display:none!important}:root{--font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;--font-size-xs: .64rem;--font-size-sm: .8rem;--font-size-base: 1rem;--font-size-md: 1.25rem;--font-size-lg: 1.563rem;--font-size-xl: 1.953rem;--font-size-2xl: 2.441rem;--font-size-3xl: 3.052rem;--line-height-tight: 1.2;--line-height-base: 1.5;--line-height-relaxed: 1.6;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--container-sm: 540px;--container-md: 720px;--container-lg: 960px;--container-xl: 1140px;--container-xxl: 1320px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--duration-fast: .15s;--duration-base: .2s;--duration-slow: .25s;--easing-standard: cubic-bezier(.4, 0, .2, 1);--easing-decelerate: cubic-bezier(0, 0, .2, 1);--easing-accelerate: cubic-bezier(.4, 0, 1, 1);--color-primary: #7c3aed;--color-primary-hover: #6d28d9;--color-primary-light: #a78bfa;--color-on-primary: #ffffff;--color-secondary: #0ea5e9;--color-secondary-hover: #0284c7;--color-secondary-light: #38bdf8;--color-on-secondary: #ffffff;--color-accent: #84cc16;--color-accent-hover: #65a30d;--color-on-accent: #ffffff;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-info: #3b82f6;--color-surface: #fafaf9;--color-surface-variant: #f5f5f4;--color-surface-hover: #e7e5e4;--color-on-surface: #292524;--color-on-surface-variant: #78716c;--color-background: #e7e5e4;--color-on-background: #1c1917;--color-border: #e7e5e4;--color-border-strong: #d6d3d1;--color-lives: #ef4444;--color-score: #7c3aed;--color-streak: #f59e0b;--color-level: #10b981;--canvas-bg: #ffffff;--canvas-grid: #d6d3d1;--canvas-text: #292524;--canvas-paddle: #7c3aed;--canvas-ball: #0ea5e9;--canvas-ball-glow: rgba(14, 165, 233, .3)}body.dark-mode .overlay-content,body.dark-mode .modal-content{background:#1e293b;box-shadow:0 25px 50px -12px #00000080}body.dark-mode #hud{background:#1e293b;border-color:#334155}body.dark-mode #game{background:#0f172a;border-color:#334155}body.dark-mode .hud-btn{background:#334155;border-color:#475569;color:#f1f5f9}body.dark-mode .hud-btn:hover{background:#475569;border-color:#64748b}body.dark-mode #controls-hint{background:#1e293b;border-color:#334155;color:#94a3b8}body.dark-mode .setting-row{background:#334155;border-color:#475569}body.dark-mode{--color-primary: #a78bfa;--color-primary-hover: #8b5cf6;--color-primary-light: #c4b5fd;--color-on-primary: #1e1b4b;--color-secondary: #38bdf8;--color-secondary-hover: #0ea5e9;--color-secondary-light: #7dd3fc;--color-on-secondary: #082f49;--color-accent: #a3e635;--color-accent-hover: #84cc16;--color-on-accent: #1a2e05;--color-success: #34d399;--color-warning: #fbbf24;--color-error: #f87171;--color-info: #60a5fa;--color-surface: #1e293b;--color-surface-variant: #0f172a;--color-surface-hover: #334155;--color-on-surface: #f1f5f9;--color-on-surface-variant: #94a3b8;--color-background: #0f172a;--color-on-background: #f8fafc;--color-border: #334155;--color-border-strong: #475569;--color-lives: #f87171;--color-score: #a78bfa;--color-streak: #fbbf24;--color-level: #34d399;--canvas-bg: #0f172a;--canvas-grid: #334155;--canvas-text: #f1f5f9;--canvas-paddle: #a3e635;--canvas-ball: #38bdf8;--canvas-ball-glow: rgba(56, 189, 248, .4)}body{margin:0;display:flex;justify-content:center;align-items:center;min-width:320px;min-height:100vh;background-color:var(--color-background);color:var(--color-on-background);font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);font-weight:var(--font-weight-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100%;max-width:var(--container-xl);display:flex;flex-direction:column;align-items:center;padding:var(--space-4);gap:var(--space-4)}#hud{width:100%;max-width:var(--container-xl);display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-6);background:#fff;border-radius:var(--radius-lg);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;border:1px solid #e7e5e4}.hud-left{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}.hud-left>span{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-on-surface);white-space:nowrap;display:flex;align-items:center;gap:var(--space-2)}.hud-right{display:flex;gap:var(--space-2);align-items:center}#score{color:var(--color-score);font-weight:var(--font-weight-semibold)}#highScore{color:var(--color-warning);font-weight:var(--font-weight-semibold)}#highScore.record-broken{animation:recordPulse 1s var(--easing-standard) 3;color:var(--color-accent)}#lives{color:var(--color-lives);font-weight:var(--font-weight-semibold)}#level{color:var(--color-level);font-weight:var(--font-weight-semibold)}#streak{color:var(--color-streak);font-weight:var(--font-weight-bold);padding:var(--space-1) var(--space-3);background:color-mix(in srgb,var(--color-warning) 10%,transparent);border-radius:var(--radius-full);transition:all var(--duration-base) var(--easing-standard)}#streak.streak-pulse{animation:pulse .6s var(--easing-standard) infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@keyframes recordPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.hud-right{display:flex;gap:.5rem}.hud-btn{background:#f5f5f4;border:1px solid #d6d3d1;border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-size:var(--font-size-lg);cursor:pointer;transition:all var(--duration-fast) var(--easing-standard);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;color:#292524}.hud-btn .icon{width:20px;height:20px;stroke-width:2}.hud-btn:hover{background:#e7e5e4;border-color:#a8a29e;transform:translateY(-1px);box-shadow:0 1px 2px #0000000d}.hud-btn:active{transform:translateY(0);box-shadow:none}.hud-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}#game{background:transparent;border:2px solid #d6d3d1;border-radius:var(--radius-lg);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;display:block;cursor:none}#game:focus-visible{outline:3px solid var(--color-primary);outline-offset:4px}#controls-hint{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:#78716c;text-align:center;max-width:600px;line-height:var(--line-height-relaxed);padding:var(--space-3) var(--space-4);background:#fff;border-radius:var(--radius-md);border:1px solid #d6d3d1;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}#controls-hint em{font-size:var(--font-size-xs);color:var(--color-primary);font-style:normal;font-weight:var(--font-weight-semibold)}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000;padding:var(--space-4)}.overlay.hidden{display:none}.overlay-content{background:#fff;padding:var(--space-8) var(--space-10);border-radius:var(--radius-xl);text-align:center;max-width:var(--container-sm);width:100%;box-shadow:0 25px 50px -12px #00000040;border:none}.overlay-content h1{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin-bottom:var(--space-4);color:var(--color-on-surface)}.overlay-content h2{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin-bottom:var(--space-4);color:var(--color-on-surface)}.overlay-content p{font-size:var(--font-size-md);line-height:var(--line-height-relaxed);margin-bottom:var(--space-6);color:var(--color-on-surface-variant)}.btn-primary,.btn-secondary{border-radius:var(--radius-lg);border:none;padding:var(--space-3) var(--space-8);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);font-family:var(--font-family-base);cursor:pointer;transition:all var(--duration-base) var(--easing-standard);box-shadow:var(--shadow-sm);min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);white-space:nowrap}.btn-primary{background-color:var(--color-primary);color:var(--color-on-primary);margin:var(--space-2)}.btn-primary:hover{background-color:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.btn-primary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn-secondary{background-color:var(--color-surface-variant);color:var(--color-on-surface);border:1px solid var(--color-border);margin:var(--space-2)}.btn-secondary:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-secondary:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.btn-secondary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:2000;padding:var(--space-4)}.modal.hidden{display:none}.modal-content{background:#fff;padding:var(--space-8);border-radius:var(--radius-xl);max-width:480px;width:100%;box-shadow:0 25px 50px -12px #00000040;border:none;max-height:90vh;overflow-y:auto}.modal-content h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin-bottom:var(--space-6);color:var(--color-on-surface)}.modal-content h4{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);margin-top:var(--space-6);margin-bottom:var(--space-4);color:var(--color-on-surface)}.setting-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-6);gap:var(--space-4);padding:var(--space-3);background:#f5f5f4;border-radius:var(--radius-md);border:1px solid #d6d3d1}.setting-row label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-on-surface);flex:1}.setting-row input[type=range]{flex:1;max-width:140px;cursor:pointer}.setting-row input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:var(--color-primary)}#difficultyValue{font-weight:var(--font-weight-semibold);min-width:48px;color:var(--color-primary);font-size:var(--font-size-base);text-align:right}@media(max-width:768px){#app{padding:var(--space-2);gap:var(--space-3)}#hud{padding:var(--space-3) var(--space-4);flex-direction:column;gap:var(--space-3)}.hud-left{gap:var(--space-4);width:100%;justify-content:space-around}.hud-right{width:100%;justify-content:center}.overlay-content{padding:var(--space-6)}.overlay-content h1{font-size:var(--font-size-xl);word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.overlay-content h2{font-size:var(--font-size-lg)}#controls-hint{font-size:var(--font-size-xs);padding:var(--space-2) var(--space-3)}.btn-primary,.btn-secondary{padding:var(--space-3) var(--space-6);font-size:var(--font-size-sm)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.overlay,.modal{-webkit-backdrop-filter:none;backdrop-filter:none}}.game-title{text-align:center;padding:var(--space-4) 0 var(--space-2) 0;display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.game-title-icon{width:32px;height:32px}.game-title h1{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin:0;letter-spacing:-.02em;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.title-with-icon{gap:var(--space-4);margin-bottom:var(--space-4)}.title-icon{width:64px;height:64px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media(max-width:768px){.game-title h1{font-size:var(--font-size-lg)}.game-title-icon{width:24px;height:24px}.game-footer p{font-size:var(--font-size-xs)}.title-icon{width:48px;height:48px}}.pomodoro-bar.hidden{display:none!important}.pomodoro-bar{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;padding:var(--space-4) var(--space-6);position:relative;overflow:hidden;box-shadow:var(--shadow-md);border-radius:var(--radius-lg)}.pomodoro-bar.break-mode{background:linear-gradient(135deg,#10b981,#059669)}.pomodoro-bar.long-break-mode{background:linear-gradient(135deg,#3b82f6,#2563eb)}.pomodoro-content{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;position:relative;z-index:1}.pomodoro-mode{font-weight:var(--font-weight-semibold);font-size:var(--font-size-base)}.pomodoro-time{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);font-family:var(--font-family-mono);letter-spacing:.1em}.pomodoro-controls{display:flex;gap:var(--space-2)}.pomodoro-btn{background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);color:#fff;cursor:pointer;transition:all var(--duration-fast) var(--easing-standard);font-size:var(--font-size-base);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}.pomodoro-btn .icon{width:18px;height:18px;stroke-width:2.5}.pomodoro-btn:hover{background:#ffffff4d;transform:translateY(-1px)}.pomodoro-btn:active{transform:translateY(0)}.pomodoro-sessions{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.pomodoro-progress{position:absolute;bottom:0;left:0;height:4px;background:#fff6;transition:width 1s linear;width:0%}body.dark-mode .pomodoro-bar{box-shadow:0 2px 8px #0006}.pomodoro-tagline{color:var(--color-error);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);margin-bottom:var(--space-6);line-height:var(--line-height-relaxed)}.start-options{display:flex;flex-direction:column;gap:var(--space-3);width:100%;max-width:400px;margin:0 auto}.start-options .btn-primary,.start-options .btn-secondary{width:100%}.subtitle{font-size:var(--font-size-lg)!important;color:var(--color-primary)!important;margin-bottom:var(--space-6)!important;font-weight:var(--font-weight-medium)!important;line-height:var(--line-height-base)!important}.limerick{background:color-mix(in srgb,var(--color-primary) 8%,transparent);border-left:4px solid var(--color-primary);padding:var(--space-4) var(--space-6);margin:var(--space-6) 0;border-radius:var(--radius-md);text-align:left}.limerick p{margin:var(--space-1) 0!important;font-size:var(--font-size-sm)!important;line-height:var(--line-height-relaxed);color:var(--color-on-surface-variant)}body.dark-mode .limerick{background:#0078d433;border-left-color:#6cb8f6}#winStats,#gameOverStats{white-space:pre-line;line-height:var(--line-height-relaxed);font-size:var(--font-size-base);color:var(--color-on-surface-variant);margin:var(--space-4) 0}.pomodoro-modal-content{text-align:center;max-width:400px}.pomodoro-modal-icon{font-size:var(--font-size-3xl);margin-bottom:var(--space-4);animation:bounce 1s var(--easing-standard) infinite}.pomodoro-modal-actions{display:flex;gap:var(--space-3);margin-top:var(--space-6);justify-content:center}.pomodoro-modal-actions button{flex:1;max-width:150px}.work-memes{display:flex;gap:var(--space-4);justify-content:center;margin:var(--space-6) 0;flex-wrap:wrap}.meme-icon{font-size:var(--font-size-2xl);transition:transform var(--duration-base) var(--easing-standard);cursor:pointer;opacity:.7}.meme-icon:hover{transform:scale(1.2) rotate(10deg);opacity:1}.celebration-icons{display:flex;justify-content:center;gap:var(--space-8);margin-bottom:var(--space-4)}.celebrate{font-size:var(--font-size-3xl);animation:bounce 1s var(--easing-standard) infinite}.celebrate:nth-child(2){animation-delay:.2s}.celebrate:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.gameover-icons{display:flex;justify-content:center;gap:var(--space-6);margin-bottom:var(--space-4)}.sad-icon{font-size:var(--font-size-2xl);opacity:.7;animation:shake .5s var(--easing-standard) infinite;display:inline-block}.sad-icon:nth-child(2){animation-delay:.15s}.sad-icon:nth-child(3){animation-delay:.3s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.pause-quote{font-style:italic;color:#8a8886;font-size:1rem!important;margin-top:.5rem!important}body.dark-mode .pause-quote{color:#c8c6c4}.btn-primary,.btn-secondary{display:inline-flex;align-items:center;gap:.5rem}.modal-content h4{margin-top:1.5rem;margin-bottom:.75rem;color:var(--text-color);font-size:1.1rem;border-bottom:2px solid var(--grid-line);padding-bottom:.5rem}.modal-content h4:first-of-type{margin-top:0}.setting-row input[type=number]{width:80px;padding:.4rem;border:1px solid var(--grid-line);border-radius:4px;background:var(--bg-color);color:var(--text-color);font-family:inherit}@media(max-width:768px){.pomodoro-content{justify-content:center}.pomodoro-time{font-size:1.3rem}.pomodoro-mode,.pomodoro-sessions{font-size:.85rem}.limerick{padding:.75rem 1rem}.limerick p{font-size:.85rem!important}.meme-icon,.celebrate,.sad-icon{font-size:2rem}.work-memes{gap:1rem}}