/* The deck game's TV screen and phone remote (doc 127, src/apps/deck/). The game views are read across a
   room, so their type scales with the viewport (vmin); the setup view is read on a laptop. The colours
   are the theme's, set by data-theme on <html> (THEMES in src/_lib/deck/screen.js); a new theme is one
   more block like cherry-disco's and no code. */

@font-face {
  font-family: "Monoton";
  src: url("/assets/fonts/Monoton-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Righteous";
  src: url("/assets/fonts/Righteous-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "League Spartan";
  src: url("/assets/fonts/LeagueSpartan-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root { color-scheme: dark; }

/* Cherry disco, the owner's pick from the look book (doc 127). */
[data-theme="cherry-disco"] {
  --ground: #3c0617;
  --glow-ground: #7a0f2b;
  --neon: #ff7fb0;
  --neon-glow: rgba(255, 90, 150, 0.5);
  --neon-faint: rgba(255, 127, 176, 0.14);
  --neon-used: rgba(255, 127, 176, 0.2);
  --warm: #ffd9a8;
  --light: #fff3f7;
  --tile: #ffc2d8;
  --display: "Monoton", "Righteous", sans-serif;
  --heading: "Righteous", "League Spartan", sans-serif;
  --body: "League Spartan", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
h1, h2, p, ul { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: radial-gradient(circle at 50% 42%, var(--glow-ground) 0, var(--ground) 70%) fixed;
  color: var(--light);
  font-family: var(--body);
  font-size: 1.1rem;
  line-height: 1.4;
}

button, .file span {
  font: inherit;
  font-family: var(--heading);
  color: var(--neon);
  background: transparent;
  border: 2px solid var(--neon);
  border-radius: 999px;
  padding: 0.45em 1.2em;
  cursor: pointer;
}
button:hover, .file:hover span { background: var(--neon-faint); }
button.primary { background: var(--neon); color: var(--ground); }
button:disabled { opacity: 0.45; cursor: default; }
button[aria-pressed="true"] { background: var(--neon); color: var(--ground); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--warm); outline-offset: 3px; }
a { color: var(--warm); }

/* The page's static text says to reload if the modules never replace it: shown only after a wait, so
   a normal load never flashes it. */
.reload-hint { animation: reload-hint 0s 4s forwards; visibility: hidden; }
@keyframes reload-hint { to { visibility: visible; } }

/* --- The game, on the TV ------------------------------------------------------------------------- */

.stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 2.4vmin;
  padding: 3vmin 4vmin;
  text-align: center;
}
.stage h1:focus, .remote h1:focus, .setup h1:focus { outline: none; }

.game-title {
  font: 400 12vmin/1.1 var(--display);
  color: var(--neon);
  text-shadow: 0 0 3vmin var(--neon-glow);
  max-width: 90vw;
}
.board-title {
  font: 400 8.5vmin/1.1 var(--display);
  color: var(--neon);
  text-shadow: 0 0 2vmin var(--neon-glow);
}
.sub { font: 400 5.4vmin/1.2 var(--heading); color: var(--warm); }
.stage button.primary { font-size: 4.2vmin; line-height: 1.2; }
.review { font-size: 2.6vmin; color: var(--warm); }

.ball { position: absolute; fill: var(--tile); }
.ball.top { left: 4vw; top: -4vmin; width: 28vmin; height: 28vmin; }
.ball.bottom { right: 4vw; bottom: -6vmin; width: 22vmin; height: 22vmin; }

/* The board takes what the title and the scores leave, and its number buttons shrink to fit it. A TV
   other than 16:9 scrolls rather than loses a button. */
body[data-view="board"] .stage, body[data-view="card"] .stage, body[data-view="reveal"] .stage { overflow-y: auto; }
.board {
  flex: 0 1 auto;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 2vmin;
  width: min(92vw, 160vmin);
}
.col { display: flex; flex-direction: column; gap: 1vmin; min-width: 0; min-height: 0; }
.head {
  font: 400 3.2vmin/1.1 var(--heading);
  color: var(--warm);
  border-bottom: 0.4vmin solid var(--neon);
  flex: none;
  min-height: 8vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.6vmin;
}
.cells { flex: 0 1 auto; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 0.6vmin; }
[data-across="2"] .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-across="4"] .cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-across="8"] .cells { grid-template-columns: repeat(8, minmax(0, 1fr)); }
[data-across="16"] .cells { grid-template-columns: repeat(16, minmax(0, 1fr)); }
[data-across="32"] .cells { grid-template-columns: repeat(32, minmax(0, 1fr)); }
.cell {
  min-height: 0;
  overflow: hidden;
  font: 400 3.4vmin/1 var(--heading);
  background: var(--neon-faint);
  border: 0.3vmin solid var(--neon);
  border-radius: 1.6vmin;
  padding: 0.3vmin 0;
  box-shadow: 0 0 1.6vmin var(--neon-glow);
}
[data-across="4"] .cell, [data-across="8"] .cell { font-size: 2vmin; }
[data-across="16"] .cell, [data-across="32"] .cell { font-size: 1.2vmin; border-width: 0.1vmin; border-radius: 0.4vmin; }
.cell.used { background: transparent; border-color: var(--neon-used); color: var(--neon-used); box-shadow: none; }

.card {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  width: min(84vw, 140vmin);
  border: 0.5vmin solid var(--neon);
  border-radius: 3.4vmin;
  padding: 2.4vmin 6vmin;
  background: rgba(60, 6, 23, 0.7);
  box-shadow: 0 0 4vmin var(--neon-glow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6vmin;
}
.cat { font: 400 3.8vmin/1.1 var(--heading); color: var(--warm); }
.prompt { font: 400 7.2vmin/1.18 var(--heading); color: var(--light); overflow-wrap: anywhere; }
.prompt.long { font-size: 4.2vmin; }
.prompt.longest { font-size: 3vmin; }
.note { font: 400 3.4vmin/1.2 var(--heading); color: var(--neon); }
.answer { font: 400 6vmin/1.2 var(--heading); color: var(--warm); overflow-wrap: anywhere; }
.answer.long { font-size: 4vmin; }
.answer.longest { font-size: 3vmin; }
.answer.missing { font-size: 3.4vmin; color: var(--neon); }
.media { max-width: 100%; max-height: 44vh; min-height: 8vmin; flex: 0 1 auto; object-fit: contain; border-radius: 1.6vmin; display: block; }
.moves { flex: none; display: flex; gap: 2vmin; justify-content: center; }

/* Five tiles across, however long the names, so 20 guests are four rows at most. [data-rows] is how many
   rows this game makes (view.js); a profile's photo and bio get what its row can spare, and the printed
   sheet tells the host that a long bio is cut short past one row. */
.scores { flex: none; width: 100%; }
.scores ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, 32vmin); gap: 0.8vmin 1vmin; justify-content: center; }
.scores li { display: flex; align-items: center; gap: 0.6vmin; min-width: 0; }
.scores .give { flex: 1 1 0; min-width: 0; padding: 0.25em 0.7em; }
.scores .who { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.scores button { display: flex; align-items: center; justify-content: space-between; gap: 1vmin; font-size: 2.6vmin; line-height: 1.2; border-radius: 1.6vmin; }
.scores button:disabled { cursor: default; opacity: 1; background: transparent; }
.scores .less { flex: none; padding: 0.25em 0.7em; }
.scores .less:disabled { opacity: 0.35; }
.scores .points { flex: none; font-size: 3vmin; color: var(--warm); }
[data-rows="1"] { --pic: 12vmin; --bio: 2vmin; --bio-lines: 7; }
[data-rows="2"] { --pic: 10vmin; --bio: 1.9vmin; --bio-lines: 4; }
[data-rows="3"] { --pic: 8vmin; --bio: 1.7vmin; --bio-lines: 3; }
[data-rows="4"] { --pic: 6vmin; --bio: 1.6vmin; --bio-lines: 2; }
.scores .profile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pic give less" "pic bio bio"; gap: 0.3vmin 0.6vmin; align-items: start; }
.scores .profile .media { grid-area: pic; width: var(--pic); height: var(--pic); min-height: 0; }
.scores .profile .give { grid-area: give; }
.scores .profile .less { grid-area: less; }
.scores .bio {
  grid-area: bio;
  font: 500 var(--bio)/1.2 var(--body);
  color: var(--light);
  text-align: left;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--bio-lines);
}

