:root{color-scheme:dark;font-family:Manrope,system-ui,sans-serif;background:#11110f;color:#edf0ed}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#11110f}button{font:inherit}.app-shell{width:min(920px,calc(100% - 36px));margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;height:72px;border-bottom:1px solid #2d2d27}.brand{color:#eeeade;font-family:Georgia,serif;font-size:22px;font-style:italic;font-weight:700;letter-spacing:-.9px;text-decoration:none}.status{display:flex;align-items:center;gap:18px;color:#8c8a7c;font-family:DM Mono,monospace;font-size:10px}.status b{color:#ebe8dc;font-size:12px;font-weight:400}.status button{width:25px;height:25px;padding:0;border:1px solid #3c3c34;border-radius:50%;background:transparent;color:#c8c5b5;cursor:pointer;font-size:15px}.status button:hover{background:#25251f}.play-area{padding:44px 0}.board-frame{position:relative;padding:clamp(16px,3vw,28px);border:1px solid #2d2d27;background:#171713;touch-action:none}.board{position:relative;display:grid;grid-template-columns:repeat(17,minmax(0,1fr));gap:clamp(3px,.75vw,7px);touch-action:none;-webkit-user-select:none;user-select:none}.fruit{position:relative;z-index:1;aspect-ratio:1;min-width:0;padding:0 0 3%;border:0;border-radius:48% 48% 45% 45%/44% 44% 54% 54%;background:#bf3930;box-shadow:inset -4px -5px #792820,inset 3px 3px #e45a4c,0 2px #090906;color:#fff9e7;cursor:crosshair;font-family:DM Mono,monospace;font-size:clamp(9px,1.45vw,16px);font-weight:500;line-height:1;transition:opacity .16s,transform .16s}.fruit:before{content:"";position:absolute;z-index:-1;top:-14%;left:47%;width:8%;height:23%;border-radius:6px;background:#6e4a25;transform:rotate(-13deg)}.fruit:after{content:"";position:absolute;z-index:-1;top:-10%;left:54%;width:22%;height:13%;border-radius:100% 0;background:#78983b;transform:rotate(-20deg)}.fruit-2{background:#c84634;box-shadow:inset -4px -5px #812a22,inset 3px 3px #ee7059,0 2px #090906}.fruit-3{background:#ad322b;box-shadow:inset -4px -5px #6a201c,inset 3px 3px #d9574a,0 2px #090906}.fruit-4{background:#d04b36;box-shadow:inset -4px -5px #8a2a20,inset 3px 3px #ef745c,0 2px #090906}.fruit:hover{filter:brightness(1.1)}.fruit.cleared{background:transparent;box-shadow:none;color:transparent;cursor:default;opacity:0;transform:scale(.6)}.fruit.cleared:before,.fruit.cleared:after{opacity:0}.selection-box{position:absolute;z-index:3;display:block;border:2px solid #d5cec0;border-radius:5px;background:#fffbe208;pointer-events:none}.selection-box.valid{border-color:#f04b3e;background:#ef44331c;box-shadow:0 0 0 1px #621e18}.selection-box.missed{border-color:#f06a59;background:#ef443318;box-shadow:0 0 0 1px #72271e}.selection-box.missed:after{content:attr(data-label);position:absolute;top:-19px;left:-2px;padding:2px 5px;background:#d84d3e;color:#fff5e8;font:10px DM Mono,monospace}.selection-box[hidden]{display:none}.game-over{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#141410ec;text-align:center}.game-over[hidden]{display:none}.game-over strong{color:#eee9db;font-family:DM Mono,monospace;font-size:52px;font-weight:400;letter-spacing:-.1em}.game-over span{margin-top:3px;color:#aaa697;font-family:DM Mono,monospace;font-size:11px}.game-over button{padding:7px 13px;border:1px solid #5a564b;border-radius:0;background:transparent;color:#ece7d7;cursor:pointer;font:11px DM Mono,monospace}.game-over button:hover{background:#28271f}.result-actions{display:flex;gap:7px;margin-top:22px}.game-over .close-results{position:absolute;top:12px;right:14px;width:27px;height:27px;margin:0;padding:0;border-color:transparent;color:#aaa697;font:23px/22px Arial,sans-serif}.game-over .close-results:hover{color:#f1ecdc;background:transparent}.review-toolbar{display:flex;align-items:center;gap:7px;min-height:34px;margin-top:10px;color:#9f9a8c;font:10px DM Mono,monospace}.review-toolbar span{margin-right:3px}.review-toolbar button{padding:6px 9px;border:1px solid #4e4a40;border-radius:0;background:transparent;color:#ddd6c3;cursor:pointer;font:inherit}.review-toolbar button:hover{border-color:#aaa18d;background:#25241d}.leaderboard{width:min(560px,100%);margin:0 auto 56px}.leaderboard-heading{display:flex;align-items:baseline;justify-content:space-between;padding:0 0 10px;border-bottom:1px solid #2d2d27}.leaderboard h2{margin:0;color:#e9e5d9;font-size:14px;font-weight:700;letter-spacing:-.2px}.leaderboard-heading span{color:#767467;font:10px DM Mono,monospace}.leaderboard ol{margin:0;padding:0;list-style:none}.leaderboard li{display:grid;grid-template-columns:33px 1fr auto;gap:10px;min-height:35px;align-items:center;border-bottom:1px solid #272721;color:#a5a296;font:11px DM Mono,monospace}.leaderboard li>span{color:#69685e}.leaderboard li b{color:#d8d4c6;font-weight:400}.leaderboard li strong{color:#eee9dd;font-weight:400}.leaderboard li.leaderboard-empty{display:block;padding:12px 0;color:#77766b}dialog#username-dialog{width:min(360px,calc(100% - 36px));margin:auto;padding:22px;border:1px solid #3d3c35;border-radius:0;background:#191914;color:#eee9dc;box-shadow:0 18px 80px #000b}dialog#username-dialog::backdrop{background:#08080699}#username-form>label{display:block;margin-bottom:14px;font-size:14px;font-weight:700}.username-fields{display:flex;gap:7px}.username-fields input{min-width:0;flex:1;padding:9px 10px;border:1px solid #555249;border-radius:0;outline:0;background:#10100d;color:#f2eddf;font:12px DM Mono,monospace}.username-fields input:focus{border-color:#d9d2bd}.username-fields button{padding:0 13px;border:1px solid #c8c0a9;border-radius:0;background:#e9e2cf;color:#171711;cursor:pointer;font:11px DM Mono,monospace}.username-fields button:hover{background:#fff7e2}#username-error{min-height:15px;margin:7px 0 0;color:#db867b;font:10px DM Mono,monospace}@media(max-width:650px){.app-shell{width:min(100% - 24px,650px)}.topbar{height:62px}.play-area{padding:24px 0}.board-frame{padding:13px 8px}.board{gap:3px}.fruit{font-size:clamp(8px,3.8vw,15px)}.status{gap:9px;font-size:0}.status b{font-size:11px}.selection-box{border-width:1.5px}}