:root {
  --pink: #e8177d;
  --magenta: #a3157f;
  --plum: #2a0f3d;
  --plum2: #3d1657;
  --cyan: #3fe6ee;
  --mint: #a2f9b3;
  --mint2: #6fd98e;
  --sky: #cdb4f5;
  --sky2: #f2b8d8;
  --red: #ee2d45;
  --blue: #2f7df2;
  --orange: #f7a428;
  --grass: #6cd13a;
  --grass2: #3f9a2a;
  --dirt: #9a5a32;
  --dirt2: #6b3a22;
  --water: #8ff0ff;
  --cream: #fff6e8;
  --px: 4px;
  --display: "Silkscreen", monospace;
  --text: "Pixelify Sans", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.5;
  color: var(--plum);
  background: var(--mint);
  overflow-x: hidden;
  -webkit-font-smoothing: none;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
kbd {
  font-family: var(--display);
  font-size: .72em;
  padding: 1px 6px;
  background: var(--cream);
  border: 2px solid var(--plum);
  box-shadow: 0 3px 0 var(--plum);
  white-space: nowrap;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: .02em; line-height: 1.05; }
#spill { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; image-rendering: pixelated; }

/* ---------- HUD ---------- */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px clamp(12px, 3vw, 32px);
  background: var(--plum);
  border-bottom: 4px solid var(--cyan);
  box-shadow: 0 4px 0 var(--magenta);
  color: var(--cream);
  font-family: var(--display);
}
.hud-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 20px; color: var(--cream); }
.hud-logo img { width: 32px; height: 32px; image-rendering: pixelated; border: 2px solid var(--cyan); }
.hud-score { font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.hud-score .lbl { color: var(--pink); }
.hud-score .lbl:first-child { animation: blink 1s steps(1) infinite; }
.hud-score b { color: var(--cream); min-width: 6ch; }
.hud-play {
  font-weight: 700; text-decoration: none; padding: 6px 14px;
  background: var(--orange); color: var(--plum); border: 3px solid var(--cream);
  box-shadow: 0 4px 0 #a35c00; transition: transform .08s steps(2);
}
.hud-play:hover { transform: translateY(-2px); }
.hud-play:active { transform: translateY(3px); box-shadow: 0 1px 0 #a35c00; }

/* ---------- ROOM ---------- */
.room {
  position: relative;
  min-height: min(100vh, 980px);
  padding: 96px clamp(16px, 4vw, 64px) 40px;
  background:
    repeating-linear-gradient(90deg, rgba(42,15,61,.05) 0 2px, transparent 2px 48px),
    var(--mint);
  overflow: hidden;
}
.room-stage {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 4vw, 56px);
}
.cab-wrap { position: relative; }
.cab { width: 100%; max-width: 620px; image-rendering: pixelated; animation: hum 3.2s ease-in-out infinite; }
.cab-pour { position: absolute; left: 62%; top: 86%; width: 30px; height: 40vh; pointer-events: none; }
.cab-pour i { position: absolute; width: 8px; height: 8px; background: var(--water); box-shadow: 0 0 0 2px #46c6e0; animation: drop 1.6s linear infinite; }
.cab-pour i:nth-child(2) { left: 14px; animation-delay: .5s; }
.cab-pour i:nth-child(3) { left: 6px; animation-delay: 1.05s; background: var(--cyan); }
.room-copy { position: relative; z-index: 2; }
.stage-tag {
  display: inline-block; margin: 0 0 14px;
  font-family: var(--display); font-size: 13px; letter-spacing: .08em;
  padding: 4px 10px; background: var(--plum); color: var(--cyan);
}
.marquee { font-size: clamp(54px, 7.4vw, 112px); color: var(--pink); white-space: nowrap; }
.marquee span {
  display: inline-block;
  text-shadow:
    4px 4px 0 var(--cyan), 8px 8px 0 var(--plum),
    -2px -2px 0 var(--cream);
  animation: marquee 2.4s steps(4) infinite;
}
.ticker-line { font-family: var(--display); font-size: 22px; margin: 10px 0 18px; color: var(--magenta); letter-spacing: .1em; }
.room-lead { font-size: clamp(18px, 1.6vw, 22px); max-width: 34ch; margin: 0 0 10px; }
.room-lead.strong { font-weight: 700; color: var(--magenta); }
.coin-btn {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 16px;
  font: 700 22px var(--display); color: var(--cream);
  background: var(--plum); border: 4px solid var(--cyan); padding: 14px 22px 14px 14px;
  box-shadow: 6px 6px 0 var(--magenta); cursor: pointer;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.coin-btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--magenta); }
.coin-btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--magenta); }
.coin-btn:focus-visible, .pad:focus-visible, .ca-copy:focus-visible, .icons a:focus-visible { outline: 4px dashed var(--orange); outline-offset: 4px; }
.coin-txt { animation: blink 1.1s steps(1) infinite; }
.coin-slot {
  position: relative; width: 40px; height: 52px; background: #1a0828; border: 3px solid var(--orange);
  display: grid; place-items: center; overflow: hidden;
}
.coin-slot::before { content: ""; width: 6px; height: 30px; background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.coin { position: absolute; top: -30px; width: 22px; height: 22px; background: #ffd23f; border: 3px solid #c47a00; border-radius: 0; box-shadow: inset -3px -3px 0 #f0a000; }
.coin-btn.dropping .coin { animation: coin-in .5s steps(6) forwards; }
.hint { font-size: 14px; margin: 12px 0 0; opacity: .75; }
.glass-crack {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background:
    linear-gradient(180deg, transparent 0 50%, var(--sky) 50%),
    var(--mint);
  clip-path: polygon(0 50%, 6% 50%, 6% 25%, 12% 25%, 12% 60%, 20% 60%, 20% 35%, 28% 35%, 28% 55%, 36% 55%, 36% 20%, 44% 20%, 44% 50%, 52% 50%, 52% 30%, 60% 30%, 60% 62%, 68% 62%, 68% 28%, 76% 28%, 76% 48%, 84% 48%, 84% 22%, 92% 22%, 92% 52%, 100% 52%, 100% 100%, 0 100%);
  background: var(--sky);
}

/* ---------- WORLD ---------- */
.world {
  position: relative;
  padding: 40px clamp(14px, 4vw, 64px) 120px;
  background:
    linear-gradient(180deg, var(--sky) 0%, #dcc4f7 30%, var(--sky2) 70%, #ffd1a6 100%);
  overflow: hidden;
}
.world::before { /* dither band */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.7) 1px, transparent 1.5px);
  background-size: 8px 8px;
}
.falls { position: absolute; top: 0; bottom: 0; left: 50%; width: 56px; margin-left: -28px; overflow: hidden; z-index: 0; }
.falls::before, .falls::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; background: #46c6e0; }
.falls::before { left: 0; } .falls::after { right: 0; }
.falls-water {
  position: absolute; left: 0; right: 0; top: -200px; height: calc(100% + 200px);
  background:
    repeating-linear-gradient(180deg, var(--water) 0 22px, #c9faff 22px 30px, #6fe0f5 30px 50px, var(--water) 50px 66px, #ffffff 66px 70px, #6fe0f5 70px 100px);
  background-size: 100% 100px;
  animation: fall 0.9s linear infinite;
  opacity: .9;
}
.clouds i {
  position: absolute; width: 96px; height: 24px; background: #fff; opacity: .85;
  box-shadow: 24px -16px 0 #fff, 48px -16px 0 #fff, 48px -32px 0 #fff, 72px -8px 0 #fff, 0 8px 0 #f1e3ff, 24px 8px 0 #f1e3ff, 48px 8px 0 #f1e3ff, 72px 8px 0 #f1e3ff;
  animation: drift 40s linear infinite;
}
.clouds i:nth-child(1) { top: 6%; left: -10%; }
.clouds i:nth-child(2) { top: 24%; left: 40%; animation-duration: 55s; animation-delay: -20s; transform: scale(.7); }
.clouds i:nth-child(3) { top: 46%; left: 10%; animation-duration: 48s; animation-delay: -10s; }
.clouds i:nth-child(4) { top: 66%; left: 70%; animation-duration: 62s; animation-delay: -30s; }
.clouds i:nth-child(5) { top: 86%; left: 25%; animation-duration: 44s; animation-delay: -5s; }

.isle { position: relative; z-index: 1; max-width: 760px; margin: 0 auto 120px; }
.isle-l { margin-left: max(0px, calc(50% - 640px)); }
.isle-r { margin-right: max(0px, calc(50% - 640px)); }
.isle-c { max-width: 980px; }
.isle .panel, .cabinet { animation: bob 6s ease-in-out infinite; }
.isle-r .panel { animation-delay: -2s; }
.isle-l:nth-of-type(4) .panel { animation-delay: -4s; }
.panel {
  position: relative;
  background: var(--cream);
  border: 4px solid var(--plum);
  padding: 32px clamp(18px, 3vw, 40px) 28px;
  box-shadow: 8px 8px 0 rgba(42,15,61,.25);
}
.panel::before { /* grass top */
  content: ""; position: absolute; left: -4px; right: -4px; top: -22px; height: 22px;
  background:
    linear-gradient(180deg, transparent 0 8px, var(--grass) 8px 16px, var(--grass2) 16px),
    linear-gradient(90deg, transparent 0 4%, var(--grass) 4% 7%, transparent 7% 18%, var(--grass) 18% 20%, transparent 20% 41%, var(--grass) 41% 44%, transparent 44% 63%, var(--grass) 63% 65%, transparent 65% 84%, var(--grass) 84% 87%, transparent 87%);
  border: 4px solid var(--plum); border-bottom: 0;
  background-clip: padding-box;
}
.panel h2 { font-size: clamp(28px, 4vw, 44px); color: var(--magenta); margin-bottom: 16px; text-shadow: 3px 3px 0 var(--cyan); }
.panel p { margin: 0 0 14px; max-width: 60ch; }
.callout {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  display: inline-block; background: var(--pink); color: var(--cream);
  padding: 8px 12px; margin-top: 6px !important; box-shadow: 4px 4px 0 var(--plum);
}
.rock {
  position: relative; height: 120px; width: 70%; margin: 0 auto;
  background: linear-gradient(180deg, var(--dirt) 0 40%, var(--dirt2) 40%);
  clip-path: polygon(0 0, 100% 0, 100% 18%, 92% 18%, 92% 38%, 82% 38%, 82% 56%, 70% 56%, 70% 72%, 58% 72%, 58% 88%, 48% 88%, 48% 100%, 40% 100%, 40% 84%, 30% 84%, 30% 66%, 18% 66%, 18% 46%, 8% 46%, 8% 24%, 0 24%);
}
.rock-wide { width: 56%; }
.drip { position: absolute; top: 0; left: 88%; width: 14px; height: 100%; background: repeating-linear-gradient(180deg, var(--water) 0 12px, #fff 12px 16px); opacity: .9; }
.drip.d2 { left: 12%; }

/* ---------- CABINET (game) ---------- */
.cabinet {
  background: var(--pink);
  border: 4px solid var(--plum);
  box-shadow: inset 0 0 0 6px var(--cyan), inset 0 0 0 10px var(--magenta), 10px 10px 0 rgba(42,15,61,.3);
  padding: 18px 18px 14px;
}
.cab-marquee {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--plum); color: var(--cream); padding: 10px 16px; border: 4px solid var(--cyan);
  font-family: var(--display); margin-bottom: 14px;
}
.cab-marquee span { font-size: 30px; font-weight: 700; color: var(--pink); text-shadow: 2px 2px 0 var(--cyan); }
.cab-marquee small { font-size: 12px; color: var(--cyan); letter-spacing: .08em; }
.bezel {
  position: relative; background: #12051c; border: 8px solid #12051c;
  box-shadow: 0 0 0 4px var(--plum), inset 0 0 0 2px #000;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
#game { width: 100%; height: 100%; image-rendering: pixelated; display: block; touch-action: manipulation; cursor: pointer; }
.scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0,0,0,.12) 0 2px, transparent 2px 4px); }
.panel-deck {
  margin-top: 14px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  background: linear-gradient(180deg, #f2338f, var(--magenta)); border: 4px solid var(--plum); padding: 14px 18px;
}
.stick { position: relative; width: 64px; height: 74px; }
.stick-base { position: absolute; bottom: 0; left: 8px; width: 48px; height: 16px; background: #1a0828; border: 3px solid #000; }
.stick-ball { position: absolute; left: 20px; top: 0; width: 24px; height: 56px; transform-origin: 50% 100%; transition: transform .08s; }
.stick-ball::before { content: ""; position: absolute; left: 9px; top: 18px; width: 6px; height: 38px; background: #333; }
.stick-ball::after { content: ""; position: absolute; left: -4px; top: 0; width: 32px; height: 28px; background: var(--red); border: 3px solid #7a0e1d; box-shadow: inset 4px 4px 0 #ff8a96; }
.stick.up .stick-ball { transform: translateY(-4px); }
.stick.right .stick-ball { transform: rotate(18deg); }
.deck-mid { display: flex; gap: clamp(10px, 3vw, 28px); justify-content: center; flex-wrap: wrap; font-family: var(--display); color: var(--cream); }
.deck-read { margin: 0; display: flex; flex-direction: column; align-items: center; font-size: 12px; }
.deck-read span { color: var(--cyan); }
.deck-read b { font-size: 20px; color: var(--cream); background: #12051c; padding: 2px 8px; min-width: 4ch; text-align: center; }
.btns { display: flex; gap: 14px; }
.pad {
  width: 74px; height: 74px; border-radius: 50%; border: 4px solid var(--plum); cursor: pointer;
  font: 700 12px var(--display); color: var(--cream); touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform .06s, box-shadow .06s;
}
.pad span { text-shadow: 2px 2px 0 rgba(0,0,0,.4); }
.pad-blue { background: radial-gradient(circle at 35% 30%, #8cbcff 0 18%, var(--blue) 19%); box-shadow: 0 7px 0 #123f8a; }
.pad-orange { background: radial-gradient(circle at 35% 30%, #ffd58c 0 18%, var(--orange) 19%); box-shadow: 0 7px 0 #a35c00; }
.pad:hover { filter: brightness(1.08); }
.pad:active, .pad.held { transform: translateY(6px); box-shadow: 0 1px 0 var(--plum); }
.cab-foot { margin-top: 12px; text-align: center; font-size: 15px; color: var(--cream); }
.cab-foot p { margin: 4px 0; }
.cab-foot kbd { color: var(--plum); }
.touch-only { display: none; }
@media (hover: none) { .touch-only { display: block; } }

/* ---------- CAST ---------- */
.cast { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8px; }
.char { background: #fff; border: 4px solid var(--plum); padding: 14px; box-shadow: 5px 5px 0 var(--cyan); transition: transform .12s steps(3); }
.char:hover { transform: translateY(-6px) rotate(-1deg); }
.char-pic { aspect-ratio: 1; background: var(--mint); border: 3px solid var(--plum); display: grid; place-items: center; overflow: hidden; margin-bottom: 12px; }
.char-pic img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.char-pixel { background: linear-gradient(180deg, var(--sky) 0 62%, var(--grass) 62% 70%, var(--dirt) 70%); }
.char-pixel canvas { width: 70%; image-rendering: pixelated; }
.char h3 { font-size: 26px; color: var(--pink); margin-bottom: 6px; }
.char p { font-size: 16px; margin: 0; }

/* ---------- MANUAL ---------- */
.moves { list-style: none; padding: 0; margin: 0 0 16px; counter-reset: m; display: grid; gap: 10px; }
.moves li { counter-increment: m; display: grid; grid-template-columns: 52px 110px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 3px dotted rgba(42,15,61,.3); }
.moves li::before { content: counter(m, decimal-leading-zero); font-family: var(--display); color: var(--cyan); background: var(--plum); text-align: center; padding: 2px 0; }
.moves b { font-family: var(--display); color: var(--magenta); }

/* ---------- FLOOR ---------- */
.floor {
  position: relative;
  background:
    repeating-linear-gradient(90deg, rgba(42,15,61,.06) 0 2px, transparent 2px 48px),
    var(--mint);
  border-top: 8px solid var(--mint2);
  padding: 56px clamp(16px, 4vw, 64px) 40px;
}
.splash { position: absolute; left: 50%; top: -30px; width: 160px; margin-left: -80px; height: 30px; background:
  radial-gradient(circle at 10% 100%, var(--water) 0 8px, transparent 9px),
  radial-gradient(circle at 30% 60%, #fff 0 6px, transparent 7px),
  radial-gradient(circle at 50% 100%, var(--water) 0 14px, transparent 15px),
  radial-gradient(circle at 72% 50%, #fff 0 5px, transparent 6px),
  radial-gradient(circle at 90% 100%, var(--water) 0 8px, transparent 9px);
  animation: splash 0.6s steps(2) infinite;
}
.floor-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.floor-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--magenta); }
.floor-logo img { width: 72px; height: 72px; border: 4px solid var(--plum); image-rendering: pixelated; }
.floor-logo small { display: block; font-size: 14px; color: var(--plum); }
.ca {
  display: flex; align-items: center; gap: 10px; min-width: min(100%, 360px);
  background: var(--plum); color: var(--cream); padding: 10px 12px; border: 4px solid var(--orange);
}
.ca-lbl { font-family: var(--display); font-weight: 700; background: var(--orange); color: var(--plum); padding: 2px 8px; }
.ca-val { flex: 1; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; min-height: 1em; }
.ca-copy { font: 700 12px var(--display); background: var(--cyan); color: var(--plum); border: 3px solid var(--cream); padding: 4px 8px; cursor: pointer; }
.ca-copy.copied { background: var(--grass); }
.ca-scan svg { width: 22px; height: 22px; display: block; }
.icons { display: flex; gap: 12px; }
.icons a {
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--pink); border: 4px solid var(--plum); box-shadow: 4px 4px 0 var(--plum);
  color: var(--cream); transition: transform .08s steps(2), box-shadow .08s steps(2), background .1s;
}
.icons a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--plum); background: var(--magenta); }
.icons a:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--plum); }
.icons svg { width: 26px; height: 26px; }
.floor-end { text-align: center; font-family: var(--display); margin: 44px 0 0; font-size: 16px; }
.blink { color: var(--pink); animation: blink 1s steps(1) infinite; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(48px); transition: opacity .5s steps(5), transform .5s steps(5); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- motion ---------- */
@keyframes blink { 50% { opacity: 0; } }
@keyframes hum { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes marquee { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, 2px); } 50% { transform: translate(2px, -2px); } 75% { transform: translate(0, 2px); } }
@keyframes drop { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(40vh); opacity: 0; } }
@keyframes fall { to { transform: translateY(100px); } }
@keyframes drift { from { transform: translateX(-20vw); } to { transform: translateX(120vw); } }
@keyframes coin-in { 0% { transform: translateY(0); } 100% { transform: translateY(46px); opacity: 0; } }
@keyframes splash { 50% { transform: translateY(-4px) scaleX(1.05); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  body { font-size: 17px; }
  .room { padding-top: 84px; }
  .room-stage { grid-template-columns: 1fr; }
  .cab { max-width: 400px; margin: 0 auto; }
  .cab-pour { display: none; }
  .room-copy { text-align: center; }
  .room-lead { margin-left: auto; margin-right: auto; }
  .hud-score .lbl:nth-of-type(2), .hud-score b:nth-of-type(2) { display: none; }
  .cast { grid-template-columns: 1fr; }
  .panel-deck { grid-template-columns: auto 1fr; }
  .panel-deck .deck-mid { grid-column: 1 / -1; order: -1; }
  .btns { justify-self: end; }
  .moves li { grid-template-columns: 40px 1fr; }
  .moves li span { grid-column: 2; }
  .isle { margin-bottom: 90px; }
  .cabinet { padding: 10px 10px 10px; }
  .cab-marquee span { font-size: 22px; }
  .floor-inner { flex-direction: column; align-items: stretch; }
  .icons { justify-content: center; }
}
@media (max-width: 420px) {
  .hud-logo span { display: none; }
  .hud-score { font-size: 12px; }
}
.vista { margin: 18px -8px 0; border: 4px solid var(--plum); box-shadow: 6px 6px 0 var(--cyan); overflow: hidden; }
.vista img { width: 100%; image-rendering: pixelated; transition: transform 1.2s ease-out; }
.vista:hover img { transform: scale(1.04); }
.world { background-image: linear-gradient(180deg, rgba(205,180,245,.92) 0%, rgba(220,196,247,.9) 30%, rgba(242,184,216,.9) 70%, rgba(255,209,166,.92) 100%), url(/assets/texture.webp); background-size: auto, 256px 256px; }
.slogan { font-family: var(--display); font-size: 16px; color: var(--plum); border-left: 6px solid var(--cyan); padding: 4px 0 4px 12px; }