/* Pixel look inspired by 8-bit platformers: sky, bricks, "?" blocks, pipes, coins. All art is original (see sprites.css). */
:root {
  --sky: #5c94fc;
  --ink: #000;
  --panel: #101030;
  --panel2: #0a0a24;
  --line: #5c5c9c;
  --white: #fff;
  --gold: #fcd800;
  --red: #f83800;
  --red-d: #a81000;
  --blue: #0078f8;
  --blue-d: #0038a8;
  --green: #00a800;
  --green-l: #80d010;
  --brick: #c84c0c;
  --muted: #b4b4ff;
  --px: "Press Start 2P", ui-monospace, "Courier New", monospace;
  --cjk: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --n: 4px; /* one "pixel" of the UI chrome */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--white); background: var(--sky);
  font: 700 15px/1.7 var(--cjk); letter-spacing: .02em;
}
a { color: inherit; }
code { font: 12px var(--px); background: #000; padding: 2px 6px; border: 2px solid var(--line); }
[hidden] { display: none !important; }
.red { color: var(--red); } .blue { color: var(--blue); }

/* notched corners shared by boxes and buttons */
.panel, .btn, .pill, .stats div, .game, .rank li, select, input, textarea, .tally-side {
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n),
    100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
}

/* ------------------------------------------------------------ sky decor */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; image-rendering: pixelated; }
.cloud { position: absolute; width: 144px; height: 48px; background: var(--spr-cloud) 0 0 / 100% 100% no-repeat; animation: drift 120s linear infinite; }
.cloud.c1 { top: 14%; left: -10%; animation-delay: -10s; }
.cloud.c2 { top: 34%; left: 30%; transform: scale(1.4); animation-duration: 160s; animation-delay: -70s; }
.cloud.c3 { top: 58%; left: 60%; animation-duration: 140s; animation-delay: -30s; }
.cloud.c4 { top: 76%; left: 5%; transform: scale(.8); animation-duration: 180s; animation-delay: -100s; }
@keyframes drift { from { translate: -20vw 0; } to { translate: 120vw 0; } }
.hill { position: absolute; bottom: 0; width: 256px; height: 128px; background: var(--spr-hill) 0 0 / 100% 100% no-repeat; }
.hill.h1 { left: -40px; } .hill.h2 { right: 4%; width: 192px; height: 96px; }

/* ------------------------------------------------------------ top bar */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 20px; padding: 10px clamp(14px, 4vw, 40px);
  background: #000; border-bottom: 4px solid var(--white); }
