/* The Today home (Adults pilot). Its own dark palette on purpose: it is the one
   screen that is a place rather than a page, so it does not follow the
   reader's light or dark setting. The header and tab bar match it only while
   it is showing (body.home-on, set in app.js render). Every text and
   background pair below is light-on-dark at 7:1 or better, or dark text on
   the white speech bubble. */

body.game-on { background: #0c1a2c; }
body.home-on main { max-width: 34rem; padding: 0 0 calc(5.5rem + env(safe-area-inset-bottom)); }
body.game-on #bar { background: #0c1a2c; border-bottom-color: #1b3150; }
body.game-on #crumb { color: #c9d7ea; }
body.game-on #bar .ghost, body.game-on #bar .panic-btn { color: #f2ede5; border-color: #4d78a8; background: transparent; }
body.game-on #tabs { background: linear-gradient(#1b3150, #0f1e33); border-top: 2px solid #e8b84a; }
body.game-on #tabs button { color: #c9d7ea; }
body.game-on #tabs button[aria-current="page"] { color: #ffd25e; }
body.game-on #tabs button.alarm { color: #ff9d85; }

.home {
  --gold: #e8b84a;
  font-family: Fredoka, ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  color: #fff;
  background: linear-gradient(#0c1a2c 0%, #18304f 28%, #24507c 60%, #3d7fa8 82%, #f2a65a 100%);
  padding: .9rem 0 1.4rem;
}

.h-hud { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding: 0 1rem .8rem; }
.h-chip {
  display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .95rem;
  padding: .3rem .8rem; border-radius: 99px; color: #fff;
  background: linear-gradient(#2c4d75, #18304f); border: 2px solid var(--gold);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.25), 0 3px 0 #0b1726;
}
.h-chip.dim { opacity: .75; border-color: #6c7f98; }

.h-room { margin: 0 .9rem; border-radius: 24px; padding: 4px; background: linear-gradient(#ffe08a, #c98a1c); box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.h-room-in { position: relative; border-radius: 20px; overflow: hidden; background: #f3d9b1; }
.h-room-in svg { display: block; width: 100%; height: auto; }
.h-stage { position: absolute; top: .6rem; left: .6rem; background: rgba(10,20,35,.82); border: 1px solid var(--gold); border-radius: 10px; padding: .15rem .6rem; font-size: .8rem; color: #fff; }
.h-meter { padding: .5rem .3rem .15rem; font-size: .8rem; color: #1b1a17; }
.h-bar { height: 10px; border-radius: 9px; background: #5a3c1c; border: 1px solid #5a3c1c; overflow: hidden; margin-top: .25rem; }
.h-bar i { display: block; height: 100%; background: linear-gradient(#fff3a8, #e89a16); }

.h-guide { display: flex; align-items: flex-end; gap: .4rem; margin: .7rem .9rem 0; position: relative; z-index: 2; }
.h-hero { height: 150px; width: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); animation: h-bob 3s ease-in-out infinite; }
.h-say { background: #fff; color: #1d2f47; border-radius: 18px 18px 18px 4px; padding: .6rem .8rem; margin-bottom: 1.6rem; box-shadow: 0 4px 0 #b8791a; font-size: .95rem; line-height: 1.3; }
.h-say b { display: block; color: #8a5a12; font-size: 1rem; margin-bottom: .1rem; }
.h-say p { margin: 0; }

.h-map { position: relative; height: 700px; margin: .3rem 0 0; }
.h-road { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-node {
  position: absolute; transform: translate(-50%, -50%); width: 64px; height: 64px; padding: 0; border: 0;
  border-radius: 50%; display: grid; place-items: center; font: 700 1.45rem/1 Fredoka, ui-sans-serif, sans-serif; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.35); cursor: default;
}
.h-node::before { content: ""; position: absolute; top: 6px; left: 12px; width: 30px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.5); }
.h-node.done { cursor: pointer; background: radial-gradient(circle at 40% 30%, #ffe9a0, #e0a21b 70%); box-shadow: 0 6px 0 #8a5a12, 0 0 0 4px #fff; color: #5a2e00; text-shadow: none; }
.h-node.now { cursor: pointer; color: #0b3318; text-shadow: none; background: radial-gradient(circle at 40% 30%, #b7f5a6, #4fc25a 70%); box-shadow: 0 6px 0 #1d6a2c, 0 0 0 4px #fff, 0 0 30px 8px rgba(160,255,140,.6); animation: h-pulse 1.6s ease-in-out infinite; }
.h-node.next { background: radial-gradient(circle at 40% 30%, #6f8fb8, #2f4d75 70%); box-shadow: 0 6px 0 #1b2f4c, 0 0 0 4px rgba(255,255,255,.6); }
/* The app's own button rule (app.css) also sets a radius and a 56px minimum, so the round nodes restate theirs at higher specificity. */
.home .h-node { border-radius: 50%; min-height: 0; border: 0; padding: 0; }
.h-node:focus-visible { outline: 4px solid #78aeed; outline-offset: 6px; }
.h-sign { position: absolute; transform: translateY(-50%); max-width: 40%; background: linear-gradient(#fff, #fdf1dc); color: #1d3550; border-radius: 12px; padding: .2rem .6rem; font-size: .82rem; line-height: 1.2; box-shadow: 0 4px 0 #b8791a; }
.h-sign.l { text-align: right; }
.h-foot { margin: .2rem 1.1rem 1rem; text-align: center; font-size: .85rem; color: #1b1a17; background: rgba(255,255,255,.9); border-radius: 12px; padding: .35rem .7rem; }

.h-play {
  position: sticky; bottom: calc(5rem + env(safe-area-inset-bottom)); z-index: 4;
  display: block; width: min(88%, 22rem); margin: 0 auto; padding: .75rem 1rem; min-height: 56px;
  border: 3px solid #fff; border-radius: 22px; cursor: pointer; text-align: center; color: #0b3318; overflow: hidden;
  background: linear-gradient(#9be88a, #4fc25a); box-shadow: 0 7px 0 #1d6a2c, 0 12px 24px rgba(0,0,0,.35); font: inherit;
}
.h-play:active { transform: translateY(4px); box-shadow: 0 3px 0 #1d6a2c, 0 6px 12px rgba(0,0,0,.35); }
.h-play:focus-visible { outline: 4px solid #78aeed; outline-offset: 4px; }
.h-play-t { display: block; font-size: 1.4rem; font-weight: 700; }
.h-play-s { display: block; font-size: .85rem; font-weight: 500; }
.h-play::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: h-shine 3s ease-in-out infinite; }

.h-calm { display: block; margin: 1.1rem auto 0; min-height: 44px; padding: .4rem 1rem; border-radius: 99px; border: 2px solid #4d78a8; background: #0d1a2a; color: #f2ede5; font: 700 .9rem Fredoka, ui-sans-serif, sans-serif; cursor: pointer; }
.h-calm:focus-visible { outline: 3px solid #78aeed; outline-offset: 3px; }

@keyframes h-bob { 50% { transform: translateY(-6px); } }
@keyframes h-pulse { 50% { transform: translate(-50%, -50%) scale(1.07); } }
@keyframes h-shine { 0% { left: -60%; } 60%, 100% { left: 130%; } }

/* Calm mode and the phone's own reduce-motion setting: same screen, no motion. */
html.calm .home *, html.calm .home *::before, html.calm .home *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .home *, .home *::before, .home *::after { animation: none !important; transition: none !important; }
}

/* Free-life explanation, opened from its chip. */
.home button.h-chip { width: auto; min-height: 44px; font: 700 .95rem Fredoka, ui-sans-serif, sans-serif; cursor: pointer; text-align: center; }
.h-note { margin: 0 1rem .8rem; padding: .5rem .8rem; border-radius: 12px; background: rgba(255,255,255,.92); color: #1b1a17; font-size: .9rem; line-height: 1.35; }

/* Chapters as a plain list at large text sizes (map gets .h-list from home.js). */
.h-step { display: contents; }
.h-map.h-list { height: auto; display: flex; flex-direction: column; gap: 1rem; padding: .5rem 1.1rem 1rem; }
.h-list .h-road { display: none; }
.h-list .h-step { display: flex; align-items: center; gap: .9rem; }
.h-list .h-node { position: static !important; transform: none !important; flex: 0 0 64px; animation: none; }
.h-list .h-sign { position: static !important; transform: none !important; max-width: none; text-align: left !important; font-size: 1rem; }

/* Windows high-contrast and other forced-colors modes: give the shapes real borders. */
@media (forced-colors: active) {
  .h-node, .h-chip, .h-play, .h-calm, .h-room { forced-color-adjust: auto; border: 2px solid CanvasText; box-shadow: none; }
  .h-node.now { border-width: 5px; }
  .h-node { background: Canvas; color: CanvasText; }
  .h-play { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .h-sign, .h-say, .h-note, .h-foot { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}

/* At large text the sticky button would cover a third of the screen: let it scroll with the page. */
.h-big .h-play { position: static; margin-top: 1rem; }