/* Riddle10 Games world: the "Crimson Vault" look. Loaded after site.css.
   Roll (riddles) keeps the navy site look; body.world-games re-themes the tokens. */
:root, :root[data-theme="light"] {
  --arc-1: #8a2234; --arc-2: #5e1220; --arc-3: #e3bd72;
  --arc-hot: #e3bd72; --arc-ink: #f6ead8;
  --arc-grad: #8a2234;
  --arc-glow: 0 6px 20px -10px rgba(0, 0, 0, .6);
  --arc-line: #3a2a24; --arc-soft: rgba(138, 34, 52, .28);
  --play-font: "Bodoni Moda", "Cormorant Garamond", Georgia, serif;
  --tab-h: 0px;
}
/* v38: brown is retired. The Games pages (the Games page, every game, the Challenge pages) use the navy of the Riddles page:
   the site's own tokens from site.css, dark and light. The game box stays dark navy in both themes (play.css .pl-stage).
   Plus Jakarta Sans for titles, group headers, game names and buttons; Inter for small text; Cormorant only for riddle text. */
body.world-games {
  --crimson: var(--gold); --crimson-line: transparent; --crimson-ink: var(--gold-ink);
  --board: #070a12; --tile: #1a2133; --tile-out: #0a0e1a;
  --line-2: #2a3348;
  --display: "Plus Jakarta Sans", "Inter", "Noto Kufi Arabic", system-ui, sans-serif;
  --play-font: var(--display);
  background: var(--bg);
  color: var(--ink);
}
:root[data-theme="light"] body.world-games { --line-2: #d3c4a3; }
body.world-games .sky { display: none; }
body.world-games .topbar { background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--line); }
body.world-games h1, body.world-games h2, body.world-games h3 { font-family: var(--display); }

