/*
 * A dark table with luminous tiles.
 *
 * The thesis: the screen is a warm, dark surface at night, and the letter tiles
 * are the ONLY bright, high-value objects on it. Contrast is spent almost
 * entirely on the tiles, because 20+ small letterforms have to stay readable at
 * a glance while moving. Everything else — chrome, counts, labels — sits back.
 *
 * --peel is the single loud note and appears NOWHERE except draw moments and
 * the bag counter. The instant it becomes a border or a button fill, the design
 * loses its one accent.
 */

:root {
  --table:       #17120f;
  --table-grain: #251d17;
  --table-edge:  #0e0b09;

  --tile:        #f2ebe0;
  --tile-ink:    #1b1511;
  --tile-shadow: rgba(0, 0, 0, .55);

  --peel:        #5ee0c8;   /* reserved: draws, and the bag count only */
  --dump:        #9c5a4d;   /* quiet counter-accent: swap, invalid words */

  --ink-1: rgba(242, 235, 224, .92);
  --ink-2: rgba(242, 235, 224, .58);
  --ink-3: rgba(242, 235, 224, .30);
  --hair:  rgba(242, 235, 224, .12);

  --cell: 46px;             /* JS overwrites this; it is the zoom unit */
  --radius: 7px;

  --font: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system,
          'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;             /* iOS Safari has no overscroll-behavior --   */
  overscroll-behavior: none;    /* rubber-banding must be prevented           */
  background: var(--table);     /* structurally, with a fixed non-scrolling   */
  color: var(--ink-1);          /* shell. There is no CSS fix.                */
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
}

body {
  /* Deliberately NOT touch-action:none — that would kill browser pinch-zoom
     page-wide. It goes on the board and the tiles only. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#app {
  position: fixed;
  inset: 0;
  /* dvh tracks the visible viewport as iOS shows/hides its toolbars; inset:0
     alone resolves against the LAYOUT viewport, which is ~180px taller than
     what the player can actually see and touch. */
  height: var(--vvh, 100dvh);
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* minmax(0,1fr): without it the implicit column takes the rack row's
     min-content (~960px of tiles) and silently overflows the viewport —
     every row then lays out at 1000px+ on a 390px phone, pushing Peel and
     the board's true centre off-screen. Measured, not theorized. */
  grid-template-columns: minmax(0, 1fr);
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ------------------------------------------------------------------- hud */

#hud {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(var(--table-edge), var(--table));
}

.brand {
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .22em;
  color: var(--ink-1);
  flex: 0 0 auto;
}

.bag {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-left: auto;
}
.bag-n {
  font-size: 27px;
  font-weight: 700;
  color: var(--peel);
  font-variant-numeric: tabular-nums;   /* a counter that shifts width as it
                                           ticks down is a bug, not a style */
  line-height: 1;
  min-width: 2.2ch;
  text-align: right;
}
.bag-label { font-size: 11px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.bag.low .bag-n { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

.hud-actions { display: flex; gap: 8px; flex: 0 0 auto; }

.btn {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-1);
  background: rgba(242, 235, 224, .07);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 9px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .12s, border-color .12s, opacity .12s;
  min-height: 40px;
}
.btn:hover:not(:disabled) { background: rgba(242, 235, 224, .13); }
.btn:disabled { opacity: .3; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--peel); outline-offset: 2px; }

.btn-key {
  font-size: 10px;
  color: var(--ink-3);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 1px 5px;
}

.btn-draw:not(:disabled) {
  color: var(--table);
  background: var(--peel);
  border-color: var(--peel);
}
.btn-draw:not(:disabled):hover { filter: brightness(1.1); }
.btn-draw:not(:disabled) .btn-key { color: rgba(23,18,15,.55); border-color: rgba(23,18,15,.3); }

.btn-done:not(:disabled) { border-color: var(--ink-3); }

/* ------------------------------------------------- switch + utility row */

