/* ===========================================================================
   HEXPLORERS - the game's own layer on top of the website's branding.css.

   branding.css is linked first, unchanged (the deploy copies it and its
   Fonts/ from the website build into shared/): the reset, the switch that
   runs the dock's tabs, the chip. This file then dresses it as the Velvet
   Gramophone demo (Projects/Bit Bandit/Velvet Gramophone Encore/index.html,
   30/09, his call): the noir ground, square corners, brass, teal and neon,
   Limelight for titles, VT323 for every label and number, Barlow to read,
   and cartridges for buttons. It does that by redefining the site's own
   tokens below, so the site's rules pick the new look up by themselves.

   The four fonts are served from fonts/ beside this file (the site's policy
   allows no third party, so no Google Fonts link).

   Mobile first: the base rules are the phone layout; the one media query at
   the end turns the dock into a side column on a wide screen.
   ======================================================================== */

@font-face { font-family: 'Barlow'; src: url('fonts/barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/barlow-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Limelight'; src: url('fonts/limelight-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'VT323'; src: url('fonts/vt323-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Bungee'; src: url('fonts/bungee-400.woff2') format('woff2'); font-display: swap; }

:root {
  /* the Velvet Gramophone palette */
  --ground: #0c0a10;
  --brass: #d9a441;
  --teal: #3ee6c8;
  --neon: #ff5ad8;
  --velvet: #8e1b3a;

  /* ... poured into the site's tokens, so branding.css wears it too */
  --bg: var(--ground);
  --band: #110e15;
  --bg-alt: #151119;
  --panel: #1b1620;
  --line: #2b2331;
  --text: #ece3d6;
  --head: #ece3d6;
  --muted: #9d90a6;
  --pink: var(--neon);
  --pink-text: #ff8ee6;
  --pink-hover: #ffb8ef;
  --green: var(--teal);
  --yellow: var(--teal);          /* the focus ring: teal, as in the demo */
  --rose-text: #ff7d8f;
  --radius: 0;
  --font-head: 'Limelight', Georgia, serif;
  --font-body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --font-pixel: 'VT323', 'Courier New', monospace;
  --font-mark: 'Bungee', Impact, sans-serif;

  /* the board and the resources. The script reads these at start, so a
     colour is decided only here. */
  --tile-grass: #7fa84e;
  --tile-forest: #37684a;
  --tile-mountain: #7f7d8e;
  --tile-water: #23889c;
  --tile-keep: #342a45;
  --res-food: #e2a24f;
  --res-wood: #a86b3c;
  --res-stone: #a4a8b3;
  --res-gold: #f2c230;
  --bit-cyan: var(--teal);

  --dock-max: 46dvh;
  --tap: 2.75rem;          /* the smallest thing a thumb has to hit */
}

/* ---- page ---------------------------------------------------------------- */
html { background: var(--ground); }
body.hx {
  font: 15px/1.55 var(--font-body);
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}
.hx p { margin: 0 0 .8em; }
.hx strong, .hx b { font-weight: 600; color: var(--text); }
/* section labels are the demo's: pixel type, uppercase, spaced */
.hx h2, .hx h3 {
  font: 400 22px/1 var(--font-pixel); letter-spacing: .1em; text-transform: uppercase;
  color: var(--head); margin: 0 0 .6rem;
}
.hx h3 { font-size: 20px; color: var(--brass); }
.hx .muted { color: var(--muted); }
.hx .err { color: var(--rose-text); }
.hx .good { color: var(--teal); }
.hx .hint { font-size: .88rem; color: var(--muted); margin: .5rem 0; }
.hx a { color: var(--brass); }
.hx a:hover { color: #f0c46c; }
.hx .px { font-family: var(--font-pixel); letter-spacing: .06em; text-transform: uppercase; }

/* ---- buttons: the demo's camera buttons; .primary is its needle ---------- */
.hx button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: var(--tap); padding: .45rem 1rem;
  font: 500 14px/1.2 var(--font-body); letter-spacing: 0;
  color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 0;
  cursor: pointer; touch-action: manipulation;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.hx button:hover:not(:disabled) { border-color: #4a3c52; color: var(--text); background: var(--panel); }
.hx button:active:not(:disabled) { transform: translateY(1px); }
.hx button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.hx button:disabled { opacity: .38; cursor: default; }
.hx button.primary {
  font: 18px/1 var(--font-pixel); letter-spacing: .08em; text-transform: uppercase;
  color: var(--brass); background: rgba(12,10,16,.72); border-color: rgba(217,164,65,.6);
}
.hx button.primary:hover:not(:disabled) { color: #f0c46c; border-color: var(--brass); background: rgba(217,164,65,.08); }
.hx button.teal { color: var(--teal); border-color: rgba(62,230,200,.5); }
.hx button.teal:hover:not(:disabled) { color: var(--teal); border-color: var(--teal); background: rgba(62,230,200,.08); }
.hx button.quiet { color: var(--text); }
.hx button.small { min-height: 2.1rem; padding: .25rem .7rem; font-size: 13px; }
.hx button.primary.small { font-size: 16px; }
.hx button.wide { width: 100%; }
.hx button.on { color: var(--text); border-color: var(--brass); background: var(--panel); }

.hx input, .hx select {
  font: 500 15px var(--font-body); color: var(--text); background: var(--ground);
  border: 1px solid var(--line); border-radius: 0;
  min-height: var(--tap); padding: .45rem .75rem; width: 100%;
}
.hx input::placeholder { color: #6d6275; }
.hx input:focus-visible, .hx select:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.hx .row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.hx .row > input { flex: 1; min-width: 7rem; width: auto; }

/* ---- the lockup: the studio mark over the title ---------------------------- */
.mark { display: flex; align-items: center; gap: 10px; font: 400 15px/1 var(--font-mark); letter-spacing: .04em; }
.mark svg { width: 34px; height: 20px; flex: none; }
.mark b {
  font-weight: 400; color: transparent;
  background: linear-gradient(90deg, var(--teal), #7af0ff 45%, var(--neon)); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 6px rgba(62,230,200,.35));
}
.mark span { color: var(--muted); font: 16px/1 var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; }

/* ---- menu and lobby ------------------------------------------------------ */
.hx-page {
  width: min(34rem, 100% - 2rem); margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) 0 max(1.5rem, env(safe-area-inset-bottom));
}
.hx-hero { display: block; width: min(15rem, 70%); height: auto; margin: .5rem auto 0; filter: drop-shadow(0 18px 30px rgba(142,27,58,.35)); }
.hx-title {
  font: 400 clamp(40px, 12vw, 58px)/1 var(--font-head); color: var(--brass);
  letter-spacing: .01em; margin: .6rem 0 0;
}
.hx-title em { font: 400 .42em/1 var(--font-pixel); font-style: normal; color: var(--text); letter-spacing: .14em; text-transform: uppercase; margin-left: .35em; vertical-align: .45em; }
.hx-sub { color: var(--muted); margin: .5rem 0 1.25rem; }
.hx-panel { background: var(--panel); border: 1px solid var(--line); padding: 1rem; margin-bottom: .85rem; }
.hx-panel.lit { border-color: var(--brass); box-shadow: inset 0 3px 0 var(--brass); }
.hx-code {
  font: 400 64px/1 var(--font-pixel); color: var(--brass); letter-spacing: .3em;
  text-align: center; margin: .2rem 0 0 .3em; text-shadow: 3px 3px 0 #000;
}
.hx-qr { width: 11rem; margin: .75rem auto .5rem; background: var(--text); padding: .4rem; }
.hx-qr svg { display: block; width: 100%; height: auto; }
.lobby-p { display: flex; gap: .6rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lobby-p:last-of-type { border-bottom: 0; }
.lobby-p .nm { flex: 1; font-weight: 600; min-width: 6rem; }
.swatches { display: flex; gap: .35rem; flex-basis: 100%; }
.swatches button { min-height: 2rem; width: 2rem; padding: 0; background: var(--c); border: 2px solid var(--ground); transform: rotate(45deg) scale(.8); }
.swatches button.on { outline: 2px solid var(--brass); outline-offset: 2px; border-color: var(--ground); background: var(--c); }
.swatches button:hover:not(:disabled) { background: var(--c); border-color: var(--text); }
.swatches button:active:not(:disabled) { transform: rotate(45deg) scale(.75); }
.swatches button:disabled { opacity: .15; }
.supply { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .5rem .9rem; }
.supply label { display: flex; align-items: center; gap: .5rem; }
.supply label span { flex: 1; }
.supply input { width: 4.2rem; flex: none; font: 20px var(--font-pixel); color: var(--brass); }

/* a player's colour: a small diamond, like the demo's Ranger marker */
.dot { width: .72rem; height: .72rem; flex: none; background: var(--c); transform: rotate(45deg); box-shadow: 0 0 0 1px rgba(0,0,0,.7); }

/* ---- the game screen ------------------------------------------------------ */
#game {
  display: grid; height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "board" "dock";
}
#top {
  grid-area: top; display: flex; align-items: center; gap: .6rem;
  padding: max(.4rem, env(safe-area-inset-top)) .75rem .4rem;
  background: var(--ground); border-bottom: 1px solid var(--line);
}
#top .logo { font: 400 21px/1 var(--font-head); color: var(--brass); }
#status { flex: 1; min-width: 0; font-size: 14px; line-height: 1.25; text-align: center; }
#status small { display: block; font: 16px/1 var(--font-pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: .15rem; }
#top button { min-height: 2.3rem; padding: .2rem .7rem; }

/* the stage: a noir room with one warm lamp over the table */
#boardwrap {
  grid-area: board; position: relative; overflow: hidden; background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(217,164,65,.13), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 115%, rgba(142,27,58,.32), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #17111e, var(--ground) 80%);
}
#board { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
#board.dragging { cursor: grabbing; }
.hud { position: absolute; left: 12px; top: 8px; font: 22px/1.05 var(--font-pixel); color: var(--brass); text-shadow: 2px 2px 0 #000; pointer-events: none; letter-spacing: .03em; }
.hud small { display: block; font-size: 17px; color: var(--text); opacity: .85; }
.bug { position: absolute; right: 56px; top: 12px; display: flex; align-items: center; gap: 7px; font: 12px/1 var(--font-mark); color: var(--text); opacity: .7; pointer-events: none; }
.bug svg { width: 26px; height: 15px; }
.stage-hint { position: absolute; right: 12px; bottom: 8px; font: 16px/1 var(--font-pixel); color: var(--text); opacity: .55; text-shadow: 2px 2px 0 #000; pointer-events: none; letter-spacing: .04em; }
#fit { position: absolute; right: .6rem; top: .5rem; min-height: 2.2rem; padding: .1rem .6rem; background: rgba(12,10,16,.72); }

#dock {
  grid-area: dock; display: flex; flex-direction: column; min-height: 0;
  max-height: var(--dock-max);
  background: var(--ground); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
#game.placing #dock { max-height: none; }
#game.placing #tabs { display: none; }

/* storage: your tokens, always in view */
#hand { display: flex; gap: .4rem; align-items: stretch; padding: .55rem .75rem .45rem; }
#hand .who { display: none; }

/* the site's switch, as the dock's tabs, in the demo's shot-button dress */
#tabs { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#tabs .switch { width: auto; margin: 0; padding: 0 .75rem .5rem; gap: .35rem; flex-wrap: nowrap; border-bottom: 1px solid var(--line); }
#tabs .switch label {
  flex: 1; text-align: center; padding: .3rem .2rem; min-height: 2.4rem;
  display: flex; align-items: center; justify-content: center; gap: .35em;
  font: 18px/1 var(--font-pixel); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 0; transform: none;
}
#tabs .switch label:hover { color: var(--text); border-color: #4a3c52; background: var(--panel); transform: none; }
#tabs .pick:checked + label { color: var(--brass); border-color: var(--brass); background: var(--panel); box-shadow: inset 0 3px 0 var(--brass); }
#tabs .pick:focus-visible + label { outline: 2px solid var(--teal); outline-offset: 2px; }
#tabs .switch label .badge { font: 15px/1 var(--font-pixel); color: var(--neon); border: 1px solid rgba(255,90,216,.5); padding: 1px 5px 0; }
#tabs .panes { overflow: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
#tabs .panes > div { padding: .75rem; }

/* ---- cartridges: resource cards, explore and build ------------------------ */
/* The demo's console cartridges: a panel with a stripe along the top. A
   resource's stripe is its own colour; a chosen cartridge's is brass. */
.res-card, .hx .acts button {
  position: relative; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg-alt));
}
.res-card::before, .hx .acts button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--line); }
.res-card::before { background: var(--res); opacity: .85; }

.res-card {
  --res: var(--res-food);
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: .45rem .2rem .3rem; color: var(--text);
}
.res-card .badge {
  width: 2.1rem; aspect-ratio: 1 / 1.1; display: grid; place-items: center;
  background: color-mix(in srgb, var(--res) 26%, var(--ground));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.res-card .badge svg { width: 80%; height: 80%; }
.res-card .nm { font: 15px/1 var(--font-pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.res-card .n { font: 26px/1 var(--font-pixel); color: var(--brass); font-variant-numeric: tabular-nums; margin-top: .15rem; }
.res-card .plus {
  position: absolute; top: -.55rem; right: -.25rem;
  font: 17px/1 var(--font-pixel); padding: 2px 6px 1px; background: var(--ground);
  color: var(--teal); border: 1px solid var(--teal); box-shadow: 0 0 8px rgba(62,230,200,.4);
}
.res-card.bump { animation: bump .45s ease-out; }
@keyframes bump { 35% { transform: translateY(-6px); border-color: var(--teal); } }

.gather-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .6rem 0; }
.hx button.res-card { min-height: 0; padding: .8rem .25rem .6rem; gap: .2rem; background: linear-gradient(180deg, var(--panel), var(--bg-alt)); }
.hx button.res-card:hover:not(:disabled) { border-color: var(--res); background: linear-gradient(180deg, var(--panel), var(--bg-alt)); }
.hx button.res-card:active:not(:disabled) { transform: translateY(2px); }
.hx button.res-card .badge { width: 3.2rem; }
.hx button.res-card .left { font: 17px/1 var(--font-pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hx button.res-card .left b { font-weight: 400; font-size: 26px; color: var(--brass); }
.hx button.res-card:disabled { opacity: .3; }

.gather-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.picks-left { font: 18px/1 var(--font-pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.picks-left b { font-weight: 400; color: var(--brass); font-size: 30px; text-shadow: 2px 2px 0 #000; }
.pips { display: inline-flex; gap: .3rem; vertical-align: middle; margin-left: .4rem; }
.pips i { width: 10px; height: 10px; border-radius: 50%; background: var(--brass); opacity: .18; }
.pips i.full { opacity: 1; box-shadow: 0 0 8px rgba(217,164,65,.8); }

.acts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; margin: .4rem 0 .9rem; }
.hx .acts button { justify-content: flex-start; text-align: left; gap: .6rem; padding: .55rem .55rem .4rem; min-height: 3.5rem; }
.hx .acts button:hover:not(:disabled) { border-color: #4a3c52; background: linear-gradient(180deg, var(--panel), var(--bg-alt)); }
.hx .acts button.on { border-color: var(--brass); }
.hx .acts button.on::before { background: var(--brass); }
.acts button svg { width: 2.3rem; height: 2.3rem; flex: none; }
.acts button > span { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; font: 600 15px/1.15 var(--font-body); }
.acts button small { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font: 16px/1 var(--font-pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; }
.cost { display: inline-flex; gap: .15rem .45rem; flex-wrap: wrap; align-items: center; }
.cost .c { display: inline-flex; align-items: center; gap: .1rem; font-family: var(--font-pixel); color: var(--brass); font-size: 17px; }
.cost svg { width: 1.05rem !important; height: 1.05rem !important; }

.placing-bar { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem .65rem; }
.placing-bar p { flex: 1; margin: 0; font: 18px/1.1 var(--font-pixel); letter-spacing: .05em; text-transform: uppercase; color: var(--brass); }

/* ---- trade ------------------------------------------------------------------ */
.trade-grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: .35rem .5rem; align-items: center; margin: .5rem 0; }
.trade-grid .h { font: 16px/1 var(--font-pixel); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); text-align: center; }
.trade-grid .r { display: flex; align-items: center; gap: .35rem; font-size: 14px; }
.trade-grid .r svg { width: 1.4rem; height: 1.4rem; }
.stepper { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.stepper b { min-width: 1.2rem; text-align: center; font: 22px/1 var(--font-pixel); color: var(--brass); }
.hx .stepper button { min-height: 2.3rem; width: 2.3rem; padding: 0; font-size: 1.1rem; }
.offer { background: var(--panel); border: 1px solid var(--line); padding: .6rem .7rem; margin: .45rem 0; }
.offer .row { margin-top: .45rem; }

/* ---- players and log: the orchestra list, lamps and all --------------------- */
.pl { display: flex; gap: .65rem; align-items: center; padding: .55rem .6rem; border: 1px solid transparent; margin-bottom: .3rem; }
.pl.active { border-color: var(--line); background: var(--panel); }
.pl .lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--brass); opacity: .18; flex: none; }
.pl.active .lamp { opacity: 1; box-shadow: 0 0 8px rgba(217,164,65,.8); }
.pl .info { flex: 1; min-width: 0; }
.pl .nm { font-weight: 600; }
.pl .vp { font: 30px/1 var(--font-pixel); color: var(--brass); text-align: right; min-width: 2.4rem; }
.pl .vp small { display: block; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .2rem; }
.chips .chip {
  display: inline-flex; align-items: center; gap: .25rem; padding: 2px 7px 1px 4px; border-radius: 0;
  font: 16px/1 var(--font-pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--text); background: var(--ground); border-color: var(--line);
}
.chips .chip svg { width: .95rem; height: .95rem; }
#log { font-size: 14px; }
#log div { padding: .12rem 0; color: var(--muted); }
#log div.chat { color: var(--text); }
.chatrow { display: flex; gap: .4rem; margin-top: .6rem; position: sticky; bottom: 0; background: var(--ground); padding-top: .4rem; }
.chatrow input { flex: 1; }

/* ---- board ------------------------------------------------------------------ */
.hl { fill: var(--brass); fill-opacity: .12; stroke: var(--brass); stroke-width: 3; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .hl { animation: hl-pulse 1.3s ease-in-out infinite; }
  .bits rect { animation: bit-float 3.2s ease-in-out infinite; }
  .bits rect:nth-child(2n) { animation-delay: -1.1s; animation-duration: 2.6s; }
  .bits rect:nth-child(3n) { animation-delay: -2s; animation-duration: 3.8s; }
}
@keyframes hl-pulse { 50% { stroke-opacity: .3; fill-opacity: .04; } }
@keyframes bit-float { 50% { transform: translateY(-5px); opacity: .45; } }
.ghost { fill: none; stroke: #2b2331; stroke-width: 1.2; stroke-dasharray: 3 5; opacity: .8; }
.lbl-cost { font: 20px var(--font-pixel); fill: var(--brass); paint-order: stroke; stroke: #000; stroke-width: 4px; pointer-events: none; letter-spacing: .04em; }
.site-ring { fill: none; stroke: var(--teal); stroke-width: 3; stroke-dasharray: 7 5; pointer-events: none; }

/* ---- overlays --------------------------------------------------------------- */
.hx-modal { position: fixed; inset: 0; z-index: 30; background: rgba(6,5,9,.78); display: flex; align-items: flex-end; justify-content: center; }
.hx-modal .hx-panel {
  width: 100%; max-width: 36rem; max-height: 88dvh; overflow: auto; margin: 0;
  box-shadow: inset 0 3px 0 var(--brass); padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.hx-modal h2 { font: 400 32px/1.05 var(--font-head); letter-spacing: 0; text-transform: none; color: var(--brass); }
.menu-list { display: grid; gap: .45rem; }
.toast {
  position: fixed; left: 50%; bottom: calc(var(--dock-max) + 1rem); transform: translateX(-50%);
  z-index: 40; max-width: calc(100% - 2rem);
  background: rgba(12,10,16,.92); color: var(--brass); border: 1px solid rgba(217,164,65,.6);
  font: 20px/1.1 var(--font-pixel); letter-spacing: .05em; text-transform: uppercase;
  padding: .5rem .9rem .4rem; text-shadow: 2px 2px 0 #000;
}
body:not(:has(#game)) .toast { bottom: 1.5rem; }

/* ---- wide screens: the dock becomes a side column ------------------------- */
@media (min-width: 60em) {
  #game {
    grid-template-columns: minmax(0, 1fr) 24rem;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "top top" "board dock";
  }
  #dock { max-height: none; border-top: 0; border-left: 1px solid var(--line); }
  #game.placing #tabs { display: flex; }
  #hand .who { display: block; }
  .toast { bottom: 2rem; left: calc(50% - 12rem); }
  .hx-modal { align-items: center; padding: 1rem; }
}
@media (max-width: 35em) {
  .bug, .stage-hint { display: none; }
  .hud { font-size: 18px; } .hud small { font-size: 15px; }
}

/* ---- pixel sprites ------------------------------------------------------------ */
svg.pix { image-rendering: pixelated; display: block; }
.res-card .badge svg.pix { width: 70%; height: 70%; }
.hx button.res-card .badge svg.pix { width: 72%; height: 72%; }
.acts button svg.pix { width: 2.2rem; height: 2.2rem; }
.cost svg.pix, .chips .chip svg.pix, .trade-grid .r svg.pix { display: inline-block; }
.supply svg.pix { width: 1.8rem; height: 1.8rem; flex: none; }
#top .logo { display: flex; align-items: center; gap: .45rem; }
#top .logo svg.pix { width: 1.6rem; height: 1.6rem; }
#top button svg.pix, #fit svg.pix { width: 1.25rem; height: 1.25rem; color: var(--brass); }