.top::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; background: var(--spr-brick) 0 0 / 32px 32px; image-rendering: pixelated; border-bottom: 4px solid #000; }
.brand { display: flex; align-items: center; gap: 10px; font: 14px var(--px); text-decoration: none; color: var(--white); text-shadow: 3px 3px 0 var(--red); }
.mark { width: 28px; height: 28px; background: var(--spr-qblock) center / 100% 100% no-repeat; image-rendering: pixelated; }
.top nav { display: flex; gap: 18px; margin-left: 8px; flex: 1; }
.top nav a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.top nav a:hover { color: var(--gold); }
.top nav a[aria-current=page] { color: var(--gold); box-shadow: 0 4px 0 var(--gold); }
.wallet { display: flex; gap: 8px; align-items: center; }
select { background: #000; color: var(--white); border: 3px solid var(--white); padding: 8px 10px; font: 700 12px var(--cjk); max-width: 220px; }

main { max-width: 1080px; margin: 0 auto; padding: 36px clamp(14px, 4vw, 40px) 56px; }

/* ------------------------------------------------------------ hero */
.hero { padding: 8px 0 4px; text-shadow: 3px 3px 0 #000; }
.eyebrow { font: 10px/1.8 var(--px); margin: 0 0 14px; color: var(--white); }
h1 { font: 900 clamp(1.5rem, 5vw, 2.4rem)/1.25 var(--px), var(--cjk); margin: 0 0 12px; color: var(--white); text-shadow: 4px 4px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; }
h1 .red { color: var(--red); }
.lead { font-size: 1.1rem; max-width: 40em; margin: 0 0 22px; }
.lead.small { font-size: .95rem; text-shadow: none; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; text-shadow: none; }
.stats div { background: #000; border: 4px solid var(--white); padding: 12px 14px; }
.stats dt { font: 8px/1.6 var(--px), var(--cjk); color: var(--gold); text-transform: uppercase; }
.stats dd { margin: 6px 0 0; font: 15px/1.5 var(--px), var(--cjk); color: var(--white); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ panels */
.panel { position: relative; background: var(--panel); border: 4px solid var(--white); box-shadow: inset 0 0 0 4px #000; padding: clamp(20px, 3vw, 32px); margin-top: 24px; text-shadow: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 4px dotted var(--line); }
.panel h2 { margin: 0; font: 13px/1.6 var(--px), var(--cjk); color: var(--gold); text-shadow: 2px 2px 0 #000; }
.panel h2 small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.pill { font: 9px/1.4 var(--px), var(--cjk); padding: 8px 10px; background: #000; border: 3px solid var(--white); color: var(--white); white-space: nowrap; }
.pill.muted { color: var(--muted); border-color: var(--line); }
.pill.live { border-color: var(--green-l); color: var(--green-l); }
.pill.warn { border-color: var(--gold); color: var(--gold); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }
.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 24px; align-items: start; }

/* ------------------------------------------------------------ table */
.seats { list-style: none; margin: 12px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px 10px; }
.seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.seat::before { content: ""; width: min(64px, 100%); aspect-ratio: 1; background: var(--spr-used) center / 100% 100% no-repeat; image-rendering: pixelated; }
.seat.next::before { animation: blink 1s steps(2) infinite; }
.seat.hidden::before { background-image: var(--spr-qblock); }
.seat.red::before { background-image: var(--spr-red); }
.seat.blue::before { background-image: var(--spr-blue); }
.seat.waiting::before { animation: bump 1.2s steps(6) infinite; }
@keyframes bump { 40% { transform: translateY(-10px); } 60% { transform: translateY(0); } }
.seat.me::before { filter: drop-shadow(3px 0 0 var(--gold)) drop-shadow(-3px 0 0 var(--gold)) drop-shadow(0 3px 0 var(--gold)) drop-shadow(0 -3px 0 var(--gold)); }
.seat .n { position: absolute; top: -8px; left: calc(50% - 44px); font: 8px var(--px); color: var(--white); text-shadow: 2px 2px 0 #000; z-index: 1; }
.seat .who { font-size: .8rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--white); }
.seat.me .who { color: var(--gold); }
.seat .tag { font: 7px/1.4 var(--px), var(--cjk); color: var(--muted); min-height: 1em; }
.seat.red .tag { color: #ff9c8c; } .seat.blue .tag { color: #8cc8ff; }

.tally { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 6px 0 4px; }
.tally-side { padding: 14px; text-align: center; border: 4px solid #000; }
.tally-side b { display: block; font: 30px/1.2 var(--px); text-shadow: 3px 3px 0 #000; }
.tally-side span { font-size: .85rem; }
.tally-side.red { background: var(--red); box-shadow: inset -6px -6px 0 var(--red-d), inset 6px 6px 0 rgba(255, 255, 255, .35); }
.tally-side.blue { background: var(--blue); box-shadow: inset -6px -6px 0 var(--blue-d), inset 6px 6px 0 rgba(255, 255, 255, .35); }
.vs { font: 14px var(--px); color: var(--gold); text-shadow: 2px 2px 0 #000; }
.hint { min-height: 1.7em; text-align: center; margin: 12px 0 0; }

.join { margin-top: 16px; }
.join-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.btn { appearance: none; border: 4px solid #000; background: var(--brick); color: var(--white); font: 700 .95rem var(--cjk); padding: 12px 16px; cursor: pointer;
  box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .35), inset 4px 4px 0 rgba(255, 255, 255, .3); text-shadow: 2px 2px 0 rgba(0, 0, 0, .6); transition: none; }
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: inset 4px 4px 0 rgba(0, 0, 0, .35), inset -4px -4px 0 rgba(255, 255, 255, .2); }
.btn:disabled { opacity: .5; filter: grayscale(.7); cursor: not-allowed; }
.btn:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 4px solid var(--gold); outline-offset: 2px; }
.btn.big { font-size: 1.3rem; padding: 20px; }
.btn.red { background: var(--red); border-color: #000; } .btn.blue { background: var(--blue); }
.btn.primary { background: var(--green); }
.btn.ghost { background: var(--panel); border-color: var(--white); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .5), inset 4px 4px 0 rgba(255, 255, 255, .12); }
#leave { margin-top: 14px; width: 100%; }
.msg { min-height: 1.7em; margin: 12px 0 0; color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.msg.ok { color: var(--green-l); } .msg.err { color: #ff8c8c; }
.note { color: var(--muted); font-size: .82rem; margin: 16px 0 0; font-weight: 400; }

/* ------------------------------------------------------------ history + ranking */
.games, .rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.empty { color: var(--muted); padding: 10px 0; }
.game { border: 4px solid var(--line); background: var(--panel2); padding: 12px 14px; }
.game-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.game-head .gid { font: 12px var(--px); color: var(--gold); }
.game-head .time { color: var(--muted); font-size: .78rem; margin-left: auto; font-weight: 400; }
.game-head .rand { font-size: .72rem; color: var(--gold); border: 2px solid var(--gold); padding: 0 6px; }
.badge { font: 8px/1.6 var(--px), var(--cjk); padding: 4px 8px; border: 3px solid #000; color: #fff; }
.badge.red { background: var(--red); } .badge.blue { background: var(--blue); } .badge.void { background: #6c6c9c; }
.game-body { display: flex; align-items: baseline; gap: 14px; margin: 10px 0; flex-wrap: wrap; }
.score { font: 11px var(--px), var(--cjk); }
.score .r { color: #ff9c8c; } .score .b { color: #8cc8ff; }
.each { color: var(--gold); font-size: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: .72rem; padding: 1px 7px; border: 2px solid #000; max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.chip.red { background: var(--red-d); } .chip.blue { background: var(--blue-d); }
.chip.win.red { background: var(--red); } .chip.win.blue { background: var(--blue); }
.chip.win { outline: 2px solid var(--gold); outline-offset: 0; }
.chip.me { box-shadow: 0 0 0 2px var(--white); }

.rank li { display: grid; grid-template-columns: 2.4em 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 4px solid var(--line); background: var(--panel2); }
.rank .pos { font: 11px var(--px); color: var(--muted); }
.rank li:nth-child(1) .pos { color: var(--gold); } .rank li:nth-child(2) .pos { color: #e0e0ff; } .rank li:nth-child(3) .pos { color: #fc9838; }
.rank .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .w { font: 10px var(--px), var(--cjk); color: var(--gold); display: inline-flex; align-items: center; gap: 6px; }
.rank .w::before { content: ""; width: 12px; height: 21px; background: var(--spr-coin) center / 100% 100% no-repeat; image-rendering: pixelated; }
.rank li.me { border-color: var(--gold); }

.live { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.live-card { border: 4px solid var(--line); background: var(--panel2); padding: 12px 14px; }
.live-card.mine { border-color: var(--gold); }
.live-card .game-head .cd { font-size: 8px; padding: 5px 8px; }
.mini { display: flex; gap: 6px; margin: 12px 0 4px; }
.mini i { width: 26px; height: 26px; background: var(--spr-qblock) center / 100% 100% no-repeat; image-rendering: pixelated; }
.mini i.done { background-image: var(--spr-used); }
.mini i.me { filter: drop-shadow(2px 0 0 var(--gold)) drop-shadow(-2px 0 0 var(--gold)) drop-shadow(0 2px 0 var(--gold)) drop-shadow(0 -2px 0 var(--gold)); }
.live-actions { margin-top: 10px; display: grid; gap: 8px; }
.live-actions .btn { width: 100%; }
.live-actions .msg { margin: 0; }

/* ------------------------------------------------------------ pass, agent, rules */
.bars { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 16px 0; }
.bars label { display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; margin-bottom: 6px; }
.bars label b { color: var(--white); font: 9px var(--px); }
.bar { height: 22px; background: #000; border: 4px solid var(--white); padding: 2px; }
.bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--red) 0 10px, var(--red-d) 10px 12px); transition: width .4s steps(8); }
.bar i.blue { background: repeating-linear-gradient(90deg, var(--blue) 0 10px, var(--blue-d) 10px 12px); }
.mint { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mint label { color: var(--muted); }
input[type=number], input[readonly], textarea { background: #000; border: 3px solid var(--white); color: var(--white); padding: 9px 12px; font: 700 .9rem var(--cjk); }
input[type=number] { width: 5.5em; font-family: var(--px); font-size: 12px; }
.cost { font: 11px var(--px), var(--cjk); min-width: 8em; color: var(--gold); }
.ref { margin-top: 20px; }
.ref label { display: block; margin-bottom: 8px; }
.ref small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.copy { display: flex; gap: 8px; } .copy input { flex: 1; min-width: 0; font-size: .78rem; }
textarea { width: 100%; font: 400 12px/1.6 ui-monospace, Consolas, Menlo, monospace; color: var(--green-l); resize: vertical; }
.row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.row .msg { margin: 0; }
.rules { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; font-weight: 400; }
.rules li::marker { content: "■  "; color: var(--gold); }
.rules b { color: var(--gold); font-weight: 700; }

/* ------------------------------------------------------------ footer = ground */
footer { position: relative; padding: 64px clamp(14px, 4vw, 40px) 28px; color: var(--white); font-size: .8rem; display: grid; gap: 10px;
  background: var(--spr-ground) 0 0 / 48px 48px repeat-x, var(--spr-brick) 0 48px / 48px 48px repeat; background-color: var(--brick); image-rendering: pixelated; text-shadow: 2px 2px 0 #000; }
footer > div { position: relative; }
footer b { font: 11px var(--px); }
footer .addr { display: flex; gap: 16px; flex-wrap: wrap; font: 400 11px/1.7 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
footer .addr a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
footer .addr a:hover { color: #ffd23f; }

@media (max-width: 820px) {
  .top { flex-wrap: wrap; justify-content: space-between; gap: 10px 12px; }
  .top nav { order: 3; width: 100%; justify-content: space-around; margin: 0; padding-top: 4px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .two { grid-template-columns: 1fr; }
  .seats { gap: 18px 4px; }
  .seat .who { font-size: .62rem; } .seat .tag { display: none; }
  .seat .n { left: calc(50% - 36px); }
  .bars { grid-template-columns: 1fr; }
  .brand { font-size: 11px; }
}
@media (max-width: 480px) {
  .btn.big { font-size: 1.05rem; padding: 16px; }
  .tally-side b { font-size: 22px; }
  .panel { padding: 18px 14px; }
  .stats dd { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cloud, .pill.warn, .seat.next::before, .seat.waiting::before { animation: none; }
  .bar i { transition: none; }
}

.btn.small { padding: 6px 10px; font-size: .8rem; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20; margin: 0; background: #000; border: 4px solid var(--white); padding: 8px 14px; max-width: 92vw; }
.cta { text-align: center; margin: 28px 0 0; }
.cta .btn { display: inline-block; text-decoration: none; }
#withdraw { margin-top: 12px; width: 100%; }

.stats.small { margin-top: 14px; }
.stats.small dd { font-size: 11px; overflow-wrap: anywhere; }
.bars.one { grid-template-columns: 1fr; margin: 4px 0 0; }
#poolAction { margin-top: 12px; width: 100%; }

.banner { background: #000; border: 4px solid var(--gold); color: var(--gold); padding: 12px 16px; margin: 4px 0 0; }
body.demo main > :not(.hero):not(.banner):not(.keep) { display: none; }
body.demo .wallet #connect, body.demo .wallet select { display: none; }

/* wallet dialog */
.modal-back { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(5, 8, 25, .72); }
.modal { width: min(420px, 100%); max-height: 92vh; overflow: auto; margin: 0; }
.modal .choose { display: grid; gap: 12px; margin-top: 14px; }
.modal .qr { background: #fff; padding: 12px; width: min(280px, 100%); aspect-ratio: 1; margin: 14px auto 0; display: grid; place-items: center; }
.modal .qr svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }

/* the language and wallet buttons in the header are the same size */
.wallet .btn { width: 8.5rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Q&A page */
.faq details { border: 4px solid #000; background: var(--panel); margin-top: 10px; }
.faq summary { cursor: pointer; padding: 12px 14px; font-weight: 700; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; color: var(--gold); font: 900 1rem var(--px), monospace; }
.faq details[open] summary::before { content: '\2212'; }
.faq details > p { margin: 0; padding: 0 14px 14px 36px; line-height: 1.7; }
.road { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.road li { display: grid; gap: 6px; }
.road .chip { justify-self: start; font: 700 .75rem var(--cjk); padding: 3px 8px; border: 3px solid #000; color: #000; background: var(--muted); }
.road .chip.done { background: var(--green); } .road .chip.now { background: var(--gold); } .road .chip.next { background: var(--blue); color: var(--white); }
.road ul { margin: 0; padding-left: 20px; line-height: 1.8; }
.links { display: flex; gap: 18px; flex-wrap: wrap; }
.links a { color: inherit; text-underline-offset: 3px; }