/* Davecade's shared styles, on Davevite's look: the organizer's colors and grouped lists, Manrope for titles, blue rings for
   guys and pink for girls, the coral Beta pill, and the parade's sky and floor for game scenes. Light and dark follow the
   device. Each game adds styles for its own screens. */
@font-face { font-family: Manrope; src: url(./fonts/Manrope-Variable.ttf) format('truetype'); font-weight: 200 800; font-display: swap; }
:root {
  --bg: #F2F2F7; --card: #FFFFFF; --ink: #1D1D1F; --ink-2: #6E6E73; --ink-3: #AEAEB2;
  --line: rgba(60, 60, 67, 0.13); --fill: rgba(118, 118, 128, 0.12);
  --blue: #0071E3; --red: #D93F45; --green: #248A3D;
  --guy: #3B82F6; --girl: #E0559B;
  --navy: #2D466A; --coral: #FF776D; --gold: #FFD14B; --cream: #FFF9EF; --sky: #22B5FF; --mint: #50D5AD;
  --beta-bg: rgba(255, 119, 109, 0.16); --beta-ink: #C23A31;
  /* A game's scene: the parade's day sky and floor */
  --sky-top: #BFE6FF; --sky-low: #EAF7FF; --floor: #FBF8F1;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #000000; --card: #1C1C1E; --ink: #F5F5F7; --ink-2: #98989D; --ink-3: #636366; --line: rgba(84, 84, 88, 0.6);
    --fill: rgba(118, 118, 128, 0.24); --blue: #0A84FF; --red: #FF453A; --beta-bg: rgba(255, 119, 109, 0.2); --beta-ink: #FF9F9A; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
main { max-width: 640px; margin: 0 auto; padding: 4px 16px 48px; outline: none; }

/* The top bar: mark, Davecade, Beta, Settings */
.topbar { max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 16px 4px; }
.brand { flex: 1; display: flex; align-items: center; gap: 8px; font: 800 1.125rem/1 Manrope, -apple-system, sans-serif; letter-spacing: -0.01em; }
.brand .mark { width: 32px; height: 32px; display: block; }
.menu-button { width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--fill); color: var(--ink); }
.menu { min-width: 200px; padding: 4px 0; border: 0; border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2); }
.menu[popover] { position: fixed; inset: auto; margin: 0; }
.menu button { display: block; width: 100%; padding: 11px 16px; border: 0; background: none; text-align: left; font-size: 1.0625rem; }
.menu button + button { box-shadow: inset 0 0.5px 0 var(--line); }
.menu button:active { background: var(--fill); }
.round-label { margin: 10px 0 4px; text-align: center; }
.beta { padding: 3px 8px; border-radius: 999px; background: var(--beta-bg); color: var(--beta-ink); font: 700 0.75rem/1.2 -apple-system, sans-serif; letter-spacing: 0.01em; }

/* Titles */
h1 { margin: 0; font: 800 2rem/1.15 Manrope, -apple-system, sans-serif; letter-spacing: -0.02em; }
h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.title-row { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
.title-row h1 { flex: 1; }
.me { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--ink-2); font-size: 0.9375rem; }
.status-line { display: flex; align-items: center; gap: 10px; min-height: 0; color: var(--ink-2); font-size: 0.9375rem; }
.status-line:not(:empty) { margin: 8px 0; }

/* Grouped lists, as in the organizer */
.section { margin: 22px 16px 6px; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-2); list-style: none; }
.section::-webkit-details-marker { display: none; }
details.results > summary { cursor: pointer; }
.list { border-radius: 12px; background: var(--card); overflow: hidden; }
.row, .field { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 16px; border: 0; background: none; text-align: left; }
.row + .row, .row + .field, .field + .row, .field + .field { box-shadow: inset 0 0.5px 0 var(--line); }
.row:active { background: var(--fill); }
.grow { flex: 1; min-width: 0; }
.name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { font-size: 0.875rem; font-weight: 400; color: var(--ink-2); }
.block { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--ink-2); }
.status.blue { color: var(--blue); font-weight: 600; }
.chev { color: var(--ink-3); font-size: 1.25rem; }
.empty { padding: 14px 16px; color: var(--ink-2); }

/* Daves' faces, ringed blue for guys and pink for girls */
.ring { display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink-3); background: #EAF7FF; overflow: hidden; flex: none; }
.ring.guy { box-shadow: 0 0 0 2px var(--guy); }
.ring.girl { box-shadow: 0 0 0 2px var(--girl); }
.ring svg { display: block; }
.faces { display: inline-flex; flex: none; }
.faces .ring + .ring { margin-left: -6px; }

/* Buttons: Apple's pills */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 16px; border: 0; border-radius: 999px;
  background: var(--fill); font-size: 0.9375rem; font-weight: 600; }
