/* Vending Machine puzzle — ported from the standalone prototype.
   Every selector is scoped under .vending-app so the prototype's generic
   class names (.card, .grid, .controls, .legend, .rule, .status, .slot, .toast)
   and its palette never leak into the rest of Puzzmallow (or collide with Bulma).
   The prototype's own :root / body theming is rehomed onto .vending-app. */

.vending-app {
  /* --- day konbini (light) --- */
  --bg: #fff3e3;
  --dot: rgba(255,150,120,0.16);
  --burst: rgba(255,209,62,0.28);
  --ink: #2b2444;
  --muted: #86799f;
  --card: #ffffff;
  --card-line: #ffe0cd;
  --card-shadow: 0 16px 30px -20px rgba(120,60,40,0.5);

  /* the machine — a red jihanki, same day or night */
  --chassis-1: #ff5d6b;
  --chassis-2: #ef2f4c;
  --chassis-edge: #c81f39;
  --trim: #fffdf8;
  --trim-line: #ffd0c4;
  --glass: #141a2e;
  --glass-2: #0c1120;
  --glass-edge: #05070f;
  --bay: #1b2338;
  --bay-line: #2c3550;
  --on-dark: #fdf1e7;
  --muted-dark: #8f9bc4;

  /* pop accents */
  --accent: #ffca28;     /* sunny yellow */
  --accent-ink: #5a3d00;
  --pop-blue: #2ec5ff;
  --pop-pink: #ff6faa;
  --good: #22c07a;
  --bad: #ff4d63;
  --pending: #b9b0c9;

  /* packaging brand colours (poppy, all distinct) */
  --funco: #ff5a3c;
  --fresh: #12bfa4;
  --allgood: #5b7cff;
  --tasty: #ff5aa8;

  --vfont-display: "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "Baloo 2", "Quicksand", system-ui, sans-serif;
  --vfont-jp: "Hiragino Maru Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif;
  --vfont-body: "Hiragino Maru Gothic ProN", system-ui, -apple-system, "Segoe UI", "Yu Gothic", Roboto, sans-serif;
  --vfont-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  color: var(--ink);
  font-family: var(--vfont-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1.6px, transparent 1.7px);
  background-size: 18px 18px;
  border-radius: 26px;
  padding: clamp(14px, 2.6vw, 28px);
}
@media (prefers-color-scheme: dark) {
  .vending-app {
    --bg: #0c0f1f;
    --dot: rgba(120,150,255,0.10);
    --burst: rgba(255,90,120,0.22);
    --ink: #f3ecff;
    --muted: #9c93c2;
    --card: #171a2e;
    --card-line: #2a2f4a;
    --card-shadow: 0 18px 34px -20px rgba(0,0,0,0.7);
    --pending: #59607a;
  }
}
:root[data-theme="light"] .vending-app {
  --bg: #fff3e3; --dot: rgba(255,150,120,0.16); --burst: rgba(255,209,62,0.28);
  --ink: #2b2444; --muted: #86799f; --card: #ffffff; --card-line: #ffe0cd;
  --card-shadow: 0 16px 30px -20px rgba(120,60,40,0.5); --pending: #b9b0c9;
}
:root[data-theme="dark"] .vending-app {
  --bg: #0c0f1f; --dot: rgba(120,150,255,0.10); --burst: rgba(255,90,120,0.22);
  --ink: #f3ecff; --muted: #9c93c2; --card: #171a2e; --card-line: #2a2f4a;
  --card-shadow: 0 18px 34px -20px rgba(0,0,0,0.7); --pending: #59607a;
}

.vending-app * { box-sizing: border-box; }

