:root {
  color-scheme: dark;

  --bg: #0d1411;
  --felt: #14372c;
  --felt-edge: #0b241c;
  --panel: #16211c;
  --line: #26362f;

  --fg: #e8ede9;
  --muted: #8fa39a;

  --us: #4ade80;
  --them: #fbbf24;

  /* Player colours, named for where that player sits relative to the host —
     the host is south. They are fixed per player, not per viewer, so everyone
     at the table sees the same person in the same colour. Where a player
     *appears* on screen is a separate thing: you always sit at the bottom of
     your own screen, whatever colour you are. */
  --north: #60a5fa;
  --south: #f87171;
  --east: #4ade80;
  --west: #fbbf24;

  --bone: #f2efe4;
  --bone-edge: #cfcabb;
  --bone-dead: #8f9a92;
  --pip: #1b1f1d;

  --radius: 8px;
}

* {
  box-sizing: border-box;
}

/* Layout rules below set `display`, which would otherwise beat this attribute. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.screen {
  min-height: 100vh;
  /* On a phone, 100vh is the viewport *without* the browser chrome subtracted,
     so a full-height layout runs off the bottom of what you can actually see.
     dvh is the visible height, and shrinks as the address bar appears. */
  min-height: 100dvh;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.screen--centred {
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------- landing */

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  text-align: center;
  max-width: 34rem;
  padding: 1rem;
}

.mark {
  width: min(11rem, 44vw);
  height: auto;
  filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.55));
}

.wordmark {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  line-height: 1;
}

