/* Permanent 82px reserve: 12px gap + 12px label + 4px gap + 50px ad + 4px bottom.
   It never changes with consent, no-fill, a blocked script, orientation or fullscreen. */
:root {
  --ad-reserve: calc(82px + env(safe-area-inset-bottom, 0px));
  --support-height: var(--ad-reserve);
  --play-height: calc(100dvh - var(--ad-reserve));
}
body { display: grid; grid-template-rows: minmax(0, 1fr) var(--ad-reserve); height: 100dvh; padding-bottom: 0; overflow: hidden; }
#app { grid-column: 1; grid-row: 1; height: var(--play-height); min-height: 0; overflow: auto; overflow-x: hidden; }
#advertising-slot {
  grid-column: 1; grid-row: 2; position: relative; height: var(--ad-reserve); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 0 calc(4px + env(safe-area-inset-bottom, 0px));
  background: transparent; border: 0; color: #dec29f; pointer-events: none; z-index: 90;
}
.ad-label { flex: 0 0 12px; font: 400 12px/12px var(--sans); letter-spacing: .04em; }
.ad-frame { flex: 0 0 50px; width: 320px; height: 50px; max-width: 100%; pointer-events: auto; }
#babel-ad-banner { vertical-align: top; }
/* A 320px creative cannot fit below 320 CSS pixels; never crop or shrink an ad. */
@media (max-width: 319px) { .ad-frame { visibility: hidden; pointer-events: none; } }
.menu-policy { text-align: center; }
/* The home illustration covers the whole screen, including the advertising area. */
#app[data-screen="home"] { grid-row: 1 / 3; height: 100dvh; overflow: hidden; }
.home { height: 100dvh; min-height: 0; padding-bottom: var(--ad-reserve); box-sizing: border-box; }
.home-art, .home::before { height: 100%; }
.home-main, .home-content { min-height: 0; }
.home-foot { padding-bottom: .45rem; flex-shrink: 0; }
.shell, .boot { min-height: var(--play-height); }
.toast { bottom: calc(var(--ad-reserve) + 10px); }
@media (min-width: 601px) and (min-height: 541px) and (max-height: 820px) {
  .workbench { padding-block: .5rem; }
  .scene { min-height: min(490px, calc(var(--play-height) - 120px)); }
  .panel { padding: 1.1rem 1.35rem; }
  .panel h1 { font-size: 2.1rem; margin-block: .35rem .6rem; }
  .panel > .seal { width: 54px; height: 54px; margin-bottom: .7rem; }
  .pass-panel .player-name { font-size: 2.6rem; margin-block: .6rem; }
  .progress-track, .player-strip { margin-bottom: .75rem; }
  .question-theme { margin-block: .75rem; }
  .answer-btn { min-height: 64px; padding-block: .65rem; }
  .actions { margin-top: .85rem; }
  .result-stats { margin-block: .75rem; }
  .winner-title { font-size: 2.2rem !important; }
}
@media (max-width: 600px) {
  .home { height: 100dvh; }
  .home-actions { padding-top: 8px; }
}
/* Preserve the existing compact game layouts. */
@media (max-width: 600px) and (max-height: 820px) {
  .panel { padding: .85rem 1rem; }
  .panel h1 { font-size: 1.85rem; margin-block: .35rem .6rem; }
  .panel .subtext { font-size: .875rem; line-height: 1.4; }
  .panel-footer { margin-top: .4rem; font-size: .75rem; }
  .pass-panel { padding-block: 1rem; }
  .pass-panel .seal-large { width: 52px; height: 52px; margin-bottom: .6rem; }
  .progress-track { margin-bottom: .65rem; }
  .player-strip { margin-bottom: .55rem; }
  .actions { margin-top: .75rem; gap: .6rem; }
  .question-theme { margin-block: .6rem .8rem; }
  .answer-list { gap: .65rem; }
  .answer-btn { min-height: 60px; padding-block: .6rem; }
  .question-instruction { margin-top: .6rem; font-size: .8125rem; }
  .result-stats { margin-block: .65rem; }
  .stat { padding-block: .5rem; }
  #app[data-phase="round-result"] .panel > .seal, .winner-panel > .seal { display: none; }
  #app[data-screen="setup"] .panel > .subtext { font-size: .8125rem; }
  #app[data-screen="setup"] .setup-count { margin-block: .4rem; padding-block: .3rem; }
  #app[data-screen="setup"] .name-field input { min-height: 40px; padding-block: 0; }
  .winner-title { font-size: 1.9rem !important; }
  .history { margin-top: .4rem; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .home .header { min-height: 56px; padding-block: .35rem; }
  .home h1 { font-size: clamp(3.5rem, 17vw, 4.4rem); }
  .home-content { padding-top: 0; }
  .home-content .eyebrow { font-size: .625rem; margin-bottom: .3rem; }
  .home-divider { margin-block: .3rem; }
  .home-description { font-size: .875rem; padding: .35rem .65rem; line-height: 1.4; }
  .home-actions { gap: .5rem; }
  .home-actions .btn { min-height: 44px; padding-block: .55rem; }
  .home-meta { margin-top: .4rem; }
  .home-foot { padding-top: .15rem; padding-bottom: .15rem; }
  .shell .header { min-height: 54px; padding-block: .3rem; }
  .workbench { padding: .1rem .75rem .4rem; }
  .panel { padding: .65rem .8rem; }
  #app[data-screen="setup"] .panel > .subtext { display: none; }
  .pass-panel .seal-large { display: none; }
  .pass-panel .player-name { font-size: 2.1rem; margin-block: .65rem; }
  #app[data-phase="round-result"] .panel h1, .winner-title { font-size: 1.55rem !important; }
  .stat strong { font-size: 1.85rem; }
  .result-stats { margin-block: .4rem; }
  .defect-marks { margin-block: .5rem; }
  #app[data-phase="round-result"] .notice { padding: .55rem; font-size: .8125rem; }
}
/* Short landscape screens: share horizontal space instead of stacking controls. */
@media (orientation: landscape) and (max-height: 540px) {
  :root { --gutter: 1rem; }
  .header, .shell .header, .home .header { min-height: 48px; padding-block: .15rem; }
  .header .wordmark { font-size: 1.25rem; }
  .header-tools .icon-button { width: 40px; height: 40px; }
  .brand { max-height: 38px; width: auto; }
  .brand-link-caption { display: none; }
  .home-main { padding: 0 1rem; align-items: center; }
  .home-content { width: 100%; padding: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .25rem 1.5rem; }
  .home-content .eyebrow { grid-column: 1; margin: 0; font-size: .625rem; }
  .home h1 { grid-column: 1; font-size: 3.5rem; }
  .home-divider { display: none; }
  .home-description { grid-column: 1; padding: .3rem .5rem; font-size: .8125rem; line-height: 1.3; }
  .home-actions { grid-column: 2; grid-row: 1 / 4; margin: 0; padding: 0; width: 100%; gap: .5rem; }
  .home-actions .btn { min-height: 44px; padding: .5rem; font-size: .875rem; }
  .home-meta { grid-column: 2; margin: 0; font-size: .75rem; }
  .home-foot { padding-block: 0; font-size: .75rem; }
  .workbench { display: block; margin: 0 auto; padding: .1rem 1rem .5rem; max-width: 940px; }
  .scene { display: none; }
  .step-label { margin-bottom: .25rem; font-size: .75rem; }
  .panel { padding: .6rem .8rem; }
  .panel h1 { font-size: 1.55rem; margin-block: .2rem .35rem; }
  .panel h1 br { display: none; }
  .panel .subtext { font-size: .8125rem; line-height: 1.35; }
  .panel > .seal, .pass-panel .seal-large { display: none; }
  .panel-footer { margin-top: .25rem; font-size: .75rem; }
  .actions { margin-top: .5rem; gap: .5rem; }
  .btn { min-height: 44px; padding: .5rem .7rem; }
  .pass-panel .progress-track { margin-bottom: .35rem; }
  .pass-panel .player-name { font-size: 1.85rem; margin-block: .25rem; }
  .player-strip { margin-bottom: .25rem; }
  .question-theme { margin-block: .2rem .35rem; }
  .question-theme h1 { font-size: 1.55rem; margin: .15rem 0; }
  .question-theme.strange h1 { font-size: 1.3rem; }
  .answer-list { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .answer-btn { min-height: 48px; padding: .45rem; font-size: 1.3rem; }
  .question-instruction { margin-top: .3rem; font-size: .75rem; }
  .cipher-help { margin-top: .4rem; padding-top: .25rem; }
  .cipher-help li { min-height: 28px; }
  .cipher-help > p { display: none; }
  .question-panel { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .9rem; align-items: center; }
  .question-panel .player-strip { grid-column: 1 / -1; }
  .question-panel .answer-list { grid-column: 2; grid-row: 2 / 5; grid-template-columns: 1fr; }
  .question-panel .cipher-help { grid-column: 1 / -1; }
  .question-panel .question-instruction { grid-column: 1 / -1; }
  .vote-list { grid-template-columns: repeat(3, 1fr); margin-block: .4rem; gap: .4rem; }
  .vote-player { min-height: 44px; padding: .3rem .5rem; }
  .vote-player .avatar { display: none; }
  .winner-title { font-size: 1.6rem !important; }
  .winner-panel .actions { grid-template-columns: 1fr 1fr; }
  .winner-roster { margin-block: .2rem; }
  .history { margin-top: .2rem; }
  .history summary { min-height: 32px; padding: .25rem; }
}
/* One compact title, scaled to phone widths without a forced line break. */
#app[data-screen="setup"] .panel .setup-title {
  font-size: clamp(1rem, 6vw, 2.1rem);
  white-space: nowrap;
  margin: .2rem 0 .65rem;
}