/* Hero Harbor — original modern game-world presentation */
:root {
  --bg: #0b1f4b;
  --panel: #12366e;
  --panel2: #174786;
  --text: #fffdf7;
  --muted: #d6e7ff;
  --line: rgba(255,255,255,.3);
  --red: #ff4f7b;
  --gold: #ffd84d;
  --blue: #52c9ff;
  --mint: #66edbe;
  --violet: #ad7cff;
  --radius: 28px;
  color-scheme: dark;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
}

body {
  background:
    radial-gradient(circle at 15% 8%, rgba(82,201,255,.28), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(173,124,255,.2), transparent 27%),
    linear-gradient(180deg, #071a43 0, #0b2c62 52%, #071630 100%);
  background-attachment: fixed;
}
.ambient-a { background: radial-gradient(circle, rgba(255,216,77,.21), transparent 63%); }
.ambient-b { background: radial-gradient(circle, rgba(82,201,255,.22), transparent 62%); }

.topbar {
  border: 2px solid rgba(255,255,255,.34);
  background: rgba(7,25,62,.86);
  box-shadow: 0 8px 0 rgba(3,13,35,.7), 0 22px 70px rgba(0,0,0,.26);
  backdrop-filter: blur(18px) saturate(160%);
}
.sigil {
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff688f, #d92058);
  box-shadow: 0 4px 0 #8e1339, 0 8px 24px rgba(255,79,123,.35);
}
.wordmark strong { font-size: 1.05rem; letter-spacing: .01em; }
.topbar nav button {
  border: 2px solid transparent;
  border-radius: 16px;
  color: #d9e8ff;
  font-weight: 900;
}
.topbar nav button span { color: var(--gold); font-size: .85rem; }
.topbar nav button:hover,
.topbar nav button[aria-current=true] {
  border-color: rgba(255,255,255,.25);
  background: #1a4d90;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
  transform: translateY(-1px);
}
.passport {
  display: grid;
  min-width: 86px;
  padding: .35rem .65rem;
  border: 2px solid #fff4a8;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffde55, #f2aa24);
  color: #492b00;
  text-align: center;
  box-shadow: 0 4px 0 #a66d0b;
}
.passport span { font-size: .54rem; font-weight: 950; letter-spacing: .12em; }
.passport strong { font-size: .82rem; }
.round-button { border: 2px solid rgba(255,255,255,.4); background: #1a4d90; box-shadow: 0 4px 0 #062150; }

.view { padding-top: 9rem; }
.kicker, .mini-label { color: #ffe46b; font-weight: 950; }
.section-head h2 { letter-spacing: -.06em; text-shadow: 0 5px 0 rgba(4,18,48,.45); }

.guide-intro {
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.4rem;
  padding: .55rem 1rem .55rem .55rem;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 999px 999px 999px 20px;
  background: rgba(255,255,255,.14);
  box-shadow: 0 5px 0 rgba(2,16,45,.35);
}
.guide-intro p { margin: 0; color: #e8f4ff; font-size: .82rem; line-height: 1.25; }
.guide-intro strong { color: #fff; }
.guide-face {
  position: relative;
  display: flex;
  width: 48px;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #65dcff, #3f7dff);
  box-shadow: inset 0 -7px 0 rgba(0,0,0,.12);
}
.guide-face i { width: 6px; height: 9px; border-radius: 50%; background: #07183a; }
.guide-face::after {
  content: "";
  position: absolute;
  bottom: 10px;
  width: 16px;
  height: 7px;
  border-bottom: 3px solid #07183a;
  border-radius: 50%;
}
.home-copy h1 {
  font-size: clamp(4.2rem,8.4vw,9.2rem);
  line-height: .82;
  letter-spacing: -.075em;
  text-shadow: 0 7px 0 rgba(3,16,45,.42);
}
.home-copy h1 em { background: linear-gradient(90deg,#fff,#ffe46b 42%,#6ceac2 80%); background-clip: text; }
.intro { color: #e2efff; }
.home-status {
  width: max-content;
  max-width: 100%;
  padding: .45rem .55rem .45rem 1rem;
  border: 2px solid rgba(255,255,255,.23);
  border-radius: 999px;
  background: rgba(3,17,47,.36);
}
.portal-stack {
  gap: 1rem;
  padding: 1rem;
  border: 3px solid rgba(255,255,255,.4);
  border-radius: 38px;
  background: rgba(255,255,255,.12);
  box-shadow: 0 12px 0 rgba(3,16,45,.55), 0 45px 100px rgba(0,0,0,.3);
  transform: perspective(1000px) rotateY(-3deg);
}
.portal-card {
  min-height: 220px;
  border: 3px solid rgba(255,255,255,.82);
  border-radius: 30px;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.14), 0 7px 0 rgba(4,18,45,.45);
  transition: transform .2s ease, filter .2s ease;
}
.portal-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(255,255,255,.34);
  border-radius: 21px;
  pointer-events: none;
}
.portal-card::after { width: 130px; right: -45px; bottom: -55px; border: 3px solid rgba(255,255,255,.24); filter: none; }
.portal-card b {
  position: absolute;
  right: 1.1rem;
  top: 1rem;
  display: grid;
  width: 46px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  font-size: 1.35rem;
}
.portal-card:hover { transform: translateY(-7px) rotate(-1deg) scale(1.025); filter: saturate(1.15); }
.portal-card:active { transform: translateY(2px); box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 2px 0 rgba(4,18,45,.5); }
.portal-card strong { max-width: 8ch; margin-top: 3.2rem; font-size: clamp(1.7rem,2.5vw,2.7rem); line-height: .88; letter-spacing: -.04em; }
.portal-courage { background: linear-gradient(145deg,#ff668c,#e8295d); }
.portal-wonder { background: linear-gradient(145deg,#ad7cff,#7045d4); }
.portal-joy { background: linear-gradient(145deg,#4bd5ff,#167fda); }
.portal-together { background: linear-gradient(145deg,#ffe86c,#f6b931); }
.room-dock { position: absolute; right: 0; bottom: 1.25rem; display: flex; gap: .5rem; }
.room-dock button {
  min-height: 44px;
  padding: .55rem .8rem;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 15px;
  background: rgba(8,32,77,.75);
  color: #e7f3ff;
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(2,13,35,.5);
}
.room-dock button span { color: var(--gold); }
.room-dock button:hover { border-color: #fff; transform: translateY(-2px); }

.story-empty,.trail-panel,.scene-card,.choice-panel,.heart-orb,.heart-note,.memory-stream {
  border-width: 3px;
  border-color: rgba(255,255,255,.32);
  box-shadow: 0 8px 0 rgba(3,16,43,.45);
}
.story-empty { background: rgba(255,255,255,.11); }
.mission-card { border: 3px solid rgba(255,255,255,.28); background: linear-gradient(160deg,#1f5596,#143c79); box-shadow: 0 5px 0 #071c49; }
.mission-card:hover { border-color: #ffe46b; transform: translateY(-4px) rotate(-.5deg); }
.scene-card { background: radial-gradient(circle at 84% 14%,rgba(255,216,77,.3),transparent 23%),linear-gradient(150deg,#245b9d,#102b61); }
.scene-number { color: #ffe46b; font-weight: 950; }
.scene-card h3 { text-shadow: 0 6px 0 rgba(4,17,46,.45); }
.scene-question { padding: 1rem; border: 2px solid rgba(255,255,255,.22); border-radius: 20px; background: rgba(3,17,48,.28); }
.scene-question span { color: #ffe46b; }
.choice { border: 2px solid rgba(255,255,255,.28); background: #173f78; box-shadow: 0 4px 0 #061a44; }
.choice:hover { border-color: #ffe46b; background: #24548f; transform: translateY(-2px); }
.learning-game {
  margin-top: 1.2rem;
  padding: 1rem;
  border: 3px solid #ffe46b;
  border-radius: 22px;
  background: linear-gradient(160deg,#392a74,#223c83);
  box-shadow: 0 6px 0 #10163e;
}
.game-badge { display: inline-block; padding: .3rem .55rem; border-radius: 999px; background: #ffe46b; color: #4a2c00; font-size: .58rem; font-weight: 950; letter-spacing: .1em; }
.learning-game > p { margin: .7rem 0; font-weight: 850; }
.learning-options { display: grid; gap: .45rem; }
.learning-options button,.learning-actions button {
  min-height: 44px;
  padding: .55rem .7rem;
  border: 2px solid rgba(255,255,255,.32);
  border-radius: 13px;
  background: rgba(255,255,255,.11);
  color: #fff;
  text-align: left;
  font-weight: 800;
  cursor: pointer;
}
.learning-options button:hover:not(:disabled),.learning-actions button:hover { border-color: #fff; background: rgba(255,255,255,.2); }
.learning-options button.try-again { border-color: #ff9eb4; }
.learning-options button.correct,.learning-game.solved { border-color: #73f0bf; background: linear-gradient(160deg,#145d66,#224b82); }
.learning-options button:disabled { opacity: .72; }
.learning-actions { display: flex; gap: .4rem; margin-top: .55rem; }
.learning-actions button { min-height: 38px; padding: .35rem .55rem; color: #dceaff; font-size: .72rem; }
.learning-result { min-height: 2.5em; color: #d7e8ff; font-size: .73rem; font-weight: 700; }
.story-meter > div { height: 9px; border: 2px solid rgba(255,255,255,.25); background: #071a40; }
.story-meter i { background: linear-gradient(90deg,#ff5f88,#ffe46b,#63e7bd); }

.graph-stage { border: 3px solid rgba(255,255,255,.36); background: radial-gradient(circle at 50% 50%,rgba(82,201,255,.2),transparent 36%),linear-gradient(180deg,#102e68,#071a40); box-shadow: 0 10px 0 rgba(3,14,37,.55); }
.graph-detail { border: 3px solid rgba(255,255,255,.32); background: rgba(11,39,87,.9); box-shadow: 0 6px 0 rgba(3,15,40,.55); }
.graph-hint,.private-pill { border-width: 2px; background: #102e68; }
.graph-access { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; margin-top: 1.3rem; padding: 1.1rem; border: 3px solid rgba(255,255,255,.3); border-radius: 24px; background: rgba(12,42,91,.75); box-shadow: 0 6px 0 rgba(3,15,40,.5); }
.graph-access h3 { margin: 0; font-size: 1.35rem; }
#graph-access-list { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--muted); }
#graph-access-list button { min-height: 44px; padding: .5rem .7rem; border: 2px solid rgba(255,255,255,.3); border-radius: 14px; background: #174a88; color: #fff; font-weight: 800; cursor: pointer; }
#graph-access-list button:hover { border-color: #ffe46b; }

.heart-orb { background: radial-gradient(circle,#ff658b 0,#bf2862 38%,#541f6e 72%); }
.feeling-wheel button { border: 3px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); box-shadow: 0 4px 0 rgba(36,8,55,.5); font-weight: 900; }
.feeling-wheel button:hover,.feeling-wheel button.selected { border-color: #ffe46b; background: #ffdf58; color: #3d2600; }
.heart-note textarea,.graph-search input,.library-tools input,.library-tools select { border: 3px solid rgba(255,255,255,.34); background: #09265b; }
.private-pill { max-width: 320px; color: #9ff6d7; text-align: center; }

.library-grid { gap: 1rem; }
.title-card { border: 3px solid rgba(255,255,255,.28); border-radius: 26px; background: linear-gradient(150deg,#1c5092,#102f68); box-shadow: 0 6px 0 #061941; transition: transform .2s ease,border-color .2s ease; }
.title-card::before { content: "DOORWAY"; position: absolute; left: 1rem; top: 3.1rem; padding: .24rem .45rem; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .52rem; font-weight: 950; letter-spacing: .1em; }
.title-card:hover { border-color: #ffe46b; transform: translateY(-6px) rotate(.5deg); }
.title-card h3 { text-shadow: 0 3px 0 rgba(3,15,40,.45); }
.title-card .connection-count { color: #ffe46b; font-weight: 850; }
dialog { border: 3px solid rgba(255,255,255,.38); background: linear-gradient(160deg,#174786,#0c285c); box-shadow: 0 12px 0 rgba(3,15,40,.55),0 40px 120px rgba(0,0,0,.6); }
.soft-button,.primary-button,.danger-button,.import-button { border-width: 2px; box-shadow: 0 4px 0 rgba(3,15,40,.52); }
.primary-button { background: linear-gradient(180deg,#ff668b,#dc2254); }

body.extra-contrast { --muted: #fff; --line: rgba(255,255,255,.7); }
body.simple-mode .guide-intro,body.simple-mode .room-dock,body.simple-mode .portal-card::before { display: none; }
body.simple-mode .portal-card,body.simple-mode .mission-card,body.simple-mode .title-card,body.simple-mode .learning-game { box-shadow: none; }
body.simple-mode .portal-stack { background: #0d326d; }

@media (max-width: 1100px) {
  .room-dock { position: static; grid-column: 1/-1; justify-content: center; }
  .passport { display: none; }
  .story-player { grid-template-columns: 190px minmax(0,1fr); }
}
@media (max-width: 780px) {
  .topbar nav button { font-size: .7rem; }
  .topbar nav button span { display: inline; }
  .home-view { padding-top: 8.5rem; }
  .guide-intro { margin-top: 1rem; }
  .home-copy h1 { font-size: clamp(3.8rem,17vw,6.8rem); }
  .portal-stack { border-radius: 30px; }
  .portal-card { min-height: 175px; }
  .room-dock { flex-wrap: wrap; }
  .story-player { grid-template-columns: 1fr; }
  .choice-panel { grid-column: auto; }
  .learning-options { grid-template-columns: 1fr 1fr; }
  .scene-card { min-height: 540px; }
  .graph-access { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .topbar nav button { padding: .55rem .35rem; font-size: .62rem; }
  .topbar nav button span { display: none; }
  .portal-card { min-height: 155px; border-width: 2px; }
  .portal-card b { width: 34px; font-size: 1rem; }
  .portal-card strong { font-size: 1.35rem; }
  .room-dock button { flex: 1 1 45%; }
  .learning-options { grid-template-columns: 1fr; }
  .guide-intro { border-radius: 24px; }
  .guide-face { width: 42px; }
  .section-head h2 { font-size: clamp(2.6rem,14vw,4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .portal-card,.title-card,.mission-card,.room-dock button,.topbar nav button { transform: none!important; }
}

.reward-jar {
  grid-column: 1/-1;
  padding: clamp(1.2rem,3vw,2rem);
  border: 3px solid rgba(255,255,255,.38);
  border-radius: 30px;
  background: linear-gradient(145deg,#164d89,#17366f);
  box-shadow: 0 9px 0 rgba(3,16,43,.5);
}
.reward-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.reward-heading h3 { margin: .2rem 0; font-size: clamp(1.7rem,4vw,3rem); line-height: 1; }
.reward-heading p { max-width: 62ch; color: var(--muted); }
.reward-heading > span { display: grid; flex: 0 0 84px; aspect-ratio: 1; place-items: center; border: 4px solid #fff6aa; border-radius: 50%; background: linear-gradient(145deg,#ffe66c,#eea92d); color: #5d3600; font-size: 2.3rem; box-shadow: 0 6px 0 #96610d; }
.add-explorer { margin: 1.2rem 0; padding: 1rem; border: 2px solid rgba(255,255,255,.25); border-radius: 20px; background: rgba(4,24,59,.25); }
.add-explorer label { display: block; margin-bottom: .45rem; font-weight: 900; }
.add-explorer > div,.chore-form { display: flex; gap: .5rem; }
.add-explorer input,.chore-form input,.chore-form select { min-height: 48px; flex: 1; padding: .65rem .8rem; border: 2px solid rgba(255,255,255,.38); border-radius: 14px; background: #09265b; color: #fff; }
.add-explorer button,.chore-form button,.family-member button,.movie-pick-status button,.goal-presets button,.goal-card button {
  min-height: 44px;
  padding: .55rem .75rem;
  border: 2px solid rgba(255,255,255,.34);
  border-radius: 14px;
  background: #1e5ba0;
  color: #fff;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(3,17,47,.45);
}
.family-members { display: grid; gap: .65rem; }
.family-member { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem; border: 2px solid rgba(255,255,255,.24); border-radius: 18px; background: rgba(255,255,255,.08); }
.family-member strong,.family-member span { display: block; }
.family-member span { color: var(--muted); font-size: .75rem; }
.family-member > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.family-member button:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.movie-pick-status { margin-top: 1rem; padding: 1rem; border: 2px dashed #ffe46b; border-radius: 18px; background: rgba(255,216,77,.09); }
.movie-pick-status p { margin: .35rem 0; color: var(--muted); }
.pick-history { display: grid; gap: .4rem; margin-top: 1rem; }
.pick-history > div { padding: .55rem .7rem; border-radius: 12px; background: rgba(255,255,255,.07); }
.pick-history time { color: var(--muted); font-size: .7rem; }
.motivation-tools { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1rem; margin-top: 1.2rem; }
.goal-shelf,.chore-board { padding: 1rem; border: 2px solid rgba(255,255,255,.26); border-radius: 22px; background: rgba(4,24,59,.28); }
.goal-presets { display: grid; grid-template-columns: 1fr; gap: .45rem; }
.goal-presets button { text-align: left; }
.family-goal { margin-top: .8rem; }
.goal-card { padding: .8rem; border: 2px solid #79edc2; border-radius: 16px; background: rgba(54,209,156,.1); }
.goal-card strong,.goal-card span { display: block; }
.goal-card span { color: var(--muted); font-size: .75rem; }
.goal-meter { height: 12px; margin: .65rem 0; border: 2px solid rgba(255,255,255,.3); border-radius: 999px; background: #071a40; overflow: hidden; }
.goal-meter i { display: block; height: 100%; background: linear-gradient(90deg,#62e6bc,#ffe061); }
.chore-form { display: grid; grid-template-columns: 1fr .75fr auto; }
.chore-list { display: grid; gap: .45rem; margin-top: .8rem; }
.chore { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; padding: .6rem; border: 2px solid rgba(255,255,255,.2); border-radius: 15px; background: rgba(255,255,255,.06); }
.chore > button { width: 44px; min-height: 44px; border: 2px solid rgba(255,255,255,.34); border-radius: 12px; background: #174a88; color: #fff; font-size: 1.15rem; cursor: pointer; }
.chore strong,.chore span { display: block; }
.chore span { color: var(--muted); font-size: .7rem; }
.chore.done { border-color: #79edc2; background: rgba(54,209,156,.1); }
.chore.done strong { text-decoration: line-through; text-decoration-thickness: 2px; }
.local-note { margin: 1rem 0 0; color: #c9ddfb; font-size: .68rem; }
.family-pick-banner { margin: 1rem 0; padding: 1rem; border: 3px solid #ffe46b; border-radius: 20px; background: linear-gradient(145deg,#49367e,#214b86); }
.family-pick-banner p { color: #e5efff; }

.family-night-cta { margin-top: 1.2rem; padding: .85rem 1.1rem; border-radius: 18px; font-size: 1rem; box-shadow: 0 6px 0 #8d1239; }
.planner-progress { min-width: 220px; color: var(--muted); font-size: .75rem; font-weight: 850; }
.planner-progress > div { height: 11px; margin-top: .45rem; overflow: hidden; border: 2px solid rgba(255,255,255,.3); border-radius: 999px; background: #06173a; }
.planner-progress i { display: block; height: 100%; background: linear-gradient(90deg,#ff5f88,#ffe46b,#63e7bd); transition: width .25s ease; }
.planner-shell { max-width: 1050px; margin: 0 auto; padding: clamp(1.1rem,3vw,2rem); border: 3px solid rgba(255,255,255,.38); border-radius: 34px; background: linear-gradient(155deg,#174a88,#102e68); box-shadow: 0 10px 0 rgba(3,15,40,.55); }
.planner-guide { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem; padding: .7rem; border: 2px solid rgba(255,255,255,.25); border-radius: 22px; background: rgba(255,255,255,.08); }
.planner-guide strong { color: #ffe46b; }
.planner-guide p { margin: .15rem 0 0; color: var(--muted); }
.planner-step h3 { max-width: 18ch; margin: .25rem 0 1.2rem; font-size: clamp(2rem,5vw,4.6rem); line-height: .95; letter-spacing: -.05em; }
.planner-options { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.planner-options button { min-height: 125px; padding: 1rem; border: 3px solid rgba(255,255,255,.27); border-radius: 22px; background: linear-gradient(150deg,#1d5598,#143a73); color: #fff; text-align: left; cursor: pointer; box-shadow: 0 5px 0 #061941; }
.planner-options button:hover,.planner-options button.selected { border-color: #ffe46b; background: linear-gradient(150deg,#2b6ab3,#754bc5); transform: translateY(-2px); }
.planner-options button.selected::before { content: "✓ "; color: #ffe46b; font-weight: 950; }
.planner-options strong,.planner-options span { display: block; }
.planner-options strong { font-size: 1.2rem; }
.planner-options span { margin-top: .35rem; color: #d9e9ff; }
.comfort-needs { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: 1rem; padding: 1rem; border: 2px solid rgba(255,255,255,.25); border-radius: 20px; }
.comfort-needs legend { padding: 0 .4rem; color: #ffe46b; font-weight: 900; }
.comfort-needs label { display: flex; min-height: 44px; align-items: center; gap: .5rem; }
.comfort-needs input { width: 22px; height: 22px; }
.planner-controls { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.2rem; }
.planner-controls button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.planner-result h3 { max-width: 15ch; font-size: clamp(2.8rem,7vw,6.5rem); text-shadow: 0 6px 0 rgba(3,15,40,.45); }
.plan-reason { color: #ffe46b; font-size: 1.05rem; font-weight: 850; }
.plan-facts { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0; }
.plan-facts span { padding: .4rem .6rem; border: 2px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.09); font-size: .72rem; }
.plan-boundary { margin: 1rem 0; padding: .8rem; border: 2px solid #ffe46b; border-radius: 16px; background: rgba(255,216,77,.1); color: #f4f7ff; }
.alternate-picks { margin-top: 1.2rem; }
.alternate-picks button { display: inline-flex; min-height: 62px; flex-direction: column; justify-content: center; margin: 0 .4rem .4rem 0; padding: .55rem .7rem; border: 2px solid rgba(255,255,255,.3); border-radius: 14px; background: #174a88; color: #fff; text-align: left; cursor: pointer; }
.alternate-picks span { color: var(--muted); font-size: .68rem; }
.plan-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.3rem; }
.offline-shelf { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1.5rem; padding: 1.2rem; border: 3px solid rgba(255,255,255,.3); border-radius: 26px; background: rgba(8,32,77,.75); box-shadow: 0 6px 0 rgba(3,15,40,.5); }
.offline-shelf h3 { margin: .15rem 0; font-size: 1.55rem; }
.offline-shelf p { margin: .25rem 0; color: var(--muted); }
.offline-shelf > div:last-child { display: flex; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 900px) {
  .motivation-tools { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .reward-heading { align-items: flex-start; }
  .reward-heading > span { flex-basis: 58px; font-size: 1.5rem; }
  .family-member { align-items: flex-start; flex-direction: column; }
  .family-member > div:last-child { justify-content: flex-start; }
  .chore-form { grid-template-columns: 1fr; }
  .add-explorer > div { align-items: stretch; flex-direction: column; }
  .planner-options,.comfort-needs { grid-template-columns: 1fr; }
  .offline-shelf { align-items: flex-start; flex-direction: column; }
}

.family-messenger {
  grid-column: 1/-1;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.38);
  border-radius: 30px;
  background: #eaf4ff;
  color: #0a2452;
  box-shadow: 0 9px 0 rgba(3,16,43,.5);
}
.family-messenger > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem; background: linear-gradient(180deg,#2868b8,#17447f); color: #fff; }
.family-messenger > header h3 { margin: .2rem 0; font-size: clamp(1.6rem,4vw,2.7rem); }
.family-messenger > header p { margin: .25rem 0; color: #dcecff; }
.family-messenger .mini-label { color: #ffe56b; }
.local-lock { padding: .4rem .6rem; border: 2px solid #9ff6d7; border-radius: 999px; color: #b7ffe5; font-size: .62rem; font-weight: 950; letter-spacing: .09em; white-space: nowrap; }
.chat-locked { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1.5rem; }
.chat-logo { display: grid; width: 82px; aspect-ratio: 1; place-items: center; border: 4px solid #fff; border-radius: 24px; background: linear-gradient(145deg,#ff5f89,#7b5ee9); color: #fff; font-size: 1.6rem; font-weight: 950; box-shadow: 0 6px 0 #233d77; }
.chat-locked h4 { margin: 0; font-size: 1.4rem; }
.chat-locked label { display: block; margin: .65rem 0 .3rem; font-weight: 900; }
.chat-unlock-row { display: flex; gap: .5rem; }
.chat-unlock-row input { min-height: 48px; flex: 1; padding: .65rem .8rem; border: 3px solid #2e5f9e; border-radius: 14px; background: #fff; color: #07183a; }
.chat-unlock-row button,.chat-compose button,.quick-messages button,.chat-room aside button,.family-messenger > footer button { min-height: 44px; padding: .55rem .75rem; border: 2px solid #18477f; border-radius: 13px; background: linear-gradient(180deg,#3f7dcc,#20599d); color: #fff; font-weight: 850; cursor: pointer; box-shadow: 0 3px 0 #123b72; }
#chat-lock-status { color: #9e1745; font-weight: 800; }
.chat-room { display: grid; grid-template-columns: 190px 1fr; min-height: 480px; border-top: 3px solid #173f78; border-bottom: 3px solid #173f78; }
.chat-room[hidden],.chat-locked[hidden],.chat-commands[hidden] { display: none; }
.chat-room aside { display: flex; flex-direction: column; gap: .55rem; padding: 1rem; background: #d5e9ff; border-right: 3px solid #7ea6d6; }
.chat-room aside .mini-label { color: #17447f; }
#chat-buddies { display: grid; gap: .35rem; flex: 1; }
#chat-buddies > div { display: flex; align-items: center; gap: .45rem; padding: .45rem; border: 2px solid #a4c2e5; border-radius: 12px; background: #fff; font-weight: 800; }
#chat-buddies i { width: 10px; aspect-ratio: 1; border-radius: 50%; background: #25b96e; box-shadow: 0 0 0 3px #c8f5dc; }
.chat-room > section { display: grid; grid-template-rows: 1fr auto auto; min-width: 0; background: #f8fbff; }
.chat-log { max-height: 410px; overflow-y: auto; padding: 1rem; }
.chat-message { max-width: 78%; margin-bottom: .8rem; padding: .65rem .8rem; border: 2px solid #9dbce0; border-radius: 8px 18px 18px 18px; background: #fff; box-shadow: 0 3px 0 #d0e0f3; }
.chat-message > div { display: flex; justify-content: space-between; gap: .8rem; }
.chat-message time { color: #60799a; font-size: .68rem; }
.chat-message p { margin: .3rem 0 0; color: #17345f; }
.chat-message.system { max-width: 100%; border-style: dashed; background: #fff9d8; }
.quick-messages { display: flex; flex-wrap: wrap; gap: .35rem; padding: .6rem 1rem; border-top: 2px solid #c6d9ee; }
.quick-messages button { min-height: 36px; padding: .3rem .55rem; border-color: #7b5ac4; background: #8b6bd7; box-shadow: 0 3px 0 #51368d; font-size: .72rem; }
.chat-compose { display: grid; grid-template-columns: 150px 1fr auto; gap: .45rem; padding: .8rem 1rem 1rem; }
.chat-compose select,.chat-compose input { min-height: 48px; padding: .6rem .7rem; border: 3px solid #779cca; border-radius: 13px; background: #fff; color: #07183a; }
.family-messenger > footer { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; padding: .8rem 1rem; border: 0; background: #d5e9ff; color: #335476; font-size: .68rem; }
.family-messenger > footer p { margin: 0; max-width: 80ch; }
.family-messenger > footer button { flex: 0 0 auto; border-color: #94304d; background: #b83c61; box-shadow: 0 3px 0 #7d1c3d; }
.chat-commands { padding: .8rem 1rem; border-top: 3px solid #7b5ac4; border-bottom: 2px solid #c6d9ee; background: #f2ecff; }
.chat-commands > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.chat-commands > div:first-child span { color: #5b4a78; font-size: .7rem; }
#chat-command-list { display: grid; grid-template-columns: repeat(3,1fr); gap: .4rem; max-height: 230px; overflow: auto; }
#chat-command-list button { min-height: 58px; padding: .45rem .55rem; border: 2px solid #ae96d6; border-radius: 12px; background: #fff; color: #1e3159; text-align: left; cursor: pointer; }
#chat-command-list button:hover { border-color: #6c45b5; background: #faf7ff; }
#chat-command-list strong,#chat-command-list span { display: block; }
#chat-command-list strong { color: #6a3ab0; font-size: .78rem; }
#chat-command-list span { margin-top: .15rem; font-size: .65rem; line-height: 1.2; }
.chat-command-status { min-height: 1.4em; margin: -.55rem 1rem .7rem; color: #5b4a78; font-size: .68rem; font-weight: 800; }

@media (max-width: 700px) {
  .family-messenger > header { flex-direction: column; }
  .chat-room { grid-template-columns: 1fr; }
  .chat-room aside { border-right: 0; border-bottom: 3px solid #7ea6d6; }
  #chat-buddies { display: flex; flex-wrap: wrap; }
  .chat-compose { grid-template-columns: 1fr; }
  .family-messenger > footer { align-items: flex-start; flex-direction: column; }
  #chat-command-list { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 500px) {
  .chat-locked { grid-template-columns: 1fr; }
  .chat-logo { width: 62px; }
  .chat-unlock-row { flex-direction: column; }
  .chat-message { max-width: 94%; }
  #chat-command-list { grid-template-columns: 1fr; }
  .chat-commands > div:first-child { align-items: flex-start; flex-direction: column; }
}

@media print {
  body.printing-night-plan .planner-view { display: block!important; min-height: 0; padding: 0; }
  body.printing-night-plan .planner-shell { max-width: none; border: 0; background: #fff; color: #000; box-shadow: none; }
  body.printing-night-plan .planner-guide,body.printing-night-plan .planner-controls,body.printing-night-plan .plan-actions,body.printing-night-plan .offline-shelf,body.printing-night-plan [data-planner-step]:not([data-planner-step="4"]) { display: none!important; }
  body.printing-night-plan .planner-result { display: block!important; }
  body.printing-night-plan .planner-result h3 { color: #000; text-shadow: none; }
  body.printing-night-plan .plan-reason,body.printing-night-plan .alternate-picks span { color: #333; }
  body.printing-night-plan .plan-facts span,body.printing-night-plan .plan-boundary,body.printing-night-plan .alternate-picks button { border-color: #333; background: #fff; color: #000; }
}
 .learning-house{margin:2rem 0;padding:clamp(1rem,3vw,2rem);border:3px solid var(--ink,#17131f);border-radius:24px;background:linear-gradient(135deg,#fff9e9,#e9f8ff)}.learning-house h2{max-width:18ch}.house-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin:1rem 0 2rem}.principle-card,.activity-card{padding:1rem;border:2px solid var(--ink,#17131f);border-radius:16px;background:#fff;box-shadow:4px 4px 0 #f5b335}.principle-card p,.activity-card p{margin:.5rem 0}.activity-card small{color:#5b294d;font-weight:700}.routine-strip{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 2rem}.routine-step{display:flex;align-items:center;gap:.5rem;border:2px solid var(--ink,#17131f);border-radius:999px;background:#fff;padding:.65rem .9rem;color:inherit}.routine-step span{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#f5b335;font-weight:900}.routine-step.is-done{background:#d9f5df;text-decoration:line-through}.repair-card{padding:1.2rem;border:3px dashed #e23b2f;border-radius:18px;background:#fff5f1}.repair-script{margin-top:1rem;padding:1rem;border-left:5px solid #e23b2f;background:#fff;color:#26131b;font-size:1.05rem}.muted{color:#5d5161}@media(max-width:600px){.routine-strip{display:grid;grid-template-columns:1fr}.routine-step{justify-content:flex-start}}