/* Shared illustrated lettering and viewport layout for every game screen. */
html, body { width:100%; min-width:0; overflow:hidden; }
.app-shell { padding-left:max(clamp(10px,3vw,36px),env(safe-area-inset-left,0px)); padding-right:max(clamp(10px,3vw,36px),env(safe-area-inset-right,0px)); min-width:0; }
#app { display:flex; align-items:center; justify-content:center; padding:12px; overflow:hidden; }
#app > section { width:calc(100% - 16px); margin:0; flex:none; transform-origin:center; }
.game-logo { width:100%; margin:0; }
.game-logo img { object-fit:contain; }
.impact-art { width:100%; max-width:100%; height:100%; }
.card-bomb { right:10px; bottom:-14px; width:86px; max-width:24%; }
.challenge-card { margin-bottom:8px; }
.pass-copy { width:100%; margin-top:8px; }
.pass-copy h2 { width:100%; font-style:normal; --art-letter-size:30px; }
.pass-copy p { margin-top:8px; }
.display-title { width:100%; max-width:430px; font:800 1rem/1 Outfit,system-ui,sans-serif; text-shadow:none; letter-spacing:normal; -webkit-text-stroke:0; --art-letter-size:72px; }
.victory-screen .display-title { font-size:1rem; text-shadow:none; -webkit-text-stroke:0; transform:rotate(-3deg); --art-letter-size:64px; }
.lettering { display:block; width:100%; min-width:0; container-type:inline-size; text-shadow:none; -webkit-text-stroke:0; letter-spacing:normal; }
.lettering-line { display:flex; justify-content:center; align-items:center; padding:.14em .05em .04em; font-size:min(var(--art-letter-size,64px),calc(100cqw / var(--lettering-units))); line-height:1; white-space:nowrap; }
.lettering-character { display:flex; position:relative; flex:none; height:1em; }
.lettering-character:not(:first-child) { margin-left:-.065em; }
.lettering-character .glyph-art { height:1em; }
.lettering-space { display:block; width:.30em; flex:none; }
.lettering-symbol { display:block; flex:none; width:.38em; color:var(--yellow); -webkit-text-stroke:.035em var(--blue); paint-order:stroke fill; text-shadow:.02em .025em 0 var(--red); font:900 .92em/1 Outfit,system-ui,sans-serif; }
.lettering-accent { position:absolute; z-index:2; top:-.23em; left:32%; font:900 .5em/1 Outfit,system-ui,sans-serif; color:var(--blue); -webkit-text-stroke:.025em var(--paper); paint-order:stroke fill; }
.boom-title { font-size:clamp(88px,24cqw,138px); }
.boom-glyphs { padding:0 .055em; }
.boom-letter { margin:0 -.082em; }
.boom-bang { margin-left:.015em; }
.victory-sticker { font:800 16px/1.15 Outfit,system-ui,sans-serif; letter-spacing:-.025em; }
.pause-screen { gap:16px; }
.pause-heading { display:flex; width:100%; align-items:center; gap:14px; }
.pause-heading .pause-art { width:88px; flex:none; }
.pause-heading .display-title { min-width:0; flex:1; }

/* Dialogs use short pages and a shared fit layer, never a nested scroll area. */
dialog { width:min(500px,calc(100% - 28px)); padding:0; max-height:none; overflow:hidden; }
.dialog-content { width:100%; padding:22px; transform-origin:top left; }
.dialog-top { gap:12px; margin-bottom:16px; }
.dialog-top h2 { min-width:0; flex:1; font:800 1rem/1 Outfit,system-ui,sans-serif; --art-letter-size:36px; }
.dialog-top h2 .lettering-line { justify-content:flex-start; }
.dialog-top .icon-button { flex:none; }
.dialog-copy { font-size:16px; }
.dialog-actions { gap:12px; margin-top:18px; }
.menu-list { gap:10px; }
.menu-row { min-height:48px; padding:12px; }
.menu-list .menu-separator { margin:3px 0; }
.reader-page { min-height:150px; }
.reader-progress { color:var(--muted); font-size:14px; font-weight:700; margin-bottom:12px; }
.reader-page h3 { font-size:21px; line-height:1.2; margin:0 0 12px; letter-spacing:-.025em; }
.reader-page > p:not(.reader-progress) { font-size:16px; line-height:1.5; }
.reader-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.reader-actions .button { min-height:48px; padding:10px; font-size:15px; }
.settings-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
.settings-tabs button { padding:10px 8px; min-height:44px; border:2px solid var(--blue); border-radius:9px; background:transparent; font-size:15px; font-weight:700; }
.settings-tabs button[aria-pressed="true"] { background:var(--blue); color:var(--paper); }
[data-settings-panel][hidden] { display:none; }
.settings-intro { font-size:16px; margin-bottom:14px; }
.settings-help { font-size:14px; margin-top:10px; }
.settings-error { font-size:14px; }
.toggle-row { font-size:16px; }
.ad-privacy-copy { font-size:14px; line-height:1.45; }
.ad-choice { font-size:14px; }

