:root{font-family:-apple-system,system-ui,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;font-weight:400;color:#333;background-color:#f8f4e3;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:clamp(17px,2.8vw,22px)}html,body{height:100%}body{margin:0;height:100dvh;min-height:100vh;background:linear-gradient(to bottom,#87ceeb,#fff8dc);display:flex;justify-content:center;align-items:stretch;padding:env(safe-area-inset-top,.5vh) 1vw env(safe-area-inset-bottom,.5vh);box-sizing:border-box;overflow-y:auto;overflow-x:hidden}#game{display:flex;flex-direction:column;width:min(600px,95vw);background:#fff;border-radius:min(20px,2vh);box-shadow:0 8px 24px #00000026;overflow:hidden;height:100%;max-height:100dvh}#board-area{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:min(10px,2vh) 0;box-sizing:border-box;background:#8b4513;overflow-y:auto;min-height:0;max-height:100%}#hud{display:flex;justify-content:space-between;align-items:center;padding:min(20px,2vh) min(30px,3vw);background:linear-gradient(135deg,gold,orange);color:#333;border-bottom:4px solid #FF8C00;flex-shrink:0;position:sticky;top:0;z-index:10;border-radius:0 0 18px 18px;box-shadow:0 2px 10px #00000014}#hud div{display:flex;align-items:center;gap:8px;font-size:clamp(18px,3vh,24px);font-weight:700;text-shadow:0 2px 0 rgba(0,0,0,.2)}#question{background:linear-gradient(135deg,#ffe4b5,#deb887);text-align:center;font-size:clamp(40px,6vw,52px);font-weight:700;color:indigo;border-bottom:4px solid #CD853F;text-shadow:0 3px 0 rgba(0,0,0,.1);flex-shrink:0;min-height:clamp(70px,10vh,120px);display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:4px 8px}#board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:min(15px,2vh);padding:min(20px,3vh);background:#8b4513;position:relative;width:100%;max-width:500px;aspect-ratio:1 / 1;max-height:100%;box-sizing:border-box}.hole{position:relative;width:100%;aspect-ratio:1 / 1;background:#2f4f4f;border-radius:50%;box-shadow:inset 0 0 20px #00000080;overflow:hidden;border:8px solid #1a1a1a;display:flex;justify-content:center;align-items:center;cursor:pointer;touch-action:manipulation;box-sizing:border-box}.hole:before{content:"";width:90%;aspect-ratio:1;background:radial-gradient(circle at 30% 30%,#654321,#2f1b14 70%,#1a1a1a);border-radius:50%;position:absolute}.hole.visible{box-shadow:inset 0 0 20px #000c}.number{position:relative;z-index:2;font-size:clamp(24px,4vh,32px);font-weight:700;color:gold;text-shadow:0 2px 0 #000;font-family:inherit;font-style:normal}#controls{padding:18px 20px;background:#fffffff2;border-top:4px solid #CD853F;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px;flex-shrink:0;margin-top:auto;position:sticky;bottom:0;left:0;right:0;border-radius:20px 20px 0 0;box-shadow:0 -4px 12px #0000001f;transition:transform .45s ease,padding .45s ease;z-index:10}body.playing #controls{position:static;padding:10px 14px;transform:none}body.game-over #controls{transform:none}#options-group{display:flex;gap:14px;align-items:center;transition:transform .35s ease,opacity .35s ease}body.playing #options-group{transform:translateY(10%);opacity:0;pointer-events:none}#modes{display:flex;gap:min(10px,1vw);justify-content:center;flex-wrap:wrap}.mode-chip{padding:min(8px,1vh) min(16px,2vw);border:2px solid #8B4513;border-radius:min(20px,2vh);background:#fff8dc;color:#8b4513;font-weight:700;cursor:pointer;transition:all .2s;font-size:clamp(15px,2.5vw,18px)}.mode-chip.active{background:gold;border-color:orange;box-shadow:0 0 10px #ffd70080}#actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}#actions button{padding:12px 24px;border:none;border-radius:25px;background:#2196f3;color:#fff;font-weight:700;cursor:pointer;transition:all .2s;font-size:18px;box-shadow:0 2px 8px #00000026}#actions button:hover{background:#1976d2;transform:translateY(-2px)}#actions button:active{transform:translateY(0)}#sticker-book{background:#ffe4b5;border-color:peru}label{display:flex;align-items:center;gap:8px;font-weight:700;color:#8b4513;cursor:pointer;font-size:clamp(15px,2vw,16px)}input[type=checkbox]{width:18px;height:18px;cursor:pointer}#modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}#modal.hidden{display:none}#modal-content{background:#fff;padding:min(30px,4vh);border-radius:min(20px,2vh);max-width:min(500px,90vw);width:90%;max-height:80vh;overflow-y:auto;text-align:center;box-shadow:0 8px 32px #0000004d}#modal-content h2{color:indigo;font-size:clamp(24px,5vh,36px);margin-bottom:min(20px,2vh)}#modal-content p{font-size:clamp(14px,2.5vh,18px);margin:min(10px,1vh) 0;color:#333}#modal-content button{margin:min(10px,1vh) min(5px,.5vw);padding:min(10px,1.5vh) min(20px,2.5vw);border:2px solid #8B4513;border-radius:min(15px,1.5vh);background:#98fb98;color:#2f4f4f;font-weight:700;cursor:pointer;transition:all .2s;font-size:clamp(12px,2vh,14px)}.sticker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:15px;margin:20px 0}.sticker{padding:15px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:24px;transition:all .2s}.sticker.unlocked{background:linear-gradient(135deg,gold,orange);box-shadow:0 4px 8px #0003}.sticker.locked{background:#f0f0f0;color:#999}.sticker-name{font-size:12px;font-weight:700}.large-text #question{font-size:64px}.large-text button,.large-text .mode-chip{font-size:18px;padding:15px 25px}.large-text .number{font-size:40px}@media (prefers-reduced-motion: no-preference){#board{animation:gentle-bounce 2s ease-in-out infinite alternate}.hole.visible{animation:mole-pop .3s ease-out}.hit-correct,.hit-wrong{animation:feedback-pulse .2s ease-out}}@keyframes gentle-bounce{0%{transform:translateY(0)}to{transform:translateY(-5px)}}@keyframes mole-pop{0%{transform:scale(0) rotate(-45deg)}to{transform:scale(1) rotate(0)}}@keyframes feedback-pulse{0%{transform:scale(1)}to{transform:scale(1.1)}}@media (max-width: 768px){#hud{padding:15px 20px}#hud div{font-size:20px}}@media (min-width: 768px){#game{width:min(700px,90vw);max-height:90vh}#board{gap:20px;padding:30px;max-width:min(600px,75vw)}#hud{padding:20px 30px}#question{padding:30px 20px;font-size:clamp(64px,4vh,48px)}#controls{padding:20px;gap:15px}#actions button{padding:12px 24px;font-size:16px}.mode-chip{padding:8px 16px;font-size:14px}}@media (max-height: 600px){body{padding:.5vh 1vw}#game{height:99vh;width:98vw}#board{max-height:35vh;min-height:250px;padding:10px;gap:6px}#question{padding:1.5vh 2vw}#controls{gap:.8vh;padding:1vh}}@media (max-width: 600px){body{padding:.5vh 1vw}body :root{font-size:clamp(18px,4vw,24px)}#game{width:98vw;border-radius:10px}#board{gap:8px;padding:15px;gap:2vw}#board #question{font-size:clamp(64px,8vw,36px);padding:1.5vh 1vw}#board #hud div{font-size:clamp(18px,4vw,22px)}#board #controls{padding:1.5vh 1vw}#board .mode-chip{font-size:clamp(16px,3vw,20px)}#board #actions button{font-size:clamp(20px,4vw,26px)}#board label{font-size:clamp(16px,2.5vw,18px)}#actions button{min-width:80px;padding:1.2vh 3vw}#modes{justify-content:center;gap:2vw}.mode-chip{padding:1vh 3vw;min-width:70px;text-align:center}#toggles{gap:3vw;justify-content:space-around}label{font-size:clamp(11px,2vw,13px)}#question{font-size:clamp(64px,7vw,32px);padding:2vh 2vw}.number{font-size:clamp(26px,5vw,24px)}.mode-chip{font-size:clamp(11px,2.5vw,14px)}}@media (max-width: 400px){#game{width:99vw}#board{gap:6px;padding:10px;max-width:min(350px,90vw)}#question{font-size:clamp(64px,6vw,28px);padding:1.5vh 1vw}#hud div{font-size:clamp(16px,4vw,20px)}#controls{padding:1vh 1vw}}