:root{--bg-color: #f8f9fa;--text-color: #2c3e50;--square-bg: #ffffff;--square-border: #e0e0e0;--stats-bg: #ffffff;--stats-shadow: rgba(0, 0, 0, .1);--highscore-bg: #f8f9fa;--highscore-text: #6c757d;--primary: #4caf50;--secondary: #2c3e50;--accent: #6c757d;--border: #e0e0e0;--shadow: rgba(0, 0, 0, .1)}[data-theme=dark]{--bg-color: #1a1a1a;--text-color: #f0f0f0;--square-bg: #2d2d2d;--square-border: #444;--stats-bg: #2d2d2d;--stats-shadow: rgba(0, 0, 0, .4);--highscore-bg: #333;--highscore-text: #f0f0f0;--score-color: #ffffff;--primary: #4caf50;--secondary: #f0f0f0;--accent: #888;--border: #444;--shadow: rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{width:100%;min-height:100vh;background:var(--bg-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;color:var(--text-color);padding:1rem}.main-container{width:100%;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem;min-height:calc(100vh - 2rem)}@media (min-width: 768px){.main-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}}.left-panel{display:flex;flex-direction:column;gap:1.5rem;align-items:center}@media (min-width: 768px){.left-panel{align-items:stretch;justify-content:flex-start;padding-right:1rem}}.right-panel{display:flex;justify-content:center;align-items:center}@media (min-width: 768px){.right-panel{justify-content:flex-start;align-items:flex-start;padding-top:2rem}}.header{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-bottom:.5rem}@media (min-width: 768px){.header{justify-content:flex-start;flex-wrap:nowrap}}.header h1{font-size:2rem;font-weight:600;color:var(--text-color);letter-spacing:-.5px}.header .icon{width:4.5rem;height:4.5rem;margin-right:.625rem}[data-theme=light] .dark-icon,[data-theme=dark] .light-icon{display:none}[data-theme=light] .light-icon,[data-theme=dark] .dark-icon{display:block}.difficulty-selector{text-align:center;margin:0;padding:0}.difficulty-selector label{display:block;margin-bottom:.75rem;font-size:.875rem;font-weight:500;color:#6c757d;text-transform:uppercase;letter-spacing:.5px}.difficulty-btn{margin:0 .25rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;cursor:pointer;border:2px solid var(--border);background:var(--square-bg);color:var(--text-color);border-radius:.5rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.difficulty-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.difficulty-btn:hover:not(.active):not(:disabled){background:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow)}.difficulty-btn:disabled{opacity:.4;cursor:not-allowed}.multiplayer-controls{text-align:center;margin:1rem 0;padding:1rem;background:var(--stats-bg);border-radius:.5rem;border:1px solid var(--border);box-shadow:0 2px 8px var(--stats-shadow)}.player-scores{display:flex;justify-content:center;gap:2rem;margin-top:.5rem;font-size:.9rem}.player-scores div{color:var(--text-color)}#multiplayer-toggle{margin-bottom:.5rem;padding:.5rem 1rem;background:var(--primary);color:#fff;border:none;border-radius:.5rem;cursor:pointer;transition:all .3s ease}#multiplayer-toggle:hover{background:var(--secondary);transform:translateY(-2px)}.stats{display:flex;flex-direction:row;gap:3rem;font-size:1rem;background:var(--stats-bg);padding:1.5rem 2.5rem;border-radius:.5rem;border:1px solid var(--border);box-shadow:0 2px 8px var(--stats-shadow);justify-content:center}@media (min-width: 768px){.stats{justify-content:space-between;gap:2rem;padding:1.5rem 2rem}}.grid{margin:0 auto;width:90vmin;height:90vmin;max-width:350px;max-height:350px;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;background:var(--stats-bg);padding:.5rem;border-radius:.5rem;border:1px solid var(--border);box-shadow:0 2px 8px var(--stats-shadow)}@media (min-width: 768px){.grid{width:min(50vh,400px);height:min(50vh,400px);max-width:400px;max-height:400px;margin:0}}@media (min-width: 1024px){.grid{width:min(60vh,450px);height:min(60vh,450px);max-width:450px;max-height:450px}}.icon{width:6rem;height:6rem}.square{aspect-ratio:1;width:100%;border:2px solid var(--border);border-radius:.25rem;cursor:pointer;position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);background:var(--square-bg);box-shadow:inset 0 2px 4px var(--shadow)}.square:active{transform:scale(.95);background:var(--bg-color)}.square:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 4px 12px var(--shadow)}.square.selected{border-color:var(--primary);box-shadow:0 0 0 3px #4caf504d;outline:none}.mole{background-size:70%;background-repeat:no-repeat;background-position:center;animation:moleAppear .15s cubic-bezier(.25,.1,.25,1.5) forwards;will-change:transform,opacity;transform-origin:bottom center}.mole.hit{animation:moleHit .3s ease-out}.mole.hiding{animation:moleDisappear .2s ease-in forwards}[data-theme=dark] .mole{background-color:var(--square-bg);background-image:url(/assets/whack-a-mole-white-D8rtIdIt.png)}[data-theme=light] .mole{background-color:var(--square-bg);background-image:url(/assets/whack-a-mole-black-Ck2gdYcT.png)}.mole:after{content:"";position:absolute;bottom:-5px;left:10%;right:10%;height:10px;background:#0003;border-radius:50%;filter:blur(4px);opacity:0;transition:opacity .3s ease}.square:hover .mole:after{opacity:1}.controls{margin:0;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.theme-toggle{--size: 44px;--icon-size: 20px;--toggle-bg: transparent;--toggle-border: #e5e7eb;--toggle-color: #000000;--toggle-color-hover: #6b7280;position:relative;width:var(--size);height:var(--size);border-radius:50%;background:var(--toggle-bg);border:1px solid var(--toggle-border);color:var(--toggle-color);cursor:pointer;padding:.5rem;transition:all .3s ease;margin-left:1rem;display:flex;align-items:center;justify-content:center;outline:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}@media (min-width: 768px){.theme-toggle{margin-left:auto}}.theme-toggle,.theme-toggle:focus,.theme-toggle:active,.theme-toggle:hover{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-focus-ring-color:transparent;outline:none;-ms-touch-action:manipulation;touch-action:manipulation}.theme-toggle:hover{background-color:#0000000d;color:var(--toggle-color-hover)}.theme-toggle:active{transform:scale(.95)}[data-theme=dark] .theme-toggle{--toggle-color: #ffffff;--toggle-color-hover: #d1d5db;--toggle-border: #4b5563}[data-theme=dark] .theme-toggle:hover{background-color:#ffffff1a}.theme-toggle:focus{outline:none!important;box-shadow:none!important}.theme-toggle::selection{background:transparent}.theme-toggle::-moz-selection{background:transparent}.theme-toggle{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0)}.theme-toggle::-moz-focus-inner{border:0}.theme-toggle{-ms-touch-action:manipulation;touch-action:manipulation}.theme-toggle svg{pointer-events:none;-webkit-tap-highlight-color:transparent!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-theme=light] .sun{fill:#000}[data-theme=dark] .moon{fill:#fff}.theme-toggle *{-webkit-touch-callout:none!important;-webkit-user-select:none!important;-khtml-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important;outline:none!important;-webkit-tap-highlight-color:rgba(0,0,0,0)!important;-webkit-tap-highlight-color:transparent!important}@media screen and (-webkit-min-device-pixel-ratio: 0){.theme-toggle{-webkit-tap-highlight-color:transparent!important}}@-moz-document url-prefix(){.theme-toggle{-moz-user-focus:ignore;-moz-user-select:none;-webkit-user-select:none;user-select:none}}@supports (-ms-ime-align: auto){.theme-toggle{-ms-touch-action:manipulation;touch-action:manipulation}}[data-theme=light] .sun-beams{stroke:#000}[data-theme=light] .moon,[data-theme=dark] .sun{fill:transparent}[data-theme=dark] .sun-beams{opacity:0}.sun-and-moon{width:1em;height:1em;display:block;fill:currentColor;transition:transform .5s var(--ease-spring-3)}.sun{fill:currentColor;transform-origin:center center;transition:transform .5s var(--ease-spring-3)}[data-theme=dark] .sun{transform:scale(1.5);fill:#9ca3af}.sun-beams{stroke:currentColor;stroke-width:2px;stroke-linecap:round;transform-origin:center center;opacity:1;transition:transform .5s var(--ease-spring-4),opacity .2s var(--ease-3)}[data-theme=dark] .sun-beams{transform:rotate(-25deg);opacity:0}.moon{fill:none;transform:translate(0);transition:transform .25s var(--ease-out-5)}[data-theme=dark] .moon{transform:translate(-7px)}[data-theme=dark] .moon>circle{transform:translate(-7px)}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes slide{0%{transform:translate(0)}to{transform:translate(-7px)}}button:not(.theme-toggle){padding:.625rem 1.25rem;font-size:1rem;cursor:pointer;border-radius:.313rem;border:none;background-color:#4caf50;color:#fff;transition:all .3s}button:hover:not(:disabled){background-color:#2c3e50;color:#fff;border-color:#2c3e50}button:active:not(:disabled){transform:scale(.98)}button:disabled{background-color:#f8f9fa;color:#adb5bd;cursor:not-allowed;border-color:#e0e0e0}#start-button{background-color:#2c3e50;color:#fff;border-color:#2c3e50}#start-button:hover:not(:disabled){background-color:#1a252f}#pause-button{color:#6c757d}#pause-button:hover:not(:disabled){background-color:#6c757d;color:#fff;border-color:#6c757d}#restart-button{color:#6c757d}#restart-button:hover:not(:disabled){background-color:#6c757d;color:#fff;border-color:#6c757d}#reset-highscore-button{color:#6c757d}#reset-highscore-button:hover:not(:disabled){background-color:#6c757d;color:#fff;border-color:#6c757d}.high-score-message{display:none;font-size:1rem;font-weight:500;color:var(--text-color);text-align:center;margin:0;padding:.75rem 1.5rem;background-color:var(--highscore-bg);border:1px solid var(--border);border-radius:.25rem;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}#high-score{color:#2c3e50;font-weight:600;font-size:1.2em}#final-score{font-size:1.25rem;font-weight:500;color:var(--text-color);text-align:center;margin:0}#current-difficulty{color:var(--text-color);font-weight:500}@media (max-width: 30.313rem){body{height:auto;font-size:.875rem;padding:.5rem;gap:1rem}.header h1{font-size:1.5rem}.header img{width:2.5rem;height:2.5rem}.grid{width:85vmin;height:85vmin;gap:.25rem;padding:.25rem}.difficulty-selector{padding:0}.difficulty-btn{padding:.4rem .8rem;font-size:.8rem;margin:.125rem}.controls{gap:.375rem}button{padding:.5rem .875rem;font-size:.8rem}.stats{flex-wrap:wrap;justify-content:center;gap:1.5rem;font-size:.9rem;padding:1rem 1.5rem}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.keyboard-instructions{text-align:center;margin:.5rem 0;padding:.5rem 1rem;background:var(--highscore-bg);border:1px solid var(--border);border-radius:.25rem;color:var(--highscore-text);font-size:.875rem;box-shadow:0 2px 4px var(--shadow)}.keyboard-instructions small{font-size:.8rem;opacity:.9}.numpad-layout{margin-top:.25rem;font-size:.7rem;opacity:.8;font-family:monospace}.high-score-display .label{color:var(--highscore-text);font-size:.75rem;text-transform:uppercase;letter-spacing:1px;font-weight:500;margin-bottom:.5rem}.high-score-display{padding:1rem 2rem;min-width:180px;background:var(--highscore-bg);border:2px solid var(--border);box-shadow:0 4px 15px var(--shadow);border-radius:.5rem}.high-score-display #high-score{color:var(--text-color);font-weight:600;font-size:2rem;display:flex;justify-content:center}.stat-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.stat-item b{color:var(--highscore-text);font-size:.75rem;text-transform:uppercase;letter-spacing:1px;font-weight:500}[data-theme=dark] .stat-item span{color:var(--score-color);font-weight:700}.stat-item span{font-size:1.75rem;font-weight:600;color:var(--text-color);animation:scorePopup .3s ease}@keyframes scorePopup{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}#final-score{padding-bottom:0}@keyframes mole-pop{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes moleAppear{0%{transform:translateY(100%) scale(.9);opacity:.7}to{transform:translateY(0) scale(1);opacity:1}}@keyframes moleDisappear{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(100%) scale(.8);opacity:0}}@keyframes moleHit{0%{transform:scale(1)}50%{transform:scale(.9);filter:brightness(1.5)}to{transform:scale(1)}}@keyframes mole-whack{0%{transform:scale(1)}50%{transform:scale(.8) rotate(10deg);opacity:.8}to{transform:scale(0);opacity:0}}.mole{transform-origin:bottom center;animation:mole-pop .2s ease-out}.mole.whacked{animation:mole-whack .3s ease-out}@keyframes messagePopup{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}#theme-toggle{margin-left:auto;font-size:1.5rem;background:none;border:none;cursor:pointer;color:inherit;transition:transform .2s ease}#theme-toggle:hover{transform:scale(1.2)}