.controls {
  position: fixed;
  right: 2vmin;
  top: 2vmin;
  display: flex;
  gap: 0.6rem;
  transition: opacity 0.3s;
}
.controls button { font-size: 0.95rem; background: var(--ground); }
.game-notice { position: fixed; left: 2vmin; bottom: 2vmin; max-width: 60vw; background: var(--ground); }
body.idle .controls { opacity: 0; }
body.idle { cursor: none; }
body[data-view="setup"].idle, body[data-view="remote"].idle { cursor: auto; }

/* --- Setup, on the laptop ------------------------------------------------------------------------ */

.setup { max-width: 56rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; display: flex; flex-direction: column; gap: 1.5rem; }
.setup h1 { font: 400 clamp(2.4rem, 7vw, 4rem)/1.1 var(--display); color: var(--neon); text-shadow: 0 0 18px var(--neon-glow); }
.eyebrow { font-family: var(--heading); color: var(--warm); }
.lede { font-size: 1.2rem; }
.notice { border: 2px solid var(--warm); border-radius: 12px; padding: 0.7em 1em; color: var(--warm); }
.hint { color: var(--tile); }
.part { display: flex; flex-direction: column; gap: 0.8rem; border-top: 1px solid var(--neon-used); padding-top: 1.25rem; }
.part h2 { font: 400 1.5rem/1.2 var(--heading); color: var(--warm); }
.row { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.go button { font-size: 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 16rem; }
.field span { font-size: 0.95rem; color: var(--tile); }
input[type="text"], textarea {
  font: inherit;
  color: var(--light);
  background: rgba(60, 6, 23, 0.7);
  border: 1px solid var(--neon);
  border-radius: 8px;
  padding: 0.5em 0.7em;
  width: 100%;
}
.file { position: relative; display: inline-block; }
.file span { display: inline-block; }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.plain { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }
.edit, .player { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; border-bottom: 1px solid var(--neon-used); padding-bottom: 0.9rem; }
.edit .field, .player .field, .part > .field { width: 100%; flex: none; }
details { border: 1px solid var(--neon-used); border-radius: 12px; padding: 0.7rem 1rem; }
details[open] { display: flex; flex-direction: column; gap: 0.9rem; }
summary { cursor: pointer; font: 400 1.15rem/1.3 var(--heading); }
.pairing { flex-direction: row; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.pairing > div:last-child { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; flex: 1 1 16rem; }
.qr { background: #fff; padding: 8px; border-radius: 4px; line-height: 0; }
.qr svg { width: 200px; height: 200px; fill: #000; shape-rendering: crispEdges; }
.status.on { color: var(--warm); }

/* --- The phone remote ---------------------------------------------------------------------------- */

.remote { max-width: 34rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.remote h1 { font: 400 1.6rem/1.2 var(--heading); color: var(--light); }
.remote .prompt { font-size: 1.7rem; }
.remote .head { font-size: 1rem; min-height: 0; border-bottom-width: 2px; justify-content: flex-start; padding-bottom: 0.2rem; }
.remote .col { gap: 0.4rem; }
.remote .cells { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
.remote .cell { font-size: 1.1rem; width: 2.9rem; height: 2.9rem; padding: 0; border-width: 2px; border-radius: 10px; box-shadow: none; }
.remote .moves { gap: 0.7rem; }
.remote button { font-size: 1.1rem; }
.secret { border: 2px solid var(--warm); border-radius: 12px; padding: 0.7rem 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.secret h2 { font: 400 0.95rem/1.2 var(--heading); color: var(--warm); }
.tally li { display: flex; align-items: center; gap: 0.6rem; }
.tally .who { flex: 1; }
.tally .points { font-family: var(--heading); color: var(--warm); }
.tally button { width: 2.6rem; height: 2.6rem; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .controls { transition: none; }
}