/* ============================================================
   BENDING MACHINE — cel-shaded gray-box.
   Flat fills + dark line work, palette lifted from Sol's cel
   concept (docs/concept/01-cel-shaded-front.png). Every region
   here is a seam: Sol's layered art replaces backgrounds, the
   geometry and interactions stay.
   ============================================================ */
:root{
  --wall:#1b2140; --wall-lite:#232a52; --wall-edge:#2c3566;
  --navy:#2b3a67; --navy-deep:#1f2b4d; --line:#1a2035;
  --mint:#9fd4c5; --mint-deep:#7fb8a8; --mint-panel:#8bc7b6;
  --coral:#e8635a; --red:#d94f4f;
  --cream:#f4e9d0; --gold:#e0b95c;
  --glow:#4de3ff; --glow-soft:rgba(77,227,255,.35);
  --interior:#0d7d9e; --interior-deep:#0a5f7a;
  --kp:#f2c14e; --kp-edge:#c99a2e;
  --crt-bg:#0d1f16; --crt-fg:#4dff9d;
  --paper:#fdf8ec; --paper-ink:#3a3d36;
  --ol:2.5px;               /* the cel outline weight */
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{ background:var(--wall); overflow:hidden; }
button{ font:inherit; border:none; background:none; cursor:pointer; color:inherit; }

/* ============================================================
   SOL'S PRODUCTION LAYERS — full-canvas registered PNGs, stacked
   by z over the live DOM. Desktop/tablet only; mobile keeps the
   procedural chrome (its stacked layout has different geometry).
   ============================================================ */
.al{ display:none; position:absolute; left:0; top:0; width:860px; height:1060px;
  background-size:860px 1060px; background-repeat:no-repeat; pointer-events:none; }
.al.z1{ z-index:1; } .al.z3{ z-index:3; } .al.z6{ z-index:6; }
#al-wall{ background-image:url("../assets/art/production/machine/wall-alcove.png"); }
#al-body{ background-image:url("../assets/art/production/machine/machine-body.png"); }
#al-interior{ background-image:url("../assets/art/production/machine/glass-interior.png"); }
#al-caps-bot{ background-image:url("../assets/art/production/machine/gacha-capsule-bottom.png"); }
#al-caps-top{ background-image:url("../assets/art/production/machine/gacha-capsule-top.png"); }
#al-glassfront{ background-image:url("../assets/art/production/machine/glass-front.png"); }
#al-notch{ background-image:url("../assets/art/production/machine/notch-panel.png"); }
#al-crt{ background-image:url("../assets/art/production/machine/crt-bezel.png"); }
#al-keybase{ background-image:url("../assets/art/production/machine/keypad-base.png"); }
#al-keyup{ background-image:url("../assets/art/production/machine/key-up.png"); }
#al-keydown{ background-image:url("../assets/art/production/machine/key-down.png"); }
#al-payment{ background-image:url("../assets/art/production/machine/payment-cluster.png"); }
#al-ret-up{ background-image:url("../assets/art/production/machine/coin-return-up.png"); }
#al-ret-down{ background-image:url("../assets/art/production/machine/coin-return-down.png"); }
#al-led-green{ background-image:url("../assets/art/production/machine/card-led-green.png"); }
#al-led-red{ background-image:url("../assets/art/production/machine/card-led-red.png"); }
#al-beam{ background-image:url("../assets/art/production/machine/scanner-beam.png"); }
#al-printer{ background-image:url("../assets/art/production/machine/printer.png"); }
#al-takeout{ background-image:url("../assets/art/production/machine/takeout.png"); }
#al-flap{ background-image:url("../assets/art/production/machine/flap.png");
  transform-origin:296px 872px; transition:transform .3s cubic-bezier(.6,0,.7,1.4); }
#al-radio{ background-image:url("../assets/art/production/machine/radio.png"); }
#al-rled-off{ background-image:url("../assets/art/production/machine/radio-led-off.png"); }
#al-rled-on{ background-image:url("../assets/art/production/machine/radio-led-on.png"); }
#al-sticky{ background-image:url("../assets/art/production/machine/sticky-note.png"); }
#al-glow{ background-image:url("../assets/art/production/fx/screen-glow.png");
  mix-blend-mode:screen; opacity:.5; }
/* generic one-instance sprites: replicated per element instead of stacked */
#al-keyup,#al-keydown,#al-caps-bot,#al-caps-top{ display:none !important; }

/* dynamic art states (desktop) */
#al-keydown,#al-ret-down,#al-led-red,#al-rled-on{ display:none !important; }
@media (min-width:561px){
  body.art #alcove:has(#flap.open) #al-flap{ transform:perspective(700px) rotateX(-58deg); }
  body.art #alcove:has(#cardreader.declined) #al-led-red{ display:block !important; }
  body.art #alcove:has(#cardreader.declined) #al-led-green{ display:none; }
  body.art #alcove:has(#coinreturn:active) #al-ret-down{ display:block !important; }
  body.art #alcove:has(#coinreturn:active) #al-ret-up{ display:none; }
  body.art #alcove:has(#scanner.scanning) #al-beam{ animation:beampulse .5s steps(2) 3; }
  body.art #alcove:has(#radio.on) #al-rled-on{ display:block !important; }
  body.art #alcove:has(#radio.on) #al-rled-off{ display:none; }
}
@keyframes beampulse{ 50%{ opacity:.25; } }