/* ---- Two-column layout: machine (left) + guide (right), inside the ~960px centre column ---- */
.vending-app .vending-layout {
  display: grid;
  gap: clamp(16px, 2.5vw, 26px);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: start;
  text-align: left;
}
@media (max-width: 900px) {
  .vending-app .vending-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Machine ---- */
.vending-app .machine {
  position: relative;
  background: linear-gradient(158deg, var(--chassis-1), var(--chassis-2));
  border: 3px solid var(--chassis-edge);
  border-radius: 30px; padding: 12px;
  box-shadow: 0 26px 50px -26px rgba(200,30,55,0.65), inset 0 2px 0 rgba(255,255,255,0.35);
  display: flex; flex-direction: column; gap: 12px;
}
.vending-app .machine::before {
  content: ""; position: absolute; inset: -40px -40px auto -40px; height: 220px; z-index: -1;
  background: radial-gradient(closest-side, var(--burst), transparent 72%);
  filter: blur(4px);
}
.vending-app .machine-inner {
  position: relative;
  background: var(--trim); border: 2px solid var(--trim-line);
  border-radius: 22px; padding: clamp(12px, 2vw, 18px);
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);
  /* four cabinet bolts */
  background-image:
    radial-gradient(circle at 15px 15px, #cdbfb2 0 2.4px, rgba(0,0,0,.16) 2.4px 3.6px, transparent 3.8px),
    radial-gradient(circle at calc(100% - 15px) 15px, #cdbfb2 0 2.4px, rgba(0,0,0,.16) 2.4px 3.6px, transparent 3.8px),
    radial-gradient(circle at 15px calc(100% - 15px), #cdbfb2 0 2.4px, rgba(0,0,0,.16) 2.4px 3.6px, transparent 3.8px),
    radial-gradient(circle at calc(100% - 15px) calc(100% - 15px), #cdbfb2 0 2.4px, rgba(0,0,0,.16) 2.4px 3.6px, transparent 3.8px);
  background-repeat: no-repeat;
}
/* top marquee / brand sign */
.vending-app .machine-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(180deg, #ffffff, #fff2ec);
  border: 2px solid var(--trim-line); border-radius: 14px; padding: 8px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 5px -3px rgba(200,30,55,0.4);
}
.vending-app .plate {
  font-family: var(--vfont-display); font-weight: 800; letter-spacing: -0.01em; color: var(--chassis-2);
  font-size: 15px; display: flex; align-items: center; gap: 8px;
}
.vending-app .plate .badge { font-family: var(--vfont-jp); font-size: 11px; font-weight: 700; color: #fff; background: var(--pop-pink); padding: 2px 9px; border-radius: 999px; letter-spacing: .06em; }
.vending-app .plate small { display: block; font-family: var(--vfont-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; margin-top: 1px; }
.vending-app .led {
  font-family: var(--vfont-mono); font-size: 13px; letter-spacing: 0.12em;
  padding: 8px 12px; border-radius: 10px; background: #10131f;
  border: 2px solid #2a3350; color: var(--accent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  display: flex; gap: 10px; align-items: center; white-space: nowrap;
}
.vending-app .led[data-state="win"] { color: var(--good); text-shadow: 0 0 10px color-mix(in srgb, var(--good) 60%, transparent); }
.vending-app .led[data-state="bad"] { color: var(--bad); text-shadow: 0 0 10px color-mix(in srgb, var(--bad) 60%, transparent); }

/* glass display */
.vending-app .glass {
  position: relative; background: linear-gradient(170deg, var(--glass), var(--glass-2));
  border-radius: 16px; padding: 36px 14px 14px 30px;
  border: 3px solid var(--glass-edge);
  box-shadow: inset 0 3px 26px rgba(0,0,0,0.7);
  overflow: hidden;
}
.vending-app .glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.10) 0%, transparent 30%, transparent 72%, rgba(255,255,255,0.05) 100%);
}
.vending-app .grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* glass shelves the products sit on — overlay aligned to the four rows */
.vending-app .shelves { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(4, 1fr); gap: 8px; pointer-events: none; z-index: 3; }
.vending-app .shelf { position: relative; }
.vending-app .shelf::after {
  content: ""; position: absolute; left: -5px; right: -5px; bottom: -2px; height: 3px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(150,185,235,0.10) 45%, rgba(0,0,0,0.5));
  box-shadow: 0 2px 5px rgba(0,0,0,0.5), 0 0 7px rgba(120,180,255,0.14);
}
/* faint interior shelf lighting from the top */
.vending-app .glass::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(180,210,255,0.10), transparent);
}
.vending-app .colnums { position: absolute; top: 12px; left: 30px; right: 14px; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.vending-app .colnums span { text-align: center; font-family: var(--vfont-mono); font-size: 11px; color: var(--muted-dark); }
.vending-app .rownums { position: absolute; top: 36px; bottom: 14px; left: 9px; width: 16px; display: grid; grid-template-rows: repeat(4,1fr); gap: 8px; }
.vending-app .rownums span { display: flex; align-items: center; justify-content: center; font-family: var(--vfont-mono); font-size: 11px; color: var(--muted-dark); }

.vending-app .bay {
  position: relative; aspect-ratio: 1 / 1; border: 2px solid var(--bay-line);
  background: var(--bay); border-radius: 12px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .12s ease;
}
.vending-app .bay.tint { background: color-mix(in srgb, var(--bay) 88%, var(--pop-blue)); }
.vending-app .bay.is-centre { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.vending-app .bay:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--bay-line)); }
.vending-app .bay.droptarget { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); transform: scale(1.03); }
.vending-app .bay:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.vending-app .bay .coil { width: 46%; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, #333c58 0 4px, transparent 4px 7px); opacity: .7; }
.vending-app .bay.given { cursor: default; }
.vending-app .bay.given:hover { border-color: var(--bay-line); }
.vending-app .prod.pinned { cursor: default; box-shadow: inset 0 0 0 3px var(--accent), inset 0 1px 0 rgba(255,255,255,.3), 0 3px 8px rgba(0,0,0,.45); animation: none; }
.vending-app .setbadge { position: absolute; top: 4px; right: 4px; font-family: var(--vfont-jp); font-size: 8px; letter-spacing: .04em; padding: 1px 5px; border-radius: 999px; background: var(--accent); color: #3a2800; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* product tile */
.vending-app .prod {
  --b: var(--muted);
  width: 100%; height: 100%; border: none; cursor: pointer;
  border-radius: 11px; padding: 6px 5px 5px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--b) 82%, white 18%), var(--b));
  color: #fff; display: grid; grid-template-rows: auto 1fr auto; gap: 1px;
  position: relative; overflow: hidden; text-align: left;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.32), inset 0 0 0 2px rgba(255,255,255,0.14), 0 3px 6px rgba(0,0,0,0.4);
  transition: transform .13s ease, box-shadow .13s ease, opacity .13s ease;
  animation: vending-drop .2s ease;
}
@keyframes vending-drop { from { transform: translateY(-8px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.vending-app .prod .pb { font-family: var(--vfont-display); font-weight: 800; font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; opacity: .96; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.vending-app .prod .pe { font-size: clamp(20px, 4.4vw, 27px); line-height: 1; align-self: center; justify-self: center; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.vending-app .prod .pt { font-size: 9.5px; font-weight: 700; letter-spacing: .01em; }
.vending-app .prod .ps {
  position: absolute; right: 4px; bottom: 4px; font-family: var(--vfont-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .01em; padding: 1px 5px; border-radius: 999px;
  background: var(--accent); color: #3a2800; border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.vending-app .prod:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* crate / tray */
.vending-app .crate { display: flex; flex-direction: column; gap: 10px; }
.vending-app .crate-label { display: flex; align-items: center; justify-content: space-between; font-family: var(--vfont-display); font-weight: 800; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chassis-2); }
.vending-app .crate-label .jp { font-family: var(--vfont-jp); color: var(--pop-pink); margin-right: 5px; }
.vending-app .crate-label .left { font-family: var(--vfont-mono); color: var(--muted); }
.vending-app .tray {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: linear-gradient(180deg, #1a2136, #10131f); padding: 10px; border-radius: 14px; border: 3px solid var(--glass-edge);
  box-shadow: inset 0 3px 14px rgba(0,0,0,0.55);
}
.vending-app .slot { aspect-ratio: 1/1; border-radius: 11px; }
.vending-app .slot.empty { border: 2px dashed #3a4361; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,0.03) 6px 12px); }
.vending-app .prod.selected { transform: translateY(-4px) scale(1.04); box-shadow: 0 0 0 3px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 2px 0 rgba(255,255,255,.3); }
.vending-app .prod.done { opacity: .32; }

/* service panel — delivery door + payment mech */
.vending-app .dispenser { display: flex; align-items: stretch; gap: 8px; padding: 2px 2px 0; height: 40px; }
.vending-app .flap {
  flex: 1; border-radius: 10px; background: linear-gradient(180deg, #10131f, #05070f);
  border: 3px solid var(--glass-edge); display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--vfont-jp); font-size: 11px; letter-spacing: .12em; color: var(--muted-dark);
  box-shadow: inset 0 5px 10px rgba(0,0,0,0.65);
}
.vending-app .flap::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: #2a3350; box-shadow: 0 5px 0 #2a3350; }
.vending-app .mech { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 10px; background: linear-gradient(180deg, #2b3350, #1a2036); border: 3px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.vending-app .coinslot { width: 12px; height: 20px; border-radius: 6px; background: #05070f; border: 2px solid #3a4467; align-self: center; }
.vending-app .billslot { width: 26px; height: 5px; border-radius: 3px; background: #05070f; border: 2px solid #3a4467; align-self: center; box-shadow: inset 0 0 3px rgba(0,0,0,.8); }
.vending-app .retcup { width: 22px; height: 16px; border-radius: 4px 4px 8px 8px; background: #05070f; border: 2px solid #3a4467; border-top-color: #556; align-self: center; }

/* ---- Guide panel ---- */
.vending-app .panel { display: flex; flex-direction: column; gap: 16px; }
.vending-app .v-card { background: var(--card); border: 2px solid var(--card-line); border-radius: 20px; padding: 17px 17px 15px; box-shadow: var(--card-shadow); }
.vending-app .v-card h2 { margin: 0 0 3px; font-family: var(--vfont-display); font-weight: 800; font-size: 15px; letter-spacing: 0.01em; display: flex; align-items: center; gap: 8px; }
.vending-app .v-card h2 .jp { font-family: var(--vfont-jp); font-size: 12px; font-weight: 700; color: var(--pop-pink); }
.vending-app .v-card .sub { margin: 0 0 13px; font-size: 12.5px; color: var(--muted); }
.vending-app .rule {
  display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 20%, var(--card)); border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--card-line));
  font-size: 13px;
}
.vending-app .rule .tag { font-family: var(--vfont-jp); font-size: 11px; letter-spacing: .04em; color: #fff; background: var(--chassis-2); padding: 3px 9px; border-radius: 999px; font-weight: 700; white-space: nowrap; }

.vending-app ol.clues { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; counter-reset: c; }
.vending-app ol.clues li {
  display: grid; grid-template-columns: 22px 14px 1fr; gap: 9px; align-items: start;
  padding: 8px 7px; border-radius: 12px; font-size: 13.5px; transition: background .15s ease;
}
.vending-app ol.clues li::before { counter-increment: c; content: counter(c); font-family: var(--vfont-display); font-weight: 800; font-size: 12px; color: #fff; background: var(--pop-blue); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.vending-app ol.clues li.ok { background: color-mix(in srgb, var(--good) 13%, transparent); }
.vending-app ol.clues li.ok::before { background: var(--good); }
.vending-app ol.clues li.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); }
.vending-app ol.clues li.bad::before { background: var(--bad); }
.vending-app ol.clues li.bad .txt { color: var(--bad); }
.vending-app .status { width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; background: var(--pending); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pending) 20%, transparent); }
.vending-app li.ok .status { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 24%, transparent); }
.vending-app li.bad .status { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 24%, transparent); }

.vending-app .controls { display: flex; gap: 10px; }
.vending-app button.v-btn {
  flex: 1; font-family: var(--vfont-display); font-size: 14px; font-weight: 800; cursor: pointer;
  padding: 11px 12px; border-radius: 14px; border: 2px solid var(--card-line); background: var(--card); color: var(--ink);
  box-shadow: 0 4px 0 -1px var(--card-line); transition: transform .09s ease, box-shadow .09s ease, filter .15s ease;
}
.vending-app button.v-btn:hover { filter: brightness(1.03); }
.vending-app button.v-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 -1px var(--card-line); }
.vending-app button.v-btn.primary { background: var(--accent); border-color: #e0a800; color: #4a3200; box-shadow: 0 4px 0 -1px #d09c00; }
.vending-app button.v-btn.primary:active { box-shadow: 0 1px 0 -1px #d09c00; }
.vending-app button.v-btn:focus-visible { outline: 3px solid var(--pop-blue); outline-offset: 2px; }

.vending-app .legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; font-size: 12.5px; }
.vending-app .legend .grp { display: flex; flex-direction: column; gap: 6px; }
.vending-app .legend .lh { font-family: var(--vfont-display); font-weight: 800; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.vending-app .legend .row { display: flex; align-items: center; gap: 7px; }
.vending-app .swatch { width: 14px; height: 14px; border-radius: 5px; flex: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.vending-app .shp { font-family: var(--vfont-mono); font-weight: 700; font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #4a3200; border: 1.5px solid #fff; }

/* win banner */
.vending-app .toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(160%);
  background: var(--good); color: #04220f; font-family: var(--vfont-display); font-weight: 800; padding: 14px 24px; border-radius: 16px;
  border: 3px solid #fff; box-shadow: 0 18px 40px -12px rgba(0,0,0,0.5); display: flex; gap: 10px; align-items: center;
  transition: transform .45s cubic-bezier(.2,.9,.3,1.3); z-index: 60; font-size: 15px;
}
.vending-app .toast .jp { font-family: var(--vfont-jp); }
.vending-app .toast.show { transform: translateX(-50%) translateY(0); }
.vending-app .machine.win .glass { box-shadow: inset 0 3px 26px rgba(0,0,0,0.5), 0 0 0 3px var(--good), 0 0 40px -6px color-mix(in srgb, var(--good) 65%, transparent); }

@media (prefers-reduced-motion: reduce) { .vending-app * { transition: none !important; animation: none !important; } }