/* 8-bit style. Font: Press Start 2P (SIL OFL 1.1, see /fonts/OFL.txt) */

@font-face {
  font-family: "Press Start 2P";
  src: url("/fonts/press-start-2p.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Theme tokens ---- */

:root {
  color-scheme: light;
  --bg: #f3eedf;
  --surface: #fffcf2;
  --ink: #1d1b2c;
  --muted: #77738c;
  --shadow: #1d1b2c;
  --accent: #2f62e8;
  --accent-text: #ffffff;
  --ok: #2f9e44;
  --warn: #d68400;
  --danger: #d8323c;
  --px: 4px; /* one "dot" */
}

/* Dark: follow the OS setting (unless light was chosen manually) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12121c;
    --surface: #1e1e2e;
    --ink: #e9e6f5;
    --muted: #8e8aa8;
    --shadow: #000000;
    --accent: #5b8cff;
    --accent-text: #0b0b14;
    --ok: #5ccb7c;
    --warn: #f2b13c;
    --danger: #ff6670;
  }
}

/* Dark: chosen manually */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12121c;
  --surface: #1e1e2e;
  --ink: #e9e6f5;
  --muted: #8e8aa8;
  --shadow: #000000;
  --accent: #5b8cff;
  --accent-text: #0b0b14;
  --ok: #5ccb7c;
  --warn: #f2b13c;
  --danger: #ff6670;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Press Start 2P", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

.error { color: var(--danger); margin: 0; text-align: center; }

/* Cut one dot off each corner for a pixel-art look */
.notch {
  clip-path: polygon(
    0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px))
  );
}

/* ---- Top bar ---- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: var(--px) solid var(--ink);
}
.brand {
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 1px;
}
.topbar-right { display: flex; align-items: center; gap: 14px; }

.conn {
  font: inherit;
  font-size: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.conn::before {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
}
.conn.online { color: var(--ok); cursor: default; }
.conn.connecting { color: var(--warn); }
.conn.connecting::before { animation: blink 0.8s steps(1) infinite; }
.conn.offline { color: var(--danger); }

@keyframes blink { 50% { opacity: 0; } }

/* Theme toggle (pixel-art icon) */
.icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.icon-btn svg { width: 20px; height: 20px; shape-rendering: crispEdges; }
.icon-btn:hover { color: var(--accent); }

/* ---- Buttons / inputs ---- */

.btn {
  font: inherit;
  font-size: 12px;
  padding: 12px 18px;
  min-height: 44px;
  border: var(--px) solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--px) var(--px) 0 var(--shadow);
  cursor: pointer;
  text-transform: uppercase;
}
.btn:hover { background: color-mix(in srgb, var(--surface) 85%, var(--ink)); }
.btn:active:not(:disabled) {
  transform: translate(var(--px), var(--px));
  box-shadow: none;
}
.btn.primary { background: var(--accent); color: var(--accent-text); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--ink)); }
.btn.small { min-height: 32px; padding: 6px 10px; font-size: 8px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

input[type="text"] {
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: var(--surface);
  border: var(--px) solid var(--ink);
  border-radius: 0;
  padding: 10px 12px;
  min-width: 0;
}
input[type="text"]::placeholder { color: var(--muted); }
input[type="text"]:focus { outline: var(--px) solid var(--accent); outline-offset: 0; }

.row { display: flex; gap: 12px; }
.row input { flex: 1; width: 0; }

/* ---- Pages ---- */

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px;
}

.home {
  max-width: 420px;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* keep the input's default width from overflowing */
  gap: 24px;
  padding-top: 12vh;
}

/* Title logo */
.title-logo {
  margin: 0 0 12px;
  text-align: center;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: var(--px) var(--px) 0 var(--shadow);
}

/* Title-screen style menu: borderless items in a column, pixel ▶ cursor on the selected one */
.deck-choice {
  justify-self: center;
  display: grid;
  gap: 18px;
  padding: 8px 0;
}
.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 24px;
  padding-left: 32px;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--muted);
}
.menu-item input { position: absolute; opacity: 0; pointer-events: none; }
.menu-item:hover { color: var(--ink); }
.menu-item:has(input:checked) { color: var(--ink); }
.menu-item:has(input:checked)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 22px;
  margin-top: -11px;
  background: var(--ink);
  clip-path: polygon(
    0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 8px 6px, 8px 8px, 10px 8px, 10px 10px, 12px 10px,
    12px 12px, 10px 12px, 10px 14px, 8px 14px, 8px 16px, 6px 16px, 6px 18px, 4px 18px, 4px 20px, 2px 20px, 2px 22px, 0 22px
  );
}
.menu-item:has(input:focus-visible) span {
  text-decoration: underline;
  text-decoration-thickness: var(--px);
  text-underline-offset: 6px;
}

.or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}
.or::before, .or::after {
  content: "";
  flex: 1;
  height: var(--px);
  background: repeating-linear-gradient(90deg, var(--muted) 0 var(--px), transparent var(--px) calc(var(--px) * 2));
}

.room {
  max-width: 760px;
  display: grid;
  gap: 36px;
  padding-top: 12vh; /* same as the header-to-logo gap on the title screen */
}
.center { display: flex; justify-content: center; gap: 16px; }
.center .btn { min-width: 128px; }

/* ---- Participants (table) ---- */

.table {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  min-height: 96px;
}
.seat {
  position: relative;
  width: 52px;
  height: 76px;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.seat > .face-inner { display: grid; place-items: center; width: 100%; height: 100%; }
.seat.empty > .face-inner {
  border: var(--px) dashed var(--c);
  opacity: 0.7;
}
/* Card back: checkerboard dither */
.seat.back > .face-inner {
  border: var(--px) solid var(--ink);
  background: repeating-conic-gradient(var(--c) 0 25%, color-mix(in srgb, var(--c) 55%, white) 0 50%) 0 0 / 8px 8px;
}
.seat.face > .face-inner {
  border: var(--px) solid var(--ink);
  background: var(--c);
  color: var(--c-text);
  /* The flip animation is played once on reveal via the Web Animations API in app.js.
     A CSS animation would restart whenever seats are reordered, which looks like flicker. */
}
/* Your own seat: pixel up-arrow below the card */
.seat.me::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 50%;
  width: 14px;
  height: 8px;
  margin-left: -7px;
  background: var(--ink);
  clip-path: polygon(
    6px 0, 8px 0, 8px 2px, 10px 2px, 10px 4px, 12px 4px, 12px 6px, 14px 6px,
    14px 8px, 0 8px, 0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px
  );
}

/* ---- Hand ---- */

.hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.card {
  width: 52px;
  aspect-ratio: 2 / 3;
  padding: 0;
  font: inherit;
  font-size: 16px;
  border: var(--px) solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 0 0 var(--px) color-mix(in srgb, var(--c, var(--accent)) 45%, transparent);
  transition: transform 0.12s steps(2);
}
.card:hover { transform: translateY(calc(var(--px) * -1)); }
.card.selected {
  background: var(--c, var(--accent));
  color: var(--c-text, var(--accent-text));
  box-shadow: var(--px) var(--px) 0 var(--shadow);
  transform: translateY(calc(var(--px) * -3));
}

/* ---- Toast ---- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 10px 14px;
  font-size: 10px;
  max-width: calc(100vw - 32px);
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .brand { font-size: 10px; }
  .room { gap: 28px; }
  .hand { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .card { width: auto; font-size: 14px; }
  .center .btn { min-width: 0; flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}