/* Lilypad Live · the app's own pages on a laptop or a big tablet held sideways (1024 px and wider): app.html, learn.html,
   money.html. Below 1024 px nothing here applies (the phone and iPad look is css/app.css, learn.css, money.css).
   - The tab bar becomes a side rail on the left: the name, a big Play button, Home, Learn, My money, and Me at the foot.
   - The home becomes a dashboard: your class on the left, your solo game on the right, the chapters in one row, Learn
     and My money side by side.
   - Sheets open in the middle of the screen as cards; a lesson opens as one big card over the page.
   - The welcome puts each picture beside its words. */

@media (min-width: 1024px) {
  body.apphome { --rail: 252px; }
  body.apphome.has-tb { padding-left: calc(var(--rail) + env(safe-area-inset-left, 0px)); }

  /* ---------- the side rail ---------- */
  body.apphome .tb { left: calc(env(safe-area-inset-left, 0px) + 18px); right: auto; top: 18px; bottom: 18px; margin: 0; width: calc(var(--rail) - 36px); height: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 18px 12px 12px; border-radius: 28px;
    background: rgba(255, 255, 255, .8); box-shadow: 0 18px 44px -18px rgba(33, 62, 140, .34), inset 0 0 0 1px rgba(255, 255, 255, .8); }
  body.apphome .tb::before { content: "First Place"; order: -3; display: flex; align-items: center; min-height: 40px; padding: 0 6px 0 54px; margin: 0 0 16px;
    background: url("../img/logo.png") 6px center / 40px auto no-repeat; font: 800 20px/1.1 var(--f-head); color: var(--navy); letter-spacing: -.01em; }
  body.apphome .tb-gap { display: none; }

  /* Play: a wide green button at the top of the rail, with its word */
  body.apphome .tb-play { order: -2; position: relative; left: auto; top: auto; width: auto; height: 58px; margin: 0 0 18px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 14px 26px -10px rgba(28, 127, 63, .55);
    transition: transform var(--t-fast, .15s) var(--ease-std), box-shadow var(--t-fast, .15s) var(--ease-std); }
  body.apphome .tb-play > span { display: grid; place-items: center; }
  body.apphome .tb-play svg { width: 24px; height: 24px; margin-left: 0; }
  body.apphome .tb-play::after { content: "Play"; font: 800 19px/1 var(--f-head); letter-spacing: -.01em; }
  body.apphome .tb-play::before { border-radius: inherit; animation-name: rail-ring; }
  @keyframes rail-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.08, 1.4); opacity: 0; } }
  body.apphome .tb-play:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -10px rgba(28, 127, 63, .6); }
  body.apphome .tb-play:active { transform: scale(.97); }

  /* the tabs: a row each, icon then word; the pill fills the row and slides between them */
  body.apphome .tb-tab { flex: none; height: 54px; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 14px 0 10px; border-radius: 18px;
    font: 600 16px/1 var(--f-head); transition: background-color var(--t-fast, .15s) var(--ease-std), color var(--t-fast, .15s) var(--ease-std); }
  body.apphome .tb-tab:not(.on):hover { background: rgba(33, 62, 140, .06); color: var(--navy); }
  body.apphome .tb-ic { width: 34px; height: 34px; flex: none; }
  body.apphome .tb-ic svg { width: 24px; height: 24px; }
  body.apphome .tb-ind { inset: 0; width: auto; height: auto; margin: 0; border-radius: 18px; }
  body.apphome .tb-av { width: 34px; height: 34px; }
  body.apphome .tb-av svg { width: 34px; height: 34px; }
  body.apphome .tb-me { order: 1; margin-top: auto; }

  /* every page: room under the content, nothing hidden behind a bottom bar any more */
  body.apphome.has-tb .ah { padding-bottom: 56px; }

  /* ---------- the home: a dashboard ---------- */
  body.apphome .ah:not(.lr):not(.mn) { width: min(1160px, 100%); padding: 40px 44px 56px;
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 32px; row-gap: 28px; align-items: stretch;
    grid-template-areas: "top top" ". hd" "class hero" "map map" "more more" "foot foot"; }
  .ah-top { grid-area: top; }
  .ah-hi h1 { font-size: 34px; }
  .ah-hi small { font-size: var(--t-body); }
  .ah-solo { display: contents; }
  .ah-solo > .ah-sec-hd { grid-area: hd; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; align-self: end; }
  .ah-sec-hd h2 { font-size: 28px; flex: none; }
  .ah-levels { flex: 0 1 420px; }

  /* your class: a tall navy card, the classmates big over its top, the code box at its foot */
  .ah-class { grid-area: class; margin-top: 0; padding: 30px 28px 28px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; }
  .ah-class h2 { font-size: 34px; max-width: none; margin-top: 110px; }
  .ah-class-art { width: 280px; top: -84px; right: -10px; }
  .ah-join { margin-top: 22px; }
  .ah-join .ah-code { height: 58px; font-size: 26px; }
  .ah-join-go { min-height: 58px; padding: 0 22px 0 26px; font-size: var(--t-lg); }

  /* your solo game: the next thing, big */
  .ah-solo > .ah-hero { grid-area: hero; margin-top: 0; min-height: 300px; padding: 30px 30px 28px; gap: 18px; }
  .ah-hero-art { width: 320px; top: -44px; right: 8px; }
  .ah-hero.t-coral .ah-hero-art { width: 280px; top: -40px; right: 26px; }
  .ah-hero-tx { max-width: 54%; }
  .ah-hero-tx h3 { font-size: 42px; }
  .ah-hero-tx small, .ah-hero-tx p { font-size: var(--t-body); }
  .ah-hero .ah-bar { width: 220px; }
  .ah-go { min-height: 56px; padding: 0 24px 0 28px; font-size: var(--t-lg); }

  /* the chapters: all four in one row, no swiping */
  .ah-solo > .ah-map { grid-area: map; margin: 4px 0 0; padding: 0; overflow: visible; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; scroll-snap-type: none; }
  .ah-stop { transform: none; flex: none; }
  .ah-ch { border-radius: 26px; transition: transform var(--t-base, .25s) var(--ease-std), box-shadow var(--t-base, .25s) var(--ease-std); }
  .ah-ch-pic { height: 168px; }
  .ah-ch-pic img { width: 178px; height: 178px; margin-top: 12px; transition: transform var(--t-slow, .45s) var(--ease-std); }
  .ah-ch-pic .ic { width: 88px; height: 88px; }
  .ah-ch-tx { padding: 14px 18px 2px; gap: 3px; }
  .ah-ch-tx small { font-size: var(--t-md); }
  .ah-ch-tx b { font-size: var(--t-xl); }
  .ah-st-line, .ah-st-res, .ah-st-now { font-size: var(--t-md); }
  button.ah-ch:hover { transform: translateY(-4px); box-shadow: 0 20px 34px -16px rgba(33, 62, 140, .4), inset 0 0 0 1px rgba(33, 62, 140, .05); }
  button.ah-ch.here:hover { box-shadow: 0 20px 34px -14px var(--cs), inset 0 0 0 3px var(--c1); }
  button.ah-ch:hover .ah-ch-pic img { transform: translateY(-6px) scale(1.04); }

  /* Learn and My money: side by side across the page */
  .ah-more { grid-area: more; margin-top: 40px; gap: 24px; }
  .ah-tile { min-height: 210px; padding: 24px 26px; transition: transform var(--t-base, .25s) var(--ease-std); }
  .ah-tile:hover { transform: translateY(-4px); }
  .ah-tile-art { width: 210px; top: -58px; right: 18px; }
  .ah-tile b { font-size: 30px; }
  .ah-tile-n { font-size: var(--t-body); }
  .ah-foot { grid-area: foot; align-items: center; }

  /* ---------- Learn and My money: the title and its art a little bigger ---------- */
  .pg-top { min-height: 190px; padding-right: 260px; }
  .pg-tx h1 { font-size: 48px; }
  .pg-tx p { font-size: var(--t-lg); }
  .pg-art { width: 230px; margin-top: -118px; right: 0; }
  body.apphome .ah.lr { width: min(1120px, 100%); padding-left: 44px; padding-right: 44px; padding-top: 32px; }
  body.apphome .lr-switch { margin: 0 -44px; padding-left: 44px; padding-right: 44px; }
  /* each chapter's card stays in view beside its list (learn.css made it relative, so its sticky offset pushed it down) */
  body.apphome .lr-hero { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 136px); }
  body.apphome .ah.mn.mn-home { width: min(1120px, 100%); padding: 32px 44px 56px; }
  body.apphome .ah.mn:not(.mn-home) { padding-top: 32px; }

  /* ---------- sheets: a card in the middle of the screen; a lesson: one big card over the page ---------- */
  body.apphome .solo-sheet:not(.lr-ls) { align-items: center; padding: 24px; }
  body.apphome .solo-sheet:not(.lr-ls) .solo-sheet-in { width: min(520px, 100%); max-height: calc(100% - 48px); border-radius: 30px; padding: 30px 28px 26px;
    box-shadow: 0 40px 90px -24px rgba(16, 24, 40, .5); transform: translateY(18px) scale(.97); }
  body.apphome .solo-sheet.on:not(.lr-ls) .solo-sheet-in { transform: none; }
  body.apphome .solo-sheet.lr-ls { align-items: center; justify-content: center; padding: 28px; background: rgba(16, 24, 40, .42); }
  body.apphome .lr-ls-in { width: min(1220px, 100%); height: min(880px, 100%); border-radius: 32px; box-shadow: 0 40px 100px -24px rgba(16, 24, 40, .55); }

  /* ---------- the welcome: the picture beside its words ---------- */
  .wl-in { width: min(1080px, 100%); padding-top: 24px; padding-bottom: 40px; }
  .wl-top { padding: 0 24px 0 40px; }
  .wl-name { font-size: var(--t-xl); }
  .wl-slide { flex-direction: row; align-items: center; justify-content: center; gap: 56px; padding: 8px 56px; }
  .wl-img { flex: 0 0 auto; width: min(46vw, 460px); height: min(60vh, 460px); }
  .wl-glow { width: min(40vw, 420px); }
  .wl-art { width: min(44vw, 460px); }
  .wl-tx { flex: 0 1 400px; text-align: left; gap: 14px; }
  .wl-tx h2 { font-size: 48px; }
  .wl-tx p { font-size: var(--t-2xl, 22px); }
  .wl-foot { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 56px; }
  .wl-foot .btn { width: 300px; flex: none; }
}

