/* Anytime Game Night: the shared look. Every screen the games share (home,
   setup, joining, the lobby, the creator's tools, settings) is styled here
   with the variables below. The defaults are Anytime Game Night's own night
   sky, used on the home page. Each game's game.css sets these variables to
   its own look and adds what only that game has. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Alfa Slab One"; src: url("/fonts/alfa-slab-one.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bungee"; src: url("/fonts/bungee.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --page: #14173d;
  --page-bg:
    radial-gradient(ellipse 60% 420px at 85% -60px, rgb(255 211 107 / 0.2), transparent 70%),
    linear-gradient(180deg, #14173d 0%, #191c4c 45%, #0b0d26 100%);
  --ink: #f6f2ff;
  --muted: #b9b6dc;
  --line: rgb(255 255 255 / 0.14);
  --accent: #ffd36b;
  --accent-ink: #1b1640;
  --dot: #ff6b6b;
  --danger: #ff8a8a;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --radius: 20px;
  --small-radius: 12px;

  --card: rgb(255 255 255 / 0.06);
  --card-border: 1px solid var(--line);
  --card-shadow: none;
  --field: rgb(255 255 255 / 0.07);
  --field-border: 1px solid rgb(255 255 255 / 0.24);
  --focus: var(--accent);

  --btn: rgb(255 255 255 / 0.1);
  --btn-ink: var(--ink);
  --btn-border: 1px solid rgb(255 255 255 / 0.2);
  --btn-shadow: none;
  --btn-press: scale(0.98);
  --btn-press-shadow: none;
  --btn-radius: 999px;
  --primary: var(--accent);
  --primary-ink: var(--accent-ink);
  --primary-shadow: 0 8px 28px rgb(255 211 107 / 0.3);
  --primary-press: scale(0.98);

  --print: var(--ink);
  --print-shadow: none;
  --code: var(--accent);
  --code-shadow: none;
  --hot: rgb(255 211 107 / 0.14);
  --hot-border: 1px solid var(--accent);
  --hot-shadow: none;
  --pill: rgb(255 255 255 / 0.08);
  --pill-border: 1px solid var(--line);
  --pill-on: rgb(85 214 154 / 0.18);
  --pill-paused: rgb(160 140 255 / 0.2);
  --tag-hot: var(--accent);
  --tag-hot-ink: var(--accent-ink);
  --switch-off: rgb(255 255 255 / 0.22);
  --switch-on: var(--accent);
  --avatar-border: 1.5px solid rgb(255 255 255 / 0.5);
  --avatar-bg: #23275e;
  --toast: #f6f2ff;
  --toast-ink: #14173d;
  --toast-shadow: 0 8px 24px rgb(0 0 0 / 0.35);

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: inherit; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  background-color: var(--page);
  color: var(--ink);
  font: 400 1rem/1.5 var(--font);
}

.masthead, main { width: min(36rem, 100% - 2rem); margin-inline: auto; }
.masthead { display: flex; align-items: center; gap: 0.5rem; padding: 1.1rem 0 0.25rem; min-height: 3.6rem; }
main { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem 0 4rem; }

.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; color: var(--ink); text-decoration: none; font: 800 1.15rem/1.15 var(--display); letter-spacing: -0.01em; }
.wordmark img { display: block; flex: none; border-radius: 8px; }
.wordmark span { overflow-wrap: anywhere; }
.home-link { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; flex: none; padding: 0.3rem 0.65rem 0.3rem 0.4rem; border-radius: 999px; color: var(--muted); text-decoration: none; font: 650 0.82rem/1 var(--font); border: 1px solid var(--line); }
.home-link img { display: block; border-radius: 6px; }
.home-link:hover { color: var(--ink); }
@media (max-width: 359px) { .home-link span { display: none; } .home-link { padding: 0.3rem; } }
.back { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-left: -0.35rem; border-radius: 50%; color: var(--ink); flex: none; }
.back:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.chevron { width: 0.7rem; height: 0.7rem; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; border-radius: 2px; transform: translateX(2px) rotate(45deg); }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.1rem; }
p { margin: 0; }

/* The big headline. Each game gives it its own treatment. */
.print { color: var(--print); text-shadow: var(--print-shadow); font: 800 clamp(2.1rem, 9vw, 3rem)/1 var(--display); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.print.giant { font-size: clamp(3rem, 16vw, 5.2rem); line-height: 0.92; }

.intro { display: flex; flex-direction: column; gap: 0.75rem; }
.intro p { font-size: 1.08rem; color: var(--muted); max-width: 30rem; }
.hint, .note, .upnext { color: var(--muted); font-size: 0.92rem; }
.center { text-align: center; }
.label { font-weight: 700; font-size: 0.95rem; }
.room-label { font: 800 1.05rem/1.25 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.message { display: flex; flex-direction: column; gap: 1rem; }
.message p { color: var(--muted); font-size: 1.05rem; }

/* Cards and forms */
.card { background: var(--card); border: var(--card-border); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 1.15rem; }
.stack { display: flex; flex-direction: column; gap: 1.1rem; }
.stack.tight { gap: 0.6rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; align-items: end; }
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field > label, legend { font-weight: 700; font-size: 0.98rem; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 0.55rem; }

input[type="text"], input[type="number"], input[type="time"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem; /* 16px keeps iOS from zooming */
  color: var(--ink);
  background: var(--field);
  border: var(--field-border);
  border-radius: var(--small-radius);
  padding: 0.7rem 0.8rem;
}
textarea { resize: vertical; font-size: 1.1rem; line-height: 1.45; }
::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
select option { color: #111; }

.inline { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.inline input[type="number"] { width: 5.5rem; }
.inline select { width: auto; flex: 1; }

.choices .choice { display: flex; gap: 0.7rem; align-items: center; padding: 0.65rem 0.85rem; border: var(--field-border); border-radius: var(--small-radius); cursor: pointer; font-weight: 500; }
.choices .choice + .choice { margin-top: 0.45rem; }
.choices .choice:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.choices input { accent-color: var(--accent); margin: 0; width: 1.1rem; height: 1.1rem; flex: none; }

.counter-row { display: flex; justify-content: flex-end; margin-top: -0.7rem; }
.stack.tight > .counter-row { margin-top: -0.4rem; }
.counter { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.counter.over { color: var(--danger); font-weight: 700; }

/* On/off settings are toggle switches: the setup page's checkboxes, and the
   switches everywhere else. */
.check { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 0.8rem; align-items: center; font-weight: 650; cursor: pointer; }
.check input[type="checkbox"], .switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 48px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 14px 50%, #ffffff 0 10px, transparent 10.5px), var(--switch-off);
  box-shadow: none;
  cursor: pointer;
}
.check input[type="checkbox"]:checked, .switch[aria-checked="true"] {
  background: radial-gradient(circle at calc(100% - 14px) 50%, #ffffff 0 10px, transparent 10.5px), var(--switch-on);
}
.check input[type="checkbox"]:focus-visible, .switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.switch:active:not(:disabled) { transform: none; box-shadow: none; }
.hours-text { font-weight: 500; color: var(--muted); }
.hours input[type="time"] { width: auto; flex: 1; min-width: 7rem; }
.hours label { font-weight: 600; font-size: 0.92rem; }
.quiet .link-btn { align-self: flex-start; }
.notify-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; font-weight: 650; padding: 0.9rem 1.1rem; }

/* Buttons. Text is always centered, so two buttons side by side line up even
   when one wraps. */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: 700 1rem/1.2 var(--font);
  color: var(--btn-ink);
  background: var(--btn);
  border: var(--btn-border);
  border-radius: var(--btn-radius);
  padding: 0.75rem 1.2rem;
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: transform 0.08s, box-shadow 0.08s;
}
button:active:not(:disabled), .button:active { transform: var(--btn-press); box-shadow: var(--btn-press-shadow); }
.primary { width: 100%; background: var(--primary); color: var(--primary-ink); font-size: 1.1rem; font-weight: 800; padding: 0.95rem 1.2rem; box-shadow: var(--primary-shadow); }
.primary:active:not(:disabled) { transform: var(--primary-press); }
a.button.primary { width: auto; align-self: stretch; }
.danger { background: color-mix(in srgb, var(--danger) 85%, var(--card)); color: #1b1640; }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
button:focus-visible, .button:focus-visible, a:focus-visible, .choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Rarely used actions (Manage, Rename, Delete, Change hours…) are underlined
   text, so screens stay light. They're still real buttons. */
.link-btn {
  display: inline;
  align-self: center;
  flex: none;
  padding: 0.2rem 0;
  border: 0;
  border-radius: 2px;
  background: none;
  box-shadow: none;
  color: var(--ink);
  font: 650 0.92rem/1.3 var(--font);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.link-btn:active:not(:disabled) { transform: none; box-shadow: none; }
.link-btn.red { color: var(--danger); text-decoration-color: currentColor; }
.link-btn.delete { align-self: flex-start; margin-top: 0.4rem; }

/* Avatars: 25 pixel-art sprites per game, from that game's sprite sheet. */
.avatar { --size: 2.6rem; width: var(--size); height: var(--size); flex: none; display: inline-block; border: var(--avatar-border); border-radius: 28%; overflow: hidden; background: var(--avatar-bg); }
.avatar.big { --size: 4rem; }
.avatar.small { --size: 1.6rem; }
.px { display: block; width: 100%; height: 100%; background-image: var(--avatars); background-size: 500% 500%; image-rendering: crisp-edges; image-rendering: pixelated; }
.theme-ptp { --avatars: url("/g/ptp/avatars.png"); }
.theme-lit { --avatars: url("/g/lit/avatars.png"); }
.theme-cb { --avatars: url("/g/cb/avatars.png"); }
.theme-pat { --avatars: url("/g/pat/avatars.png"); }

.picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.55rem; }
.pick { position: relative; cursor: pointer; display: block; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pick .avatar { width: 100%; height: auto; aspect-ratio: 1; display: block; transition: transform 0.12s, box-shadow 0.12s; }
.pick:hover .avatar { transform: translateY(-2px); }
.pick:has(input:checked) .avatar { transform: translateY(-3px) rotate(-4deg); box-shadow: 0 0 0 3px var(--accent); }
.pick:has(input:focus-visible) .avatar { outline: 3px solid var(--focus); outline-offset: 2px; }
.pick:has(input:disabled) { cursor: not-allowed; }
.pick:has(input:disabled) .avatar { opacity: 0.3; filter: grayscale(1); }

.seats { display: flex; flex-wrap: wrap; padding-left: 0.4rem; }
.seats .avatar { margin-left: -0.4rem; box-shadow: 0 0 0 3px var(--page); }
.card .seats .avatar { box-shadow: 0 0 0 3px var(--seat-gap, var(--page)); }
.small-seats .avatar { --size: 1.9rem; }

/* Players */
.players { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.players li { display: flex; flex-wrap: wrap; gap: 0.4rem 0.65rem; align-items: center; padding: 0.45rem 0.5rem; border-radius: var(--small-radius); }
.players li.current { background: var(--hot); }
.pname { font-weight: 700; overflow-wrap: anywhere; min-width: 3.5rem; }
.tag { font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.tag.hot { border-color: transparent; background: var(--tag-hot); color: var(--tag-hot-ink); margin-left: auto; }
.tag.done { margin-left: auto; color: var(--ink); }
.players .remove { margin-left: auto; }
.players li .tag.hot + .remove, .players li .tag.done + .remove { margin-left: 0.5rem; }
.players li.kick-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; align-items: start; margin: -0.1rem 0 0.4rem; padding: 0.75rem; border: 1.5px dashed var(--line); border-radius: var(--small-radius); }
.kick-option { display: flex; flex-direction: column; gap: 0.35rem; }
.kick-option button { width: 100%; padding: 0.6rem 0.8rem; font-size: 0.92rem; }
.kick-option .hint { font-size: 0.8rem; }
.manage .recovery { grid-column: 1 / -1; }
.manage .code { font-size: clamp(1.5rem, 7.5vw, 2rem); }

/* Settings as label/value rows */
.settings { display: flex; flex-direction: column; margin: 0; }
.settings div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; }
.settings div + div { border-top: 1px solid var(--line); }
.settings dt { font-size: 0.9rem; color: var(--muted); flex: none; max-width: 50%; }
.settings dd { margin: 0; font-weight: 700; font-size: 0.95rem; line-height: 1.3; text-align: right; }
.settings-card { padding: 0.2rem 1.1rem; }

/* Pills: countdowns and waiting notes */
.pill { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; padding: 0.4rem 0.9rem; border: var(--pill-border); border-radius: 999px; background: var(--pill); font-weight: 700; font-variant-numeric: tabular-nums; }
.pill .dot { width: 0.6rem; height: 0.6rem; flex: none; border-radius: 50%; background: var(--dot); animation: pulse 1.6s ease-in-out infinite; }
.pill.wait { align-self: stretch; justify-content: center; }
.pill.on { background: var(--pill-on); }
.pill.paused { background: var(--pill-paused); }
@keyframes pulse { 50% { transform: scale(0.55); opacity: 0.5; } }

/* Room codes */
.code-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding: 0.9rem 1rem; border: 1.5px dashed var(--line); border-radius: var(--small-radius); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.code-card .label { flex-basis: 100%; font-size: 0.85rem; color: var(--muted); }
.code { font: 800 clamp(2rem, 10vw, 2.6rem)/1 var(--display); letter-spacing: 0.06em; color: var(--code); text-shadow: var(--code-shadow); font-variant-numeric: tabular-nums; white-space: nowrap; user-select: all; -webkit-user-select: all; }
.code-card button { margin-left: auto; }
.join-row { display: flex; gap: 0.6rem; }
.join-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.join-row input::placeholder { text-transform: none; letter-spacing: 0; }
#join-code.found { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.code-detected { font-size: 0.88rem; font-weight: 600; color: var(--accent); }
.code-detected:not([hidden]) { display: flex; align-items: center; gap: 0.4rem; overflow-wrap: anywhere; }
.code-detected img { display: block; flex: none; border-radius: 4px; }
.code-detected.missing { color: var(--danger); }
.invite input { font-size: 0.9rem; }

/* iPhone install steps */
.steps { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.55rem; }
.steps li { padding-left: 0.25rem; }
.steps li::marker { font-weight: 800; color: var(--accent); }
.tip { background: color-mix(in srgb, var(--accent) 8%, var(--card)); }

/* The boxes on a room page: a status box, the players, the creator's tools
   and your settings, each with a small heading. */
.section-label { font: 700 0.85rem/1.3 var(--font); color: var(--muted); letter-spacing: 0; }
.status-card { gap: 0.75rem; }
.status-card .pill.clock { align-self: stretch; }
.status-foot { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 0.75rem; border-top: 1px dashed var(--line); }
.status-foot p { margin: 0; font-size: 0.92rem; color: var(--muted); }
.group-label { margin: 0.6rem 0 -0.35rem; font-size: 0.9rem; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin: 0.6rem 0 -0.35rem; }
.group-head .group-label { margin: 0; }
.only-you { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.players-card { padding: 0.5rem 0.75rem; }
.lobby-status .seats { margin: 0.2rem 0 0.4rem; }
.rows { padding: 0.2rem 1.1rem; display: flex; flex-direction: column; }
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.85rem 0; }
.mrow[hidden] { display: none; }
.mrow + .mrow { border-top: 1px solid var(--line); }
.mrow-text { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.mrow-title { margin: 0; font-weight: 700; display: flex; align-items: center; gap: 0.45rem; }
.mrow-icon { width: 1.4rem; text-align: center; flex: none; }
.mrow-sub { margin: 0 0 0 1.85rem; font-size: 0.85rem; color: var(--muted); }
.mrow-control:empty { display: none; }
.danger-row .mrow-title { color: var(--danger); }
.mrow.editing { flex-wrap: wrap; }
.mrow.editing > :last-child { flex-basis: 100%; display: flex; flex-direction: column; gap: 0.4rem; }
.limit-note { margin: 0; font-size: 0.9rem; color: var(--muted); }
.pitch textarea { font-size: 1.05rem; }

/* Whose move */
.hero { display: flex; flex-direction: column; gap: 0.8rem; padding: 0.5rem 0 0.25rem; }
.hero-label { font-weight: 700; color: var(--muted); }
.hero-who { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }

/* Drawings (js/drawing.js): the layout here, each game's colors in its game.css */
.drawing { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: #ffffff; }
.pad-wrap { display: flex; flex-direction: column; gap: 0.7rem; }
.pad { touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.4rem; }
.swatch { aspect-ratio: 1; width: 100%; min-width: 0; padding: 0; border-radius: 50%; border: 2px solid var(--ink); background: var(--swatch); box-shadow: none; }
.swatch.eraser { background: #ffffff; position: relative; }
/* A little pink-and-white eraser, tilted like it's mid-rub */
.swatch.eraser::before {
  content: "";
  position: absolute;
  left: 18%;
  top: 33%;
  width: 64%;
  height: 34%;
  border: 1.5px solid #1e1b2e;
  border-radius: 2px;
  background: linear-gradient(90deg, #e86fa6 0 42%, #1e1b2e 42% calc(42% + 1.5px), #ffffff calc(42% + 1.5px));
  transform: rotate(-35deg);
}
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--page), 0 0 0 5px var(--accent); transform: none; }
.toolrow { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sizes { display: flex; gap: 0.4rem; }
.size { width: 2.7rem; height: 2.7rem; padding: 0; display: grid; place-items: center; box-shadow: none; border-radius: var(--small-radius); }
.size .dot { display: block; border-radius: 50%; background: var(--ink); }
.size[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.bucket span { font-size: 1.25rem; line-height: 1; }
.tool { padding: 0.55rem 0.9rem; font-size: 0.92rem; }
.ink { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.ink-bar { flex: 1; height: 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.ink-bar span { display: block; height: 100%; background: var(--accent); }
.ink.low .ink-bar span { background: var(--danger); }

/* ---------------------------------------------------------------------------
   Home: Your games, the game picker, the code box
   --------------------------------------------------------------------------- */

.eyebrow { font: 700 0.8rem/1.3 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.glow { color: var(--accent); text-shadow: 0 0 30px rgb(255 211 107 / 0.45); }
.home-hero { padding-top: 0.5rem; }

.game { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1rem; background: var(--card); border: var(--card-border); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: transform 0.08s; }
.game:active { transform: scale(0.99); }
.game.mine { background: var(--hot); border: var(--hot-border); box-shadow: var(--hot-shadow); }
.game-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.6rem; }
.game-kind { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.game-kind img { display: block; border-radius: 5px; }
.game-title { font: 800 1.15rem/1.2 var(--display); overflow-wrap: anywhere; }
.game-status { color: var(--muted); font-size: 0.92rem; font-weight: 500; }
.game-status.hot { color: var(--ink); font-weight: 800; font-size: 1rem; }
.game .pill { padding: 0.2rem 0.6rem; font-size: 0.8rem; flex: 0 1 auto; max-width: 100%; }
.game .seats .avatar { box-shadow: 0 0 0 3px var(--page); }

.finished > summary { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0; cursor: pointer; list-style: none; }
.finished > summary::-webkit-details-marker { display: none; }
.finished > summary::before { content: '▸'; display: inline-block; transition: transform 0.15s; }
.finished[open] > summary::before { transform: rotate(90deg); }

/* The game picker: each card in its own game's look, like the landing page. */
.picker-cards { display: flex; flex-direction: column; gap: 1rem; }
.pick-game { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.3rem 1.25rem 1.25rem; border-radius: 22px; background: var(--g-bg); color: var(--g-fg); text-decoration: none; box-shadow: 0 16px 40px rgb(0 0 0 / 0.3); transition: transform 0.12s; }
.pick-game:hover { transform: translateY(-2px); }
.pick-name { display: flex; align-items: center; gap: 0.7rem; }
.pick-name img { display: block; flex: none; border-radius: 10px; }
.pick-game h3 { font: 800 clamp(1.5rem, 6vw, 1.9rem)/1.05 var(--display); }
.pick-game .tagline { font-weight: 700; font-size: 1.05rem; }
.pick-game .blurb { color: var(--g-soft); font-size: 0.95rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.chips li { padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.82rem; font-weight: 650; background: var(--g-chip); color: var(--g-chip-fg); }
.play { align-self: flex-start; margin-top: 0.3rem; padding: 0.75rem 1.2rem; border-radius: var(--g-btn-radius, 999px); background: var(--g-btn); color: var(--g-btn-fg); font-weight: 750; box-shadow: var(--g-btn-shadow, none); }
.play::after { content: "\00a0→"; }

.pick-game.theme-ptp { --g-bg: #f3f1fa; --g-fg: #241a4f; --g-soft: #4a3f7a; --g-chip: #e3defb; --g-chip-fg: #3157ff; --g-btn: #3157ff; --g-btn-fg: #ffffff; --g-btn-shadow: 4px 4px 0 #ff4f9a; --g-btn-radius: 14px; }
.pick-game.theme-ptp h3 { color: #3157ff; text-shadow: 3px 3px 0 #ff4f9a; }
/* The highlighter follows each line when the tagline wraps. */
.pick-game.theme-ptp .tagline span { background: linear-gradient(transparent 55%, #ffd23f 55%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pick-game.theme-lit {
  --g-bg: #ecdcc2; --g-fg: #1e1b2e; --g-soft: #4b4250; --g-chip: #fffaf0; --g-chip-fg: #d7263d;
  --g-btn: #d7263d; --g-btn-fg: #fffaf0; --g-btn-radius: 10px; --g-btn-shadow: 3px 3px 0 #1e1b2e;
  border: 10px solid transparent;
  border-image: repeating-linear-gradient(45deg, #d7263d 0 14px, #fffaf0 14px 22px, #1f4e9c 22px 36px, #fffaf0 36px 44px) 10;
  border-radius: 0;
}
.pick-game.theme-cb {
  --g-bg: #1c1d23; --g-fg: #f3f1ec; --g-soft: #b0afb8; --g-chip: #2a2b33; --g-chip-fg: #ff6b74;
  --g-btn: #e5323f; --g-btn-fg: #ffffff; --g-btn-shadow: 0 6px 18px rgb(229 50 63 / 0.35);
  background: radial-gradient(ellipse 120% 300px at 50% -40px, rgb(200 16 46 / 0.3), transparent 70%), var(--g-bg);
}
.pick-game.theme-cb h3 { letter-spacing: -0.03em; }
.pick-game.theme-pat {
  --g-bg: #22093f; --g-fg: #ffffff; --g-soft: #c9b8ec; --g-chip: #3c1d66; --g-chip-fg: #22e3ff;
  --g-btn: linear-gradient(180deg, #ff5cc6, #e0158f); --g-btn-fg: #ffffff; --g-btn-radius: 12px; --g-btn-shadow: 0 6px 18px rgb(255 47 179 / 0.4);
  background: radial-gradient(ellipse 120% 340px at 50% -60px, #4a1890, transparent 75%), var(--g-bg);
  box-shadow: 0 0 0 3px #22e3ff, 0 0 30px rgb(34 227 255 / 0.35), 0 20px 50px rgb(0 0 0 / 0.35);
}
.pick-game.theme-pat h3 { font-family: "Bungee", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0; text-shadow: 3px 3px 0 #ff2fb3; }
.pick-game.theme-pat .tagline { color: #ffe14d; }
.pick-game.theme-pat .play { font-family: "Bungee", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.pick-game.theme-lit h3 { font-family: "Alfa Slab One", Georgia, serif; font-weight: 400; letter-spacing: 0; color: #1f4e9c; }

/* ---------------------------------------------------------------------------
   Odds and ends
   --------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 1rem);
  width: max-content;
  max-width: calc(100% - 2rem);
  background: var(--toast);
  color: var(--toast-ink);
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--toast-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 30;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast:empty { display: none; }

.noscript { padding: 2rem; text-align: center; }
[hidden] { display: none !important; }

@media (max-width: 380px) {
  .row { grid-template-columns: 1fr; }
  .players li.kick-choices { grid-template-columns: 1fr; }
}

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