/* ---------- stage: author at 860x1060, scale to fit ---------- */
#stage{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
#alcove{
  position:relative; width:860px; height:1060px; flex:none;
  transform-origin:center center;
  background:
    radial-gradient(120% 92% at 50% 32%, transparent 52%, rgba(0,0,0,.3)),
    radial-gradient(48% 40% at 50% 46%, rgba(77,227,255,.07), transparent 70%),
    linear-gradient(90deg, var(--wall-edge) 0 26px, transparent 26px calc(100% - 26px), var(--wall-edge) calc(100% - 26px)),
    linear-gradient(180deg, var(--wall-lite), var(--wall) 70%);
}
#alcove::after{ /* floor shadow */
  content:""; position:absolute; left:12%; right:12%; bottom:26px; height:22px;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.5), transparent 70%);
}

/* ---------- radio ---------- */
#radio{ position:absolute; top:6px; left:50%; transform:translateX(-46%); z-index:5; }
.r-antenna{ position:absolute; left:34px; top:-26px; width:3px; height:30px; background:#555c74;
  border:2px solid var(--line); border-bottom:none; transform:rotate(-14deg); }
.r-body{ position:relative; display:flex; align-items:center; gap:10px;
  background:#3a4157; border:var(--ol) solid var(--line); border-radius:8px;
  padding:8px 12px; box-shadow:0 4px 0 rgba(0,0,0,.35); }
.r-grille{ display:flex; gap:3px; }
.r-grille i{ width:4px; height:34px; background:#262c40; border-radius:2px; }
.r-face{ display:flex; flex-direction:column; gap:3px; }
.r-label{ font-size:8px; letter-spacing:.14em; color:#aab3cc; font-weight:700; }
.r-display{ font-family:"Consolas",monospace; font-size:12px; color:#5ee0c8;
  background:#101528; border:2px solid var(--line); border-radius:3px; padding:2px 8px; min-width:150px; }
#radio.on .r-display{ color:#7dfadf; text-shadow:0 0 6px rgba(94,224,200,.7); }
.r-knob{ width:26px; height:26px; border-radius:50%; background:#20263c; border:var(--ol) solid var(--line);
  position:relative; cursor:pointer; }
.r-knob::after{ content:""; position:absolute; left:50%; top:2px; width:3px; height:9px;
  background:#5ee0c8; transform:translateX(-50%); border-radius:2px; transition:transform .2s; }
.r-power{ width:14px; height:14px; border-radius:50%; background:#68324a; border:2px solid var(--line); }
#radio.on .r-power{ background:#ff6a6a; box-shadow:0 0 8px rgba(255,106,106,.8); }

/* ---------- machine shell ---------- */
#machine{
  /* centered via margin, not transform — shake() owns the transform channel */
  position:absolute; left:50%; top:78px; margin-left:-350px;
  width:700px; height:950px;
  background:var(--mint); border:calc(var(--ol) + 1px) solid var(--line); border-radius:16px;
  box-shadow:
    inset 0 0 0 6px var(--navy),
    inset 0 0 0 9px var(--gold),
    inset -20px 0 26px rgba(0,0,0,.1),
    inset 20px 0 26px rgba(255,255,255,.09),
    inset 0 22px 20px -12px rgba(255,255,255,.14),
    12px 14px 0 rgba(0,0,0,.35),
    26px 34px 60px rgba(0,0,0,.4);
  display:flex; flex-direction:column;
}
.m-feet{ position:absolute; left:0; right:0; bottom:-14px; display:flex; justify-content:space-between; padding:0 60px; }
.m-feet i{ width:70px; height:14px; background:var(--navy-deep); border:var(--ol) solid var(--line);
  border-radius:0 0 6px 6px; }

/* marquee */
#marquee{ position:relative; flex:none; height:64px; margin:16px 18px 6px;
  display:flex; align-items:center; justify-content:center; }
.mq-plate{ background:linear-gradient(180deg, #ef7168, var(--coral) 55%, #d5544c);
  border:var(--ol) solid var(--line); border-radius:10px;
  padding:6px 34px; text-align:center;
  box-shadow:0 3px 0 rgba(0,0,0,.25), inset 0 0 0 3px rgba(255,255,255,.25),
    0 0 22px rgba(232,99,90,.4); }
.mq-en{ display:block; color:var(--cream); font-weight:900; font-size:26px; letter-spacing:.14em;
  text-shadow:0 0 12px rgba(255,244,214,.5), 0 2px 0 rgba(0,0,0,.22); }
.mq-jp{ display:block; color:var(--cream); font-size:11px; letter-spacing:.4em; opacity:.9; }
.mq-star{ position:absolute; top:50%; transform:translateY(-50%); color:var(--gold); font-size:18px;
  text-shadow:0 0 10px rgba(224,185,92,.85); animation:twinkle 2.6s steps(2) infinite; }
.mq-star.l{ left:26px; } .mq-star.r{ right:26px; animation-delay:1.3s; }
@keyframes twinkle{ 50%{ opacity:.45; } }

/* deck: glass left, notch right. Grid, not flex — #deck and #bottomrow
   share the same column template so takeout aligns exactly under the
   glass (flex floors each item's share at its padding+border and skews
   the split). The notch hugs its content — no dead panel below. */
#deck{ flex:1; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:14px; padding:6px 18px 10px; min-height:0; }
#glasswrap{ display:flex; flex-direction:column; min-width:0; }
#notch{ display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; min-width:0; align-self:start;
  align-content:flex-start; background:var(--mint-panel);
  border:var(--ol) solid var(--line); border-radius:12px; padding:12px; }
#crt,#keypad,#payment,#printer{ flex-basis:100%; }
#code-toggle{ display:none; }

/* ---------- glass + shelves ---------- */
#glass{ position:relative; flex:1; background:linear-gradient(180deg, var(--interior), var(--interior-deep));
  border:var(--ol) solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:inset 0 0 0 4px rgba(77,227,255,.5), inset 0 0 34px rgba(77,227,255,.28),
    inset 0 18px 26px rgba(0,0,0,.28), inset 0 -12px 22px rgba(0,0,0,.22);
  display:flex; flex-direction:column; padding:10px 10px 4px; gap:6px; }
.glass-sheen{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.14) 0%, transparent 18%, transparent 78%, rgba(255,255,255,.07) 100%); }
.shelf{ position:relative; flex:1; display:flex; flex-direction:column; justify-content:flex-end; }
.shelf.gacha{ flex:.62; }
.shelf.bays{ flex:.85; }
.shelf-glow{ position:absolute; left:2px; right:2px; top:0; height:5px; border-radius:3px;
  background:var(--glow); box-shadow:0 0 12px 3px var(--glow-soft); opacity:.9; }