/* 1024 to 1279 (a small laptop, an iPad held sideways): a slim rail, icons over their words, so the content keeps its room */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.apphome { --rail: 112px; }
  body.apphome .tb { padding: 16px 8px 10px; align-items: stretch; }
  body.apphome .tb::before { content: ""; min-height: 34px; padding: 0; margin: 0 0 14px; background-position: center; background-size: 44px auto; }
  body.apphome .tb-play { align-self: center; width: 62px; height: 62px; margin: 0 0 16px; border-radius: 50%; }
  body.apphome .tb-play::after { content: none; }
  body.apphome .tb-play svg { width: 28px; height: 28px; margin-left: 3px; }
  body.apphome .tb-play::before { animation-name: fab-ring; }
  body.apphome .tb-tab { height: 68px; flex-direction: column; justify-content: center; gap: 4px; padding: 0; font-size: 12.5px; }
  body.apphome .tb-ind { inset: 2px 4px; }

  body.apphome .ah:not(.lr):not(.mn) { padding: 32px 32px 48px; column-gap: 24px; }
  .ah-class { padding: 26px 22px 22px; }
  .ah-class h2 { font-size: 29px; margin-top: 96px; }
  .ah-class-art { width: 230px; top: -70px; }
  .ah-join .ah-code { font-size: 22px; padding-left: 14px; }
  .ah-join-go { padding: 0 16px 0 20px; }
  .ah-solo > .ah-hero { padding: 26px 24px 24px; min-height: 280px; }
  .ah-hero-art { width: 250px; top: -36px; right: 0; }
  .ah-hero.t-coral .ah-hero-art { width: 220px; top: -34px; right: 10px; }
  .ah-hero-tx h3 { font-size: 34px; }
  .ah-levels { flex-basis: 360px; }
  .ah-sec-hd h2 { font-size: 25px; }
  .ah-solo > .ah-map { gap: 14px; }
  .ah-ch-pic { height: 140px; }
  .ah-ch-pic img { width: 148px; height: 148px; }
  .ah-ch-tx { padding: 12px 14px 2px; }
  .ah-tile-art { width: 170px; top: -48px; }
  body.apphome .ah.lr, body.apphome .ah.mn.mn-home { padding-left: 32px; padding-right: 32px; }
  body.apphome .lr-switch { margin: 0 -32px; padding-left: 32px; padding-right: 32px; }
  .pg-top { padding-right: 220px; }
  .pg-art { width: 200px; margin-top: -104px; }
}

/* a very wide screen: a little more room around everything */
@media (min-width: 1600px) {
  body.apphome { --rail: 272px; }
  body.apphome .ah:not(.lr):not(.mn) { width: min(1240px, 100%); column-gap: 40px; }
  .ah-class-art { width: 320px; top: -96px; }
  .ah-hero-art { width: 360px; top: -76px; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  body.apphome .tb-play, .ah-ch, .ah-ch-pic img, .ah-tile { transition: none; }
  body.apphome .tb-play:hover, button.ah-ch:hover, .ah-tile:hover, button.ah-ch:hover .ah-ch-pic img { transform: none; }
  body.apphome .solo-sheet:not(.lr-ls) .solo-sheet-in { transform: none; }
}
@media (min-width: 1024px) { html.calm body.apphome .tb-play:hover, html.calm button.ah-ch:hover, html.calm .ah-tile:hover, html.calm button.ah-ch:hover .ah-ch-pic img { transform: none; } }