:root {
  color-scheme:light dark;
  --page:light-dark(#f8f9fa,#191b1e);
  --surface:light-dark(#ffffff,#25282d);
  --ink:light-dark(#22262d,#f1f3f5);
  --muted:light-dark(#686f78,#aeb5bd);
  --line:light-dark(#e0e3e7,#363b42);
  --tile:light-dark(#f0f2f4,#24282d);
  --a:#f39a76; --b:#7dbfff; --c:#8bd69b; --d:#eed16f;
  --bumper:#aeb8c2;
  --action:light-dark(#286860,#9cd0c5);
  --action-ink:light-dark(#ffffff,#142824);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  letter-spacing:0;
  -webkit-text-size-adjust:100%;
}
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:var(--page); color:var(--ink); }
body { overscroll-behavior:none; }
button,select,textarea,input { font:inherit; color:inherit; }
button,select { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { opacity:.32; cursor:default; }
button:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--action); outline-offset:3px; }
[hidden] { display:none!important; }
#game { width:100%; height:100dvh; height:var(--visible-height,100dvh); display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top) + 14px) max(10px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 12px) max(10px,env(safe-area-inset-left)); }
.header { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:0 6px 12px; flex:none; }
.game-brand { display:flex; align-items:center; gap:2px; min-width:0; }
h1 { font-size:23px; line-height:1.15; margin:0; font-weight:700; }
.eyebrow { display:block; margin-top:5px; font-size:10px; font-weight:600; color:var(--muted); }
.tools { display:flex; gap:4px; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; flex:none; border:1px solid transparent; border-radius:8px; background:transparent; position:relative; }
.icon-button svg { width:20px; height:20px; stroke-width:1.8px; }
.icon-button:active:not(:disabled) { background:var(--tile); transform:translateY(1px); }
@media (hover:hover) {
  .icon-button:hover:not(:disabled) { background:var(--tile); }
  [data-tip]:hover:after { content:attr(data-tip); position:absolute; top:calc(100% + 4px); right:0; padding:6px 8px; background:var(--ink); color:var(--page); font-size:12px; border-radius:4px; white-space:nowrap; z-index:10; pointer-events:none; }
}
.level-bar { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 10px; height:42px; border-top:1px solid var(--line); }
.pack-picker { display:flex; flex:none; margin:0 6px 8px; padding:3px; border:1px solid var(--line); border-radius:6px; gap:4px; }
.pack-picker button { flex:1; min-width:0; height:44px; border:0; border-radius:4px; background:transparent; color:var(--muted); font-size:14px; }
.pack-picker button[aria-pressed="true"] { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 3px #0001; }
select { border:1px solid var(--line); border-radius:6px; padding:8px 30px 8px 10px; min-height:44px; background:var(--surface); max-width:100%; }
.level-picker { min-width:0; flex:1; }
.level-picker select { width:100%; border:0; background:transparent; padding-left:0; font-size:14px; text-overflow:ellipsis; }
.counter,.remaining { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.playfield { flex:1; min-height:0; display:flex; justify-content:center; align-items:center; }
.board { display:block; width:100%; aspect-ratio:1; flex:none; touch-action:none; user-select:none; -webkit-user-select:none; }
.board [data-piece] { cursor:grab; }
.board .cell { fill:var(--tile); stroke:var(--line); stroke-width:1; }
.board .wall { fill:color-mix(in srgb,var(--ink) 20%,var(--page)); }
.board .chip-face { fill:var(--chip); }
.board .chip-depth { fill:color-mix(in srgb,var(--chip) 62%,#253136); }
.board .chip-edge { stroke:#ffffff88; stroke-width:1.5; fill:none; }
.board .select-mark { fill:none; stroke:var(--ink); stroke-width:1.5; }
.board .gate { fill:var(--chip); }
.locked-gate { opacity:.4; }
.gate-lock { stroke:var(--ink); stroke-width:3; }
.terrain-stop { fill:none; stroke:light-dark(#9b761b,#eed16f); stroke-width:2; }
.terrain-stop rect:last-child { fill:light-dark(#9b761b,#eed16f); stroke:none; }
.terrain-flip { fill:none; stroke:var(--action); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.daily-date { margin:0 10px 8px; color:var(--muted); font-size:11px; }
.rule-row { display:flex; flex:none; justify-content:center; align-items:center; gap:20px; }
.mechanics-row { display:flex; justify-content:center; gap:18px; min-height:28px; flex:none; font-size:12px; color:var(--muted); }
.mechanics-row span { display:flex; align-items:center; gap:4px; }
.mechanics-row svg { width:24px; height:24px; }
.delivery-order { display:flex; align-items:center; justify-content:center; gap:10px; min-height:36px; flex:none; }
.delivery-order>svg,.delivery-step>svg.lucide { width:15px; height:15px; }
.delivery-step { display:flex; align-items:center; gap:4px; opacity:.4; }
.delivery-step b { font-size:11px; font-weight:600; }
.delivery-step svg { width:32px; height:32px; }
.delivery-step.next-delivery,.delivery-step.delivered { opacity:1; }
.delivery-step.next-delivery { border-bottom:2px solid var(--action); }
.hint-mark { fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.hint-mark rect { stroke-width:2; stroke-dasharray:5 5; }
.controls { flex:none; min-height:144px; padding:0 6px; max-width:480px; width:100%; margin-inline:auto; }
.status { font-size:14px; text-align:center; margin:0 0 12px; min-height:20px; line-height:20px; }
.selection-row { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px; }
.selection-row select { min-width:178px; }
.move-row { display:flex; align-items:center; justify-content:center; gap:16px; }
.arrows { display:flex; gap:8px; }
.direction { background:var(--surface); border-color:var(--line); width:48px; height:48px; }
.direction.suggested { border:2px solid var(--action); background:color-mix(in srgb,var(--action) 12%,var(--surface)); }
.primary-button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:50px; width:100%; padding:12px 16px; border:0; border-radius:8px; background:var(--action); color:var(--action-ink); font-weight:600; }
.primary-button svg { width:19px; height:19px; }
.finished { padding:12px 4px 0; }
.best { text-align:center; margin:0 0 14px; color:var(--muted); font-size:13px; }
dialog { position:fixed; top:var(--dialog-top,18px); bottom:auto; margin:0 auto; width:calc(100% - 24px); max-width:420px; max-height:var(--dialog-max-height,calc(100dvh - 36px)); border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); padding:16px; overflow:auto; overscroll-behavior:contain; }
dialog::backdrop { background:#0008; }
h2 { margin:0; font-size:19px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#home { height:100dvh; height:var(--visible-height,100dvh); overflow-y:auto; padding:calc(env(safe-area-inset-top) + 32px) max(22px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 20px) max(22px,env(safe-area-inset-left)); display:flex; flex-direction:column; max-width:520px; margin:0 auto; }
.home-header { padding-bottom:32px; }
.home-header .eyebrow { display:block; margin:0 0 10px; font-size:13px; font-weight:400; }
.home-header h1 { font-size:32px; }
.daily-game { border-top:1px solid var(--line); }
.game-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:24px 0 16px; }
.game-heading h2 { font-size:24px; }
.game-heading p { margin:6px 0 0; color:var(--muted); font-size:13px; }
.daily-count { font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; }
.daily-options button { display:flex; width:100%; align-items:center; gap:10px; padding:12px 0; min-height:96px; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; }
.daily-options button:active:not(:disabled) { background:var(--tile); }
[data-daily-icon] { width:18px; flex:none; }
[data-daily-icon] svg { display:block; width:18px; height:18px; }
.daily-options .complete [data-daily-icon] { color:var(--action); }
.practice-link { display:flex; align-items:center; gap:10px; width:100%; min-height:58px; padding:12px 2px; background:transparent; border:0; font-size:14px; text-align:left; }
.practice-link span { flex:1; }
.practice-link svg { width:18px; height:18px; color:var(--muted); }
.home-footer { margin-top:auto; padding-top:24px; color:var(--muted); font-size:11px; line-height:1.5; }
.home-footer p { margin:5px 0; }
@media (max-height:650px) { #game { padding-top:calc(env(safe-area-inset-top) + 8px); padding-bottom:calc(env(safe-area-inset-bottom) + 8px); } .header { padding-bottom:4px; } .eyebrow { display:none; } .controls { min-height:128px; } .status { margin-bottom:4px; } }
@media (max-height:650px) { .daily-date { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } }