/**
 * The BoomWick shell: the tokens, the header, the footer, and the handful of
 * pieces every page builds out of.
 *
 * Until now each page carried its own copy of the palette, which meant four
 * places to change a colour and four chances to forget one. The tokens live
 * here now. The older names — --page, --panel, --text, --dim, --accent — are
 * kept and pointed at the new palette, so the styles already written against
 * them go on working while the pages are moved over one at a time.
 */

:root {
  /* The shell: a dark navy that lets a game's own colour do the talking. */
  --bw-bg: #07131d;
  --bw-bg-elevated: #0b1a27;
  --bw-panel: #0e2030;
  --bw-panel-2: #122738;
  --bw-border: rgba(155, 190, 220, .18);
  --bw-border-strong: rgba(155, 190, 220, .30);
  --bw-text: #f3f7fb;
  --bw-text-muted: #91a6b8;

  /* One accent per game, so a page says which game it is before it is read. */
  --bw-orange: #ff7a2f;
  --bw-orange-2: #ffb02e;
  --bw-green: #42db52;
  --bw-cyan: #22b8ff;
  --bw-danger: #ff5d68;

  /* Whichever of those this page is flying. Set per page; orange by default
     because the site's own mark is a lit fuse. */
  --bw-accent: var(--bw-orange);
  --bw-accent-2: var(--bw-orange-2);
  --bw-on-accent: #17120a;

  --bw-radius-sm: 8px;
  --bw-radius-md: 12px;
  --bw-radius-lg: 18px;
  --bw-shadow: 0 18px 50px rgba(0, 0, 0, .38);
  --bw-content-max: 1180px;

  /* The names the pages were written against, pointed at the new palette. */
  --page: var(--bw-bg);
  --panel: var(--bw-panel);
  --text: var(--bw-text);
  --dim: var(--bw-text-muted);
  --accent: var(--bw-accent);

  /* Every control is at least this tall, and taller where a thumb is likely. */
  --control: 2.2rem;
}

@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  :root { --control: 2.75rem; }
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bw-bg); }

body {
  margin: 0;
  color: var(--bw-text);
  font-family: Verdana, "Segoe UI", sans-serif;
  background: var(--bw-bg);
  overflow-x: hidden;
}

a { color: var(--bw-accent); }

button, input, select { min-height: var(--control); }

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

:focus-visible {
  outline: 2px solid var(--bw-accent);
  outline-offset: 2px;
}

/* ── the top bar ──────────────────────────────────────────────────────────
   Brand on the left, the site's few pages beside it, and the one thing being
   asked for on the right. Nothing here is ever a sign-in. */

.bw-top {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  width: 100%;
  min-height: 64px;
  padding: .7rem clamp(.9rem, 3vw, 1.6rem);
  background: rgba(7, 19, 29, .92);
  border-bottom: 1px solid var(--bw-border);
}

.bw-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--bw-text);
  font-size: 1.02rem;
  font-weight: bold;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}

.bw-brand .flame { font-size: 1.15rem; line-height: 1; }
.bw-brand:hover { color: var(--bw-accent); }

.bw-nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex: 1;
  min-width: 0;
  font-size: .82rem;
}