@container(max-height:570px) {
  .home-screen { gap:10px; }
  .game-logo img { max-height:145px; }
  .home-play { gap:10px; }
  .round-screen { gap:12px; }
  .challenge-letter { font-size:clamp(96px,27cqh,160px); }
  .challenge-card { padding:16px 14px 12px; }
  .challenge-theme { font-size:26px; }
  .card-bomb { width:74px; right:10px; }
  .pass-copy h2 { --art-letter-size:27px; }
  .pass-copy p { font-size:15px; }
  .result-screen { gap:12px; }
  .boom-stage { height:130px; }
  .victory-stage { height:138px; }
  .result-card { padding:15px; }
  .result-actions { gap:10px; }
  .result-actions .button { min-height:48px; padding:10px 12px; }
}
@container(max-height:450px) {
  .game-logo img { max-height:106px; }
  .home-screen { gap:9px; }
  .home-play { gap:8px; }
  .home-screen .intro-card > p, .home-screen .rule-divider { display:none; }
  .home-screen .intro-card { padding:12px 14px; }
  .home-screen .player-meta { font-size:13px; }
  .home-screen .play-button { min-height:48px; font-size:20px; }
  .round-screen { gap:10px; }
  .challenge-theme { font-size:23px; }
  .challenge-letter { font-size:104px; }
  .challenge-rule { margin-top:7px; font-size:14px; }
  .card-bomb { width:64px; right:10px; }
  .pass-copy h2 .lettering-line:first-child { display:none; }
  .pass-copy { margin-top:4px; }
  .pass-copy p { font-size:14px; margin-top:6px; }
  .boom-stage { height:104px; }
  .result-card h2 { font-size:20px; margin-bottom:6px; }
  .result-card > p { font-size:16px; }
  .result-card .small-copy { font-size:14px !important; }
  .victory-screen .result-card .small-copy { display:none; }
  .victory-stage { height:112px; }
  .victory-screen .display-title { --art-letter-size:47px; }
  .pause-screen { gap:12px; }
  .pause-heading .pause-art { width:70px; }
  .pause-screen > p { font-size:16px; }
  .countdown-screen { gap:12px; }
  .countdown-stage { height:145px; }
  .countdown-number { font-size:132px; }
}
@container(max-height:345px) {
  .game-logo img { max-height:84px; }
  .home-screen { gap:6px; }
  .home-play { gap:6px; }
  .edition-label { font-size:11px; padding:4px 8px; }
  .player-meta span { padding:4px 8px; }
  .home-screen .intro-card { padding:9px 12px; }
  .home-screen .example-letter { height:40px; width:37px; }
  .home-screen .example strong { font-size:19px; }
  .home-screen .how-to { padding:6px; }
  .challenge-letter { font-size:88px; }
  .challenge-card { padding:12px; }
  .result-card { padding:12px; }
  .countdown-stage { height:115px; }
  .countdown-number { font-size:105px; }
}
@media(orientation:landscape) and (max-height:600px) {
  :root { --game-header:calc(48px + env(safe-area-inset-top,0px)); }
  #app { padding:6px 12px; }
  .home-screen { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; max-width:900px; }
  .home-screen .game-logo img { max-height:150px; }
  .home-screen .home-play { gap:6px; }
  .home-screen .player-meta { display:none; }
  .home-screen .intro-card > p, .home-screen .rule-divider { display:none; }
  .round-screen { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-width:870px; gap:8px 32px; }
  .round-bar { grid-column:1/-1; }
  .challenge-card { grid-column:1; grid-row:2/4; margin-bottom:0; padding:12px; }
  .challenge-letter { font-size:85px; padding:4px 0; }
  .challenge-theme { font-size:22px; }
  .pass-copy { grid-column:2; align-self:end; }
  .pass-copy h2 .lettering-line:first-child { display:none; }
  .round-screen .pause-button { grid-column:2; align-self:start; justify-self:center; }
  .countdown-screen { display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; max-width:830px; }
  .countdown-screen > .eyebrow { grid-column:1; justify-self:center; }
  .countdown-stage { grid-column:1; grid-row:2/5; height:140px; }
  .countdown-copy { grid-column:2; grid-row:1/3; align-self:end; font-size:19px; }
  .countdown-hint { grid-column:2; grid-row:3; font-size:14px; }
  .countdown-screen .pause-button { grid-column:2; justify-self:center; }
  .result-screen { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); max-width:920px; gap:8px 30px; }
  .result-screen > .round-label { grid-column:1; grid-row:1; justify-self:center; }
  .boom-stage { grid-column:1; grid-row:2; height:106px; }
  .boom-title { font-size:90px; }
  .result-card { grid-column:2; grid-row:1/3; padding:12px; }
  .result-card h2 { font-size:19px; }
  .result-card > p { font-size:15px; }
  .result-card .small-copy { font-size:13px !important; }
  .result-actions { grid-column:2; grid-row:3; gap:8px; margin:0; }
  .result-actions .button { min-height:44px; padding:8px; font-size:15px; }
  .result-screen > .small-copy { grid-column:1; grid-row:3; }
  .victory-sticker { grid-column:1; grid-row:1; justify-self:center; font-size:14px; }
  .victory-stage { grid-column:1; grid-row:2/4; height:130px; }
  .victory-screen .display-title { --art-letter-size:48px; }
  .pause-screen { display:grid; grid-template-columns:1fr 1.25fr; gap:8px 24px; max-width:820px; }
  .pause-heading { grid-column:1; grid-row:1/3; flex-direction:column; gap:4px; }
  .pause-heading .display-title { width:100%; --art-letter-size:43px; }
  .pause-heading .pause-art { width:65px; }
  .pause-screen > p { grid-column:2; grid-row:1; align-self:center; font-size:15px; }
  .pause-screen > .small-copy { grid-column:1; grid-row:3/5; font-size:13px !important; }
  .pause-screen > .button { grid-column:2; grid-row:2; margin:0; min-height:44px; font-size:15px; }
  .pause-screen > .text-button { grid-column:2; grid-row:3; }
  dialog { width:min(700px,calc(100% - 28px)); }
  .dialog-content { padding:14px 20px; }
  .dialog-top { margin-bottom:10px; }
  .dialog-top h2 { --art-letter-size:28px; }
  .dialog-top .icon-button { width:38px; height:38px; min-width:38px; }
  .reader-page { min-height:0; }
  .reader-progress { margin-bottom:5px; }
  .reader-page h3 { margin-bottom:6px; font-size:19px; }
  .reader-page > p:not(.reader-progress) { font-size:15px; line-height:1.35; }
  .reader-actions { margin-top:10px; }
  .reader-actions .button { min-height:40px; padding:8px; }
  .menu-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .menu-list .menu-separator { display:none; }
  .menu-row { min-height:44px; padding:10px; font-size:15px; }
  .settings-tabs { margin-bottom:10px; }
  .settings-tabs button { min-height:38px; padding:7px; }
  .timer-settings { display:grid; grid-template-columns:1fr 1fr; gap:4px 22px; }
  .timer-settings legend { display:none; }
  .settings-intro { grid-column:1; grid-row:1/3; font-size:15px; margin:0; align-self:center; }
  .duration-fields { grid-column:2; grid-row:1/4; }
  .duration-fields label { gap:4px; font-size:14px; }
  .duration-entry { padding:5px 9px; }
  .duration-entry input { font-size:22px; }
  .timer-settings .settings-help { grid-column:1; margin:2px 0; font-size:13px; }
  .timer-settings .settings-error { grid-column:1/-1; margin-top:4px; }
  [data-settings-panel="effects"] { display:grid; grid-template-columns:1fr 1fr; gap:4px 22px; }
  [data-settings-panel="effects"] .settings-help { grid-column:1/-1; margin:0; }
  .toggle-row { min-height:42px; font-size:15px; }
  .dialog-actions { margin-top:10px; flex-direction:row; }
  .dialog-actions .button { min-height:42px; padding:9px; font-size:15px; }
  .ad-privacy-copy { font-size:14px; margin:8px 0; }
  .ad-choice { margin:8px 0; font-size:13px; }
  .ad-consent-button { min-height:42px; padding:9px; }
}