/*
 * One stylesheet for both screens: the TV (host.html) and the phone (index.html).
 * The look is locked: near-black panel, monospace, a ">" cursor, bracketed labels,
 * faint scanlines, glass option cards with a coloured left bar and a card suit.
 *
 * The suit shape is the primary pairing cue between the two screens and colour is
 * secondary, so that a colour-blind player can still pair phone to TV. The glyph and
 * the colour of each marker are defined once, here, keyed by [data-marker].
 */

:root {
  --bg: #07080a;
  --fg: #ffffff;
  --muted: #9c9c9d;
  --hairline: rgba(255, 255, 255, .10);

  --crimson: #ff2f3a;
  --coral: #ff6b4a;
  --amber: #ffb347;
  --teal: #4ad6c3;
  --lavender: #b39cff;

  /* System faces only: no web font is shipped with the game. */
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

/* ---- the panel: the terminal frame both screens live in ---- */

.panel {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 55% at 18% -10%, rgba(255, 47, 58, .16), transparent 70%);
}

/* The scanlines sit over everything, including the cards. */
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px);
}

.inner {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---- the four markers: glyph and colour, defined once ---- */

/* --tint is the TV card's fill, --tint-up the phone buzzer's: both washes, not colour blocks. */
[data-marker='hearts']   { --c: var(--crimson);  --tint: rgba(255, 47, 58, .07);   --tint-up: rgba(255, 47, 58, .10); }
[data-marker='diamonds'] { --c: var(--amber);    --tint: rgba(255, 179, 71, .07);  --tint-up: rgba(255, 179, 71, .10); }
[data-marker='clubs']    { --c: var(--teal);     --tint: rgba(74, 214, 195, .07);  --tint-up: rgba(74, 214, 195, .10); }
[data-marker='spades']   { --c: var(--lavender); --tint: rgba(179, 156, 255, .07); --tint-up: rgba(179, 156, 255, .10); }

.glyph { color: var(--c); line-height: 1; }
[data-marker='hearts'] > .glyph::before,   .glyph[data-marker='hearts']::before   { content: '\2665'; }
[data-marker='diamonds'] > .glyph::before, .glyph[data-marker='diamonds']::before { content: '\2666'; }
[data-marker='clubs'] > .glyph::before,    .glyph[data-marker='clubs']::before    { content: '\2663'; }
[data-marker='spades'] > .glyph::before,   .glyph[data-marker='spades']::before   { content: '\2660'; }

/* ---- small shared pieces ---- */

.label { color: var(--muted); letter-spacing: .18em; text-transform: uppercase; }
.muted { color: var(--muted); }

.langs { display: flex; gap: 6px; align-items: center; }
.langs button {
  font: inherit;
  background: none;
  border: 0;
  padding: 0 2px;
  color: var(--muted);
  letter-spacing: .12em;
  cursor: pointer;
}
.langs button[aria-pressed='true'] { color: var(--fg); }
.langs .sep { color: var(--hairline); }

.field { display: block; margin-bottom: 14px; text-align: left; }
.field > .k { display: block; font-size: .78em; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.field input, .field select {
  font: inherit;
  width: 100%;
  color: var(--fg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 11px 12px;
  letter-spacing: .08em;
}
.field input:focus-visible, .field select:focus-visible,
button:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.field select { appearance: none; }

.cta, .ghost {
  font: inherit;
  font-weight: 700;
  letter-spacing: .08em;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
}
.cta { background: var(--coral); color: var(--bg); }
.cta.go { background: var(--teal); }
.ghost { background: transparent; color: var(--muted); border-color: var(--hairline); }
.cta[disabled], .ghost[disabled] { opacity: .45; cursor: default; }

.status { color: var(--muted); }
.error { color: var(--crimson); }
.error:empty { display: none; }

/* ======================= the TV ======================= */

.tv .inner { padding: clamp(18px, 2.4vw, 44px); gap: clamp(14px, 1.8vh, 28px); }

.tv .topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: clamp(11px, 1vw, 17px);
  color: var(--muted);
  letter-spacing: .12em;
}
.tv .topbar .clock { color: var(--amber); font-variant-numeric: tabular-nums; }
.tv .topbar > * { white-space: nowrap; }

.tv .view { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.tv .view[hidden] { display: none; }

/* open a room: a narrow form in the middle of the screen */
.tv .form {
  margin: auto;
  width: min(420px, 100%);
  font-size: clamp(13px, 1.1vw, 18px);
  text-align: center;
}
.tv .form h1 { font-size: 1em; font-weight: 500; letter-spacing: .18em; color: var(--muted); margin: 0 0 20px; text-transform: uppercase; }
.tv .form .cta { width: 100%; padding: 12px; }
.tv .form .error { margin-top: 14px; }

/* lobby */
.tv .lobby { align-items: center; justify-content: center; text-align: center; gap: 0; }
.tv .lobby .kod { font-size: clamp(11px, 1vw, 17px); }
.tv .lobby .code {
  font-size: clamp(76px, 15vw, 240px);
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--coral);
  line-height: 1.05;
  margin: .08em 0 0;
  /* the letter-spacing hangs off the last digit; pull it back to stay centred */
  text-indent: .18em;
}
.tv .lobby .where { font-size: clamp(11px, .95vw, 16px); color: var(--muted); letter-spacing: .1em; }
.tv .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin: clamp(18px, 3vh, 40px) 0;
  font-size: clamp(13px, 1.2vw, 22px);
  max-width: 50ch;
}
.tv .pill { border: 1px solid var(--hairline); border-radius: 999px; padding: 6px 16px; }
.tv .lobby .cta { font-size: clamp(14px, 1.3vw, 22px); padding: 12px 36px; }
.tv .lobby .status { font-size: clamp(12px, 1.1vw, 19px); margin: clamp(18px, 3vh, 40px) 0; }

/* question: the text and the four cards read as one block in the middle of the screen */
#view-question, #view-reveal { justify-content: center; gap: clamp(18px, 4vh, 52px); }

.tv .question {
  font-size: clamp(28px, 4vw, 68px);
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}
.tv .question .caret { color: var(--coral); }
.tv .question .block { background: var(--coral); color: var(--bg); margin-left: .12em; }

.tv .options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(9px, 1vw, 16px);
}
.tv .opt {
  display: flex;
  align-items: center;
  gap: clamp(11px, 1.1vw, 20px);
  background: var(--tint);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--c);
  border-radius: 7px;
  padding: clamp(12px, 1.4vw, 24px) clamp(13px, 1.5vw, 26px);
  font-size: clamp(18px, 2vw, 34px);
}
.tv .opt .glyph { font-size: 1.25em; }

