/* ==========================================================================
   Talos Unbound: The Brazen Giant — stylesheet
   A JustPlays Original.
   Palette: forge-dark ground, brass molten light, verdigris accent.
   No external assets, no webfonts — everything here is generated by CSS.
   ========================================================================== */

:root {
  --ink:        #f3ecdf;
  --ink-dim:    #b9b0a0;
  --ink-faint:  #7d776c;

  --ground-0:   #080a0e;
  --ground-1:   #0b0d12;
  --ground-2:   #12161d;
  --ground-3:   #1a1f28;

  --brass:      #e0a03c;
  --brass-lit:  #ffd189;
  --brass-deep: #8c5f1c;

  --verd:       #4fbfa8;
  --verd-deep:  #1d5f53;

  --blood:      #c4543c;

  --line:       rgba(224, 160, 60, 0.16);
  --line-soft:  rgba(243, 236, 223, 0.09);
  --line-hard:  rgba(243, 236, 223, 0.16);

  --panel:      linear-gradient(172deg, rgba(26, 31, 40, 0.96), rgba(11, 13, 18, 0.98));
  --panel-lit:  linear-gradient(172deg, rgba(34, 40, 52, 0.97), rgba(13, 16, 22, 0.985));

  --ui:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --disp: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;

  --shadow-lift: 0 24px 60px -20px rgba(0, 0, 0, 0.85), 0 2px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-btn:  0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 -1px 0 rgba(0, 0, 0, 0.4) inset,
                 0 6px 18px -8px rgba(0, 0, 0, 0.75);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --pad: 12px;
  --chrome-top: 44px;
  --chrome-hud: 44px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(1200px 620px at 50% -8%, rgba(224, 160, 60, 0.10), transparent 62%),
    radial-gradient(900px 520px at 12% 108%, rgba(79, 191, 168, 0.07), transparent 60%),
    var(--ground-1);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 0.72em; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 650; }
button { font: inherit; color: inherit; }

::selection { background: rgba(224, 160, 60, 0.3); }

/* scrollbars — thin, brassy, only where we scroll */
.scroll::-webkit-scrollbar,
.overlay::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll::-webkit-scrollbar-track,
.overlay::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 9px; }
.scroll::-webkit-scrollbar-thumb,
.overlay::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(224, 160, 60, 0.5), rgba(140, 95, 28, 0.5));
  border-radius: 9px;
}

/* ============================================================== app frame */
#app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  transition: filter 0.32s ease, transform 0.32s ease;
}

/* the board stays visible behind a card, but must stop taking taps */
body.overlay-open #app {
  filter: blur(2.5px) brightness(0.62) saturate(0.9);
  pointer-events: none;
}

/* ================================================================= topbar */
.topbar {
  flex: 0 0 auto;
  height: var(--chrome-top);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--pad);
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
  background: linear-gradient(180deg, rgba(20, 24, 32, 0.94), rgba(10, 12, 17, 0.86));
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  z-index: 4;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 160, 60, 0.42), transparent);
  pointer-events: none;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}
.logo-icon {
  font-size: 16px;
  color: var(--brass);
  text-shadow: 0 0 14px rgba(224, 160, 60, 0.55);
  transform: translateY(-0.5px);
}
.logo-text {
  font-family: var(--disp);
  font-size: 16px;
  letter-spacing: 0.01em;
}
.logo-text em {
  font-style: normal;
  color: var(--brass);
}
.logo:hover .logo-icon { animation: hammer 0.5s ease; }
@keyframes hammer {
  0%   { transform: rotate(0deg) translateY(-0.5px); }
  28%  { transform: rotate(-26deg) translateY(-1px); }
  62%  { transform: rotate(9deg); }
  100% { transform: rotate(0deg) translateY(-0.5px); }
}

