:root {
  --ui-space-1: .5rem;
  --ui-space-2: .75rem;
  --ui-space-3: 1rem;
  --ui-space-4: 1.5rem;
  --ui-space-5: 2rem;
  --ui-radius-sm: .75rem;
  --ui-radius-md: 1.125rem;
  --ui-radius-lg: 1.5rem;
  --ui-content: 75rem;
  --ui-reading: 70ch;
  --ui-text-sm: clamp(.8125rem,.78rem + .16vw,.9375rem);
  --ui-text-body: clamp(1rem,.96rem + .2vw,1.125rem);
  --ui-text-title: clamp(2rem,1.45rem + 2.6vw,4.75rem);
}

html { width: 100%; max-width: 100%; overflow-x: clip; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { width: 100%; max-width: 100%; overflow-x: clip !important; }
img, picture, video, svg, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { max-width: 100%; font: inherit; }
button, [role="button"], input:not([type="hidden"]), select, textarea { min-height: 44px; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:where(a,button,input,select,textarea):focus-visible { outline: 3px solid #ffd447; outline-offset: 3px; }
:where(p,li) { overflow-wrap: break-word; }
:where(h1,h2,h3) { text-wrap: balance; overflow-wrap: break-word; }

.site-header {
  min-height: 64px;
  padding-inline: max(clamp(1rem,4vw,2.125rem),env(safe-area-inset-left));
}
.site-brand,.site-back { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer { padding-inline: max(clamp(1rem,4vw,2.125rem),env(safe-area-inset-left)); }
.site-footer-nav { gap: var(--ui-space-1) var(--ui-space-3); }
.site-footer-nav a { min-height: 44px; display: inline-flex; align-items: center; }

.game-info,.related-games {
  width: min(var(--ui-reading),calc(100% - clamp(2rem,6vw,4rem)));
  max-width: 100%;
}
.game-info { margin-block: clamp(1.25rem,4vw,2.5rem); padding: clamp(1.25rem,4vw,2.5rem); }
.game-info h1,.game-info h2 { font-size: clamp(1.75rem,1.4rem + 1.5vw,2.5rem); text-wrap: balance; }
.game-info p,.game-info li,.related-games p { max-width: var(--ui-reading); font-size: var(--ui-text-body); }
.game-info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--ui-space-3) clamp(1.5rem,4vw,3rem); }
.related-games { padding: clamp(1.125rem,3vw,1.75rem); }
.related-games a { display: inline-flex; min-height: 44px; align-items: center; }

.policy-main { width: min(var(--ui-reading),calc(100% - 2rem)); padding: clamp(2.5rem,7vw,4.5rem) 0; }
.policy-main h1 { font-size: var(--ui-text-title); line-height: 1.02; }
.policy-main h2 { font-size: clamp(1.375rem,1.2rem + .7vw,1.75rem); line-height: 1.2; text-wrap: balance; }
.policy-main p,.policy-main li { max-width: var(--ui-reading); font-size: var(--ui-text-body); }
.policy-header a { min-height: 44px; display: inline-flex; align-items: center; }

/* Homepage: 1 / 2 / 4-column responsive grid. */
.hero,.library { width: min(100%,var(--ui-content)); }
.hero { padding-inline: clamp(1rem,4vw,2.125rem); }
.hero-copy { max-width: 68ch; }
.hero-copy h1 { font-size: clamp(2rem,1.55rem + 2.25vw,4rem); line-height: 1.06; text-wrap: balance; }
.intro { max-width: 65ch; font-size: var(--ui-text-body); }
.brand,.top-link,.btn { min-height: 44px; }
.game-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(1rem,2vw,1.5rem); }
.game-card { min-width: 0; }
.card-copy { min-height: 0; padding: clamp(1.125rem,2.2vw,1.625rem); }
.card-copy h3 { font-size: clamp(1.5rem,1.2rem + 1vw,2rem); line-height: 1.08; }
.card-copy p:not(.category) { max-width: 60ch; }

/* Game surfaces should shrink inside their grid track instead of widening it. */
.site-game-stage,.game-shell,.game-shell canvas,#game-shell,#game,.app,.screen,.question-card,.setup-card { min-width: 0; max-width: 100%; }
.site-game-stage { overflow: clip; }

@media (min-width:640px) and (max-width:1024px) {
  .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .game-info,.related-games { width: min(var(--ui-reading),calc(100% - 3rem)); }
}

@media (max-width:639px) {
  :root { --ui-text-body: 1rem; }
  .site-header { min-height: 58px; gap: .625rem; padding-inline: 1rem; }
  .site-brand { font-size: 1rem; }
  .site-back { justify-content: flex-end; text-align: right; font-size: .8125rem; }
  .site-footer { gap: .5rem; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); font-size: .75rem; overflow-x: auto; }
  .site-footer > span { width: auto; white-space: nowrap; }
  /* Allow the footer links to wrap. Keeping them on one line made the nav about
     713px wide on a 390px screen, which forced the whole page to scroll
     sideways on every policy-shell page. */
  .site-footer-nav { width: auto; justify-content: center; flex-wrap: wrap; gap: 0 .5rem; }
  .site-footer-nav a { padding-inline: .35rem; white-space: normal; }

  .hero { padding: 1rem 1rem 2rem; }
  .hero-top { flex-direction: row; align-items: center; flex-wrap: nowrap; }
  .hero-top .top-link { display:none; }
  .brand { min-width: 0; font-size: clamp(1rem,4.7vw,1.25rem); }
  .brand span:last-child { overflow-wrap: anywhere; }
  .top-link { flex: 0 0 auto; padding-inline: .75rem; font-size: .8125rem; }
  .hero-copy { gap: .75rem; }
  .hero-copy h1 { font-size: clamp(2rem,9vw,3rem); }
  .home-screen .hero-copy h1 { font-size:clamp(2.5rem,12vw,3.125rem) !important; line-height:1 !important; }
  .home-screen .hero-copy h1 span { display:block; }
  .hero-actions,.hero-actions .btn { width: 100%; }
  .library { padding: 2rem 1rem 3rem; }
  .section-heading { align-items: flex-start; }
  .game-grid { grid-template-columns: minmax(0,1fr); gap: 1rem; }
  .art { height: clamp(10.5rem,52vw,13.5rem); }
  .game-card:hover { transform: none; }

  .game-info,.related-games { width: calc(100% - 2rem); border-radius: var(--ui-radius-md); }
  .game-info { padding: 1.25rem; }
  .game-info-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .game-info h3 { margin-top: 1.5rem; }
  .related-games { margin-bottom: 1.25rem; padding: 1.125rem; }

  .policy-header { min-height: 58px; gap: .75rem; padding-inline: 1rem; }
  .policy-main { width: calc(100% - 2rem); padding-block: 2.5rem; }
  .policy-main h1 { font-size: clamp(2.25rem,12vw,3.5rem); }
  .policy-main h2 { margin-top: 2rem; }

  /* Common game HUDs and option grids. */
  .answers { grid-template-columns: minmax(0,1fr) !important; }
  .setup-card { grid-template-columns: minmax(0,1fr) !important; }
  .question-box { align-items: stretch; flex-direction: column; }
  #question { max-width: 100% !important; }
  .hint { width: 100%; }
  .controls { gap: .75rem; flex-wrap: wrap; }
  .controls .btn { flex: 1 1 8rem; min-width: 0; }
  .level-grid { grid-template-columns: minmax(0,1fr) !important; }
  .level-card { min-height: 0 !important; }
  .rivals { grid-template-columns: minmax(0,1fr) 2.25rem minmax(0,1fr) !important; }
  .match-top,.hud { min-width: 0; }
  .mini-score,.hud-box { min-width: 0; padding-inline: .5rem !important; }
  .turn-banner { flex-wrap: wrap; }
  .turn-banner small { width: 100%; margin-left: 0 !important; padding-right: 0 !important; }
}

@media (max-width:380px) {
  .site-back { max-width: 45%; }
  .hero-top { align-items: flex-start; }
  .brand-mark { flex: 0 0 2.25rem; }
  .game-count { font-size: .8125rem; }
  .rivals { grid-template-columns: minmax(0,1fr) 1.75rem minmax(0,1fr) !important; }
}

@media (max-width:420px) {
  .hero-top .top-link { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.consent-panel { min-width:0; padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
.consent-card { box-sizing:border-box; width:min(720px,calc(100vw - 36px)); min-width:0; max-height:calc(100dvh - 36px); overflow:auto; overscroll-behavior:contain; justify-self:center; }
.consent-card p,.consent-preferences label { overflow-wrap:anywhere; }
.consent-card > a { min-height:44px; display:inline-flex; align-items:center; }
@media (max-width:520px) {
  .consent-panel { padding:10px; }
  .consent-card { width:calc(100vw - 20px); max-height:calc(100dvh - 20px); }
  .consent-preferences { display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem; }
  .consent-preferences label { min-height:44px; display:flex; align-items:center; gap:.625rem; }
  .consent-preferences input { flex:0 0 1.25rem; width:1.25rem; min-height:1.25rem; height:1.25rem; }
}