/* Viewport-sized menus and reader. The bookshelf is the only scrolling menu.
 * Keep gameplay and audio untouched. No transform/zoom scaling or cropped pages.
 */
body[data-page="home"], body[data-page="play"],
body[data-page="collection"], body[data-page="profile"],
body[data-page="read"]:has(#sightReader:not(.hidden)),
body[data-page="read"]:has(#sightComplete:not(.hidden)) {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"], [data-page="read"]) {
  --nav-height: calc(clamp(56px, 8dvh, 72px) + var(--safe-bottom));
}
body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"]) .app,
body[data-page="read"]:has(#sightReader:not(.hidden)) .app,
body[data-page="read"]:has(#sightComplete:not(.hidden)) .app {
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--nav-height);
}
body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"], [data-page="read"]) .oceanHeader {
  flex: 0 0 auto;
  height: calc(124px + var(--safe-top)) !important;
  min-height: 0 !important;
}
body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"], [data-page="read"]) .woodSign.imgSign {
  top: calc(40px + var(--safe-top)) !important;
}
body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"], [data-page="read"]) .woodSign.imgSign img {
  height: 72px !important;
  max-width: min(78vw, 360px) !important;
}
body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"], [data-page="read"]) .progressPill {
  top: calc(8px + var(--safe-top)) !important;
  padding: 4px 8px !important;
}
body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"], [data-page="read"]) .progressPill img {
  width: 22px !important; height: 22px !important;
}
body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"], [data-page="read"]) .progressPill span { font-size: 12px !important; }
body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"]) main.content:is(#sightHome, #sightPlay, #sightCollection, #sightProfile) {
  flex: 1 1 0;
  min-height: 0;
  margin: 0 !important;
  padding: 8px 12px 12px !important;
}
body[data-page="read"] #sightRead { padding-top: 8px !important; }
body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"]) .sectionTitle {
  flex: 0 0 auto; margin: 0 2px 6px; font-size: 15px;
}

/* Home: the one story card uses available space, including short-screen phones. */
body.homeMode #sightHome.homeContent { display: flex !important; align-items: center; justify-content: center; }
body.homeMode #sightHome .homeTodayCard {
  display: flex !important; flex-direction: column; align-items: stretch; gap: 12px;
  width: 100%; height: 100%; max-height: 470px; padding: clamp(12px, 2dvh, 20px) !important;
}
.homeTodayCard .homeStoryHeading { flex: 0 0 auto; margin: 0; }
body.homeMode .homeStoryHeading strong { font-size: clamp(20px, 3.2dvh, 29px) !important; }
.homeTodayCard .homeStoryBody { flex: 1 1 auto; min-height: 0; }
.homeTodayCard .storyCover { height: 100%; max-height: min(32dvh, 260px); aspect-ratio: auto; }
.homeTodayCard .storyCover img { object-fit: contain; }
.homeTodayCard .storyInfo > strong { font-size: clamp(17px, 2.8dvh, 24px); }
.homeTodayCard .homeReadBtn { flex: 0 0 auto; margin: 0 !important; min-height: 44px !important; font-size: 20px !important; }
.homeTodayCard .homeWordchips { gap: 5px; }
.homeTodayCard .homeWordchips > * { padding: 6px 2px !important; font-size: clamp(12px, 2dvh, 17px) !important; }

/* Play: all six entrances + today's words remain accessible without scrolling. */
body[data-page="play"] #sightPlay { display: flex; flex-direction: column; gap: 6px; }
body[data-page="play"] #gameRoom {
  flex: 1 1 0; min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px !important;
}
body[data-page="play"] #gameRoom .gameCard2 {
  min-height: 0 !important; min-width: 0; padding: 6px;
  justify-content: center; gap: 3px;
}
body[data-page="play"] #gameRoom img { width: clamp(32px, 8dvh, 78px); height: clamp(32px, 8dvh, 78px); flex-shrink: 1; min-height: 0; }
body[data-page="play"] #gameRoom strong { font-size: clamp(12px, 1.8dvh, 16px); }
body[data-page="play"] #gameRoom span { font-size: 10px; }
body[data-page="play"] #sightPlay > section.card { flex: 0 0 auto; padding: 7px !important; }
body[data-page="play"] .todayWords { margin: 0; flex-wrap: nowrap; }
body[data-page="play"] .todayWords i { padding: 5px 8px; font-size: 12px; }

/* Collection: each Set (50/70 words) fits, with no words hidden or paged away. */
body[data-page="collection"] #sightCollection { display: flex; flex-direction: column; }
body[data-page="collection"] #sightCollection .collectionCard {
  display: flex; flex-direction: column; flex: 1 1 0; min-height: 0;
  margin: 0 !important; padding: clamp(8px, 1.5dvh, 14px) !important; gap: 8px;
}
body[data-page="collection"] .collectionSetTabs { flex: 0 0 auto; margin: 0; gap: 5px; }
body[data-page="collection"] .collectionSetTabs button { padding: 5px 2px; min-height: 44px; }
body[data-page="collection"] .collectionSetSummary { flex: 0 0 auto; margin: 0; font-size: 12px; gap: 6px; }
body[data-page="collection"] .collectionSetSummary small { font-size: 9px; }
body[data-page="collection"] #collectionGrid {
  flex: 1 1 0; min-height: 0; gap: 4px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(10, minmax(0, 1fr));
}
body[data-page="collection"] #collectionGrid:has(> .wordTile:nth-child(51)) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
body[data-page="collection"] .wordTile { min-width: 0; min-height: 0; padding: 2px; border-radius: 7px; font-size: clamp(9px, 2.6vw, 13px); }
body[data-page="collection"] #collectionGrid:has(> .wordTile:nth-child(51)) .wordTile { font-size: clamp(8px, 2.1vw, 12px); }
body[data-page="collection"] .wordTile .level:after { font-size: 9px !important; }

