/* JEVELIN. The page is a 1998 hallway notice board for a vending machine.
   Tokens sampled off the art, not invented:
     machine red #c6382f, side panel #a72c25, olive tube #4f6b3a, deep olive #35492a,
     hallway cream #e9e9dd, glass cream #f4f3e9, marker ink #141414,
     steel keypad #8a8a8a / #6f6f6f, masking tape #f2d88a, button yellow #f2d24a.
   Period chrome on purpose: web safe link blue #0000ee, visited purple #551a8b,
   ridge and inset bevels, tiled background, table borders you can see.
   Spacing 6 / 12 / 20 / 32 / 48. Corners are square everywhere. No blur, no soft shadow.
   Type: Baloo 2 800 (signage), Comic Neue (body, the charmingly dated face),
   VT323 (the LCD and the counter digits). All bundled, no CDN. */

@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url("assets/fonts/baloo-2-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Comic Neue"; font-weight: 400; font-display: swap; src: url("assets/fonts/comic-neue-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Comic Neue"; font-weight: 700; font-display: swap; src: url("assets/fonts/comic-neue-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "VT323"; font-weight: 400; font-display: swap; src: url("assets/fonts/vt323-latin-400-normal.woff2") format("woff2"); }

:root {
  --red: #c6382f;
  --red-dk: #a72c25;
  --olive: #4f6b3a;
  --olive-dk: #35492a;
  --cream: #e9e9dd;
  --glass: #f4f3e9;
  --ink: #141414;
  --steel: #8a8a8a;
  --steel-dk: #6f6f6f;
  --tape: #f2d88a;
  --yellow: #f2d24a;
  --link: #0000ee;
  --seen: #551a8b;
  --lcd-bg: #1b2414;
  --lcd: #b6e08a;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  color: var(--ink);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  background-color: var(--cream);
  /* a tiled hallway wall, the way a 1998 page tiles a 40px gif */
  background-image:
    repeating-linear-gradient(45deg, rgba(79,107,58,.07) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(198,56,47,.05) 0 2px, transparent 2px 9px);
}

a { color: var(--link); }
a:visited { color: var(--seen); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }

/* ---------- hazard strip + construction line ---------- */
.hazard {
  height: 16px;
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 14px, var(--ink) 14px 28px);
  border-bottom: 3px solid var(--ink);
}
.constructing {
  margin: 0;
  padding: 6px 12px;
  text-align: center;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 14px;
  background: var(--yellow);
  border-bottom: 3px solid var(--ink);
}
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 0%, 55% { opacity: 1; } 55.01%, 100% { opacity: 0; } }

/* ---------- the scrolling notice, a marquee without the marquee tag ---------- */
.crawl {
  overflow: hidden;
  background: var(--olive-dk);
  border-bottom: 4px solid var(--ink);
  padding: 5px 0;
}
.crawl-line {
  margin: 0;
  white-space: nowrap;
  color: var(--glass);
  font-family: "VT323", ui-monospace, monospace;
  font-size: 22px;
  letter-spacing: .04em;
  will-change: transform;
  animation: crawl 34s linear infinite;
}
@keyframes crawl { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* ---------- sheet ---------- */
.page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 12px 0;
}

.rule {
  height: 8px;
  margin: 32px 0;
  background: repeating-linear-gradient(90deg, var(--red) 0 18px, var(--olive) 18px 36px);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

/* ---------- masthead ---------- */
.frame {
  border: 5px ridge var(--red);
  outline: 3px solid var(--ink);
  background: var(--glass);
  padding: 5px;
}
.hall { display: block; width: 100%; height: auto; border: 2px solid var(--ink); }

.word {
  font-family: "Baloo 2", "Comic Sans MS", cursive, sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 13vw, 116px);
  line-height: .95;
  letter-spacing: .02em;
  text-align: center;
  margin: 20px 0 0;
  color: var(--red);
  text-shadow: 4px 4px 0 var(--ink), 8px 8px 0 var(--olive);
}
.sub {
  text-align: center;
  margin: 12px 0 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--olive-dk);
}

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }

.hero-pic { margin: 0; }
.machine {
  display: block;
  width: 100%;
  height: auto;
  border: 5px ridge var(--olive);
  outline: 3px solid var(--ink);
  background: var(--glass);
}
.caption {
  margin: 8px 0 0;
  font-size: 14px;
  text-align: center;
  color: var(--olive-dk);
}

.hero-txt h2 {
  font-family: "Baloo 2", "Comic Sans MS", cursive, sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--ink);
}
.hero-txt p { margin: 0 0 12px; }

