.games-page[hidden] { display: none; }
.games-page { min-height: 100vh; padding: 24px clamp(16px, 3.5vw, 48px) 32px; background: radial-gradient(ellipse at 35% 5%, #27281d, #101b18 55%, #0c1313); }
.games-site-header, .games-intro, .game-mode-nav, .game-workspace, .games-footer { max-width: 1400px; margin-inline: auto; }
.games-site-header { margin-bottom: 34px; }
.games-site-header .active { border-color: #bca369; color: #ebd09a; }
.games-intro h1 { max-width: none; margin: 12px 0; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 600; }
.games-intro > p:last-child { color: #b6beae; font-size: 0.9rem; line-height: 1.8; max-width: 780px; }
.games-intro .event-era { font-size: 0.68rem; letter-spacing: 0.18em; }
.game-mode-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 26px; margin-bottom: 26px; }
.game-mode-nav a { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid #b9a6752e; border-radius: 4px; text-decoration: none; color: #b4bda9; font-size: 0.82rem; background: #0d191750; }
.game-mode-nav a span { font-size: 0.65rem; color: #96875d; font-variant-numeric: tabular-nums; }
.game-mode-nav a:hover, .game-mode-nav a[aria-current] { color: #efddb0; border-color: #c7a960; background: #baa35c0c; }
.games-page button, .games-page a, .games-page input { -webkit-tap-highlight-color: transparent; }
.games-page :is(button, a, input):focus-visible { outline: 2px solid #efd29c; outline-offset: 4px; }
.game-primary, .game-secondary { padding: 12px 20px; border-radius: 3px; border: 1px solid #c6a468; cursor: pointer; font-size: 0.83rem; font-weight: 600; transition: background 150ms, color 150ms; }
.game-primary { color: #1d241e; background: #d1b67a; }
.game-primary:hover { background: #ead39d; }
.game-secondary { color: #c9c8b2; background: transparent; border-color: #81907c55; }
.game-secondary:hover { background: #ffffff08; }
.games-page button:disabled { opacity: 0.45; cursor: default; }
.games-page [hidden] { display: none !important; }
.game-eyebrow { margin: 0 0 16px; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: #a7986d; }
.game-data-note { color: #889787; font-size: 0.72rem; line-height: 1.7; }
.game-loading { padding: 70px 20px; color: #c5cbb4; text-align: center; }
.games-footer { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding-top: 30px; margin-top: 22px; border-top: 1px solid #b9a67522; }
.games-footer p { max-width: 750px; margin: 0; font-size: 0.67rem; color: #819083; line-height: 1.7; }
.games-footer a { font-size: 0.67rem; color: #a8b296; text-decoration: none; white-space: nowrap; }

.wheel-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 24px; }
.wheel-stage { min-width: 0; padding: 24px 30px; border: 1px solid #b9a67530; border-radius: 5px; background: #0d19195c; }
.wheel-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 0.7rem; color: #a4af98; }
.wheel-meta span:first-child { letter-spacing: 0.07em; color: #d0bd89; }
.wheel-graphic { position: relative; max-width: 540px; margin: 22px auto 16px; aspect-ratio: 1; overflow: clip; }
#wheelSvg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 20px #0005); }
#wheelSvg text { font-family: Inter, sans-serif; }
.wheel-pointer { position: absolute; left: 50%; top: 0.2%; width: 24px; height: 34px; transform: translateX(-50%); background: #efcf8b; clip-path: polygon(0 0, 100% 0, 50% 100%); z-index: 2; filter: drop-shadow(0 2px 4px #0008); }
.wheel-center { position: absolute; width: 24%; height: 24%; inset: 38%; border: 1px solid #c9b279; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(circle at 35% 25%, #29372e, #101c1b 80%); box-shadow: 0 0 0 5px #172322, 0 4px 16px #0006; pointer-events: none; }
.wheel-center span { font-size: clamp(0.55rem, 1vw, 0.7rem); letter-spacing: 0.12em; text-transform: uppercase; color: #968762; }
.wheel-center strong { font-family: Cinzel, Georgia, serif; font-weight: 600; font-size: clamp(0.75rem, 1.4vw, 1.1rem); color: #e7d5ad; }
.wheel-actions { display: flex; justify-content: center; gap: 10px; }
.wheel-repeat { display: flex; justify-content: center; gap: 8px; align-items: center; color: #9eac97; font-size: 0.72rem; margin-top: 18px; cursor: pointer; }
.wheel-repeat input { accent-color: #cdb579; width: 15px; height: 15px; }
.wheel-summary { min-width: 0; border: 1px solid #b9a67530; border-radius: 5px; background: #0d191970; padding: 28px; }
.wheel-route { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 16px; }
.wheel-route li { display: flex; gap: 14px; align-items: center; opacity: 0.45; }
.wheel-route li > span { width: 32px; height: 32px; border: 1px solid #b9a67530; border-radius: 50%; display: grid; place-items: center; color: #b3a175; font-size: 0.63rem; }
.wheel-route li div { display: grid; gap: 5px; }
.wheel-route small { font-size: 0.66rem; color: #96a38b; }
.wheel-route strong { font-size: 0.88rem; font-weight: 500; color: #d8d6bd; }
.wheel-route li.is-current, .wheel-route li.is-complete { opacity: 1; }
.wheel-route li.is-complete > span { border-color: #8da482; background: #7ba05a15; }
.wheel-route li.is-current > span { border-color: #cdb071; background: #cdb07110; }
.wheel-result { padding-top: 24px; border-top: 1px solid #b9a67525; min-height: 150px; }
.wheel-result h2 { font-family: Cinzel, Georgia, serif; font-size: 1.7rem; color: #e8d5a9; margin: 12px 0; }
.wheel-result p { color: #a8b39e; font-size: 0.82rem; line-height: 1.8; }
.wheel-result a, .quiz-answer-card a { text-decoration: none; font-size: 0.78rem; color: #dbbe7c; }
.wheel-await { margin: 0; padding: 18px 0; }
.wheel-next { margin-top: 18px; width: 100%; }
.wheel-champion-result { overflow: hidden; border: 1px solid #b9a67533; border-radius: 4px; }
.wheel-champion-result > img { display: block; width: 100%; aspect-ratio: 1.75; object-fit: cover; object-position: 65% 35%; }
.wheel-champion-result > div { padding: 18px; }
.wheel-champion-result span { color: #9bac90; font-size: 0.7rem; }
.wheel-champion-result h2 { margin: 8px 0; }
.wheel-history { margin-top: 30px; }
#wheelHistory { display: flex; flex-wrap: wrap; gap: 8px; }
#wheelHistory a { display: flex; align-items: center; gap: 6px; text-decoration: none; color: #b7c0a8; font-size: 0.67rem; }
#wheelHistory img { width: 28px; height: 28px; object-fit: cover; border-radius: 3px; border: 1px solid #8d9c7855; }

.quiz-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 0.8fr); gap: 24px; }
.quiz-main { min-width: 0; padding: 24px; border: 1px solid #b9a67530; border-radius: 5px; background: #0d19196e; }
.quiz-type-nav { display: flex; gap: 8px; margin-bottom: 22px; }
.quiz-type-nav button { padding: 9px 14px; border-radius: 3px; border: 1px solid #b9a67530; color: #adb69d; background: transparent; cursor: pointer; font-size: 0.75rem; }
.quiz-type-nav button[aria-pressed=true] { border-color: #ccb171; color: #ead1a0; background: #ccb1710c; }
.quiz-clue { min-height: 160px; padding: 22px; background: #1d2b2580; border: 1px solid #b9a67524; border-radius: 4px; margin-bottom: 24px; }
.quiz-clue h2 { margin: 12px 0; font-family: Cinzel, Georgia, serif; font-size: 1.7rem; color: #e8d6ac; font-weight: 600; }
.quiz-clue p:not(.game-eyebrow) { color: #aab6a1; font-size: 0.82rem; line-height: 1.8; }
.quiz-property-hints { display: flex; gap: 8px; flex-wrap: wrap; }
.quiz-property-hints span, .quiz-hint-tag { display: inline-block; padding: 6px 10px; margin: 3px; border: 1px solid #b9a67550; border-radius: 3px; color: #ccb78a; font-size: 0.7rem; }
.quiz-ability-icon { display: block; width: 70px; height: 70px; border: 1px solid #b9a67590; border-radius: 5px; box-shadow: 0 8px 20px #0004; }
.quiz-visual { aspect-ratio: 2; overflow: hidden; border-radius: 3px; background: #182622; }
.quiz-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; transform: scale(var(--clue-scale)); filter: grayscale(var(--clue-gray)) blur(var(--clue-blur)); transition: transform 350ms, filter 350ms; }
.quiz-clue blockquote { font-family: Cinzel, Georgia, serif; font-size: 1.5rem; line-height: 1.8; margin: 12px 0; color: #e8d5a8; }
.quiz-quote-note { font-size: 0.66rem !important; color: #8d9e88 !important; }
.quiz-form { position: relative; }
.quiz-form > label { display: block; font-size: 0.73rem; color: #adbb9f; margin-bottom: 10px; }
.quiz-input-row { display: flex; gap: 10px; }
.quiz-input-row input { min-width: 0; flex: 1; padding: 12px 14px; border-radius: 3px; border: 1px solid #b9a6755c; background: #0c1716; color: #eee2c1; font-size: 0.88rem; }
.quiz-input-row input::placeholder { color: #6f8074; }
.quiz-suggestions { position: absolute; z-index: 10; top: 72px; left: 0; right: 0; padding: 6px; margin: 0; list-style: none; background: #14231f; border: 1px solid #b9a67570; border-radius: 4px; box-shadow: 0 12px 28px #0009; max-height: 310px; overflow: auto; }
.quiz-suggestions li { display: flex; align-items: center; gap: 12px; padding: 9px; border-radius: 2px; color: #d6d6ba; cursor: pointer; font-size: 0.8rem; }
.quiz-suggestions li:hover, .quiz-suggestions li[aria-selected=true] { background: #b9a67515; }
.quiz-suggestions img { width: 32px; height: 32px; border-radius: 3px; }
.quiz-feedback { min-height: 20px; font-size: 0.78rem; color: #d0c392; line-height: 1.6; }
.quiz-round-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #91a286; font-size: 0.7rem; padding: 12px 0; border-bottom: 1px solid #b9a67524; }
.game-text-button { background: transparent; border: 0; color: #c8b37f; font-size: 0.7rem; cursor: pointer; padding: 6px 8px; }
.quiz-empty { color: #7c8e7e; font-size: 0.76rem; text-align: center; padding: 28px 0; }
.quiz-table-scroll { overflow-x: auto; margin-top: 14px; }
.quiz-guesses table { width: 100%; border-collapse: separate; border-spacing: 5px; font-size: 0.7rem; }
.quiz-guesses thead th { font-weight: 400; color: #a7b297; padding: 10px 4px; }
.quiz-guesses tbody th { color: #d6d7bb; text-align: left; font-weight: 500; min-width: 110px; }
.quiz-guesses tbody th > div { display: flex; align-items: center; gap: 8px; }
.quiz-guesses img { width: 34px; height: 34px; object-fit: cover; border-radius: 3px; }
.quiz-guesses td { padding: 10px 8px; text-align: center; border: 1px solid #a8af9030; border-radius: 3px; min-width: 90px; max-width: 170px; }
.quiz-guesses td small { display: block; font-size: 0.6rem; margin-top: 6px; opacity: 0.85; }
.quiz-guesses .match, .quiz-legend .match { color: #bed4a1; background: #54733335; border-color: #8db56470; }
.quiz-guesses .partial, .quiz-legend .partial { color: #e1cb93; background: #9d782d30; border-color: #b99c5170; }
.quiz-guesses .miss, .quiz-legend .miss { color: #d4aa9c; background: #793c3133; border-color: #a95f4d70; }
.quiz-guesses .unknown, .quiz-legend .unknown { color: #a5b6be; background: #43596330; border-color: #67838f70; }
.quiz-answer-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); border: 1px solid #b9a67550; border-radius: 4px; overflow: hidden; margin-top: 20px; background: #22342c60; }
.quiz-answer-card img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.quiz-answer-card > div { padding: 20px; }
.quiz-answer-card h2 { margin: 10px 0; font-family: Cinzel, Georgia, serif; color: #e5d1a5; }
.quiz-answer-card p { color: #a4b49a; font-size: 0.76rem; line-height: 1.7; }
.quiz-next { margin-top: 20px; }
.quiz-sidebar { padding: 26px; border: 1px solid #b9a67530; border-radius: 5px; background: #0d19195e; align-self: start; }
.quiz-sidebar h2 { font-family: Cinzel, Georgia, serif; font-size: 1.5rem; font-weight: 500; color: #e2d2aa; margin: 12px 0; }
.quiz-sidebar > p:not(.game-eyebrow) { font-size: 0.8rem; line-height: 1.9; color: #a0b094; }
.quiz-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
.quiz-stat-grid div { display: flex; flex-direction: column; gap: 8px; }
.quiz-stat-grid strong { font-size: 1.5rem; color: #deca98; font-weight: 500; }
.quiz-stat-grid span { font-size: 0.6rem; color: #849a7d; line-height: 1.6; }
.quiz-stats-reset { margin: 0 0 22px; padding-left: 0; }
.quiz-table-scroll:focus-visible { outline: 2px solid #efd29c; outline-offset: 4px; }
.quiz-legend { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 22px; border-top: 1px solid #b9a67528; }
.quiz-legend span { border: 1px solid; border-radius: 3px; font-size: 0.64rem; padding: 6px 8px; }

@media (max-width: 1000px) {
  .games-site-header { flex-wrap: wrap; }
  .wheel-layout { grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 16px; }
  .wheel-stage, .wheel-summary { padding: 20px; }
  .quiz-layout { grid-template-columns: minmax(0, 1fr); }
  .quiz-sidebar { padding: 20px; }
}
@media (max-width: 700px) {
  body.is-games-mode { scrollbar-gutter: auto; }
  .games-page { padding-inline: 14px; }
  .games-site-header { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
  .games-site-header .brand { font-size: 1.6rem; }
  .games-site-header .site-nav { gap: 6px; margin-left: 0; flex-wrap: wrap; }
  .games-site-header .site-nav a { font-size: 0.65rem; padding: 8px; }
  .games-intro h1 { font-size: 1.9rem; line-height: 1.25; }
  .games-intro > p:last-child { font-size: 0.8rem; }
  .game-mode-nav { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 22px; }
  .game-mode-nav a { padding: 13px 10px; gap: 9px; font-size: 0.72rem; }
  .wheel-layout { grid-template-columns: minmax(0, 1fr); }
  .wheel-graphic { max-width: 440px; }
  .wheel-stage, .wheel-summary { padding: 18px; }
  .wheel-center strong { font-size: 0.83rem; }
  .wheel-center span { font-size: 0.5rem; }
  .wheel-route { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .wheel-route li { flex-direction: column; align-items: flex-start; gap: 9px; }
  .wheel-route strong { font-size: 0.7rem; }
  .wheel-route small { font-size: 0.57rem; }
  .quiz-main { padding: 15px; }
  .quiz-type-nav { gap: 5px; }
  .quiz-type-nav button { flex: 1; padding: 9px 3px; font-size: 0.67rem; }
  .quiz-clue { padding: 16px; }
  .quiz-clue h2 { font-size: 1.45rem; }
  .quiz-clue blockquote { font-size: 1.2rem; }
  .quiz-input-row { gap: 7px; }
  .quiz-input-row input { width: 0; font-size: 0.78rem; }
  .quiz-input-row .game-primary { padding-inline: 12px; font-size: 0.73rem; }
  .quiz-round-meta { flex-wrap: wrap; gap: 6px; }
  .quiz-guesses table { min-width: 610px; }
  .quiz-answer-card { grid-template-columns: 1fr; }
  .quiz-answer-card img { height: 150px; }
  .games-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .games-page *, .games-page *::before, .games-page *::after { transition-duration: 0ms !important; animation: none !important; }
}

/* Keep the two main games easy to scan; guided wheels are optional. */
.games-page > .game-mode-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.game-advanced { max-width: 1400px; margin: -8px auto 26px; border: 1px solid #b9a67530; border-radius: 4px; padding: 15px 18px; }
.game-advanced summary { color: #c9b990; font-size: .78rem; cursor: pointer; line-height: 1.6; }
.game-advanced > p { color: #a4b29d; font-size: .76rem; line-height: 1.8; }
.game-advanced .game-mode-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; margin-top: 16px; }

/* Lollore game pages: warm gold accents over a clear cosmic blue-violet base. */
.games-page {
  --game-ink: #e8eaf8;
  --game-muted: #b9c4df;
  --game-dim: #97a7c7;
  --game-gold: #f0cb83;
  --game-gold-bright: #ffe2a5;
  --game-blue: #9ecaff;
  --game-violet: #c7b5ff;
  color: var(--game-ink);
  background-color: #090e1d;
  background-image:
    radial-gradient(ellipse at 12% 2%, rgb(37 68 132 / 42%), transparent 43rem),
    radial-gradient(ellipse at 92% 17%, rgb(82 49 132 / 28%), transparent 38rem),
    radial-gradient(ellipse at 54% 72%, rgb(24 57 103 / 20%), transparent 52rem),
    linear-gradient(155deg, #0c1428 0%, #0b1020 48%, #111026 100%);
  position: relative;
  isolation: isolate;
}
.games-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.52;
  background-image:
    radial-gradient(1px 1px at 16% 12%, rgb(255 226 165 / 46%) 50%, transparent 100%),
    radial-gradient(1px 1px at 73% 8%, rgb(184 204 255 / 48%) 50%, transparent 100%),
    radial-gradient(1px 1px at 91% 40%, rgb(214 194 255 / 40%) 50%, transparent 100%),
    radial-gradient(1px 1px at 38% 63%, rgb(163 204 255 / 35%) 50%, transparent 100%);
  background-size: 420px 360px, 530px 470px, 620px 520px, 710px 640px;
}
.games-intro h1 { color: #f1e7d1; text-shadow: 0 2px 28px rgb(117 156 225 / 18%); }
.games-intro > p:last-child { color: var(--game-muted); }
.games-intro .event-era, .game-eyebrow { color: #d6bd85; }
.game-data-note, .games-footer p { color: #a8b6d0; }
.games-footer { border-top-color: rgb(151 177 231 / 20%); }
.games-footer a { color: #b9d8ff; }
.games-site-header .active { border-color: rgb(240 203 131 / 76%); color: var(--game-gold-bright); }

.game-mode-nav a {
  min-height: 54px;
  border-color: rgb(143 171 231 / 24%);
  border-radius: 9px;
  color: #c0cbe2;
  background: linear-gradient(135deg, rgb(21 35 66 / 83%), rgb(25 22 51 / 72%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%), 0 8px 24px rgb(1 5 18 / 16%);
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.game-mode-nav a span { color: #e4c780; }
.game-mode-nav a:hover, .game-mode-nav a[aria-current] {
  color: #fff0cf;
  border-color: rgb(240 203 131 / 82%);
  background: linear-gradient(135deg, rgb(46 57 94 / 88%), rgb(45 35 79 / 84%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 0 0 1px rgb(240 203 131 / 9%), 0 10px 28px rgb(1 5 18 / 28%);
  transform: translateY(-1px);
}
.games-page :is(button, a, input, summary, .quiz-table-scroll):focus-visible {
  outline: 2px solid var(--game-gold-bright);
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgb(158 202 255 / 15%);
}

.game-primary, .game-secondary {
  min-height: 44px;
  border-radius: 7px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.game-primary {
  color: #211a11;
  border-color: #f3d79f;
  background: linear-gradient(135deg, #f4d99e, #dfb96d);
  box-shadow: 0 5px 16px rgb(216 172 91 / 15%), inset 0 1px 0 rgb(255 255 255 / 54%);
}
.game-primary:hover {
  color: #17131a;
  background: linear-gradient(135deg, #ffe9b8, #edce8b);
  box-shadow: 0 7px 21px rgb(216 172 91 / 23%), inset 0 1px 0 rgb(255 255 255 / 70%);
  transform: translateY(-1px);
}
.game-secondary {
  color: #d5d9ee;
  border-color: rgb(160 183 231 / 46%);
  background: linear-gradient(135deg, rgb(32 47 81 / 72%), rgb(36 30 67 / 64%));
}
.game-secondary:hover { color: #f3e5c7; border-color: rgb(240 203 131 / 66%); background: rgb(61 58 93 / 74%); }
.games-page button:disabled { box-shadow: none; transform: none; }

.wheel-stage, .wheel-summary, .quiz-main, .quiz-sidebar {
  border: 1px solid rgb(142 169 224 / 27%);
  border-radius: 12px;
  background: linear-gradient(145deg, rgb(17 30 56 / 90%), rgb(17 21 42 / 91%) 56%, rgb(30 23 52 / 87%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%), 0 18px 44px rgb(1 5 18 / 22%);
}
.wheel-stage, .wheel-summary, .quiz-main, .quiz-sidebar, .game-advanced { backdrop-filter: blur(12px); }
.wheel-meta { color: #bdc9e2; }
.wheel-meta span:first-child, .wheel-center span { color: #e0c781; }
.wheel-center {
  border-color: rgb(240 203 131 / 82%);
  background: radial-gradient(circle at 35% 25%, #314571, #171a37 78%);
  box-shadow: 0 0 0 5px #131a31, 0 5px 24px rgb(2 6 22 / 65%), 0 0 24px rgb(133 175 255 / 16%);
}
.wheel-center strong, .wheel-result h2 { color: #f0dfb7; }
.wheel-pointer { background: linear-gradient(180deg, #ffe8b3, #d4a954); }
.wheel-repeat { color: #bcc9e2; }
.wheel-repeat input { accent-color: #e8c474; }
.wheel-route li > span { border-color: rgb(158 182 231 / 30%); color: #d5bf82; }
.wheel-route small { color: #aebcda; }
.wheel-route strong { color: #e5e7f3; }
.wheel-route li.is-complete > span { border-color: #8fc8d8; color: #c9f0f4; background: rgb(64 139 165 / 22%); }
.wheel-route li.is-current > span { border-color: #f0cb83; color: #ffe4a8; background: rgb(240 203 131 / 12%); box-shadow: 0 0 18px rgb(240 203 131 / 12%); }
.wheel-result { border-top-color: rgb(151 177 231 / 20%); }
.wheel-result p { color: #bec9df; }
.wheel-result a, .quiz-answer-card a { color: #f0cb83; }
.wheel-champion-result { border-color: rgb(161 184 230 / 36%); border-radius: 8px; }
.wheel-history a { color: #c5d1ea; }
.wheel-history img { border-color: rgb(158 195 241 / 55%); border-radius: 6px; }

.quiz-type-nav button {
  min-height: 42px;
  border-color: rgb(153 176 228 / 30%);
  border-radius: 7px;
  color: #c0cbe3;
  background: rgb(25 35 64 / 58%);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.quiz-type-nav button:hover { border-color: rgb(183 198 240 / 62%); color: #f0e8d5; background: rgb(49 54 90 / 68%); }
.quiz-type-nav button[aria-pressed=true] { border-color: #edc97e; color: #ffe5b0; background: linear-gradient(135deg, rgb(111 85 42 / 34%), rgb(70 60 111 / 40%)); box-shadow: inset 0 0 0 1px rgb(240 203 131 / 11%); }
.quiz-clue { border-color: rgb(150 176 230 / 25%); border-radius: 9px; background: linear-gradient(135deg, rgb(31 49 82 / 78%), rgb(38 32 70 / 68%)); }
.quiz-clue h2, .quiz-clue blockquote, .quiz-sidebar h2, .quiz-answer-card h2 { color: #f0dfb8; }
.quiz-clue p:not(.game-eyebrow), .quiz-sidebar > p:not(.game-eyebrow), .quiz-answer-card p { color: #c0cce2; }
.quiz-property-hints span, .quiz-hint-tag { border-color: rgb(240 203 131 / 38%); border-radius: 999px; color: #e8d39d; background: rgb(103 85 52 / 17%); }
.quiz-ability-icon { border-color: rgb(176 190 235 / 68%); border-radius: 9px; box-shadow: 0 8px 24px rgb(0 0 0 / 34%), 0 0 18px rgb(123 162 238 / 11%); }
.quiz-visual { border-radius: 8px; background: #151d36; }
.quiz-quote-note { color: #aab9d4 !important; }
.quiz-form > label { color: #c6d0e6; }
.quiz-input-row input {
  border-color: rgb(154 181 231 / 42%);
  border-radius: 7px;
  color: #f0e6cf;
  background: rgb(9 16 33 / 88%);
}
.quiz-input-row input::placeholder { color: #91a1c0; }
.quiz-input-row input:focus { border-color: #9ecaff; box-shadow: 0 0 0 3px rgb(121 176 255 / 17%); }
.quiz-suggestions { border-color: rgb(159 184 235 / 48%); border-radius: 9px; background: #111a31; box-shadow: 0 16px 38px rgb(0 0 0 / 46%); }
.quiz-suggestions li { min-height: 44px; border-radius: 6px; color: #e2e6f3; }
.quiz-suggestions li:hover, .quiz-suggestions li[aria-selected=true] { background: linear-gradient(90deg, rgb(87 113 167 / 35%), rgb(100 76 148 / 27%)); }
.quiz-suggestions img, .quiz-guesses img { border-radius: 6px; }
.quiz-feedback { color: #f0d695; }
.quiz-round-meta { color: #b1c0df; border-bottom-color: rgb(151 177 231 / 20%); }
.game-text-button { min-height: 40px; border-radius: 6px; color: #e0c57f; }
.game-text-button:hover { color: #ffe4a8; background: rgb(133 112 68 / 15%); }
.quiz-empty { color: #a3b0cb; }
.quiz-guesses thead th { color: #bdc9e0; }
.quiz-guesses tbody th { color: #e0e4f2; }
.quiz-guesses td { border-color: rgb(161 181 226 / 26%); border-radius: 6px; background: rgb(10 17 35 / 48%); }
.quiz-guesses .match, .quiz-legend .match { color: #c9f1f1; background: rgb(45 120 145 / 30%); border-color: rgb(121 198 211 / 65%); }
.quiz-guesses .partial, .quiz-legend .partial { color: #ffe3a6; background: rgb(130 97 40 / 30%); border-color: rgb(214 178 101 / 68%); }
.quiz-guesses .miss, .quiz-legend .miss { color: #f0c2c5; background: rgb(125 54 76 / 28%); border-color: rgb(198 111 135 / 62%); }
.quiz-guesses .unknown, .quiz-legend .unknown { color: #c5d8f7; background: rgb(55 82 132 / 28%); border-color: rgb(123 160 219 / 62%); }
.quiz-answer-card { border-color: rgb(164 185 230 / 39%); border-radius: 10px; background: linear-gradient(120deg, rgb(25 42 75 / 87%), rgb(35 29 64 / 76%)); }
.quiz-sidebar h2 { font-weight: 600; }
.quiz-stat-grid strong { color: #f0d18e; }
.quiz-stat-grid span { color: #aebddb; }
.quiz-legend { border-top-color: rgb(151 177 231 / 20%); }
.quiz-legend span { border-radius: 999px; }
.game-advanced { border-color: rgb(151 177 231 / 26%); border-radius: 10px; background: linear-gradient(135deg, rgb(18 30 55 / 80%), rgb(24 23 47 / 78%)); }
.game-advanced summary { color: #e1cf9d; min-height: 44px; display: flex; align-items: center; }
.game-advanced summary::after { content: '+'; margin-left: auto; padding-left: 12px; font-size: 1.25rem; }
.game-advanced[open] summary::after { content: '−'; }
.game-advanced > p { color: #b9c5dc; }

@media (max-width: 700px) {
  .game-mode-nav a { min-height: 50px; }
  .quiz-type-nav button { min-height: 44px; }
  .game-text-button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .games-page *, .games-page *::before, .games-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .game-mode-nav a:hover, .game-primary:hover { transform: none; }
}