.topbar-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  background: var(--line-hard);
}
.topbar-game {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.topbar-spacer { flex: 1 1 auto; }

.tbtn {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.028);
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.18s;
}
.tbtn:hover {
  color: var(--brass-lit);
  border-color: rgba(224, 160, 60, 0.45);
  background: rgba(224, 160, 60, 0.09);
  transform: translateY(-1px);
}
.tbtn:active { transform: translateY(0); }

/* ==================================================================== HUD */
.hud {
  flex: 0 0 auto;
  min-height: var(--chrome-hud);
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  padding: 5px var(--pad);
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
  background: linear-gradient(180deg, rgba(14, 17, 23, 0.9), rgba(9, 11, 15, 0.82));
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  z-index: 3;
}
.hud-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 220px;
}
.hud-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

.hud-title {
  font-family: var(--disp);
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hud-stars {
  flex: 0 0 auto;
  letter-spacing: 0.14em;
  font-size: 13px;
  color: var(--brass);
  text-shadow: 0 0 12px rgba(224, 160, 60, 0.5);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 4px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.chip b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.chip.wave {
  color: var(--verd);
  border-color: rgba(79, 191, 168, 0.34);
  background: rgba(79, 191, 168, 0.08);
}

.hbtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018));
  color: var(--ink-dim);
  padding: 5px 12px;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.16s, border-color 0.16s, background 0.16s, transform 0.16s;
}
.hbtn b {
  color: var(--brass-lit);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.hbtn:hover {
  color: var(--ink);
  border-color: rgba(224, 160, 60, 0.45);
  background: linear-gradient(180deg, rgba(224, 160, 60, 0.18), rgba(224, 160, 60, 0.06));
  transform: translateY(-1px);
}
.hbtn:active { transform: translateY(0) scale(0.97); }
.hbtn.icon {
  padding: 5px 10px;
  font-size: 12px;
  letter-spacing: 0;
  min-width: 34px;
  justify-content: center;
}
.hbtn[disabled] { opacity: 0.35; cursor: default; transform: none; }

/* ================================================================== stage */
#stage {
  flex: 1 1 auto;
  min-height: 0;      /* the whole trick: the browser decides the height */
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--ground-0);
}
/* absolutely positioned so the canvas is never a flex item: the box the
   browser lays out is the box the renderer measures, with no feedback loop
   and no flex-shrink surprises on a wide, short player. */
#stage-cv {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
  cursor: pointer;
  outline: none;
}

/* ============================================================== overlays */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(900px 460px at 50% 22%, rgba(224, 160, 60, 0.11), transparent 66%),
    rgba(6, 8, 11, 0.78);
  backdrop-filter: blur(7px) saturate(1.05);
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
  animation: veil 0.26s ease both;
}
.overlay.dim { background: rgba(6, 8, 11, 0.9); }
.overlay[hidden] { display: none !important; }

@keyframes veil { from { opacity: 0; } to { opacity: 1; } }

/* =================================================================== card */
.card {
  position: relative;
  width: min(560px, 100%);
  margin: auto;
  padding: 26px 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-lift);
  animation: rise 0.34s cubic-bezier(0.2, 0.9, 0.24, 1) both;
}
.card.wide { width: min(760px, 100%); }
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 209, 137, 0.55), transparent);
  pointer-events: none;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.titlecard {
  width: min(620px, 100%);
  text-align: center;
  background: var(--panel-lit);
  padding: 32px 30px 26px;
}
.titlecard::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 20px;
  width: 46px;
  height: 2px;
  margin-left: -23px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}

