/* Responsive ad reservations and 1.5× practice text. Ads are not loaded here. */
:root { --ad-gap: 150px; }
.home-main { max-width: 1880px; padding-inline: 24px; }
.home-main > .intro,
.home-main > .level-picker,
.home-main > .curriculum-notice,
.home-main > .guide-strip { max-width: 1180px; margin-inline: auto; }
.play-frame { width: 100%; min-width: 0; }
.play-workbench { display: grid; grid-template-columns: minmax(0, 1180px); justify-content: center; align-items: start; gap: var(--ad-gap); }
.play-main { min-width: 0; width: 100%; }
.ad-reservation { margin: 0; min-width: 0; color: #66736d; text-align: center; }
.ad-label { display: none; font-size: 12px; line-height: 1.5; font-weight: 400; margin-bottom: 8px; letter-spacing: .08em; }
.ad-mount { margin-inline: auto; }
.ad-mount:empty { background: transparent; outline: none; }
.ad-header { margin-bottom: var(--ad-gap); }
.ad-header .ad-mount { width: 320px; max-width: 100%; height: 50px; }
.ad-side { display: none; }
.ad-side .ad-mount { width: 120px; height: 600px; }
/* Containers are sized before an ad is requested, so the page does not jump. */
@media (min-width: 800px) {
  .ad-header .ad-mount { width: 728px; height: 90px; }
}
@media (min-width: 1280px) and (pointer: fine) {
  .play-workbench { grid-template-columns: 120px minmax(0, 1180px) 120px; }
  .ad-side { display: block; }
}
@media (min-width: 1440px) and (pointer: fine) {
  .play-workbench { grid-template-columns: 160px minmax(0, 1180px) 160px; }
  .ad-side .ad-mount { width: 160px; }
}
.game-shell {
  --practice-scale: 1.5;
  --prompt-size: 2.375rem;
  --reading-size: 1rem;
  --romaji-size: 1.5625rem;
  --choice-size: 1.25rem;
  --choice-reading-size: .8125rem;
  --question-size: 1.0625rem;
  --answer-size: 1rem;
  --falling-size: 1.375rem;
}
.sentence-stage { --prompt-size: 1.4375rem; --reading-size: .875rem; --romaji-size: 1.1875rem; }
.stage-7 { --prompt-size: 2rem; }
#wordJapanese { font-size: calc(var(--prompt-size) * var(--practice-scale)); line-height: 1.55; max-width: 100%; }
#wordReading { font-size: calc(var(--reading-size) * var(--practice-scale)); line-height: 1.6; max-width: 100%; }
#romajiLine { font-size: calc(var(--romaji-size) * var(--practice-scale)) !important; line-height: 1.6; overflow-wrap: anywhere; word-break: break-all; max-width: 100%; }
#questionText { font-size: calc(var(--question-size) * var(--practice-scale)); line-height: 1.7; }
.answer-choice { font-size: calc(var(--answer-size) * var(--practice-scale)); line-height: 1.6; overflow-wrap: anywhere; }
.balloon-choice strong { font-size: calc(var(--choice-size) * var(--practice-scale)); }
.balloon-choice small { font-size: calc(var(--choice-reading-size) * var(--practice-scale)); overflow-wrap: anywhere; }
.stage-2 #gameTarget { font-size: calc(var(--falling-size) * var(--practice-scale)); }
.word-panel, .mechanic-panel, .question-panel, .balloon-panel { max-width: 100%; min-width: 0; }
.word-japanese, .word-reading { overflow-wrap: anywhere; }
.game-stage { min-height: 410px; }
.game-stage.sentence-stage { min-height: 480px; }
.game-toolbar, .stage-title { flex-wrap: wrap; }
.game-tools { flex-wrap: wrap; }
textarea:focus-visible { outline: 3px solid #f3af34; outline-offset: 3px; }
/* The fullscreen target contains the game, the same ad containers, and its dialogs. */
.play-frame:fullscreen,
.play-frame.is-expanded {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh;
  box-sizing: border-box; padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  margin: 0; background: #f7faf5; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
}
.play-frame.is-expanded { z-index: 1000; }
body.game-expanded { overflow: hidden; }
.play-frame:fullscreen::backdrop { background: #f7faf5; }
.play-frame:fullscreen .play-workbench,
.play-frame.is-expanded .play-workbench { max-width: 1832px; margin-inline: auto; }
.play-frame:fullscreen .game-shell,
.play-frame.is-expanded .game-shell { width: 100%; min-width: 0; border-radius: 16px; }
.play-frame:fullscreen .game-toolbar,
.play-frame.is-expanded .game-toolbar { padding: 10px 16px; }
.play-frame:fullscreen .scoreboard,
.play-frame.is-expanded .scoreboard { padding: 8px; }
.play-frame:fullscreen .scoreboard strong,
.play-frame.is-expanded .scoreboard strong { font-size: 22px; }
.play-frame:fullscreen .keyboard-area,
.play-frame.is-expanded .keyboard-area { padding: 10px 16px; }
.play-frame:fullscreen .hands-row,
.play-frame.is-expanded .hands-row,
.play-frame:fullscreen .hands-diagram,
.play-frame.is-expanded .hands-diagram { height: 88px; }
.play-frame:fullscreen .game-stage,
.play-frame.is-expanded .game-stage { height: auto; min-height: 390px; padding-bottom: 110px; }
.play-frame:fullscreen .sentence-stage,
.play-frame.is-expanded .sentence-stage { min-height: 470px; }
@media (max-width: 1024px) {
  .home-main { padding-inline: 16px; }
  .play-frame:fullscreen, .play-frame.is-expanded { padding-inline: max(16px, env(safe-area-inset-left)); }
}
@media (max-width: 760px) {
  .game-shell {
    --prompt-size: 1.9375rem; --reading-size: .875rem; --romaji-size: 1.375rem;
    --choice-size: 1.0625rem; --choice-reading-size: .75rem; --question-size: 1rem;
    --answer-size: .9375rem; --falling-size: 1.1875rem;
  }
  .sentence-stage { --prompt-size: 1.25rem; --romaji-size: 1.0625rem; }
  .stage-7 { --prompt-size: 1.625rem; }
  .game-stage { padding-inline: 12px; }
  .sentence-stage .word-japanese { padding-inline: 12px; }
  .balloon-choice { padding-inline: 6px; }
  .play-frame:fullscreen, .play-frame.is-expanded { padding-inline: max(12px, env(safe-area-inset-left)); }
}
@media (max-width: 450px) {
  .home-main { padding-inline: 12px; }
  .game-shell { --prompt-size: 1.75rem; --romaji-size: 1.25rem; --choice-size: 1rem; --question-size: .9375rem; --falling-size: 1.125rem; }
  .sentence-stage { --prompt-size: 1.1875rem; --romaji-size: 1rem; }
  .stage-7 { --prompt-size: 1.5rem; }
  .game-stage { padding-inline: 10px; }
  .word-panel { padding-inline: 0; }
  .sentence-stage .word-japanese { padding-inline: 10px; }
  .question-panel { padding-inline: 10px; }
  .answer-choices { gap: 7px; }
  .answer-choice { padding-inline: 6px; }
  .ad-header .ad-mount { max-width: 100%; }
}

/* Fixed ad sizes only where the full creative fits, including scrollbar width. */
@media (min-width: 344px) and (max-width: 363px) {
  .ad-header .ad-mount { width: 300px; height: 50px; }
}
@media (max-width: 343px) {
  .ad-header { display: none; }
}