:root{--re-bg:#fdfbf6;--re-ink:#2d2a26;--re-muted:#6c665c;--re-line:#e2dacb;--re-accent:#a2522a;color-scheme:light;--paper:#f3efe6;--card:#fdfbf6;--ink:#2d2a26;--muted:#6c665c;--line:#e2dacb;--teal:#a2522a;--deep:#4a2c1c;--gold:#d39b2a;--danger:#c23b4c;--glow:#ffe08a}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation;border:0;color:inherit}button:disabled{cursor:default}
button:focus-visible,a:focus-visible{outline:3px solid var(--teal);outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.shell{max-width:1220px;margin:auto;padding:24px 38px 44px}
header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px}
.brand{display:inline-flex;align-items:center;min-height:44px;margin:-6px 0;font:800 16px 'Manrope',sans-serif;letter-spacing:2px}.brand span{color:var(--gold)}
.utilities{display:flex;gap:8px}.utilities button{padding:9px 13px;border:1px solid var(--line);border-radius:8px;background:transparent;font-size:12px;font-weight:700}.utilities button:disabled{opacity:.45}
.heading{display:flex;align-items:flex-end;justify-content:space-between;margin:34px 0 25px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.6px;margin:0 0 12px;color:var(--teal)}
h1{font:800 clamp(38px,5vw,62px)/1.05 'Manrope',sans-serif;letter-spacing:-3px;margin:0}h1 em{font-style:normal;color:var(--teal)}
.howto{margin:10px 0 0;font-size:15px;color:var(--muted);line-height:1.5}
.layout{display:block;max-width:760px;margin:0 auto}
.court{position:relative;border:1px solid var(--line);border-radius:20px;padding:20px;background:var(--card);box-shadow:0 12px 40px #1a3a3a08;min-width:0}
.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-bottom:15px;border-bottom:1px solid var(--line)}
.hud>div{padding-left:15px;border-left:1px solid var(--line);min-width:0}.hud>div:first-child{padding-left:0;border:0}
.hud small{display:block;color:var(--muted);font-size:12px;letter-spacing:.6px;font-weight:700}
.hud strong{display:flex;align-items:center;gap:6px;font:800 23px 'Manrope',sans-serif;margin-top:6px;white-space:nowrap;min-height:30px}
.sub{display:block;font-size:12px;color:var(--muted);margin-top:2px;font-weight:700}
.stars{display:block;font-size:12px;letter-spacing:1px;color:var(--gold);margin-top:2px}
.ad-below-game{margin:20px 0 0}.ad-below-game:empty{display:none}
.start{position:absolute;left:0;right:0;top:50%;z-index:2;display:flex;justify-content:center;transform:translateY(-50%);pointer-events:none}
.start button{pointer-events:auto;min-width:168px;min-height:56px;padding:0 34px;border-radius:999px;font:800 20px 'Manrope',sans-serif;box-shadow:0 10px 30px #2d1a0e80}
.start.practice{top:auto;bottom:10px;left:auto;right:10px;transform:none}.start.practice button{min-width:0;min-height:44px;padding:0 18px;font-size:14px}
.day-line .text-button{padding:0 6px;min-height:44px;margin:-8px 0;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.rules-sheet{width:min(440px,calc(100vw - 24px));padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink)}
.rules-sheet::backdrop{background:#23303a80}.rules-sheet h2{font:800 20px 'Manrope',sans-serif;margin:0 0 12px}
.rule-list{display:grid;gap:8px}.rule-list button{display:grid;gap:3px;min-height:52px;padding:10px 12px;text-align:left;border:1px solid #e6cfb6;border-radius:10px;background:var(--card)}
.rule-list b{color:var(--teal);font-size:14px}.rule-list span{font-size:12px;color:var(--muted);line-height:1.4}.rule-list button[aria-pressed=true]{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.rules-sheet>.text-button{display:block;margin:10px auto 0;min-height:44px}
.primary,.secondary{padding:12px 15px;font-size:12px;font-weight:800;border-radius:9px;transition:transform .12s}
.primary{background:var(--teal);color:#fff}.secondary{background:#f4e8da;color:var(--teal);border:1px solid #e6cfb6}
.primary:active,.secondary:active{transform:translateY(2px)}.primary:disabled,.secondary:disabled{opacity:.55}
.text-button{background:none;color:var(--teal);padding:7px;font-size:12px;font-weight:700}.text-button:disabled{opacity:.45}
.text-button:active:not(:disabled),.utilities button:active:not(:disabled),.rule-list button:active{opacity:.6}
.day-line{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--muted);padding:12px 0 6px}.day-line span:first-child{color:var(--teal);font-weight:700}
.rule-impact{font-size:12px;color:var(--muted);margin:0 0 12px}.small{font-size:12px;color:var(--muted)}
.stage{position:relative;display:flex;justify-content:center}
/* The lot is a CSS grid; carriages are buttons that span two or three cells and slide
   by transform, so every move eases. Carriages leaving the lot slide past its clipped edge. */
.lot{--rows:5;--cols:5;--gap:5px;--pad:10px;--cell:56px;--step:calc(var(--cell) + var(--gap));position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:var(--gap);padding:var(--pad);width:min(100%,calc(var(--cols) * 68px + (var(--cols) - 1) * var(--gap) + 2 * var(--pad)));aspect-ratio:var(--cols)/var(--rows);border-radius:18px;overflow:hidden;background-color:#3b4141;background-image:linear-gradient(#f6e7c41f 1.5px,transparent 1.5px),linear-gradient(90deg,#f6e7c41f 1.5px,transparent 1.5px),radial-gradient(circle at 30% 20%,#4c5453,#2e3434 75%);background-size:var(--step) var(--step),var(--step) var(--step),100% 100%;background-position:calc(var(--pad) - var(--gap) / 2) calc(var(--pad) - var(--gap) / 2),calc(var(--pad) - var(--gap) / 2) calc(var(--pad) - var(--gap) / 2),0 0;box-shadow:inset 0 0 0 3px #e9c98a55,inset 0 0 34px #0008,0 14px 30px #3a2a1a33;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lot-empty{grid-column:1/-1;grid-row:1/-1;align-self:center;text-align:center;margin:0;color:#ece0c8;font-size:13px}
.car{--paint:#c8743a;--shade:#8a4a22;position:relative;min-width:0;min-height:0;padding:0;margin:2px;border-radius:calc(var(--cell) * .26);background:linear-gradient(145deg,color-mix(in srgb,var(--paint) 70%,#fff),var(--paint) 45%,var(--shade));box-shadow:inset 0 0 0 2px #fff3,inset 0 -3px 0 #0003,0 4px 6px #0007;transform:translate(var(--tx,0),var(--ty,0));transition:transform .36s cubic-bezier(.45,0,.2,1),opacity .2s ease,filter .2s}
.car.copper{--paint:#c8743a;--shade:#7f3f1c}.car.teal{--paint:#2f8f88;--shade:#17524f}.car.plum{--paint:#8a5aa0;--shade:#4b2c5c}.car.mustard{--paint:#dba73c;--shade:#8c6114}.car.sage{--paint:#78a46f;--shade:#3f6337}
.car .roof{position:absolute;inset:24%;border-radius:calc(var(--cell) * .14);background:linear-gradient(160deg,#dff3f6 0%,#9cc3cc 40%,#4d6f78 100%);box-shadow:inset 0 0 0 2px #0002;opacity:.92}
.car[data-dir=left] .roof,.car[data-dir=right] .roof{inset:20% calc(var(--cell) * .38)}.car[data-dir=up] .roof,.car[data-dir=down] .roof{inset:calc(var(--cell) * .38) 20%}
.car .lights{position:absolute;pointer-events:none;--lamp:radial-gradient(circle,#fff6c4 0 45%,#ffd36a 55%,transparent 62%)}
.car[data-dir=right] .lights{right:3%;top:10%;bottom:10%;width:calc(var(--cell) * .16);background:var(--lamp) 50% 0/100% calc(var(--cell) * .16) no-repeat,var(--lamp) 50% 100%/100% calc(var(--cell) * .16) no-repeat}
.car[data-dir=left] .lights{left:3%;top:10%;bottom:10%;width:calc(var(--cell) * .16);background:var(--lamp) 50% 0/100% calc(var(--cell) * .16) no-repeat,var(--lamp) 50% 100%/100% calc(var(--cell) * .16) no-repeat}
.car[data-dir=down] .lights{bottom:3%;left:10%;right:10%;height:calc(var(--cell) * .16);background:var(--lamp) 0 50%/calc(var(--cell) * .16) 100% no-repeat,var(--lamp) 100% 50%/calc(var(--cell) * .16) 100% no-repeat}
.car[data-dir=up] .lights{top:3%;left:10%;right:10%;height:calc(var(--cell) * .16);background:var(--lamp) 0 50%/calc(var(--cell) * .16) 100% no-repeat,var(--lamp) 100% 50%/calc(var(--cell) * .16) 100% no-repeat}
.arrow{position:absolute;left:50%;top:50%;width:calc(var(--cell) * .46);height:calc(var(--cell) * .46);margin:calc(var(--cell) * -.23) 0 0 calc(var(--cell) * -.23);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 3.5 11.5h5.6v10h5.8v-10h5.6z' fill='%23fff4d6' stroke='%233a2405' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 1px 1px #0009);pointer-events:none}
.car[data-dir=right] .arrow{transform:rotate(90deg)}.car[data-dir=down] .arrow{transform:rotate(180deg)}.car[data-dir=left] .arrow{transform:rotate(270deg)}
.car:focus-visible{outline:3px solid #fff;outline-offset:-1px;box-shadow:0 0 0 6px var(--teal)}
@media(hover:hover){.car:not(.gone):hover{filter:brightness(1.08)}}
.car:not(.gone):active{filter:brightness(.88)}
/* Leaving the lot: accelerate out past the clipped edge, then fade. */
.car.gone{opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.55,0,.85,.4),opacity .2s ease .3s}
.car.bump{animation:bump .3s ease-out}
@keyframes bump{40%{transform:translate(calc(var(--tx,0px) + var(--bx,0px)),calc(var(--ty,0px) + var(--by,0px)))}}
.car.struck{animation:struck .4s ease-out;filter:drop-shadow(0 0 6px #ff7a5a)}
@keyframes struck{20%,60%{transform:translate(calc(var(--tx,0px) - 3px),var(--ty,0px))}40%,80%{transform:translate(calc(var(--tx,0px) + 3px),var(--ty,0px))}}
.car.hinted{filter:drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 3px var(--glow));animation:glow 1.2s ease-in-out infinite alternate}
@keyframes glow{to{filter:drop-shadow(0 0 14px var(--glow)) drop-shadow(0 0 4px var(--glow))}}
.lot.reset .car{animation:settle .4s ease-out}
@keyframes settle{from{opacity:0;scale:.85}}
.lot-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}.lot-tools .secondary{min-height:44px}.lot-tools #left{margin-left:auto}
.notice{font-size:14px;line-height:1.5;color:var(--teal);min-height:36px;margin:11px 0}
.rule-note{padding:11px;border-left:2px solid #d9a77f;background:#fff8;font-size:14px;line-height:1.6;color:var(--teal);margin:15px 0}
.game-help-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:14px 0}
.game-help-links a,.game-help-links button{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;touch-action:manipulation;background:transparent}
.game-help-links .play-guide-link{color:var(--teal);font-size:14px;text-decoration:underline;text-underline-offset:3px}.catalog{font-size:14px;font-weight:700}
#help-panel{width:min(560px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);overflow:hidden;box-shadow:0 18px 70px #23303a33}
#help-panel::backdrop{background:#23303a80}
.lab-help{display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}
.help-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px;line-height:1.65;overflow-wrap:anywhere}
.help-body h2{font:800 24px/1.25 'Manrope',sans-serif;margin:0 0 14px}.help-body p,.help-steps{font-size:14px}
.help-state{padding:12px;border-radius:9px;background:#f1e6d6;color:var(--teal)}
.help-steps{padding-left:22px}.help-steps li{padding-left:4px;margin:12px 0}.help-body .help-keys{font-size:12px;color:var(--muted)}
.help-full-guide{display:inline-flex;align-items:center;min-height:44px;color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.help-actions{flex:0 0 auto;border-top:1px solid var(--line);padding:14px 22px;background:var(--paper)}.help-actions button{width:100%;min-height:44px;font-size:14px;white-space:normal}
body[data-phase=paused] .court{border-color:#d9b48f}body[data-phase=paused] .day-line span:first-child:before{content:'PAUSED · '}body[data-phase=paused] .car{filter:grayscale(.5)}
@media(max-width:900px){.shell{padding:18px 22px 30px}.court{padding:15px}}
/* Keep the HUD clear of the mobile sticky header when a set starts or practice continues. */
.court{scroll-margin-top:76px}
/* On a 390px phone a 7×7 lot keeps every cell at least 44px wide. */
@media(max-width:700px){.shell{padding:12px 12px 24px}header{position:sticky;top:0;z-index:3;background:var(--paper);padding:6px 0 12px}.brand{font-size:13px;letter-spacing:1.2px}.utilities{gap:6px}.utilities button{padding:8px;font-size:12px;min-height:44px}.heading{margin:21px 5px 18px}.eyebrow{font-size:12px;letter-spacing:.6px}h1{font-size:38px;letter-spacing:-2px}.layout{display:block}.court{padding:10px;border-radius:15px}.hud>div{padding-left:8px}.hud small{font-size:12px;letter-spacing:0}.hud strong{font-size:19px;gap:4px}.howto{font-size:14px}.day-line{padding:10px 0 8px}.rule-impact{margin-bottom:10px}.lot{--gap:3px;--pad:6px;border-radius:14px}.lot-tools{gap:6px}.lot-tools .secondary{padding:10px 11px}aside{margin-top:18px}.help-body{padding:16px}.help-actions{padding:12px 16px}.help-body h2{font-size:22px}button{min-height:44px}.car{min-height:0;margin:1px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.car.struck{outline:3px solid #ff6b6b;outline-offset:-3px}.car.bump{outline:3px solid #ffd2d2;outline-offset:-3px}}
/* The boot card is independent of the unavailable runtime and always keeps its recovery links. */
.game-boot{margin:16px 0}.game-boot-actions a{min-height:44px}