:root {
  --bg: #15132b;
  --bg2: #0f0d22;
  --surface: #272447;
  --surface2: #322e5a;
  --ink: #0c0a1a;
  --text: #fdf6ff;
  --muted: #a79fd6;
  --faint: #6f679c;
  --accent: #ffce3a;
  --accent2: #ff5d9e;
  --cyan: #3fd0e0;
  --green: #5fd97a;
  --red: #ff5a5f;
  --purple: #9b6dff;
  --orange: #ff9b3d;

  --pix: 'Press Start 2P', monospace;
  --body: 'Pixelify Sans', system-ui, sans-serif;

  --sh: 4px 4px 0 var(--ink);
  --sh-sm: 3px 3px 0 var(--ink);
  --bevel: inset 2px 2px 0 rgba(255, 255, 255, .12), inset -2px -2px 0 rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; }
img, canvas { image-rendering: pixelated; }
html, body { margin: 0; min-height: 100%; }
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--text);
  font-family: var(--body);
  font-size: 18px;
}
h1, h2, h3 { font-family: var(--pix); font-weight: 400; line-height: 1.4; }
.muted { color: var(--muted); }

.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 100; background: repeating-linear-gradient(rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px); opacity: .5; }

a { color: var(--cyan); text-decoration: none; }
button, input { font-family: inherit; }

.pixel-coin { width: 22px; height: 22px; flex: none; background: var(--accent); border: 3px solid var(--ink); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .28); position: relative; }
.pixel-coin::after { content: '$'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--pix); font-size: 9px; color: var(--ink); }
.pixel-coin.lg { width: 42px; height: 42px; } .pixel-coin.lg::after { font-size: 18px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--pix); font-size: 12px; color: var(--text);
  background: var(--surface2); border: 3px solid var(--ink); box-shadow: var(--sh);
  padding: 12px 16px; cursor: pointer; transition: transform .06s, box-shadow .06s, filter .1s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--sh); }
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-block { width: 100%; padding: 15px; }

/* ── Top bar ─────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(14px, 4vw, 30px); border-bottom: 3px solid var(--ink); background: var(--bg2); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-name { font-family: var(--pix); font-size: 15px; color: var(--text); }
.brand-tag { font-family: var(--pix); font-size: 8px; text-transform: uppercase; background: var(--accent2); color: var(--ink); border: 2px solid var(--ink); padding: 3px 6px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
/* $DESIGNCOIN contract address — centered in the header, click to copy */
.ca-pill { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; font-family: var(--body); font-size: 13px; cursor: pointer; padding: 6px 11px; border: 2px solid var(--ink); background: var(--surface); color: var(--text); box-shadow: var(--sh); white-space: nowrap; }
.ca-pill:hover { background: var(--accent); color: var(--ink); }
.ca-tag { font-family: var(--pix); font-size: 8px; text-transform: uppercase; padding: 2px 5px; background: var(--ink); color: var(--accent); }
.ca-pill:hover .ca-tag { background: var(--ink); color: var(--accent); }
.ca-addr { letter-spacing: 0.02em; }
.ca-ico { opacity: 0.65; }
@media (max-width: 820px) { .ca-pill { display: none; } }
.status { display: flex; align-items: center; gap: 7px; font-size: 15px; color: var(--muted); }
.status-dot { width: 10px; height: 10px; background: var(--green); border: 2px solid var(--ink); }
.status.off .status-dot { background: var(--red); }
.mode { font-family: var(--pix); font-size: 8px; text-transform: uppercase; padding: 5px 8px; border: 2px solid var(--ink); background: var(--surface); color: var(--muted); }
.mode.live { background: var(--green); color: var(--ink); }
.me { display: flex; align-items: center; gap: 7px; font-size: 15px; padding: 4px 11px; border: 2px solid var(--ink); background: var(--surface); }
.me-dot { width: 11px; height: 11px; background: var(--accent); border: 2px solid var(--ink); }
.me-logout { font-family: var(--pix); font-size: 8px; text-transform: uppercase; cursor: pointer; margin-left: 4px; padding: 4px 7px; border: 2px solid var(--ink); background: var(--surface); color: var(--muted); }
.me-logout:hover { background: var(--accent); color: var(--ink); }

/* ── Hero ────────────────────────────────────────────────── */
.hero { max-width: 1120px; margin: 22px auto 0; padding: 0 clamp(14px, 4vw, 30px); }
.hero-card { display: flex; align-items: center; gap: clamp(14px, 3vw, 24px); background: var(--surface); border: 3px solid var(--ink); box-shadow: var(--sh), var(--bevel); padding: 16px clamp(14px, 3vw, 22px); }
@media (max-width: 620px) { .hero-card { flex-direction: column; align-items: stretch; text-align: center; } }