.pill.primary { background: var(--blue); color: #FFFFFF; }
.pill.wide { width: 100%; min-height: 50px; margin-top: 16px; font-size: 1.0625rem; }
.pill:disabled { opacity: 0.5; }
.small { padding: 6px 12px; border: 0; border-radius: 999px; background: var(--fill); font-size: 0.875rem; font-weight: 600; }

/* Sheets */
dialog.sheet { width: min(100% - 0px, 640px); max-width: 640px; max-height: 92vh; margin: auto auto 0; padding: 0 16px 32px; border: 0; border-radius: 14px 14px 0 0;
  background: var(--bg); color: var(--ink); }
dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.32); }
@media (min-width: 700px) { dialog.sheet { margin: auto; border-radius: 14px; } }
.sheet-head { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 14px 0 10px; background: var(--bg); }
.sheet-head > :first-child { min-width: 64px; }
.sheet-head h2 { flex: 1; text-align: center; }

/* The Settings switch */
.switch { position: relative; width: 51px; height: 31px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--fill); transition: background 0.2s; pointer-events: none; }
.switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
.switch input:checked + span { background: #34C759; }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Joining by link: the form on a card over a blurred game. The Dave maker sits on gray, as on the guest page's sheet, so
   its white tiles show. */
.backdrop { position: fixed; inset: 0; z-index: -1; background: var(--bg) url(./join/backdrop-light.jpg) top center / cover no-repeat; }
@media (prefers-color-scheme: dark) { .backdrop { background-image: url(./join/backdrop-dark.jpg); } }
.join { margin: 24vh 0 0; padding: 22px 16px 18px; border-radius: 20px; background: var(--card); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); }
.join.tall { margin-top: 12px; }
.join .list { background: var(--bg); }
.join .section { margin-left: 4px; }
.maker-box { padding: 10px; border-radius: 14px; background: var(--bg); }
.join h1 { margin: 0 0 14px; font-size: 1.75rem; }
.signin-link { display: block; margin-top: 14px; text-align: center; color: var(--blue); font-size: 0.9375rem; font-weight: 600; }
.join input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 1.0625rem; }
.error { margin: 10px 4px 0; color: var(--red); font-size: 0.9375rem; }

/* The spectrum (spectrum.js): blue at one end, gold at the other, neutral in the middle, each side's words at its own end,
   the player's Dave face as the handle. */
:root { --left: #2F8CF5; --right: #F2B21C; --mid: #ECE8DF; --left-ink: #1F6FD1; --right-ink: #A86F00; }
@media (prefers-color-scheme: dark) { :root { --mid: #48484A; --left-ink: #5EA8FF; --right-ink: #F2B21C; } }
.spectrum { width: 100%; }
.spectrum .ends { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.spectrum .ends span { max-width: 48%; font: 700 1rem/1.2 -apple-system, BlinkMacSystemFont, sans-serif; }
.spectrum .ends .l { color: var(--left-ink); }
.spectrum .ends .r { color: var(--right-ink); text-align: right; }
.spectrum .track { position: relative; height: 22px; margin: 22px 10px 26px; border-radius: 11px; background: linear-gradient(90deg, var(--left), var(--mid) 50%, var(--right)); touch-action: none; outline-offset: 6px; }
.spectrum .track[role="slider"] { cursor: pointer; }
.spectrum .track.marked { margin: 22px 10px 54px; }
.spectrum .track.answered { margin-top: 72px; }
.spectrum .mid { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(36, 50, 79, 0.2); }
.spectrum .thumb { position: absolute; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.spectrum .thumb svg { display: block; }
@keyframes spectrum-hint { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-48px); } 70% { transform: translateX(48px); } }
.spectrum .thumb.hint { animation: spectrum-hint 1.4s ease-in-out 0.5s 1; }
.spectrum .pin { position: absolute; z-index: 2; bottom: calc(50% - 7.5px); transform: translateX(-50%); display: grid; justify-items: center; }
.spectrum .pin .stem { height: 18px; margin-bottom: -4px; }
.spectrum .diamond { width: 15px; height: 15px; background: var(--gold); border: 1.5px solid #D99A00; transform: rotate(45deg); }
.spectrum .mark { position: absolute; z-index: 1; top: 50%; transform: translateX(-50%); display: grid; justify-items: center; pointer-events: none; }
.spectrum .mark .dot { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 2.5px var(--ink); }
.spectrum .mark .stem { height: calc(22px + var(--row, 0) * 36px); }
.spectrum .stem { display: block; width: 2px; border-radius: 1px; background: var(--ink); }
.spectrum .readout { margin: 12px 0 0; text-align: center; color: var(--ink-2); }
.spectrum .readout b { color: var(--ink); font-size: 1.125rem; }

/* A game's scene: sky and floor, as the parade has them */
.scene { border-radius: 18px; overflow: hidden; background: linear-gradient(var(--sky-top), var(--sky-low) 40%, var(--floor) 40%); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }