@font-face { font-family: "Grotesk"; src: url(fonts/space-grotesk-700.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Grotesk"; src: url(fonts/space-grotesk-500.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --ink: #000;
  --light: #ffd2a8; /* follows the lights; main.js keeps it in step */
  --pad: max(12px, env(safe-area-inset-left));
  --tray: 0px; /* room kept for the cart tray, set by main.js if it shows */
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: #ffc79a;
  font: 500 16px/1.3 "Grotesk", system-ui, sans-serif;
  color: var(--light);
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
#lights, #cards { position: fixed; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
#lights { image-rendering: auto; }
#cards { pointer-events: none; }
body.board #cards { pointer-events: auto; cursor: pointer; }

.screen { position: fixed; inset: 0; display: none; flex-direction: column; pointer-events: none; }
.screen.on { display: flex; }
.screen > * { pointer-events: auto; }

/* bars: flat black panels on the window's edges */
.bar { background: var(--ink); padding: 10px var(--pad); display: flex; gap: 10px; align-items: center; }
.bar.top { padding-top: max(10px, env(safe-area-inset-top)); min-height: 52px; }
.bar.bottom { margin-top: auto; flex-direction: column; align-items: stretch; padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + var(--tray))); }
.row { display: flex; gap: 10px; align-items: center; }
.row.minor { flex-wrap: wrap; }
.grow { flex: 1; }

button {
  font: 700 17px/1 "Grotesk", system-ui, sans-serif; letter-spacing: 0.02em;
  border: 0; border-radius: 6px; padding: 14px 20px; min-height: 48px; cursor: pointer;
  background: transparent; color: var(--light);
}
button.primary { background: var(--light); color: var(--ink); }
button.ghost { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--light) 45%, transparent); }
button.icon { padding: 0; width: 44px; min-height: 40px; font-size: 22px; box-shadow: none; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--light); outline-offset: 3px; }
button[hidden] { display: none; }
input {
  font: 700 18px/1 "Grotesk", system-ui, sans-serif; color: var(--ink); background: var(--light);
  border: 0; border-radius: 6px; padding: 13px 14px; min-height: 48px; flex: 1; min-width: 0;
}
input::placeholder { color: color-mix(in srgb, var(--ink) 45%, transparent); }

/* key prompts: on a keyboard or pad the actions read as prompts, not touch buttons */
.key { display: none; font-size: 13px; padding: 3px 7px; border-radius: 4px; margin-right: 8px; vertical-align: 2px;
  box-shadow: inset 0 0 0 2px currentColor; }
body.kbd .key, body.pad .key { display: inline-block; }
body.kbd #game .acts button, body.pad #game .acts button { background: transparent; color: var(--light); box-shadow: none; padding: 10px 6px; min-height: 40px; }

/* home */
#home { align-items: center; }
.slab { margin-top: max(9vh, env(safe-area-inset-top)); width: min(78vw, 58vh, 560px); }
.slab svg { display: block; width: 100%; height: auto; }
.slab .t0 { font: 700 76px "Grotesk", sans-serif; letter-spacing: 14px; fill: #000; }
.slab .t1 { font: 700 206px "Grotesk", sans-serif; letter-spacing: 2px; fill: #000; }
.lede { background: var(--ink); color: var(--light); font-weight: 700; font-size: clamp(17px, 2.6vh, 22px); padding: 10px 16px; border-radius: 6px; margin: 18px 16px 0; text-align: center; }
.lede span { white-space: nowrap; }
#home .bar.bottom { width: 100%; }
#home .bar.bottom > * { width: 100%; max-width: 640px; margin: 0 auto; }
#home #name { flex: 1 1 50%; }
#bPlay { flex: 1 1 50%; font-size: 20px; }
#games { display: flex; flex-direction: column; gap: 6px; }
#games:empty { display: none; }
#games button { display: flex; justify-content: space-between; gap: 12px; text-align: left; font-size: 15px; padding: 12px 14px; min-height: 44px; }
#games button b { white-space: nowrap; }
#games button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
#games button.yours b { color: var(--ink); background: var(--light); padding: 3px 7px; border-radius: 4px; margin: -3px 0; }
#picker { display: flex; gap: 8px; }
#picker button { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 12px; color: var(--light); }
#picker button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--light); }
#picker button:disabled { background: transparent !important; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--light) 35%, transparent); cursor: default; }

/* game */
#seats { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.seat { display: flex; gap: 6px; align-items: baseline; padding: 6px 9px; border-radius: 6px; white-space: nowrap; font-weight: 700; font-size: 15px; }
.seat i { font-style: normal; font-weight: 500; opacity: 0.75; }
.seat.now { background: var(--light); color: var(--ink); }
.seat.now i { opacity: 1; }
.seat.bump { animation: bump 0.6s ease-out; }
@keyframes bump { 40% { transform: scale(1.15); } }
#meta { white-space: nowrap; font-size: 14px; font-weight: 500; opacity: 0.85; }
#stage, #homeStage { flex: 1; pointer-events: none; align-self: stretch; }
#homeStage { opacity: 0; min-height: 0; }
#game .bar.bottom { flex-direction: row; align-items: center; flex-wrap: wrap; min-height: 72px; }
#msg { flex: 1 1 180px; font-weight: 700; font-size: 18px; min-height: 24px; }
#msg small { display: block; font-weight: 500; font-size: 14px; opacity: 0.8; margin-top: 3px; }
#nameRow { flex: 1 1 200px; }
.acts { display: flex; gap: 10px; margin-left: auto; }

/* credits */
#credits { background: var(--ink); }
#credits .bar b { font-size: 18px; }
.scroll { overflow: auto; padding: 8px var(--pad) 40px; max-width: 680px; }
.scroll h3 { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; margin: 22px 0 6px; }
.scroll p { margin: 4px 0; }
.scroll a { color: var(--light); }

#toast { position: fixed; left: 50%; top: max(70px, calc(env(safe-area-inset-top) + 60px)); transform: translate(-50%, -12px); opacity: 0;
  background: var(--ink); color: var(--light); font-weight: 700; padding: 12px 18px; border-radius: 6px; transition: opacity 0.3s, transform 0.3s; pointer-events: none; white-space: nowrap; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-height: 520px) {
  .slab { margin-top: 12px; width: min(50vw, 44vh, 400px); }
  .lede { margin-top: 8px; padding: 6px 12px; }
  .bar.top { min-height: 44px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
  #game .bar.bottom { min-height: 56px; padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  button { min-height: 42px; padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { .seat.bump { animation: none; } }