/* Rubik, shipped with the game so it works offline */
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/rubik-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/rubik-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/rubik-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/rubik-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Layout: one column - header + stats, van cargo hold (10x6), tray of today's items */
:root{
  --bg:#081230;--bg2:#14286b;--well:rgba(12,24,70,.7);--line:rgba(140,170,255,.10);--frame:#3d55a8;
  --fg:#e8eeff;--dim:#8d9ed6;--bad:#ff6b8a;--font:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:radial-gradient(120% 80% at 50% 0%,var(--bg2),var(--bg) 70%) fixed,var(--bg);color:var(--fg);font-family:var(--font);
  display:flex;flex-direction:column;align-items:center;gap:16px;padding-block:20px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  box-sizing:border-box;user-select:none;-webkit-user-select:none;overflow-x:hidden}
.top{width:min(100%,640px);display:flex;justify-content:space-between;align-items:center;gap:12px}
h1{margin:0;font-size:1.3rem;letter-spacing:.03em}
h1 small{display:block;font-size:.72rem;font-weight:500;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.stats{width:min(100%,640px);display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.stats div{text-align:center;padding-block:8px;border-radius:12px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line)}
.stats small{display:block;font-size:.66rem;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.stats b{font-size:1.25rem;font-variant-numeric:tabular-nums}
.wrap{padding-bottom:calc(var(--c) * .7)}
.van{position:relative;width:calc(var(--c) * 10);height:calc(var(--c) * 6);border-radius:8px;
  background-color:var(--well);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:var(--c) var(--c);box-shadow:0 0 0 3px var(--frame),0 20px 60px rgba(0,0,0,.5);
  isolation:isolate;transform-origin:50% 100%;transition:rotate .7s cubic-bezier(.3,1.6,.5,1)}
.van::before,.van::after{content:"";position:absolute;z-index:-1;bottom:calc(var(--c) * -.6);width:var(--c);aspect-ratio:1;border-radius:50%;
  background:var(--bg);box-shadow:0 0 0 3px var(--frame),inset 0 0 0 calc(var(--c) * .3) var(--well)}
.van::before{left:12%}.van::after{right:12%}
.van.win{animation:win .9s ease-out 2}
@keyframes win{from{box-shadow:0 0 0 3px rgba(91,227,138,.6),0 0 0 0 rgba(91,227,138,.3),0 20px 60px rgba(0,0,0,.5)}
  to{box-shadow:0 0 0 3px var(--frame),0 0 0 calc(var(--c) * .25) rgba(91,227,138,0),0 20px 60px rgba(0,0,0,.5)}}
.bit{position:absolute;bottom:0;z-index:5;width:8px;height:12px;border-radius:2px;pointer-events:none}
.blk{--s:20px;position:relative;box-sizing:border-box;border-radius:calc(var(--s) * .16);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;text-align:center;line-height:1.1;
  font-size:calc(var(--s) * .3);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);
  background:linear-gradient(150deg,hsl(var(--h) 95% 78% / .92),hsl(var(--h) 90% 55% / .8) 45%,hsl(var(--h) 95% 34% / .92));
  box-shadow:inset 0 0 0 1.5px hsl(var(--h) 100% 85% / .7),inset 0 -3px 6px hsl(var(--h) 90% 18% / .7),0 0 12px hsl(var(--h) 100% 60% / .35)}
.blk::after{content:"";position:absolute;left:8%;right:8%;top:5%;height:30%;max-height:calc(var(--s) * .45);border-radius:calc(var(--s) * .1);
  background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,0));pointer-events:none}
.blk.tall{writing-mode:vertical-rl}
.blk b{font-weight:700}
.blk small{opacity:.85;font-size:.85em}
.blk i{font-style:normal;font-size:.85em;padding:0 .3em;border-radius:.4em;background:rgba(0,0,0,.3);font-variant-numeric:tabular-nums}
.blk i.hi{background:var(--bad)}
.blk.broken{filter:saturate(.35) brightness(.75)}
.crack{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.placed{position:absolute;margin:1px}
.preview{position:absolute;box-sizing:border-box;border-radius:6px;pointer-events:none;
  border:2px dashed hsl(var(--h) 100% 78%);background:hsl(var(--h) 90% 60% / .15)}
.drag{position:fixed;left:0;top:0;z-index:5;pointer-events:none}
.clock{width:calc(var(--c) * 10);height:6px;border-radius:3px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.clock i{display:block;width:100%;height:100%;background:hsl(215 95% 65%)}
.clock i.low{background:var(--bad)}
.tray{width:min(100%,640px);display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:flex-end;min-height:80px}
.piece{touch-action:none;cursor:grab}
.piece.dim{opacity:.3;cursor:default}
.piece.lifted{opacity:.15}
.back{width:min(100%,640px);color:var(--dim);font-size:.85rem;font-weight:500;text-decoration:none}
.back:hover{color:var(--fg)}
.hint{margin:0;color:var(--dim);font-size:.85rem;text-align:center}
.btn{font:inherit;font-weight:700;color:var(--fg);border:0;border-radius:12px;padding:10px 16px;cursor:pointer;
  background:linear-gradient(150deg,hsl(215 95% 70%),hsl(215 90% 45%));box-shadow:inset 0 0 0 1.5px hsl(215 100% 85% / .6),0 0 16px hsl(215 100% 60% / .45)}
.btn:focus-visible,.snd:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.snd{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:10px;background:none;color:var(--dim);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.over{position:fixed;inset:0;display:grid;place-items:center;background:rgba(4,8,28,.75);backdrop-filter:blur(6px);z-index:9;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.card{display:grid;gap:12px;justify-items:center;text-align:center;padding:24px;border-radius:18px;background:#0d1a48;box-shadow:inset 0 0 0 1px var(--frame);max-width:100%;box-sizing:border-box}
.card h2{margin:0;font-size:1.4rem}
.res{margin:0;color:var(--dim)}