.kicker {
  margin: 0 0 8px;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  opacity: 0.92;
}
.bigtitle {
  margin: 0;
  font-family: var(--disp);
  font-size: clamp(34px, 8.4vw, 54px);
  line-height: 1.03;
  letter-spacing: -0.015em;
  background: linear-gradient(178deg, #fff4e0 6%, var(--brass-lit) 42%, var(--brass-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 14px 44px rgba(224, 160, 60, 0.22);
}
.subtitle {
  margin: 2px 0 18px;
  font-family: var(--disp);
  font-style: italic;
  font-size: clamp(15px, 3.4vw, 20px);
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}

.cardh {
  font-family: var(--disp);
  font-size: clamp(20px, 4.4vw, 26px);
  line-height: 1.16;
  margin-bottom: 10px;
  color: #fff6e6;
}
.card .cardh + p { color: var(--ink-dim); }

/* ---------------------------------------------------------- scrolling body */
.scroll {
  max-height: min(46vh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 8px;
  margin: 6px 0 14px;
}
.scroll p { color: var(--ink-dim); font-size: 14.2px; }
.scroll p + p { margin-top: 0.62em; }
.lede {
  color: var(--ink) !important;
  font-size: 15.4px !important;
  line-height: 1.62;
}
.interlude {
  font-family: var(--disp);
  font-style: italic;
  font-size: 14.6px;
  color: var(--ink) !important;
  opacity: 0.95;
}
.brief-rule {
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(90deg, rgba(224, 160, 60, 0.5), transparent);
}

.tiny  { font-size: 12.4px; color: var(--ink-faint); margin: 0 0 12px; }
.tinier{ font-size: 10.6px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 4px; }

/* ================================================================ buttons */
.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin-top: 12px;
}
.btnrow + .btnrow { margin-top: 9px; }

.btn {
  appearance: none;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02));
  color: var(--ink);
  padding: 10px 20px;
  font-size: 12.4px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.18s, border-color 0.18s, color 0.18s, background 0.18s;
  box-shadow: var(--shadow-btn);
}
.btn:hover { transform: translateY(-2px); border-color: rgba(255, 209, 137, 0.5); color: #fff6e6; }
.btn:active { transform: translateY(0) scale(0.985); }
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.btn::after {
  /* a gleam that crosses the face on hover */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 42%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.55s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.btn:hover::after { left: 118%; }

.btn.primary {
  border-color: rgba(255, 209, 137, 0.55);
  background: linear-gradient(180deg, #f0b45a 0%, #d4922d 48%, #a96c17 100%);
  color: #2a1a05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(0, 0, 0, 0.3) inset,
              0 10px 26px -10px rgba(224, 160, 60, 0.7);
}
.btn.primary:hover {
  color: #1d1102;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 -1px 0 rgba(0, 0, 0, 0.3) inset,
              0 16px 34px -12px rgba(224, 160, 60, 0.9);
}
.btn.ghost {
  background: transparent;
  border-color: var(--line-soft);
  color: var(--ink-dim);
  box-shadow: none;
  padding: 8px 16px;
}
.btn.ghost:hover {
  color: var(--brass-lit);
  border-color: rgba(224, 160, 60, 0.42);
  background: rgba(224, 160, 60, 0.07);
  box-shadow: none;
}

/* ============================================================== fact chips */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin: 14px 0 10px;
}
.fact {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 74px;
  padding: 7px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  animation: rise 0.3s ease both;
}
.fact b {
  font-size: 9.6px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.fact i {
  font-style: normal;
  font-family: var(--disp);
  font-size: 15.4px;
  color: var(--brass-lit);
  font-variant-numeric: tabular-nums;
}

.relicline {
  font-size: 12.6px;
  color: var(--brass) !important;
  text-align: center;
  letter-spacing: 0.03em;
  margin: 6px 0 0;
}
.relicline::before { content: "\25C8"; margin-right: 6px; opacity: 0.8; }

.starsbig {
  font-size: 30px;
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--brass);
  text-shadow: 0 0 26px rgba(224, 160, 60, 0.62);
  margin: 4px 0 10px;
  animation: starcome 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
@keyframes starcome {
  from { opacity: 0; transform: scale(0.6) rotate(-9deg); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================== chapter grid */
.gridlist { margin: 8px 0 4px; }

.grid-act {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-soft);
}
.grid-act span {
  font-size: 9.8px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid rgba(224, 160, 60, 0.35);
  border-radius: 999px;
  padding: 2px 9px;
}
.grid-act b { font-family: var(--disp); font-size: 16.5px; color: #fff6e6; }
.grid-act i {
  flex: 1 1 200px;
  font-size: 12.2px;
  font-style: italic;
  color: var(--ink-faint);
}

.grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.cell {
  position: relative;
  appearance: none;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "no name" "no stars";
  align-items: center;
  column-gap: 10px;
  row-gap: 1px;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014));
  cursor: pointer;
  transition: transform 0.16s, border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.cell:hover:not(.locked) {
  transform: translateY(-2px);
  border-color: rgba(224, 160, 60, 0.45);
  background: linear-gradient(180deg, rgba(224, 160, 60, 0.15), rgba(224, 160, 60, 0.04));
  box-shadow: 0 12px 26px -16px rgba(224, 160, 60, 0.75);
}
.cell:active:not(.locked) { transform: translateY(0) scale(0.99); }
.cell:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.cell.locked { opacity: 0.34; cursor: not-allowed; filter: grayscale(0.7); }
.cell.done { border-color: rgba(224, 160, 60, 0.34); }

.cell-no {
  grid-area: no;
  font-family: var(--disp);
  font-size: 21px;
  line-height: 1;
  color: var(--brass-lit);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: center;
}
.cell.locked .cell-no { color: var(--ink-faint); }
.cell-name {
  grid-area: name;
  font-size: 12.6px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-stars {
  grid-area: stars;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--brass);
  opacity: 0.92;
}
.cell-relic {
  position: absolute;
  top: 7px;
  right: 8px;
  font-size: 11px;
  color: var(--verd);
  text-shadow: 0 0 12px rgba(79, 191, 168, 0.65);
}

/* =============================================================== how to */
.howto p { margin-bottom: 0.66em; }
.howto b { color: var(--brass-lit); font-weight: 650; }
.howto .keys {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.2px;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}
kbd {
  display: inline-block;
  min-width: 19px;
  padding: 1px 6px;
  margin: 0 2px;
  border: 1px solid var(--line-hard);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.2px;
  color: var(--ink);
  text-align: center;
}

/* =============================================================== ledger */
.ledger-h {
  font-size: 10.4px;
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 16px 0 8px;
}
.ledger-h:first-child { margin-top: 4px; }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  column-gap: 12px;
  row-gap: 2px;
  padding: 9px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--line-soft);
  border-left: 2px solid rgba(224, 160, 60, 0.2);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.022);
}
.ledger-row.got { border-left-color: var(--brass); background: rgba(224, 160, 60, 0.055); }
.ledger-row b {
  font-family: var(--disp);
  font-size: 14.4px;
  color: #fff6e6;
  font-weight: 600;
}
.ledger-row i {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-style: normal;
  font-size: 9.6px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ledger-row span {
  grid-column: 1 / -1;
  font-size: 12.8px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.ledger-row:not(.got) b { color: var(--ink-faint); font-style: italic; }

/* ================================================================ toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 40;
  transform: translateX(-50%);
  max-width: min(88vw, 460px);
  padding: 10px 20px;
  border: 1px solid rgba(224, 160, 60, 0.4);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(32, 27, 18, 0.97), rgba(14, 12, 9, 0.97));
  color: var(--brass-lit);
  font-size: 12.4px;
  letter-spacing: 0.08em;
  text-align: center;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9);
  animation: toastin 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  pointer-events: none;
}
.toast[hidden] { display: none; }
@keyframes toastin {
  from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ============================================================ a11y / misc */

/* ================================================ the crawlable page below ==
   The game is the first screen (a full viewport). Everything a search engine
   or a player who wants to read first lives under it, in the same document. */
.about {
  position: relative;
  z-index: 1;
  padding: 54px 20px 72px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(224, 160, 60, 0.06), transparent 70%),
    var(--ground-1);
  border-top: 1px solid var(--line-soft);
}
.about-in { max-width: 760px; margin: 0 auto; }

.crumbs {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 26px;
}
.crumbs a { color: var(--ink-dim); text-decoration: none; }
.crumbs a:hover { color: var(--brass-lit); text-decoration: underline; }
.crumbs span { color: var(--ink-dim); }

.about h1 {
  font-family: var(--disp);
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.22;
  color: #fff6e6;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.about h2 {
  font-family: var(--disp);
  font-size: 20px;
  color: var(--brass-lit);
  margin: 34px 0 12px;
  letter-spacing: 0.01em;
}
.about p, .about li, .about dd {
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.72;
}
.about-lede { font-size: 16.4px !important; color: var(--ink) !important; }
.about b { color: var(--ink); font-weight: 650; }

.about-steps { margin: 0; padding-left: 22px; }
.about-steps li { margin-bottom: 9px; }

.about-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 6px;
  font-size: 13.8px;
}
.about-table th {
  text-align: left;
  font-size: 10.4px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
}
.about-table td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-dim);
  vertical-align: top;
  line-height: 1.55;
}
.about-table td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }

