/* The pixel view: a sixteen-colour tavern at night. Square corners, hard
   four-pixel shadows, a pixel font (VT323, vendored, OFL), sprites drawn
   without smoothing, and wheels that click round in steps. */
@font-face { font-family: "VT323"; src: url("vendor/vt323-spins.woff2") format("woff2"); font-display: swap; }
:root {
  --bg: #1b1220;
  --card: #f2d7a2;
  --ink: #140c10;
  --muted: #8b6f5a;
  --focus: #5fcde4;
  --red: #c8323c;
  --red-hi: #f0705a;
  --blue: #3060c8;
  --blue-hi: #7aa8ff;
  --gilt: #f0b830;
  --wood: #b8743c;
  --wood-dk: #6e3c22;
  --walnut: #54301c;
  --oak: #8a5228;
  --birch: #f4e2b0;
  --steel: #a8b4c0;
  --skin: #f0b884;
  --felt: #2f5a3a;
  --line: 4px;
  --radius: 0;
  --display: "VT323", ui-monospace, monospace;
  --body: "VT323", ui-monospace, monospace;
  --body-size: 21px;
  --display-size: 34px;
  --h2-size: 36px;
  --sign-size: 92px;
  --spin-ease: steps(18, end);
  --veil: rgba(10, 6, 12, .7);
}
svg { image-rendering: pixelated; }
.f-red { fill: var(--red); } .f-red-hi { fill: var(--red-hi); } .f-blue { fill: var(--blue); } .f-blue-hi { fill: var(--blue-hi); }
.f-gilt { fill: var(--gilt); } .f-wood { fill: var(--wood); } .f-wood-dk { fill: var(--wood-dk); } .f-walnut { fill: var(--walnut); }
.f-oak { fill: var(--oak); } .f-birch { fill: var(--birch); } .f-steel { fill: var(--steel); } .f-skin { fill: var(--skin); }
.f-ink { fill: var(--ink); } .f-seat { fill: var(--seat, var(--wood)); }
body { color: var(--card); }
.brand { color: var(--gilt); text-shadow: 4px 4px 0 var(--red); }
.views a { background: var(--walnut); color: var(--card); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.views a[aria-current="page"] { background: var(--gilt); color: var(--ink); }
button.act, #sound, #skip { background: var(--card); color: var(--ink); border: 4px solid var(--ink); padding: 2px 12px; box-shadow: 4px 4px 0 var(--ink); font-size: 22px; line-height: 1.1; }
button.act:active { transform: translate(4px, 4px); box-shadow: none; }
button.act.primary { background: var(--red); color: var(--card); }
button.act.on { background: var(--gilt); }
button.act.quiet, #sound, #skip { background: var(--walnut); color: var(--card); }
button:disabled { opacity: .5; cursor: default; }

.panel { background: var(--walnut); color: var(--card); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink), inset 0 0 0 4px var(--wood-dk); }
.kind-sign { background: var(--wood-dk); }
.kind-sign h2 { color: var(--gilt); text-shadow: 6px 6px 0 var(--red); }
.kind-card { --seat: var(--wood); }
.kind-card[data-mark="red"] { --seat: var(--red); box-shadow: 8px 8px 0 var(--ink), inset 0 0 0 4px var(--red); }
.kind-card[data-mark="blue"] { --seat: var(--blue); box-shadow: 8px 8px 0 var(--ink), inset 0 0 0 4px var(--blue); }
.kind-card .art { width: 128px; height: 160px; }
.kind-notice, .kind-scroll { background: var(--card); color: var(--ink); }
.kind-bar { background: var(--felt); }

.table { background: var(--felt); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 12px; background-image: linear-gradient(var(--ink) 2px, transparent 2px), linear-gradient(90deg, var(--ink) 2px, transparent 2px); background-size: 32px 32px; background-position: -1px -1px; background-blend-mode: soft-light; }
.seam { height: 4px; background: repeating-linear-gradient(90deg, var(--gilt) 0 8px, transparent 8px 16px); }
.plaque-in { background: var(--ink); color: var(--card); border: 4px solid var(--wood-dk); font-size: 24px; }
.health .cell { width: 12px; height: 12px; background: var(--walnut); }
.health .cell.on { background: var(--red); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .35); }
.wheels { background: var(--wood-dk); border: 4px solid var(--ink); padding: 8px; box-shadow: 6px 6px 0 var(--ink), inset 0 0 0 4px var(--oak); }
.wheels.covered { background: repeating-linear-gradient(90deg, var(--walnut) 0 16px, var(--wood-dk) 16px 32px); color: var(--gilt); font-size: 28px; }
.spins .cell { width: 14px; height: 14px; background: var(--walnut); border: 2px solid var(--ink); }
.spins .cell.on { background: var(--gilt); }
.window { background: var(--card); border: 4px solid var(--ink); }
.window::after { content: ""; position: absolute; inset: var(--cell) 0; border-block: 4px solid var(--ink); background: rgba(255, 255, 255, .12); pointer-events: none; }
.wheel.locked .window { border-color: var(--gilt); }
.wheel.locked { transform: translateY(4px); }
.face { border-bottom: 2px dashed rgba(20, 12, 16, .25); }
.face[data-gilded] { background: var(--card); box-shadow: inset 0 0 0 6px var(--card), inset 0 0 0 10px var(--gilt); }
.legend .label strong { color: var(--gilt); font-size: 24px; text-shadow: 2px 2px 0 var(--ink); }
.legend .level { color: var(--card); }
.legend.level-1 .figure { filter: drop-shadow(4px 0 0 var(--steel)) drop-shadow(-4px 0 0 var(--steel)); }
.legend.level-2 .figure { filter: drop-shadow(4px 0 0 var(--gilt)) drop-shadow(-4px 0 0 var(--gilt)); }
.energy .cell { background: var(--ink); border: 2px solid var(--wood-dk); }
.legend.seat-red .energy .cell.on { background: var(--red); }
.legend.seat-blue .energy .cell.on { background: var(--blue); }
.xp .cell { border-radius: 0; width: 8px; height: 8px; background: var(--ink); }
.xp .cell.on { background: var(--gilt); }
.num { color: var(--card); font-size: 20px; }
.plank { background: var(--wood); border: 2px solid var(--ink); box-shadow: inset 0 -3px 0 var(--wood-dk); }
.controls { background: var(--ink); color: var(--card); border: 4px solid var(--wood-dk); }
.count { padding: 0 6px; font-size: 24px; }
.count.pays { background: var(--gilt); color: var(--ink); }
.log { background: var(--ink); color: var(--card); border: 4px solid var(--wood-dk); font-size: 19px; }
.log li:first-child { color: var(--gilt); }
.table[data-event="hit"][data-event-side="0"] .half.you .plaque-in,
.table[data-event="hit"][data-event-side="1"] .half.them .plaque-in,
.table[data-event="hit"][data-event-side="0"] .half.you .planks,
.table[data-event="hit"][data-event-side="1"] .half.them .planks { animation: blink .3s steps(2) 2; }
@keyframes blink { 50% { opacity: .2; } }