.slots{ display:flex; align-items:flex-end; justify-content:space-around; padding:0 4px 2px; }
.shelf-lip{ height:10px; background:#2e9cbe; border:2px solid var(--line); border-radius:3px;
  box-shadow:0 0 10px rgba(77,227,255,.5), inset 0 2px 0 rgba(255,255,255,.3),
    inset 0 -3px 0 rgba(0,0,0,.25); }

/* slot + can (flex, not fixed % — row 1 carries five since the Google split) */
.slot{ position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; min-width:0; }
.slot .coil{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:8px; height:8px; opacity:0; }
.can-btn{ position:relative; display:block; transition:transform .15s; }
.can-btn:hover{ transform:translateY(-3px); }
.can-btn:focus-visible{ outline:3px solid var(--cream); outline-offset:3px; border-radius:8px; }
.slot-tag{ background:var(--cream); color:var(--line); border:2px solid var(--line); border-radius:4px;
  font-size:10px; font-weight:900; padding:0 7px; letter-spacing:.08em; }
.slot.soldout .slot-tag{ background:var(--red); color:var(--cream); }
.soldout-strip{ position:absolute; left:-6%; top:38%; width:112%; transform:rotate(-7deg);
  background:var(--red); color:var(--cream); border:2px solid var(--line);
  font-size:8.5px; font-weight:900; letter-spacing:.1em; text-align:center; padding:1px 0; border-radius:3px; }

/* row-5 expansion bays: stocked later, tagged now */
.bay{ width:58px; height:76px; border:2px dashed rgba(77,227,255,.4); border-radius:10px;
  background:rgba(0,0,0,.12); box-shadow:inset 0 4px 10px rgba(0,0,0,.22); }

/* ---------- gacha capsules: Sol's halves, top tinted via mask ---------- */
.gcap-btn{ display:block; transition:transform .15s; }
.gcap-btn:hover{ transform:translateY(-3px); }
.gcap-btn:focus-visible{ outline:3px solid var(--cream); outline-offset:3px; border-radius:50%; }
.gcapsule{ position:relative; width:46px; height:46px; }
.gc-top,.gc-bot{ position:absolute; inset:0;
  transition:transform .4s cubic-bezier(.4,0,.6,1), opacity .4s; }
.gc-top .gc-art,.gc-bot img{ display:block; width:100%; height:100%; object-fit:contain; }
.gcap-btn .gcapsule{ filter:drop-shadow(0 4px 3px rgba(0,0,0,.35)); }
.gc-top .gc-tint{ position:absolute; inset:0; mix-blend-mode:color;
  -webkit-mask:url("../assets/art/production/gacha/gacha-capsule-top.png") center/100% 100% no-repeat;
  mask:url("../assets/art/production/gacha/gacha-capsule-top.png") center/100% 100% no-repeat; }
#tray .gcapsule{ cursor:pointer; }
#tray .gcapsule.opened img{ width:100%; height:100%; object-fit:contain; }

/* the coin that pays the machine */
.coin{ touch-action:none; }
.coin.flying{ position:fixed; z-index:60;
  transition:top .42s cubic-bezier(.5,0,1,1), transform .42s, opacity .25s .22s; }
.coin.dragging{ position:fixed; z-index:70; cursor:grabbing; transition:none !important; }
#coincup .coin{ cursor:grab; }
#coinslot.drag-ok{ outline:3px dashed var(--glow); outline-offset:3px; }

/* the capsule viewer */
#gacha{ position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:rgba(10,13,26,.78); backdrop-filter:blur(3px); }
#gacha[hidden]{ display:none; }
.gacha-card{ display:flex; flex-direction:column; align-items:center; gap:16px; }
#gacha-stage{ position:relative; width:min(320px,80vw); height:auto; min-height:200px;
  display:flex; align-items:center; justify-content:center; }
