/* PLOGGER cabinet — emerald body, lime neon trim, river-blue screen. */
:root {
  --night: #04180e;
  --emerald: #0b4a2c;
  --emerald-deep: #062a19;
  --lime: #58ff7a;
  --lime-soft: #b8ffc6;
  --teal: #16d9b0;
  --river: #1278ff;
  --cyan: #2af0ff;
  --gold: #fff45c;
  --ink: #e6ffe9;
  --pixel: "Press Start 2P", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(88, 255, 122, 0.16), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(18, 120, 255, 0.22), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 2px, transparent 2px 38px),
    var(--night);
  color: var(--ink);
  font-family: var(--pixel);
  -webkit-tap-highlight-color: transparent;
}

.room {
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 16px 40px;
}

/* ---- arcade game switch (same on every cabinet) ---- */
.arcade-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 8px;
  letter-spacing: 0.08em;
}
.arcade-nav a {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 8px;
  color: var(--lime-soft);
  text-decoration: none;
  background: rgba(88, 255, 122, 0.06);
  border: 1px solid rgba(88, 255, 122, 0.3);
}
.arcade-nav a:hover { background: rgba(88, 255, 122, 0.16); }
.arcade-nav a.here {
  color: #032a14;
  background: linear-gradient(180deg, #b8ffc6, var(--lime));
  border-color: #d9ffe0;
  box-shadow: 0 0 14px rgba(88, 255, 122, 0.55);
}

/* ---- cabinet body ---- */
.cab {
  position: relative;
  border-radius: 22px 22px 10px 10px;
  padding: 12px 14px 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 8%, transparent 92%, rgba(0, 0, 0, 0.35)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, #0f5c36, var(--emerald) 30%, var(--emerald-deep));
  border: 2px solid #031a0e;
  box-shadow:
    0 0 0 2px rgba(88, 255, 122, 0.55),
    0 0 26px rgba(88, 255, 122, 0.35),
    0 30px 60px rgba(0, 0, 0, 0.7),
    inset 0 2px 0 rgba(184, 255, 198, 0.25);
}
.cab-side {
  position: absolute;
  top: 18%;
  bottom: 12%;
  width: 7px;
  border-radius: 4px;
  background: repeating-linear-gradient(180deg, var(--lime) 0 10px, var(--cyan) 10px 20px, var(--river) 20px 30px);
  box-shadow: 0 0 10px rgba(88, 255, 122, 0.6);
  opacity: 0.85;
}
.cab-side.left { left: 3px; }
.cab-side.right { right: 3px; }

/* ---- marquee ---- */
.marquee {
  border-radius: 14px;
  padding: 6px 8px;
  background: linear-gradient(180deg, #021008, #063a20);
  border: 2px solid #021008;
  box-shadow: inset 0 0 0 2px rgba(88, 255, 122, 0.25);
}
.bulbs {
  display: flex;
  justify-content: space-between;
  padding: 3px 6px;
}
.bulbs i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, var(--lime) 45%, #0b7a2c);
  box-shadow: 0 0 8px var(--lime);
  animation: chase 1.4s infinite;
}
.bulbs i:nth-child(3n + 2) { animation-delay: 0.45s; }
.bulbs i:nth-child(3n + 3) { animation-delay: 0.9s; }
@keyframes chase {
  0%, 60%, 100% { opacity: 1; }
  30% { opacity: 0.25; box-shadow: none; }
}
.marquee-art {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 10px 6px 12px;
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(18, 120, 255, 0.75), transparent 60%),
    linear-gradient(180deg, #0b6d3a, #0a4d2d 55%, #07335e);
}
.mq-sub {
  font-size: 8px;
  letter-spacing: 0.2em;
  color: #ffb347;
  text-shadow: 0 0 6px rgba(255, 140, 40, 0.8);
}
.mq-title {
  margin: 4px 0 2px;
  font-family: Bungee, var(--pixel);
  font-weight: 400;
  font-size: clamp(38px, 11vw, 60px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #eaffc8;
  background: linear-gradient(180deg, #f4ffe0 0%, var(--lime) 48%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #032a14) drop-shadow(0 0 12px rgba(88, 255, 122, 0.55));
}
.mq-tag {
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--lime-soft);
}
.mq-ripples span {
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 60px;
  height: 20px;
  margin-left: -30px;
  border: 2px solid rgba(42, 240, 255, 0.5);
  border-radius: 50%;
  animation: ripple 3s infinite ease-out;
}
.mq-ripples span:nth-child(2) { animation-delay: 1s; }
.mq-ripples span:nth-child(3) { animation-delay: 2s; }
@keyframes ripple {
  from { transform: scale(0.3); opacity: 0.9; }
  to { transform: scale(7); opacity: 0; }
}

/* ---- bezel + screen ---- */
.bezel {
  position: relative;
  margin: 12px 0;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(145deg, #0a1f14, #020805);
  box-shadow:
    inset 0 0 0 2px rgba(88, 255, 122, 0.25),
    inset 0 8px 20px rgba(0, 0, 0, 0.8),
    0 2px 0 rgba(184, 255, 198, 0.15);
}
.screw {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8f5ea, #7a8a80 55%, #2a3530);
}
.screw::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 3.5px;
  height: 1px;
  background: #1a221e;
  transform: rotate(35deg);
}
.screw.tl { left: 4px; top: 4px; }
.screw.tr { right: 4px; top: 4px; }
.screw.bl { left: 4px; bottom: 4px; }
.screw.br { right: 4px; bottom: 4px; }
.screen {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 2px #000, 0 0 24px rgba(42, 240, 255, 0.25);
}
#plog {
  display: block;
  width: 100%;
  aspect-ratio: 448 / 512;
  touch-action: none;
  outline: none;
}
.scan {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.09) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 65%, rgba(0, 0, 0, 0.45));
  mix-blend-mode: multiply;
}

