/* App surfaces and the four worlds. Keep the public landing page independent. */
body:has(#appView:not(.hidden)) { --shadow: none; background: var(--bg); }
body:has(#appView:not(.hidden))::after { display: none; }
body:has(#appView:not(.hidden))::before { animation: none; opacity: .14; }
body[data-theme="space"]:has(#appView:not(.hidden)) {
  --bg: #101e32; --panel: #162941; --ink: #eef6ff; --muted: #b0c5da;
  --line: #314963; --world-line: #365772; --world-accent: #b9e9fc; --world-secondary: #89c9d6;
  --green: #88d8c3; --gold: #e9c881; --pink: #bdc9ec; --blue: #b9e9fc;
}
body[data-theme="fantasy"]:has(#appView:not(.hidden)) {
  --bg: #f4efdf; --panel: #faf7ed; --ink: #293d2e; --muted: #56624f;
  --line: #d7d4bc; --world-line: #c1c9ad; --world-accent: #446842; --world-secondary: #44613a;
  --green: #638651; --gold: #805422; --pink: #ab735c; --blue: #446842; --red: #ae5044;
  --world-panel-glow: #e3e8d4;
}
body[data-theme="cyberpunk"]:has(#appView:not(.hidden)) {
  --bg: #101722; --panel: #16222f; --ink: #e7f5f6; --muted: #a6bfca;
  --line: #2d4553; --world-line: #305d68; --world-accent: #8be9de; --world-secondary: #f2a393;
  --green: #8be9de; --gold: #f6cd85; --pink: #f2a393; --blue: #8be9de;
}
body[data-theme="ocean"]:has(#appView:not(.hidden)) {
  --bg: #eaf4f2; --panel: #f7fbf7; --ink: #204c56; --muted: #405f64;
  --line: #bcd6d6; --world-line: #aacacc; --world-accent: #226977; --world-secondary: #286b65;
  --green: #286b65; --gold: #785321; --pink: #b97566; --blue: #226977; --red: #ad5148;
  --world-panel-glow: #dceee8;
}
#appView { min-height: 100vh; }
#appView .topbar { padding-top: 22px; padding-bottom: 22px; align-items: center; border-bottom: 1px solid var(--line); }
#appView .topbar h1 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); letter-spacing: -.035em; }
/* These surfaces no longer use the old dark hero background. */
#appView .hero-panel, #appView .kid-chip { color: var(--ink); }
#appView .hero-panel p, #appView .hero-panel .eyebrow,
#appView .kid-chip > div > span { color: var(--muted); }
#appView .kid-chip strong, #appView .kid-chip > span { color: var(--ink); }
#appView .eyebrow { font-weight: 650; letter-spacing: .1em; font-size: .7rem; }
#appView p, #appView .item-meta, #appView .panel-note { font-weight: 450; line-height: 1.6; }
#appView h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); letter-spacing: -.025em; }
#appView h3 { font-size: 1.15rem; line-height: 1.35; }
#appView button { box-shadow: none; font-weight: 650; border-radius: 8px; background: var(--world-accent); color: var(--bg); }
#appView button:hover:not(:disabled) { filter: brightness(1.08); }
#appView button:disabled { opacity: .6; cursor: wait; }
#appView .secondary-button, #appView .mode-button, #appView .portal-nav-button { color: var(--ink); background: transparent; border-color: var(--line); }
#appView .mode-button.active, #appView .portal-nav-button.active { color: var(--bg); background: var(--world-accent); }
#appView .portal-nav { border: 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none; border-radius: 0; padding: 0 0 18px; gap: 8px; }
#appView .portal-nav-button { border: 0; min-height: 44px; }
#appView .app-shell { padding-top: 24px; gap: 30px; }
#appView .portal-grid { gap: 32px; }
#appView .panel { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 0; }
#appView .panel > .panel, #appView .command-card, #appView .planner-board section { box-shadow: none; background: var(--panel); border: 0; border-radius: 10px; }
#appView .item { box-shadow: none; border: 0; border-bottom: 1px solid var(--line); background: none; border-radius: 0; padding: 16px 0; gap: 16px; }
#appView .item strong { font-weight: 650; }
#appView .item-list { gap: 0; }
#appView .empty { border: 0; background: none; color: var(--muted); font-weight: 450; padding: 14px 0; }
#appView .level-track { height: 6px; border: 0; background: var(--line); margin-top: 12px; }
#appView .level-fill { background: var(--world-accent); box-shadow: none; }
#appView .level-badge { border: 0; background: transparent; box-shadow: none; padding: 0; }
#appView .level-badge strong { font-weight: 550; }
#appView .role-avatar { border: 0; background: none; box-shadow: none; border-radius: 22%; overflow: visible; }
#appView .role-avatar-large { width: 84px; height: 84px; }
#appView .avatar-loadout { box-shadow: none; background: var(--world-accent); color: var(--bg); border-color: var(--bg); }
#appView .journey-card { border: 0; border-radius: 18px; background: var(--panel); padding: 24px; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; }
#appView .journey-sprite { aspect-ratio: 1; border: 0; border-radius: 0; box-shadow: none; background-color: transparent; }
#appView .journey-card .item-meta { display: block; margin-top: 8px; font-size: .8rem; }
#appView .journey-card h3, #appView .journey-card h2 { color: var(--ink); margin: 5px 0; font-size: 1.5rem; }
#appView .family-boss-card { border: 0; border-top: 1px solid var(--line); background: none; border-radius: 0; padding: 20px 0; box-shadow: none; }
#appView[data-portal="kid"] .app-shell { max-width: 960px; }
#appView[data-portal="kid"] .mode-switch { display: none; }
#appView[data-portal="kid"] .topbar { max-width: 960px; }
#kidPortal.has-kid-session > .eyebrow, #kidPortal.has-kid-session > h2, #kidPortal.has-kid-session > #loginForm { display: none; }
#kidSession { display: grid; gap: 28px; }
#kidSession .kid-hero-chip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; border: 0; border-radius: 0; background: none; padding: 0; gap: 18px; }
#kidSession .kid-identity > h2 { margin: 3px 0; font-size: 1.75rem; color: var(--ink); }
#kidSession .kid-identity > .eyebrow { margin: 0; color: var(--muted); }
#kidSession .kid-identity > span { color: var(--muted); font-size: .85rem; font-weight: 450; }
#kidSession .kid-wallet { text-align: right; }
#kidSession .kid-wallet strong { display: block; color: var(--world-accent); font-size: 2rem; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
#kidSession .kid-wallet span { color: var(--muted); font-size: .75rem; font-weight: 450; }
#kidSession .kid-quest-area { gap: 0; }
#kidSession .today-focus { background: none; border: 0; border-radius: 0; padding: 0 0 22px; }
#kidSession .today-focus-header { margin-bottom: 20px; grid-template-columns: 1fr auto; }
#kidSession .today-focus-header h3 { font-size: 1.45rem; letter-spacing: -.03em; }
#kidSession .today-focus-header p:not(.eyebrow) { font-size: .85rem; max-width: 400px; font-weight: 450; margin-top: 5px; }
#kidSession .today-focus-stats { gap: 20px; grid-template-columns: auto auto; }
#kidSession .today-focus-stats span { border: 0; padding: 0; border-radius: 0; background: none; font-size: .6rem; max-width: 90px; }
#kidSession .today-focus-stats strong { font-size: 1.3rem; font-weight: 650; }
#kidSession .today-card { border: 0; border-radius: 12px; background: var(--panel); padding: 18px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; }
#kidSession .today-card strong { font-size: 1rem; font-weight: 650; }
#kidSession .today-card span { font-size: .8rem; font-weight: 450; line-height: 1.5; margin-top: 4px; }
#kidSession .today-card-index { background: var(--world-accent); color: var(--bg); width: 38px; height: 38px; font-size: .85rem; }
#kidSession .today-card button { min-width: 80px; min-height: 44px; }
#kidSession .kid-disclosure { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 17px 0; background: none; }
#kidSession .kid-disclosure > summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--ink); min-height: 28px; }
#kidSession .kid-disclosure > summary > span { color: var(--muted); margin-left: 8px; }
#kidSession .kid-disclosure[open] > summary { margin-bottom: 18px; }
#kidSession .kid-reward-section { padding-bottom: 5px; }
#kidSession .kid-section-heading h3 { font-size: 1.4rem; margin: 4px 0 12px; }
#kidSession .kid-section-heading .eyebrow { margin: 0; }
#kidSession .adventure-map { border: 0; background: var(--panel); border-radius: 14px; padding: 20px; }
#kidSession .map-node, #kidSession .map-boss { background: transparent; border: 0; border-radius: 8px; box-shadow: none; transform: none; }
#kidSession .map-node-mark, #kidSession .map-boss > span { background: var(--world-accent); color: var(--bg); }
#appView button:focus-visible, #appView summary:focus-visible, #appView a:focus-visible { outline: 3px solid var(--world-secondary); outline-offset: 4px; }
/* Orbit instruments: cool panels, precise route lines and circular mission markers. */
body[data-theme="space"] #appView .journey-card { background: #1b344d; border-radius: 26px; }
body[data-theme="space"] #kidSession .today-card { border-left: 2px solid #477e9d; border-radius: 4px 16px 16px 4px; }
body[data-theme="space"] #kidSession .today-card-index { background: transparent; border: 1px solid #6896b1; color: #b9e9fc; }
body[data-theme="space"] #kidSession .adventure-map { background: #132b43; }
body[data-theme="space"] #kidSession .map-route { inset: 80px 14% 45px; border: 1px dashed #46667f; border-radius: 50%; transform: rotate(-12deg); }
/* Storybook trail: paper, leaf-shaped markers, ink rules and a winding path. */
body[data-theme="fantasy"] #appView .journey-card { background: #e5e9d7; border-radius: 55px 16px 55px 16px; }
body[data-theme="fantasy"] #appView .journey-card h3, body[data-theme="fantasy"] #appView .family-journey-card h2 { font-family: Georgia, ui-serif, serif; font-size: 1.9rem; }
body[data-theme="fantasy"] #kidSession .today-card { background: #fcf9f0; border-radius: 4px; border-bottom: 1px solid #ded8c3; }
body[data-theme="fantasy"] #kidSession .today-card-index { border-radius: 50% 10% 50% 10%; background: #e0e8cf; color: #446842; }
body[data-theme="fantasy"] #kidSession .today-focus-header h3 { font-family: Georgia, ui-serif, serif; font-size: 1.7rem; }
body[data-theme="fantasy"] #kidSession .map-nodes { grid-template-columns: 1fr; padding-left: 10px; border-left: 2px dashed #b8c49f; }
body[data-theme="fantasy"] #kidSession .map-node { grid-template-columns: auto 1fr auto; align-items: center; min-height: 70px; margin-left: 10px; }
body[data-theme="fantasy"] #kidSession .map-node:nth-child(even) { margin-left: 35px; }
body[data-theme="fantasy"] #kidSession .map-route { display: none; }
/* Ops terminal: angular panels, a circuit grid and tabular information. */
body[data-theme="cyberpunk"] #appView button, body[data-theme="cyberpunk"] #appView input, body[data-theme="cyberpunk"] #appView select { border-radius: 3px; }
body[data-theme="cyberpunk"] #appView .eyebrow, body[data-theme="cyberpunk"] #kidSession .today-card-index, body[data-theme="cyberpunk"] #kidSession .kid-wallet { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
body[data-theme="cyberpunk"] #appView .journey-card { grid-template-columns: minmax(0, 1fr) 160px; border-radius: 3px; border-left: 3px solid #8be9de; background-color: #182b37; background-image: linear-gradient(#8be9de09 1px, transparent 1px), linear-gradient(90deg,#8be9de09 1px, transparent 1px); background-size: 24px 24px; }
body[data-theme="cyberpunk"] #appView .journey-sprite { order: 2; }
body[data-theme="cyberpunk"] #kidSession .today-card { border-radius: 3px; border-left: 2px solid #f2a393; background: #192a36; }
body[data-theme="cyberpunk"] #kidSession .today-card-index { border-radius: 3px; background: transparent; color: #8be9de; border: 1px solid #305d68; }
body[data-theme="cyberpunk"] #kidSession .map-nodes { grid-template-columns: 1fr; }
body[data-theme="cyberpunk"] #kidSession .map-node { grid-template-columns: auto 1fr auto; align-items: center; min-height: 60px; border-bottom: 1px solid var(--line); border-radius: 0; }
body[data-theme="cyberpunk"] #kidSession .map-route { display: none; }
body[data-theme="cyberpunk"] #kidSession .map-node-mark { border-radius: 2px; font-family: ui-monospace, monospace; }
/* Harbor log: airy light, tide lines and rounded port markers. */
body[data-theme="ocean"] #appView .journey-card { grid-template-columns: minmax(0, 1fr) 160px; background: #d4e9e6; border-radius: 16px 60px 16px 60px; }
body[data-theme="ocean"] #appView .journey-sprite { order: 2; }
body[data-theme="ocean"] #kidSession .today-card { border-radius: 22px 8px 22px 8px; background: #f8fcf7; border-bottom: 2px solid #cae3df; }
body[data-theme="ocean"] #kidSession .today-card-index { border-radius: 50% 50% 35% 35%; background: #d4e9e6; color: #226977; }
body[data-theme="ocean"] #kidSession .adventure-map { background: repeating-linear-gradient(0deg, #dceeea, #dceeea 30px, #d3e8e6 31px, #dceeea 33px); }
body[data-theme="ocean"] #kidSession .map-node { border-bottom: 2px solid #8ab9bc; border-radius: 50% 50% 12px 12px; padding: 16px; }
body[data-theme="ocean"] #kidSession .map-route { border-color: #79b0b2; border-style: solid; transform: rotate(2deg); }
@media (max-width: 600px) {
  #appView .topbar { display: flex; padding: 14px 18px; gap: 12px; }
  #appView .topbar h1 { font-size: 1.15rem; }
  #appView .header-actions { flex-direction: row; align-items: center; }
  #appView .header-actions button { padding: 8px 12px; }
  #appView .app-shell { padding: 20px 18px; gap: 24px; }
  #appView .journey-card { grid-template-columns: 110px minmax(0, 1fr); padding: 16px; gap: 14px; border-radius: 18px; }
  body[data-theme="ocean"] #appView .journey-card, body[data-theme="cyberpunk"] #appView .journey-card { grid-template-columns: minmax(0, 1fr) 110px; }
  #appView .journey-card h3, #appView .journey-card h2 { font-size: 1.2rem; }
  #appView .journey-card .item-meta { font-size: .72rem; }
  #kidSession { gap: 24px; }
  #kidSession .kid-hero-chip { gap: 12px; }
  #appView .role-avatar-large { width: 64px; height: 64px; }
  #kidSession .kid-identity > h2 { font-size: 1.45rem; }
  #kidSession .kid-identity > span { font-size: .72rem; }
  #kidSession .kid-wallet strong { font-size: 1.65rem; }
  #kidSession .kid-wallet span { font-size: .65rem; }
  #kidSession .today-focus-header { grid-template-columns: 1fr; gap: 12px; }
  #kidSession .today-focus-stats { display: flex; gap: 22px; }
  #kidSession .today-focus-stats span { display: flex; align-items: center; gap: 7px; max-width: none; }
  #kidSession .today-focus-stats strong { font-size: 1rem; }
  #kidSession .today-card { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 10px; }
  #kidSession .today-card button { grid-column: 2; justify-self: start; padding: 9px 18px; }
  #kidSession .today-card-index { width: 32px; height: 32px; }
  #kidSession .today-card strong { font-size: .95rem; }
  #kidSession .today-card span { font-size: .75rem; }
}
@media (max-width: 360px) {
  #appView .journey-card { grid-template-columns: 85px minmax(0, 1fr); padding: 12px; gap: 10px; }
  body[data-theme="ocean"] #appView .journey-card, body[data-theme="cyberpunk"] #appView .journey-card { grid-template-columns: minmax(0, 1fr) 85px; }
  #kidSession .kid-wallet span { max-width: 50px; display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  #appView button, #appView .level-fill { transition: background-color .15s ease, opacity .15s ease, width .25s ease; }
  #appView .modal-card { animation: app-dialog-in .16s ease-out; }
  @keyframes app-dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  body:has(#appView:not(.hidden)) *, body:has(#appView:not(.hidden))::before { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Keep the compact app bar independent of the older mobile header rules. */
#appView .topbar > .header-actions { width: auto; flex: 0 0 auto; }
#appView .topbar > .header-actions > #logoutButton { width: auto; }
#kidSession .today-card > button { width: auto; }

/* Crop only the measured source rectangle, then contain it without distortion. */
.journey-sprite { position: relative; aspect-ratio: 1; background-image: none; }
.journey-sprite::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--journey-render-width); height: var(--journey-render-height);
  transform: translate(-50%, -50%);
  background-image: var(--journey-image);
  background-position: var(--journey-x) var(--journey-y);
  background-size: var(--journey-width) var(--journey-height);
  background-repeat: no-repeat;
}
#appView .journey-sprite { background-image: none; }

@media (max-width: 600px) {
  #appView .topbar { flex-direction: row; }
  #appView .topbar > .header-actions { display: flex; }
  #appView .topbar > div:first-child { min-width: 0; }
  #appView .topbar > .header-actions > #logoutButton { font-size: .8rem; }
}