/* UNO's theme (docs/design/uno.md §9; the owner, 2026-10-02: "It should use the shell like the
   others and it should instantly and easily look right"). The page links web/shared/styles/
   tokens.css, base.css and shell.css before this file: the home, the waiting rooms, the sheets,
   the curtain and the toast are the shell's rules on the shared palette (gin's felt, tokens.css),
   and this file adds UNO's one accent, the type scale the shell leaves to each theme (the title,
   the boxes' spacing, the fields, the tabs, the lobby's seat list) and the table: the seats with
   their card counts, the pile, the colour in play, the hand. The base pack is deliberately plain:
   a tile is a colour and a glyph, a wild a four-colour tile. Prettier formats this file. */
:root {
  --gutter: 12px;
  /* The one accent: UNO's blue, on the shared felt (the owner, 2026-10-02: "make the highlights
     BLUE instead of RED"); the wordmark alone keeps the red. */
  --accent: #3b7dd8;
  --accent-dark: #2a5fae;
  --emphasis: var(--accent);
  /* The four card colours and the tile's box. */
  --uno-red: #d64541;
  --uno-yellow: #e8c547;
  --uno-green: #3fa66b;
  --uno-blue: #3b7dd8;
  --tile-w: clamp(44px, 12vw, 60px);
  --tile-h: calc(var(--tile-w) * 1.45);
}
@media (min-width: 900px) {
  :root {
    --gutter: 16px;
  }
}

/* ---------- the shell's type scale ---------- */
/* The shared felt under every screen, gin's own (tokens.css `--felt`). */
html,
body {
  background: var(--felt);
}
.card-box {
  border: 1px solid rgba(255, 255, 255, 0.05);
}
/* The resume box's button in the accent, its ink light on the blue. */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
}
.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.15);
}
h1 {
  font-size: 2.2rem;
  line-height: 1.1;
  margin: 10px 0 0;
  letter-spacing: 0.04em;
  color: var(--accent);
}
/* The wordmark alone keeps UNO's red; every other heading ("Your table") takes the blue accent. */
.masthead h1 {
  color: var(--uno-red);
}
.masthead {
  margin: 4px 0 14px;
}
.subtitle {
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 4px 0 14px;
}
.card-box.centered,
.centered {
  text-align: center;
}
.card-box > label + *,
.card-box > label + .row {
  margin-top: 8px;
}
.card-box > .row + .row,
.card-box > .stepper + .row,
.card-box > .stepper + .btn {
  margin-top: 12px;
}
input[type='text'] {
  padding: 13px 14px;
  background: #0d2418;
  font-size: 1.05rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-height: 48px;
}
label {
  display: block;
  letter-spacing: 0.06em;
}
.row + .btn {
  margin-top: 10px;
}
.row.between {
  justify-content: space-between;
}
.muted {
  color: var(--muted);
}
.icon-btn {
  cursor: pointer;
}
.room-code {
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  margin: 6px 0 10px;
}
.tab-btn,
.mode-btn {
  min-height: 44px;
  cursor: pointer;
}
.tab-btn.active {
  box-shadow: inset 0 -2px 0 var(--accent);
}
.rules-list li {
  font-size: 0.92rem;
  line-height: 1.4;
}
.sheet-title {
  font-weight: 700;
}
.sheet .btn-block + .btn-block {
  margin-top: 8px;
}
.empty-note {
  font-size: 0.88rem;
  padding: 8px 0 0;
  line-height: 1.4;
}
.empty-note.left {
  text-align: left;
}
#guestSeatName {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}
#guestSeatName .row {
  margin-top: 8px;
}
#guestNameNote {
  font-size: 0.82rem;
  padding-top: 6px;
}
/* ---------- the table ---------- */
#tableScreen {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#tableScreen.hidden {
  display: none;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* The strip's layout is shell.css's (.names-strip); UNO's weight, size and ellipsis. */
.names-strip {
  font-weight: 600;
  font-size: 0.9rem;
  text-overflow: ellipsis;
}
.direction {
  color: var(--muted);
  font-size: 1.1rem;
}
/* Every seat with its card count (the owner, 2026-10-02: "like briscola ... you should be able to
   see the number of cards they have remaining"), the seat to play lit in the accent. */
.seats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.seat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 0.9rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.seat.mine {
  color: var(--text);
}
.seat.current {
  color: var(--text);
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.seat-name {
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat-count {
  min-width: 1.8em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--card-2);
  color: var(--text);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 6px 0;
}
.draw-pile {
  width: var(--tile-w);
  height: var(--tile-h);
  border-radius: 10px;
  border: 3px solid var(--text);
  background: repeating-linear-gradient(45deg, var(--card) 0 6px, var(--card-2) 6px 12px);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--muted);
}
.top-card {
  display: grid;
}
.color-dot {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0e1014;
}
.color-dot[data-color='red'],
.swatch[data-color='red'],
.tile[data-color='red'] {
  background: var(--uno-red);
}
.color-dot[data-color='yellow'],
.swatch[data-color='yellow'],
.tile[data-color='yellow'] {
  background: var(--uno-yellow);
}
.color-dot[data-color='green'],
.swatch[data-color='green'],
.tile[data-color='green'] {
  background: var(--uno-green);
}
.color-dot[data-color='blue'],
.swatch[data-color='blue'],
.tile[data-color='blue'] {
  background: var(--uno-blue);
}
.tile[data-color='wild'] {
  background: conic-gradient(
    var(--uno-red) 0 25%,
    var(--uno-yellow) 25% 50%,
    var(--uno-green) 50% 75%,
    var(--uno-blue) 75% 100%
  );
}
.tile {
  width: var(--tile-w);
  height: var(--tile-h);
  border-radius: 10px;
  border: 3px solid #f4f1ea;
  font-weight: 800;
  font-size: calc(var(--tile-w) * 0.5);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgb(0 0 0 / 40%);
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.tile span {
  background: rgb(255 255 255 / 92%);
  color: #16181d;
  border-radius: 999px;
  min-width: 1.6em;
  height: 1.6em;
  display: grid;
  place-items: center;
  font-size: 0.7em;
  padding: 0 0.2em;
}
.tile.top {
  cursor: default;
}
.tile.dim {
  opacity: 0.45;
  cursor: default;
}
.tile.playable {
  outline: 3px solid var(--go);
  outline-offset: 2px;
}
/* A tile whose clone is in the air (ui/motion.ts): hidden in place until the clone lands. */
.tile.arriving {
  visibility: hidden;
}
/* A tile in flight (ui/motion.ts over web/shared/edge/motion.ts `launchClone`): the shell fixes it on
   the body, inert, under the overlays (shell.css `.flyer`); the theme's part is the glide, and
   `--fly-ms` is the flight's own length. */
.flyer {
  transition: transform var(--fly-ms) cubic-bezier(0.2, 0.8, 0.2, 1);
}
.color-picker {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.color-picker.hidden {
  display: none;
}
.swatch {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #f4f1ea;
  cursor: pointer;
}
.status-line {
  margin: 0;
  min-height: 2.6em;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}
.hand {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 6px 0;
  min-height: var(--tile-h);
}
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* The result sheet's rows are shell.css's (`.score-list .score-row`); the winner's wears the accent ring. */
.score-row.winner {
  box-shadow: inset 0 0 0 2px var(--accent);
  font-weight: 700;
}

/* ---------- motion ---------- */
/* Reduced motion: the flight is a 1 ms glide (ui/motion.ts `durationsFor(true)` agrees). */
@media (prefers-reduced-motion: reduce) {
  .flyer {
    transition-duration: 1ms;
  }
}