@import url("brand/jaybulb-tokens.css");   /* the shared jaybulb tokens, served from here (v91): a cross-origin import held up every script */
@import url("brand/tokens.css");
@import url("features.css");   /* rules for v72 on, split out at the size limit */
:root{--panel:var(--bg2);--panel2:var(--color-code-bg);--link:var(--text);--muted:var(--text2);--good:var(--right);--bad:var(--wrong);}
#settings-btn { background: none; border: none; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--muted); padding: 0 4px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0.75rem 0; }
.setting-row > span { flex: 1 0 auto; text-align: start; }
.setting-row select { max-width: 50%; }
.setting-row button { white-space: nowrap; }
#player-name { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }   /* a long locked outfit must not squeeze the label */
/* genre colors: [icon, color, text] */
:root {
  --g-action: #ff6b35; --g-action-text: #111;
  --g-comedy: #ffd23f; --g-comedy-text: #111;
  --g-drama: #3d5aa8; --g-drama-text: #fff;
  --g-scifi: #b3312c; --g-scifi-text: #fff;
  --g-classic: #c9a24b; --g-classic-text: #111;
  --g-pop: #ff6fae; --g-pop-text: #111;
  --g-rock: #6b7280; --g-rock-text: #fff;
  --g-hiphop: #2e8b57; --g-hiphop-text: #fff;
  --g-rnb: #b8860b; --g-rnb-text: #111;
  --g-country: #8b5a2b; --g-country-text: #fff;
  --g-sitcom: #4cc9f0; --g-sitcom-text: #111;
  --g-tvdrama: #1d3557; --g-tvdrama-text: #fff;
  --g-cartoon: #f4a261; --g-cartoon-text: #111;
  --g-game: #577590; --g-game-text: #fff;
  --g-book: #6d4c41; --g-book-text: #fff;
  --g-anime: #ffc8dd; --g-anime-text: #111;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Quip Sans, the brand face (brand/tokens.css), falling back to SF and Helvetica */
  font-family: var(--font-brand);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  transition: background 0.2s ease, color 0.2s ease;
}
.topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo { width: 32px; height: 32px; border-radius: 8px; }
/* The mark's own lettering is unreadable at this size, so the name is real text. */
.wordmark { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.stats { display: flex; align-items: center; gap: 18px; font-size: 1.05rem; color: var(--text); font-weight: 600; }
#settings-btn { display: flex; align-items: center; color: var(--muted); }
.stats > * { white-space: nowrap; }
@media (max-width: 520px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 16px; }
  .stats { width: 100%; justify-content: space-between; gap: 12px; font-size: 0.95rem; }
  #account-btn { margin: 0; padding: 8px 14px; }
}
.wrap {
  width: 100%;
  max-width: 720px;
  padding: 20px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;  /* tall panels (timelines, long quotes) start at the top instead of overflowing out of reach */
}
.panel {
  background: var(--panel);
  border-radius: 16px;
  padding: 28px 28px;
  text-align: center;
}
.prompt { color: var(--muted); font-weight: 600; margin: -8px 0 20px; }
.hidden { display: none !important; }  /* beats id rules like #type-form { display: flex } */
.genre-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--badge-text, #111);
}
button {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 10px;
  padding: 14px 22px;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 6px;
  cursor: pointer;
  transition: transform 0.1s ease;
  font-family: inherit;  /* form controls do not inherit it; without this every button falls back to the UA font */
}
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--panel2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23888' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E")
    no-repeat right 16px center / 12px;
  color: var(--text);
  border: none;
  border-radius: 10px;
  padding: 14px 40px 14px 22px;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 6px;
  cursor: pointer;
  font-family: inherit;
}
/* secondary actions: an outline, so Play (or Play Again) stays the one bright button */
#start-speed, #start-daily, #lb-btn, #share, #lb-btn-end, #lb-close, #daily-back, #hint-btn, #auth-apple, #auth-logout, #auth-signup, #auth-forgot, #account-close, #challenge-btn, #start-duel, #duel-cancel, #badges-btn, #badges-back, #stats-btn, #stats-back, #watch-back, #season-btn, #season-back, #start-pass, #pass-back, #start-party, #start-pack, #pack-back, #start-library, #library-back, #start-offline, #offline-back, #offline-clear, #transfer-copy, #transfer-no, #player-add, #start-submit, #submit-back, #start-recent, #start-season, #start-sports, #start-speeches, #start-standup, #pack-submit, .library-list button, #start-watchlist, #watchlist-back, #stats-back, #year-btn, #year-back, #watchlist-copy, .champ-match button.secondary { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--accent-deep); }
button:active { transform: scale(0.96); }
blockquote {
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  animation: slide-in var(--motion) var(--ease-out);
}
@keyframes slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.options { display: grid; gap: 12px; }
.options button {
  /* ponytail: --panel2 resolves to the same token as --panel, so options sat invisible on the card */
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
  text-align: left;
  margin: 0;
  font-size: 1.05rem;
  padding: 16px 20px;
}
.options button.correct { background: var(--good); color: #fff; animation: pulse var(--motion-slow) var(--ease-out); }
.options button.wrong { background: var(--bad); color: #fff; animation: shake var(--motion-slow) var(--ease-out); }
@keyframes pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
#feedback { min-height: 1.4em; margin-top: 12px; font-weight: 600; font-size: 1.1rem; }
.timer-ring {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
}
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg, .ring-fg { fill: none; stroke-width: 3; }
.ring-bg { stroke: var(--border); }
.ring-fg { stroke: var(--accent-deep); stroke-dasharray: 100 100; transition: stroke-dashoffset 0.2s linear; }
.timer-ring span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 0.9rem; font-weight: 700;
}

/* Poster/album mosaic behind the game, built from quotes.json by game.js. It drifts like the
   landing wall, but freezes during the speed round (body.speed): motion there fights the clock.
   Held at a low opacity instead of using a scrim, so the game UI keeps flat backgrounds. */
#backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: 0.14;
}
:root[data-theme="dark"] #backdrop { opacity: 0.22; }
/* Themes (v67). Noir: the wall and the reveal flash in black and white; yellow stays the one colour.
   Drive-in: always night (play.html), the wall glows brighter like a screen across the lot. */
