/* UGLY RUN — voxel-art UI: pixel fonts, hard 4px edges, block shadows, notched corners. */
:root {
  --green: #00c805;
  --neon: #39ff14;
  --gold: #ffd166;
  --bg: #07090d;
  --panel: #0b0e14;
  --panel2: #141821;
  --ink: #f4f4f4;
  --muted: #8b93a3;
  --edge: #000;
  --px: 4px;
  --notch: polygon(0 12px, 12px 12px, 12px 0, calc(100% - 12px) 0, calc(100% - 12px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 12px), 0 calc(100% - 12px));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: 'VT323', 'Courier New', monospace; font-size: 20px; overflow: hidden; -webkit-user-select: none; user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
.screen { position: absolute; inset: 0; }
.screen.center { display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; overscroll-behavior: contain; background: repeating-linear-gradient(0deg, rgba(0, 200, 5, 0.04) 0 2px, transparent 2px 6px), radial-gradient(ellipse at 50% 30%, rgba(0, 200, 5, 0.14), rgba(7, 9, 13, 0.75) 60%); pointer-events: auto; }
[hidden] { display: none !important; }

.px { font-family: 'Press Start 2P', 'VT323', monospace; }
h2 { font-family: 'Press Start 2P', monospace; font-size: 26px; margin: 4px 0 14px; color: var(--neon); text-shadow: 4px 4px 0 #063d10, 0 0 18px rgba(57, 255, 20, 0.55); letter-spacing: 1px; line-height: 1.3; }
h2.gold-text { color: var(--gold); text-shadow: 4px 4px 0 #5a3d00, 0 0 18px rgba(255, 209, 102, 0.5); }

.card { background: var(--panel); border: var(--px) solid var(--green); padding: 22px; width: min(560px, 100%); text-align: center; clip-path: var(--notch); box-shadow: inset 0 0 0 4px #062b0c; margin: auto; flex: none; position: relative; }
/* The screen scrolls, not the card: the dashed frame (::after) and the notch must span the whole card, even when the list is taller than the viewport. */
.card::after { content: ''; position: absolute; inset: 8px; border: 2px dashed rgba(0, 200, 5, 0.18); pointer-events: none; }
.menu-card { width: min(470px, 100%); padding: 18px 22px; }
.wordmark { width: min(280px, 70%); filter: drop-shadow(0 0 10px rgba(57, 255, 20, 0.8)) drop-shadow(0 0 30px rgba(0, 200, 5, 0.45)); animation: breathe 3.2s ease-in-out infinite; }
.wordmark.small { width: 160px; }
@keyframes breathe { 0%, 100% { filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.7)) drop-shadow(0 0 26px rgba(0, 200, 5, 0.35)); } 50% { filter: drop-shadow(0 0 14px rgba(57, 255, 20, 1)) drop-shadow(0 0 40px rgba(0, 200, 5, 0.6)); } }
.tagline { font-family: 'Press Start 2P', monospace; font-size: 34px; margin: -2px 0 6px; color: #fff; text-shadow: 4px 4px 0 var(--green), 8px 8px 0 #063d10; }
.hero { width: 150px; margin: 0 auto; display: block; image-rendering: pixelated; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.6)); }
.pitch { margin: 8px 0 12px; color: var(--muted); font-size: 18px; letter-spacing: 0.5px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 12px 0; }

button { pointer-events: auto; cursor: pointer; font-family: 'Press Start 2P', monospace; font-size: 11px; line-height: 1; letter-spacing: 0.5px; border-radius: 0; padding: 14px 16px; border: var(--px) solid var(--edge); background: var(--panel2); color: var(--ink); box-shadow: 4px 4px 0 var(--edge), inset -4px -4px 0 rgba(0, 0, 0, 0.45), inset 4px 4px 0 rgba(255, 255, 255, 0.08); transition: none; }
button:hover { background: #1c2230; filter: brightness(1.1); }
button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--edge), inset -4px -4px 0 rgba(0, 0, 0, 0.45), inset 4px 4px 0 rgba(255, 255, 255, 0.08); }
button.primary { background: var(--green); color: #04110a; box-shadow: 4px 4px 0 #063d10, inset -4px -4px 0 rgba(0, 0, 0, 0.3), inset 4px 4px 0 rgba(255, 255, 255, 0.28); }
button.primary:hover { background: #12d915; }
button.primary:active { box-shadow: 0 0 0 #063d10, inset -4px -4px 0 rgba(0, 0, 0, 0.3), inset 4px 4px 0 rgba(255, 255, 255, 0.28); }
button.gold { background: var(--gold); color: #2a1a00; box-shadow: 4px 4px 0 #5a3d00, inset -4px -4px 0 rgba(0, 0, 0, 0.25), inset 4px 4px 0 rgba(255, 255, 255, 0.35); }
button.gold:hover { background: #ffdd85; }
button.x { background: #000; color: #fff; }
button.on { outline: 4px solid var(--neon); outline-offset: -4px; }
button:disabled { opacity: 0.55; cursor: default; }
input, textarea { pointer-events: auto; font-family: 'VT323', monospace; font-size: 22px; padding: 10px 14px; border-radius: 0; border: var(--px) solid var(--edge); background: #05070a; color: var(--ink); min-width: 0; box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.6), 0 0 0 2px #1d2430; }
input:focus, textarea:focus { outline: none; box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.6), 0 0 0 4px var(--green); }
input::placeholder, textarea::placeholder { color: #4b5261; text-transform: uppercase; }
.row { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 10px 0; }
.row.wrap { flex-wrap: wrap; }
.row input { flex: 1; }
.row textarea { flex: 1; resize: none; font-size: 14px; }
.controls { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 16px; color: var(--muted); margin: 8px 0; }
.controls b { color: var(--neon); font-family: 'Press Start 2P', monospace; font-size: 9px; }
.quality { display: flex; gap: 16px; justify-content: center; font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--muted); margin: 10px 0 2px; }
.quality label { pointer-events: auto; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.quality input { accent-color: var(--green); width: 16px; height: 16px; }
.quality input[type=range] { width: 96px; height: 18px; accent-color: var(--gold); vertical-align: middle; }
.foot { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--muted); margin-top: 12px; }
.muted { color: var(--muted); font-size: 17px; }
.muted.small { font-size: 15px; }
.lbl { font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: 1px; color: var(--muted); }
.badge { display: inline-block; margin: 2px 0 6px; padding: 6px 10px; border: 4px solid var(--gold); color: var(--gold); font-family: 'Press Start 2P', monospace; font-size: 9px; background: #1a1200; }

/* HUD */
#hud { padding: max(14px, env(safe-area-inset-top)) 18px; display: flex; justify-content: space-between; align-items: flex-start; }
.hud-left, .hud-right { display: flex; flex-direction: column; gap: 6px; }
.hud-right { align-items: flex-end; }
.stat { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.val { font-family: 'Press Start 2P', monospace; font-size: 26px; color: #fff; text-shadow: 4px 4px 0 #063d10, 0 0 12px rgba(57, 255, 20, 0.5); }
.stat.small .val { font-size: 14px; color: var(--neon); text-shadow: 3px 3px 0 #063d10; }
.stat.small.gold .val { color: var(--gold); text-shadow: 3px 3px 0 #5a3d00; }
#hearts { display: flex; gap: 6px; }
#hearts .h { width: 28px; height: 24px; image-rendering: pixelated; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'><rect x='1' y='0' width='2' height='1' fill='%23ff3d62'/><rect x='4' y='0' width='2' height='1' fill='%23ff3d62'/><rect x='0' y='1' width='7' height='2' fill='%23ff3d62'/><rect x='1' y='3' width='5' height='1' fill='%23ff3d62'/><rect x='2' y='4' width='3' height='1' fill='%23ff3d62'/><rect x='3' y='5' width='1' height='1' fill='%23ff3d62'/><rect x='1' y='1' width='1' height='1' fill='%23ff8fab'/></svg>"); filter: drop-shadow(3px 3px 0 #000); }
#hearts .h.off { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'><rect x='1' y='0' width='2' height='1' fill='%232a2d36'/><rect x='4' y='0' width='2' height='1' fill='%232a2d36'/><rect x='0' y='1' width='7' height='2' fill='%232a2d36'/><rect x='1' y='3' width='5' height='1' fill='%232a2d36'/><rect x='2' y='4' width='3' height='1' fill='%232a2d36'/><rect x='3' y='5' width='1' height='1' fill='%232a2d36'/></svg>"); filter: none; }
.bark { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.barkbar { width: 120px; height: 14px; background: #0b0e14; border: 4px solid #000; box-shadow: 3px 3px 0 #000; position: relative; }
#barkfill { height: 100%; width: 0; background: var(--neon); box-shadow: inset 0 -3px 0 #0a8f2a; }
.barkbar.ready { border-color: var(--gold); animation: readyPulse 0.8s steps(2) infinite; }
.barkbar.ready #barkfill { background: var(--gold); box-shadow: inset 0 -3px 0 #a87a00; }
.barkbar.shake { animation: barShake 0.35s steps(6); }
@keyframes barShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes readyPulse { 0%, 100% { box-shadow: 3px 3px 0 #000; } 50% { box-shadow: 3px 3px 0 #000, 0 0 14px var(--gold); } }
.barkbar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 10px, #0b0e14 10px 13px); pointer-events: none; }
#clock { display: flex; align-items: center; gap: 8px; font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--muted); text-shadow: 2px 2px 0 #000; }
#clockIcon { width: 18px; height: 18px; image-rendering: pixelated; background-size: 100% 100%; }
.px-sun { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><rect x='2' y='2' width='3' height='3' fill='%23ffd166'/><rect x='3' y='0' width='1' height='1' fill='%23ffd166'/><rect x='3' y='6' width='1' height='1' fill='%23ffd166'/><rect x='0' y='3' width='1' height='1' fill='%23ffd166'/><rect x='6' y='3' width='1' height='1' fill='%23ffd166'/><rect x='1' y='1' width='1' height='1' fill='%23ffd166'/><rect x='5' y='5' width='1' height='1' fill='%23ffd166'/><rect x='5' y='1' width='1' height='1' fill='%23ffd166'/><rect x='1' y='5' width='1' height='1' fill='%23ffd166'/></svg>"); }
.px-moon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'><rect x='2' y='0' width='3' height='1' fill='%23dfe8ff'/><rect x='1' y='1' width='2' height='1' fill='%23dfe8ff'/><rect x='0' y='2' width='2' height='3' fill='%23dfe8ff'/><rect x='1' y='5' width='2' height='1' fill='%23dfe8ff'/><rect x='2' y='6' width='3' height='1' fill='%23dfe8ff'/><rect x='4' y='5' width='2' height='1' fill='%23dfe8ff'/></svg>"); }
#popups { position: absolute; left: 50%; top: 28%; transform: translateX(-50%); pointer-events: none; text-align: center; }
.pop { font-family: 'Press Start 2P', monospace; font-size: 18px; color: var(--neon); text-shadow: 4px 4px 0 #063d10, 0 0 14px rgba(57, 255, 20, 0.7); animation: pop 0.95s steps(12) forwards; white-space: nowrap; }
.tag { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Press Start 2P', monospace; font-size: 11px; line-height: 1.8; padding: 4px 10px; border: 3px solid; background: rgba(5, 7, 10, 0.8); white-space: nowrap; pointer-events: none; }
.tag.daily { top: max(14px, env(safe-area-inset-top)); color: var(--gold); border-color: var(--gold); }
.tag.power { top: calc(max(14px, env(safe-area-inset-top)) + 34px); color: #7fe9ff; border-color: #7fe9ff; }
.tag.ghost { top: calc(max(14px, env(safe-area-inset-top)) + 68px); color: #9fffb0; border-color: #1c8a2c; font-size: 10px; }
/* Desktop: the bark meter and the power-up timer sit just under the dog, where the eyes already are while running
   (players could not read them in the corners). Only the road behind the dog is there, never what is coming. Phones keep
   the corner layout, where the BARK button and the thumbs live. */
@media (pointer: fine) and (min-width: 760px) {
  #hud .bark { position: absolute; left: 50%; bottom: 11vh; transform: translateX(-50%); align-items: center; }
  #hud .bark .barkbar { width: 200px; height: 16px; }
  #hud .tag.power { top: auto; bottom: calc(11vh + 56px); font-size: 13px; }
}
.hoodcard { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); text-align: center; pointer-events: none; animation: hoodcard 2.4s steps(24) forwards; --hc: var(--neon); }
.hoodcard .hc-name { font-family: 'Press Start 2P', monospace; font-size: clamp(20px, 5vw, 42px); color: var(--hc); text-shadow: 5px 5px 0 #000, 0 0 24px var(--hc); }
.hoodcard .hc-taunt { margin-top: 12px; font-family: 'VT323', monospace; font-size: clamp(18px, 3.2vw, 30px); color: #fff; text-shadow: 3px 3px 0 #000; letter-spacing: 1px; }
@keyframes hoodcard { 0% { opacity: 0; transform: translateX(-50%) scale(1.3); } 12% { opacity: 1; transform: translateX(-50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-30px); } }
.streaks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #fff; }
.flash.hit { animation: flashHit 0.16s steps(3) forwards; }
.flash.big { animation: flashHit 0.28s steps(4) forwards; }
@keyframes flashHit { 0% { opacity: 0.55; } 100% { opacity: 0; } }
.vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 120px 40px rgba(255, 40, 60, 0.85); }
.vignette.flash { animation: vig 0.5s steps(6) forwards; }
@keyframes vig { 0% { opacity: 1; } 100% { opacity: 0; } }
.card-wrap { margin: 8px 0; } .ovcard { width: min(100%, 420px); border: 3px solid var(--edge); display: block; margin: 0 auto 6px; image-rendering: auto; } .btns.small { margin: 6px 0; } .btns.small button { padding: 10px 12px; font-size: 10px; }
.toro { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); display: flex; gap: 10px; pointer-events: none; }
.toro span { width: 72px; height: 28px; line-height: 28px; text-align: center; font-family: 'Press Start 2P', monospace; font-size: 10px; color: transparent; border: 3px solid rgba(90, 15, 30, 0.5); background: rgba(0, 0, 0, 0.35); }
.toro span.on { color: #fff; border-color: #ff3b3b; background: #c0392b; box-shadow: 0 0 16px rgba(255, 45, 45, 0.8); animation: toroBlink 0.24s steps(2) infinite; }
@keyframes toroBlink { 50% { background: #ff2d2d; } }
.combo { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-family: 'Press Start 2P', monospace; font-size: 26px; color: var(--gold); text-shadow: 5px 5px 0 #5a3d00, 0 0 18px rgba(255, 209, 102, 0.6); white-space: nowrap; pointer-events: none; }
.combo.hit { animation: comboHit 0.3s steps(4); }
@keyframes comboHit { 0% { transform: translateX(-50%) scale(1.6); } 100% { transform: translateX(-50%) scale(1); } }
.pop.bad { color: #ff3d62; text-shadow: 4px 4px 0 #5a0f1e; }
.pop.gold { color: var(--gold); text-shadow: 4px 4px 0 #5a3d00; }
@keyframes pop { 0% { opacity: 0; transform: translateY(12px) scale(0.6); } 15% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-64px) scale(1); } }
#btnBark { position: absolute; right: 18px; bottom: max(22px, env(safe-area-inset-bottom)); width: 92px; height: 92px; background: var(--green); color: #04110a; font-size: 12px; box-shadow: 6px 6px 0 #063d10; }
.touch-only { display: none; }
@media (pointer: coarse) { .touch-only { display: inline-flex; align-items: center; justify-content: center; } }

/* game over */
.ov-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 12px; }
.ov-stats > div { display: flex; flex-direction: column; gap: 6px; background: var(--panel2); border: 4px solid #000; box-shadow: 4px 4px 0 #000; padding: 10px 4px; font-family: 'Press Start 2P', monospace; font-size: 12px; }
.ov-stats .big { font-size: 20px; color: var(--neon); }
.board { list-style: none; padding: 0; margin: 8px 0; text-align: left; max-height: 220px; overflow: auto; border: 4px solid #000; background: #05070a; }
.board li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; font-size: 19px; }
.board li:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }
.board li.me { box-shadow: inset 0 0 0 3px var(--green); }
.board li .rank { color: var(--muted); width: 28px; font-family: 'Press Start 2P', monospace; font-size: 9px; }
.board li .sc { color: var(--neon); font-family: 'Press Start 2P', monospace; font-size: 12px; }
.board li.empty { justify-content: center; color: var(--muted); }
.wl-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 10px 0; padding: 12px; border: 4px solid var(--gold); background: #1a1200; color: var(--gold); font-size: 18px; }

/* allowlist */
.wl-box { border: 4px solid #000; background: var(--panel2); box-shadow: 4px 4px 0 #000; padding: 14px; margin: 10px 0; }
.wl-status { font-family: 'Press Start 2P', monospace; font-size: 16px; color: #ff3d62; margin-top: 8px; }
.wl-status.ok { color: var(--neon); word-break: break-all; font-size: 11px; line-height: 1.6; }
.wl-form { display: flex; flex-direction: column; gap: 8px; text-align: left; margin: 10px 0; }
.wl-form input { width: 100%; }
.wl-form button { align-self: center; margin-top: 6px; }
.wl-msg { font-size: 18px; color: var(--gold); text-align: center; min-height: 22px; }

/* builder */
#build { pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 12px; }
.build-top, .build-bottom { pointer-events: auto; width: min(760px, 100%); padding: 10px 14px; }
.build-top { align-self: flex-start; width: min(500px, 100%); }
.build-bottom { align-self: center; }
.build-top .row { margin: 8px 0; }
#spotNote { color: var(--gold); }
.build-title { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--neon); text-shadow: 3px 3px 0 #063d10; text-align: left; }
.build-title .muted { font-family: 'VT323', monospace; font-size: 15px; margin-left: 6px; text-shadow: none; display: block; margin-top: 4px; }
#palette { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
#palette button { width: 40px; height: 40px; padding: 0; box-shadow: 4px 4px 0 #000, inset -4px -4px 0 rgba(0, 0, 0, 0.35), inset 4px 4px 0 rgba(255, 255, 255, 0.25); }
#palette button.on { outline: 4px solid #fff; outline-offset: -4px; }
.hint { font-size: 15px; color: var(--muted); text-align: center; margin-top: 6px; }
.poster-row { align-items: center; gap: 12px; text-align: left; }
.poster-row img { width: 64px; height: 64px; object-fit: cover; border: 4px solid var(--green); background: #000; flex: none; image-rendering: pixelated; }
.poster-text { flex: 1; min-width: 0; }
.poster-text .muted { font-size: 16px; margin-bottom: 4px; }
.row.left { justify-content: flex-start; margin: 4px 0 0; }

#toast.hood { top: calc(max(14px, env(safe-area-inset-top)) + 120px); bottom: auto; font-size: 9px; padding: 8px 12px; }
#toast { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); background: var(--green); color: #04110a; font-family: 'Press Start 2P', monospace; font-size: 10px; padding: 12px 18px; border: 4px solid #000; box-shadow: 4px 4px 0 #000; pointer-events: none; }
#loading { background: var(--bg); }

@media (max-width: 480px) {
  h2 { font-size: 18px; }
  .val { font-size: 18px; }
  .tagline { font-size: 26px; }
  .hero { width: 110px; }
  .ov-stats { grid-template-columns: repeat(2, 1fr); }
  .controls { display: none; }
  .build-title .muted { display: none; }
  button { font-size: 9px; padding: 12px 12px; }
  /* pixel labels need air between wrapped lines on a phone */
  .badge, .foot, .lbl, .reg-title, .reg-status, .pro-would, .pro-tag, .done-big, .board-lbl, .agree, .quality { line-height: 1.8; }
  .badge { display: block; font-size: 8px; }
  .quality { gap: 10px; font-size: 8px; flex-wrap: wrap; }
  .agree { flex-wrap: wrap; row-gap: 2px; }
  /* one control per line inside a step: the input takes the full width, the button sits under it */
  .step .row { flex-wrap: wrap; }
  .step .row input, .step .row button { flex: 1 1 100%; }
  .step-hint { font-size: 13px; }
  .board li { font-size: 8px; gap: 8px; padding: 8px 8px; }
  .board li .spot { font-size: 7px; }
  .pro-addr { font-size: 11px; }
  .done-line { font-size: 15px; }
}

#flash { position: absolute; inset: 0; background: #ffffff; pointer-events: none; opacity: 0; }
#flash.go { animation: flashOut 0.7s steps(8) forwards; }
@keyframes flashOut { 0% { opacity: 1; } 100% { opacity: 0; } }

.disc-card { width: min(680px, 100%); text-align: left; }
.disc-card h2 { text-align: center; }
.disc-text { font-size: 17px; line-height: 1.35; color: var(--ink); max-height: 55vh; overflow: auto; padding-right: 6px; }
.disc-text p { margin: 0 0 10px; }
.disc-text b { color: var(--gold); font-family: 'Press Start 2P', monospace; font-size: 9px; }
.disc-date { color: var(--gold); }
.foot a, .agree a { color: var(--gold); text-decoration: underline; pointer-events: auto; }
.agree { display: flex; align-items: center; gap: 8px; font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--muted); pointer-events: auto; cursor: pointer; margin: 6px 0; }
.agree input { accent-color: var(--gold); width: 16px; height: 16px; }

.reg { border: 4px solid var(--gold); background: #1a1200; padding: 10px 12px; margin: 10px 0; text-align: left; box-shadow: 4px 4px 0 #000; }
.reg-title { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--gold); margin-bottom: 6px; }
.reg .row { margin: 6px 0; }
.reg-steps input { flex: 1 1 200px; }
.reg-status { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #ff8fab; margin-top: 4px; line-height: 1.5; }
.reg.pending .reg-status { color: var(--gold); }
.reg.verified .reg-status { color: var(--neon); }
.reg.verified { border-color: var(--neon); background: #071a0a; }
.board li .vf { color: var(--neon); font-family: 'Press Start 2P', monospace; font-size: 9px; }

.saved-line { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--neon); margin: 6px 0; }
input.need, textarea.need { box-shadow: inset 4px 4px 0 rgba(0, 0, 0, 0.6), 0 0 0 4px #ff3d62; animation: needShake 0.35s steps(6); }
input.need::placeholder { color: #ff3d62; }
label.need { color: #ff3d62; animation: needShake 0.35s steps(6); }
label.need input { outline: 4px solid #ff3d62; }
@keyframes needShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.reg-handle { flex: 1 1 220px; min-width: 200px; letter-spacing: 0.5px; }
.reg .row { flex-wrap: wrap; }
#regWallet { flex: 2 1 320px; }
.board li.pending { opacity: 0.55; }
.board li .pend { color: var(--gold); font-family: 'Press Start 2P', monospace; font-size: 8px; }
.board li .vf { margin-left: auto; }

.pro-box { border-top: 2px dashed var(--gold); margin-top: 10px; padding-top: 10px; }
.pro-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.pro-tag { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #2a1a00; background: var(--gold); padding: 6px 8px; border: 3px solid #000; }
.pro-would { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--gold); }
.pro-how { font-size: 16px; line-height: 1.5; color: var(--ink); }
.pro-how b { color: var(--gold); }
.pro-addr { font-family: ui-monospace, Consolas, monospace; font-size: 13px; word-break: break-all; background: #05070a; padding: 2px 6px; border: 2px solid #000; }
button.mini { padding: 6px 8px; font-size: 8px; vertical-align: middle; }
.reg.pro { border-color: var(--gold); background: #1a1200; box-shadow: 4px 4px 0 #000, 0 0 18px rgba(255, 209, 102, 0.35); }
.board li.pro { background: rgba(255, 209, 102, 0.08); box-shadow: inset 4px 0 0 var(--gold); }
.board li .spot { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--gold); margin-left: auto; text-align: right; }
.board li .spot.free { color: var(--muted); }
.board li .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li .sc { flex: none; }
/* full-screen lists show EVERY row; the card itself scrolls (no hidden inner scroll box) */
.board.full { max-height: none; overflow: visible; }
.board-count { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--muted); margin: 6px 0 2px; line-height: 1.8; }
.see-all { display: block; margin: 4px 0 8px; font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--neon); text-decoration: underline; cursor: pointer; pointer-events: auto; line-height: 1.8; }
.see-all:hover { color: #fff; }

/* register block: 4 numbered steps, then a done state that replaces the form */
.reg.verified .reg-form { display: none; }
.reg:not(.verified) .reg-done { display: none; }
.step { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; }
.step .row, .step .agree { flex: 1 1 auto; margin: 0; }
.step .row { justify-content: flex-start; }
.stepn { flex: none; font-family: 'Press Start 2P', monospace; font-size: 10px; color: #2a1a00; background: var(--gold); border: 3px solid #000; padding: 6px 7px; box-shadow: 3px 3px 0 #000; margin-top: 2px; }
.step.done .stepn { background: var(--neon); color: #05140a; }
.step.need .stepn { background: #ff3d62; color: #fff; animation: needShake 0.35s steps(6); }
.step-hint { font-size: 14px; color: var(--muted); line-height: 1.3; flex: 1 1 160px; }
.done-big { font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--neon); line-height: 1.7; text-shadow: 3px 3px 0 #000; }
.done-line { font-size: 17px; color: var(--ink); line-height: 1.4; margin-top: 4px; }
.reg-done .row.left { justify-content: flex-start; gap: 14px; }
a.tiny { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--muted); text-decoration: underline; pointer-events: auto; }
.reg.pro .done-big { color: var(--gold); }

/* ?clean=1: video recording, no HUD panels */
body.clean .hud-left, body.clean .hud-right, body.clean #btnBark { display: none !important; }

/* ---------- GrowBlocks copy (growblocks.xyz/ugly-run/): account + XP lines; the standalone site's whitelist is not here */
body.gb #btnWl, body.gb #wlBadge, body.gb #reg, body.gb #regBox { display: none !important; }
.gb-account { margin: 10px 0 2px; font-size: 18px; line-height: 1.7; letter-spacing: .04em; color: #c8ccd6; }
.gb-account b, .gb-xp b { color: #ccff00; }
.gb-signin { pointer-events: auto; font-family: 'Press Start 2P', monospace; font-size: 9px; padding: 6px 10px; margin: 0 4px; border: 2px solid #ccff00; background: #11160a; color: #ccff00; cursor: pointer; }
.gb-signin:disabled { opacity: .7; cursor: default; }
.gb-xpbox { margin: 6px 0 4px; }
body.gb .foot { line-height: 2; }
.gb-xp { font-family: 'Press Start 2P', monospace; font-size: 13px; letter-spacing: .04em; margin-bottom: 4px; }