.about-faq { margin: 14px 0 0; }
.about-faq dt {
  font-family: var(--disp);
  font-size: 15.6px;
  color: var(--ink);
  margin: 20px 0 6px;
}
.about-faq dd { margin: 0; }

@media (max-width: 640px) {
  .about { padding: 40px 16px 56px; }
  .about-table { font-size: 13px; }
  .about-table td:first-child { white-space: normal; }
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body.overlay-open #app { filter: brightness(0.6); }
}

/* ============================================== short viewports (the trap) ==
   The site plays this inside a wide, short box (~914x514). Compress the
   chrome there so the board keeps the height, and never wrap the HUD. */
@media (max-height: 620px) {
  :root { --chrome-top: 36px; --chrome-hud: 36px; --pad: 9px; }
  .topbar-game { display: none; }
  .hud { flex-wrap: nowrap; gap: 6px; }
  .hud-left { flex: 1 1 auto; gap: 8px; }
  .hud-title { font-size: 12.2px; }
  .chip, .hbtn, .tbtn { padding: 4px 9px; font-size: 9.8px; }
  .hbtn.icon { min-width: 30px; padding: 4px 8px; }
  .scroll { max-height: min(38vh, 250px); }
  .card { padding: 20px 20px 16px; }
  .facts { margin: 10px 0 8px; }
  .fact { min-width: 64px; padding: 5px 10px; }
  .fact i { font-size: 13.6px; }
  .starsbig { font-size: 25px; }
}

