*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:manipulation}#app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}.game{width:min(92vw,400px);display:flex;flex-direction:column;gap:14px}.crumb{font-size:14px}.crumb a{color:var(--accent);text-decoration:none;font-weight:700}.crumb a:hover{text-decoration:underline}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.title{font-size:clamp(30px,9vw,48px);font-weight:800;line-height:1;letter-spacing:-1px;background:linear-gradient(135deg,var(--accent),#ef5350 130%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.scores{display:flex;gap:8px}.score-box{background:linear-gradient(180deg,color-mix(in srgb,var(--board-bg) 88%,#fff),var(--board-bg));color:var(--accent-text);border-radius:8px;padding:6px 12px;text-align:center;min-width:56px;box-shadow:inset 0 1px #ffffff2e,0 2px 6px #00000024}.score-box .label{font-size:11px;text-transform:uppercase;letter-spacing:1px;opacity:.85;font-weight:700}.score-box .value{font-size:20px;font-weight:800;line-height:1.1}.board-wrap{position:relative;align-self:center}.board{--board: min(92vw, 400px);--cs: calc(var(--board) / var(--n));--gap: 4px;position:relative;width:var(--board);height:var(--board);border-radius:14px;touch-action:none;background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.1),transparent 55%),radial-gradient(140% 140% at 80% 100%,rgba(0,0,0,.22),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--board-bg) 82%,#fff) 0%,var(--board-bg) 42%,color-mix(in srgb,var(--board-bg) 80%,#000) 100%);box-shadow:inset 0 2px 3px #ffffff29,inset 0 -6px 14px #00000047,0 14px 32px #00000038;padding:0}.board:before{content:"";position:absolute;inset:6px;border-radius:9px;border:2px dashed color-mix(in srgb,var(--accent-text) 42%,transparent);pointer-events:none;z-index:1}.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);z-index:0}.grid .cell{margin:3px;border-radius:7px;background:linear-gradient(180deg,#ffffff0d,#0000000d);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--cell-bg) 60%,transparent),inset 0 1px 2px #0000001a;opacity:.6}.exit{position:absolute;right:-9px;top:calc(var(--exit-row) * var(--cs) + var(--gap));height:calc(var(--cs) - 2 * var(--gap));width:16px;border-radius:5px;background:transparent;opacity:1;z-index:2}.exit:before{content:"";position:absolute;right:6px;top:-1px;bottom:-1px;width:6px;border-radius:4px;background:linear-gradient(180deg,#ff7b72,#ef5350);box-shadow:0 0 10px 2px #ef53508c;animation:exitPulse 1.8s ease-in-out infinite}.exit:after{content:"›››";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:calc(var(--cs) * .5);line-height:1;font-weight:900;letter-spacing:-2px;color:#ef5350;text-shadow:0 0 8px rgba(239,83,80,.5);animation:exitArrows 1.4s ease-in-out infinite}@keyframes exitPulse{0%,to{opacity:.65}50%{opacity:1}}@keyframes exitArrows{0%,to{opacity:.5;transform:translateY(-50%)}50%{opacity:1;transform:translate(2px,-50%)}}.blocks{position:absolute;inset:0;z-index:3}.block{--car: #7f8aa3;--car-lo: color-mix(in srgb, var(--car) 72%, #000);--car-hi: color-mix(in srgb, var(--car) 78%, #fff);position:absolute;border-radius:11px;background:linear-gradient(165deg,var(--car-hi) 0%,var(--car) 46%,var(--car-lo) 100%);box-shadow:inset 0 2px #ffffff59,inset 0 -5px 8px #00000047,0 4px 9px #0000004d;cursor:grab;touch-action:none;transition:left .17s cubic-bezier(.34,1.28,.64,1),top .17s cubic-bezier(.34,1.28,.64,1),box-shadow .15s ease,filter .15s ease;will-change:left,top,transform}.block:hover{filter:brightness(1.06)}.block:active{cursor:grabbing}.block:before{content:"";position:absolute;left:8%;right:8%;top:6%;height:34%;border-radius:8px;background:linear-gradient(180deg,#ffffff80,#fff0);pointer-events:none}.block:after{content:"";position:absolute;border-radius:6px;background:linear-gradient(180deg,#96c8eb6b,#283c5a4d);box-shadow:inset 0 0 0 1px #ffffff24;pointer-events:none}.block.h:after{inset:24% 30%}.block.v:after{inset:30% 24%}.block:nth-child(8n+1){--car: #4db6ac}.block:nth-child(8n+2){--car: #f6a623}.block:nth-child(8n+3){--car: #5c9dff}.block:nth-child(8n+4){--car: #b388e6}.block:nth-child(8n+5){--car: #7cc36a}.block:nth-child(8n+6){--car: #f27a9d}.block:nth-child(8n+7){--car: #47c7d6}.block:nth-child(8n){--car: #8a94ad}.block.target{--car: #ef4b48;--car-lo: #c62b28;--car-hi: #ff8a7d;box-shadow:inset 0 2px #fff6,inset 0 -5px 8px #78000059,0 4px 10px #0000004d,0 0 16px 2px #ef4b4873;animation:heroGlow 2.2s ease-in-out infinite}.block.target:after{background:linear-gradient(180deg,#ffd2c880,#961e1952)}@keyframes heroGlow{0%,to{box-shadow:inset 0 2px #fff6,inset 0 -5px 8px #78000059,0 4px 10px #0000004d,0 0 14px 1px #ef4b4866}50%{box-shadow:inset 0 2px #fff6,inset 0 -5px 8px #78000059,0 4px 10px #0000004d,0 0 22px 4px #ef4b489e}}.block.selected{outline:3px solid var(--accent);outline-offset:2px;filter:brightness(1.08);z-index:4}.block.escaped{transition:left .5s cubic-bezier(.4,0,.9,.5),top .5s ease,opacity .5s ease;opacity:0;box-shadow:0 4px 10px #0000004d,0 0 40px 12px #ef4b48bf;animation:none;z-index:5}.overlay{position:absolute;inset:0;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;background:var(--overlay-bg);z-index:10;opacity:0;pointer-events:none;transition:opacity .2s ease;overflow:hidden}.overlay:before{content:"";position:absolute;width:130%;height:130%;background:radial-gradient(circle at center,rgba(239,83,80,.3),transparent 60%);opacity:0;transform:scale(.6)}.overlay.show{opacity:1;pointer-events:auto}.overlay.show:before{animation:winBurst .9s ease-out forwards}@keyframes winBurst{0%{opacity:0;transform:scale(.5)}40%{opacity:1}to{opacity:.55;transform:scale(1.1)}}.overlay .msg{position:relative;font-size:clamp(26px,8vw,40px);font-weight:800;color:var(--accent);text-shadow:0 2px 10px rgba(239,83,80,.3);animation:winPop .5s cubic-bezier(.34,1.56,.64,1) both}.overlay.show .msg{animation:winPop .5s cubic-bezier(.34,1.56,.64,1) both}@keyframes winPop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.overlay .sub{position:relative;font-size:15px;opacity:.85}.overlay .actions{position:relative;display:flex;gap:10px;margin-top:8px}.controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.btn{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 88%,#fff),var(--accent));color:var(--accent-text);border:none;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:inset 0 1px #ffffff40,0 2px 6px #0000002e;transition:filter .12s ease,transform .12s ease}.btn:hover{filter:brightness(1.06)}.btn:active{transform:translateY(1px)}.btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent);padding:8px 14px;box-shadow:none}.btn.ghost:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}.how{font-size:12px;opacity:.85;text-align:center}.how b{font-weight:700}@media(prefers-reduced-motion:reduce){.exit:before,.exit:after,.block.target,.overlay.show:before,.overlay .msg{animation:none}}