/* =====================================================================
   SPEAKEASY & GLITCH, the beta
   Shared design system. Owned by W3. W1 and W2 use these classes and keep
   page-local CSS to a minimum.

   CLASS VOCABULARY (quick index for W1 / W2)
   layout    .wrap .wrap--wide .stack .row-between .center .hide
   type      h1 h2 h3 .tagline .note .small .muted .mono .kbd
   panels    .card .card--link .panel .rulebox .rulehead
   buttons   .btn .btn--gold .btn--ghost .btn--danger .btn--wide .btnrow
   inputs    .field .label .input .input--inline .inline-form
   tiles     .grid .row .cell  +states .cell.g .cell.y .cell.x .cell.p .cell.q
             .cell--mini .cell--tap .door .tapbar .tapcol
   chips     .chiprow .chip .chip--on .chip--dead .chip--live
   banner    .banner .banner__text  (beta.js mounts the nickname banner)
   feedback  .msg .msg--good .msg--bad .msg--gold .shake .nod
   admin     .stats .stat .stat__num .stat__label .table-wrap .table
             .tabs .tab .timeline .tl .tl--error .tl__head .tl__body
   ===================================================================== */

/* ---------- 1. tokens ---------------------------------------------- */
:root {
  --bg:    #161512;
  --ink:   #f0ede4;
  --gold:  #d4af37;
  --green: #4e9c74;
  --red:   #e06b57;
  --blue:  #5e93b5;
  --tile:  #24221d;
  --edge:  #3a372f;

  /* derived, same family */
  --tray:  #1e1c18;
  --chip:  #2a2822;
  --dim:   #55514a;
  --muted: #a8a294;
  --on:    #10130f;          /* ink laid on a filled gold/green/red/blue tile */

  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 6px;
  --r:    10px;              /* the tile radius */
  --r-lg: 14px;
  --pill: 999px;

  --tap:  44px;              /* minimum touch target, everywhere */
  --cell: clamp(40px, 12.6vw, 52px);
  --gap:  6px;
  --pad:  12px;
  --wrap: 28rem;
  --wrap-wide: 60rem;

  --shadow: 0 1px 0 rgba(0,0,0,.45);
  --ring: 0 0 0 3px rgba(212,175,55,.30);
  color-scheme: dark;
}

/* ---------- 2. reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; -webkit-tap-highlight-color: transparent; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;            /* belt and braces: never a sideways scroll */
}

img, svg { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--gold); color: var(--on); }

/* ---------- 3. layout ----------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wrap--wide { max-width: var(--wrap-wide); align-items: stretch; }

.stack { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.stack--tight { gap: 6px; }
.row-between {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: space-between; width: 100%;
}
.center { text-align: center; }
.hide { display: none !important; }
.spacer { flex: 1 1 auto; }

/* ---------- 4. type -------------------------------------------------- */
h1 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 6vw, 1.7rem);
  font-weight: 700;
  letter-spacing: .10em;
  line-height: 1.2;
  text-align: center;
}
h2 {
  font-family: var(--serif);
  font-size: 1.12rem;
  letter-spacing: .04em;
  line-height: 1.25;
}
h3 {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}
/* a count or a name tucked into a section heading keeps its own casing */
h3 .muted { text-transform: none; font-weight: 400; letter-spacing: 0; }
.tagline { font-style: italic; color: var(--muted); text-align: center; }
.note  { font-family: var(--sans); font-size: .88rem; line-height: 1.55; }
.small { font-family: var(--sans); font-size: .78rem; line-height: 1.5; }
.muted { color: var(--muted); }
.mono  { font-family: var(--mono); font-size: .8rem; word-break: break-word; }
.gold  { color: var(--gold); }
.good  { color: var(--green); }
.bad   { color: var(--red); }
.kbd {
  font-family: var(--mono); font-size: .76rem;
  border: 1px solid var(--edge); background: var(--chip);
  border-radius: var(--r-sm); padding: 1px 5px;
}
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

/* ---------- 5. panels and cards -------------------------------------- */
.card, .panel {
  width: 100%;
  background: var(--tray);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: 14px;
}
.panel { background: transparent; }