/* ---- control deck ---- */
.deck {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 18px 10px 20px;
  margin: 0 -14px;
  border-top: 2px solid #021008;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(88, 255, 122, 0.12), transparent 70%),
    linear-gradient(180deg, #11613a, #073a22);
  box-shadow: inset 0 3px 0 rgba(184, 255, 198, 0.2), inset 0 -6px 12px rgba(0, 0, 0, 0.4);
  user-select: none;
  -webkit-user-select: none;
}
.deck-label {
  display: block;
  margin-top: 8px;
  font-size: 7px;
  letter-spacing: 0.16em;
  color: var(--lime-soft);
  text-align: center;
  opacity: 0.8;
}

/* joystick */
.stick-wrap { justify-self: center; }
.stick {
  --size: 124px;
  position: relative;
  width: var(--size);
  height: var(--size);
  touch-action: none;
  cursor: grab;
}
.stick:active { cursor: grabbing; }
.stick-plate {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.14), transparent 50%),
    linear-gradient(145deg, #1a1f22, #050708);
  box-shadow:
    0 0 0 2px #000,
    0 0 0 3px rgba(88, 255, 122, 0.35),
    0 8px 14px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.stick-plate i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f2f6f4, #8a9690 55%, #2c3430);
}
.stick-plate i:nth-child(1) { left: 8px; top: 8px; }
.stick-plate i:nth-child(2) { right: 8px; top: 8px; }
.stick-plate i:nth-child(3) { left: 8px; bottom: 8px; }
.stick-plate i:nth-child(4) { right: 8px; bottom: 8px; }
/* 4-way gate cross, like a real restrictor plate */
.stick-gate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  background:
    linear-gradient(#000, #000) center / 14px 70px no-repeat,
    linear-gradient(#000, #000) center / 70px 14px no-repeat;
  border-radius: 6px;
  opacity: 0.75;
  box-shadow: inset 0 0 6px rgba(88, 255, 122, 0.2);
}
.stick-boot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a4046, #0c0e10 70%);
  box-shadow: 0 0 0 2px #000, inset 0 -3px 6px rgba(0, 0, 0, 0.7);
}
.stick-shaft {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 12px;
  margin-top: -6px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  border-radius: 6px;
  background: linear-gradient(180deg, #f4f7f9, #9aa4ab 45%, #4a535a);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.stick-ball {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #ffffff 0 7%, rgba(255, 255, 255, 0.55) 12%, transparent 30%),
    radial-gradient(circle at 50% 55%, #7dff92 0%, #22d552 40%, #0a8a33 72%, #03461a 100%);
  box-shadow:
    0 10px 16px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(88, 255, 122, 0.55),
    inset 0 -6px 10px rgba(0, 60, 20, 0.6);
  pointer-events: none;
}
.stick.tilted .stick-ball {
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(88, 255, 122, 0.85),
    inset 0 -6px 10px rgba(0, 60, 20, 0.6);
}

/* middle pills */
.deck-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 96px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 17px;
  font-family: var(--pixel);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #eaffef;
  cursor: pointer;
  background: linear-gradient(180deg, #2a3a33, #0d1512);
  box-shadow: 0 0 0 2px #000, 0 4px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.2);
  touch-action: manipulation;
}
.pill.down { transform: translateY(3px); box-shadow: 0 0 0 2px #000, 0 1px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.pill .led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
}
#btn-sound.off .led { background: #3a1a1a; box-shadow: none; }
#btn-pause .led { background: #3a3a1a; box-shadow: none; }
#btn-pause.on .led { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.credit {
  font-size: 7px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-shadow: 0 0 6px rgba(255, 244, 92, 0.6);
  animation: blink 1.2s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.35; } }