.hud-utils {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.btn-quiet {
  background: none;
  color: var(--ink-2);
  padding: 8px 12px;
  font-size: 12px;
}
.btn-quiet:hover { color: var(--ink-1); background: rgba(242, 235, 224, .07); }

.linkish {
  background: none;
  border: 0;
  /* Vertical padding rather than none: it reads as a text link but keeps a
     fingertip-sized hit area. A 16px-tall tap target is a miss on a phone. */
  padding: 12px 8px;
  margin: -12px -8px;
  font: inherit;
  color: var(--peel);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linkish:focus-visible { outline: 2px solid var(--peel); outline-offset: 2px; }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  min-height: 40px;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch-track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background: rgba(242, 235, 224, .13);
  border: 1px solid var(--hair);
  flex: 0 0 auto;
  transition: background .15s, border-color .15s;
}
.switch-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform .15s, background .15s;
}
.switch input:checked + .switch-track {
  background: color-mix(in srgb, var(--peel) 30%, transparent);
  border-color: var(--peel);
}
.switch input:checked + .switch-track .switch-thumb {
  transform: translateX(16px);
  background: var(--peel);
}
.switch input:focus-visible + .switch-track { outline: 2px solid var(--peel); outline-offset: 2px; }

.switch-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); }
.switch input:checked ~ .switch-copy .switch-label,
.switch input:checked ~ .switch-label { color: var(--ink-1); }

/* The bigger version on the start card carries an explanatory line. */
.switch-big {
  width: 100%;
  gap: 12px;
  padding: 13px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  align-items: flex-start;
}
.switch-big .switch-track { margin-top: 1px; }
.switch-copy { display: flex; flex-direction: column; gap: 3px; }
.switch-big .switch-label { font-size: 13.5px; }
.switch-hint { font-size: 12px; color: var(--ink-3); line-height: 1.45; }

/* ------------------------------------------------------------ rules card */

.card-tall {
  max-height: min(84vh, 720px);
  overflow-y: auto;
  max-width: 520px;
}
.card-brand-sm { font-size: 26px; letter-spacing: .14em; margin-bottom: 20px; }
.rules-h {
  margin: 22px 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--peel);
}
.rules-h:first-of-type { margin-top: 0; }
.rules-p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.62; color: var(--ink-2); }
.rules-l { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; line-height: 1.62; color: var(--ink-2); }
.rules-l li { margin-bottom: 7px; }
.rules-p strong, .rules-l strong { color: var(--ink-1); font-weight: 600; }
.rules-p em, .rules-l em { color: var(--ink-1); font-style: italic; }
.card-tall .btn-start { margin-top: 22px; position: sticky; bottom: 0; }

/* ----------------------------------------------------------------- board */

#board {
  position: relative;
  overflow: hidden;
  touch-action: none;          /* REQUIRED. Without it the browser claims the
                                  gesture as a scroll, fires pointercancel, and
                                  the tile freezes mid-drag looking like a bug */
  cursor: grab;
  background-image:
    radial-gradient(circle at 50% 40%, var(--table-grain) 0%, var(--table) 62%);
}
#board.panning { cursor: grabbing; }

#gridLayer {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* The faint lattice that tells you a grid exists without competing with it. */
#board::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: var(--grid-ox, 0) var(--grid-oy, 0);
  opacity: .22;
}

/* ----------------------------------------------------------------- tiles */

.tile {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  display: grid;
  place-items: center;

  font-family: var(--font);
  font-weight: 600;
  font-size: calc(var(--cell) * .52);
  color: var(--tile-ink);
  background: var(--tile);
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 3px 9px var(--tile-shadow);

  padding: 0;
  cursor: grab;
  touch-action: none;
  -webkit-user-drag: none;
  transition: box-shadow .12s, outline-color .12s;
}
.tile:focus-visible { outline: 2px solid var(--peel); outline-offset: 2px; }

/* Invalid words desaturate rather than shake — a shake during a frantic
   rearrange reads as the app glitching. Colour is not the only carrier: the
   underline mark below does the accessible half. */
.tile.bad {
  background: color-mix(in srgb, var(--tile) 76%, var(--dump));
  box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 0 2px var(--dump);
}
.tile.bad::after {
  content: '';
  position: absolute;
  left: 22%; right: 22%; bottom: 14%;
  height: 2px;
  background: var(--dump);
  border-radius: 2px;
}

