/* The 3D world is the main screen; journals and tasks open when requested. */
body.three-mode {
  --nav-height: 58px;
  --world-glass: #111c21dc;
  --world-edge: #c6d3c329;
  background: #10181c;
}

.three-mode .app-shell { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 56px 1fr; }
.three-mode .topbar { height: 56px; gap: 16px; padding-inline: 24px; }
.three-mode .wordmark { font-size: 18px; letter-spacing: 3px; }
.three-mode .wordmark-caption,
.three-mode .topbar-center,
.three-mode .rail-decoration,
.three-mode .rail-version,
.three-mode .chapter-header p,
.three-mode .chapter-header .eyebrow,
.three-mode .mobile-mission,
.three-mode .scene-caption,
.three-mode .scene-vignette,
.three-mode .page-footer { display: none; }
.three-mode .navrail { padding-block: 18px; }
.three-mode .nav-main { gap: 8px; }
.three-mode .rail-button { width: 58px; min-height: 58px; font-size: 9px; }
.three-mode .rail-button.selected::before { left: -3px; }
.three-mode .main-content { padding: 12px 18px 8px; }
.three-mode .chapter-header { min-height: 38px; margin: 0 0 10px; gap: 18px; align-items: center; }
.three-mode .chapter-header h1 { font-size: 23px; line-height: 1.2; letter-spacing: 1.2px; margin: 0; padding: 0; max-width: none; }
.three-mode .day-clock { position: static; padding: 0; gap: 10px; flex-shrink: 0; align-items: center; }
.three-mode .day-clock > svg { width: 19px; height: 19px; }
.three-mode .day-clock > div:not(.clock-divider) { display: flex; align-items: center; gap: 10px; }
.three-mode .day-clock strong { font-size: 20px; line-height: 1; }
.three-mode .day-clock span { font-size: 9px; }
.three-mode .day-clock small,
.three-mode .clock-divider { display: none; }
.three-mode .game-layout { display: block; }
.three-mode .game-column { position: relative; display: block; width: 100%; }
.three-mode .camp-navigation { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 8px; min-height: 40px; }
.three-mode #camp-map-button { flex-shrink: 0; min-height: 40px; font-size: 11px; }
.three-mode .camp-tabs { flex: 1; min-width: 0; padding: 0; }
.three-mode .camp-tabs button { flex-shrink: 0; font-size: 11px; min-height: 40px; padding-inline: 17px; }
.three-mode .scene-panel { position: relative; isolation: isolate; width: 100%; height: calc(100dvh - 228px); min-height: 380px; max-height: none; aspect-ratio: auto; overflow: hidden; border-radius: 8px 8px 0 0; background: #13202b; }
.three-mode #scene-art { position: absolute; inset: 0; width: 100%; height: 100%; transform: none !important; }
.three-mode #scene-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.three-mode.three-ready #scene-art > svg,
.three-mode .three-ready #scene-art > svg,
.three-mode #scene-art.three-ready > svg { visibility: hidden; pointer-events: none; }
.three-mode #three-viewport { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: hidden; }
.three-mode #three-viewport canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.three-mode #three-viewport canvas:focus-visible { outline: 2px solid #bfcea8; outline-offset: -3px; }
.three-mode .scene-top { top: 12px; left: 16px; right: 12px; z-index: 8; min-height: 40px; align-items: flex-start; pointer-events: none; }
.three-mode .location-title { display: flex; gap: 8px; padding: 10px 12px; background: var(--world-glass); border: 1px solid var(--world-edge); border-radius: 5px; color: #e0e6d8; font-size: 10px; letter-spacing: 1px; box-shadow: 0 2px 12px #0002; }
.three-mode .location-title small { font-size: 8px; letter-spacing: .6px; color: #b2b9af; margin-top: 4px; }
.three-mode .location-title > .live-dot { margin-top: 4px; }
.three-mode .perception-toggle { pointer-events: auto; min-height: 40px; border: 1px solid var(--world-edge); background: var(--world-glass); border-radius: 5px; font-size: 10px; }
.three-mode .regime-strip { top: 69px; left: 19px; z-index: 7; color: #cfb991; font-size: 8px; letter-spacing: .8px; text-shadow: 0 1px 4px #000; }
.three-mode .regime-strip > span:last-child { color: #b1bbbd; }
.three-mode .compass { left: 18px; bottom: 17px; z-index: 7; color: #c4d2c9; opacity: .8; }
.three-mode .scene-zoom { z-index: 9; right: 14px; top: 66px; bottom: auto; border-color: var(--world-edge); background: var(--world-glass); }
.three-mode .scene-zoom button { width: 36px; height: 36px; color: #d8dfd1; }
.three-mode .scene-zoom span { min-width: 34px; color: #aebbae; font-size: 9px; }
.three-mode #three-markers { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.three-mode .world-marker { position: absolute; display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 36px; max-width: 170px; padding: 7px 11px; border: 1px solid #c5d4b975; border-radius: 4px; background: #152421e8; box-shadow: 0 3px 12px #0006; color: #dfe9d6; font-size: 10px; line-height: 1.3; text-align: center; letter-spacing: .15px; white-space: nowrap; pointer-events: auto; cursor: pointer; touch-action: manipulation; transform: translate(-50%, -100%); }
.three-mode .world-marker::after { content: ''; position: absolute; bottom: -5px; left: calc(50% - 4px); width: 7px; height: 7px; transform: rotate(45deg); background: #152421; border-right: 1px solid #c5d4b975; border-bottom: 1px solid #c5d4b975; }
.three-mode .world-marker:hover { background: #344337; border-color: #e0e8c5; color: #fff8da; }
.three-mode .world-marker:focus-visible { outline: 2px solid #e4d4a7; outline-offset: 3px; }
.three-mode .world-marker[hidden] { display: none; }
.three-mode .world-marker svg { width: 15px; height: 15px; flex-shrink: 0; }
.three-mode #world-hud { position: absolute; left: 16px; top: 94px; z-index: 7; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 180px); pointer-events: none; }
.three-mode .vital-pill { display: flex; align-items: center; gap: 6px; min-height: 29px; padding: 6px 9px; border: 1px solid var(--world-edge); border-radius: 4px; background: var(--world-glass); color: #bec9bc; font-size: 10px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.three-mode .vital-pill b,
.three-mode .vital-pill strong { font-weight: 550; color: #e5ebd9; }
.three-mode .vital-pill.danger { border-color: #c67a5e90; color: #e3a68a; background: #3c2523e8; }
.three-mode .world-actions { position: absolute; right: 16px; bottom: 16px; z-index: 9; display: flex; gap: 6px; }
.three-mode .world-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 40px; padding: 8px 11px; border: 1px solid var(--world-edge); border-radius: 5px; background: var(--world-glass); color: #d5ddce; font-size: 10px; line-height: 1.3; touch-action: manipulation; }
.three-mode .world-actions button:hover { background: #354036; border-color: #bbcba877; }
.three-mode .world-actions button:disabled { opacity: .45; cursor: default; }
.three-mode .world-actions button svg { width: 17px; height: 17px; flex-shrink: 0; }
.three-mode #world-status { position: absolute; bottom: 71px; left: 50%; z-index: 8; transform: translateX(-50%); width: max-content; max-width: min(570px, calc(100% - 40px)); padding: 8px 14px; border-radius: 4px; background: #10191ad9; color: #e1e4d5; font-size: 12px; line-height: 1.5; text-align: center; text-shadow: 0 1px 3px #000; pointer-events: none; }
.three-mode #world-status:empty { display: none; }
.three-mode .interact-prompt { z-index: 9; bottom: 18px; left: 50%; right: auto; transform: translateX(-50%); padding: 9px 13px; min-height: 40px; font-size: 12px; max-width: calc(100% - 390px); white-space: normal; text-align: center; background: #253328f2; border-color: #c7b58d77; }
.three-mode .interact-prompt[hidden] { display: none; }
.three-mode .region-objective { display: none; }
.three-mode .player-bar { display: flex; flex-wrap: nowrap; gap: 24px; padding: 9px 16px; min-height: 58px; background: #172221; border-radius: 0 0 8px 8px; }
.three-mode .player-identity { flex: 1.2; min-width: 150px; gap: 9px; }
.three-mode .hero-portrait { width: 34px; height: 34px; box-shadow: none; }
.three-mode .player-identity h2 { font-size: 13px; gap: 9px; }
.three-mode .player-identity h2 span { font-size: 9px; }
.three-mode .player-identity p { display: none; }
.three-mode .stat { flex: 1; min-width: 95px; max-width: 250px; }
.three-mode .stat > div:first-child { font-size: 10px; }
.three-mode .stat strong { font-size: 11px; }
.three-mode .stat-track { margin-top: 6px; }
.three-mode .inventory-slot { width: 40px; height: 40px; margin: 0; }
.three-mode .controls-footer { padding: 8px 2px 0; font-size: 9px; }
.three-mode .controls-footer > div { gap: 7px; }
.three-mode .saved-status { font-size: 9px; }
.three-mode .sidebar { display: none; position: fixed; z-index: 24; top: 68px; right: 18px; bottom: 20px; width: min(360px, calc(100vw - 98px)); max-height: none; overflow: auto; overscroll-behavior: contain; border: 1px solid #afbeaa3d; border-radius: 9px; background: #192423f7; backdrop-filter: blur(18px); box-shadow: 0 20px 70px #0009; scrollbar-width: thin; scrollbar-color: #8f997544 transparent; }
.three-mode.details-open .sidebar { display: block; }
.three-mode .sidebar-tabs { top: 0; height: 54px; padding-inline: 20px; background: #1b2926; }
.three-mode .sidebar-tabs button { min-height: 44px; font-size: 13px; }
.three-mode .mission-heading { padding: 20px; }
.three-mode .mission-heading h2 { font-size: 26px; }
.three-mode .mission-heading p { font-size: 12px; }
.three-mode .mission-progress-label { font-size: 10px; }
.three-mode .task-list { display: flex; flex-direction: column; }
.three-mode .task-card { min-height: 94px; padding: 13px 10px; }
.three-mode .task-card h4 { font-size: 13px; }
.three-mode .task-card p { font-size: 11px; }
.three-mode .task-tag { font-size: 9px; }
.three-mode .task-arrow { display: block; }
.three-mode .work-card { min-height: 65px; }
.three-mode .work-card strong { font-size: 12px; }
.three-mode #family-cards { display: block; }
.three-mode .family-card { flex-direction: row; padding: 18px 20px; }
.three-mode .family-card h3 { font-size: 14px; }
.three-mode .family-card p { font-size: 12px; }
.three-mode .family-card .family-mood { font-size: 10px; }
.three-mode .watch-status p { font-size: 11px; }
.three-mode .toast { z-index: 40; bottom: 30px; }
.three-mode dialog { border-color: #c8cfb73b; box-shadow: 0 24px 110px #000b; }
.three-mode dialog::backdrop { background: #040b0ed1; backdrop-filter: blur(5px); }
.three-mode .dialog-body { font-size: 14px; line-height: 1.8; }
.three-mode .dialog-title { font-size: 29px; }

@media (min-width: 901px) and (max-height: 700px) {
  .three-mode .scene-panel { min-height: 330px; }
  .three-mode .chapter-header { min-height: 32px; margin-bottom: 7px; }
  .three-mode .scene-panel { height: calc(100dvh - 217px); }
}

@media (max-width: 900px) {
  .three-mode .app-shell { display: block; }
  .three-mode .topbar { height: 52px; padding-inline: max(10px, env(safe-area-inset-left)); gap: 4px; }
  .three-mode .wordmark { font-size: 16px; letter-spacing: 2px; gap: 5px; }
  .three-mode .brand-fence { width: 21px; transform: scale(.7); }
  .three-mode .topbar-actions { gap: 0; }
  .three-mode .topbar-actions .icon-button,
  .three-mode .topbar-actions .help-button { min-width: 44px; min-height: 44px; width: 44px; padding: 0; }
  .three-mode .navrail { height: calc(var(--nav-height) + var(--safe-bottom)); padding: 0 max(7px, env(safe-area-inset-left)) var(--safe-bottom) max(7px, env(safe-area-inset-right)); z-index: 30; }
  .three-mode .nav-main { gap: 0; }
  .three-mode .rail-button { width: auto; height: var(--nav-height); min-height: 44px; gap: 3px; font-size: 9px; }
  .three-mode .rail-button svg { width: 19px; height: 19px; }
  .three-mode .rail-button.selected::before { left: 25%; right: 25%; top: 0; }
  .three-mode .main-content { padding: 8px max(10px, env(safe-area-inset-left)) calc(var(--nav-height) + var(--safe-bottom) + 8px) max(10px, env(safe-area-inset-right)); }
  .three-mode .chapter-header { display: flex; align-items: center; min-height: 30px; margin-bottom: 8px; gap: 10px; }
  .three-mode .chapter-header h1 { font-size: 18px; line-height: 1.2; max-width: none; letter-spacing: .7px; padding: 0; margin: 0; }
  .three-mode .day-clock { position: static; padding: 0; gap: 5px; }
  .three-mode .day-clock strong { font-size: 17px; }
  .three-mode .day-clock span { font-size: 8px; }
  .three-mode .day-clock > div:not(.clock-divider) { gap: 6px; }
  .three-mode .day-clock > svg { width: 17px; height: 17px; }
  .three-mode .camp-navigation { margin-bottom: 8px; gap: 6px; min-height: 44px; flex-wrap: nowrap; }
  .three-mode #camp-map-button { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .three-mode #camp-map-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .three-mode .camp-tabs { flex: 1 1 auto; }
  .three-mode .camp-tabs button { min-height: 44px; font-size: 11px; padding-inline: 13px; }
  .three-mode .scene-panel { height: calc(100dvh - 274px - var(--safe-bottom)); min-height: 370px; max-height: none; aspect-ratio: auto; border-radius: 7px 7px 0 0; }
  .three-mode .scene-top { top: 9px; left: 9px; right: 9px; gap: 6px; }
  .three-mode .location-title { padding: 8px 9px; font-size: 9px; gap: 6px; letter-spacing: .6px; max-width: calc(100% - 58px); }
  .three-mode .location-title small { font-size: 7px; max-width: none; letter-spacing: .15px; }
  .three-mode .perception-toggle { min-height: 44px; min-width: 44px; padding: 8px; }
  .three-mode .perception-toggle > span:nth-child(2) { display: none; }
  .three-mode .regime-strip { top: 63px; left: 12px; font-size: 7px; gap: 8px; }
  .three-mode .regime-strip > span:last-child { display: none; }
  .three-mode .scene-zoom { top: 62px; right: 9px; }
  .three-mode .scene-zoom button { width: 44px; height: 44px; }
  .three-mode .scene-zoom span { display: none; }
  .three-mode #world-hud { left: 9px; top: 84px; gap: 4px; max-width: calc(100% - 108px); }
  .three-mode .vital-pill { min-height: 25px; padding: 5px 7px; gap: 4px; font-size: 9px; }
  .three-mode .world-marker { min-height: 44px; max-width: 145px; padding: 8px 10px; font-size: 10px; white-space: normal; }
  .three-mode .world-actions { right: 10px; bottom: 120px; gap: 5px; }
  .three-mode .world-actions button { min-width: 44px; min-height: 44px; padding: 7px 9px; font-size: 10px; }
  .three-mode #world-status { bottom: 175px; max-width: calc(100% - 30px); padding: 7px 10px; font-size: 11px; }
  .three-mode .interact-prompt { display: none; }
  .three-mode .player-bar { display: flex; gap: 11px; min-height: 58px; padding: 8px 10px; flex-wrap: nowrap; }
  .three-mode .player-identity { flex: 0 0 auto; min-width: 0; gap: 7px; }
  .three-mode .hero-portrait { width: 30px; height: 30px; }
  .three-mode .player-identity h2 { font-size: 11px; display: block; }
  .three-mode .player-identity h2 span { display: block; width: fit-content; margin-top: 3px; padding: 0 3px; font-size: 7px; }
  .three-mode .stat { min-width: 49px; flex: 1; }
  .three-mode .stat > div:first-child { gap: 3px; font-size: 9px; flex-wrap: wrap; }
  .three-mode .stat > div:first-child > svg { display: none; }
  .three-mode .stat strong { font-size: 10px; }
  .three-mode .stat strong span { display: none; }
  .three-mode .inventory-slot { width: 44px; height: 44px; min-width: 44px; }
  .three-mode .controls-footer { display: none; }
  .three-mode .touch-controls { position: absolute; left: 10px; right: 10px; bottom: 69px; z-index: 10; display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; pointer-events: none; }
  .three-mode .scene-panel > .touch-controls { bottom: 12px; }
  .three-mode .touch-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; pointer-events: auto; }
  .three-mode .touch-pad button { min-height: 44px; width: 44px; border-radius: 50%; border: 1px solid #c1d0bf52; background: #182a29d9; box-shadow: 0 2px 10px #0004; color: #d3e0ce; backdrop-filter: blur(6px); }
  .three-mode .touch-pad button[aria-pressed="true"],
  .three-mode .touch-pad button:active { background: #57614af0; border-color: #d5ddbd; color: #fff9df; }
  .three-mode .touch-context { max-width: 155px; min-width: 0; flex: 0 1 145px; gap: 0; pointer-events: auto; }
  .three-mode #touch-hint { display: none; }
  .three-mode #touch-action { min-height: 54px; padding: 10px 12px; border-radius: 27px; background: #c3c29cec; border-color: #e1d9b0; color: #19281f; font-size: 11px; box-shadow: 0 3px 15px #0005; }
  .three-mode #touch-action:disabled { background: #182a29d9; border-color: #c1d0bf42; color: #abbcaf; opacity: .8; }
  .three-mode .sidebar { top: auto; left: 10px; right: 10px; bottom: calc(var(--nav-height) + var(--safe-bottom) + 8px); width: auto; max-height: calc(100dvh - 138px - var(--safe-bottom)); border-radius: 13px; z-index: 26; }
  .three-mode .sidebar-tabs { height: 54px; }
  .three-mode .toast { bottom: calc(var(--nav-height) + var(--safe-bottom) + 12px); max-width: calc(100% - 24px); font-size: 11px; }
}

@media (pointer: coarse) and (min-width: 901px) {
  .three-mode .touch-controls { display: flex; position: absolute; left: 18px; right: 18px; bottom: 76px; z-index: 10; padding: 0; margin: 0; background: none; border: 0; box-shadow: none; pointer-events: none; }
  .three-mode .scene-panel > .touch-controls { bottom: 18px; }
  .three-mode .touch-pad,
  .three-mode .touch-context { pointer-events: auto; }
  .three-mode #touch-hint { display: none; }
  .three-mode .touch-context { max-width: 160px; }
  .three-mode .world-actions { bottom: 130px; }
  .three-mode #world-status { bottom: 181px; }
  .three-mode .interact-prompt { display: none; }
}

@media (max-width: 374px) {
  .three-mode .wordmark { font-size: 14px; letter-spacing: 1px; }
  .three-mode .brand-fence { display: none; }
  .three-mode .chapter-header h1 { font-size: 16px; letter-spacing: .3px; }
  .three-mode .day-clock > svg { display: none; }
  .three-mode .day-clock > div:not(.clock-divider) { gap: 4px; }
  .three-mode .player-bar { gap: 7px; padding-inline: 8px; }
  .three-mode .hero-portrait { display: none; }
  .three-mode .world-actions button { padding-inline: 7px; }
  .three-mode #world-hud { max-width: calc(100% - 105px); }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 540px) {
  .three-mode { --nav-height: 50px; }
  .three-mode .topbar { height: 46px; }
  .three-mode .main-content { padding-top: 0; padding-bottom: calc(var(--nav-height) + var(--safe-bottom)); }
  .three-mode .chapter-header { display: none; }
  .three-mode .camp-navigation { min-height: 44px; margin-bottom: 4px; }
  .three-mode .game-column { display: block; }
  .three-mode .scene-panel { height: calc(100dvh - 146px - var(--safe-bottom)); min-height: 200px; }
  .three-mode .player-bar { display: none; }
  .three-mode .touch-controls { bottom: 10px; }
  .three-mode .scene-panel > .touch-controls { bottom: 10px; }
  .three-mode .world-actions { bottom: 10px; right: 165px; }
  .three-mode #world-status { bottom: 61px; max-width: calc(100% - 325px); }
  .three-mode #world-hud { top: 72px; }
  .three-mode .regime-strip { display: none; }
  .three-mode .scene-zoom { top: 10px; right: 70px; }
  .three-mode .location-title small { display: none; }
  .three-mode .perception-toggle .toggle-track { display: none; }
  .three-mode .sidebar { max-height: calc(100dvh - 110px); }
}

@media (prefers-reduced-motion: reduce) {
  .three-mode *, .three-mode *::before, .three-mode *::after { scroll-behavior: auto !important; }
}