:root{--cell-size:44px;--cell-gap:3px;--grid-cols:17;--grid-rows:10;--pad:10px;--frame-bg:#3dba5a;--frame-border:#2a8f40;--field-bg:#e8f9d4;--gingham-a:#ffffff80;--gingham-b:#96d77866;--apple-bg:#e82222;--apple-hi:#ff6a6a;--apple-shadow:#0000004d;--apple-text:#fff;--sel-border:#1a5fff;--sel-bg:#1a5fff26;--sel-valid-border:#0c4;--sel-valid-bg:#0c43;--sel-invalid-border:#f22;--sel-invalid-bg:#f223;--font:"Nunito", system-ui, sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:radial-gradient(#2d9e4a 0%,#1a6b2e 100%);justify-content:center;align-items:center;min-height:100dvh;display:flex;overflow:hidden}#game-frame{background:var(--frame-bg);border:5px solid var(--frame-border);border-radius:20px;flex-direction:column;gap:8px;padding:10px 12px;display:flex;box-shadow:0 10px 50px #00000080,inset 0 2px #fff3}#header-bar{justify-content:space-between;align-items:center;padding:0 4px;display:flex}#title-text{color:#fff;text-shadow:0 2px 4px #0000004d;font-size:1.4rem;font-weight:900}#header-right{align-items:center;gap:20px;display:flex}#score-wrap{color:#fff;text-shadow:0 1px 3px #0000004d;white-space:nowrap;font-size:1rem;font-weight:900}#score-value{font-variant-numeric:tabular-nums;color:#ffe066;font-size:1.3rem}#timer-wrap{align-items:center;gap:8px;display:flex}#timer-display{font-variant-numeric:tabular-nums;color:#fff;text-align:right;text-shadow:0 1px 3px #0000004d;min-width:38px;font-size:1.1rem;font-weight:900}#timer-display.low{color:#fd4;animation:.6s infinite alternate timerPulse}@keyframes timerPulse{0%{transform:scale(1)}to{transform:scale(1.1)}}#timer-bar-track{background:#00000040;border:2px solid #0003;border-radius:7px;width:140px;height:14px;overflow:hidden}#timer-bar-fill{background:linear-gradient(90deg,#5f8,#2c4);border-radius:5px;width:100%;height:100%;transition:width .5s linear}#timer-bar-fill.low{background:linear-gradient(90deg,#fa3,#f42)}#grid-wrapper{border:3px solid var(--frame-border);padding:var(--pad);touch-action:none;background-color:var(--field-bg);background-image:repeating-linear-gradient(45deg, var(--gingham-a) 0px, var(--gingham-a) 10px, transparent 10px, transparent 20px), repeating-linear-gradient(-45deg, var(--gingham-b) 0px, var(--gingham-b) 10px, transparent 10px, transparent 20px);border-radius:10px;position:relative;overflow:hidden;box-shadow:inset 0 2px 8px #0000001a}#grid-container{grid-template-columns:repeat(var(--grid-cols), var(--cell-size));grid-template-rows:repeat(var(--grid-rows), var(--cell-size));gap:var(--cell-gap);z-index:1;display:grid;position:relative}.cell{width:var(--cell-size);height:var(--cell-size);color:var(--apple-text);cursor:default;pointer-events:none;justify-content:center;align-items:center;font-size:1.05rem;font-weight:900;display:flex;position:relative}.cell:before{content:"";background:radial-gradient(circle at 38% 32%, var(--apple-hi) 0%, var(--apple-bg) 55%, #a00 100%);box-shadow:inset 0 -4px 6px #00000040, 0 3px 6px var(--apple-shadow);z-index:0;border-radius:50%/58% 58% 42% 42%;position:absolute;inset:2px}.cell:after{content:"";z-index:2;background:#5a3000;border-radius:2px;width:3px;height:8px;position:absolute;top:1px;left:50%;transform:translate(-2px)rotate(-10deg)}.cell span{z-index:1;text-shadow:0 1px 3px #00000080;position:relative}.cell.cleared{visibility:hidden}.cell.clearing:before,.cell.clearing:after,.cell.clearing span{animation:.35s forwards appleOut}@keyframes appleOut{0%{opacity:1;transform:scale(1)}60%{opacity:.4;transform:scale(.7)}to{opacity:0;transform:scale(.3)}}#selection-overlay{pointer-events:none;border:2.5px solid var(--sel-border);background:var(--sel-bg);z-index:50;opacity:0;border-radius:5px;width:0;height:0;transition:background 80ms,border-color 80ms;position:absolute;top:0;left:0}#selection-overlay.active{opacity:1}#selection-overlay.valid{border-color:var(--sel-valid-border);background:var(--sel-valid-bg)}#selection-overlay.invalid{border-color:var(--sel-invalid-border);background:var(--sel-invalid-bg)}#controls-bar{justify-content:space-between;align-items:center;padding:0 4px;display:flex}#bgm-btn{color:#fff;font-family:var(--font);cursor:pointer;background:#2a8f40;border:2px solid #1a6b2e;border-radius:8px;padding:7px 18px;font-size:.9rem;font-weight:900;transition:filter .15s,transform .1s;box-shadow:0 3px 8px #0000004d}#bgm-btn:hover{filter:brightness(1.15)}#bgm-btn:active{transform:scale(.96)}#reset-btn{color:#fff;font-family:var(--font);cursor:pointer;background:#1a5fff;border:none;border-radius:8px;padding:7px 22px;font-size:.9rem;font-weight:900;transition:filter .15s,transform .1s;box-shadow:0 3px 8px #0000004d}#reset-btn:hover{filter:brightness(1.15)}#reset-btn:active{transform:scale(.96)}#game-over-backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:200;background:#0000008c;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}#game-over-backdrop.hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}#game-over-modal{text-align:center;background:linear-gradient(160deg,#2d9e4a,#1a6b2e);border:4px solid #4ddb70;border-radius:22px;padding:48px 72px;animation:.4s cubic-bezier(.34,1.56,.64,1) popIn;box-shadow:0 20px 70px #0009}@keyframes popIn{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}#game-over-modal h2{color:#fff;text-shadow:0 2px 6px #0000004d;margin-bottom:6px;font-size:2.4rem;font-weight:900}#game-over-modal p{color:#a8ffca;margin-bottom:2px;font-size:1rem}#final-score{color:#ffe066;text-shadow:0 3px 8px #0000004d;margin:10px 0 30px;font-size:5rem;font-weight:900}#restart-btn{font-family:var(--font);color:#fff;cursor:pointer;background:#1a5fff;border:none;border-radius:14px;padding:14px 52px;font-size:1.15rem;font-weight:900;transition:filter .15s,transform .1s;box-shadow:0 4px 12px #00000059}#restart-btn:hover{filter:brightness(1.15)}#restart-btn:active{transform:scale(.96)}@media (width<=900px){:root{--cell-size:36px}#timer-bar-track{width:90px}}@media (width<=700px){:root{--cell-size:28px;--cell-gap:2px}#game-frame{padding:7px 8px}#title-text{font-size:1.1rem}#timer-bar-track{width:60px}.cell{font-size:.8rem}}#music-controls{align-items:center;gap:12px;display:flex}#volume-wrap{align-items:center;gap:6px;display:flex}#vol-icon{text-align:center;width:24px;font-size:1.1rem}#volume-slider{appearance:none;cursor:pointer;background:#0000004d;border-radius:3px;outline:none;width:90px;height:6px}#volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .1s;box-shadow:0 1px 4px #0006}#volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}#volume-slider::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #0006}#start-screen{z-index:300;background:radial-gradient(#2d9e4a 0%,#1a6b2e 100%);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#start-screen.hidden,#game-frame.hidden{display:none}#start-card{background:var(--frame-bg);border:5px solid var(--frame-border);text-align:center;border-radius:24px;flex-direction:column;align-items:center;gap:18px;padding:52px 72px;animation:.45s cubic-bezier(.34,1.56,.64,1) popIn;display:flex;box-shadow:0 12px 60px #00000080,inset 0 2px #fff3}#start-title{color:#fff;text-shadow:0 3px 8px #00000059;font-size:3rem;font-weight:900}#start-subtitle{color:#d4ffe4;font-size:1.15rem;font-weight:700}#start-subtitle strong{color:#ffe066;font-size:1.3rem}#start-btn{color:#fff;width:110px;height:110px;font-family:var(--font);cursor:pointer;text-shadow:0 1px 4px #0006;background:radial-gradient(circle at 38% 32%,#ff6a6a 0%,#e82222 55%,#a00 100%);border:none;border-radius:50%;margin-top:8px;font-size:1.3rem;font-weight:900;transition:transform .15s,filter .15s;position:relative;box-shadow:0 6px 20px #0006,inset 0 -4px 8px #00000040,inset 0 4px 8px #fff3}#start-btn:after{content:"";background:#5a3000;border-radius:2px;width:4px;height:10px;position:absolute;top:-4px;left:50%;transform:translate(-2px)rotate(-10deg)}#start-btn:hover{filter:brightness(1.1);transform:scale(1.07)}#start-btn:active{transform:scale(.97)}#start-hint{color:#a8ffca;font-size:.9rem;font-weight:700}