.tile.lifted {
  cursor: grabbing;
  z-index: 50;
  will-change: transform;       /* applied on pointerdown, REMOVED on release.
                                   Never in the base rule — layer explosion
                                   crashes mobile browsers. */
  box-shadow: 0 10px 26px rgba(0,0,0,.6);
  transform-origin: center;
}

.tile.picked {
  outline: 2px solid var(--peel);
  outline-offset: 2px;
}

.tile.fresh { animation: land .28s cubic-bezier(.2,.9,.3,1.2); }
@keyframes land {
  from { transform: translateY(-9px) scale(1.08); box-shadow: 0 14px 30px rgba(0,0,0,.6); }
}

/* ------------------------------------------------------------------ rack */

#rackBar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--hair);
  background: linear-gradient(var(--table), var(--table-edge));
}

#rack {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  padding: 3px 1px 5px;
  scrollbar-width: thin;
  min-height: 54px;
  align-items: center;
}
#rack::-webkit-scrollbar { height: 5px; }
#rack::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 3px; }

/* Rack tiles are static in flow, unlike grid tiles which are positioned. */
/* pan-x, NOT none: measured on a 390px phone the rack holds 21 tiles across
   962px of scroll width inside 301px of viewport — only 8 were visible, and
   `touch-action:none` on the tiles meant a swipe did nothing, so 13 tiles
   were unreachable by finger. pan-x hands horizontal gestures to the browser
   (which scrolls the rack) and leaves vertical drags to us (lifting a tile). */
#rack .tile { position: relative; flex: 0 0 auto; touch-action: pan-x; }

#rack:empty::after {
  content: 'Rack empty — press Draw';
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 8px 2px;
}

.rack-tool {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: none;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 8px 11px;
  cursor: pointer;
  flex: 0 0 auto;
  min-height: 40px;
}
.rack-tool:hover { color: var(--ink-1); }

/* ----------------------------------------------------------------- toast */

#toast {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 12px);
  background: var(--table-edge);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  max-width: min(92vw, 380px);
  text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.warn { border-color: var(--dump); color: color-mix(in srgb, var(--ink-1) 80%, var(--dump)); }

/* -------------------------------------------------------------- overlays */

.overlay {
  position: absolute;
  inset: 0;
  /* Flex + `margin:auto` on the card, NOT `place-items:center`. Centred grid
     items clip in BOTH directions once the card is taller than the screen,
     and the clipped part is unreachable — measured: on a 667px viewport the
     CODE field and JOIN button sat at y=664-708 with no way to scroll to
     them, so a friend could not enter a room code at all. This pattern
     centres when there is room and scrolls when there is not. */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: rgba(14, 11, 9, .82);
  backdrop-filter: blur(6px);
  z-index: 200;
  padding: 20px;
}
.overlay[hidden] { display: none; }

.card {
  margin: auto;                 /* with the flex overlay above: no clipping */
  flex: 0 0 auto;
  background: var(--table);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 30px 30px 26px;
  max-width: 430px;
  width: 100%;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.card-brand {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1;
}
.card-sub { margin: 9px 0 22px; color: var(--ink-2); font-size: 14px; }
.card-rules { margin: 0 0 24px; padding-left: 19px; color: var(--ink-2); font-size: 13.5px; line-height: 1.65; }
.card-rules li { margin-bottom: 7px; }
.card-rules em { color: var(--ink-1); font-style: normal; font-weight: 600; }
.card-rules strong { color: var(--peel); font-weight: 600; }
.card-bad { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.card-bad li {
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  color: var(--dump); border: 1px solid var(--dump);
  border-radius: 4px; padding: 4px 8px;
}
.btn-start {
  width: 100%;
  justify-content: center;
  background: var(--peel);
  border-color: var(--peel);
  color: var(--table);
  font-size: 15px;
  padding: 13px;
  min-height: 48px;
}
.btn-start:hover { filter: brightness(1.1); }
.card-foot { margin: 15px 0 0; font-size: 12px; color: var(--ink-3); text-align: center; }

/* ------------------------------------------------- lobby / multiplayer */

.field { display: block; margin-bottom: 14px; }
.field-label {
  display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.field input, .join-row input, .host-row input {
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink-1);
  background: rgba(242, 235, 224, .06);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 11px 13px;
  min-height: 44px;
}
.field input:focus, .join-row input:focus, .host-row input:focus {
  outline: none; border-color: var(--peel);
}

.start-actions { display: flex; flex-direction: column; gap: 8px; }
.btn-alt {
  background: none;
  color: var(--ink-1);
  border-color: var(--ink-3);
}
.btn-alt:hover { background: rgba(242, 235, 224, .08); filter: none; }

.join-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.join-row input, .host-row input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-weight: 600;
  text-align: center;
}
.join-row .btn { flex: 0 0 auto; min-height: 44px; }

.code-display {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
#roomCode {
  font-size: 34px; font-weight: 700; letter-spacing: .3em;
  color: var(--peel); line-height: 1;
}

.seats { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.seat {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--radius);
  font-size: 13.5px; color: var(--ink-1);
}
.seat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--peel); flex: 0 0 auto; }
.seat.away .seat-dot { background: var(--ink-3); }
.seat.away { color: var(--ink-3); }
.seat-you { margin-left: auto; font-size: 11px; letter-spacing: .1em; color: var(--ink-3); text-transform: uppercase; }
.seat-empty { border-style: dashed; color: var(--ink-3); }

/* ------------------------------------------------------------- rivals */

#rivals {
  position: absolute;
  top: 0; right: 0;
  width: 128px;
  padding: 12px 12px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  z-index: 20;
}
#rivals[hidden] { display: none; }

.rival {
  background: color-mix(in srgb, var(--table-edge) 88%, transparent);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 8px;
}
.rival-head {
  display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px;
}
.rival-name {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rival-n {
  margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink-3);
}
.rival.out { opacity: .4; }
.rival.away .rival-name { color: var(--ink-3); font-style: italic; }
.rival-canvas { display: block; width: 100%; height: 52px; }

/* ----------------------------------------------------------------- phone */

@media (max-width: 720px) {
  #hud { padding: 8px 12px; gap: 10px; flex-wrap: wrap; }
  .brand { font-size: 15px; letter-spacing: .18em; }
  .bag-n { font-size: 22px; }
  .bag-label { display: none; }

  /* Actions get their own full-width row so every target stays thumb-sized
     instead of being crushed next to the brand. Utilities sit beside the
     brand on the top row, where there is spare width. */
  .hud-actions { order: 3; width: 100%; gap: 6px; }
  .hud-actions .btn { flex: 1; justify-content: center; padding: 11px 8px; min-height: 46px; }
  .btn-key { display: none; }

  .hud-utils { order: 2; margin-left: auto; gap: 4px; }
  .hud-utils .switch-label { display: none; }   /* the track itself reads as on/off */
  .btn-quiet { padding: 8px 10px; }
  .bag { margin-left: 0; order: 1; }
  .switch-big { padding: 12px; }

  #rackBar { padding: 8px 10px; gap: 8px; }
  #rack { gap: 6px; min-height: 58px; }

  /* 16px minimum on inputs or iOS zooms the whole fixed card on focus and
     pushes the button next to the field out of view. */
  input[type="text"], .field input, #joinCode, #playerName { font-size: 16px; }
  /* 44px is Apple's minimum target; below it, fast play misses constantly. */
  .btn-quiet, .rack-tool, .switch-track { min-height: 44px; }
  .rack-tool { min-width: 44px; }
  .card { padding: 24px 22px 22px; }
  .card-brand { font-size: 32px; }
  #toast { bottom: 108px; }

  /* Rivals become a horizontal strip along the top of the board — a 128px
     column would eat a third of a phone screen. */
  #rivals {
    flex-direction: row;
    width: 100%;
    top: auto;
    padding: 8px;
    gap: 6px;
  }
  .rival { flex: 1; min-width: 0; padding: 6px; }
  .rival-canvas { height: 34px; }
  .rival-name { font-size: 10px; }
  #roomCode { font-size: 27px; letter-spacing: .24em; }
}

/* Short screens (any iPhone with the Safari toolbars showing, iPhone SE,
   most Androids): the start card is 742px of content. Compact it so the
   join row is reachable without scrolling; the overlay scrolls regardless. */