.wordmark__over {
  font-size: clamp(0.72rem, 2.4vw, 0.95rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
  /* Tracking adds space after the last letter; nudge back to stay centred. */
  padding-left: 0.42em;
}

.wordmark__main {
  font-size: clamp(2.2rem, 11vw, 3.9rem);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding-left: 0.11em;
  background: linear-gradient(175deg, #f6f3e9 25%, #9fb3a6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.landing__sub {
  margin: 0;
  color: var(--muted);
  max-width: 26rem;
  line-height: 1.75;
  font-size: 0.92rem;
}

.primary {
  background: #1f3a2b;
  border-color: var(--us);
  color: var(--fg);
  padding: 0.7rem 2.1rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
}

.primary:hover {
  background: #26482f;
  border-color: var(--us);
}

.field em {
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.75;
}

/* ---------------------------------------------------------- lobby cards */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.75rem;
  width: min(28rem, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.card h2 {
  margin: 0;
  font-size: 1.15rem;
}

.brand {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.brand__sub {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.muted {
  color: var(--muted);
  margin: 0;
}

.small {
  font-size: 0.8rem;
  line-height: 1.5;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

input[type='text'] {
  font: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--fg);
  background: #101815;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  width: 100%;
}

input[type='text']:focus {
  outline: none;
  border-color: var(--us);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stack button {
  padding: 0.6rem 1rem;
}

.divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.join {
  display: flex;
  gap: 0.5rem;
}

.join input {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 600;
  text-align: center;
}

.error {
  margin: 0;
  color: #f87171;
  font-size: 0.85rem;
}

.invited {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid #2f6b4c;
  background: #131f19;
  border-radius: var(--radius);
  font-size: 0.9rem;
  text-align: center;
}

.invited strong {
  letter-spacing: 0.25em;
  font-size: 1.05rem;
  margin-left: 0.2em;
}

/* --------------------------------------------------------- waiting room */

.code {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-align: center;
  padding: 0.6rem 0 0.6rem 0.35em;
  background: #101815;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

.qr {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.qr__image {
  width: min(11rem, 55vw);
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
}

.qr__image svg {
  display: block;
  width: 100%;
  height: auto;
}

.qr figcaption {
  text-align: center;
  max-width: 18rem;
}

.copy {
  align-self: center;
}

#invite-url {
  text-align: center;
  word-break: break-all;
  font-size: 0.75rem;
}

.roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.roster__seat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--muted);
}

.roster__seat--taken {
  color: var(--fg);
  border-color: #2f6b4c;
  background: #131f19;
}

/**
 * A player's colour, set once on any element that represents them. Anchored on
 * the host rather than the viewer, so everyone at the table sees the same
 * person in the same colour — see hueOf() in app.js.
 */
.hue--south {
  --hue: var(--south);
}
.hue--west {
  --hue: var(--west);
}
.hue--north {
  --hue: var(--north);
}
.hue--east {
  --hue: var(--east);
}

.roster__who {
  color: var(--hue, var(--fg));
}

.roster__tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

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

.toast {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: #3a2020;
  border: 1px solid #5c2f2f;
  color: #f6b8b8;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.82rem;
  z-index: 30;
}

/* ------------------------------------------------------------ top bar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.topbar h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.scoreboard {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.4rem 1rem;
}

.score {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.score__label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.score__value {
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.score--us .score__value {
  color: var(--us);
}

.score--them .score__value {
  color: var(--them);
}

.score__target {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  color: var(--muted);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 0 1rem;
  line-height: 1.4;
}

/* -------------------------------------------------------------- table */

.table {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) 1fr minmax(7rem, 9rem);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    ".    north ."
    "west board east";
  gap: 0.75rem;
  align-items: stretch;
  min-height: 22rem;
}

.seat--north {
  grid-area: north;
  justify-self: center;
}
.seat--west {
  grid-area: west;
}
.seat--east {
  grid-area: east;
}

.seat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-self: start;
  min-width: 7rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.seat--active {
  border-color: var(--hue);
  box-shadow: 0 0 0 1px var(--hue), 0 0 18px -6px var(--hue);
}

.seat__name {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hue);
}

.seat__count {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.back {
  width: 9px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(160deg, #3c5f52, #24413a);
  border: 1px solid #47695c;
}

.seat__meta {
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.seat__voids {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.void {
  display: inline-grid;
  place-items: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.2rem;
  border-radius: 3px;
  background: #3a2020;
  border: 1px solid #5c2f2f;
  color: #f6b8b8;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

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

.board {
  grid-area: board;
  position: relative;
  background: radial-gradient(ellipse at center, var(--felt), var(--felt-edge));
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 12rem;
}

.board__scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1.25rem 1rem;
  scrollbar-width: thin;
}

.line {
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  margin: 0 auto;
  min-height: 3.5rem;
}

.board__empty {
  position: absolute;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  pointer-events: none;
}

.ends {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgb(9 16 13 / 0.85);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  z-index: 2;
  pointer-events: none;
}

.ends__label {
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.ends__value {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
  background: var(--bone);
  color: var(--pip);
  font-weight: 700;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/**
 * Each player's latest tile, ringed in their colour. At most one per player, so
 * a full table shows four — fewer when someone's last turn was a pass.
 */
.line .tile--recent {
  outline: 2px solid var(--hue, var(--muted));
  outline-offset: 2px;
  border-radius: 5px;
}

.end-marker {
  align-self: center;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0.4rem;
  white-space: nowrap;
}

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

.tile {
  --half: 26px;
  display: flex;
  background: var(--bone);
  border: 1px solid var(--bone-edge);
  border-radius: 4px;
  padding: 2px;
  gap: 2px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
  flex: none;
}

.tile--h {
  flex-direction: row;
}

.tile--v {
  flex-direction: column;
}

.tile__half {
  width: var(--half);
  height: var(--half);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 1px;
  padding: 3px;
}

.tile--h .tile__half + .tile__half {
  border-left: 1px solid var(--bone-edge);
}

.tile--v .tile__half + .tile__half {
  border-top: 1px solid var(--bone-edge);
}

.pip {
  border-radius: 50%;
  background: var(--pip);
  width: 100%;
  height: 100%;
  align-self: center;
  justify-self: center;
}

/* ------------------------------------------------------------ my hand */

.you {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.you__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Your own colour — whichever it is; you are not always south. */
.you__name {
  color: var(--hue, var(--fg));
  font-weight: 600;
}

.hand {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-height: 4.5rem;
  align-items: center;
}

.hand .tile {
  --half: 32px;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
}

.hand .tile--playable {
  cursor: pointer;
  outline: 2px solid var(--hue, var(--fg));
  outline-offset: 2px;
}

.hand .tile--playable:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgb(0 0 0 / 0.5);
}

.hand .tile--idle {
  opacity: 0.45;
}

.hand .tile--selected {
  transform: translateY(-8px);
  outline-color: #fff;
}

/* --------------------------------------------------------- end picker */

.endpick {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}

.endpick__prompt {
  font-size: 0.8rem;
  color: var(--muted);
}

button {
  font: inherit;
  font-size: 0.85rem;
  color: var(--fg);
  background: #24352d;
  border: 1px solid #354b40;
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

button:hover {
  background: #2e453a;
  border-color: var(--us);
}

.endpick__cancel {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

/* ------------------------------------------------------------- status */

.status {
  min-height: 1.4rem;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status strong {
  color: var(--fg);
  font-weight: 600;
}

.seat__bot {
  margin-left: 0.4rem;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 0.25rem;
}

.roster__who {
  flex: 1;
}

.roster__move {
  display: flex;
  gap: 0.2rem;
}

.tiny {
  padding: 0.05rem 0.4rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

.tiny:disabled {
  opacity: 0.3;
  cursor: default;
}

.status--alert strong {
  color: var(--them);
}

/* ------------------------------------------------------------ overlay */

.overlay {
  position: fixed;
  inset: 0;
  background: rgb(6 10 8 / 0.78);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 10;
}

.overlay[hidden] {
  display: none;
}

.overlay__card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.75rem 2rem;
  max-width: 26rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.overlay__card h2 {
  margin: 0;
  font-size: 1.25rem;
}

.overlay__card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.overlay__pips {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.overlay__pips b {
  display: block;
  font-size: 1.1rem;
  color: var(--fg);
}

.overlay__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.overlay__actions button {
  padding: 0.5rem 1.25rem;
}

.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}

/* ------------------------------------------------------------- review */

.review {
  position: fixed;
  inset: 0;
  background: rgb(6 10 8 / 0.85);
  display: grid;
  place-items: center;
  padding: 1rem;
  z-index: 20;
}

.review__card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(46rem, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
}

.review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.review__head h2 {
  margin: 0;
  font-size: 1.1rem;
}

.review__hint {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.review__hint code {
  color: var(--fg);
}

.review__list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.move {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.75rem;
  background: #131c18;
}

.move--you {
  border-left: 2px solid var(--us);
}

.move--partner {
  border-left: 2px solid #2f6b4c;
}

.move--opponent {
  border-left: 2px solid var(--them);
}

.move__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.move__seat {
  font-weight: 600;
}

.move__what {
  color: var(--muted);
}

.move__forced {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 0.3rem;
}

.move__reasons {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
}

.move__reasons li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  color: var(--muted);
}

.weight {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.weight--plus {
  color: var(--us);
}

.weight--minus {
  color: #f87171;
}

.move__alt {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: 0.4rem;
}

/* ----------------------------------------------------------- narrower */

@media (max-width: 720px) {
  .screen {
    padding: 0.6rem;
  }

  .table {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "north north"
      "board board"
      "west  east";
    /* The board takes whatever the seats, status and hand do not. Capping it
       instead just moves the empty space somewhere else on the screen. */
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
    gap: 0.5rem;
  }

  .seat--north {
    justify-self: stretch;
  }

  /* The board is scenery; the hand is what you touch. Cap the felt so it stops
     claiming most of the screen and leave the room to the tiles. */
  .board {
    min-height: 6rem;
  }

  .board__scroll {
    padding: 0.75rem 0.5rem;
  }

  .line .tile {
    --half: 20px;
  }

  /* The seat panels are reference, not the main event — shrink them. */
  .seat {
    padding: 0.45rem 0.55rem;
    gap: 0.25rem;
  }

  .seat__name {
    font-size: 0.68rem;
  }

  .back {
    width: 7px;
    height: 13px;
  }

  .topbar h1 {
    font-size: 0.8rem;
  }

  .scoreboard {
    padding: 0.3rem 0.7rem;
    gap: 0.75rem;
  }

  .score__value {
    font-size: 1.15rem;
  }

  /* Tiles are the tap targets, so give them everything that is left. Sized to
     fit a full hand of seven across the screen rather than wrapping to a second
     row, which halves them again. */
  .hand {
    gap: 0.25rem;
    min-height: 0;
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 0.2rem;
  }

  .hand .tile {
    --half: clamp(28px, calc((100vw - 3rem) / 7 - 11px), 46px);
  }

  .you__header {
    font-size: 0.68rem;
  }
}