.credit-btn {
  font-family: inherit;
  background: none;
  border: 1px dashed rgba(255, 244, 92, 0.45);
  border-radius: 6px;
  padding: 4px 6px;
  max-width: 132px;
  line-height: 1.6;
  cursor: pointer;
}
.credit-btn.is-paid { color: #7cff6a; border-color: rgba(124, 255, 106, 0.6); animation: none; }
.credit-btn:disabled { cursor: default; animation: none; }

/* big start button */
.start-wrap { justify-self: center; text-align: center; }
.big-btn {
  position: relative;
  width: 96px;
  height: 96px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  touch-action: manipulation;
}
.big-btn .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #d7dde2, #59636b);
  box-shadow: 0 0 0 2px #000, 0 8px 12px rgba(0, 0, 0, 0.6);
}
.big-btn .cap {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #eaffff;
  text-shadow: 0 2px 0 rgba(0, 40, 80, 0.8);
  background:
    radial-gradient(circle at 34% 28%, #ffffff 0 6%, rgba(255, 255, 255, 0.5) 12%, transparent 32%),
    radial-gradient(circle at 50% 60%, #7ff0ff 0%, #22b8ff 40%, #0a64c8 75%, #06357a 100%);
  box-shadow:
    0 6px 0 #042a5c,
    0 0 20px rgba(42, 240, 255, 0.55),
    inset 0 -6px 10px rgba(0, 30, 90, 0.5);
  transition: transform 0.06s, box-shadow 0.06s;
  animation: glow 1.6s ease-in-out infinite;
}
.big-btn.down .cap {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 #042a5c,
    0 0 30px rgba(42, 240, 255, 0.9),
    inset 0 -3px 8px rgba(0, 30, 90, 0.5);
}
@keyframes glow {
  50% { filter: brightness(1.15); }
}

/* ---- kick panel ---- */
.kick {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 -14px;
  padding: 14px 20px 16px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #062a19, #031a0e);
}
.vents { display: flex; gap: 5px; }
.vents span {
  width: 6px;
  height: 26px;
  border-radius: 3px;
  background: #010a05;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(184, 255, 198, 0.12);
}
.kick-plate {
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #031a0e;
  padding: 7px 10px;
  border-radius: 4px;
  background: linear-gradient(180deg, #d9ffe0, #6ee68a);
  box-shadow: 0 0 0 1px #021008, 0 0 10px rgba(88, 255, 122, 0.45);
}

/* ---- play as your own NFT ---- */
.mine {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(88, 255, 122, 0.06);
  border: 1px solid rgba(88, 255, 122, 0.3);
}
.mine-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mine-title { font-size: 9px; letter-spacing: 0.1em; color: var(--lime); }
.mine-note {
  margin: 6px 0 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: #bfe8c9;
}
.mine-btn { flex: none; }
.mine-form { display: flex; gap: 8px; margin-top: 10px; }
.mine-form[hidden] { display: none; }
.mine-form input {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(88, 255, 122, 0.4);
  background: #021008;
  color: var(--ink);
  font: 12px ui-monospace, monospace;
}

.how {
  margin: 18px 4px 8px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #bfe8c9;
}
.credit-line {
  margin: 0 4px;
  font-size: 7px;
  line-height: 1.6;
  color: #7fb08c;
}
.credit-line a { color: var(--lime); }

@media (max-width: 420px) {
  .room { padding: 10px 10px 30px; }
  .cab { padding: 10px 10px 0; }
  .deck, .kick { margin: 0 -10px; }
  .bezel { padding: 10px; }
  .stick { --size: 108px; }
  .stick-ball { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .big-btn { width: 84px; height: 84px; }
  .pill { min-width: 84px; height: 30px; font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .bulbs i, .credit, .big-btn .cap, .mq-ripples span { animation: none; }
}

/* Phones: the whole cabinet fits the screen. Compact sign, slimmer deck;
   js/phonefit.js narrows the board if the deck would still fall off. */
@media (max-width: 600px), (max-height: 940px) {
  .room { padding: 6px 6px 24px; }
  .arcade-nav { margin-bottom: 6px; }
  .cab { padding: 6px 8px 0; }
  .marquee-art { padding-top: 4px; padding-bottom: 4px; }
  .mq-sub, .mq-tag, .mq-ripples { display: none; }
  .mq-title { font-size: 26px; margin: 0; }
  .bezel { padding: 6px; }
  .deck, .kick { margin: 0 -8px; }
  .deck { padding: 8px 8px 10px; }
  .kick { display: none; }
  .stick { --size: 96px; }
  .stick-ball { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .big-btn { width: 72px; height: 72px; }
  .pill { min-width: 78px; height: 28px; font-size: 7px; }
}

/* Four tabs (three games + PRIZES) fit a phone. */
@media (max-width: 600px) {
  .arcade-nav { gap: 4px; }
  .arcade-nav a { padding: 9px 2px; font-size: 7px; letter-spacing: 0; white-space: nowrap; }
}

/* Very short screens (a laptop at 150% scaling, the smallest phones): slimmer
   tabs, sign and deck so START, the joystick and the paid-play button fit. */
@media (max-height: 640px) {
  .arcade-nav a { padding-top: 6px; padding-bottom: 6px; }
  .marquee .bulbs { display: none; }
  .mq-title { font-size: 20px; }
  .bezel { margin-top: 6px; margin-bottom: 6px; }
  .deck { padding: 4px 8px 6px; }
  .stick { --size: 84px; }
  .stick-ball { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .big-btn { width: 60px; height: 60px; }
}

/* PC (760px and wider): the deck flanks the screen instead of sitting under
   it, so the screen grows into the height it frees. START, PAUSE, SOUND and
   the paid-play button on the left; the joystick on the right. */
@media (min-width: 760px) {
  .room { max-width: 940px; }
  .cab {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto 1fr 1fr;
    column-gap: 22px;
    padding-bottom: 14px;
  }
  .cab > .marquee { grid-column: 1 / -1; }
  .cab > .kick { display: none; }
  .bezel { grid-column: 2; grid-row: 2 / 4; }
  .screen { width: min(560px, 56vw); }
  .deck { display: contents; }
  .start-wrap { grid-column: 1; grid-row: 2; align-self: end; justify-self: center; margin-bottom: 10px; }
  .deck-mid { grid-column: 1; grid-row: 3; align-self: start; justify-self: center; }
  .stick-wrap { grid-column: 3; grid-row: 2 / 4; align-self: center; justify-self: center; text-align: center; }
}