:root[data-look="noir"] #backdrop, :root[data-look="noir"] #art-flash { filter: grayscale(1) contrast(1.15); }
:root[data-look="noir"] #backdrop { opacity: 0.2; }
:root[data-look="noir"][data-theme="dark"] #backdrop { opacity: 0.3; }
:root[data-look="drivein"] #backdrop { opacity: 0.5; }
.bcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bcol img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.bcol img.sq { aspect-ratio: 1/1; }
.bcol.up   { animation: wall-up   var(--dur) linear infinite; }
.bcol.down { animation: wall-down var(--dur) linear infinite; }
body.speed .bcol { animation-play-state: paused; }
@keyframes wall-up   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .bcol.up, .bcol.down { animation: none; } }

.confetti {
  position: fixed; z-index: 20; width: 10px; height: 14px; margin: -7px 0 0 -5px; border-radius: 2px;
  pointer-events: none; animation: confetti 1.1s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes confetti {
  70% { opacity: 1; }
  to { transform: translate(var(--dx), calc(var(--dy) + 140px)) rotate(var(--rot)); opacity: 0; }
}
.bump { display: inline-block; animation: bump var(--motion-slow) var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.35); } }

#art-flash {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
#art-flash.show { opacity: 0.35; }
input[type="text"], input[type="email"], input[type="password"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--panel2);
  color: var(--text);
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 1rem;
  font-family: inherit;
  margin: 6px 0;
}
#account-btn { padding: 8px 14px; font-size: 0.9rem; margin: 0 4px; }
#lb-list { text-align: left; padding-left: 1.5em; line-height: 1.8; }
#auth-msg { min-height: 1.2em; opacity: 0.8; }

/* Quip, the mascot (brand/quip-*.svg) */
.quip { display: block; width: 128px; height: 128px; margin: -8px auto 4px; animation: quip-bob 2.4s ease-in-out infinite; }
@keyframes quip-bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .quip { animation: none; } }

.daily-streak { font-weight: 700; font-size: 1.15rem; margin: 4px 0; }

/* Type it: the answer field and its submit, plus the mode checkbox on the menu */
#type-form { display: flex; gap: 8px; }
#type-input { flex: 1; font: inherit; font-size: 1.05rem; padding: 14px 16px; border: 0; border-radius: 12px; background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
#type-input:focus { outline: 2px solid var(--accent-deep); }
#type-form button { margin: 0; }
.check { display: block; margin: 8px 0; color: var(--text); }

/* Friends and account actions */
#friend-form { display: flex; gap: 8px; }
#friend-input { flex: 1; font: inherit; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); text-transform: uppercase; }
#friend-form button { margin: 0; }
#friend-list { text-align: left; padding-left: 1.4em; }
button.link { background: none; box-shadow: none; color: var(--text); text-decoration: underline; padding: 0; margin: 0 0 0 6px; font-weight: 400; }
#auth-delete { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 2px var(--bad); }
#auth-google { display: flex; justify-content: center; margin: 6px 0; min-height: 44px; }