#gcap{ position:relative; width:200px; height:200px; }
#gcap.popped .gc-top{ transform:translate(-52px,-96px) rotate(-28deg); opacity:.25; }
#gcap.popped .gc-bot{ transform:translate(44px,80px) rotate(18deg); opacity:.25; }
#gsticker{ display:block; max-width:min(320px,80vw); max-height:min(320px,44vh);
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.5)); }
#gacha-name{ color:var(--cream); font-weight:900; letter-spacing:.14em; font-size:13px; min-height:16px; }

/* the can: Sol's sprite in a fixed 58x88 frame (sprites share one canvas,
   so cup/short live inside the same frame) */
.can{ position:relative; width:64px; height:97px; }
.can-img{ display:block; width:100%; height:100%; object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.35)); }
.can-strip{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.can-body{ position:absolute; inset:0; border:var(--ol) solid var(--line); border-radius:10px 10px 8px 8px;
  overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  box-shadow:inset -8px 0 0 rgba(0,0,0,.12), inset 5px 0 0 rgba(255,255,255,.18); }
.can.cup .can-body{ border-radius:6px 6px 14px 14px;
  clip-path:polygon(6% 0, 94% 0, 86% 100%, 14% 100%); }
.can-lid{ position:absolute; left:6px; right:6px; top:-4px; height:8px;
  background:#c9cfdd; border:2px solid var(--line); border-radius:4px; }
.can.cup .can-lid{ background:var(--cream); }
.can-deco{ font-size:17px; line-height:1; }
.can-brand{ font-size:8.5px; font-weight:900; letter-spacing:.02em; text-align:center; line-height:1.1; padding:0 2px; }
.can-kind{ font-size:5.5px; font-weight:700; letter-spacing:.04em; text-align:center; opacity:.85; padding:0 2px; }
.can.clear .can-body{ backdrop-filter:blur(1px); background:rgba(215,235,240,.4) !important;
  box-shadow:inset -8px 0 0 rgba(255,255,255,.15), inset 5px 0 0 rgba(255,255,255,.3); }
.can.unlabeled .can-body{ background:#3a4157 !important; }
.can.unlabeled .can-deco,.can.unlabeled .can-brand,.can.unlabeled .can-kind{ visibility:hidden; }

/* falling can + dropzone */
#dropzone{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.falling{ position:absolute; z-index:4; }
.can.falling::before{ content:''; position:absolute; left:50%; top:-58px; width:30px; height:58px;
  transform:translateX(-50%); opacity:.75; pointer-events:none;
  background:url("../assets/art/production/fx/can-drop-smear-1.png") center/contain no-repeat;
  animation:smear .55s steps(1) both; }
@keyframes smear{
  33%{ background-image:url("../assets/art/production/fx/can-drop-smear-2.png"); }
  66%{ background-image:url("../assets/art/production/fx/can-drop-smear-3.png"); }
}

/* ---------- bottom row: takeout left, open paper bay right ---------- */
#bottomrow{ flex:none; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:14px; padding:0 18px; margin-bottom:20px; }
#takeout{ min-width:0; position:relative; background:var(--navy);
  border:var(--ol) solid var(--line); border-radius:12px; padding:10px 14px 12px; }
#paperbay{ min-width:0; }
.to-plate{ text-align:center; color:var(--coral); border:2px solid var(--coral); border-radius:6px;
  font-size:12px; font-weight:900; letter-spacing:.18em; padding:3px 0; margin-bottom:8px; }
.to-arrow{ display:inline-block; animation:toblink 1.6s steps(2) infinite; }
@keyframes toblink{ 50%{ opacity:.25; } }
#flap{ height:52px; background:var(--navy-deep); border:var(--ol) solid var(--line); border-radius:8px;
  overflow:hidden; perspective:300px; position:relative; }
.flap-face{ position:absolute; inset:4px; background:#32406e; border:2px solid var(--line);
  border-radius:6px; transform-origin:top center; transition:transform .3s cubic-bezier(.6,0,.7,1.4);
  background-image:linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%); }
#flap.open .flap-face{ transform:rotateX(-64deg); }
#flap::after{ content:''; position:absolute; left:12%; right:12%; bottom:3px; height:12px;
  background:radial-gradient(50% 100% at 50% 100%, rgba(0,0,0,.45), transparent 72%);
  opacity:0; transition:opacity .25s; pointer-events:none; }
#flap.open::after{ opacity:1; }
#tray{ display:flex; gap:8px; align-items:flex-end; min-height:70px; padding:8px 6px 4px;
  background:rgba(0,0,0,.2); border-radius:8px; box-shadow:inset 0 6px 12px rgba(0,0,0,.3); }
#tray .can,#tray .gcapsule{ flex:none; }   /* a spree never squishes the tray */
#tray .can{ cursor:grab; touch-action:none; }
#tray .can:active{ cursor:grabbing; }

/* ---------- notch devices ---------- */
/* CRT */
#crt{ position:relative; }
.crt-bezel{ background:var(--navy-deep); border:var(--ol) solid var(--line); border-radius:12px; padding:10px; }
.crt-screen{ position:relative; height:104px; border-radius:10px;
  background:radial-gradient(130% 130% at 50% 42%, #12281c 0%, var(--crt-bg) 62%, #081209 100%);
  border:2px solid #000; overflow:hidden; padding:10px 12px;
  box-shadow:inset 0 0 28px rgba(0,0,0,.6), inset 0 0 6px rgba(77,255,157,.12); }
#screen-lines{ font-family:"Consolas",monospace; font-size:14.5px; line-height:1.5; color:var(--crt-fg);
  text-shadow:0 0 6px rgba(77,255,157,.55); white-space:pre-wrap; }
#screen-lines .cursor{ display:inline-block; width:8px; height:14px; background:var(--crt-fg);
  animation:blink 1.1s steps(1) infinite; vertical-align:text-bottom; }
@keyframes blink{ 50%{ opacity:0; } }
.crt-scan{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.055) 0%, transparent 26%),
    repeating-linear-gradient(180deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
.crt-screen.glitch{ animation:glitch .5s steps(3) infinite; }
@keyframes glitch{
  0%{ transform:translate(0); filter:none; }
  33%{ transform:translate(-2px,1px) skewX(2deg); filter:hue-rotate(40deg); }
  66%{ transform:translate(2px,-1px) skewX(-1.5deg); filter:invert(.08); } }
.snd{ position:absolute; right:-2px; top:-8px; background:var(--navy-deep); color:#7d8ab0;
  border:2px solid var(--line); border-radius:5px; font-size:11px; line-height:1;
  font-weight:900; padding:3px 5px; }
.snd.on{ color:var(--glow); }

/* keypad */
#keypad{ background:var(--navy-deep); border:var(--ol) solid var(--line); border-radius:12px; padding:10px 12px 8px; }
.kp-row{ display:flex; gap:8px; justify-content:center; margin-bottom:8px; }
.kp{ width:52px; height:40px; color:var(--line);
  background:var(--kp) linear-gradient(180deg, rgba(255,255,255,.32), transparent 46%);
  border:var(--ol) solid var(--line); border-radius:8px; font-size:19px; font-weight:900;
  box-shadow:0 4px 0 var(--kp-edge); transition:transform .05s, box-shadow .05s; }
.kp:active,.kp.pressed{ transform:translateY(3px); box-shadow:0 1px 0 var(--kp-edge); }
.kp.alt{ background:#d9a6e8 linear-gradient(180deg, rgba(255,255,255,.32), transparent 46%);
  box-shadow:0 4px 0 #a878b8; }
.kp.alt:active,.kp.alt.pressed{ box-shadow:0 1px 0 #a878b8; }
.kp-row.caps{ margin-bottom:0; }
.kp-cell{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.kp-cap{ height:12px; font-size:10px; font-weight:900; letter-spacing:.16em; color:#8fa0c8; }

/* payment panel: a strict grid so the columns line up —
   bill slot over COIN RETURN, card reader over the coin cup,
   and the coin slot running the full height on the right */
/* four columns: the small coin catch frees row-2 space for the scan line
   (asymmetry with the card reader above is by design — Ben, 2026-08-03) */
#payment{ display:grid; grid-template-columns:1.15fr 40px 1fr 16px; grid-template-rows:auto auto;
  gap:8px 10px; align-items:stretch; background:var(--navy-deep);
  border:var(--ol) solid var(--line); border-radius:10px; padding:10px 12px; }
#billslot{ grid-column:1; grid-row:1; height:28px; background:var(--navy); border:2px solid #4a5680;
  border-radius:4px; display:flex; align-items:center; justify-content:center; }
#billslot i{ display:block; width:72%; height:6px; background:#000; border-radius:2px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.1); }
#cardreader{ grid-column:2 / 4; grid-row:1; position:relative; height:28px; background:var(--navy);
  border:2px solid #4a5680; border-radius:4px; }
.cr-slot{ position:absolute; left:5px; right:5px; top:5px; height:5px; background:#000; border-radius:2px; }
.cr-led{ position:absolute; right:4px; bottom:4px; width:5px; height:5px; border-radius:50%;
  background:#2ea84f; box-shadow:0 0 5px rgba(46,168,79,.9); }
#cardreader.declined .cr-led{ background:#ff3b30; box-shadow:0 0 6px rgba(255,59,48,.95); }
#coinslot{ grid-column:4; grid-row:1; background:#000; border:2px solid #4a5680;
  border-radius:3px; box-shadow:inset 0 3px 5px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.07); }
#coinreturn{ grid-column:1; grid-row:2; background:var(--navy); color:#aab3cc; border:2px solid var(--line);
  border-radius:6px; font-size:10px; font-weight:900; letter-spacing:.08em; padding:8px 0;
  white-space:nowrap; }
#coinreturn:active{ transform:translateY(2px); }
#coincup{ grid-column:2; grid-row:2; position:relative; min-height:30px; background:#12172b;
  border:2px solid var(--line); border-radius:0 0 8px 8px; overflow:visible;
  box-shadow:inset 0 5px 9px rgba(0,0,0,.55); }
.coin{ position:absolute; width:26px; height:26px; border-radius:50%;
  background:url("../assets/art/production/fx/coin.png") center/cover no-repeat; }

/* printer */
#printer{ background:var(--navy-deep); border:var(--ol) solid var(--line); border-radius:12px; padding:10px 12px; }
.pr-label{ color:#aab3cc; font-size:10px; font-weight:900; letter-spacing:.22em; margin-bottom:6px; }
.pr-slot{ position:relative; height:14px; background:#000; border:2px solid #4a5680; border-radius:4px;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.85); }
#paper{ position:absolute; left:6px; right:6px; top:10px; max-height:0; overflow:hidden;
  background:var(--paper) url("../assets/art/production/fx/receipt-paper-texture.png") repeat-y;
  background-size:100% auto;
  border:2px solid var(--line); border-top:none; border-radius:0 0 4px 4px;
  box-shadow:0 6px 14px rgba(0,0,0,.4); z-index:8;
  font-family:"Consolas",monospace; font-size:10.5px; color:var(--paper-ink); line-height:1.45;
  transition:max-height .18s linear; }
#paper .p-inner{ padding:10px 10px 14px; }
#paper .p-head{ text-align:center; font-weight:700; letter-spacing:.08em; }
#paper .p-rule{ border-top:1.5px dashed #b9b09a; margin:6px 0; }
#paper .p-small{ font-size:9px; color:#7a755f; }
#paper .p-void{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:900; color:rgba(217,79,79,.8); transform:rotate(-14deg);
  letter-spacing:.2em; pointer-events:none; }
#paper .p-actions{ display:flex; gap:8px; justify-content:center; padding:0 0 10px; }
#paper.tearing{ animation:tear .45s ease-in forwards; }
@keyframes tear{ to{ transform:translateY(30px) rotate(3deg); opacity:0; } }

/* scanner: the scan line tucks into row 2 beside the small coin catch,
   label below it — one family with the payment devices */
#scanner{ grid-column:3 / 5; grid-row:2; display:flex; flex-direction:column;
  justify-content:center; gap:3px; padding:0 6px; }
