/* Persistent shell and focused screens; theme surfaces remain in experience.css. */
body.in-app { background: var(--bg); }
#appView .topbar { position: sticky; top: 0; z-index: 30; width: 100%; max-width: none; margin: 0; min-height: 64px; padding: calc(10px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left)); background: var(--bg); display: flex; flex-direction: row; gap: 12px; }
#appView .topbar > div:first-of-type { flex: 1; min-width: 0; }
#appView .topbar .eyebrow { display: none; }
#appView .topbar h1 { font-size: 1.2rem; margin: 0; line-height: 1.35; }
#appView .topbar .header-actions { gap: 8px; margin-left: auto; }
#appView .topbar button { min-height: 44px; width: auto; padding: 8px 12px; white-space: nowrap; }
#appView .topbar #appBack { min-width: 44px; font-size: 1.6rem; border: 0; padding: 0; }
#appView .app-shell { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; width: 100%; max-width: 1000px; padding: 24px 20px calc(100px + env(safe-area-inset-bottom)); margin: 0 auto; }
#appView .portal-grid { grid-template-columns: minmax(0,1fr); gap: 28px; min-width: 0; }
#appView .portal-nav { position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; width: 100%; margin: 0; padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; border: 0; border-top: 1px solid var(--line); background: var(--bg); border-radius: 0; }
#appView #kidNav { grid-template-columns: repeat(4,minmax(0,1fr)); }
#appView .portal-nav button { min-width: 0; min-height: 54px; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: .7rem; border-radius: 8px; line-height: 1.1; color: var(--muted); background: transparent; }
#appView .portal-nav button svg { width: 22px; height: 22px; flex-shrink: 0; }
#appView .portal-nav button { transition: none; }
#appView .portal-nav button.active { color: var(--world-accent); background: var(--panel); font-weight: 750; }
#appView .portal-panel > h2 { margin-bottom: 20px; }
#appView .item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; gap: 14px; }
#appView .item > div:first-child { min-width: 0; flex: 1; }
#appView .item strong, #appView .item-meta { overflow-wrap: anywhere; }
#appView .item-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; width: auto; align-items: center; flex: 0 0 auto; }
#appView .item-actions button, #appView .item > button { min-height: 44px; width: auto; padding: 9px 14px; }
#appView .item .item-meta { font-size: .8rem; line-height: 1.5; }
#appView .section-heading { align-items: start; gap: 16px; }
#appView .heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#appView .heading-actions button { width: auto; }
#appView .compact-control { min-width: 130px; }
#appView .screen-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
#appView .screen-shortcuts .destination-link { width: auto; min-height: 44px; padding: 8px 12px; font-size: .8rem; }
#appView .destination-link { display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--ink); font-size: 1rem; text-align: left; min-height: 56px; width: 100%; padding: 15px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; text-decoration: none; }
#appView .settings-list { display: grid; }
#appView .home-today, #appView .home-family { margin: 28px 0; }
#appView .home-kid { display: flex; gap: 14px; align-items: center; width: 100%; min-height: 80px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; text-align: left; }
#appView .home-kid > span:nth-child(2) { flex: 1; display: grid; gap: 4px; }
#appView .home-kid > span:nth-child(2) > span { color: var(--muted); font-size: .8rem; }
#appView .home-summary { font-size: 1rem; }
#appView .command-center { display: block; }
#appView .hero-panel { border: 0; background: none; box-shadow: none; padding: 0; border-radius: 0; }
#appView .form-row, #appView .guided-grid { gap: 18px; }
#appView input, #appView select, #appView textarea { font-size: 16px; min-height: 44px; }
#appView .action-menu { position: relative; }
#appView .action-menu > summary { cursor: pointer; list-style: none; min-width: 44px; min-height: 44px; padding: 9px; text-align: center; border: 1px solid var(--line); border-radius: 8px; }
#appView .action-menu > summary::-webkit-details-marker { display: none; }
#appView .action-menu[open] .menu-items { position: absolute; z-index: 15; right: 0; top: 48px; min-width: 150px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 8px 30px #0003; display: grid; gap: 6px; }
#appView .action-menu .menu-items button { text-align: left; width: 100%; }
#kidSession { gap: 20px; }
#kidSession .kid-hero-chip { gap: 12px; }
#kidSession .kid-hero-chip .role-avatar-large { width: 56px; height: 56px; }
#kidSession .kid-identity > h2 { font-size: 1.25rem; }
#kidSession .kid-identity > .eyebrow { font-size: .6rem; }
#kidSession .kid-identity > span { display: none; }
#kidSession .kid-wallet strong { font-size: 1.5rem; }
#kidSession .kid-screen { display: grid; gap: 24px; }
#kidSession .today-focus { padding-bottom: 12px; }
#kidSession .today-focus-header { margin-bottom: 16px; }
#kidSession .today-focus-header p:not(.eyebrow) { display: none; }
#kidSession .today-card { grid-template-columns: auto minmax(0,1fr) auto; }
#kidSession .today-card button { grid-column: auto; }
#kidSession .today-focus-header h3 { font-size: 1.3rem; }
#kidSession .reward-card { align-items: center; }
#kidSession .reward-status { font-size: .8rem; display: block; margin-top: 6px; color: var(--muted); }
#kidSession .reward-card button:disabled { cursor: default; }
#appView .app-legal-footer { padding-top: 24px; font-size: .75rem; }
.app-status { position: fixed; z-index: 150; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(520px,calc(100% - 32px)); display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: #203f37; color: #fff; border-radius: 12px; box-shadow: 0 6px 30px #0003; font-size: .9rem; }
.app-status span { flex: 1; overflow-wrap: anywhere; white-space: pre-line; }
.app-status button { background: transparent; border: 0; color: inherit; min-width: 44px; min-height: 44px; padding: 0; font-size: 1.5rem; }
.app-status.is-error { background: #79392f; }
.field-error { color: var(--red,#a43b34); grid-column: 1/-1; }
.action-dialog { color: var(--ink,#203f37); background: var(--panel,#faf9f4); border: 1px solid var(--line,#d4ddd5); border-radius: 18px; padding: 28px; width: min(500px,calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; box-shadow: 0 16px 80px #0005; }
.action-dialog::backdrop { background: #07131c99; }
.action-dialog h2 { margin: 0 0 12px; font-size: 1.4rem; }
.action-dialog p { font-size: .95rem; line-height: 1.5; }
.action-dialog input { font-size: 16px; }
.action-dialog label { display: grid; gap: 8px; margin: 20px 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.dialog-actions button { min-height: 44px; }
@media (max-width: 600px) {
  #appView .app-shell { padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }
  #appView .section-heading { flex-direction: column; }
  #appView .heading-actions { width: 100%; }
  #appView .item-actions { max-width: 48%; }
  #appView .request-control { display: grid; width: 100%; }
  #kidSession .today-card { grid-template-columns: auto minmax(0,1fr); }
  #kidSession .today-card button { grid-column: 2; }
  .action-dialog { margin: auto auto max(12px,env(safe-area-inset-bottom)); width: calc(100% - 24px); padding: 24px 20px; border-radius: 20px; }
}
@media (min-width: 1024px) {
  #appView { padding-left: 210px; }
  #appView .topbar { padding-left: 32px; padding-right: 32px; }
  #appView .portal-nav, #appView #kidNav { top: 0; bottom: 0; right: auto; width: 210px; display: flex; flex-direction: column; align-items: stretch; padding: 90px 16px 24px; border-right: 1px solid var(--line); border-top: 0; gap: 8px; }
  #appView .portal-nav::before { content: 'BRAVEQUEST'; position: absolute; top: 32px; left: 24px; font-size: .8rem; font-weight: 750; letter-spacing: .12em; color: var(--world-accent); }
  #appView .portal-nav button { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 14px; font-size: .95rem; }
  #appView .app-shell { padding: 32px 40px 60px; }
  #appView[data-portal="kid"] .topbar { max-width: none; }
  .app-status { bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) { .action-dialog, .app-status { animation: none; } }
/* Visibility is authoritative even when a component has its own display rule. */
#appView .hidden, .app-status.hidden, .action-dialog .hidden { display: none !important; }
/* World postcards are a doorway into the adventure, rather than another dashboard box. */
#appView .world-welcome { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 110px; gap: 12px; align-items: center; width: 100%; padding: 18px 20px 28px; margin: 0 0 24px; text-align: left; border: 0; background: var(--panel); color: var(--ink); border-radius: 24px 8px 24px 8px; }
#appView .world-welcome-copy { position: relative; z-index: 1; }
#appView .world-welcome h2 { margin: 4px 0 8px; font-size: 1.55rem; line-height: 1.2; }
#appView .world-welcome .eyebrow { margin: 0; color: var(--world-accent); }
#appView .world-welcome span { display: block; font-size: .8rem; line-height: 1.5; font-weight: 450; color: var(--muted); }
#appView .world-welcome .world-distance { margin-top: 8px; font-size: .7rem; }
#appView .world-welcome .journey-sprite { width: 110px; z-index: 1; }
#appView .world-line-art { position: absolute; inset: auto 0 0; width: 100%; height: 55px; z-index: -1; opacity: .25; fill: none; stroke: var(--world-accent); stroke-width: 1.5; }
#appView .world-line-art circle { fill: var(--panel); }
body[data-theme="space"] #appView .world-welcome { border-radius: 8px 40px 8px 40px; background: radial-gradient(circle at 90% 20%,#5986b122,transparent 50%),#17324a; }
body[data-theme="space"] #appView .world-line-art path { stroke-dasharray: 3 5; }
body[data-theme="space"] #appView .home-family h3::before { content: '✦ '; color: var(--world-accent); }
body[data-theme="fantasy"] #appView .world-welcome { border-radius: 35px 8px 35px 8px; background: linear-gradient(110deg,#e6ecd5,#f4efdf); }
body[data-theme="fantasy"] #appView .world-welcome h2, body[data-theme="fantasy"] #appView .home-family h3 { font-family: Georgia,ui-serif,serif; }
body[data-theme="fantasy"] #appView .world-line-art path { stroke-dasharray: 6 4; }
body[data-theme="fantasy"] #appView .portal-nav button.active { border-radius: 16px 4px 16px 4px; background: #e0e8cf; }
body[data-theme="cyberpunk"] #appView .world-welcome { border-radius: 2px; border-left: 2px solid #8be9de; background: linear-gradient(130deg,#183240,#17222f); }
body[data-theme="cyberpunk"] #appView .world-line-art { stroke: #f2a393; }
body[data-theme="cyberpunk"] #appView .home-family h3::before { content: '> '; font-family: ui-monospace,monospace; color: #8be9de; }
body[data-theme="cyberpunk"] #appView .portal-nav button.active { border-radius: 2px; box-shadow: inset 0 -2px #8be9de; }
body[data-theme="ocean"] #appView .world-welcome { border-radius: 12px 45px 12px 45px; background: linear-gradient(120deg,#d4e9e6,#e1efeb); }
body[data-theme="ocean"] #appView .world-line-art { height: 65px; stroke-width: 2; }
body[data-theme="ocean"] #appView .home-family h3::before { content: '≈ '; color: var(--world-accent); }
body[data-theme="ocean"] #appView .portal-nav button.active { border-radius: 14px 14px 6px 6px; background: #d4e9e6; }
#kidSession .kid-next-stop { display: flex; align-items: center; gap: 16px; padding: 12px 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; width: 100%; text-align: left; color: var(--ink); }
#kidSession .kid-next-stop .journey-sprite { width: 64px; flex: 0 0 64px; }
#kidSession .kid-next-stop > span { display: grid; gap: 6px; }
#kidSession .kid-next-stop > span > span { font-size: .8rem; font-weight: 450; color: var(--muted); }
#appView .shop-controls { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin: 18px 0; }
#appView .filter-drawer > summary { cursor: pointer; min-height: 44px; padding: 12px 0; color: var(--muted); }
#appView .filter-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 8px 0 20px; }
#appView .home-family .role-avatar { width: 44px; height: 44px; }
#appView #rewardList .item { align-items: start; }
#appView #rewardList .item-actions { max-width: 45%; }
@media (max-width: 600px) { #appView .filter-fields { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 360px) {
  #appView .world-welcome { grid-template-columns: minmax(0,1fr) 80px; padding: 16px 14px 24px; }
  #appView .world-welcome .journey-sprite { width: 80px; }
  #appView .world-welcome h2 { font-size: 1.3rem; }
  #appView #questList .item { display: grid; grid-template-columns: minmax(0,1fr); }
  #appView #questList .item-actions { max-width: none; justify-content: flex-end; }
}
@media (prefers-reduced-motion: no-preference) {
  #appView .kid-next-stop:hover .journey-sprite::before, #appView .world-welcome:hover .journey-sprite::before { translate: 0 -3px; }
  #appView .world-welcome .journey-sprite::before, #appView .kid-next-stop .journey-sprite::before { transition: translate .18s ease; }
}

#appView .command-center-panel > .section-heading { display: none; }
#appView .barcode-panel > .compact-control { margin: 16px 0; max-width: 320px; }
dialog.modal-backdrop { position: fixed; inset: 0; margin: auto; display: block; width: min(560px,calc(100% - 32px)); height: auto; max-height: calc(100dvh - 40px); padding: 0; overflow-y: auto; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
dialog.modal-backdrop:not([open]), dialog.modal-backdrop.hidden { display: none !important; }
dialog.modal-backdrop::backdrop { background: #07131c99; }
dialog.modal-backdrop .modal-card { width: auto; border: 0; background: none; box-shadow: none; color: var(--ink); }
dialog.modal-backdrop button { min-height: 44px; }
#kidSession .map-node { color: var(--ink); }
#kidSession .map-node > strong { color: var(--ink); }
#kidSession .map-node > span:not(.map-node-mark) { color: var(--muted); }
#kidSession .map-node:disabled { cursor: default; }
html:has(#appView:not(.hidden)) { scroll-padding-top: 84px; scroll-padding-bottom: 100px; }
#appView input, #appView select, #appView textarea { scroll-margin-top: 84px; scroll-margin-bottom: 110px; }
#kidSession .map-node { width: auto; min-width: 0; }
body[data-theme="fantasy"] #kidSession .map-node, body[data-theme="cyberpunk"] #kidSession .map-node { grid-template-columns: auto minmax(0,1fr) auto; }
#kidSession .map-node > strong { min-width: 0; }