/* Same structure as the other toys, its own colours. Copied rather than shared:
   a toy owns everything it needs, so none of them can break another. */

:root {
  --ink:   #f4ede2;
  --dim:   #c2b39c;
  --glass: rgba(14, 14, 22, 0.80);
  --line:  rgba(200, 150, 120, 0.22);
  --hot:   #c8433a;
  --warm:  #d9a441;
  --pad:   14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0b0908; color: var(--ink);
  font: 14px/1.45 ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.idle { cursor: none; }

#gl {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block;
  background: #000;
  touch-action: none;                 /* we handle every gesture ourselves */
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}

/* the phone shape: the canvas held at 9:20 in the middle of the screen, its
   pixels 1080×2400 whatever the screen — what you see is what the phone gets */
body.phone #gl {
  inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100vw, calc(100vh * 9 / 20)); height: min(100vh, calc(100vw * 20 / 9));
}

/* ── panel ─────────────────────────────────────────────────────────────────── */

#panel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 10;
  width: 330px; max-width: 94vw;
  /* No top padding: the sticky header below carries it instead. With the
     padding here, sticky cannot rise above the panel's content box and parks
     18px down, leaving a strip for the sliders to slide up into. */
  padding: 0 var(--pad) 28px;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-right: 1px solid var(--line);
  transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .32s;
}
/* top/bottom sizes the panel to the LAYOUT viewport, which on iOS is the height
   with the browser toolbars retracted — so the bottom of the panel, and the
   sticky action bar with it, sits under iOS Chrome's toolbar and cannot be
   reached. dvh tracks the viewport actually on screen. @supports so anything
   without dvh keeps the old behaviour rather than losing its height. */
@supports (height: 100dvh) {
  #panel { bottom: auto; height: 100dvh; }
}

body.bare #panel { transform: translateX(-104%); opacity: 0; pointer-events: none; }
body.bare #hud   { opacity: 0; }
#hud { display: none; }
body.hud #hud { display: block; }   /* D shows it: frames a second, moves in play */
#panel::-webkit-scrollbar { width: 8px; }
#panel::-webkit-scrollbar-thumb { background: rgba(200,120,255,.22); border-radius: 4px; }

/* ⚠️ Sticky, and load-bearing rather than decorative.
   On a phone this panel is a long scroll of controls, it covers the canvas
   completely, and the only buttons that dismiss it live in this header. When
   the header scrolled away with everything else, the only route back to the
   picture was to scroll all the way to the top again — through sliders that
   take a vertical drag and change themselves instead of scrolling. Reported
   from iOS Chrome as "I can't scroll up to the top", which is exactly what it
   was. Same trick as .actions at the other end. */