.sc-window{ position:relative; width:100%; height:16px; background:#160c0e; border:2px solid #4a5680; border-radius:4px; overflow:hidden; }
.sc-beam{ position:absolute; left:6%; right:6%; top:50%; height:2px; background:#ff3b30;
  box-shadow:0 0 10px 2px rgba(255,59,48,.8); border-radius:2px; }
#scanner.scanning .sc-beam{ animation:beam .5s ease-in-out 3; }
@keyframes beam{ 0%,100%{ top:16%; } 50%{ top:72%; } }
#scanner.drag-ok{ outline:3px dashed var(--glow); outline-offset:3px; }
.sc-label{ text-align:center; color:#ff8a80; font-size:10px; font-weight:900; letter-spacing:.12em; }
.sc-long{ display:none; }
.sc-short{ display:inline; }

/* sticky note */
#sticky{ position:absolute; right:28px; top:270px; z-index:6; width:86px; padding:10px 8px 12px;
  background:#f7d968; border:none; box-shadow:3px 4px 0 rgba(0,0,0,.3);
  transform:rotate(4deg); transition:transform .2s;
  font-family:"Comic Sans MS","Segoe Print",cursive; color:#5a4a12; text-align:left; }
#sticky:hover{ transform:rotate(1deg) scale(1.06); }
#sticky::before{ content:""; position:absolute; right:-6px; bottom:-6px; width:22px; height:22px;
  background:linear-gradient(135deg, transparent 50%, var(--wall) 50%); }
.st-line{ display:block; font-size:10px; }
.st-code{ display:block; font-size:15px; font-weight:700; letter-spacing:.12em; }
.st-sig{ display:block; font-size:9px; text-align:right; margin-top:4px; opacity:.7; }

/* ---------- can zoom overlay ---------- */
#zoom,#leave{ position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:rgba(10,13,26,.78); backdrop-filter:blur(3px); }
#zoom[hidden],#leave[hidden]{ display:none; }
.zoom-card{ display:flex; flex-direction:column; align-items:center; gap:18px; }
#zoom-can{ position:relative; width:min(300px,72vw); height:min(460px,66vh); perspective:1200px; }
.bigcan{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.5,0,.3,1.2); }
.bigcan.flipped{ transform:rotateY(180deg); }
.bigface{ position:absolute; inset:0; backface-visibility:hidden; border:4px solid var(--line);
  border-radius:26px; overflow:hidden; display:flex; flex-direction:column; align-items:center;
  box-shadow:inset -30px 0 40px rgba(0,0,0,.18), inset 20px 0 30px rgba(255,255,255,.14), 0 20px 50px rgba(0,0,0,.5); }