.timer-badge { width: 100px; height: 100px; flex: none; display: grid; place-content: center; justify-items: center; gap: 2px; background: var(--accent); border: 3px solid var(--ink); box-shadow: var(--bevel); margin: 0 auto; }
.timer-num { font-family: var(--pix); font-size: 30px; color: var(--ink); line-height: 1; }
.timer-unit { font-family: var(--pix); font-size: 8px; color: var(--ink); text-transform: uppercase; }

.hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.phase-label { font-family: var(--pix); font-size: clamp(15px, 3vw, 22px); color: var(--accent); text-transform: uppercase; }
.hero-stats { display: flex; gap: 9px; }
.stat { border: 3px solid var(--ink); background: var(--bg2); padding: 5px 12px; box-shadow: var(--bevel); }
.stat b { font-family: var(--pix); font-size: 16px; display: block; line-height: 1.2; }
.stat span { font-size: 13px; color: var(--muted); }

.theme-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg2); border: 3px solid var(--ink); padding: 8px 13px; }
.theme-kick { font-family: var(--pix); font-size: 9px; text-transform: uppercase; color: var(--accent2); }
.theme-name { font-family: var(--pix); font-size: 15px; color: var(--accent); text-transform: uppercase; }
.theme-hint { font-size: 16px; color: var(--muted); }

.progress { height: 16px; border: 3px solid var(--ink); background: var(--bg2); box-shadow: var(--sh-sm); margin-top: 14px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: var(--accent); border-right: 3px solid var(--ink); will-change: width; }

.steps { display: flex; gap: 10px; flex-wrap: wrap; }
.steps span { font-family: var(--pix); font-size: 9px; text-transform: uppercase; color: var(--faint); padding: 5px 7px; border: 2px solid transparent; }
.steps span.active { color: var(--ink); background: var(--accent); border-color: var(--ink); }
.steps span.done { color: var(--muted); }