/* Profile: preserve all stats, course explanation and sign-out control. */
body[data-page="profile"] #sightProfile { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
body[data-page="profile"] .profileTop { padding: 12px; }
body[data-page="profile"] #sightProfile .profileInfo { padding: 8px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body[data-page="profile"] .profileInfo strong { font-size: 19px; }
body[data-page="profile"] .stats { margin: 0; }
body[data-page="profile"] .smallBanner { margin: 0; }
body[data-page="profile"] .logoutBtn { min-height: 44px; margin: 0 auto; }

/* Reader and completion: no library hero above the book, no scrollable image. */
/* The opened book is focused reading: keep only the back-to-library control. */
body[data-page="read"]:has(#sightReader:not(.hidden)) { --nav-height: 0px; }
body[data-page="read"]:has(#sightReader:not(.hidden)) .bottomNav { display: none !important; }
body[data-page="read"]:has(#sightReader:not(.hidden)) .app { padding-bottom: var(--safe-bottom); }
body[data-page="read"]:has(#sightReader:not(.hidden)) .oceanHeader,
body[data-page="read"]:has(#sightComplete:not(.hidden)) .oceanHeader { display: none !important; }
body[data-page="read"] #sightReader {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px;
  padding: calc(8px + var(--safe-top)) 10px 10px;
}
#sightReader .readerTop { flex: 0 0 auto; min-height: 44px; margin: 0; gap: 6px; }
#sightReader .readerTop strong { white-space: normal; overflow: visible; text-overflow: clip; font-size: 13px; line-height: 1.2; }
#sightReader .miniBtn { min-height: 44px; font-size: 11px; }
#sightReader .readerCard {
  flex: 1 1 0; min-height: 0; width: 100%; max-width: none; margin: 0;
  display: flex; flex-direction: column; gap: 12px; padding: 12px;
}
#sightReader .readerCard:before { display: none; }
#sightReader .pageFrame { flex: 1 1 0; min-height: 0; margin: 0; display: flex; justify-content: center; box-shadow: none; }
#sightReader .pageFrame img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
#sightReader .pageBar { flex: 0 0 4px; height: 4px; margin: 0; }
#sightReader .readingText { flex: 0 0 auto; margin: 0; padding: 12px 14px; font-size: clamp(16px, 2.2dvh, 22px); line-height: 1.8; }
#sightReader .readingText:after { display: none; }
#sightReader .readingText mark { padding: 2px 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
#sightReader .readerBar { flex: 0 0 48px; gap: 12px; margin: 0; }
#sightReader .triBtn, #sightReader .playTri { width: 44px; height: 44px; }
body[data-page="read"] #sightComplete { flex: 1 1 0; min-height: 0; display: flex; padding: calc(10px + var(--safe-top)) 10px 10px; }
#sightComplete > .card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px !important; }
#sightComplete h2, #sightComplete p, #sightComplete #completeWords { margin: 0 !important; }
#sightComplete #completeWords { flex-wrap: nowrap; }
#sightComplete .gameGrid2 { align-self: stretch; }
#sightComplete .playBtn { min-height: 44px; margin-top: 0 !important; }

@media (max-height: 650px) {
  #sightReader .readerCard { gap: 10px; padding: 10px; }
  #sightReader .readingText { padding: 8px 10px; }
  body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"]) .oceanHeader { height: calc(108px + var(--safe-top)) !important; }
  body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"]) .woodSign.imgSign img { height: 58px !important; }
  .homeTodayCard .homeStoryBody { gap: 9px; }
  .homeTodayCard .storyInfo { gap: 5px; }
  .homeTodayCard .storyInfo .bookTag { font-size: 11px; padding: 3px 6px; }
  body[data-page="profile"] #sightProfile { gap: 6px; }
  body[data-page="profile"] .avatar { width: 50px; height: 50px; font-size: 30px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"]) .oceanHeader { height: calc(74px + var(--safe-top)) !important; }
  body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"]) .woodSign.imgSign { top: calc(6px + var(--safe-top)) !important; }
  body:is([data-page="home"], [data-page="play"], [data-page="collection"], [data-page="profile"]) .woodSign.imgSign img { height: 60px !important; max-width: 52vw !important; }
  body[data-page="play"] #gameRoom { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  body[data-page="play"] #gameRoom img { width: 32px; height: 32px; }
  body[data-page="collection"] #collectionGrid { grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); }
  body[data-page="collection"] #collectionGrid:has(> .wordTile:nth-child(51)) { grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); }
  body[data-page="profile"] #sightProfile { display: grid; grid-template-columns: 1fr 1fr; align-content: center; }
  body[data-page="profile"] #sightProfile > .sectionTitle:first-child { display: none; }
  body[data-page="profile"] .profileTop { grid-row: span 2; }
  body[data-page="profile"] .logoutBtn { grid-column: 1 / -1; }
  #sightReader .readerCard { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 4px 48px; }
  #sightReader .pageFrame { grid-row: 1 / 4; }
  #sightReader .readingText { grid-column: 2; grid-row: 1; align-self: center; }
  #sightReader .pageBar { grid-column: 2; grid-row: 2; }
  #sightReader .readerBar { grid-column: 2; grid-row: 3; gap: 6px; }
  #sightComplete > .card > div:first-child { font-size: 32px !important; }
  #sightComplete > .card { gap: 4px; }
  #sightComplete .gameCard2 img { width: 38px; height: 38px; }
}