@media (max-height: 800px) {
  .card { padding: 20px 22px 18px; }
  .card-brand { font-size: 27px; }
  .card-sub { margin-bottom: 10px; font-size: 13px; }
  .card-rules { font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
  .card-rules li { margin-bottom: 4px; }
  .switch-big { padding: 9px; }
  .field { margin-bottom: 10px; }
  .card-foot { margin-top: 10px; }
  .start-actions { gap: 8px; }
}

/* Landscape phone: vertical space is the scarce thing, so the chrome thins. */
@media (max-height: 460px) and (orientation: landscape) {
  #hud { padding: 5px 12px; gap: 10px; }
  /* A landscape phone is ~780px WIDE, so the max-width:720px rules never
     fire here — the bag label has to be hidden again or it collides with
     the count. Same for the key hints and the spellcheck word. */
  .bag-label { display: none; }
  .btn-key { display: none; }
  .hud-utils .switch-label { display: none; }
  .brand { font-size: 14px; letter-spacing: .14em; }
  .hud-actions { order: 0; width: auto; }
  .hud-actions .btn { min-height: 44px; padding: 6px 10px; }
  .card-rules { display: none; }
  #rackBar { padding: 5px 10px; }
  #rack { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ======================================================================
   Zero-typing join: the QR and the share sheet.
   ====================================================================== */

.code-display { justify-content: center; }

/* A QR wants a white quiet zone whatever the table looks like. */
.qr {
  width: 156px;
  margin: 0 auto 12px;
  padding: 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 26px var(--tile-shadow);
}
.qr svg { display: block; width: 100%; height: auto; }
.qr:empty { display: none; }

.share-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 2px; }
.share-row .btn { flex: 1 1 0; min-height: 44px; }

/* ======================================================================
   Standing rooms: the record, the name row, and "your rooms".
   ====================================================================== */

.standings {
  margin: 0 0 16px;
  padding: 11px 14px 12px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  font-size: 13px;
  text-align: left;
}
.standings-title {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 7px;
}
.standings-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.standings-row .n { flex: 1 1 auto; min-width: 0; color: var(--ink-1); font-weight: 600;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standings-row .w { color: var(--peel); font-variant-numeric: tabular-nums; white-space: nowrap; }
.standings-row .s { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.standings-last { margin-top: 8px; color: var(--ink-2); font-size: 12.5px; }

.host-row { display: flex; gap: 8px; margin-top: 8px; }
.host-row input { flex: 1 1 auto; min-width: 0; }
.host-row .btn { flex: 0 0 auto; min-height: 44px; }
.host-row[hidden] { display: none; }

.rooms { margin-top: 14px; text-align: left; }
.rooms[hidden] { display: none; }
.rooms-label {
  display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 7px;
}
.rooms-list { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  min-height: 40px; padding: 6px 13px;
  border: 1px solid var(--hair); border-radius: 999px;
  background: rgba(242, 235, 224, .04); color: var(--ink-1);
  font: 600 13px/1.2 var(--font); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
}
.chip small { color: var(--ink-3); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.chip:hover, .chip:focus-visible { border-color: var(--peel); outline: none; }

#btnRematch[hidden], #btnAgain[hidden], #btnShare[hidden], #btnLeaveEnd[hidden],
.standings[hidden] { display: none; }

/* Slugs are lowercase words; the spaced-caps code styling would lie about them. */
.join-row input, .host-row input { text-transform: none; letter-spacing: .02em; }

/* Arriving by link, the code is already known: the row is one wide button. */
.join-row.linked #joinCode { display: none; }
.join-row.linked .btn {
  flex: 1 1 auto; min-width: 0; white-space: normal;
  line-height: 1.25; padding: 12px 14px;
}

.rooms { margin: 0 0 14px; }

/* A standing room's name is a word, not a code: tighter tracking, and it
   wraps instead of walking off a 375px card. */
#roomCode { max-width: 100%; overflow-wrap: anywhere; }
.code-display.named #roomCode { font-size: 22px; letter-spacing: .06em; }
.chip { overflow-wrap: anywhere; }

@media (max-height: 800px) {
  .qr { width: 124px; padding: 6px; margin-bottom: 10px; }
  .standings { margin-bottom: 12px; padding: 9px 12px 10px; }
}