/* Pin Jam Puzzle styles. Layout: one phone-shaped column. Sorting boxes on top, holding bar, the layered board fills the rest, two actions at the bottom. */
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --bg1:#f9d7e8; --bg2:#d6e4ff;
  --bg1-alt1:#d9f1ff; --bg2-alt1:#d4f6e3;
  --bg1-alt2:#ffe3c9; --bg2-alt2:#fff5bd;
  --panel:rgba(255,255,255,.66); --panel-edge:rgba(255,255,255,.95);
  --ink:#4a3d6e; --ink-soft:#8c80ad;
  --accent:#ff7ab6; --accent-deep:#d94d8c; --accent-ink:#fff;
  --hole:#3b3352; --hole-edge:#262038;
  --slot:rgba(255,255,255,.78); --slot-edge:rgba(74,61,110,.18);
  --card:#fff; --shadow:0 10px 30px rgba(74,61,110,.22);
  --good:#56c271; --warn:#ff9f43;
  --font-display:'Fredoka','Nunito',system-ui,-apple-system,sans-serif;
  --font-body:'Nunito',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg1:#3a2a5c; --bg2:#1d2b4d;
    --bg1-alt1:#1f3a52; --bg2-alt1:#1f4a3c;
    --bg1-alt2:#4a3326; --bg2-alt2:#4a4322;
    --panel:rgba(255,255,255,.12); --panel-edge:rgba(255,255,255,.22);
    --ink:#f3edfb; --ink-soft:#c2b7dd;
    --hole:#1b1727; --hole-edge:#0e0c16;
    --slot:rgba(255,255,255,.14); --slot-edge:rgba(255,255,255,.22);
    --card:#2a2342; --shadow:0 10px 30px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg1:#3a2a5c; --bg2:#1d2b4d;
  --bg1-alt1:#1f3a52; --bg2-alt1:#1f4a3c;
  --bg1-alt2:#4a3326; --bg2-alt2:#4a4322;
  --panel:rgba(255,255,255,.12); --panel-edge:rgba(255,255,255,.22);
  --ink:#f3edfb; --ink-soft:#c2b7dd;
  --hole:#1b1727; --hole-edge:#0e0c16;
  --slot:rgba(255,255,255,.14); --slot-edge:rgba(255,255,255,.22);
  --card:#2a2342; --shadow:0 10px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}
/* App shell. Sized to the viewport with height:100%, not 100vh: in an iOS home-screen app the
   page starts below the opaque status bar, and 100vh wrongly includes the bar's height
   (WebKit 316008), which would push the bottom buttons off screen. The gradient lives on
   <body> so it propagates to the canvas and fills any strip the body doesn't cover; the
   solid colour in front of it is what iOS samples for the status bar. Only <body> gets a
   background: a different <html> colour leaves a hairline at the bottom edge. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--bg1) linear-gradient(170deg,var(--bg1),var(--bg2));
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
html[data-bg="1"] body{background:var(--bg1-alt1) linear-gradient(170deg,var(--bg1-alt1),var(--bg2-alt1))}
html[data-bg="2"] body{background:var(--bg1-alt2) linear-gradient(170deg,var(--bg1-alt2),var(--bg2-alt2))}
/* Safe areas as base + inset, never the inset alone: the top inset is 0 in the browser and in
   an installed app (the status bar sits above the page); the bottom inset clears the home indicator. */
:root{
  --inset-top:calc(10px + env(safe-area-inset-top,0px));
  --inset-bottom:max(12px,env(safe-area-inset-bottom,0px));
}
/* Installed on iOS 26 (data-standalone is set by the head script): the system blurs a 20-30pt band
   under the status bar that CSS can't turn off, so resting content starts 28px lower to stay sharp. */
html[data-standalone]{--inset-top:calc(38px + env(safe-area-inset-top,0px))}
*{box-sizing:border-box}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:focus-visible,.screw:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:14px}