.bw-nav a {
  color: var(--bw-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.bw-nav a:hover { color: var(--bw-text); }

/* Where you already are, said quietly rather than with a slab of colour. */
.bw-nav a[aria-current="page"] {
  color: var(--bw-text);
  box-shadow: inset 0 -2px 0 var(--bw-accent);
  padding-bottom: .2rem;
}

.bw-top .bw-support {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border: 1px solid var(--bw-border-strong);
  border-radius: 999px;
  color: var(--bw-text);
  font-size: .8rem;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

.bw-top .bw-support:hover { border-color: var(--bw-danger); color: var(--bw-danger); }
.bw-top .bw-support .heart { color: var(--bw-danger); }

/* Too narrow for one row: the brand and the ask keep the top, and the pages
   drop to a line of their own rather than being hidden behind a menu button
   nobody presses. */
@media (max-width: 560px) {
  .bw-top {
    flex-wrap: wrap;
    gap: .6rem;
    row-gap: .55rem;
    min-height: 0;
  }

  .bw-brand { flex: 1; font-size: .92rem; }
  .bw-nav { order: 3; flex-basis: 100%; justify-content: center; gap: 1.3rem; font-size: .78rem; }
  .bw-top .bw-support { padding: .5rem .9rem; font-size: .76rem; }
}

/* ── the page body ───────────────────────────────────────────────────────── */

.bw-shell {
  width: min(100%, var(--bw-content-max));
  margin: 0 auto;
  padding: clamp(1.2rem, 4vw, 2.4rem) clamp(.9rem, 3vw, 1.6rem);
}

/* ── buttons ─────────────────────────────────────────────────────────────── */

.bw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.3rem;
  border: 1px solid transparent;
  border-radius: var(--bw-radius-md);
  font-family: inherit;
  font-size: .88rem;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}

.bw-btn:hover { transform: translateY(-1px); }

.bw-btn--primary {
  background: linear-gradient(135deg, var(--bw-accent), var(--bw-accent-2));
  color: var(--bw-on-accent);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}

.bw-btn--primary:hover { filter: brightness(1.06); }

.bw-btn--secondary {
  background: var(--bw-panel-2);
  border-color: var(--bw-border-strong);
  color: var(--bw-text);
}

.bw-btn--secondary:hover { border-color: var(--bw-accent); }

.bw-btn--quiet {
  background: none;
  border-color: var(--bw-border);
  color: var(--bw-text-muted);
  font-weight: normal;
}

.bw-btn--quiet:hover { color: var(--bw-text); border-color: var(--bw-border-strong); }

/* A button that says what it does on a second line, for the ones that need it. */
.bw-btn .under {
  display: block;
  margin-top: .2rem;
  font-size: .68rem;
  font-weight: normal;
  opacity: .8;
}

.bw-btn--stacked { flex-direction: column; gap: 0; text-align: center; }

/* ── cards, badges, tips ─────────────────────────────────────────────────── */

.bw-panel {
  background: var(--bw-panel);
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius-lg);
  box-shadow: var(--bw-shadow);
}

.bw-badges { display: flex; flex-wrap: wrap; gap: .4rem; }

.bw-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  background: var(--bw-panel-2);
  border: 1px solid var(--bw-border);
  border-radius: 999px;
  font-size: .7rem;
  color: var(--bw-text-muted);
  white-space: nowrap;
}

.bw-tip {
  display: flex;
  gap: .6rem;
  padding: .8rem .9rem;
  background: rgba(255, 176, 46, .07);
  border: 1px solid rgba(255, 176, 46, .25);
  border-radius: var(--bw-radius-md);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--bw-text-muted);
}

.bw-or {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .64rem;
  color: var(--bw-text-muted);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.bw-or::before, .bw-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bw-border);
}

/* ── the footer ──────────────────────────────────────────────────────────── */

.bw-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.1rem;
  width: min(100%, var(--bw-content-max));
  margin: 0 auto;
  padding: 1.4rem clamp(.9rem, 3vw, 1.6rem) 1.8rem;
  border-top: 1px solid var(--bw-border);
  font-size: .72rem;
  color: var(--bw-text-muted);
}

.bw-foot a { color: var(--bw-text-muted); text-decoration: none; }
.bw-foot a:hover { color: var(--bw-accent); text-decoration: underline; }
.bw-foot .said { flex: 1; min-width: 12rem; }

@media (max-width: 640px) {
  .bw-foot { justify-content: center; }
  .bw-foot .said { flex-basis: 100%; text-align: center; }
}

/* ── advertising ─────────────────────────────────────────────────────────────
   Space is reserved whether or not anything arrives, so a page never jumps
   under a hand that is already reaching for a button. Never over a board. */

.ad {
  display: block;
  width: min(100%, 970px);
  min-height: 100px;
  margin: 1.2rem auto;
  overflow: hidden;
}

.ad ins { display: block; width: 100%; }

@media (max-width: 640px) {
  .ad { min-height: 90px; }
}

/* ── a game lobby ────────────────────────────────────────────────────────────
   The same composition for every game: what it is on the left, what you can
   do underneath, and who you are with your settings alongside. Football and
   Airplanes are laid out entirely by these; Short Fuse adds to them. */