/* ── Layout ──────────────────────────────────────────────── */
.layout { max-width: 1120px; margin: 22px auto 60px; padding: 0 clamp(14px, 4vw, 30px); display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
@media (max-width: 880px) { .layout { grid-template-columns: 1fr; } }
.stage { min-height: 420px; }

/* ── Card ────────────────────────────────────────────────── */
.card { background: var(--surface); border: 3px solid var(--ink); box-shadow: var(--sh), var(--bevel); padding: clamp(16px, 3vw, 26px); }
.card-title { font-size: 16px; margin: 0; color: var(--text); text-transform: uppercase; line-height: 1.5; }
.card-lede { color: var(--muted); font-size: 16px; margin: 8px 0 20px; }

/* ── Studio / editor ─────────────────────────────────────── */
.studio { display: grid; grid-template-columns: 320px 1fr; gap: 24px; }
@media (max-width: 700px) { .studio { grid-template-columns: 1fr; } }
.editor-col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.editor-wrap { width: 300px; height: 300px; max-width: 82vw; border: 3px solid var(--ink); box-shadow: var(--sh); overflow: hidden; background: var(--bg2); touch-action: none; }
.editor-wrap canvas { width: 100%; height: 100%; display: block; touch-action: none; image-rendering: pixelated; }

.editor-bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.tool-btn { font-family: var(--pix); font-size: 9px; text-transform: uppercase; padding: 7px 9px; border: 2px solid var(--ink); background: var(--surface2); color: var(--text); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; }
.tool-btn.sel { background: var(--accent); color: var(--ink); }
.tool-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.bar-sp { width: 3px; height: 18px; background: var(--ink); margin: 0 3px; }
.pen-row { display: flex; flex-direction: column; gap: 9px; align-items: center; }
.pen-colors { display: flex; gap: 6px; }
.pen-color { width: 24px; height: 24px; border: 3px solid var(--ink); cursor: pointer; }
.pen-color.sel { box-shadow: 0 0 0 3px var(--accent); }
.pen-sizes { display: flex; gap: 8px; }
.pen-size { width: 30px; height: 28px; border: 2px solid var(--ink); display: grid; place-items: center; cursor: pointer; background: var(--surface2); }
.pen-size.sel { background: var(--accent); }
.pen-size i { background: var(--ink); display: block; }

.locked { font-family: var(--pix); font-size: 9px; color: var(--green); text-transform: uppercase; }
.controls { display: flex; flex-direction: column; gap: 18px; }
.ctl-label { font-family: var(--pix); font-size: 9px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ticker-in { width: 100%; background: var(--bg2); border: 3px solid var(--ink); box-shadow: var(--bevel); padding: 12px 14px; color: var(--text); font-family: var(--pix); font-size: 16px; text-transform: uppercase; }
.ticker-in:focus { outline: none; border-color: var(--accent); }

.palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; max-height: 220px; overflow-y: auto; padding: 2px; }
.palette-tile { aspect-ratio: 1; border: 2px solid var(--ink); background: var(--surface2) center / 84% no-repeat; box-shadow: 2px 2px 0 var(--ink); cursor: grab; touch-action: none; image-rendering: pixelated; }
.palette-tile:hover { background-color: var(--accent); }
.palette-tile:active { cursor: grabbing; }
.palette-tile.upload-tile { box-shadow: 0 0 0 2px var(--accent), 2px 2px 0 var(--ink); }
.drag-ghost { position: fixed; width: 88px; height: 88px; transform: translate(-50%, -50%); pointer-events: none; z-index: 90; image-rendering: pixelated; }
.upload-btn { margin-top: 10px; width: 100%; font-family: var(--pix); font-size: 9px; text-transform: uppercase; padding: 10px; border: 3px dashed var(--ink); background: var(--bg2); color: var(--text); cursor: pointer; }
.upload-btn:hover { background: var(--accent); color: var(--ink); }
.editor-wrap.drop { box-shadow: 0 0 0 4px var(--accent), var(--sh); }

.bg-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.bg-sw { width: 34px; height: 34px; border: 3px solid var(--ink); cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.bg-sw.sel { box-shadow: 0 0 0 3px var(--accent), 2px 2px 0 var(--ink); }

/* ── Lobby ───────────────────────────────────────────────── */
.lobby { text-align: center; padding: 26px 16px; }
.lobby-kick { font-family: var(--pix); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent2); }
.lobby-big { font-family: var(--pix); font-size: clamp(38px, 9vw, 68px); color: var(--accent); margin: 18px 0; line-height: 1; }
.lobby-count .have { color: var(--accent); }
.lobby-count .sep, .lobby-count .need { color: var(--faint); }
.lobby-msg { color: var(--muted); font-size: 17px; margin-bottom: 22px; }
.lobby-msg b { color: var(--text); }
.slots { display: inline-flex; gap: 7px; margin-bottom: 22px; }
.slot { width: 40px; height: 16px; border: 3px solid var(--ink); background: var(--bg2); }
.slot.on { background: var(--accent); }
.roster { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; max-width: 540px; margin: 0 auto; }
.chip { display: flex; align-items: center; gap: 7px; padding: 6px 12px; background: var(--surface2); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-size: 16px; }
.chip i { width: 9px; height: 9px; background: var(--cyan); border: 1.5px solid var(--ink); font-style: normal; }
.chip.me { background: var(--accent); color: var(--ink); }

/* ── Vote ────────────────────────────────────────────────── */
.vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; }
.vote-card { background: var(--surface2); border: 3px solid var(--ink); box-shadow: var(--sh); overflow: hidden; cursor: pointer; position: relative; transition: transform .06s, box-shadow .06s; }
.vote-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.vote-card.voted { background: var(--accent); color: var(--ink); }
.vote-img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; border-bottom: 3px solid var(--ink); background: var(--bg2); }
.vote-foot { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; }
.vote-tick { font-family: var(--pix); font-size: 12px; }
.vote-by { font-size: 14px; color: var(--muted); }
.vote-card.voted .vote-by { color: rgba(12, 10, 26, .7); }
.vcount { font-family: var(--pix); font-size: 12px; display: flex; align-items: center; gap: 4px; color: var(--muted); }
.vcount.lead { color: var(--accent2); }
.vote-card.voted .vcount { color: var(--ink); }
.vcount .tri { font-size: 9px; }
.tag { position: absolute; top: 7px; left: 7px; font-family: var(--pix); font-size: 8px; text-transform: uppercase; padding: 3px 6px; background: var(--bg2); color: var(--text); border: 2px solid var(--ink); }
.tag.lead { left: auto; right: 7px; background: var(--accent2); color: var(--ink); }

