/* LET Junior — tablet and desktop layouts. Loaded after app.css; nothing here applies below 720px,
   so the phone design is untouched.
     720px+   ("duo")  Group and Me show both halves side by side, no switch. Teacher tiles wrap.
     1000px+ ("wide")  the child's Play board gets a side rail, the Map a journey panel, and the
                       teacher's Today and the parent page turn into dashboards.
   Mouse gets hover lifts (app.css already gates those on (hover: hover)); touch gets 44px targets. */

.b-rail, .map-side, .t-wide { display: none; }

@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .hs-btn { width: 46px; height: 46px; }
  .react { min-height: 44px; }
  .btn.sm { min-height: 44px; }
  .rail-more, .ms-row, .nudge-row { min-height: 48px; }
}

/* ---- wider canvas ---- */
@media (min-width: 1200px) {
  .main { max-width: 1400px; }
  .adult { max-width: 1240px; }
}
@media (min-width: 720px) { .adult { padding-bottom: 130px; } }

/* ============================ 720px+ : two halves, no switch ============================ */
@media (min-width: 720px) {
  .duo { display: grid; gap: 20px; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1180px; margin: 0 auto; }
  .duo .group-one { max-width: none; margin: 0; }
  .duo .feed.news { max-width: none; }
  .duo .map-head { margin-bottom: 14px; }
  .duo .league-one .podium { margin-bottom: 14px; }

  /* Me: the character and trophies on the left, the shop on the right; each fills the screen height */
  .me-duo { grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); height: calc(100dvh - 200px - env(safe-area-inset-bottom)); min-height: 480px; align-items: stretch; }
  .me-duo .look-one, .me-duo .shop-one { height: 100%; min-height: 0; }
  .me-duo .look-one { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .me-duo .shop-one { background: rgba(255, 255, 255, .55); border-radius: var(--radius-lg); padding: 14px 12px 4px; }
  .me-duo .shop-one .shop { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }

  /* teacher: dashboard pieces from tablet-portrait up, and activity topics side by side */
  .t-wide { display: block; }
  .nums.t-wide { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 8px; }   /* four numbers: never 3 + 1 orphan */
  .topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 18px; align-items: start; }
  .topic .acard-grid { grid-template-columns: minmax(0, 1fr); }

  /* teacher tiles and the trophy shelf: a wrapping grid you scroll down, not a strip you swipe */
  .b-teach .tile-row.hs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: minmax(150px, 1fr); gap: 12px;
    overflow-x: hidden; overflow-y: auto; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; }
  .b-teach .tile-row::after { display: none; }
  .b-teach .tile-row .atile { flex: none; min-width: 0; }
  .b-teach .hs-arrows { display: none; }
  .me-duo .trophy-shelf .tile-row.hs { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: minmax(128px, 1fr); }
  .me-duo .trophy-shelf .atile .ico { width: 60px; height: 60px; font-size: 34px; }
  .me-duo .trophy-shelf .atile h4 { font-size: 16px; }
  .me-duo .trophy-shelf .atile .sub { font-size: 12px; }
}
@media (min-width: 960px) {
  .me-duo { height: calc(100dvh - 128px); }
  .me-duo .look-one .avatar-stage { min-height: 170px; max-height: 260px; aspect-ratio: auto; height: clamp(140px, 24dvh, 260px); }
  .me-duo .look-one .avatar-stage .big { width: 150px; height: 174px; }
  .me-duo .look-one .hero-me { padding: 14px; }
  .me-duo .look-one .title-lg { font-size: 32px; }
}

