.still-curious-page { background: var(--cream-200); }
.still-curious-page .site-header { background: rgba(255, 246, 233, 0.96); }
.game-wrap { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }
.game-intro { position: relative; overflow: hidden; padding: clamp(4rem, 9vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem); background: var(--cream-100); }
.game-intro::before, .game-intro::after { position: absolute; width: .65rem; height: .65rem; border-radius: 50%; background: rgba(198, 118, 38, .13); content: ''; }
.game-intro::before { top: 18%; left: 8%; }
.game-intro::after { right: 9%; bottom: 26%; background: rgba(13, 74, 82, .1); }
.game-intro-inner { display: grid; max-width: 53rem; justify-items: center; text-align: center; }
.game-eyebrow { margin: 0 0 1rem; color: var(--amber-600); font-size: .72rem; font-weight: 700; letter-spacing: .17em; line-height: 1.5; text-transform: uppercase; }
.game-intro h1, .game-board-heading h2, .game-dialog h2 { margin: 0; color: var(--teal-950); font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -.055em; line-height: 1; text-wrap: balance; }
.game-intro h1 { font-size: clamp(4rem, 10vw, 7rem); }
.game-intro-copy { max-width: 43rem; margin: 1.5rem 0 0; color: var(--ink-700); font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.12rem, 2vw, 1.4rem); line-height: 1.55; }
.game-how { display: flex; max-width: 36rem; margin-top: 2rem; align-items: center; gap: 1rem; text-align: left; }
.game-how > span { display: grid; width: 2.7rem; height: 2.7rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--amber-500); border-radius: 50%; color: var(--amber-600); font-weight: 800; }
.game-how p { margin: 0; color: var(--ink-700); font-size: .9rem; line-height: 1.55; }
.game-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.game-shell { padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid rgba(13, 74, 82, .18); border-radius: var(--radius-lg); background: rgba(255, 253, 248, .82); box-shadow: var(--shadow-lg); }
.game-room { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: clamp(2.25rem, 5vw, 4rem); padding: clamp(1.1rem, 3vw, 1.8rem); align-items: center; gap: 1rem 2rem; border: 1px solid rgba(13, 74, 82, .18); border-radius: var(--radius-md); background: rgba(232, 242, 238, .58); }
.game-room-copy h2 { margin: 0; color: var(--teal-950); font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; }
.game-room-copy > p:last-child { max-width: 41rem; margin: .65rem 0 0; color: var(--ink-700); font-size: .9rem; line-height: 1.55; }
.game-room-actions { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; }
.game-room-live { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.game-room-live > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .2rem .55rem; }
.game-room-live p { grid-column: 2; margin: 0; color: var(--ink-700); font-size: .78rem; line-height: 1.4; }
.connection-dot { width: .72rem; height: .72rem; border-radius: 50%; background: var(--amber-500); box-shadow: 0 0 0 .25rem rgba(198, 118, 38, .13); }
.connection-dot[data-state='connected'] { background: var(--teal-700); box-shadow: 0 0 0 .25rem rgba(13, 74, 82, .12); }
.connection-dot[data-state='together'] { background: #36744b; box-shadow: 0 0 0 .25rem rgba(54, 116, 75, .14); }
.connection-dot[data-state='error'] { background: #a23d33; box-shadow: 0 0 0 .25rem rgba(162, 61, 51, .13); }
.game-room-privacy { grid-column: 1 / -1; margin: 0; padding-top: .85rem; border-top: 1px solid rgba(13, 74, 82, .13); color: var(--ink-700); font-size: .75rem; line-height: 1.45; }
[hidden] { display: none !important; }
.game-board-heading { display: flex; margin-bottom: 2rem; align-items: end; justify-content: space-between; gap: 1.5rem; }
.game-board-heading h2 { font-size: clamp(2.5rem, 5vw, 4.75rem); }
.game-board-tools { display: grid; justify-items: end; gap: .6rem; }
.game-board-tools p { margin: 0; color: var(--ink-700); font-size: .82rem; font-variant-numeric: tabular-nums; }
.game-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.65rem, 1.5vw, 1.15rem); }
.category { min-width: 0; }
.category-title { min-height: 2.8rem; margin: 0 0 .75rem; color: var(--teal-950); font-family: 'Montserrat', system-ui, sans-serif; font-size: clamp(.68rem, 1vw, .82rem); font-weight: 800; letter-spacing: .09em; line-height: 1.3; text-align: center; text-transform: uppercase; }
.card-stack { display: grid; gap: clamp(.55rem, 1vw, .8rem); }
.question-card { position: relative; min-width: 0; min-height: max(clamp(9rem, 14vw, 11.5rem), 15em); padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-900); cursor: pointer; perspective: 62rem; text-align: left; }
.card-inner { position: absolute; inset: 0; display: grid; transform-style: preserve-3d; transition: transform 520ms cubic-bezier(.2, .75, .25, 1); }
.question-card.is-revealed .card-inner { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: var(--radius-md); backface-visibility: hidden; }
.card-back { align-items: center; justify-content: center; border: 1px solid rgba(96, 39, 10, .2); background: repeating-linear-gradient(135deg, transparent 0 1.2rem, rgba(255,255,255,.07) 1.2rem 1.28rem), var(--amber-500); box-shadow: 0 8px 18px rgba(75,42,13,.12); color: var(--cream-100); transition: transform 180ms ease, box-shadow 180ms ease; }
.question-card:hover .card-back { transform: translateY(-.18rem); box-shadow: 0 12px 26px rgba(75,42,13,.18); }
.question-card:active .card-back { transform: translateY(0); }
.card-back::before, .card-back::after { position: absolute; width: 3rem; height: 3rem; border: 1px solid rgba(255,246,233,.6); border-radius: 50% 46% 52% 48%; content: ''; }
.card-back::before { transform: translateX(-.85rem) rotate(-12deg); }
.card-back::after { transform: translateX(.85rem) rotate(14deg); }
.card-number { position: absolute; right: .75rem; bottom: .75rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.card-front { flex-direction: column; padding: clamp(.75rem, 1.35vw, 1.15rem); transform: rotateY(180deg); border: 1px solid rgba(13,74,82,.25); background: var(--white); box-shadow: inset 0 0 0 .25rem rgba(13,74,82,.035); }
.card-front p { margin: 0; color: var(--teal-950); font-family: 'Fraunces', Georgia, serif; font-size: clamp(.85rem, 1.2vw, 1.04rem); line-height: 1.35; }
.card-front small { margin-top: auto; padding-top: .5rem; color: var(--amber-600); font-size: .62rem; font-weight: 800; letter-spacing: .05em; line-height: 1.25; text-transform: uppercase; }
.question-card.is-revealed:hover .card-front { border-color: var(--teal-900); }
.game-board-actions { display: flex; margin-top: 2rem; padding-top: 1.5rem; align-items: center; justify-content: space-between; gap: 2rem; border-top: 1px solid rgba(13,74,82,.16); }
.game-board-actions p { max-width: 38rem; margin: 0; color: var(--ink-700); font-size: .88rem; line-height: 1.55; }
.game-primary, .game-secondary, .game-text-button, .game-dialog-close { min-height: 2.85rem; border-radius: 999px; font-weight: 700; cursor: pointer; }
.game-primary { padding: .75rem 1.3rem; border: 1px solid var(--teal-950); background: var(--teal-950); color: var(--cream-100); }
.game-primary:hover { background: var(--teal-800); }
.game-primary:disabled, .game-secondary:disabled, .question-card:disabled { cursor: wait; opacity: .58; }
.game-secondary { padding: .68rem 1rem; border: 1px solid rgba(13,74,82,.35); background: transparent; color: var(--teal-950); }
.game-secondary:hover { border-color: var(--teal-900); background: rgba(13,74,82,.06); }
.game-text-button, .game-dialog-close { padding-inline: .35rem; border: 0; background: transparent; color: var(--teal-900); text-decoration: underline; text-underline-offset: .22em; }
.game-board-actions .game-text-button { min-height: 2.75rem; margin-top: .25rem; font-size: .76rem; }
.game-dialog { width: min(calc(100% - 2rem), 40rem); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid rgba(13,74,82,.24); border-radius: var(--radius-lg); background: var(--white); color: var(--ink-900); box-shadow: var(--shadow-lg); }
.game-dialog::backdrop { background: rgba(7,55,61,.55); }
.game-dialog-shell { display: grid; padding: clamp(1.5rem, 5vw, 3rem); }
.game-dialog-close { justify-self: end; margin: -.65rem -.35rem .75rem 0; }
.game-dialog h2 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; }
.game-dialog-shell > p:not(.game-eyebrow):not(.game-copy-status) { margin: 1rem 0 1.5rem; color: var(--ink-700); line-height: 1.55; }
.game-dialog label { margin-bottom: .5rem; }
.game-dialog label span { color: var(--ink-700); font-weight: 500; }
.game-dialog textarea { min-height: 7rem; background: white; }
.game-copy-status { min-height: 1.5rem; margin: .45rem 0 0; color: var(--teal-900); font-size: .8rem; }
.game-dialog-actions { display: flex; margin-top: 1rem; justify-content: flex-end; gap: .75rem; }
.game-toast { position: fixed; z-index: 80; right: 1rem; bottom: 1rem; max-width: min(24rem, calc(100% - 2rem)); padding: .75rem 1rem; transform: translateY(150%); border-radius: var(--radius-sm); background: var(--teal-950); color: var(--cream-100); box-shadow: var(--shadow-lg); opacity: 0; transition: transform 200ms ease, opacity 200ms ease; }
.game-toast.is-visible { transform: translateY(0); opacity: 1; }
@media (max-width: 56rem) { .game-room { grid-template-columns: 1fr; } .game-room-actions { justify-content: flex-start; } .game-room-live { align-items: flex-start; flex-direction: column; } .game-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem; } .category-title { min-height: auto; } }
@media (max-width: 38rem) { .game-intro { padding-top: 3.5rem; } .game-room-actions { align-items: stretch; flex-direction: column; } .game-room-actions .game-primary, .game-room-actions .game-secondary { width: 100%; } .game-board-heading, .game-board-actions { align-items: stretch; flex-direction: column; } .game-board-tools { grid-template-columns: 1fr auto; align-items: center; justify-items: start; } .game-board-tools .game-secondary { justify-self: end; } .game-board-actions .game-primary { width: 100%; } .game-dialog-actions { align-items: stretch; flex-direction: column-reverse; } }
@media (max-width: 30rem) {
  .still-curious-page .header-inner { gap: .5rem; }
  .still-curious-page .brand-lockup { min-width: 0; }
  .still-curious-page .brand-lockup span { font-size: clamp(.65rem, 5vw, 1.1rem); }
  .still-curious-page .brand-lockup small { font-size: .38rem; letter-spacing: .06em; white-space: normal; }
  .still-curious-page .nav-toggle { min-width: 2rem; min-height: 2rem; flex: 0 0 auto; }
  .still-curious-page .nav-toggle-lines, .still-curious-page .nav-toggle-lines::before, .still-curious-page .nav-toggle-lines::after { width: 1rem; }
  .game-intro h1 { font-size: clamp(2rem, 14vw, 4rem); }
  .game-room, .game-board-heading, .game-board-tools, .game-board-actions { min-width: 0; }
  .game-room p, .game-board-heading h2, .game-board-actions p { overflow-wrap: anywhere; }
  .game-board-heading h2 { font-size: clamp(1.5rem, 10vw, 2.5rem); }
  .game-board-tools { grid-template-columns: 1fr; justify-items: stretch; }
  .game-board-tools .game-secondary { width: 100%; justify-self: stretch; }
  .game-board { grid-template-columns: 1fr; }
  .question-card { min-height: 17em; }
  .card-front p { overflow-wrap: anywhere; }
  .still-curious-page .footer-inner, .still-curious-page .footer-inner > * { min-width: 0; max-width: 100%; }
  .still-curious-page .footer-brand, .still-curious-page .footer-tagline, .still-curious-page .footer-inner p, .still-curious-page .footer-inner a, .still-curious-page .footer-meta { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .card-inner, .card-back, .game-toast { transition-duration: .01ms; } .question-card:hover .card-back { transform: none; } }
@media (forced-colors: active) { .card-back, .card-front, .game-shell { border: 2px solid CanvasText; } .card-back::before, .card-back::after { border-color: CanvasText; } }