.plate {
  background: var(--steel);
  border: 4px ridge var(--steel-dk);
  outline: 2px solid var(--ink);
  padding: 8px 12px;
  font-family: "VT323", ui-monospace, monospace;
  font-size: 22px;
  color: var(--ink);
}
.plate-k {
  display: inline-block;
  background: var(--ink);
  color: var(--glass);
  padding: 0 8px;
  margin-right: 6px;
  font-size: 15px;
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.plate-k + .plate-k { margin-left: 16px; }

.ca-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.ca-lab {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  background: var(--olive);
  color: var(--glass);
  padding: 3px 8px;
  border: 2px solid var(--ink);
}
.ca {
  flex: 1 1 260px;
  min-width: 0;
  text-align: left;
  font-family: "VT323", ui-monospace, monospace;
  font-size: 21px;
  letter-spacing: .02em;
  padding: 7px 10px;
  color: var(--lcd);
  background: var(--lcd-bg);
  border: 4px inset var(--steel);
  outline: 2px solid var(--ink);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ca:hover { color: #d8f7b4; }
.ca.copied { color: var(--yellow); }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 10px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: "Baloo 2", "Comic Sans MS", cursive, sans-serif;
  font-weight: 800;
  font-size: 19px;
  text-decoration: none;
  border: 5px outset;
  outline: 2px solid var(--ink);
}
.btn:active { border-style: inset; }
.buy { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.buy:visited { color: var(--ink); }
.buy:hover { background: #ffe066; }
.x { background: var(--red); border-color: var(--red); color: var(--glass); }
.x:visited { color: var(--glass); }
.x:hover { background: #d9463c; }

/* themed X: two strips of masking tape crossed over each other */
.x-mark { position: relative; display: inline-block; width: 20px; height: 20px; }
.x-mark span {
  position: absolute;
  top: 7px; left: -2px;
  width: 24px; height: 7px;
  background: var(--tape);
  border: 1px solid var(--ink);
}
.x-mark span:first-child { transform: rotate(38deg); }
.x-mark span:last-child { transform: rotate(-38deg); }

.fine { font-size: 13px; color: var(--olive-dk); margin: 6px 0 0; }

/* ---------- section bars ---------- */
.bar {
  font-family: "Baloo 2", "Comic Sans MS", cursive, sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: .04em;
  margin: 0 0 16px;
  padding: 8px 14px;
  color: var(--glass);
  background: var(--red);
  border: 4px outset var(--red-dk);
  outline: 3px solid var(--ink);
}

/* ---------- the selection panel ---------- */
.panel-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 20px;
  background: var(--red);
  border: 6px ridge var(--red-dk);
  outline: 3px solid var(--ink);
  padding: 20px;
}

.keypad-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--glass);
  border: 3px solid var(--ink);
  padding: 12px;
  overflow: hidden;
}
.keypad {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.key {
  font-family: "VT323", ui-monospace, monospace;
  font-size: 24px;
  padding: 12px 0;
  color: var(--ink);
  background: var(--steel);
  border: 5px outset var(--steel-dk);
  cursor: pointer;
}
.key:hover { background: #9c9c9c; }
.key:active, .key.hit { border-style: inset; background: var(--steel-dk); }
.tape {
  position: absolute;
  left: -14px;
  right: -14px;
  height: 34px;
  background: var(--tape);
  border-top: 2px dashed rgba(20,20,20,.55);
  border-bottom: 2px dashed rgba(20,20,20,.55);
  color: rgba(20,20,20,.65);
  font-family: "Baloo 2", "Comic Sans MS", cursive, sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .5em;
  text-align: center;
  line-height: 30px;
  pointer-events: none;
}
/* the strip sits across the gap between the two rows, so the labels stay readable
   and the keypad still reads as taped shut */
.tape-1 { --rot: -2.2deg; top: calc(50% - 17px); transform: rotate(var(--rot)); }
.tape-2 { --rot: 1.6deg; bottom: -18px; transform: rotate(var(--rot)); }
.keypad.shook .tape-1 { animation: shake 260ms steps(2) 2; }
.keypad.shook .tape-2 { animation: shake 260ms steps(2) 2 reverse; }
@keyframes shake {
  0%, 100% { transform: rotate(var(--rot)) translateX(0); }
  50% { transform: rotate(var(--rot)) translateX(6px); }
}
.hint { margin: 34px 0 0; font-size: 13px; text-align: center; color: var(--olive-dk); }

.readout { background: var(--glass); border: 3px solid var(--ink); padding: 12px; }
.lcd {
  margin: 0 0 12px;
  min-height: 92px;
  padding: 10px;
  background: var(--lcd-bg);
  border: 5px inset var(--steel);
  color: var(--lcd);
  font-family: "VT323", ui-monospace, monospace;
  font-size: 23px;
  line-height: 1.15;
}
.meters { margin: 0; display: grid; gap: 4px; }
.meters > div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px dotted var(--steel-dk); padding-bottom: 3px; }
.meters dt { font-size: 13px; text-transform: uppercase; font-weight: 700; }
.meters dd { margin: 0; font-family: "VT323", ui-monospace, monospace; font-size: 22px; }

.slotbox { background: var(--glass); border: 3px solid var(--ink); padding: 12px; }
.slot {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 10px 14px;
  background: var(--steel);
  border: 5px outset var(--steel-dk);
  cursor: pointer;
  font-family: "Baloo 2", "Comic Sans MS", cursive, sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
}
.slot:active { border-style: inset; }
.slot-mouth { display: block; height: 10px; margin: 0 auto 12px; width: 62%; background: var(--ink); }
.slot-lab { display: block; position: relative; z-index: 1; }
/* the marker cross is drawn over the slot itself, not over the wording */
.slot-x { position: absolute; left: 10%; right: 10%; top: 6px; height: 40px; }
.slot-x::before, .slot-x::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 6px;
  background: var(--ink);
}
.slot-x::before { transform: rotate(19deg); }
.slot-x::after { transform: rotate(-19deg); }
.note { font-size: 13px; margin: 10px 0; color: var(--olive-dk); }
.tray {
  position: relative;
  overflow: hidden;
  height: 96px;
  background: var(--steel-dk);
  border: 5px inset var(--steel);
}
.tray-lab {
  margin: 0;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--glass);
  background: var(--ink);
}
.coin {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  opacity: 0;
}
.coin.landed { opacity: 1; }
.coin.drop { animation: drop 620ms ease-in forwards; }
@keyframes drop {
  0% { opacity: 1; transform: translateY(-120px) rotate(0deg); }
  100% { opacity: 1; transform: translateY(0) rotate(196deg); }
}

/* ---------- tables you can see the borders of ---------- */
.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--glass);
  border: 4px ridge var(--olive);
  outline: 3px solid var(--ink);
}
.grid caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 8px;
  font-size: 13px;
  color: var(--olive-dk);
}
.grid th, .grid td { border: 2px solid var(--ink); padding: 7px 10px; text-align: left; vertical-align: top; }
.grid thead th { background: var(--olive); color: var(--glass); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.grid tbody th { background: var(--tape); font-family: "VT323", ui-monospace, monospace; font-size: 22px; width: 1%; white-space: nowrap; }
.grid tbody tr:nth-child(even) td { background: #eceadc; }
.st { font-weight: 700; color: var(--red-dk); text-transform: uppercase; font-size: 14px; }
.log-grid tbody th { font-size: 18px; }

/* ---------- notes ---------- */
.qa {
  margin: 0;
  background: var(--glass);
  border: 4px ridge var(--tape);
  outline: 3px solid var(--ink);
  padding: 16px 20px;
}
.qa dt { font-weight: 700; margin-top: 12px; }
.qa dt:first-child { margin-top: 0; }
.qa dd { margin: 2px 0 0 18px; color: var(--olive-dk); }

/* ---------- footer ---------- */
.foot { margin: 40px 0 0; border-top: 4px double var(--ink); padding: 24px 0 32px; text-align: center; }
.counter { display: inline-block; background: var(--ink); padding: 12px 18px; border: 4px outset var(--steel-dk); }
.counter-lab { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tape); }
.odometer {
  margin: 2px 0 10px;
  font-family: "VT323", ui-monospace, monospace;
  font-size: 34px;
  letter-spacing: .12em;
  color: var(--lcd);
  background: #0c0f08;
  border: 3px inset var(--steel-dk);
  padding: 0 10px;
}
.odometer.dead { margin-bottom: 0; color: #5c7a45; }

.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 0; }
.badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  border: 3px outset;
  text-decoration: none;
}
.b-build { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.b-800 { background: var(--ink); border-color: var(--steel-dk); color: var(--tape); }
.b-tape { background: var(--tape); border-color: var(--tape); color: var(--ink); }
.b-x { background: var(--red); border-color: var(--red); color: var(--glass); }
.b-x:visited { color: var(--glass); }
.b-buy { background: var(--olive); border-color: var(--olive); color: var(--glass); }
.b-buy:visited { color: var(--glass); }
.foot-fine { margin: 20px 0 0; font-size: 12px; color: var(--olive-dk); }

/* ---------- narrow ---------- */
@media (max-width: 900px) {
  .panel-in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .word { text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--olive); }
  .page { padding: 14px 10px 0; }
  .rule { margin: 24px 0; }
  .grid th, .grid td { padding: 6px 7px; font-size: 15px; }
  .grid tbody th { font-size: 19px; }
  .plate-k + .plate-k { margin-left: 0; }
}
@media (max-width: 420px) {
  .keypad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- the jank is a look, not a trap ---------- */
@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
  .crawl { overflow-x: auto; }
  .crawl-line { animation: none; white-space: normal; padding: 0 12px; }
  .keypad.shook .tape-1, .keypad.shook .tape-2 { animation: none; }
  .coin.drop { animation: none; opacity: 1; }
}