#app{
  height:100%; max-width:460px; margin:0 auto;
  display:flex; flex-direction:column; gap:10px;
  padding-block:var(--inset-top) var(--inset-bottom);
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.round{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:var(--panel);border:2px solid var(--panel-edge);box-shadow:0 4px 12px rgba(74,61,110,.12);
}
.round svg{width:22px;height:22px}
.lvl{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.3px;text-shadow:0 2px 0 rgba(255,255,255,.4)}
:root[data-theme="dark"] .lvl{text-shadow:none}
.stars{display:flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:16px;padding:0 12px;min-width:42px}
.stars svg{width:24px;height:24px}

/* Sorting boxes */
.trays{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tray{
  position:relative;border-radius:14px;padding:8px 6px;aspect-ratio:1.55;
  display:flex;align-items:center;justify-content:center;gap:4px;
  border:3px solid rgba(0,0,0,.18);box-shadow:inset 0 -5px 0 rgba(0,0,0,.14),0 5px 10px rgba(0,0,0,.12);
  transform-origin:center;
}
.tray.empty{background:var(--panel);border-color:var(--panel-edge);box-shadow:none;opacity:.5}
.hole{
  width:19px;height:19px;border-radius:50%;background:var(--hole);
  box-shadow:inset 0 2px 3px var(--hole-edge),0 1px 0 rgba(255,255,255,.35);
  position:relative;flex:none;
}
/* The screw is wider than the hole, so it is centred with absolute positioning: a grid cell sizes its track to the
   overflowing icon and pushes it off-centre. */
.hole .sicon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.tray.arrive{animation:arrive .42s cubic-bezier(.3,1.5,.5,1)}
.tray.complete{animation:complete .42s ease-in forwards}
@keyframes arrive{from{transform:translateY(-26px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes complete{40%{transform:scale(1.14);filter:brightness(1.25)}100%{transform:scale(.3) translateY(-30px);opacity:0}}

/* Queue dots */
.queue{display:flex;justify-content:center;align-items:center;gap:6px;min-height:12px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink-soft);opacity:.55}
.queue .more{font-size:11px;font-weight:800;color:var(--ink-soft);margin-left:2px}

/* Holding bar */
.buffer{
  display:flex;justify-content:center;gap:7px;padding:8px;border-radius:18px;
  background:var(--panel);border:2px solid var(--panel-edge);
}
.slot{
  width:40px;height:40px;border-radius:12px;background:var(--slot);
  border:2px solid var(--slot-edge);box-shadow:inset 0 2px 4px rgba(0,0,0,.08);
  display:grid;place-items:center;
}
.slot.extra{border-style:dashed}
.slot .sicon{width:26px;height:26px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.buffer.danger .slot:not(.filled){animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:inset 0 2px 4px rgba(0,0,0,.08),0 0 0 3px rgba(255,90,90,.45)}}

/* Board */
#board{flex:1;min-height:0;width:100%;display:block;touch-action:manipulation;overflow:visible}
.shole{pointer-events:none}
.plate{transform-box:fill-box;transform-origin:center}
.plate.fall{animation:fall .6s cubic-bezier(.5,0,.8,.4) forwards;pointer-events:none}
@keyframes fall{to{transform:translateY(120px) rotate(28deg) scale(.9);opacity:0}}
.plate .pbody{transition:stroke .15s}
.plate.flash .pbody{stroke:#ff4d6d;stroke-width:5}
.screw{cursor:pointer}
.screw .sin{transform-box:fill-box;transform-origin:center}

/* Footer */
.actions{display:flex;gap:10px;justify-content:center}
.btn{
  font-family:var(--font-display);font-weight:600;font-size:16px;
  padding:11px 18px;border-radius:16px;background:var(--panel);border:2px solid var(--panel-edge);
  display:inline-flex;align-items:center;gap:8px;box-shadow:0 5px 0 rgba(74,61,110,.16);
  transition:transform .08s,box-shadow .08s;
}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(74,61,110,.16)}
.btn svg{width:20px;height:20px}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-deep);box-shadow:0 5px 0 var(--accent-deep)}
.btn.primary:active{box-shadow:0 2px 0 var(--accent-deep)}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.badge{font-size:12px;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:1px 7px}

/* Flying screws + overlay */
#fly{position:fixed;inset:0;pointer-events:none;z-index:20}
.flyer{position:absolute;left:0;top:0;will-change:transform}
.flyer svg{width:100%;height:100%;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:25}
.overlay{
  position:fixed;inset:0;z-index:30;display:grid;place-items:center;
  background:rgba(40,30,70,.45);backdrop-filter:blur(3px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
}
.overlay[hidden],#confetti[hidden]{display:none!important}
.card{
  width:min(100%,340px);background:var(--card);border-radius:26px;padding:28px 22px 22px;text-align:center;
  box-shadow:var(--shadow);animation:arrive .4s cubic-bezier(.3,1.4,.5,1);
}
.card h2{font-family:var(--font-display);font-weight:700;font-size:30px;margin:0 0 6px;text-wrap:balance}
.card p{margin:0 0 18px;color:var(--ink-soft);font-weight:700;line-height:1.4}
.card .actions{flex-direction:column;align-items:stretch}
.card .btn{justify-content:center}
.bigstars{display:flex;justify-content:center;gap:6px;margin-bottom:10px}
.bigstars svg{width:44px;height:44px}
.bigstars svg:nth-child(2){width:54px;height:54px;margin-top:-8px}
/* Home screen */
#home{
  height:100%;max-width:460px;margin:0 auto;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:18px;
  padding-block:var(--inset-top) max(24px,var(--inset-bottom));
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
.home-top{display:flex;justify-content:flex-end}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:4px}
.logo{width:150px;height:150px;filter:drop-shadow(0 8px 14px rgba(74,61,110,.22))}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1;margin:6px 0 0;letter-spacing:.5px;text-shadow:0 3px 0 rgba(255,255,255,.45);text-wrap:balance}
:root[data-theme="dark"] .hero h1{text-shadow:none}
.hero p{margin:0;color:var(--ink-soft);font-weight:700;font-size:15px}
.play{
  font-size:22px;padding:16px 36px;border-radius:22px;margin-top:10px;gap:10px;
  box-shadow:0 7px 0 var(--accent-deep),0 14px 24px rgba(217,77,140,.3);
}
.play:active{transform:translateY(4px);box-shadow:0 3px 0 var(--accent-deep)}
.play svg{width:24px;height:24px}
.section{display:flex;flex-direction:column;gap:12px}
.section-head{display:flex;align-items:baseline;justify-content:space-between}
.section-head h2{font-family:var(--font-display);font-weight:700;font-size:22px;margin:0}
.section-head span{font-weight:800;font-size:13px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.map-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:4px 2px 6px}
.home-note{text-align:center;color:var(--ink-soft);font-size:12px;font-weight:700;margin:0}
.tile{
  position:relative;aspect-ratio:1;border-radius:14px;font-family:var(--font-display);font-weight:700;font-size:18px;
  display:grid;place-items:center;border:2px solid var(--slot-edge);background:var(--slot);color:var(--ink);
  font-variant-numeric:tabular-nums;transition:transform .08s;
}
.tile.done{background:var(--accent);border-color:var(--accent-deep);color:var(--accent-ink);box-shadow:0 4px 0 var(--accent-deep)}
.tile.done svg{position:absolute;top:-7px;right:-6px;width:20px;height:20px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.tile.next{background:var(--card);border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,182,.35);animation:nextpulse 1.4s ease-in-out infinite}
.tile.current{outline:3px solid var(--ink);outline-offset:-3px}
.tile.locked{opacity:.4;cursor:default}
.tile.locked svg{width:16px;height:16px}
.tile:not(.locked):active{transform:translateY(2px)}
@keyframes nextpulse{50%{box-shadow:0 0 0 7px rgba(255,122,182,.15)}}
@media (prefers-reduced-motion: reduce){.tile.next{animation:none}}
.linkish{font-size:13px;font-weight:700;color:var(--ink-soft);margin-top:14px;text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .tray.arrive,.tray.complete,.plate.fall,.card,.buffer.danger .slot{animation-duration:.01s}
}
@media (max-height:640px){
  .slot{width:34px;height:34px}.hole{width:16px;height:16px}.hole .sicon{width:19px;height:19px}
  .tray{padding:6px 4px}.lvl{font-size:19px}
}