/* --------------------------------------------------------------------------
   STOCKOPOLY. Overworld palette, chunky block chrome, hard edges everywhere.
   No border-radius in this file on purpose: blocks are blocks.
   -------------------------------------------------------------------------- */

:root {
  --sky:      #5c94fc;
  --sky-2:    #8fc0ff;
  --grass:    #4caf3f;
  --grass-d:  #2f7a26;
  --dirt:     #8b5a2b;
  --dirt-d:   #5c3a17;
  --stone:    #8f8f8f;
  --gold:     #ffd23f;
  --gold-d:   #c08a10;
  --red:      #e02020;
  --red-d:    #a01414;
  --ink:      #14101c;
  --ink-2:    #1e1830;
  --ink-3:    #2a2340;
  --paper:    #f4f1e4;
  --text:     #eceaf6;
  --muted:    #a7a3c0;
  --edge:     4px;
  --mono: "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* touch: gold tap flash instead of the browser's blue, and no 300ms wait */
* { -webkit-tap-highlight-color: rgba(255, 210, 63, .28); }
button, a, .board-enter, #boardCanvas { touch-action: manipulation; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: none;
}

canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

h1, h2, h3 { margin: 0 0 .4em; letter-spacing: .06em; text-transform: uppercase; }
h2 { font-size: 30px; }
h3 { font-size: 15px; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); color: var(--gold); word-break: break-all; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* faint CRT scanline over the whole page, very low opacity */
#scanline {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  opacity: .35;
  mix-blend-mode: multiply;
}

/* ---- layout rail --------------------------------------------------------- */
/* Every band on the page hangs off this one container, so the topbar logo, each
   heading, the board and the footer all share a left edge at any width. */

.wrap {
  width: 100%;
  max-width: 1220px;      /* 1180 of content between 20px gutters */
  margin: 0 auto;
  padding: 0 20px;
}

/* ---- block chrome -------------------------------------------------------- */

.block-edge {
  box-shadow:
    inset var(--edge) var(--edge) 0 rgba(255,255,255,.18),
    inset calc(var(--edge) * -1) calc(var(--edge) * -1) 0 rgba(0,0,0,.55);
}

/* ---- top bar ------------------------------------------------------------- */

.topbar {
  position: sticky; top: 0; z-index: 100;
  padding: 10px 0;
  background: var(--ink-2);
  border-bottom: 4px solid #000;
  box-shadow: 0 4px 0 rgba(0,0,0,.5), inset 0 4px 0 rgba(255,255,255,.08);
}
.topbar-inner { display: flex; align-items: center; gap: 20px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: bold; font-size: 18px; letter-spacing: .1em; color: var(--gold);
}
.brand b { color: #fff; }
.brand:hover { text-decoration: none; }
#brandIcon {
  width: 34px; height: 34px; display: block;
  transition: transform .25s cubic-bezier(.3,1.6,.5,1);
}
.brand:hover #brandIcon { transform: rotate(-10deg) scale(1.14); }

.nav { display: flex; gap: 18px; margin-left: auto; font-size: 13px; }
.nav a { color: var(--muted); letter-spacing: .12em; }
.nav a:hover { color: var(--gold); text-decoration: none; }

.topbar-right { display: flex; align-items: center; gap: 10px; }

/* ---- buttons ------------------------------------------------------------- */

.btn {
  position: relative; overflow: hidden;
  font-family: var(--mono); font-weight: bold; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--ink-3);
  border: 3px solid #000; padding: 9px 16px; cursor: pointer;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.18),
              inset -3px -3px 0 rgba(0,0,0,.5), 0 4px 0 #000;
  transition: transform .09s ease, filter .18s ease, box-shadow .18s ease;
}
/* the light that sweeps across a chip when you touch it */
.btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 34%,
              rgba(255,255,255,.55) 47%, transparent 60%);
  transform: translateX(-130%);
}
.btn:hover::after { animation: shine .6s ease-out; }
@keyframes shine { to { transform: translateX(130%); } }

.btn:hover {
  filter: brightness(1.16);
  transform: translateY(-2px);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.22),
              inset -3px -3px 0 rgba(0,0,0,.5), 0 6px 0 #000,
              0 0 20px rgba(255,210,63,.30);
}
.btn:active {
  transform: translateY(4px);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.18), inset -3px -3px 0 rgba(0,0,0,.5);
}
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.btn:disabled::after { display: none; }

/* the big money buttons keep a slow bulb pulse going, like a machine waiting */
.btn-lg.btn-gold, .btn-lg.btn-red, .btn-lg.btn-green { animation: bulbs 2.4s ease-in-out infinite; }
.btn-lg:hover, .btn-lg:disabled { animation: none; }
@keyframes bulbs {
  0%, 100% { box-shadow: inset 3px 3px 0 rgba(255,255,255,.18),
                         inset -3px -3px 0 rgba(0,0,0,.5), 0 4px 0 #000,
                         0 0 0 rgba(255,210,63,0); }
  50%      { box-shadow: inset 3px 3px 0 rgba(255,255,255,.18),
                         inset -3px -3px 0 rgba(0,0,0,.5), 0 4px 0 #000,
                         0 0 26px rgba(255,210,63,.60); }
}
.btn-gold  { background: var(--gold); color: #241a00; }
.btn-green { background: var(--grass); color: #06240a; }
.btn-red   { background: var(--red); }
.btn-lg    { padding: 13px 22px; font-size: 15px; }
.btn-sm    { padding: 6px 11px; font-size: 11px; }
.btn-block { display: block; width: 100%; margin-top: 10px; }

.pill {
  font-size: 11px; font-weight: bold; letter-spacing: .12em;
  padding: 5px 9px; border: 3px solid #000; background: var(--ink-3);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.15);
}
.pill-warn { background: var(--red); }
.pill-demo { background: var(--gold); color: #241a00; }
.pill-live { background: var(--grass); color: #06240a; }

/* ---- hero ---------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; border-bottom: 6px solid #000; }
.hero-sky { position: absolute; inset: 0; }
.hero-sky canvas { width: 100%; height: 100%; display: block; }
.hero-inner {
  position: relative;
  padding-top: 60px; padding-bottom: 68px;   /* .wrap owns the side gutters */
}
.hero-inner { display: flex; align-items: flex-end; gap: 36px; }
.hero-copy { flex: 1 1 560px; min-width: 0; max-width: 760px; }

/* the banker stands on the grass strip: -22px cancels the hero padding down to
   the ground line the sky canvas draws at (height - 46) */
.hero-art {
  flex: 0 0 auto;
  width: clamp(260px, 42vw, 560px);
  margin-bottom: -22px;
  align-self: flex-end;
  pointer-events: none;
}
.hero-art img, .hero-art video {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(7px 7px 0 rgba(0, 0, 0, .38));
  animation: bob 4.5s ease-in-out infinite;
}
/* The clip has its own sky and hills painted in. Feathering the edge lets it
   sit in the hero's sky instead of reading as a video box pasted on top. */
.hero-art video {
  display: none;
  filter: none;
  animation: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 94%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 94%);
}
.hero-art.playing video { display: block; }
.hero-art.playing img { display: none; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art img { animation: none; }
}
/* he only leans out past the rail once the rail has stopped growing, otherwise
   the lean is 30px of horizontal scrollbar on a 1024 screen */
@media (min-width: 1260px) {
  .hero-art { margin-right: -30px; }
}
.kicker {
  display: inline-block; font-size: 11px; letter-spacing: .22em;
  background: #000; color: var(--gold); padding: 5px 10px; margin-bottom: 16px;
  border: 3px solid rgba(255,255,255,.2);
}
.title {
  font-size: clamp(44px, 9vw, 96px); line-height: .95; margin: 0 0 14px;
  color: var(--gold);
  text-shadow: 4px 0 #000, -4px 0 #000, 0 4px #000, 0 -4px #000,
               8px 8px 0 rgba(0,0,0,.45);
}
.title span { color: #fff; }
.lede {
  font-size: 17px; max-width: 640px; color: #f0eeff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.75);
}
.lede b { color: var(--gold); }

.countdown-block {
  display: inline-block; margin: 8px 0 22px; padding: 14px 18px;
  background: rgba(10,8,18,.82); border: 4px solid #000;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.12), 0 6px 0 rgba(0,0,0,.4);
}
.cd-label { font-size: 11px; letter-spacing: .2em; color: var(--muted); margin-bottom: 8px; }
.countdown { display: flex; align-items: flex-end; gap: 6px; }
.cd { text-align: center; }
.cd span {
  display: block; font-size: 40px; font-weight: bold; line-height: 1;
  color: var(--gold); text-shadow: 3px 3px 0 #000;
  min-width: 68px; background: #000; border: 3px solid #3a3358; padding: 6px 4px;
}
.cd span { transition: color .2s; }
.cd.tick span { animation: digitPop .32s ease-out; }
@keyframes digitPop {
  0%   { transform: translateY(-3px) scale(1.10); color: #fff; }
  100% { transform: none; }
}
.cd em { font-style: normal; font-size: 10px; letter-spacing: .16em; color: var(--muted); }
.cd-sep { font-size: 34px; color: #fff; padding-bottom: 22px; }
.cd-note { font-size: 12px; color: var(--muted); margin-top: 10px; }

.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0;
}
.hero-stats li {
  background: rgba(10,8,18,.8); border: 3px solid #000; padding: 10px 14px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.12);
}
.hero-stats b { display: block; font-size: 22px; color: var(--gold); transition: color .3s; }
.hero-stats li { transition: transform .2s, box-shadow .2s; }
.hero-stats li:hover { transform: translateY(-3px); box-shadow: inset 2px 2px 0 rgba(255,255,255,.12), 0 6px 0 rgba(0,0,0,.4); }
b.bump { animation: bump .5s ease-out; }
@keyframes bump {
  0%   { transform: scale(1.28); color: #9ae88a; text-shadow: 0 0 14px rgba(154,232,138,.8); }
  100% { transform: none; }
}
.hero-stats span { font-size: 10px; letter-spacing: .14em; color: var(--muted); }

/* ---- sections ------------------------------------------------------------ */

.section { padding: 60px 0; }
.section-alt {
  background: var(--ink-2);
  border-top: 6px solid #000; border-bottom: 6px solid #000;
}
.section-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.section-head h2 { color: var(--gold); text-shadow: 3px 3px 0 #000; }
.section-sub { color: var(--muted); max-width: 720px; margin: 0 0 24px; }
.mode-switch { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.mode-switch .btn, .mode-switch .pill { white-space: nowrap; }
.section-head h2 { margin-bottom: 0; }

/* ---- panels -------------------------------------------------------------- */

.panel {
  background: var(--ink-2); border: 4px solid #000; margin-bottom: 0;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.10),
              inset -3px -3px 0 rgba(0,0,0,.5), 0 5px 0 rgba(0,0,0,.35);
}
.panel-head {
  position: relative; overflow: hidden;
  background: var(--ink-3); padding: 8px 12px; font-size: 11px; font-weight: bold;
  letter-spacing: .2em; color: var(--gold); border-bottom: 4px solid #000;
}
.panel-head::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%,
              rgba(255,210,63,.14) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: headSweep 7s ease-in-out infinite;
}
@keyframes headSweep {
  0%, 72%   { transform: translateX(-100%); }
  92%, 100% { transform: translateX(100%); }
}
.panel { transition: box-shadow .3s; }
.log-line { animation: logIn .32s ease-out; }
@keyframes logIn {
  0%   { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: none; }
}
.log-line.jackpot .m { animation: jackpotFlash 1s ease-out 3; }
@keyframes jackpotFlash {
  0%, 100% { color: var(--gold); }
  50%      { color: #fff; text-shadow: 0 0 12px rgba(255,210,63,.9); }
}
.panel-body { padding: 14px; }

.kv {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 2px dotted #3a3358; font-size: 13px;
}
.kv span { color: var(--muted); letter-spacing: .1em; font-size: 11px; }
.kv b { color: #fff; text-align: right; word-break: break-all; }

.fine { font-size: 11px; color: var(--muted); line-height: 1.6; }
.fine b { color: var(--gold); }
.kv-total { border-bottom: 0; margin-top: 12px; padding-top: 12px; border-top: 3px solid #3a3358; }
.kv-total span { color: var(--gold); }
.kv-total b { font-size: 16px; color: var(--gold); }
.fieldlabel { display: block; font-size: 10px; letter-spacing: .18em; color: var(--muted); margin: 14px 0 6px; }

.status {
  margin-top: 10px; padding: 9px 11px; font-size: 12px;
  background: #000; border: 3px solid #3a3358; word-break: break-all;
}
.status.ok  { border-color: var(--grass); color: #b9f5ad; }
.status.err { border-color: var(--red); color: #ffb4b4; }

/* ---- board --------------------------------------------------------------- */

/* board top left, log under it, side rail spanning both, so the block is a
   rectangle instead of a square with a hole beside it */
.board-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: auto auto;
  gap: 16px;
  align-items: stretch;
}
.board-canvas { grid-column: 1; grid-row: 1; }
.board-wrap .log-panel { grid-column: 1; grid-row: 2; margin: 0; }
.board-side { grid-column: 2; grid-row: 1 / 3; }
.board-canvas {
  position: relative;
  perspective: 1500px;
  perspective-origin: 50% 42%;
}
#boardCanvas {
  width: 100%; aspect-ratio: 1 / 1; display: block;
  border: 5px solid #000; background: var(--sky);
  box-shadow: 0 8px 0 rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.08);
  transform-origin: 50% 55%;
  transition: transform .5s cubic-bezier(.22,.9,.28,1), box-shadow .4s;
  will-change: transform;
}

/* ---- the board as a table you tilt into ---------------------------------- */
/* Showcase: the board sits back on the table and leans with the pointer.
   Click it and it turns through 3D and lands flat, which is the way in. */

.board-canvas.showcase #boardCanvas {
  transform:
    rotateX(calc(17deg + var(--tiltX, 0deg)))
    rotateZ(calc(-4deg + var(--tiltZ, 0deg)))
    scale(.95);
  box-shadow: 0 42px 60px rgba(0,0,0,.6), inset 0 0 0 3px rgba(255,255,255,.08);
  cursor: pointer;
}
.board-canvas.entering #boardCanvas {
  animation: enterBoard 1s cubic-bezier(.22,.9,.28,1) both;
}
@keyframes enterBoard {
  0%   { transform: rotateX(17deg) rotateZ(-4deg) scale(.95); }
  30%  { transform: rotateX(54deg) rotateZ(9deg) scale(.8); }
  62%  { transform: rotateX(-9deg) rotateZ(-2deg) scale(1.04); }
  82%  { transform: rotateX(3deg) rotateZ(1deg) scale(.99); }
  100% { transform: none; }
}
.board-canvas.playing #boardCanvas { transform: none; }

.board-enter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  background: radial-gradient(ellipse at 50% 46%,
              rgba(10,8,18,0) 0%, rgba(10,8,18,.42) 78%);
  border: 0; cursor: pointer; font-family: var(--mono);
  transition: opacity .45s ease;
}
.board-canvas.playing .board-enter,
.board-canvas.entering .board-enter { opacity: 0; pointer-events: none; }

.enter-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 30px;
  background: #0d0a16; border: 4px solid var(--gold);
  box-shadow: 0 0 0 4px #000, 0 10px 0 rgba(0,0,0,.5), 0 0 34px rgba(255,210,63,.45);
  animation: enterBreathe 2s ease-in-out infinite;
}
.enter-card img { image-rendering: auto; margin-bottom: 2px; }
.enter-card b { color: var(--gold); font-size: 17px; letter-spacing: .16em; }
.enter-card em { font-style: normal; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.board-enter:hover { text-decoration: none; }
.board-enter:hover .enter-card { transform: scale(1.05); }
@keyframes enterBreathe {
  0%, 100% { box-shadow: 0 0 0 4px #000, 0 10px 0 rgba(0,0,0,.5), 0 0 20px rgba(255,210,63,.30); }
  50%      { box-shadow: 0 0 0 4px #000, 0 10px 0 rgba(0,0,0,.5), 0 0 44px rgba(255,210,63,.75); }
}

.board-side { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.board-side .panel { margin-bottom: 0; }
/* the tile inspector eats the slack, so the rail ends level with the board */
.board-side .panel:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.board-side .panel:last-child .panel-body { flex: 1 1 auto; }

.toast {
  animation: toastIn .3s cubic-bezier(.2,1.5,.4,1);
  position: absolute; left: 50%; top: 11%; transform: translateX(-50%);
  background: #000; color: var(--gold); border: 4px solid var(--gold);
  padding: 10px 16px; font-size: 13px; font-weight: bold; letter-spacing: .08em;
  max-width: 80%; text-align: center; pointer-events: none;
  box-shadow: 0 6px 0 rgba(0,0,0,.5);
}

.clockrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.clock { font-size: 34px; font-weight: bold; color: var(--gold); text-shadow: 3px 3px 0 #000; }
.clock-meta { font-size: 11px; color: var(--muted); text-align: right; letter-spacing: .1em; }
.clock-meta b { color: #fff; }
.bar { height: 14px; background: #000; border: 3px solid #3a3358; margin-top: 10px; }
.bar i { display: block; height: 100%; background: var(--grass); transition: width .4s linear; }

.seat {
  display: flex; align-items: center; gap: 9px; padding: 7px 6px;
  border-bottom: 2px dotted #3a3358;
}
.seat:last-child { border-bottom: 0; }
.seat.active { background: rgba(255,210,63,.12); box-shadow: inset 3px 0 0 var(--gold); }
.seat.you .seat-name::after { content: " (YOU)"; color: var(--gold); font-size: 10px; }
.seat img { width: 30px; height: 30px; image-rendering: pixelated; transition: transform .18s; }
.seat:hover img { transform: scale(1.18) rotate(-6deg); }
.seat.active img { animation: seatHop .9s ease-in-out infinite; }
@keyframes seatHop {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-6px); }
  60%      { transform: translateY(-2px); }
}
.seat { transition: background .25s; }
.seat.active { animation: seatGlow 1.8s ease-in-out infinite; }
@keyframes seatGlow {
  0%, 100% { box-shadow: inset 3px 0 0 var(--gold); }
  50%      { box-shadow: inset 3px 0 0 var(--gold), inset 0 0 26px rgba(255,210,63,.16); }
}
.seat-main { flex: 1; min-width: 0; }
.seat-name { font-size: 12px; font-weight: bold; letter-spacing: .08em; }
.seat-addr { font-size: 10px; color: var(--muted); }
.seat-bag { font-size: 15px; font-weight: bold; color: var(--grass); }
.seat-jail { font-size: 10px; color: var(--red); letter-spacing: .1em; }

.dicebox { display: flex; justify-content: center; padding: 4px 0 10px; }
#diceCanvas { width: 160px; height: 80px; }
.hashline { margin-top: 9px; font-size: 10px; letter-spacing: .1em; color: var(--muted); }

.taxflow { margin-bottom: 0; }
.log { max-height: 260px; min-height: 150px; overflow-y: auto; padding: 8px 12px; }
.log-line {
  font-size: 12px; padding: 4px 0; border-bottom: 1px dotted #2c2647;
  display: flex; gap: 8px;
}
.log-line .t { color: #5f5985; font-size: 10px; flex: 0 0 46px; }
.log-line.good .m { color: #9ae88a; }
.log-line.bad .m { color: #ff8a8a; }
.log-line.jail .m { color: #ffab5e; }
.log-line.card .m { color: #b39bff; }
.log-line.jackpot .m { color: var(--gold); font-weight: bold; }
.log-line.sys .m { color: var(--gold); }
.log-line.roll .m { color: #cfcbea; }

.holdings { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hold {
  font-size: 10px; background: #000; border: 2px solid #3a3358;
  padding: 2px 5px; color: #cfcbea;
}

/* ---- tile inspector ------------------------------------------------------ */

#tileInspector .tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#tileInspector img { width: 40px; height: 40px; image-rendering: pixelated; }
#tileInspector .tile-title { font-size: 18px; font-weight: bold; color: var(--gold); }
#tileInspector .tile-kind { font-size: 10px; letter-spacing: .16em; color: var(--muted); }

/* ---- raffle -------------------------------------------------------------- */

.raffle-grid, .token-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bigcount {
  font-size: 46px; font-weight: bold; color: var(--gold);
  text-shadow: 3px 3px 0 #000; text-align: center; padding: 6px 0 14px;
}
.stepper { display: flex; gap: 8px; align-items: stretch; }
@keyframes toastIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.94); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.stepper input {
  flex: 1; background: #000; color: var(--gold); border: 3px solid #3a3358;
  font-family: var(--mono); font-size: 20px; font-weight: bold; text-align: center;
  padding: 6px;
}
.drawn { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.drawn img { width: 34px; height: 34px; image-rendering: pixelated; border: 3px solid #000; background: #0d0a16; }

/* ---- token --------------------------------------------------------------- */

.flowrow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.flowbox {
  flex: 1; min-width: 130px; padding: 16px 12px; text-align: center;
  border: 4px solid #000; box-shadow: inset 3px 3px 0 rgba(255,255,255,.2), inset -3px -3px 0 rgba(0,0,0,.45);
}
.flowbox b { display: block; font-size: 30px; line-height: 1; margin-bottom: 6px; }
.flowbox span { font-size: 10px; letter-spacing: .12em; }
.flow-board { background: var(--grass); color: #06240a; }
.flow-vault { background: var(--gold); color: #241a00; }
.flow-ops   { background: var(--stone); color: #14100a; }

/* ---- rules --------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0 24px; }
.step {
  background: var(--ink); border: 4px solid #000; padding: 16px;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.08), 0 5px 0 rgba(0,0,0,.35);
}
.stepno {
  width: 34px; height: 34px; background: var(--gold); color: #241a00;
  font-weight: bold; font-size: 18px; display: flex; align-items: center;
  justify-content: center; border: 3px solid #000; margin-bottom: 10px;
}
.step h3 { color: #fff; }
.step p { font-size: 12px; color: var(--muted); margin: 0; }

#legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
          gap: 16px 12px; align-items: start; }
.legend-item { display: flex; gap: 10px; align-items: flex-start; }
.legend-item img {
  width: 34px; height: 34px; image-rendering: pixelated;
  animation: idleBob 3.2s ease-in-out infinite;
  transition: transform .18s cubic-bezier(.3,1.6,.5,1);
}
.legend-item:hover img { transform: translateY(-5px) rotate(-8deg) scale(1.22); animation: none; }
@keyframes idleBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.legend-item b { display: block; font-size: 12px; color: var(--gold); letter-spacing: .1em;
                 line-height: 1.7; }
.legend-item span { font-size: 11px; color: var(--muted); }

/* ---- footer -------------------------------------------------------------- */

.footer { background: #0b0812; border-top: 6px solid #000; padding: 34px 0; }
.foot-inner {
  display: flex; gap: 30px;
  justify-content: space-between; flex-wrap: wrap;
}
.foot-inner b { color: var(--gold); letter-spacing: .14em; }
.foot-inner .fine { max-width: 560px; margin-top: 8px; }
.footlinks { display: flex; gap: 16px; font-size: 12px; letter-spacing: .14em; }

/* ---- touch ---------------------------------------------------------------- */
/* Width says how to lay the page out; this says whether a finger is doing the
   pointing. A 1024 tablet in landscape is wide and still needs big targets. */

@media (hover: none) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; padding: 9px 13px; }
  .nav a { padding: 11px 4px; }
  .stepper button { min-width: 52px; min-height: 52px; }
  .stepper input { min-height: 52px; }
  .footlinks a { padding: 11px 14px; min-width: 64px; text-align: center; }
  .brand { padding: 5px 0; }
  /* no pointer means no hover shine and no pointer parallax to invite */
  .btn:hover::after { animation: none; }
  .btn:hover { transform: none; }
}

/* ---- motion opt-out ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .board-canvas.showcase #boardCanvas { transform: none; }
}

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 980px) {
  /* The topbar stops being sticky: on a phone that strip is a tenth of the
     screen for the whole scroll, and the burn button connects a wallet by
     itself. The section links wrap onto their own row so an 7,500px page is
     still navigable. */
  .topbar { position: static; }
  .topbar-inner { flex-wrap: wrap; gap: 8px 14px; }
  .nav {
    display: flex; order: 3; width: 100%; margin: 2px 0 0;
    justify-content: space-between; gap: 4px; font-size: 12px;
  }
  .nav a { padding: 11px 4px; }

  .mode-switch { margin-left: 0; }        /* share the rail instead of floating right */
  .board-wrap { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .board-canvas { grid-column: 1; grid-row: 1; }
  .board-side { grid-column: 1; grid-row: 2; }
  .board-wrap .log-panel { grid-column: 1; grid-row: 3; }
  .raffle-grid, .token-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }

  /* single column means the board is nearly as wide as the screen, so the
     showcase tilt has to stay inside it: rotateZ widens the bounding box and
     perspective widens the near edge */
  .board-canvas.showcase #boardCanvas { transform: rotateX(15deg) rotateZ(-2deg) scale(.93); }
  .board-canvas.entering #boardCanvas { animation-name: enterBoardNarrow; }
  @keyframes enterBoardNarrow {
    0%   { transform: rotateX(15deg) rotateZ(-2deg) scale(.93); }
    32%  { transform: rotateX(48deg) rotateZ(4deg) scale(.86); }
    64%  { transform: rotateX(-8deg) rotateZ(-1deg) scale(1.02); }
    100% { transform: none; }
  }

  /* nothing you can tap is smaller than a fingertip */
  .btn { min-height: 44px; padding: 11px 16px; }
  .btn-sm { min-height: 40px; padding: 9px 13px; font-size: 11px; }
  .stepper button { min-width: 52px; min-height: 52px; font-size: 20px; }
  .stepper input { min-height: 52px; font-size: 22px; }
  .footlinks { gap: 8px; flex-wrap: wrap; }
  .footlinks a {
    min-width: 64px; text-align: center;
    padding: 11px 14px; border: 3px solid #000; background: var(--ink-3);
  }
  .brand { padding: 5px 0; }
}
@media (max-width: 900px) {
  .hero-inner { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero-art { width: 260px; margin: 4px auto -22px; }
}
@media (max-width: 620px) {
  .steps { grid-template-columns: 1fr; }
  .cd span { font-size: 28px; min-width: 52px; }
  h2 { font-size: 22px; }
  .section { padding: 38px 0; }
  .wrap { padding: 0 14px; }

  /* the board takes the whole screen width: 40px of gutter is two more pixels
     on every tile, and at this size every pixel is the difference between a
     ticker you can read and one you cannot */
  .board-canvas { margin-left: -14px; margin-right: -14px; }
  #boardCanvas { border-left: 0; border-right: 0; }

  /* A gentler tilt, because a phone board cannot spare the size. No rotateZ:
     the board is flush to both screen edges here, and rotating a square 2deg
     makes its bounding box 3% wider, which is a real horizontal scrollbar. */
  /* perspective makes the near edge of a tilted board wider than the element
     (1500px of perspective over an 11deg tilt is about 2.5%), and the board is
     already flush to both screen edges, so scale it back inside the viewport */
  .board-canvas.showcase #boardCanvas { transform: rotateX(11deg) scale(.96); }
  .board-canvas.entering #boardCanvas { animation-name: enterBoardPhone; }
  @keyframes enterBoardPhone {
    0%   { transform: rotateX(11deg) scale(.96); }
    32%  { transform: rotateX(46deg) scale(.9); }
    64%  { transform: rotateX(-7deg) scale(1.02); }
    100% { transform: none; }
  }
  .enter-card { padding: 14px 20px; }
  .enter-card b { font-size: 14px; }

  /* order for a thumb: board, then roll, then what you just tapped */
  .board-side { gap: 12px; }
  .board-side .panel:nth-child(1) { order: 3; }   /* clock  */
  .board-side .panel:nth-child(2) { order: 4; }   /* seats  */
  .board-side .panel:nth-child(3) { order: 1; }   /* dice   */
  .board-side .panel:nth-child(4) { order: 2; }   /* tile   */


  .log { max-height: 210px; }
  .lede { font-size: 15px; }
  .section-sub { font-size: 13px; margin-bottom: 18px; }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-stats li { padding: 9px 12px; }
  .foot-inner { flex-direction: column; gap: 18px; }
}