.bw-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1rem;
  color: var(--bw-text-muted);
  font-size: .78rem;
  text-decoration: none;
}

.bw-back:hover { color: var(--bw-text); }

.bw-lobby {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 1.3rem;
  align-items: start;
}

.bw-lead { grid-column: 1; }
.bw-acts { grid-column: 1; }
.bw-side { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 900px) {
  .bw-lobby { grid-template-columns: minmax(0, 1fr); }
  .bw-lead, .bw-acts, .bw-side { grid-column: 1; grid-row: auto; }
}

.bw-lead h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bw-accent);
}

.bw-lead .tagline {
  margin: .7rem 0 0;
  font-size: clamp(.95rem, 2.4vw, 1.15rem);
  font-weight: bold;
}

.bw-lead .sub { margin: .35rem 0 0; font-size: .8rem; line-height: 1.6; color: var(--bw-text-muted); }
.bw-lead .bw-badges { margin-top: 1rem; }

/* The real board, small, so somebody who has never played can see what they
   are about to be looking at. */
.bw-lead .preview {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin-top: 1.1rem;
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius-md);
  background: var(--bw-bg-elevated);
}

.bw-acts {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1.4rem;
}

.bw-acts > .bw-btn, .bw-split > .bw-btn { width: 100%; }
.bw-join .bw-btn { flex: 0 0 auto; padding-inline: 1.1rem; }
.bw-acts .bw-or { margin: .2rem 0; }

.bw-split { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

@media (max-width: 460px) {
  .bw-split { grid-template-columns: 1fr; }
}

.bw-join { display: flex; gap: .5rem; }

.bw-join input {
  flex: 1;
  min-width: 0;
  background: var(--bw-bg);
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius-md);
  padding: 0 .6rem;
  color: var(--bw-text);
  font-family: inherit;
  font-size: .9rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .25em;
}

.bw-join input:focus { outline: none; border-color: var(--bw-accent); }

.bw-error { margin: .2rem 0 0; min-height: 1.2em; font-size: .76rem; color: var(--bw-danger); }

/* ── the settings card ───────────────────────────────────────────────────── */

.bw-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem 1.3rem 1.3rem;
  background: var(--bw-panel);
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius-lg);
}

.bw-side h2 {
  margin: 0;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bw-text-muted);
}

.bw-side input[type="text"] {
  width: 100%;
  background: var(--bw-bg);
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius-md);
  padding: 0 .7rem;
  color: var(--bw-text);
  font-family: inherit;
  font-size: .9rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.bw-side input:focus, .bw-side select:focus { outline: none; border-color: var(--bw-accent); }

.bw-setting { display: flex; flex-direction: column; gap: .45rem; }
.bw-setting > span { font-size: .74rem; color: var(--bw-text-muted); }

.bw-side select {
  width: 100%;
  background: var(--bw-bg);
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius-sm);
  padding: 0 .5rem;
  color: var(--bw-text);
  font-family: inherit;
  font-size: .8rem;
}

/* Colours are paint, not controls, and want to look like it. */
.bw-swatches { display: flex; flex-wrap: wrap; gap: .45rem; }

.bw-swatches button {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}

.bw-swatches button[data-chosen="1"] { border-color: var(--bw-text); transform: scale(1.12); }

.bw-skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }

.bw-skills button {
  background: var(--bw-bg);
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius-sm);
  padding: .45rem;
  color: var(--bw-text-muted);
  font-family: inherit;
  font-size: .74rem;
  cursor: pointer;
}

.bw-skills button[data-chosen="1"] {
  background: var(--bw-accent);
  border-color: var(--bw-accent);
  color: var(--bw-on-accent);
  font-weight: bold;
}

.bw-side .note { margin: -.4rem 0 0; font-size: .68rem; line-height: 1.5; color: var(--bw-text-muted); }

/* ── a game in progress ──────────────────────────────────────────────────────
   Quieter than the lobby by design: no hero, no marketing, and the chrome
   gets out of the way so the board has the screen. */

body[data-screen="table"] .bw-top,
body[data-screen="game"] .bw-top,
body[data-screen="table"] .bw-foot,
body[data-screen="game"] .bw-foot,
body[data-screen="table"] .ad,
body[data-screen="game"] .ad { display: none; }