/* Keep the choices together in the usable viewport, including mobile browser chrome.
   Scrolling stays available for enlarged text and exceptionally small windows. */
.calendarPage,.weekPage,.videoPage {
  height:100vh;height:100svh;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;overflow-x:hidden;overflow-y:auto;
}
:is(.calendarPage,.weekPage,.videoPage) .topbar {
  flex:0 0 auto;padding-top:7px;padding-bottom:3px;
}
:is(.calendarPage,.weekPage,.videoPage) .brandIdentity {padding:3px 9px 3px 4px;gap:7px;border-radius:15px}
:is(.calendarPage,.weekPage,.videoPage) .brandLogo {width:38px;height:38px;border-radius:8px}
:is(.calendarPage,.weekPage,.videoPage) .brandIdentity .brandText {font-size:14px}
:is(.calendarPage,.weekPage,.videoPage) .brandIdentity .brandText small {font-size:8px;margin-top:3px}
:is(.calendarPage,.weekPage,.videoPage) .roundIcon {width:42px;height:42px;border-radius:14px}
:is(.calendarPage,.weekPage,.videoPage) .roundIcon svg {width:22px;height:22px}
.calendarMain {
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  width:min(1020px,94vw);padding:7px 0 max(8px,env(safe-area-inset-bottom));
}
.calendarBreadcrumb {flex:0 0 auto;font-size:11px;gap:7px;margin:0 0 5px;line-height:1.3}
.calendarBreadcrumb a {padding:3px 0}
.calendarHero {flex:0 0 auto;gap:12px;margin:0 0 12px;min-height:56px}
.calendarHero h1 {font-size:clamp(27px,4.7svh,40px)}
.calendarEyebrow {font-size:9px;margin:0 0 4px;letter-spacing:.09em}
.calendarHero p:last-child {font-size:12px;margin-top:5px}
.calendarMascot {width:62px}
.monthGrid {
  flex:1 1 auto;min-height:0;max-height:510px;gap:11px;
  grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(88px,1fr));
}
.monthCard {min-height:0;padding:10px 14px;border-radius:19px;justify-content:center}
.monthCardTop {font-size:10px}
.monthCardTop .monthCurrent {font-size:8px;padding:3px 5px}
.monthCard strong {font-size:clamp(30px,5.4svh,43px);gap:8px;line-height:1.05;margin:7px 0 5px}
.monthCard strong small {font-size:14px}
.monthCardSummary {flex:0 0 auto;font-size:11px;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.monthCardOpen {display:none}
.calendarFootnote {flex:0 0 auto;font-size:11px;margin:8px 0 0;line-height:1.3}
.changeMonth {min-height:40px;padding:8px 11px;font-size:11px;border-radius:12px}
.monthWeeks {
  flex:1 1 auto;min-height:0;max-height:500px;gap:13px;
  grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(94px,1fr);align-items:stretch;
}
.monthWeekCard {min-height:0;padding:12px;border-radius:20px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.monthWeekHeading {display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:center;min-width:0}
.monthWeekTop {flex-direction:column;gap:4px;align-items:flex-start;justify-content:center}
.weekPill {padding:4px 8px;font-size:11px;border-radius:8px;white-space:nowrap}
.weekCurrent {font-size:8px;white-space:nowrap}
.monthWeekCard h2 {min-width:0;margin:0;font-size:clamp(17px,2.7svh,23px);line-height:1.15}
.weekVocabulary {display:none}
.monthWeekActions {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:stretch}
.weekVideoButton {display:flex;align-items:center;gap:6px;min-height:44px;padding:5px 7px;border-radius:11px}
.weekVideoButton .videoPoster {flex:0 0 auto;width:44px;aspect-ratio:16/10;border-radius:6px}
.weekVideoButton .videoPoster>img {object-fit:cover}
.weekVideoButton .videoPlay {width:20px;height:20px;font-size:8px;border-width:1px}
.weekVideoButton .videoDuration {display:none}
.weekVideoLabel {flex:1;min-width:0;padding:0;font-size:11px;gap:3px}
.weekVideoPending {min-height:44px;margin:0;padding:6px;font-size:10px;gap:5px;border-radius:11px;line-height:1.3}
.weekVideoPending>span {font-size:19px}
.weekGamesButton {min-height:44px;margin:0;padding:7px 10px;border-radius:11px;font-size:12px;gap:5px;line-height:1.2}
.weekGamesButton>span:last-child {font-size:17px}
.weekGamesButton small {display:block;margin-top:3px;font-size:9px;font-weight:700;color:#a08cad}
.monthPager {flex:0 0 auto;margin-top:6px;font-size:11px;min-height:32px}
.monthPager a {min-height:32px}
.monthEmpty {flex:1;min-height:0;max-height:330px;padding:24px 16px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.monthEmpty>span {font-size:35px}
.monthEmpty h2 {font-size:24px;margin:9px 0 6px}
.monthEmpty p {font-size:12px}
.monthEmpty a {margin-top:10px}

/* Weekly menu: video, practice and every game remain visible together. */
.weekMain {
  flex:1 1 auto;min-height:0;width:min(1040px,94vw);padding:6px 0 max(8px,env(safe-area-inset-bottom));gap:8px;
}
.weekMain>.calendarBreadcrumb {width:100%;margin:0}
.weekHead {flex:0 0 auto;width:100%;justify-content:center;gap:9px;margin:0;min-height:44px}
.weekHead .miniMascot {width:46px;flex:0 0 auto}
.weekHead .pageTitle,.festivalWeek .weekHead .pageTitle {font-size:clamp(22px,3.8svh,33px);line-height:1.05}
.weekHead .pageTitle small {font-size:10px;line-height:1.25;margin-bottom:4px;letter-spacing:.04em}
.weekSectionTitle {display:none}
.weekMain .lessonVideoEntry {flex:0 0 auto;width:100%;margin:0;padding:7px 11px;gap:10px;border-radius:16px;min-height:58px}
.weekMain .lessonVideoEntry>img {width:78px;border-radius:9px}
.weekMain .lessonVideoEntry strong {font-size:18px}
.weekMain .lessonVideoEntry small {font-size:10px;margin-top:2px}
.weekMain .lessonVideoEntry>span>small:first-child {font-size:8px;margin-bottom:3px}
.weekMain .lessonVideoEntry .videoEntryPlay {width:34px;height:34px;font-size:15px}
.weekMain .learningCards {flex:0 0 auto;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.weekMain .learnCard {padding:8px 10px;gap:7px;border-radius:15px;min-height:60px}
.weekMain .learnSymbol {width:31px;height:31px;font-size:18px;border-radius:10px}
.weekMain .learnCard strong {font-size:13px;line-height:1.15}
.weekMain .learnCard small {font-size:10px;line-height:1.2;margin-top:3px}
.weekMain .gamesGrid {flex:1 1 auto;min-height:0;max-height:350px;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(76px,1fr));gap:10px}
.weekMain .gameCard {min-height:0;padding:8px;border-radius:20px;display:grid;grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;gap:4px}
.weekMain .gameCover {width:auto;height:100%;min-height:0;max-height:108px;aspect-ratio:2/3;border-radius:12px;box-shadow:0 4px 10px #59417419}
.weekMain .gameName {position:static;width:100%;font-size:clamp(12px,2.1svh,19px);line-height:1.1;text-align:center}
.weekMain .gameStars {position:static;font-size:10px;line-height:1;height:11px;text-align:center}
.weekMain .gameNumber {display:none}
.weekMain .gameCover.cover-spin:before {width:60%;height:auto;aspect-ratio:1;border-width:2px;font-size:18px}
.weekMain .gameCover.cover-spin:after {font-size:12px;top:8%}
.weekMain .gameCover.cover-bubbles:before {width:25%;height:auto;aspect-ratio:1;border-width:2px;box-shadow:-10px -13px 0 -3px #ffbadd,12px -12px 0 -3px #a7e1d8,0 13px 0 -4px #ffd779}
.weekMain .weekContentPending {width:100%;min-height:80px;max-height:150px;flex:1;padding:16px;display:flex;flex-direction:column;justify-content:center}
.weekMain .weekContentPending h2 {font-size:21px}

/* The player uses the remaining height; vocabulary can be expanded on demand. */
.lessonVideoMain {flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:9px;padding:10px 0 max(8px,env(safe-area-inset-bottom))}
.lessonVideoMain .pageTitle {flex:0 0 auto;font-size:clamp(23px,4svh,36px);line-height:1.05}
.lessonVideoMain .pageTitle small {font-size:9px;line-height:1.2;margin-bottom:5px}
.lessonVideoMain .videoIntro {flex:0 0 auto;font-size:12px;line-height:1.2;margin:0}
.lessonVideoFrame {flex:1 1 auto;min-height:100px;aspect-ratio:auto;border-radius:17px;border-width:3px}
.lessonVideoFrame video {object-fit:contain}
.videoDetails {flex:0 0 auto;color:#8b779c;text-align:center;font-size:11px;line-height:1.4}
.videoDetails summary {cursor:pointer;padding:6px}
.videoDetails .videoSummary {font-size:11px;line-height:1.4;margin:4px auto;max-width:80ch}
.videoActions {flex:0 0 auto;gap:7px;margin:0}
.videoBackLink,.videoLessonLink {font-size:11px;padding:9px 12px;border-radius:12px;min-height:36px;line-height:1.3}
.videoStatus {font-size:12px;padding:8px 12px;margin:0}

/* Rounded, raised controls keep the next action easy to spot. */
:is(.calendarPage,.weekPage,.videoPage) .roundIcon {border-radius:50%;border:2px solid #fff;box-shadow:0 3px 0 #d7c9eb,0 5px 12px #69468b15}
.monthCard {border-radius:25px;border-color:#e2d5f3;box-shadow:0 3px 0 #d6c6e9,0 6px 15px #644b8010}
.monthCard.currentMonth {border-color:#eccb70;box-shadow:0 3px 0 #d4b34f,0 6px 15px #b99a3718}
.monthCard.hasLessons .monthCardSummary {color:#7a628e}
.monthCard.emptyMonth {border-color:#ede5f4;box-shadow:0 3px 0 #e0d7e8}
.weekVideoButton,.weekGamesButton,.changeMonth,.videoBackLink,.videoLessonLink {
  border-radius:999px;border:2px solid #fff;font-weight:900;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.weekVideoButton {color:white;background:linear-gradient(135deg,#8658d5,#6740b8);box-shadow:0 3px 0 #50308b,0 6px 12px #7652bf20}
.weekVideoButton .videoPoster {border-radius:999px}
.weekVideoLabel {font-size:12px}
.weekGamesButton {color:#fff;background:linear-gradient(135deg,#268756,#146844);box-shadow:0 3px 0 #0d5436,0 6px 12px #1f80551c}
.weekGamesButton:hover {background:linear-gradient(135deg,#2c925f,#18764d)}
.weekGamesButton.videoOnlyWeek {color:#765390;background:linear-gradient(135deg,#f3eaff,#e9ddf8);box-shadow:0 3px 0 #c3abd8,0 5px 12px #7652bf12}
.weekGamesButton.videoOnlyWeek small {color:#856b9c}
.changeMonth,.videoBackLink {color:#765390;background:#fff;box-shadow:0 3px 0 #d3c0e5,0 5px 10px #7652bf0c}
.videoLessonLink {color:#fff;background:linear-gradient(135deg,#8658d5,#6740b8);box-shadow:0 3px 0 #50308b,0 5px 10px #7652bf18}
.monthPager a {border:2px solid #fff;border-radius:999px;padding:5px 12px;background:#f1e8fb;color:#765390;box-shadow:0 2px 0 #d4c0e5}
.monthEmpty a {border:2px solid #fff;border-radius:999px;padding:9px 17px;background:linear-gradient(135deg,#8658d5,#6740b8);color:#fff;box-shadow:0 3px 0 #50308b}
.weekMain .lessonVideoEntry {border-radius:23px;border-color:#ceb5eb;box-shadow:0 3px 0 #b799d8,0 6px 12px #7652bf12}
.weekMain .lessonVideoEntry .videoEntryPlay {background:linear-gradient(135deg,#9464de,#6740b8);box-shadow:0 3px 0 #51308b}
.weekMain .learnCard {border-radius:20px;border-color:#fff;box-shadow:0 3px 0 #d6c5ea,0 5px 10px #7652bf0c}
.weekMain .gameCard {border:2px solid var(--card);border-radius:24px;background:linear-gradient(145deg,#fff 20%,var(--card-soft));box-shadow:0 3px 0 var(--card),0 6px 13px #5d3f7c12}
.weekMain .gameCard:before {opacity:.35}
.weekMain .gameName {position:relative;inset:auto;z-index:1}
.weekVideoButton:active,.weekGamesButton:active,.changeMonth:active,.videoBackLink:active,.videoLessonLink:active,.weekMain .learnCard:active,.weekMain .gameCard:active {transform:translateY(2px);filter:brightness(.97)}
:is(.calendarPage,.weekPage,.videoPage) :is(button,a):focus-visible {outline:3px solid #f0b82e;outline-offset:3px}

/* Size the existing games by height as well as width. */
.gamePage {height:100vh;height:100svh;min-height:100vh;min-height:100svh;padding:7px max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));overflow-y:auto}
.gameShell {height:100%;display:flex;flex-direction:column;min-height:0}
.gameBar {flex:0 0 auto;height:50px}
.gameBar .roundIcon {width:42px;height:42px;border-radius:14px}
.gameBrandLogo {width:26px;height:26px}
.gameMeta strong {font-size:clamp(14px,2.7svh,22px)}
.gameShell .stage {flex:1 1 auto;min-height:0;margin-top:6px;padding:clamp(8px,1.8svh,18px);border-radius:24px;overflow-y:auto}
.stage .promptRow {flex:0 0 auto;min-height:0;margin-bottom:clamp(8px,1.7svh,14px)}
.stage .voiceButton {width:clamp(46px,8svh,70px);height:clamp(46px,8svh,70px)}
.stage .voiceButton svg {width:45%;height:45%}
.stage .gameInstruction {font-size:clamp(12px,2svh,16px);margin-bottom:8px;line-height:1.3}
.stage .choices {max-width:800px;gap:10px}
.stage .pictureChoice {min-height:0;aspect-ratio:1.25;border-radius:20px;padding:5px}
.stage .pictureChoice .vocabArt {width:90%;max-width:220px;max-height:30svh;object-fit:contain}
.stage .pairGrid {grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:min(800px,calc((100svh - 120px)*2))}
.stage .pairCard {min-height:0;aspect-ratio:1.2;border-radius:17px;padding:5px}
.stage .pairCard .vocabArt.small {width:min(100%,15svh);max-width:120px}
.stage .pairBack,.stage .pairBack svg {width:clamp(25px,6svh,46px);height:auto}
.stage .bingo {width:min(550px,85vw,calc(100svh - 190px));gap:7px}
.stage .bingoCell .vocabArt.small {width:90%;max-width:130px}
.stage .wheelWrap {max-width:min(330px,47svh);margin:7px auto}
.stage .compactPrompt {margin-bottom:9px}
.stage .spinChoices .pictureChoice {min-height:0;aspect-ratio:1.3}
.stage .pillButton {min-height:44px;padding:9px 18px;font-size:17px;border-radius:16px;border-bottom-width:3px}
.stage .bubblePrompt {gap:13px;margin:0 0 10px}
.stage .bubbleArena {flex:0 0 auto;width:min(660px,100%,calc((100svh - 230px)*1.364));border-radius:20px}
.stage .aimControls {grid-template-columns:44px minmax(0,1fr) 44px auto;gap:8px;margin-top:8px;max-width:660px}
.stage .aimButton {width:44px;height:44px;border-radius:13px;font-size:17px}
.stage .fireButton {grid-column:auto;width:auto;min-height:44px;font-size:14px;padding:8px 12px}
.stage .aimSlider {font-size:9px}
.stage .aimSlider input {height:25px}
.stage .walkScene {height:clamp(100px,29svh,240px)}
.stage .wordOptions {gap:8px;margin-top:10px}
.stage .wordStone {min-height:0;height:clamp(60px,18svh,130px);border-radius:17px;padding:4px}
.stage .wordStone .vocabArt {width:min(100%,16svh);max-width:130px}
.stage .reviewPicture {flex:0 0 auto;width:min(240px,23svh,62vw);padding:5px;border-radius:23px}
.stage .reviewCaption {flex:0 0 auto;gap:3px;margin:6px 0}
.stage .reviewCaption strong {font-size:clamp(21px,4svh,30px)}
.stage .reviewCaption small {font-size:13px}
.stage .sentenceList {gap:4px}
.stage .sentenceButton {padding:6px 10px;font-size:12px;line-height:1.25;min-height:34px;margin:0 auto;border-radius:12px}
.stage .sentenceButton svg {width:18px;height:18px}
.stage .reviewControls {flex:0 0 auto;gap:20px;margin-top:7px}
.stage .symbolChoices {gap:12px;max-width:610px}
.stage .symbolChoice {max-width:230px;aspect-ratio:1.35;border-radius:23px;font-size:clamp(48px,15svh,115px)}
.stage .letterPair {font-size:12px;min-height:0;margin:9px 0 0}
.stage .countBoard {width:min(450px,74vw,calc(100svh - 230px));padding:9px;gap:5px;margin:0 auto 12px}
.stage .numberChoices .symbolChoice {max-width:140px;font-size:clamp(40px,10svh,75px)}
.stage .finishMascot {width:min(220px,34svh,52vw)}

@media(max-width:650px) {
  .calendarHero {margin-bottom:9px;min-height:48px}
  .calendarHero h1 {font-size:28px}
  .calendarHero p:last-child {font-size:11px}
  .calendarMascot {width:50px}
  .monthGrid {gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .monthCard {padding:9px;border-radius:22px}
  .monthCard strong {font-size:33px;gap:5px;margin:6px 0 5px}
  .monthCard strong small {font-size:11px}
  .monthCardSummary {font-size:10px}
  .monthCardTop {font-size:9px}
  .monthCardTop .monthCurrent {font-size:7px;padding:3px}
  .calendarFootnote {font-size:10px;margin-top:6px}
  .monthWeeks {grid-template-columns:1fr;gap:8px;max-height:560px;grid-auto-rows:minmax(80px,1fr)}
  .monthWeekCard {padding:8px 10px;gap:7px;border-radius:16px}
  .monthWeekCard h2 {font-size:17px}
  .weekPill {font-size:10px;padding:3px 7px}
  .monthWeekTop {gap:2px}
  .weekCurrent {font-size:7px}
  .weekGamesButton {font-size:11px}
  .weekGamesButton small {font-size:8px}
  .weekVideoButton .videoPoster {width:38px}
  .monthWeekActions {gap:7px}
  .changeMonth {font-size:10px;padding:7px 9px}
  .changeMonth svg {width:14px;height:14px}
  .weekMain {gap:7px}
  .weekHead .miniMascot {width:37px}
  .weekHead .pageTitle,.festivalWeek .weekHead .pageTitle {font-size:23px}
  .weekHead .pageTitle small {font-size:9px}
  .weekMain .lessonVideoEntry {min-height:54px;padding:6px 8px;gap:7px;border-radius:20px}
  .weekMain .lessonVideoEntry>img {width:58px}
  .weekMain .lessonVideoEntry strong {font-size:16px}
  .weekMain .lessonVideoEntry small {font-size:9px}
  .weekMain .lessonVideoEntry>span>small:first-child {font-size:7px}
  .weekMain .lessonVideoEntry .videoEntryPlay {width:29px;height:29px;font-size:13px}
  .weekMain .learningCards {gap:6px}
  .weekMain .learnCard {flex-direction:column;align-items:center;text-align:center;padding:6px 4px;gap:4px;min-height:62px;border-radius:18px}
  .weekMain .learnSymbol {width:24px;height:24px;font-size:14px;border-radius:8px}
  .weekMain .learnCard strong {font-size:10px;line-height:1.15}
  .weekMain .learnCard small {font-size:8px;line-height:1.15;margin-top:2px}
  .weekMain .gamesGrid {gap:7px;max-height:330px}
  .weekMain .gameCard {padding:7px 5px;gap:4px;border-radius:21px}
  .weekMain .gameCover {max-height:100px;border-radius:9px}
  .weekMain .gameName {font-size:12px}
  .weekMain .gameStars {font-size:9px}
  .lessonVideoMain {width:94vw;gap:7px;padding-top:9px}
  .lessonVideoMain .pageTitle {font-size:24px}
  .lessonVideoMain .pageTitle small {font-size:8px}
  .lessonVideoMain .videoIntro {font-size:10px}
  .videoActions {gap:5px}
  .videoLessonLink {flex:1 1 40%;text-align:center;font-size:10px;padding:7px 9px}
  .videoBackLink {font-size:10px;padding:7px 9px}
  .stage .spinLayout {gap:8px}
  .stage .wheelWrap {width:60%;max-width:min(210px,29svh);margin:6px auto}
  .stage .spinChoices .vocabArt {max-width:125px}
}
@media(max-height:650px) {
  .calendarPage .calendarBreadcrumb,.weekMain>.calendarBreadcrumb,.calendarHero p:last-child,.calendarFootnote {display:none}
  .calendarHero {min-height:38px;margin-bottom:7px}
  .calendarHero h1 {font-size:26px}
  .calendarEyebrow {font-size:8px;margin-bottom:2px}
  .calendarMascot {width:40px}
  .calendarMain {padding-top:4px}
  .weekMain {gap:6px;padding-top:3px}
  .weekMain .gameCover {max-height:75px}
  .stage .reviewPicture {width:min(200px,19svh,54vw)}
  .stage:has(.reviewPicture)>.gameInstruction,.stage .reviewCaption .dayBadge {display:none}
}
@media(max-height:540px) and (orientation:landscape) {
  .calendarHero {min-height:32px}
  .calendarMascot {display:none}
  .monthGrid {grid-template-rows:repeat(3,minmax(62px,1fr));gap:6px}
  .monthCard {padding:5px 10px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 7px}
  .monthCardTop {grid-column:1;grid-row:1}
  .monthCard strong {grid-column:2;grid-row:1/3;font-size:29px;margin:0}
  .monthCard strong small {font-size:10px}
  .monthCardSummary {grid-column:1;grid-row:2;font-size:9px}
  .monthWeeks {grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .monthWeekCard {padding:7px;gap:6px}
  .monthWeekCard h2 {font-size:15px}
  .weekMain {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-rows:auto minmax(0,1fr);gap:7px}
  .weekHead {grid-column:1;grid-row:1;justify-content:flex-start}
  .weekHead .miniMascot {display:none}
  .weekHead .pageTitle {font-size:20px}
  .weekMain .lessonVideoEntry {grid-column:2;grid-row:1;min-height:46px}
  .weekMain .learningCards {grid-column:1;grid-row:2;align-self:start;grid-template-columns:1fr}
  .weekMain .learnCard {flex-direction:row;text-align:left;min-height:44px;padding:6px;gap:6px}
  .weekMain .gamesGrid {grid-column:2;grid-row:2;height:100%;max-height:none}
  .weekMain .gameCover {max-height:57px}
  .stage .spinLayout {grid-template-columns:1fr 1fr;gap:14px}
  .stage .wheelWrap {width:85%;max-width:min(230px,46svh)}
}

/* Family fish weekly review */
.weeklyFishSection{margin:24px 0 30px}
.weeklyFishSection>.weekSectionTitle{display:block;margin:0 0 14px;font:800 24px/1.2 'Baloo 2',Nunito,sans-serif;color:#513391;text-align:left}
.weeklyFishCard{display:grid;grid-template-columns:minmax(150px,27%) 1fr;align-items:center;gap:24px;background:#fffdf5;border:2px solid #d8edf1;border-radius:28px;padding:22px;box-shadow:0 10px 28px #315e7910;text-align:left}
.weeklyFishCard>img{width:100%;height:auto;max-height:210px;object-fit:contain;border-radius:22px;background:#fffbee}
.weeklyFishCopy h3{font:800 clamp(28px,3vw,42px)/1.05 'Baloo 2',Nunito,sans-serif;margin:5px 0 8px;color:#166d84}
.weeklyFishEyebrow{font-weight:900;font-size:12px;letter-spacing:.045em;color:#658292;margin:0}
.weeklyFishCopy>p:not(.weeklyFishEyebrow){margin:7px 0;line-height:1.5}
.weeklyFishDetail{font-size:14px;color:#716984}
.weeklyFishActions{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0 11px}
.weeklyFishActions a{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:12px 20px;border-radius:16px;text-decoration:none;font-weight:900;min-height:46px}
.weeklyFishPlay{background:#6c48d4;color:white;box-shadow:0 4px 0 #4e2ead}
.weeklyFishDownload{background:#e5f4f5;color:#166078;border:1px solid #bddee6}
.weeklyFishCopy>small{font-size:12px;line-height:1.45;color:#6e7488;display:block}
.weeklyFishShortcut{display:flex;align-items:center;gap:15px;margin:0 0 24px;padding:18px 22px;background:#fff9e8;border:2px solid #ffe39a;border-radius:20px;color:#4b348c;text-decoration:none}
.weeklyFishShortcut>span:first-child{font-size:32px}.weeklyFishShortcut>span:nth-child(2){flex:1}.weeklyFishShortcut strong,.weeklyFishShortcut small{display:block}.weeklyFishShortcut small{margin-top:4px;font-size:13px;color:#786a8b}
.weeklyFishActions a:focus-visible,.weeklyFishShortcut:focus-visible{outline:3px solid #3e2480;outline-offset:4px}
@media(max-width:600px){.weeklyFishCard{grid-template-columns:1fr;gap:12px;padding:19px}.weeklyFishCard>img{height:135px;width:160px;justify-self:center}.weeklyFishCopy h3{font-size:32px}.weeklyFishActions a{flex:1;padding:12px 13px}.weeklyFishShortcut{padding:15px;gap:10px}.weeklyFishShortcut strong{font-size:14px}}

/* Both weekly review games reuse their static art and assets. */
.weeklyMonsterCard{margin-top:18px;background:#fcf8ff;border-color:#e5d7f4}
.weeklyMonsterCard .weeklyFishCopy h3{color:#7041aa}
.weeklyMonsterArt{width:100%;aspect-ratio:1;background:url('games/family-monster-v1/monster-sprites-v1.webp') no-repeat 0 0/200% 100%;max-width:230px;justify-self:center}
@media(max-width:600px){.weeklyMonsterArt{width:150px;height:150px}}