/* Header: Roll / Games links + Games pill */
.mainnav a.nav-games { color: #e3bd72; }
@media (min-width: 1000px) {
  .mainnav a.nav-games { border: 1px solid rgba(227, 189, 114, .5); background: linear-gradient(135deg, rgba(138, 34, 52, .7), rgba(94, 18, 32, .7)); color: #f6ead8; }
}
.play-pill { background: #8a2234; border: 1px solid rgba(227, 189, 114, .55); color: #f6ead8; font: 600 15px "Inter", sans-serif; letter-spacing: .01em; box-shadow: 0 6px 20px -10px rgba(0, 0, 0, .5); }
.play-pill:hover { color: #fff; filter: brightness(1.1); }
.play-pill::before { display: none; }
.play-pill.is-active { outline-color: rgba(227, 189, 114, .8); }
@media (max-width: 999px) { .play-pill { display: none !important; } }

/* Bottom tab bar (phones and tablets) */
.tabbar { display: none; }
@media (max-width: 999px) {
  :root { --tab-h: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .tabbar { position: fixed; inset: auto 0 0 0; z-index: 70; display: grid; grid-template-columns: 1fr 1fr; height: var(--tab-h); padding-bottom: env(safe-area-inset-bottom, 0px); background: color-mix(in srgb, var(--bg-2) 96%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-2); font: 600 12px "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
  .tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .tab.is-active, .tab[aria-current] { color: var(--gold-text); }
  body { padding-bottom: var(--tab-h); }
  .toast { bottom: calc(var(--tab-h) + 14px); }
}

/* Home: Games door as vault panel */
.door-play { background: radial-gradient(80% 70% at 50% 0%, #3d0a12, transparent 70%), linear-gradient(160deg, #2a060b, #1a0408); border: 1.5px solid #e3bd72; box-shadow: 0 0 0 5px #160307, 0 0 0 6.5px rgba(227, 189, 114, .5), 0 30px 70px -30px rgba(138, 34, 52, .9); border-radius: 10px; align-items: center; text-align: center; color: #f6ead8; }
.door-play::before { display: none; }
.door-play:hover { color: #f6ead8; box-shadow: 0 0 0 5px #160307, 0 0 0 6.5px rgba(227, 189, 114, .8), 0 36px 80px -28px rgba(138, 34, 52, 1); }
.door-play .arc-eyebrow { color: #e3bd72; font-family: "Inter", sans-serif; letter-spacing: .24em; }
.door-play-title { background: linear-gradient(180deg, #fbe7b0, #d2a251 45%, #a5772f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6)); font-weight: 800; }
.door-play-lead { color: #d8c3ac; font-family: "Spectral", Georgia, serif; margin-inline: auto; }
.door-play-stats { justify-content: center; color: #c9a892; font-family: "Spectral", Georgia, serif; }
.door-play-stats b { color: #fbe7b0; font-family: "Bodoni Moda", Georgia, serif; }
.door-play-stats .play-band-progress { color: #e3bd72; }
.vault-art { display: block; width: min(230px, 62%); margin: 4px auto; }
.vault-art svg { width: 100%; height: auto; display: block; }
.vault-art .dial-ring { transform-box: fill-box; transform-origin: 50% 50%; animation: dial20 3s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes dial20 { from { transform: rotate(0); } to { transform: rotate(-72deg); } }
@media (prefers-reduced-motion: reduce) { .vault-art .dial-ring { animation: none; transform: rotate(-72deg); } }
.btn-arcade, .btn-games { background: linear-gradient(180deg, #fbe7b0, #d2a251 50%, #a5772f); color: #2a1804; font-family: "Inter", sans-serif; font-weight: 700; border: 0; }
.btn-games { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; min-height: 46px; border-radius: 999px; }
.btn-games svg { width: 18px; height: 18px; }
.btn-games:hover, .door-play:hover .btn-arcade { color: #2a1804; background: linear-gradient(180deg, #fff1c8, #e3bd72 50%, #b98536); }
.arcade-zone { background: radial-gradient(60% 120% at 10% 0%, rgba(138, 34, 52, .45), transparent 70%), #160307; border-block: 1px solid rgba(227, 189, 114, .4); }
.arc-title { background: linear-gradient(180deg, #fbe7b0, #d2a251 45%, #a5772f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-tile { background: linear-gradient(160deg, #2a060b, #1a0408); border: 1.5px solid rgba(227, 189, 114, .55); border-radius: 10px; color: #f6ead8; }
.game-tile:hover { color: #f6ead8; border-color: #fbe7b0; }
.game-tile-art { background: radial-gradient(circle at 50% 30%, #6e1a28, #3a0a12); border-radius: 6px; }
.game-tile-art svg { stroke: #e3bd72; }
.game-tile-name { font-family: "Bodoni Moda", Georgia, serif; }
.game-tile-go { background: rgba(227, 189, 114, .14); color: #e3bd72; }
.game-tile:hover .game-tile-go { background: linear-gradient(180deg, #fbe7b0, #c8963f); color: #2a1804; }
.pl-hero .eyebrow, .footer-games h3 { color: #e3bd72 !important; }
:root[data-theme="light"] .footer-games h3 { color: var(--gold-text) !important; }   /* light gold was unreadable on the light footer */
.pl-hero h1 { background: linear-gradient(180deg, #fbe7b0, #d2a251 45%, #a5772f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-games a:hover { color: #e3bd72; }
@media (min-width: 1000px) { .mainnav a.nav-games { display: none; } }
.pl-hero h1 { line-height: 1.2; padding-bottom: .12em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.world-games #play-hub { padding-top: 22px; }
/* v18: the hub cards show a small drawing of each game's real board (Views/Play/_GameCard.cshtml, Services/GameBoards.cs);
   the home strip keeps its icons, in gold on a warm tile. */
body.world-games .game-tile-art { border: 1px solid var(--line); background: var(--bg-3); box-shadow: none; }
body.world-games .game-tile-art svg { stroke: var(--gold-text); filter: none; }

/* v37: the Riddles / Games switch. One two-part control: the part you are in is filled gold, Games shows how many games
   there are (Riddles has no number). Phones and tablets: at the bottom of the screen. Computers: in the header, after the logo. */
.sw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line); }
.sw .sw-b {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 12px;
  border-radius: 999px; color: var(--ink); font: 600 13px/1 "Inter", var(--sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.sw .sw-b:hover { color: var(--ink); background: var(--glass-2); }
.sw .sw-b svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 1; }
.sw .sw-b.is-active, .sw .sw-b.is-active:hover { background: var(--gold); color: var(--gold-ink); }
.sw-cnt { font: 700 11px/1 "Inter", var(--sans); letter-spacing: 0; padding: 4px 6px; border-radius: 999px; background: var(--line-2, #222a3b); color: var(--ink); }   /* v38: no crimson */
.sw .sw-b.is-active .sw-cnt { background: rgba(36, 23, 3, .18); color: var(--gold-ink); }
@media (max-width: 999px) {
  :root { --tab-h: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .tabbar { display: block; padding: 9px 16px calc(11px + env(safe-area-inset-bottom, 0px)); }
  .tabbar .sw { max-width: 520px; height: 48px; margin: 0 auto; }
  .tabbar .tab.is-active, .tabbar .tab[aria-current] { color: var(--gold-ink); }
  /* the © line under every page goes on phones and tablets; Privacy and Terms stay in the footer of the other pages */
  .footer-base { display: none; }
  body.page-roll { --legal-h: 0px; }
  body.page-roll .footer { display: none; }
}
@media (max-width: 359px) { .tabbar { padding-inline: 10px; } .sw .sw-b { gap: 5px; padding: 0 8px; } }
@media (min-width: 1000px) {
  .mainnav .sw-top { display: inline-grid; grid-template-columns: auto auto; height: 48px; }
  .mainnav .sw-top .sw-b { padding: 0 16px; text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--ink); }
  .mainnav .sw-top .sw-b.is-active { color: var(--gold-ink); background: var(--gold); }
}

/* v37: pieces shared by the Riddles feed, the riddle pages, the Games page and the front door */
.pl-mark { display: block; flex: none; fill: none; stroke: none; }
.pl-mark .bg { fill: var(--gd); stroke: var(--gm); stroke-width: 1.5; }
.pl-mark .ring { fill: none; stroke: #e3bd72; stroke-width: 1.5; opacity: .6; }
.pl-mark .m-a { fill: none; stroke: var(--gb); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pl-mark .m-af { fill: var(--gb); }
.pl-mark .m-gold { fill: #e3bd72; }
.pl-mark .m-gold-s { fill: none; stroke: #e3bd72; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.pl-mark .m-ink { fill: #050304; }
.pl-mark .m-inkb { fill: #050304; stroke: var(--gb); stroke-width: 1.25; stroke-opacity: .55; }
.pl-mark.small .ring { display: none; }
/* "Play a game like this": the door from a riddle to the games, a calm blue outline next to the gold Next riddle */
.btn-like { background: transparent; border: 1.5px solid var(--teal, #7ec0e6); color: var(--teal, #7ec0e6); }
.btn-like:hover { color: var(--teal, #7ec0e6); background: color-mix(in srgb, var(--teal, #7ec0e6) 10%, transparent); }
.btn-like svg { width: 18px; height: 18px; }
.btn-like .like-name { font-weight: 500; opacity: .85; }
/* XP and streak chips under an answer and on the win screen */
.chip.chip-xp, .chip.chip-streak { height: auto; padding: 4px 10px; font: 700 11px/1.4 "Inter", var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.chip.chip-xp { background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold-text); }
.chip.chip-streak { background: var(--bg-3); color: var(--ink-2); }
/* Start here: one game picked for you, with one button */
.sh { display: grid; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: var(--bg-2); text-align: start; }
.sh-top { display: flex; align-items: center; gap: 14px; }
.sh-mark .pl-mark { width: 64px; height: 64px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.sh-txt { min-width: 0; }
.sh-kicker { margin: 0 0 2px; color: var(--gold-text); font: 700 11px/1.4 "Inter", var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.sh-kicker svg { width: 12px; height: 12px; vertical-align: -1px; margin-inline-end: 3px; }
.sh-name { margin: 0; font: 600 26px/1.15 var(--play-font, var(--serif)); color: var(--ink); }
.sh-meta { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.sh-blurb { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.sh-go { width: 100%; min-height: 50px; font-size: 16px; }
.sh-go svg { width: 18px; height: 18px; }
/* a small game tile: mark, name, difficulty */
.gt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); text-align: center; min-width: 0; }
.gt:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.gt-mark .pl-mark { width: 40px; height: 40px; }
.gt-name { font: 600 14px/1.2 var(--play-font, var(--serif)); }
.gt-diff { color: var(--muted); font: 700 10.5px "Inter", var(--sans); letter-spacing: .08em; text-transform: uppercase; }
/* v37: the front door (Admin → Games → Home page → Front door) */
.door { display: flex; flex-direction: column; gap: 14px; max-width: 640px; padding-top: 18px; padding-bottom: 28px; }
.door-head h1 { margin: 0; font: 600 38px/1.05 var(--serif); }
.door-head p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.door-riddle { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: var(--bg-2); }
.door-stage { display: block; height: 220px; border-radius: 14px; overflow: hidden; background: #05070d; }
.door-stage img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.door-quote { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100%; padding: 18px; color: var(--ink); font: 600 20px/1.3 var(--serif); overflow: hidden; }
.door-quote svg { width: 24px; height: 24px; color: var(--gold-text); }
.door-riddle-txt { padding: 0 4px; }
.door-riddle-txt h2 { margin: 0; font: 600 26px/1.15 var(--serif); }
.door-riddle-txt p { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.door-go { width: 100%; min-height: 50px; font-size: 16px; }
.door-go svg, .door-all svg, .door-games-head a svg { width: 16px; height: 16px; }
.door-all, .door-games-head a { display: inline-flex; align-items: center; gap: 5px; align-self: center; min-height: 40px; color: var(--gold-text); font: 700 13.5px "Inter", var(--sans); }
.door-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px; }
.door-types a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: 600 14px/1.2 var(--serif); text-align: center; }
.door-types a:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.door-types svg { width: 20px; height: 20px; color: var(--gold-text); fill: none; stroke: currentColor; stroke-width: 1.7; }
.door-games-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 6px; }
.door-games-head h2 { margin: 0; font: 600 26px/1.15 var(--serif); }
.door-games-head p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.door-start { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: var(--bg-2); color: var(--ink); }
.door-start:hover { color: var(--ink); }
.door-start .sh-mark .pl-mark { width: 52px; height: 52px; }
.door-start-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.door-start-txt small { color: var(--gold-text); font: 700 11px/1.4 "Inter", var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.door-start-txt small svg { width: 12px; height: 12px; vertical-align: -1px; margin-inline-end: 3px; }
.door-start-txt b { font: 600 20px/1.15 var(--serif); }
.door-start-txt > span { color: var(--ink-2); font-size: 13.5px; }
.door-start-go { flex: none; }
.door-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gt.gt-wide { align-items: flex-start; text-align: start; padding: 12px; }
.gt.gt-wide .gt-mark .pl-mark { width: 48px; height: 48px; }
.gt.gt-wide .gt-name { font-size: 16px; }
.gt-blurb { color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
@media (min-width: 1000px) { .door { padding-top: 32px; } .door-stage { height: 320px; } }