/* 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 - sound button, stats, storage unit (--cols x --rows cells of --c), tray */
: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;
  /* cell size from the screen size alone, so it is right from the first paint and the same on every load: as wide as fits
     (the unit at most 640px), and short enough that the whole game fits the screen height with the browser bars shown (svh).
     230px is everything that does not scale (paddings, logo row, stats, gaps); each px of cell adds rows + 1 px to the unit
     with its padding and 3px to the tray (5 cells at 60%). --t is the tray cell. Must match W and H in game.js */
  --cols:9;--rows:9;
  --c:max(24px,min((100vw - 38px) / var(--cols),634px / var(--cols),(100svh - 230px) / (var(--rows) + 4)));
  --t:min(40px,var(--c) * .6);
}
[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;touch-action:manipulation}
.top{width:calc(var(--c) * var(--cols));display:flex;justify-content:space-between;align-items:center;gap:12px}
.logo{display:block;height:56px;width:auto}
.stats{width:calc(var(--c) * var(--cols));display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:8px}
.stats div{padding-inline:20px;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}
/* the unit slides off-screen between levels and confetti flies out: clip sideways so the page never gets wider than the screen */
.wrap{align-self:stretch;display:grid;justify-content:center;overflow-x:clip;padding:calc(var(--c) * .6) 0 calc(var(--c) * .4)}
.van{position:relative;width:calc(var(--c) * var(--cols));height:calc(var(--c) * var(--rows));border-radius:2px;
  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}
.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:max(8px,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}
.ring{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--well);box-shadow:inset 0 0 0 1px var(--line)}
.ring svg{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);rotate:-90deg}
.ring circle{fill:none;stroke-width:8;stroke:var(--line)}
#arc{stroke:hsl(215 95% 65%);stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .1s linear}
#arc.low{stroke:var(--bad)}
.ring b{font-size:1.05rem}
/* room for the tallest item (5 cells) and the label hanging under it, so the page height never changes with the item dealt */
.tray{width:min(100%,640px);display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:flex-end;min-height:calc(var(--t) * 5);padding-bottom:10px}
.piece{touch-action:none;cursor:grab}
.piece.dim{opacity:.3;cursor:default}
.piece.lifted{opacity:.15}
.btn{font:inherit;font-size:1.3rem;font-weight:700;color:var(--fg);border:0;border-radius:16px;padding:18px 28px;width:min(100%,320px);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.alt{background:linear-gradient(150deg,hsl(145 65% 55%),hsl(145 70% 33%));box-shadow:inset 0 0 0 1.5px hsl(145 80% 80% / .6),0 0 16px hsl(145 80% 50% / .4)}
.btn:focus-visible,.ico:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.ico{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);white-space:pre-line}
.cheer{margin:0;font-weight:700;color:#5be38a}
.done-msg{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;white-space:nowrap;
  font-weight:700;font-size:calc(var(--c) * .72);color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 calc(var(--c) * .5) rgba(91,227,138,.8);animation:done 1.6s ease-out forwards}
@keyframes done{0%{opacity:0}15%{opacity:1}80%{opacity:1}100%{opacity:0}}
.done-msg span{padding:calc(var(--c) * .3) calc(var(--c) * .6);border:calc(var(--c) * .14) solid #5be38a;border-radius:calc(var(--c) * .25);
  background:rgba(10,14,40,.92);box-shadow:0 0 calc(var(--c) * .6) rgba(91,227,138,.55),0 10px 30px rgba(0,0,0,.5)}
.blk.warn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 calc(var(--s) * .08) var(--bad);background:color-mix(in srgb,var(--bad) 25%,transparent)}
.blk.warn.pulse::before{animation:warn .45s ease-in-out 5 alternate}
@keyframes warn{from{opacity:.15}to{opacity:1}}
.ring.low{animation:ring 1s ease-out infinite}
.ring.low b{color:var(--bad)}
@keyframes ring{from{box-shadow:inset 0 0 0 1px var(--line),0 0 0 0 color-mix(in srgb,var(--bad) 70%,transparent)}to{box-shadow:inset 0 0 0 1px var(--line),0 0 0 12px transparent}}
.blk.art{justify-content:flex-end;padding:0;background:none;box-shadow:none;overflow:visible}
.blk.art::after{display:none}
.blk .pic{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.blk .tags{position:relative;z-index:1;display:flex;gap:.3em;align-items:center;padding:.15em .5em;border-radius:.6em;background:rgba(10,14,40,.72);transform:translateY(45%)}
.blk.narrow .tags{flex-direction:column;gap:.1em}
.blk .tags small,.blk .tags i{white-space:nowrap}
/* praise sits centred just above the storage unit; points show on the item */
.praise{position:absolute;left:50%;top:0;z-index:6;transform:translate(-50%,-100%);pointer-events:none;white-space:nowrap;font-weight:700;font-size:calc(var(--c) * .55);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 calc(var(--c) * .4) rgba(91,227,138,.8);animation:praise 1s ease-out forwards}
/* hints for a weak drop: amber, not green */
.praise.hint{color:#ffc46b;text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 calc(var(--c) * .4) rgba(255,170,60,.7)}
.praise.gold{color:#ffd166;text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 calc(var(--c) * .5) rgba(255,209,102,.9)}
@keyframes praise{0%{opacity:0;translate:0 0}15%{opacity:1}100%{opacity:0;translate:0 calc(var(--c) * -.8)}}
.pts{position:absolute;z-index:7;transform:translate(-50%,-50%);pointer-events:none;font-weight:700;font-size:1.1rem;color:#5be38a;text-shadow:0 1px 2px rgba(0,0,0,.8);animation:pts 1s ease-out forwards}
@keyframes pts{0%{opacity:0}15%{opacity:1}70%{opacity:1}100%{opacity:0}}
.done-msg small{display:block;margin-top:.15em;font-size:.6em;text-align:center}
/* a new item swooshes into the tray; stars burst on a Perfect fit; the body background colour changes per level */
.piece.arrive{animation:arrive .4s cubic-bezier(.2,.8,.3,1.3)}
@keyframes arrive{from{opacity:0;transform:translateX(-48px) scale(.85)}}
.spark{position:absolute;z-index:8;transform:translate(-50%,-50%);pointer-events:none;color:#ffe08a;font-size:calc(var(--c) * .8);line-height:1;text-shadow:0 0 6px #fff,0 0 14px rgba(255,200,80,.9);animation:spark .8s ease-out forwards}
@keyframes spark{60%{opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.done-msg,.blk.warn.pulse::before,.ring.low{animation:none}.praise{animation:done 1s ease-out forwards}}