/* ===================== 720–999px : tablet portrait Play board ===================== */
@media (min-width: 720px) and (max-width: 999px) {
  /* a tall screen: let the page flow instead of stretching the tiles to the bottom */
  .bento { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-template-areas: "quest quest" "world world" "teach teach" "rail rail"; gap: 16px; }
  .b-quest > .quest-card { min-height: 230px; padding: 20px 22px; justify-content: center; gap: 10px; }
  .b-quest .quest-card h3 { font-size: 40px; }
  .b-quest .quest-card .big-ico { font-size: 84px; top: 50%; translate: 0 -50%; right: 26px; }
  .b-quest .quest-card .kicker { max-width: 70%; white-space: normal; font-size: 13px; }
  .b-quest .quest-card .btn { min-height: 48px; font-size: 18px; padding: 0 28px; }
  .b-game { flex-direction: row; min-height: 120px; }
  .b-game .gi { font-size: 60px; }
  .b-teach .tile-row.hs { grid-auto-rows: 176px; overflow: visible; }
  .tile-row .atile { justify-content: center; align-items: center; text-align: center; gap: 4px; }
  .b-rail { grid-area: rail; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .rail-me { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 12px; }
  .rail-av { height: 110px; width: 100%; border-radius: 20px; display: grid; place-items: end center; overflow: hidden; background: radial-gradient(circle at 50% 118%, #9be07a 0 40%, transparent 41%), linear-gradient(#dff1ff, #bfe3ff); }
  .rail-av svg { width: 76px; height: 94px; }
  .rail-txt { justify-items: center; width: 100%; display: grid; gap: 5px; }
  .rail-txt b { font-family: var(--font-display); font-size: 22px; color: var(--ink-900); line-height: 1; }
  .rail-txt .bar { width: 100%; height: 12px; }
  .rail-txt small { font-weight: 800; font-size: 12px; color: var(--ink-500); }
  .rail-box { padding: 12px 12px 8px; align-self: stretch; }
  .rail-box .bt-head h2 { font-size: 17px; }
  .rail-more { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--brand-primary); background: #f4f0fb; padding: 6px 10px; border-radius: 99px; box-shadow: 0 3px 0 var(--ink-200); white-space: nowrap; }
  .rail-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 14px; }
  .rail-row.me { background: #fff7dc; outline: 3px solid var(--hue-gold); }
  .rail-row .m { font-size: 20px; line-height: 1; }
  .rail-row .av { width: 28px; height: 34px; flex: none; }
  .rail-row b { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 15px; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-row .xp { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--brand-primary); }
  .rail-post { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; }
  .rail-post .pic { width: 30px; height: 30px; border-radius: 10px; background: #f4f0fb; display: grid; place-items: center; font-size: 17px; flex: none; }
  .rail-post p { font-weight: 700; color: var(--ink-900); font-size: 13px; line-height: 1.25; }
  .rail-post small { display: block; font-size: 11px; color: var(--ink-500); }
}

/* =============================== 1000px+ : dashboards =============================== */
@media (min-width: 1000px) {
  .main { padding-bottom: 28px; }

  /* ---- Play: quest + minigames + teacher's tiles, with the week at a glance on the right ---- */
  .bento { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 330px; grid-template-areas: "quest world world rail" "teach teach teach rail"; }
  .b-quest .quest-card .kicker { white-space: normal; max-width: 68%; }
  .b-rail { grid-area: rail; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding: 2px 2px 12px; }
  .b-rail > * { flex: none; }
  .rail-me { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; padding: 12px 14px; box-shadow: 0 6px 0 var(--t), var(--shadow-card); }
  .rail-av { height: 108px; border-radius: 20px; display: grid; place-items: end center; overflow: hidden; cursor: pointer;
    background: radial-gradient(circle at 50% 118%, #9be07a 0 40%, transparent 41%), linear-gradient(#dff1ff, #bfe3ff); transition: transform var(--dur-med) var(--ease-bounce); }
  .rail-av svg { width: 74px; height: 92px; margin-bottom: 2px; }
  .rail-av:active { transform: scale(.94, .97); }
  @media (hover: hover) { .rail-av:hover { transform: translateY(-3px) rotate(-1.5deg); } }
  .rail-txt { display: grid; gap: 6px; justify-items: start; min-width: 0; }
  .rail-txt b { font-family: var(--font-display); font-size: 24px; color: var(--ink-900); line-height: 1; }
  .rail-txt .bar { width: 100%; height: 12px; }
  .rail-txt small { font-weight: 800; font-size: 12px; color: var(--ink-500); }
  .rail-box { padding: 12px 14px 8px; }
  .rail-box .bt-head { margin-bottom: 4px; }
  .rail-box .bt-head h2 { font-size: 18px; }
  .rail-more { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--brand-primary); background: #f4f0fb; padding: 6px 12px; border-radius: 99px;
    box-shadow: 0 3px 0 var(--ink-200); transition: transform var(--dur-fast) var(--ease-bounce); white-space: nowrap; }
  .rail-more:active { transform: translateY(3px); box-shadow: none; }
  @media (hover: hover) { .rail-more:hover { transform: translateY(-2px); } }
  .rail-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 16px; }
  .rail-row.me { background: #fff7dc; outline: 3px solid var(--hue-gold); }
  .rail-row .m { font-size: 22px; line-height: 1; }
  .rail-row .av { width: 32px; height: 38px; flex: none; }
  .rail-row b { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 16px; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-row .xp { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--brand-primary); white-space: nowrap; }
  .rail-post { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
  .rail-post .pic { width: 34px; height: 34px; border-radius: 12px; background: #f4f0fb; display: grid; place-items: center; font-size: 19px; flex: none; }
  .rail-post p { font-weight: 700; color: var(--ink-900); font-size: 14px; line-height: 1.3; }
  .rail-post small { display: block; font-size: 12px; color: var(--ink-500); }

  /* ---- Map: the winding path, with the journey list beside it ---- */
  .map-duo { display: grid; grid-template-columns: minmax(0, 600px) 340px; gap: 28px; justify-content: center; align-items: start; }
  .map-duo .map-one { max-width: none; margin: 0; }
  .map-side { display: grid; gap: 14px; position: sticky; top: 96px; }
  .ms-list { padding: 14px 12px 12px; display: grid; gap: 8px; }
  .ms-list .bt-head { padding: 0 4px; margin-bottom: 2px; }
  .ms-row { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 8px 12px 8px 8px; border-radius: 20px; background: #faf8ff;
    box-shadow: 0 4px 0 var(--ink-200); transition: transform var(--dur-med) var(--ease-bounce), box-shadow var(--dur-fast); }
  @media (hover: hover) { .ms-row:hover { transform: translateX(4px); } }
  .ms-row:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink-200); }
  .ms-row .e { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--c); box-shadow: inset 0 -4px 0 rgba(0,0,0,.14); flex: none; }
  .ms-row .t { display: grid; flex: 1; min-width: 0; }
  .ms-row b { font-family: var(--font-display); font-size: 17px; color: var(--ink-900); line-height: 1.15; }
  .ms-row small { font-weight: 800; font-size: 12px; color: var(--ink-500); }
  .ms-row.open { background: #fff; box-shadow: 0 4px 0 var(--c); outline: 3px solid var(--c); }
  .ms-row.locked { opacity: .6; }
  .ms-row.locked .e { background: #cfc9dc; filter: grayscale(.4); }
  .ms-row .here { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: #fff; background: var(--d); padding: 3px 10px; border-radius: 99px; }
  .ms-go { min-height: 56px; }
  .ms-hero { display: grid; gap: 8px; padding: 18px; }
  .ms-hero small { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .92; }
  .ms-hero h3 { font-size: 30px; max-width: 78%; }
  .ms-hero p { font-weight: 700; opacity: .95; }
  .ms-hero .big-ico { font-size: 60px; }
  .ms-hero .chip, .ms-hero .btn { justify-self: start; }
  .map-duo .world-head { display: none; }
  .ms-next { display: grid; gap: 8px; justify-items: start; padding: 18px; }
  .ms-next small { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-500); }
  .ms-next h3 { font-size: 24px; }
  .ms-next .btn { margin-top: 6px; }

  /* ---- Teacher: Today becomes a dashboard ---- */
  .t-today { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
  .t-main .fun-grid { grid-template-columns: repeat(2, 1fr); }
  .t-main .quest-card { min-height: 210px; }
  .t-main .quest-card h3 { font-size: 38px; }
  .t-rail .section-head:first-child { margin-top: 0; }
  .t-rail .cols-3 { grid-template-columns: 1fr; }
  .t-main > .section-head:first-child { margin-top: 0; }
  .nudge { display: grid; gap: 4px; padding: 8px; }
  .nudge-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; border-radius: 16px; transition: background var(--dur-fast); }
  .nudge-row:hover { background: #faf8ff; }
  .nudge-row .av { width: 38px; height: 44px; flex: none; }
  .nudge-row b { font-family: var(--font-display); font-size: 17px; color: var(--ink-900); flex: 1; }
  .t-rail .feed { gap: 10px; }
}

/* Parent: a one-screen dashboard from tablet up */
@media (min-width: 720px) {
  .adult { max-width: 1100px; }
  .adult .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .adult .grid > * { grid-column: span 12; }
  .adult .grid > .p-class, .adult .grid > .p-week { grid-column: span 7; }
  .adult .grid > .p-fb, .adult .grid > .p-prog { grid-column: span 5; }
  .adult .grid:not(:has(.p-fb)) > .p-class { grid-column: span 12; }
  .p-hero .p-av { width: 72px; height: 84px; }
}

/* 1000–1199px (tablet landscape, small laptops): quest across the top, minigames as a row, rail narrower */
@media (min-width: 1000px) and (max-width: 1199px) {
  .bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "quest quest rail" "world world rail" "teach teach rail"; }
  .b-quest > .quest-card { min-height: 170px; padding: 16px 20px; }
  .b-quest .quest-card h3 { font-size: 34px; }
  .b-quest .quest-card .big-ico { font-size: 72px; }
  .b-game { flex-direction: row; justify-content: flex-start; text-align: left; }
  .b-game .gt { justify-items: start; }
  .b-game .gi { font-size: 56px; }
  .b-teach .tile-row.hs { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-auto-rows: minmax(140px, 1fr); gap: 10px; }
  .tile-row .atile { padding: 10px 6px; }
  .tile-row .atile .ico { width: 48px; height: 48px; font-size: 28px; }
  .tile-row .atile h4 { font-size: 15px; }
  .tile-row .atile .sub { font-size: 12px; }
  .b-rail { padding-bottom: 4px; }
}

/* the child's Play board is a short window on a laptop: let the rail scroll rather than squash */
@media (min-width: 1000px) and (max-height: 700px) {
  .bento { min-height: 560px; height: auto; }
  .b-rail { overflow: visible; }
}

/* keep the teacher's lists roomy on big monitors */
@media (min-width: 1500px) {
  .t-today { grid-template-columns: minmax(0, 1fr) 400px; }
  .map-duo { grid-template-columns: minmax(0, 640px) 380px; }
}

/* ============ the game player on a big screen: same layout, bigger pieces ============ */
@media (min-width: 1000px) and (min-height: 700px) {
  .game-top { padding: 18px 28px 12px; }
  .game-top .x { width: 54px; height: 54px; font-size: 26px; }
  .game-top .bar { height: 24px; }
  .game-top .t { font-size: 18px; padding: 8px 18px; }
  .stage { gap: 30px; }
  .prompt { font-size: 28px; padding: 10px 28px; }
  .picture { width: 230px; height: 230px; font-size: 140px; border-radius: 54px; }
  .picture.speak { font-size: 104px; }
  .slots { min-height: 110px; min-width: 260px; gap: 12px; padding: 16px; }
  .slot { width: 76px; height: 84px; font-size: 44px; border-radius: 20px; }
  .tiles { max-width: 760px; gap: 14px; }
  .ltile { width: 80px; height: 86px; font-size: 44px; border-radius: 22px; }
  .wchip { font-size: 28px; padding: 14px 24px; border-radius: 22px; }
  .cards { width: min(680px, 100%); gap: 14px; }
  .mcard .fa { font-size: 44px; }
  .mcard .ba { font-size: clamp(30px, 4vw, 64px); }
  .mcard .ba.word { font-size: clamp(16px, 1.8vw, 26px); }
  .buckets { width: min(760px, 100%); gap: 20px; }
  .bucket { min-height: 210px; font-size: 32px; border-radius: 32px; }
  .bucket .cnt { font-size: 18px; }
  .sort-card { padding: 26px 42px; font-size: 42px; border-radius: 30px; }
  .timer { width: min(760px, 100%); height: 16px; }
  .pad { width: min(400px, 40dvh + 100px); }
  .traced { font-size: 56px; min-height: 68px; }
  .good { font-size: 44px; }
}