.bigface.back{ transform:rotateY(180deg); background:var(--cream); }
.bigface.artface{ background:transparent; border:none; box-shadow:none; }
.label-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)); }
.big-lid{ width:70%; height:16px; background:#c9cfdd; border:3px solid var(--line); border-radius:8px; margin:10px 0 4px; }
.big-deco{ font-size:64px; margin-top:26px; }
.big-brand{ font-size:30px; font-weight:900; text-align:center; letter-spacing:.04em; padding:0 14px; }
.big-kind{ font-size:13px; font-weight:700; letter-spacing:.14em; opacity:.9; margin-top:4px; text-align:center; }
.big-slogan{ margin-top:auto; margin-bottom:20px; font-size:13px; font-style:italic; text-align:center;
  padding:0 22px; opacity:.95; }
/* dates chip removed from the zoom front (Ben, 2026-08-04) — the dates
   live on in the nutrition serving line and every receipt */
/* nutrition back — the FDA label, played straight (that's the joke) */
.nut{ width:86%; margin-top:auto; background:#fff; border:2.5px solid #111; border-radius:2px;
  padding:8px 10px 9px; color:#111;
  font-family:"Helvetica Neue","Arial Narrow",Arial,sans-serif; }
.nut h3{ font-size:24px; font-weight:900; letter-spacing:-.02em; line-height:1.05;
  border-bottom:1px solid #111; padding-bottom:2px; }
.nut .serving{ font-size:10px; font-weight:700; padding:3px 0 4px; }
.nut .nut-bar{ height:8px; background:#111; margin:0 0 3px; }
.nut .nut-amount{ display:flex; justify-content:space-between; font-size:8.5px; font-weight:900;
  letter-spacing:.02em; border-bottom:4px solid #111; padding-bottom:2px; }
.nut table{ width:100%; border-collapse:collapse; font-size:10px; }
.nut td{ padding:3px 0; border-bottom:1px solid #111; }
.nut td:first-child{ font-weight:700; padding-right:6px; }
.nut td:nth-child(2){ text-align:right; color:#222; text-wrap:balance; }
.nut td:last-child{ text-align:right; font-weight:900; padding-left:8px; white-space:nowrap; }
.nut tr:last-child td{ border-bottom:4px solid #111; }
.nut .foot{ font-size:8px; line-height:1.35; padding-top:4px; color:#111; }
.big-barcode{ margin-top:auto; margin-bottom:14px; width:64%; height:44px; background:#fff;
  border:3px solid var(--line); border-radius:4px; display:flex; align-items:center; justify-content:center; }
.big-barcode i{ display:block; height:70%;
  background:repeating-linear-gradient(90deg,#111 0 3px, #fff 3px 5px, #111 5px 6px, #fff 6px 10px);
  width:86%; }
.zoom-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.zbtn{ background:var(--navy); color:var(--cream); border:3px solid var(--line); border-radius:8px;
  font-weight:900; letter-spacing:.1em; font-size:13px; padding:10px 18px;
  box-shadow:0 4px 0 rgba(0,0,0,.35); }
.zbtn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35); }
.zbtn.primary{ background:var(--coral); }
.leave-card{ background:var(--navy); border:4px solid var(--line); border-radius:14px;
  color:var(--cream); max-width:340px; padding:20px 22px; display:flex; flex-direction:column; gap:14px; }
.leave-head{ font-weight:900; letter-spacing:.16em; color:var(--coral); font-size:13px; }
.leave-card p{ font-size:13.5px; line-height:1.5; }

/* ============================================================
   DRESSED MODE (≥561px): Sol's layers carry the chrome; the DOM
   keeps layout boxes, hit areas, and live text (CRT, receipt,
   nutrition, digits, captions, tags rows 1-4).
   ============================================================ */
/* DRESSED MODE IS PARKED (Ben, 2026-08-03: "layouts first, art later").
   The registered chrome layers only apply under body.art — which nothing
   sets right now. Element sprites (cans, capsules, labels, coin, paper
   texture) stay on everywhere; they are layout-independent.
   When the layout freezes: Sol re-exports to the frozen geometry, then
   document.body.classList.add('art') flips this all back on. */
@media (min-width:561px){
  body.art{
    .al{ display:block; }
    #alcove{ background:none; }
    #alcove::after{ display:none; }
    #machine{ background:none; border-color:transparent; box-shadow:none; }
    .m-feet{ display:none; }
    #marquee{ visibility:hidden; }
    #glasswrap{ position:relative; z-index:2; }
    #glass{ background:none; border-color:transparent; box-shadow:none; }
    .shelf-glow,.shelf-lip,.glass-sheen{ display:none; }
    .bay{ border:none; background:none; }
    .shelf.bays .slot-tag{ display:none; }
    #notch{ background:none; border-color:transparent; position:relative; z-index:4; }
    .crt-bezel{ background:none; border-color:transparent; }
    #keypad{ background:none; border-color:transparent; }
    .kp,.kp.alt{ border-color:transparent; box-shadow:none;
      background:url("../assets/art/production/machine/key-up.png") no-repeat;
      background-size:860px 1060px; background-position:var(--k1x, -9999px) var(--k1y, 0); }
    .kp:active,.kp.pressed,.kp.alt:active,.kp.alt.pressed{ box-shadow:none;
      background-image:url("../assets/art/production/machine/key-down.png"); }
    #payment{ background:none; border-color:transparent; }
    #billslot,#cardreader,#coinslot{ background:transparent; border-color:transparent; }
    #billslot i,.cr-slot,.cr-led{ display:none; }
    #coinreturn{ background:transparent; border-color:transparent; color:transparent; }
    #coincup{ background:transparent; border-color:transparent; }
    #scanner{ background:none; border-color:transparent; }
    .sc-window{ background:transparent; border-color:transparent; }
    .sc-beam{ display:none; }
    .sc-label{ visibility:hidden; }
    #printer{ background:none; border-color:transparent; }
    .pr-label{ visibility:hidden; }
    .pr-slot{ background:transparent; border-color:transparent; }
    #bottomrow{ position:relative; z-index:4; }
    #takeout{ background:none; border-color:transparent; }
    .to-plate{ visibility:hidden; }
    #flap{ background:transparent; border-color:transparent; }
    .flap-face{ display:none; }
    #radio{ left:0; transform:none; width:860px; height:0; }
    .r-antenna,.r-grille,.r-label{ display:none; }
    .r-body{ position:static; background:transparent; border-color:transparent; box-shadow:none; padding:0; }
    /* coords measured against the wave-10 radio art (debug-outline pass, 2026-08-04) */
    .r-display{ position:absolute; left:334px; top:21px; width:150px; background:transparent; border-color:transparent; }
    .r-knob{ position:absolute; left:501px; top:18px; background:transparent; border-color:transparent; }
    .r-knob::after{ display:none; }
    .r-power{ position:absolute; left:533px; top:25px; background:transparent; border-color:transparent; }
    #radio.on .r-power{ background:transparent; box-shadow:none; }
    #sticky{ background:transparent; box-shadow:none; }
    #sticky::before{ display:none; }
    #sticky span{ visibility:hidden; }
  }
}

/* ============================================================
   MOBILE-NATIVE (≤560px): no scale-to-fit miniature. The machine
   stacks like a real one you're standing close to — glass on top,
   controls below, thumb-size keys, the page scrolls.
   initScale() skips the transform at this width; the !important
   here is the belt to that suspender.
   ============================================================ */
@media (max-width:560px){
  body{ overflow-x:hidden; overflow-y:auto; }
  #stage{ height:auto; display:block; }
  #alcove{ width:100%; height:auto; transform:none !important; padding-bottom:26px; }
  #alcove::after{ display:none; }

  /* radio joins the flow — no overlap math with the marquee */
  #radio{ position:static; transform:none; display:flex; justify-content:center;
    padding-top:22px; }

  #machine{ position:relative; left:auto; top:auto;
    width:auto; height:auto; margin:12px 8px 14px; display:flex; flex-direction:column; }
  #machine .m-feet{ display:none; }

  #marquee{ margin:10px 12px 2px; height:52px; }
  .mq-en{ font-size:19px; }

  /* stack: glass, then the control column, then takeout — compressed */
  #deck{ display:flex; flex-direction:column; gap:10px; padding:6px 12px 8px; }
  #glass{ min-height:470px; }
  #notch{ align-self:stretch; }

  /* smaller cans, capsules and bays */
  .can{ width:46px; height:70px; }
  .gcapsule{ width:38px; height:38px; }
  .gcap-btn .gcapsule{ width:38px; height:38px; }
  .bay{ width:44px; height:56px; }

  #bottomrow{ display:block; padding:0 12px; margin-bottom:14px; }
  #paperbay{ display:none; }

  /* keypad always out (Ben, 2026-08-04: the accordion is dead — there's
     room). Keypad left, vertical payment card beside it on the right;
     devices sized to the goods, not the viewport. */
  #code-toggle{ display:none; }
  #keypad{ display:block; flex:none; padding:8px 12px 6px; }
  .kp{ width:48px; height:34px; font-size:15px; }
  .kp-row{ gap:7px; margin-bottom:5px; }
  .kp-cap{ font-size:8px; height:10px; }

  .crt-bezel{ padding:8px; }
  .crt-screen{ height:70px; padding:6px 10px; }   /* exactly three lines — the max any message runs */
  #screen-lines{ font-size:12.5px; }

  /* keypad + payment share one row: keypad left, payment right (Ben's
     arrows). The payment card goes VERTICAL — bill, card, coin slot,
     return, cup, scanner stacked — and stretches to the keypad's height.
     Printer stays wide below so the receipt prints readable. */
  #notch{ justify-content:space-between; }
  #payment{ flex:1 1 0; min-width:88px; max-width:140px; align-self:stretch; margin:0; padding:8px;
    display:grid; grid-template-columns:1fr 14px; align-content:space-between; gap:6px; }
  #billslot,#cardreader{ height:18px; grid-column:1 / 3; }
  #billslot{ grid-row:1; }
  #cardreader{ grid-row:2; }
  #coinslot{ grid-column:2; grid-row:3; width:14px; height:auto; align-self:stretch; }
  #coinreturn{ grid-column:1; grid-row:3; }
  #coincup{ grid-column:1 / 3; grid-row:4; }
  #scanner{ grid-column:1 / 3; grid-row:5; }
  #coinreturn{ font-size:8px; padding:5px 0; letter-spacing:.08em; }
  #coincup{ min-height:24px; }
  .coin{ width:22px; height:22px; }
  .sc-window{ height:12px; }
  .sc-label{ font-size:8px; }
  .pr-label{ font-size:8px; }

  #flap{ height:40px; }
  #tray{ min-height:56px; padding:6px 4px 0; }

  /* sticky note rides the marquee corner, clear of the cans */
  #sticky{ top:96px; right:4px; transform:rotate(4deg) scale(.88); }
  #sticky:hover{ transform:rotate(1deg) scale(.94); }

  /* nutrition label gets the whole can back on a phone */
  .nut{ width:92%; padding:8px 9px; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}