/* ── Result ──────────────────────────────────────────────── */
.result { text-align: center; }
.result-kick { font-family: var(--pix); font-size: 14px; color: var(--accent); text-transform: uppercase; }
.winner-logo { width: 168px; height: 168px; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); margin: 16px auto 0; overflow: hidden; background: var(--bg2); }
.winner-logo img { width: 100%; height: 100%; display: block; }
.winner-tick { font-family: var(--pix); font-size: 24px; margin: 16px 0 0; color: var(--text); }
.winner-by { color: var(--muted); font-size: 16px; margin-top: 8px; }
.winner-prize { display: inline-block; font-family: var(--pix); font-size: 16px; color: var(--ink); margin-top: 16px; padding: 11px 18px; background: var(--accent); border: 3px solid var(--ink); box-shadow: var(--sh); }
/* SOL logo used as the price/prize unit (replaces the old ◎ glyph) */
.sol-ic { height: 0.72em; width: auto; vertical-align: baseline; display: inline-block; }
.onchain { display: flex; flex-direction: column; gap: 9px; max-width: 440px; margin: 22px auto 0; }
.oc { display: flex; align-items: center; gap: 11px; text-align: left; padding: 11px 14px; background: var(--bg2); border: 3px solid var(--ink); }
.oc-dot { width: 12px; height: 12px; border: 2px solid var(--ink); flex: none; }
.oc.pending .oc-dot { background: transparent; border-color: var(--accent); border-top-color: transparent; border-radius: 50%; animation: ocspin 0.7s linear infinite; }
.oc.done .oc-dot { background: var(--green); }
.oc.fail .oc-dot { background: var(--red); }
@keyframes ocspin { to { transform: rotate(360deg); } }
.oc-body { flex: 1; min-width: 0; }
.oc-t { font-size: 16px; }
.oc-s { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-s a { color: var(--cyan); }
/* failures must be fully readable, not truncated — show the whole error message */
.oc.fail .oc-s { white-space: normal; overflow: visible; color: var(--red); user-select: text; word-break: break-word; }
/* champions onchain status */
.champ-stat { font-size: 11px; font-family: var(--pix); margin-top: 3px; }
.champ-stat.deploying { color: var(--accent); }
.champ-stat.deployed  { color: var(--green); }
.champ-stat.failed    { color: var(--red); white-space: normal; word-break: break-word; user-select: text; }
.champ-spin { display: inline-block; width: 8px; height: 8px; border: 2px solid var(--accent); border-top-color: transparent; border-radius: 50%; animation: ocspin 0.7s linear infinite; vertical-align: -1px; margin-right: 5px; }
.no-winner { text-align: center; color: var(--muted); padding: 50px 0; font-size: 18px; }

/* ── Champions ───────────────────────────────────────────── */
.rail { background: var(--surface); border: 3px solid var(--ink); box-shadow: var(--sh), var(--bevel); }
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 3px solid var(--ink); font-family: var(--pix); font-size: 11px; text-transform: uppercase; }
.champ-list { display: flex; flex-direction: column; max-height: 470px; overflow-y: auto; }
.champ { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-bottom: 2px dashed rgba(255, 255, 255, .12); }
.champ:last-child { border-bottom: none; }
.champ-logo { width: 40px; height: 40px; border: 2px solid var(--ink); flex: none; background: var(--bg2); object-fit: cover; }
.champ-main { flex: 1; min-width: 0; }
.champ-tick { font-family: var(--pix); font-size: 11px; }
.champ-meta { font-size: 14px; color: var(--muted); }
.champ-meta a { color: var(--cyan); }
.champ-prize { font-family: var(--pix); font-size: 11px; color: var(--accent); white-space: nowrap; }
.empty { color: var(--faint); text-align: center; padding: 30px 14px; font-size: 16px; }

/* ── Login ───────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(15, 13, 34, .88); }
.overlay[hidden] { display: none; }
.login { width: 100%; max-width: 410px; text-align: center; background: var(--surface); border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink), var(--bevel); padding: 32px 28px; }
.login h1 { font-size: 20px; margin: 14px 0 10px; color: var(--accent); }
.login p { color: var(--muted); font-size: 16px; margin: 0 0 22px; }
#loginForm { display: flex; flex-direction: column; gap: 16px; text-align: left; }
#loginForm label { font-family: var(--pix); font-size: 9px; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; gap: 8px; }
#loginForm input { background: var(--bg2); border: 3px solid var(--ink); box-shadow: var(--bevel); padding: 12px 13px; color: var(--text); font-family: var(--body); font-size: 17px; }
#loginForm input:focus { outline: none; border-color: var(--accent); }
.login-foot { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* ── Marquee ─────────────────────────────────────────────── */
.marquee { border-bottom: 3px solid var(--ink); background: var(--accent); overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; will-change: transform; animation: marquee 26s linear infinite; }
.marquee-track span { font-family: var(--pix); font-size: 10px; color: var(--ink); padding: 7px 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Prize chip + stacked rail ───────────────────────────── */
.stat.prize b { font-family: var(--body); font-size: 20px; font-weight: 700; color: var(--accent); }
.rail-col { display: flex; flex-direction: column; gap: 20px; }
.howto { margin: 0; padding: 14px 18px 18px 36px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.howto li { margin-bottom: 7px; }
.howto li::marker { color: var(--accent); }

/* ── Toast / confetti ────────────────────────────────────── */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(14px); background: var(--surface2); border: 3px solid var(--ink); box-shadow: var(--sh); padding: 12px 18px; font-size: 16px; opacity: 0; pointer-events: none; transition: .2s; z-index: 60; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #3a1620; color: var(--text); border-color: var(--red); }
.toast.ok { background: #143020; border-color: var(--green); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 55; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface2); border: 2px solid var(--ink); }
::-webkit-scrollbar-track { background: var(--bg2); }