/* Mobile-first layout only. Gameplay, artwork and audio remain in their own modules. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --page-width: 590px;
  --nav-height: calc(72px + var(--safe-bottom));
}
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100svh; }
.app { width: min(100%, var(--page-width)); min-height: 100svh; }
.content { padding-bottom: calc(var(--nav-height) + 24px); }
body.oceanPageMode #sightRead, body.oceanPageMode #sightPlay,
body.oceanPageMode #sightCollection, body.oceanPageMode #sightProfile,
body.homeMode #sightHome.homeContent {
  padding-bottom: calc(var(--nav-height) + 28px) !important;
}
.bottomNav {
  width: min(100%, var(--page-width)); height: var(--nav-height) !important;
  padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.bottomNav button { min-height: 44px; }
button, a, [role="button"] { touch-action: manipulation; }
.returnBtn, .miniBtn, .triBtn, .playTri, .playBtn,
.libraryItem button, .todayGame button { min-height: 44px; }
.triBtn, .playTri { min-width: 44px; }
.moduleInfo, .worldInfo, .storyInfo, .libInfo, .profileInfo { min-width: 0; }
.libInfo strong, .storyInfo strong { overflow-wrap: anywhere; }
.libCover, .storyCover, .avatar { flex-shrink: 0; }
.gameCard2 strong { font-size: 13px; }
.gameCard2 span { font-size: 11px; }
.collectionSetTabs button { min-height: 44px; }
.toast {
  bottom: calc(var(--nav-height) + 8px); max-width: min(90vw, 540px);
  width: max-content; font-size: 12px; text-align: center;
}
body.oceanPageMode .oceanHeader, body.homeMode .oceanHeader {
  height: calc(clamp(200px, 31svh, 292px) + var(--safe-top)) !important;
  min-height: calc(clamp(200px, 31svh, 292px) + var(--safe-top)) !important;
}
body.oceanPageMode .woodSign.imgSign, body.homeMode .woodSign.imgSign {
  top: calc(54px + var(--safe-top)) !important;
}
body.oceanPageMode .progressPill, body.homeMode .progressPill {
  top: calc(12px + var(--safe-top)) !important;
  right: calc(14px + var(--safe-right)) !important;
}
.returnBtn { top: calc(12px + var(--safe-top)); left: calc(12px + var(--safe-left)); }
/* Once a book is open, reserve the screen for the page and reading controls. */
body[data-page="read"]:has(#sightReader:not(.hidden)) .oceanHeader {
  height: calc(clamp(120px, 18svh, 150px) + var(--safe-top)) !important;
  min-height: calc(clamp(120px, 18svh, 150px) + var(--safe-top)) !important;
}
body[data-page="read"]:has(#sightReader:not(.hidden)) .woodSign {
  top: calc(54px + var(--safe-top)); font-size: clamp(20px, 5vw, 26px); line-height: 1.15;
}
#sightReader { padding-bottom: calc(var(--nav-height) + 24px); }
#sightReader .pageFrame img {
  max-height: clamp(180px, calc(100dvh - 360px - var(--safe-top) - var(--safe-bottom)), 520px);
  object-fit: contain;
}
@media (max-width: 360px) {
  body.homeMode #sightHome.homeContent { padding-left: 12px !important; padding-right: 12px !important; }
  .homeStoryBody { gap: 9px; }
  .homeTodayCard .storyInfo > strong { font-size: 18px; }
  .homeWordchips > * { font-size: 15px; }
  .collectionGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  :root { --page-width: 840px; }
  .content { padding-left: 24px; padding-right: 24px; }
  .homeStoryBody { grid-template-columns: 42% minmax(0, 1fr); gap: 24px; }
  .libInfo strong { font-size: 16px; }
  .libInfo span { font-size: 12px; }
  .collectionGrid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .wordTile { min-height: 44px; font-size: 13px; }
  .readerCard { max-width: 660px; margin: 0 auto; }
}
/* Inputs remain zoomable; shorter viewports/keyboard can scroll the form. */
body[data-page="login"] .app { padding-top: var(--safe-top); }
.loginContent { padding-bottom: calc(28px + var(--safe-bottom)); }
.loginCard { max-width: 100%; }
.loginField input { width: 100%; min-width: 0; scroll-margin-block: 24px; }
.loginTabs button { min-height: 44px; }
.spRotate button { min-height: 44px; padding: 10px 24px; border: 0; border-radius: 14px; background: #188ed8; color: white; font-weight: 800; }
@media (max-height: 650px) {
  body[data-page="login"] .oceanHeader { height: 132px; }
  body[data-page="login"] .woodSign { top: 26px; padding: 10px 18px; font-size: 24px; }
  body[data-page="login"] .loginMascot { width: 64px; height: 64px; margin-top: -46px; }
  body[data-page="login"] .loginMascot img { width: 48px; height: 48px; }
  body[data-page="login"] .loginCard { padding: 18px 16px 20px; }
}
/* Portrait games: fit the available viewport, including the home indicator. */
.gameScreen {
  height: 100vh; height: 100dvh; bottom: auto;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.gameStage, .wcStage, .wcBoardWrap { min-height: 0; }
.gameTop { padding-top: 12px; }
.gameBack { width: 44px; height: 44px; }
.bubbleGameTitle { top: calc(8px + var(--safe-top)); }
#sightGame .gamePrompt { top: calc(106px + var(--safe-top)); min-height: 36px; }
#sightGame .gameDots { top: calc(149px + var(--safe-top)); }
.wcTop { height: clamp(96px, 20dvh, 178px); }
.wcHint { max-width: 96%; white-space: normal; text-align: center; }
.wcBoardWrap { container-type: size; }
.wcBoard {
  width: min(96%, 432px, calc(100dvh - 284px - var(--safe-top) - var(--safe-bottom)));
}
@supports (width: 1cqh) { .wcBoard { width: min(96%, 432px, 100cqh); } }
.wcBottom button { min-height: 44px; }
@media (max-height: 650px) {
  #sightGame .gameTop { height: 155px; }
  .bubbleGameTitle { width: min(240px, 60vw); }
  #sightGame .gamePrompt { top: calc(86px + var(--safe-top)); }
  #sightGame .gameDots { top: calc(130px + var(--safe-top)); }
  .wcBoard { gap: 3px; padding: 6px; border-radius: 18px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  /* The portrait background has a baked-in title; reuse the untitled local art here. */
  #sightWC.gameScreen { background-image: url('../wordclear/arctic-bg.webp'); background-position: center 38%; }
  #sightWC::before { content: ''; position: absolute; right: 2%; top: 54px; width: 30%; height: 74px; background: url('../game/title-word-clear.webp') center/contain no-repeat; pointer-events: none; }
  #sightWC .wcTop { height: 54px; }
  #sightWC .wcBoardWrap { width: 66%; align-self: flex-start; padding: 6px 12px; }
  #sightWC .wcHint { position: absolute; right: 2%; top: 25%; width: 30%; }
  #sightWC .wcRoad { position: absolute; right: 2%; bottom: 74px; width: 30%; }
  #sightWC .wcBottom { position: absolute; right: max(12px, var(--safe-right)); bottom: calc(8px + var(--safe-bottom)); width: 30%; }
}
/* Sentence Path loads its own landscape screen stylesheet. */