#end-btn { display: block; margin: 12px auto 0; opacity: 0.7; }
#duel-link { word-break: break-all; font-weight: 600; }
#badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin: 12px 0; }
#badge-grid figure { margin: 0; text-align: center; }
#badge-grid figcaption { font-size: 0.75rem; line-height: 1.2; margin-top: 4px; }
.medal { width: 64px; height: 64px; }
.medal.locked { filter: grayscale(1); opacity: 0.3; }
.badge-toast { position: fixed; left: 50%; top: 12px; max-width: calc(100vw - 32px); white-space: normal; width: max-content; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: #16161d; color: #fff; font-weight: 600; z-index: 100; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.badge-toast .medal { width: 40px; height: 40px; }
#stats-body h3 { font-size: 1rem; margin: 20px 0 8px; }
#stats-body table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
#stats-body td { padding: 4px 0; text-align: left; }
#stats-body td:nth-child(2) { opacity: 0.7; }
#stats-body td:last-child { width: 40%; text-align: right; position: relative; }
.stat-bar { position: absolute; right: 48px; top: 50%; height: 6px; max-width: calc(100% - 56px); transform: translateY(-50%); border-radius: 3px; background: var(--accent); }
.stat-graph { width: 100%; height: 96px; }
.stat-graph polyline { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.watch-link { font-size: 0.85rem; opacity: 0.7; word-break: break-all; }
#watch-body { display: grid; gap: 16px; margin: 12px 0; }
.watch-player h3 { display: flex; justify-content: space-between; margin: 0; }
.watch-player blockquote { font-size: 1rem; margin: 8px 0 4px; }
.watch-answer { font-size: 0.85rem; opacity: 0.7; margin: 0; }
#season-me { display: flex; align-items: center; gap: 12px; justify-content: center; }
#season-me .medal { width: 72px; height: 72px; flex: none; }
#season-ladder { text-align: left; max-width: 360px; margin: 8px auto; }
#season-shelf { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 12px 0; }
#season-shelf figure { margin: 0; width: 72px; font-size: 0.75rem; }
/* The leaderboard opens from the menu and the end screen alike, so it floats over both instead of stacking above them. */
#leaderboard, #story { position: fixed; inset: 0; margin: auto; width: min(480px, calc(100vw - 32px)); height: fit-content; max-height: 80vh; overflow-y: auto; z-index: 50; box-shadow: 0 12px 48px rgba(0,0,0,0.35); }
li.note { list-style: none; text-align: center; color: var(--muted); }  /* an empty board says so, unnumbered */
/* Poster and album reveal: blurred art that sharpens over about the length of a speed round */
#reveal { display: block; height: min(44vh, 360px); aspect-ratio: 2 / 3; object-fit: cover; margin: 0 auto 20px; border-radius: 12px; clip-path: inset(0 round 12px); filter: blur(10px); }
#reveal.sq { aspect-ratio: 1; height: min(36vh, 300px); }
#reveal.sharpen { filter: blur(0); transition: filter 7s cubic-bezier(0.2, 0.6, 0.4, 1); }  /* shapes in a second, title by about five */
#reveal.sharp { filter: none; transition: filter 0.3s; }
body.revealing #backdrop { visibility: hidden; }
#heard { margin: 12px 0 0; }
.pass-name, #pack-title { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 12px 14px; margin: 0 0 10px; border: 0; border-radius: 12px; background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
#pass-add { display: block; margin: 0 auto 12px; }
#pack-text { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 12px 14px; margin: 0 0 10px; border: 0; border-radius: 12px; background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); resize: vertical; }
#pack-link { display: block; margin: 0 0 12px; color: var(--text); }
.library-list { list-style: none; padding: 0; margin: 12px 0; text-align: left; }
.library-list li { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.library-list li span { flex: 1; display: grid; }
.library-list li small { color: var(--muted); }
.library-list li button { margin: 0; padding: 8px 14px; }
.library-list li.note { display: block; border: 0; }
.champ-match { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); text-align: left; }
.champ-match .vs { color: var(--muted); }
.champ-match .won { font-weight: 700; }
.champ-match button { margin: 0; padding: 8px 14px; }
#story { text-align: left; }
#story img { float: right; max-width: 38%; max-height: 220px; margin: 0 0 12px 16px; border-radius: 10px; }
#story h3 { margin: 0 0 4px; }
#story .story-links a { color: var(--text); }
#story-next { display: block; clear: both; margin: 16px auto 0; }
#story-link, #source-link { display: block; margin: 8px auto 0; width: fit-content; }
a.link { color: var(--text); font-size: 0.9rem; }

/* Access for all (v59) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
/* High contrast: the system setting or the switch in Settings. Pure ink and white, hard borders, no wall. */
:root.contrast, :root.contrast[data-theme] { --text: #000; --muted: #000; --border: #000; --panel: #fff; --bg: #fff; --accent-deep: #000; }
:root.contrast[data-theme="dark"] { --text: #fff; --muted: #fff; --border: #fff; --panel: #000; --bg: #000; --accent-deep: #ffcc00; }
:root.contrast #backdrop { display: none; }
:root.contrast .options button, :root.contrast #type-input { box-shadow: inset 0 0 0 2px var(--border); }
:root.contrast .prompt, :root.contrast small { color: var(--text); }
@media (prefers-contrast: more) {
  :root:not(.no-contrast) { --text: #000; --muted: #000; --border: #000; --accent-deep: #000; }
  :root:not(.no-contrast)[data-theme="dark"] { --text: #fff; --muted: #fff; --border: #fff; --accent-deep: #ffcc00; }
  :root:not(.no-contrast) #backdrop { display: none; }
}
/* Large text sizes: the top bar wraps onto more rows rather than running off the screen. */
.topbar, .stats { flex-wrap: wrap; row-gap: 8px; }
.stats { min-width: 0; }
#suggest { margin: 4px 0 12px; }
#suggest .prompt { margin: 0 0 8px; }
#suggest-go { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--accent-deep); }
.year-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.year-grid dt { font-size: 2.2rem; font-weight: 700; }
.year-grid dd { margin: 0; color: var(--muted); }