.head {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 calc(var(--pad) * -1) 16px;
  padding: 18px var(--pad) 12px;
  background: linear-gradient(to bottom, var(--glass) 72%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.head h1 {
  margin: 0; font-size: 21px; font-weight: 650; letter-spacing: .10em; text-transform: lowercase;
  background: linear-gradient(92deg, var(--hot), var(--warm));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.head-btns { display: flex; gap: 8px; }

p.touch-only, button.touch-only, span.touch-only { display: none; }
@media (hover: none), (pointer: coarse) {
  .pointer-only { display: none; }
  p.touch-only { display: block; } button.touch-only { display: block; } span.touch-only { display: inline; }
}

section { margin-bottom: 16px; }
section h2 {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.note, .keys, .blurb { margin: 7px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--dim); }
.keys { margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 11px; }

/* ── controls ──────────────────────────────────────────────────────────────── */

button {
  font: inherit; color: var(--ink); cursor: pointer;
  background: rgba(255,255,255,.07);
  border: 1px solid transparent; border-radius: 9px; padding: 9px 11px;
  transition: background .14s, border-color .14s, transform .07s;
}
button:hover  { background: rgba(255,255,255,.15); }
button:active { transform: translateY(1px); }
button.on { background: rgba(201,77,255,.18); border-color: rgba(201,77,255,.55); color: #fff; }
.perform, .done { padding: 8px 14px; font-size: 12.5px; font-weight: 600; }
.perform { background: linear-gradient(96deg, rgba(201,77,255,.22), rgba(95,240,216,.20)); border-color: rgba(200,120,255,.4); }
button.wide { display: block; width: 100%; text-align: left; }
button.big  { font-size: 15px; font-weight: 650; padding: 13px; }

.row { display: flex; gap: 8px; }
.row button { flex: 1; }

.actions {
  position: sticky; bottom: -28px; z-index: 2;
  display: flex; gap: 8px; margin: 6px -14px -28px; padding: 12px 14px 18px;
  background: linear-gradient(to top, var(--glass) 62%, transparent);
  backdrop-filter: blur(10px);
}
.actions .big { flex: 2; }

.presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.preset { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 10px; text-align: left; }
.preset .pn { font-size: 13px; }
.preset .pd { font-size: 10.5px; color: var(--dim); }
.preset.on .pd { color: rgba(255,255,255,.7); }

.row-slider { margin-bottom: 8px; }
.lab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
.lab .nm { font-size: 12.5px; }
.lab .val { font-size: 11.5px; color: var(--hot); font-variant-numeric: tabular-nums; }

input[type=range] {
  /* Vertical drags belong to the panel's scroller, horizontal ones to the
     slider. Without this a drag starting on a slider moves the slider instead
     of scrolling, and much of the panel's height is sliders. */
  touch-action: pan-y;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 24px; background: transparent; cursor: pointer; margin: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(201,77,255,.55), rgba(79,232,255,.45));
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 19px; height: 19px; margin-top: -7px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 1px 6px rgba(0,0,0,.55);
}
input[type=range]::-moz-range-track {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(201,77,255,.55), rgba(79,232,255,.45));
}
input[type=range]::-moz-range-thumb { width: 19px; height: 19px; border-radius: 50%; border: 0; background: #fff; }

.palettes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pal { height: 28px; padding: 0; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); }
.pal.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(201,77,255,.55); }

input.dim {
  font: inherit; color: var(--ink); width: 100%; min-width: 0;
  background: rgba(255,255,255,.07); border: 1px solid transparent; border-radius: 9px; padding: 8px 10px;
  font-variant-numeric: tabular-nums;
}
input.dim:focus { outline: none; border-color: rgba(201,77,255,.55); }
.row input.dim { flex: 1; }
.row .by { align-self: center; color: var(--dim); }

/* ── overlays ──────────────────────────────────────────────────────────────── */

#hud {
  position: fixed; right: 12px; bottom: 10px; z-index: 9;
  font: 11px/1.4 ui-monospace, Consolas, monospace;
  color: var(--dim); opacity: .5; pointer-events: none;
  text-shadow: 0 0 8px #000; transition: opacity .3s;
}
#toast {
  position: fixed; left: 50%; top: 26px; transform: translateX(-50%); z-index: 20;
  padding: 10px 18px; border-radius: 10px; pointer-events: none;
  background: var(--glass); backdrop-filter: blur(12px); border: 1px solid var(--line);
  font-size: 13px; opacity: 0; transition: opacity .3s;
}
#toast.on { opacity: 1; }
#err {
  position: fixed; inset: 0; z-index: 40; display: none; overflow: auto;
  margin: 0; padding: 28px; white-space: pre-wrap;
  background: rgba(6,3,12,.96); color: #dcb0ff;
  font: 12px/1.55 ui-monospace, Consolas, monospace;
}
/* the bar along the bottom: two rows, Drop and Draw. Always to hand */
#pots {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9;
  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 18px;
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line);
  transition: opacity .35s; max-width: calc(100vw - 16px);
}
#pots .row { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px; }
#pots .row::-webkit-scrollbar { display: none; }
#pots .lab { flex: none; width: 34px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); opacity: .7; }
#pots .row.on .lab { color: var(--ink); opacity: 1; }
#pots .pot {
  flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .22); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .25);
  transition: transform .15s, border-color .15s;
}
#pots .pot:hover { transform: scale(1.08); }
#pots .pot.on { border-color: #fff; transform: scale(1.18); }
#pots .pot.add { display: grid; place-items: center; color: #fff; font: 600 17px/1 system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
#pots .sep { flex: none; width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
#pots .icon {
  flex: none; width: 36px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 10px;
  color: var(--ink); background: transparent; border: 1px solid transparent; cursor: pointer;
}
#pots .icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#pots .icon:hover { background: rgba(255, 255, 255, .07); }
#pots .icon.on { background: rgba(201, 77, 255, .18); border-color: rgba(201, 77, 255, .55); }
#pots .icon.rec { color: #ff5a5a; position: relative; }
#pots .icon.rec::after { content: attr(data-left); position: absolute; right: -2px; top: -4px; font: 600 10px/1 system-ui, sans-serif; color: #fff; background: #d33; border-radius: 6px; padding: 2px 4px; }
#pots input[type=color] { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
body.idle #pots, body.bare #pots { opacity: 0; pointer-events: none; }
body.bare #start { opacity: 0 !important; }
#start { bottom: calc(var(--bar-h, 104px) + 26px + env(safe-area-inset-bottom)) !important; }
#pots .palette { flex: none; white-space: nowrap; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; }
/* until the first drop, what to do */
#start {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9;
  padding: 9px 16px; border-radius: 9px; background: var(--glass); border: 1px solid var(--line);
  color: var(--ink); font-size: 13.5px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .6s;
}
body.fresh #start { opacity: .9; }
body.fresh #hint { opacity: 0 !important; }
body.fresh.idle #pots { opacity: 1; pointer-events: auto; }   /* nothing to watch yet: the pots stay */

#hint {
  position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 9;
  padding: 9px 16px; border-radius: 9px;
  background: var(--glass); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--dim);
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
body.bare #hint { opacity: .8; }
body.bare.idle #hint { opacity: 0; }

@media (hover: none), (pointer: coarse) {
  button { padding: 11px 12px; }
  .pal { height: 36px; }
  input[type=range] { height: 34px; }
  input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10.5px; }
  input[type=range]::-moz-range-thumb { width: 26px; height: 26px; }
  #panel   { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .actions { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  #hint    { bottom: calc(80px + env(safe-area-inset-bottom)); font-size: 13.5px; }
  #pots .pot { width: 34px; height: 34px; }
  #pots .icon { width: 42px; height: 40px; }
  #pots .palette { padding: 8px 12px; }
  body.idle #pots { opacity: 1; pointer-events: auto; }   /* a finger never hovers: the pots stay */
  #start { bottom: calc(84px + env(safe-area-inset-bottom)); }
  #toast   { font-size: 15px; padding: 12px 22px; }
}
@media (max-width: 640px) { #panel { width: 100%; max-width: 100%; } }

/* on a touch screen the toy opens without its panel, which would cover the
   whole picture, and this says for a few seconds how to bring it up */
body.bare.intro #hint, body.bare.intro.idle #hint { opacity: .85; }

/* on a narrow screen the rows wrap rather than scroll, so every pot stays in view */
@media (max-width: 620px) {
  #pots { width: calc(100vw - 10px); padding: 6px 4px; gap: 4px; }
  #pots .row { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 5px; }
  #pots .lab, #pots .row > .sep { display: none; }   /* what is chosen is lit: the names can go */
  /* targets a thumb can hit: 42px, the row wrapping where it must */
  #pots .pot { width: 40px; height: 40px; }
  #pots .icon { width: 42px; height: 42px; }
  #pots .icon svg { width: 22px; height: 22px; }
}

/* ── the actions: in the row on a big screen, behind ⋯ on a phone ─────────── */
#pots .acts { display: contents; }
#pots .icon .t { display: none; }
#pots .morebtn { display: none; }
#pots a.icon { color: var(--ink); text-decoration: none; }
#pots .icon:focus-visible, #pots .pot:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }
@media (max-width: 620px) {
  #pots .morebtn { display: grid; }
  #pots .acts {
    display: none; position: absolute; right: 6px; bottom: calc(100% + 8px); z-index: 2;
    flex-direction: column; align-items: stretch; gap: 2px; min-width: 220px; padding: 6px;
    background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  }
  #pots .acts.open { display: flex; }
  #pots .acts .icon { width: auto; height: 46px; display: flex; justify-content: flex-start; gap: 12px; padding: 0 12px; }
  #pots .acts .icon .t { display: inline; font-size: 15px; }
  #pots .acts .sep { display: block; width: auto; height: 1px; margin: 4px 6px; }
}
/* when it cannot start: what happened, in words, and the way back */
#oops {
  display: none; position: fixed; inset: 0; z-index: 40; padding: 28px; place-content: center;
  background: rgba(8, 6, 12, .95); color: var(--ink); text-align: left;
}
#oops:has(#err:not(:empty)) { display: grid; }
#oops > div { max-width: 520px; }
#oops h2 { margin: 0 0 10px; font-size: 22px; }
#oops p { margin: 0 0 14px; line-height: 1.5; color: var(--dim); }
#oops #err {
  position: static; inset: auto; display: block !important; z-index: auto; margin: 0 0 18px; padding: 10px 12px;
  max-height: 30vh; overflow: auto; font-size: 12px; white-space: pre-wrap; background: rgba(255, 255, 255, .06); border-radius: 8px;
}
#oops a { color: var(--ink); font-weight: 600; }

svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#oops a { display: inline-flex; align-items: center; gap: 6px; }