/* ================================================= small screens (320px) == */
@media (max-width: 640px) {
  :root { --pad: 10px; }
  body { font-size: 14.4px; }
  .topbar-game { display: none; }
  .hud-left { flex: 1 1 100%; }
  .hud-right { flex: 1 1 100%; margin-left: 0; justify-content: space-between; }
  .card { padding: 22px 18px 18px; border-radius: 14px; }
  .titlecard { padding: 26px 20px 22px; }
  .overlay { padding: 14px 12px; align-items: flex-start; }
  .card { margin-top: 2vh; }
  .scroll { max-height: min(44vh, 320px); }
  .grid-row { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .btnrow { gap: 8px; }
  .btn { flex: 1 1 auto; padding: 11px 14px; }
  .btn.ghost { flex: 0 1 auto; }
}

@media (max-width: 380px) {
  .logo-text { display: none; }
  .hud-title { font-size: 11.6px; }
  .grid-row { grid-template-columns: 1fr 1fr; }
  .cell { padding: 8px 9px; column-gap: 8px; }
  .cell-no { font-size: 18px; min-width: 24px; }
  .cell-name { font-size: 11.4px; }
  .fact { min-width: 58px; }
}

/* landscape phones — chrome must stay a sliver */
@media (max-height: 430px) and (orientation: landscape) {
  .hud-right .chip { display: none; }
  .scroll { max-height: 42vh; }
}