/* reveal */
.tv .answer { font-size: clamp(16px, 1.6vw, 28px); color: var(--muted); }
.tv .answer .opt-text { color: var(--fg); }
.tv .answer .glyph { font-size: 1.15em; }

.tv .bars { display: flex; align-items: flex-end; gap: clamp(10px, 1.4vw, 24px); flex: 0 0 clamp(110px, 26vh, 240px); }
.tv .bars .b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.tv .bars .b .fill { background: var(--c); border-radius: 4px 4px 0 0; min-height: 3px; }
.tv .bars .b .n { font-size: clamp(12px, 1.1vw, 20px); color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.tv .bars .b .glyph { font-size: clamp(26px, 2.6vw, 46px); margin-bottom: 8px; }

.tv .board { list-style: none; margin: 0 auto; padding: 0; width: min(760px, 100%); font-size: clamp(14px, 1.5vw, 26px); }
.tv .board li { display: flex; justify-content: space-between; gap: 16px; padding: .4em 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.tv .board li:last-child { border-bottom: 0; }
.tv .board .rank { color: var(--muted); margin-right: .8em; }
.tv .board .score { font-variant-numeric: tabular-nums; }
.tv .board.dense { width: min(1040px, 100%); font-size: clamp(12px, 1.1vw, 19px); columns: 2; column-gap: clamp(20px, 3vw, 60px); }
.tv .board.dense li { break-inside: avoid; }

.tv .row-end { display: flex; justify-content: center; }
.tv .row-end .cta { font-size: clamp(13px, 1.2vw, 20px); padding: 11px 28px; }

.tv .finished h1 { font-size: clamp(22px, 2.6vw, 44px); font-weight: 600; letter-spacing: .14em; margin: 0 0 .6em; text-align: center; }
.tv .finished { gap: clamp(14px, 2vh, 28px); }

/* ======================= the phone ======================= */

.phone .inner { padding: 16px; gap: 14px; }

.phone .bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .1em;
}
.phone .bar .me { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone .bar .score { color: var(--amber); font-variant-numeric: tabular-nums; }

.phone .view { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.phone .view[hidden] { display: none; }

.phone .join { justify-content: center; font-size: 14px; }
.phone .join h1 { font-size: 11px; font-weight: 500; letter-spacing: .18em; color: var(--muted); margin: 0 0 18px; text-transform: uppercase; }
.phone .join .cta { width: 100%; padding: 13px; }
.phone .join .error { margin-top: 14px; font-size: 12px; }
.phone .join .notice { font-size: 12px; margin-bottom: 14px; letter-spacing: .04em; }
.phone .field input { font-size: 16px; } /* 16px keeps iOS from zooming on focus */
.phone .field input[name='code'] { letter-spacing: .4em; text-align: center; font-size: 26px; }

.phone .play { gap: 12px; }
.phone .play .status { font-size: 12px; text-align: center; letter-spacing: .08em; min-height: 1.4em; }

.phone .buzzers {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  min-height: 0;
}
.phone .buzz {
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 0;
  background: var(--tint-up);
  border: 1px solid var(--c);
  border-radius: 10px;
  color: var(--c);
  font-size: clamp(46px, 20vw, 86px);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.phone .buzz .glyph { color: inherit; } /* so the glyph follows the button when it fills in */
.phone .buzz:active { background: var(--c); color: var(--bg); }
.phone .buzz[disabled] { cursor: default; opacity: .32; }
/* the one this player tapped stays solid, so the phone always says what it sent */
.phone .buzz[aria-pressed='true'] { opacity: 1; background: var(--c); color: var(--bg); box-shadow: 0 0 0 2px var(--c); }