.card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color .18s, transform .08s, background .18s;
}
.card--link:hover { border-color: var(--gold); background: #201e19; color: inherit; }
.card--link:active { transform: translateY(1px); }

.rulebox {
  width: 100%;
  font-size: .84rem;
  line-height: 1.5;
  text-align: left;
  background: var(--tray);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  padding: 10px 14px;
}
.rulehead {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}

/* ---------- 6. buttons ----------------------------------------------- */
.btn {
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--tile);
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  cursor: pointer;
  user-select: none;
  transition: transform .06s ease, background .16s, border-color .16s;
}
.btn:hover { border-color: var(--muted); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn[disabled], .btn.is-off { opacity: .45; cursor: not-allowed; transform: none; }

.btn--gold   { background: var(--gold);  border-color: var(--gold);  color: var(--on); }
.btn--gold:hover { border-color: var(--ink); }
.btn--ghost  { background: transparent; }
.btn--danger { background: var(--red); border-color: var(--red); color: var(--on); }
.btn--wide   { width: 100%; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- 7. form controls ------------------------------------------ */
.field { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.label {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.input {
  font-family: var(--sans);
  font-size: 1rem;                 /* 16px keeps iOS from zooming on focus */
  color: var(--ink);
  background: var(--tile);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  min-height: var(--tap);
  padding: 0 12px;
  width: 100%;
}
.input::placeholder { color: var(--dim); }
.input:focus-visible { border-color: var(--gold); box-shadow: var(--ring); outline: none; }
.input--inline { flex: 1 1 8rem; min-width: 0; }

.inline-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%;
}

/* ---------- 8. tiles and grids ---------------------------------------- */
.grid { display: flex; flex-direction: column; gap: var(--gap); margin: 4px 0; }
.row  { display: flex; gap: var(--gap); align-items: center; justify-content: center; }

.cell {
  width: var(--cell);
  height: var(--cell);
  flex: 0 0 auto;
  border: 2px solid var(--edge);
  border-radius: var(--r);
  background: var(--tile);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: calc(var(--cell) * .46);
  font-weight: 700;
  text-transform: uppercase;
  transition: background .18s, border-color .18s, transform .06s;
}
/* verdict states, short names on purpose so game code stays terse */
.cell.g { background: var(--green); border-color: var(--green); color: var(--on); }
.cell.y { background: var(--gold);  border-color: var(--gold);  color: var(--on); }
.cell.x { background: var(--dim);   border-color: var(--dim);   color: var(--ink); } /* light ink: a dark I on dim grey vanished on phones */
.cell.p { background: var(--blue);  border-color: var(--blue);  color: var(--on); }
.cell.q { background: var(--tile);  border-style: dashed; color: var(--muted); }
.cell.bad { border-color: var(--red); color: var(--red); }
.cell.is-filled { border-color: var(--muted); }

.cell--tap { min-width: var(--tap); min-height: var(--tap); cursor: pointer; }
.cell--tap:active { transform: translateY(2px); }

.cell--mini {
  width: 16px; height: 16px; border-width: 1px; border-radius: 4px;
  font-size: 9px; letter-spacing: 0;
}
.cell--sm { width: 26px; height: 26px; border-width: 1px; font-size: 13px; }

/* the door column that sits beside a speakeasy row */
.door {
  width: 60px; min-height: var(--cell);
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .68rem; line-height: 1.15;
  text-align: center; color: var(--muted);
}

/* a row of tappable columns (glitch) */
.tapbar { display: flex; gap: var(--gap); justify-content: center; width: 100%; }
.tapcol {
  flex: 1 1 0;
  min-width: var(--tap);
  min-height: var(--tap);
  background: var(--tile);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  color: var(--muted);
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .06s, border-color .16s, background .16s;
}
.tapcol:hover { border-color: var(--gold); color: var(--ink); }
.tapcol:active { transform: translateY(2px); }
.tapcol.is-on { background: var(--gold); border-color: var(--gold); color: var(--on); }

/* ---------- 9. chips --------------------------------------------------- */
.chiprow { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; width: 100%; }
.chip {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  border: 1px solid var(--edge);
  background: var(--chip);
  color: var(--ink);
  border-radius: var(--pill);
  padding: 6px 11px;
  min-height: 30px;
  display: inline-flex; align-items: center; gap: 5px;
  user-select: none;
  transition: all .22s;
}
button.chip, .chip--live { cursor: pointer; min-height: var(--tap); }
.chip--dead { text-decoration: line-through; opacity: .34; border-style: dashed; }
.chip--on   { background: var(--gold); border-color: var(--gold); color: var(--on); box-shadow: var(--ring); }
.chip--green{ background: var(--green); border-color: var(--green); color: var(--on); }
.chip--red  { background: var(--red);  border-color: var(--red);  color: var(--on); }
.chip--blue { background: var(--blue); border-color: var(--blue); color: var(--on); }

/* ---------- 10. inline banner (beta.js nickname prompt) ---------------- */
/* Sits in the page flow at the top. Never an overlay, never covers a control. */
.banner {
  width: 100%;
  max-width: var(--wrap-wide);
  margin: 0 auto 10px;
  background: var(--tray);
  border: 1px solid var(--gold);
  border-left-width: 4px;
  border-radius: var(--r);
  padding: 10px 12px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.banner__text {
  font-family: var(--sans); font-size: .82rem; line-height: 1.4;
  flex: 1 1 12rem; min-width: 0; color: var(--ink);
}
.banner .input { flex: 1 1 8rem; }
.banner--quiet { border-color: var(--edge); border-left-color: var(--muted); }

/* ---------- 11. feedback ----------------------------------------------- */
.msg {
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
  line-height: 1.45; text-align: center; min-height: 1.2em;
}
.msg--good { color: var(--green); }
.msg--bad  { color: var(--red); }
.msg--gold { color: var(--gold); }

@keyframes wgb-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes wgb-nod   { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }
.shake { animation: wgb-shake .3s ease; }
.nod   { animation: wgb-nod .3s ease; }

/* ---------- 12. admin: stat tiles -------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  width: 100%;
}
.stat {
  background: var(--tray);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 12px;
  min-width: 0;
}
.stat__num {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 700;
  color: var(--gold); line-height: 1.1; word-break: break-word;
}
.stat__label {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  margin-top: 3px;
}

/* ---------- 13. admin: tables ------------------------------------------ */
/* The wrapper scrolls, never the page. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  background: var(--tray);
}
.table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: .82rem;
}
.table th, .table td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--edge);
  white-space: nowrap;
  vertical-align: top;
}
.table th {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  background: var(--chip); position: sticky; top: 0; z-index: 1;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr.is-click { cursor: pointer; }
.table tbody tr.is-click:hover { background: #201e19; }
.table tbody tr.is-sel { background: #2b2720; box-shadow: inset 3px 0 0 var(--gold); }
.table td.wrapcell { white-space: normal; min-width: 12rem; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table--rows td { height: var(--tap); }

/* ---------- 14. admin: tabs -------------------------------------------- */
.tabs {
  display: flex; flex-wrap: wrap; gap: 6px; width: 100%;
  border-bottom: 1px solid var(--edge); padding-bottom: 8px;
}
.tab {
  font-family: var(--sans); font-size: .84rem; font-weight: 600;
  min-height: var(--tap); padding: 0 14px;
  display: inline-flex; align-items: center;
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab.is-active { background: var(--tile); border-color: var(--edge); color: var(--gold); }

/* ---------- 15. admin: event timeline ---------------------------------- */
.timeline { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tl {
  background: var(--tray);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--dim);
  border-radius: var(--r);
  padding: 9px 11px;
}
/* modifier names match the event type, so .tl--round_start and friends */
.tl--round_start, .tl--session_start { border-left-color: var(--blue); }
.tl--round_end { border-left-color: var(--green); }
.tl--guess, .tl--move { border-left-color: var(--gold); }
.tl--nickname_set, .tl--nav { border-left-color: var(--dim); }
.tl--error {
  border-left-color: var(--red);
  border-color: var(--red);
  background: #2a1d1a;
}
.tl__head {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.tl--error .tl__head { color: var(--red); }
.tl__body { margin-top: 6px; font-family: var(--sans); font-size: .84rem; }
.tl__body pre {
  font-family: var(--mono); font-size: .74rem; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
  color: var(--muted); margin-top: 4px;
}
.tl .row { justify-content: flex-start; }
.minigrid { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.minirow  { display: flex; gap: 3px; }

/* ---------- 16. landing page teasers (pure CSS, no images) ------------- */
.teaser {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-start; margin-top: 10px;
}
.teaser__row { display: flex; gap: 4px; }
.teaser__c {
  width: 18px; height: 18px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: var(--tile);
}
.teaser__c.g { background: var(--green); border-color: var(--green); }
.teaser__c.y { background: var(--gold);  border-color: var(--gold); }
.teaser__c.x { background: var(--dim);   border-color: var(--dim); }
.teaser__c.p { background: var(--blue);  border-color: var(--blue); }
.teaser__c.q { border-style: dashed; background: transparent; }
.teaser__c.bad {
  background: var(--red); border-color: var(--red);
  animation: wgb-blink 1.8s steps(1) infinite;
}
@keyframes wgb-blink { 0%,60%{opacity:1} 61%,100%{opacity:.45} }

/* ---------- 17. page furniture ----------------------------------------- */
.sitehead { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.crumb {
  font-family: var(--sans); font-size: .78rem;
  align-self: flex-start; color: var(--muted);
  /* a link is still something a thumb has to hit */
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding-right: 8px;
}
.footer {
  font-family: var(--sans); font-size: .76rem; color: var(--muted);
  text-align: center; margin-top: 22px; padding-top: 12px;
  border-top: 1px solid var(--edge); width: 100%;
}
.hr { width: 100%; height: 1px; background: var(--edge); border: 0; margin: 4px 0; }

/* ---------- 18. wide screens ------------------------------------------- */
@media (min-width: 40rem) {
  body { padding: 20px; }
  .table th, .table td { padding: 10px 14px; }
}

/* ---------- 19. motion preference --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}