/* Same fixed, transparent reserve and iframe geometry as the validated barae reference. */
:root { --ad-card-height:105px; --ad-offset:0px; --ad-gap:8px; --ad-reserve:calc(121px + env(safe-area-inset-bottom,0px)); --game-header:calc(78px + env(safe-area-inset-top,0px)); }
html, body { height:100%; min-height:100%; overflow:hidden; }
.app-shell { height:100svh; height:100dvh; min-height:0; padding-top:0; padding-bottom:0; grid-template-rows:var(--game-header) minmax(0,1fr) var(--ad-reserve); }
.topbar { padding-top:env(safe-area-inset-top,0px); min-width:0; }
#app { min-height:0; padding:12px 10px 18px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; align-items:flex-start; container-type:size; scrollbar-width:thin; }
#app > section { margin-block:auto; flex-shrink:0; }
#advertising-slot { position:fixed; inset:auto 0 0; height:var(--ad-reserve); background:transparent; border:0; pointer-events:none; overflow:hidden; z-index:90; }
#toast { bottom:calc(var(--ad-reserve) + 10px); }
dialog { bottom:var(--ad-reserve); max-height:calc(100dvh - var(--ad-reserve) - 24px); overflow-x:hidden; overflow-y:auto; }
.ad-privacy-copy { font-size:13px; line-height:1.5; color:var(--muted); margin:12px 0; }
.ad-privacy-copy a { text-underline-offset:3px; }
.ad-choice { font-size:13px; line-height:1.45; margin:14px 0; }
.ad-consent-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ad-consent-button { background:var(--paper); color:var(--blue); min-height:48px; border-width:2px; }
#ad-invitation { position:fixed; left:20px; right:20px; bottom:calc(8px + env(safe-area-inset-bottom,0px)); max-width:460px; height:105px; margin:auto; display:flex; flex-direction:column; justify-content:center; gap:5px; background:transparent; z-index:95; }
#ad-invitation[hidden] { display:none; }
#ad-invitation p { margin:0; }
#ad-invitation-title { font-size:13px; line-height:16px; font-weight:700; }
.ad-invitation-copy { font-size:11.5px; line-height:14px; }
.ad-invitation-actions { display:grid; grid-template-columns:56px minmax(0,1fr) minmax(0,1fr); gap:10px; }
.ad-invitation-actions .ad-consent-button { min-height:44px; padding:8px; font-size:14px; line-height:18px; box-shadow:2px 2px 0 var(--blue); }
.ad-invitation-actions .text-button { min-height:44px; padding:6px 0; font-size:12px; }
body[data-screen="exploded"] #ad-invitation { color:var(--paper); }
body[data-screen="exploded"] .ad-invitation-actions .ad-consent-button { box-shadow:2px 2px 0 var(--red); }
@media(max-width:860px) { :root { --game-header:calc(67px + env(safe-area-inset-top,0px)); } #app { padding:8px 8px 14px; } }
@media(max-width:600px) { :root { --ad-card-height:75px; --ad-offset:30px; } }

/* Fit the game to the available area, without changing the bottom reserve. */
@container(max-height:680px) {
  .home-screen { gap:12px; }
  .game-logo img { max-height:190px; object-fit:contain; }
  .edition-label { font-size:12px; padding:4px 12px; margin-top:-4px; }
  .home-play { gap:11px; }
  .intro-card { padding:15px 17px; }
  .rule-divider { margin:12px 0 10px; }
  .play-button { min-height:57px; padding:12px 17px; font-size:22px; }
  .home-footnote { margin-top:-8px; font-size:12px; }
  .round-screen { gap:16px; }
  .challenge-card { padding:18px 15px 12px; }
  .challenge-letter { font-size:min(29cqh,190px); padding:7px 0; }
  .pass-copy { margin-top:8px; }
  .pass-copy h2 { font-size:32px; }
  .card-bomb { width:94px; right:-18px; }
  .result-screen { gap:14px; }
  .boom-stage { height:155px; }
  .result-card { padding:18px; }
  .result-card h2 { font-size:22px; }
  .result-card > p { font-size:16px; }
  .result-actions { gap:12px; }
  .result-actions .button { min-height:51px; padding:12px; }
  .countdown-screen { gap:16px; }
  .countdown-stage { height:210px; }
  .countdown-number { font-size:190px; }
}
@container(max-height:530px) {
  .game-logo img { max-height:144px; }
  .home-screen { gap:10px; }
  .home-play { gap:8px; }
  .home-footnote, .example .eyebrow { display:none; }
  .intro-card { padding:12px 14px; }
  .intro-card > p { font-size:14px; line-height:1.4; }
  .example-letter { height:48px; width:44px; }
  .example strong { font-size:21px; }
  .example-answer { font-size:13px; }
  .rule-divider { margin:10px 0 8px; }
  .player-meta { font-size:12px; }
  .how-to { font-size:14px; padding:7px; }
  .round-screen { gap:12px; }
  .challenge-letter { font-size:132px; }
  .challenge-theme { font-size:25px; }
  .pass-copy h2 { font-size:29px; }
  .pass-copy p { font-size:14px; margin-top:7px; }
  .countdown-stage { height:177px; }
  .countdown-number { font-size:161px; }
  .countdown-copy { font-size:20px; }
  .countdown-hint { font-size:14px; }
  .result-screen { gap:10px; }
  .boom-stage { height:123px; }
  .boom-title { font-size:106px; }
  .result-card { padding:14px; }
  .result-card .small-copy { margin-top:8px; }
  .result-actions { margin-top:4px; gap:10px; }
  .victory-stage { height:150px; }
  .victory-screen .display-title { font-size:58px; }
  .pause-screen { gap:14px; }
  .pause-art { width:95px; }
}
@container(max-height:435px) {
  .game-logo img { max-height:112px; }
  .edition-label { font-size:10px; }
  .home-screen { gap:8px; }
  .home-play { gap:7px; }
  .player-meta span { padding:4px 8px; }
  .play-button { min-height:48px; font-size:19px; }
  .challenge-letter { font-size:104px; }
  .challenge-rule { margin-top:8px; font-size:12px; }
  .challenge-card { padding:13px 12px 8px; }
  .challenge-theme { font-size:22px; }
  .card-bomb { width:75px; }
  .pass-copy { margin-top:3px; }
  .pass-copy h2 { font-size:26px; }
  .pass-copy p { font-size:13px; }
  .boom-stage { height:104px; }
  .boom-title { font-size:96px; }
  .result-card h2 { font-size:20px; }
  .result-card > p { font-size:14px; }
  .result-card .small-copy { font-size:12px !important; }
  .result-actions .button { min-height:44px; padding:9px; font-size:15px; }
  .countdown-stage { height:140px; }
  .countdown-number { font-size:127px; }
}
@media(orientation:landscape) and (max-height:550px) {
  :root { --game-header:calc(51px + env(safe-area-inset-top,0px)); }
  .topbar .icon-button { height:38px; width:38px; min-width:38px; }
  .mini-brand img { max-height:45px; }
  .studio img { width:105px; }
  #app { padding-top:5px; padding-bottom:10px; }
  .home-screen { grid-template-columns:1fr 1fr; gap:20px; }
  .game-logo img { max-height:180px; }
  .home-footnote { display:none; }
  .home-play { gap:6px; }
  .intro-card { padding:10px 12px; }
  .player-meta { font-size:11px; }
  .home-screen .play-button { min-height:44px; }
  .round-screen { gap:8px 28px; }
  .challenge-letter { font-size:90px; }
  .result-screen { gap:8px 25px; }
  .boom-title { font-size:98px; }
  .boom-stage { height:103px; }
}