/* Shared AppShell and Vintage Cosmic Pixel interface tokens.
   Illustration and game data remain independent of this presentation layer. */
:root {
  --bg: #061c26;
  --panel: #122f3b;
  --panel-deep: #0a232d;
  --panel-raised: #193944;
  --line: #52696a;
  --ink: #ebd8b1;
  --muted: #b6b7a4;
  --mint: #9cdab8;
  --gold: #c2924c;
  --coral: #de6940;
  --violet: #5f4d69;
  --page-max: 1600px;
  --page-gutter: 32px;
  --panel-padding: 20px;
  --panel-gap: 16px;
  --control-height: 44px;
  --radius: 3px;
  --text-body: 14px;
  --text-small: 12px;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--text-body);
}
html { scrollbar-gutter: stable; }
body { background: var(--bg); }
.app-shell { width: calc(100% - 2 * var(--page-gutter)); max-width: var(--page-max); margin-inline: auto; padding: 0; }
.app-shell > header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:28px; min-height:88px; padding:0; border-bottom:1px solid var(--line); }
.app-shell > header > nav { display:flex; justify-content:flex-end; width:auto; gap:24px; margin:0; order:0; min-width:0; }
.app-shell > header .brand { margin:0; font-size:11px; color:var(--ink); }
.app-shell > header .brand-icon { color:var(--gold); }
.app-shell > header .language { order:0; }
.app-shell > header nav button { min-height:var(--control-height); font-size:13px; color:var(--muted); white-space:nowrap; }
.app-shell > header nav button[aria-current] { color:var(--ink); }
.app-shell > header nav button[aria-current]:after { background:var(--gold); }
.app-shell main { min-width:0; }
.app-shell .section-heading { padding-top:32px; margin-bottom:24px; }
.app-shell .section-heading h1,.console-heading h1 { font-size:32px; line-height:1.4; color:var(--ink); }
.app-shell .home { padding-top:32px; gap:32px; min-height:0; align-items:center; }
.app-shell .home .intro { min-width:0; }
.app-shell .home h1 { font-size:clamp(30px,3.3vw,46px); }
.app-shell .home .description { font-size:var(--text-body); max-width:650px; }
.app-shell .atlas-console { padding-top:32px; }
.app-shell .console-heading { min-height:105px; }
.app-shell .console-heading h1 { margin:4px 0 8px; }
.app-shell footer { margin-top:40px; border-top-color:var(--line); }
.app-shell button,.app-shell input,.app-shell select,.app-shell summary { -webkit-tap-highlight-color:transparent; }
.app-shell .button,.app-shell .catalog-tabs button,.app-shell .atlas-modes button,.app-shell .pagination button,.app-shell .cosmic-pagination button {
 min-height:var(--control-height); border:1px solid var(--line); border-radius:var(--radius); background:var(--panel-deep); color:var(--ink); font-size:13px; padding:10px 16px; box-shadow:none; line-height:1.55;
}
.app-shell .button.primary { background:var(--mint); border-color:var(--mint); color:var(--bg); }
.app-shell .button:hover:not(:disabled),.app-shell .catalog-tabs button:hover,.app-shell .atlas-modes button:hover { background:var(--panel-raised); border-color:var(--gold); color:var(--ink); }
.app-shell .button.primary:hover:not(:disabled) { background:#b4dfc5; color:var(--bg); }
.app-shell [aria-pressed=true]:is(.atlas-modes button,.catalog-tabs button) { background:var(--ink); border-color:var(--ink); color:var(--bg); }
.app-shell :is(input[type=search],select) { min-height:var(--control-height); background:var(--panel-deep); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); font:inherit; font-size:13px; padding:10px 12px; }
.app-shell input::placeholder { color:var(--muted); opacity:1; }
.app-shell :is(button,a,input,select,summary):focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.app-shell :is(.hero-plate,.observation-plate,.codex-card,.compact-record,.information,.cosmic-tree,.cosmic-center,.cosmic-detail,.atlas-related,.atlas-summary,.cosmic-tile,.scan-stage) { background-color:var(--panel-deep); border-color:var(--line); border-radius:var(--radius); }
.app-shell :is(.hero-plate,.codex-card,.cosmic-center,.cosmic-detail,.atlas-related) { box-shadow:inset 0 0 0 3px #c2924c0a; }
.app-shell :is(.codex-card,.detail-body,.atlas-related) { padding:var(--panel-padding); }
.app-shell .eyebrow { color:var(--gold); }
.app-shell .description,.app-shell .hint,.app-shell .record-snippet { color:var(--muted); }
.app-shell .hero-plate,.app-shell .observation-plate { background:radial-gradient(ellipse at center,#38606844,transparent 70%),var(--panel-deep); }
.app-shell .destination { background:var(--panel-deep); padding:20px; border:1px solid var(--line); }
.app-shell .information { background:var(--panel); border-left-color:var(--gold); }
.app-shell .choice { background:var(--panel-deep); border-color:var(--line); }
.app-shell .choice:hover { background:var(--panel-raised); border-color:var(--gold); }
.app-shell .discovery-banner { background:var(--panel); border-color:var(--gold); }
.app-shell .orbit-switch { min-height:44px; }
.app-shell .switch-track { background:var(--panel-deep); border-color:var(--line); box-shadow:none; }
.app-shell .switch-core { background:radial-gradient(circle at 35% 35%,#b6b7a4,#52696a); box-shadow:none; }
.app-shell .orbit-switch[aria-checked=true] .switch-track { background:var(--panel); border-color:var(--mint); box-shadow:none; }
.app-shell .orbit-switch[aria-checked=true] .switch-core { background:var(--mint); box-shadow:0 0 4px #9cdab833; }
.app-shell .console-grid { grid-template-columns:270px minmax(0,1fr) 310px; gap:var(--panel-gap); align-items:start; }
.app-shell .cosmic-tree { grid-row:auto; min-height:0; height:auto; max-height:850px; }
.app-shell .cosmic-center { min-height:660px; background:var(--panel-deep); padding:var(--panel-padding); }
.app-shell .cosmic-detail { grid-column:auto; min-height:660px; }
.app-shell .cosmic-tree>summary { color:var(--ink); min-height:48px; }
.app-shell .tree-row.chosen { background:#38606855; border-color:var(--mint); box-shadow:inset 2px 0 var(--mint); }
.app-shell .tree-row a { font-size:12px; }
.app-shell .tree-row small { font-size:10px; }
.app-shell .tree-row b { min-width:36px; text-align:right; color:var(--ink); font-size:11px; }
.app-shell .tree-row b>small { display:block; font-size:8px; color:var(--muted); }
.app-shell .tree-expander { width:26px; min-height:44px; }
.app-shell .celestial-icon { background:conic-gradient(var(--mint) var(--arc),#386068 0); }
.app-shell .celestial-icon.visited,.app-shell .celestial-icon.complete,.app-shell .chosen .celestial-icon { box-shadow:0 0 0 1px #9cdab880; }
.app-shell .star-node.focus-node .celestial-icon { box-shadow:0 0 14px #9cdab81f; }
.app-shell .constellation { height:490px; background-color:var(--panel-deep); }
.app-shell .star-node strong { color:var(--ink); }
.app-shell .star-node small { color:var(--muted); }
.app-shell .detail-hero { background:linear-gradient(120deg,var(--panel-deep),var(--panel)); }
.app-shell .detail-hero>img { margin-right:0; width:125px; height:125px; }
.app-shell .detail-hero h2 { overflow-wrap:anywhere; }
.app-shell .progress-explanation { color:var(--muted); font-size:12px; line-height:1.8; }
.app-shell .research-score { flex-wrap:wrap; gap:12px; }
.app-shell .research-score>b { border-color:var(--mint); color:var(--ink); font-size:20px; }
.app-shell .research-score>span { font-size:12px; flex:1; min-width:100px; }
.app-shell .atlas-status-facts { display:grid; gap:5px; font-size:12px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.app-shell .atlas-status-facts dt { color:var(--ink); }
.app-shell .atlas-status-facts dd { margin:0 0 8px; color:var(--muted); }
.app-shell .detail-body>.hint,.app-shell .console-evidence p { font-size:12px; overflow-wrap:anywhere; }
.app-shell .cosmic-cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.app-shell .cosmic-tile { background:linear-gradient(145deg,var(--panel),var(--panel-deep)); }
.app-shell .cosmic-tile:hover { border-color:var(--gold); box-shadow:none; }
.app-shell .cosmic-tile strong { color:var(--ink); font-size:13px; }
.app-shell .cosmic-tile small,.app-shell .cosmic-tile>span:not(.celestial-icon) { color:var(--muted); font-size:11px; }
.app-shell .cosmic-tile>b { position:static; align-self:flex-end; height:auto; min-height:30px; display:flex; align-items:center; gap:5px; padding:4px 6px; border:1px solid var(--line); border-radius:3px; background:var(--panel-deep); font-size:11px; }
.app-shell .cosmic-tile>b small { font-size:10px; }
.app-shell .atlas-related>div { gap:var(--panel-gap); }
.app-shell .catalog-search { max-width:420px; }
.app-shell .catalog-tabs { gap:6px; }
.app-shell .catalog-count { gap:24px; }
.app-shell .codex-grid.dense-grid { grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
.app-shell .codex-tile { background:var(--panel-deep); border-color:var(--line); }
.app-shell .discovered-tile { background:radial-gradient(ellipse,#38606866,var(--panel-deep)); }
.app-shell .preview-tile { border-style:dashed; }
.app-shell .preview-button { min-height:44px; }
.app-shell .compact-record summary { min-height:76px; padding:14px 18px; }
.app-shell .record-name { font-size:14px; }
.app-shell .record-snippet { font-size:12px; }
.app-shell .record-detail dl { grid-template-columns:minmax(85px,auto) minmax(0,1fr); }
.app-shell .record-detail dd { overflow-wrap:anywhere; }
.app-shell .compact-record[open] summary { background:var(--panel); }
.app-shell .find-node,.app-shell .console-evidence summary { min-height:44px; }
.app-shell .find-node { font-size:12px; }
.app-shell .console-evidence summary { display:flex; align-items:center; }
@media(max-width:1100px) {
 .app-shell .console-grid { grid-template-columns:240px minmax(0,1fr); }
 .app-shell .cosmic-tree { grid-row:span 2; }
 .app-shell .cosmic-detail { grid-column:2; min-height:0; }
 .app-shell .home { gap:24px; }
 .app-shell .cosmic-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
 :root { --page-gutter:16px; --panel-padding:16px; --panel-gap:12px; }
 .app-shell > header { grid-template-columns:minmax(0,1fr) auto; gap:10px 12px; padding-top:16px; min-height:134px; }
 .app-shell > header .brand { font-size:10px; }
 .app-shell > header .brand-icon { font-size:30px; }
 .app-shell > header .language { grid-column:2; grid-row:1; }
 .app-shell > header .language select { max-width:135px; font-size:12px; }
 .app-shell > header > nav { grid-column:1/-1; grid-row:2; justify-content:space-between; flex-wrap:wrap; gap:0 8px; }
 .app-shell > header nav button { font-size:12px; min-width:44px; }
 .app-shell .section-heading,.app-shell .atlas-console,.app-shell .home { padding-top:24px; }
 .app-shell .section-heading h1,.app-shell .console-heading h1 { font-size:28px; }
 .app-shell .home { grid-template-columns:1fr; }
 .app-shell .home .hero-plate { width:100%; max-width:none; margin:0; }
 .app-shell .home .actions .button { flex:1 1 130px; min-height:48px; }
 .app-shell .console-heading { display:block; }
 .app-shell .atlas-summary { margin-top:16px; width:100%; padding:12px 0; }
 .app-shell .atlas-summary>span { padding:0 10px; flex:1; min-width:0; font-size:11px; overflow-wrap:anywhere; }
 .app-shell .atlas-summary b { font-size:20px; }
 .app-shell .console-grid { display:flex; flex-direction:column; }
 .app-shell .cosmic-tree { width:100%; min-height:0; max-height:410px; }
 .app-shell .cosmic-tree:not([open]) { height:auto; max-height:none; }
 .app-shell .cosmic-tree>summary { min-height:48px; }
 .app-shell .cosmic-tree>ul { min-width:0; }
 .app-shell .cosmic-center,.app-shell .cosmic-detail { width:100%; min-height:0; }
 .app-shell .cosmic-detail { padding-bottom:0; }
 .app-shell .constellation { height:560px; }
 .app-shell .star-node { width:82px; gap:4px; }
 .app-shell .star-node .celestial-icon { width:48px; height:48px; }
 .app-shell .star-node.focus-node .celestial-icon { width:68px; height:68px; }
 .app-shell .star-node strong { font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
 .app-shell .star-node small { font-size:10px; }
 .app-shell .atlas-map-note { font-size:11px; }
 .app-shell .cosmic-cards,.app-shell .atlas-related>div { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .app-shell .cosmic-toolbar { flex-wrap:wrap; }
 .app-shell .cosmic-toolbar input { width:100%; flex-basis:100%; }
 .app-shell .cosmic-toolbar select { width:100%; max-width:none; }
 .app-shell .codex-grid.dense-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
 .app-shell .catalog-toolbar { display:block; }
 .app-shell .catalog-tabs { flex-wrap:wrap; justify-content:flex-start; margin-bottom:12px; }
 .app-shell .catalog-tabs button { flex:1 1 auto; padding:8px 10px; font-size:12px; }
 .app-shell .catalog-search { display:block; width:100%; max-width:none; min-width:0; }
 .app-shell .catalog-count { gap:10px 16px; }
 .app-shell .catalog-count>span { font-size:11px; }
 .app-shell .record-top { display:block; }
 .app-shell .record-name { white-space:normal; overflow-wrap:anywhere; line-height:1.7; }
 .app-shell .record-bottom { flex-wrap:wrap; gap:8px; }
 .app-shell .record-snippet { white-space:normal; flex:1 1 160px; line-height:1.6; }
 .app-shell .record-detail dl { grid-template-columns:1fr; gap:5px; }
 .app-shell .record-detail dd { margin-bottom:10px; }
 .app-shell .compact-record summary { padding:14px; }
 .app-shell footer>div { flex-wrap:wrap; gap:12px; }
 .app-shell .pagination { gap:8px; }
 .app-shell .pagination button { padding:8px 10px; font-size:12px; }
}
@media(max-width:374px) { .app-shell .codex-grid.dense-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* The mobile constellation gets its own spaced node coordinates and matching paths. */
.app-shell .star-node { left:var(--desktop-x); top:var(--desktop-y); }
.app-shell .mobile-map-lines { display:none; }
@media(max-width:760px) {
 .app-shell .constellation { height:var(--mobile-map-height); }
 .app-shell .star-node { left:var(--mobile-x); top:var(--mobile-y); width:100px; }
 .app-shell .desktop-map-lines { display:none; }
 .app-shell .mobile-map-lines { display:block; }
}
@media(max-width:760px) {
 .app-shell .tree-expander { width:44px; }
 .app-shell .atlas-breadcrumb a { min-height:44px; display:inline-flex; align-items:center; }
}
/* Keep deep hierarchy names readable without widening the shared outer shell. */
@media(min-width:1101px) { .app-shell .console-grid { grid-template-columns:300px minmax(0,1fr) 310px; } }
.app-shell .cosmic-tree ul { padding-left:8px; }
.app-shell .cosmic-tree>ul { padding:0 9px 18px; }
.app-shell .cosmic-tree li>ul { margin-left:2px; }
.app-shell .cosmic-tree li>ul>li:before { left:-8px; width:8px; }
.app-shell .cosmic-tree li>ul>li:last-child:after { left:-9px; }

/* STEP 4B-2: only the observatory and active presentation surfaces. */
.app-shell .home .hero-plate { background:var(--panel-deep); box-shadow:none; padding:var(--panel-padding); }
.home .hero-label { color:var(--muted); font-size:var(--text-small); margin:0; }
.home .home-destination { display:flex; flex-direction:column; gap:6px; margin:24px 0; }
.home-destination>span { color:var(--muted); font-size:var(--text-small); }
.home .specimen-name { overflow-wrap:anywhere; }
.home .unknown-specimen { display:grid; place-items:center; min-height:260px; font-size:72px; color:var(--muted); }
.app-shell .progress-screen .scan-stage { background:var(--panel-deep); border:0; min-height:180px; margin-bottom:24px; }
.progress-screen .exploration-wait { margin:0; padding:24px; color:var(--muted); text-align:center; }
.progress-screen .scan-status { min-height:52px; }
.app-shell .observation-screen .observation-plate { background:var(--panel-deep); box-shadow:none; animation:none; }
@media(max-width:760px) { .home .unknown-specimen { min-height:190px; } .app-shell .progress-screen .scan-stage { min-height:140px; } }

/* Observatory visual slots: isolated from atlas, codex, archive and progress timers. */
.app-shell .observatory-home { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:clamp(24px,4vw,64px); padding-block:36px 12px; }
.observatory-home .intro>.eyebrow { margin-bottom:16px; }
.observatory-home .home-destination { margin:0 0 22px; gap:4px; }
.observatory-home .home-destination strong { font-size:20px; color:#b4dfeb; }
.app-shell .observatory-home h1 { font-size:clamp(28px,2.8vw,42px); line-height:1.4; letter-spacing:-.045em; margin-bottom:18px; }
.observatory-home .actions { gap:10px; flex-wrap:wrap; }
.observatory-home .stats { margin-top:30px; }
.app-shell .observatory-home .scene-figure { padding:0; }
.scene-figure { margin:0; min-width:0; overflow:hidden; border:1px solid #466778; border-radius:var(--radius); }
.content-scene { position:relative; isolation:isolate; overflow:hidden; min-height:380px; display:grid; place-items:center; background:radial-gradient(ellipse at 55% 32%,#1a6380 0%,#0a324e 40%,#041723 85%); }
.content-scene.deep-space { background:radial-gradient(ellipse at 60% 40%,#23465b,#071b30 70%); }
.scene-environment,.scene-backdrop { position:absolute; inset:0; width:100%; height:100%; z-index:-1; object-fit:cover; }
.scene-environment { background:radial-gradient(circle at 22% 38%,#a9e8f580 0 1px,transparent 2px),radial-gradient(circle at 77% 62%,#a9e8f560 0 1px,transparent 2px),radial-gradient(circle at 63% 24%,#a9e8f560 0 1px,transparent 2px); }
.ice-ocean .scene-ice { position:absolute; inset:0 0 auto; height:26%; background:linear-gradient(140deg,#366a89,#103951 60%,#4a8f9e); opacity:.8; clip-path:polygon(0 0,100% 0,100% 37%,91% 27%,87% 59%,82% 31%,74% 46%,69% 23%,57% 42%,50% 30%,46% 75%,41% 27%,30% 40%,25% 25%,17% 61%,12% 29%,0 50%); }
.ice-ocean .scene-floor { position:absolute; inset:auto -2% 0; height:28%; background:linear-gradient(165deg,#20506a,#092936 60%); clip-path:polygon(0 50%,12% 22%,22% 46%,32% 19%,44% 51%,56% 45%,68% 61%,80% 30%,91% 51%,100% 22%,100% 100%,0 100%); }
.ice-ocean .scene-light { position:absolute; inset:0; background:linear-gradient(110deg,transparent 23%,#6faed512 32%,transparent 43%),radial-gradient(ellipse at 52% 72%,#78d9d927,transparent 40%); }
.content-scene .specimen { min-height:380px; width:100%; margin:0; z-index:1; }
.content-scene .specimen img { width:clamp(240px,24vw,340px); height:auto; max-width:82%; filter:drop-shadow(0 12px 20px #50cbcc38); }
.scene-unknown { color:#bad4df; text-align:center; padding:64px 24px; }
.scene-unknown>span { display:block; font-size:48px; font-weight:300; opacity:.65; }
.scene-unknown p { font-size:14px; margin:10px 0; }
.scene-art-note { position:absolute; bottom:12px; left:16px; font-size:11px; color:#b6d3de; z-index:2; }
.scene-figure figcaption { padding:18px 22px; background:#0b2535; border-top:1px solid #345464; color:#d8e6ed; }
.observatory-home .specimen-name { color:#e3edf0; font-size:19px; line-height:1.5; margin:7px 0; }
.observatory-home .specimen-caption { margin:0; padding:0; font-size:13px; color:#b6cbd5; }
.app-shell .observation-screen .observe-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; align-items:start; }
.observation-screen .content-scene,.observation-screen .content-scene .specimen { min-height:430px; }
.observation-screen .scene-figure figcaption { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; }
.observation-screen .observation-text { padding:0; min-width:0; }
.observation-screen .registration { margin:0 0 16px; font-size:12px; }
.observation-screen .scene { font-size:17px; line-height:1.9; margin-bottom:18px; color:#e0e9ee; }
.observation-screen .prompt { margin:0 0 20px; line-height:1.8; color:#b9cbd4; }
.observation-screen .choices { display:grid; gap:10px; margin-bottom:20px; }
.observation-screen .choice { grid-template-columns:22px minmax(0,1fr) 68px; padding:16px; gap:12px; background:#0c2838; border-color:#426173; min-height:88px; }
.observation-screen .choice strong { color:#e0ebee; line-height:1.6; }
.observation-screen .choice small { color:#adc4d0; font-size:12px; line-height:1.6; margin-top:5px; }
.observation-screen .choice-status { display:flex; flex-direction:column; align-items:center; color:#a8daca; }
.observation-screen .choice-status>small { font-size:11px; white-space:normal; }
.observation-screen .choice-known { border-color:#6b958e; background:#102e39; }
.observation-screen .choice-known .choice-status>span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#9cdab8; color:#092632; }
.observation-screen .choice:hover { border-color:#a5d7d6; background:#163c4c; }
@media(max-width:900px) {
 .app-shell .observatory-home,.app-shell .observation-screen .observe-grid { grid-template-columns:1fr; gap:24px; }
 .app-shell .observatory-home { padding-top:24px; }
 .content-scene,.content-scene .specimen,.observation-screen .content-scene,.observation-screen .content-scene .specimen { min-height:310px; }
 .content-scene .specimen img { width:288px; }
 .observatory-home .stats { margin-top:24px; }
}
@media(max-width:430px) {
 .content-scene,.content-scene .specimen,.observation-screen .content-scene,.observation-screen .content-scene .specimen { min-height:280px; }
 .scene-figure figcaption { padding:16px; }
 .observation-screen .choice { padding:14px 12px; gap:8px; grid-template-columns:18px minmax(0,1fr) 58px; }
 .observation-screen .scene { font-size:16px; }
}
.app-shell .observation-screen .observation-plate.scene-figure { display:block; }
.scene-figure>.content-scene { width:100%; }
.observatory-home .scene-figure figcaption { text-align:left; }
.observatory-home .scene-figure .specimen-name { text-align:left; }

/* STEP 4C-2: approved environment and organism remain independent layers. */
.content-scene .scene-backdrop { object-fit:cover; object-position:58% center; }
.scene-creature-layer { width:100%; height:380px; display:grid; place-items:center; padding:20px 24px 30px; }
.scene-creature-layer .scene-creature { display:block; width:auto; height:auto; max-width:90%; max-height:330px; object-fit:contain; image-rendering:auto; filter:none; }
.observation-screen .scene-creature-layer { height:430px; }
.observation-screen .scene-creature-layer .scene-creature { max-height:380px; }
.content-scene:has(.scene-backdrop) .scene-art-note { background:#061c26cc; padding:4px 7px; border-radius:2px; left:10px; bottom:8px; }
@media(max-width:900px) { .scene-creature-layer,.observation-screen .scene-creature-layer { height:310px; padding:12px 18px 30px; } .scene-creature-layer .scene-creature,.observation-screen .scene-creature-layer .scene-creature { max-height:260px; } }
@media(max-width:430px) { .scene-creature-layer,.observation-screen .scene-creature-layer { height:280px; } .scene-creature-layer .scene-creature,.observation-screen .scene-creature-layer .scene-creature { max-height:230px; max-width:94%; } }

/* STEP 4C-3: the home hub has no species or habitat layers. */
.observatory-home .hub-space { height:380px; overflow:hidden; background:#071b29; }
.hub-space>img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.observatory-home .hub-visual .specimen-caption { text-align:left; }
@media(max-width:900px) { .observatory-home .hub-space { height:310px; } }
@media(max-width:430px) { .observatory-home .hub-space { height:260px; } }

/* STEP 4C-4: display-only depth matching, confined to individual observation art.
   Override these variables for future scenes; asset pixels and physical size stay unchanged. */
.observation-screen .content-scene {
 --creature-scale:.70;
 --creature-offset-x:3%;
 --creature-offset-y:-8px;
 --creature-brightness:.90;
 --creature-saturation:.88;
 --creature-contrast:.97;
}
.observation-screen .scene-creature-layer .scene-creature {
 transform:translate(var(--creature-offset-x),var(--creature-offset-y)) scale(var(--creature-scale));
 transform-origin:center;
 filter:brightness(var(--creature-brightness)) saturate(var(--creature-saturation)) contrast(var(--creature-contrast));
}

/* STEP 4C-6: full wide-angle composition, without cropping edge galaxies. */
.app-shell .observatory-home .hub-space { height:auto; aspect-ratio:1280 / 745; }
.observatory-home .hub-space>img { object-fit:contain; object-position:center; }

/* STEP 4D-5: child branches shrink to their contents; catalog cards stay unchanged. */
.app-shell .atlas-related {
 box-sizing:border-box;
 width:min(100%,calc(var(--branch-columns) * 300px + (var(--branch-columns) - 1) * var(--panel-gap) + 2 * var(--panel-padding) + 2px));
 margin-top:var(--panel-gap);
}
.app-shell .atlas-related h2 { margin:0 0 12px; }
.app-shell .atlas-related>div {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
 gap:var(--panel-gap);
}
.app-shell .atlas-related .cosmic-tile {
 display:grid; grid-template-columns:44px minmax(0,1fr);
 align-content:start; align-items:center; column-gap:12px; row-gap:3px;
 min-height:0; padding:12px;
}
.app-shell .atlas-related .cosmic-tile>.celestial-icon {
 grid-column:1; grid-row:1 / span 3; width:44px; height:44px; align-self:start;
}
.app-shell .atlas-related .cosmic-tile>strong,
.app-shell .atlas-related .cosmic-tile>small,
.app-shell .atlas-related .cosmic-tile>span:not(.celestial-icon),
.app-shell .atlas-related .cosmic-tile>b { grid-column:2; min-width:0; overflow-wrap:anywhere; }
.app-shell .atlas-related .cosmic-tile>b {
 justify-self:start; min-height:0; padding:0; border:0; background:none;
 font-size:10px; line-height:1.5;
}
.app-shell .atlas-related>div>.hint { margin:0; }
.app-shell .atlas-related .cosmic-tile { max-width:300px; }
@media(max-width:600px) {
 .app-shell .atlas-related { width:min(100%,calc(300px + 2 * var(--panel-padding) + 2px)); }
 .app-shell .atlas-related>div { grid-template-columns:minmax(0,1fr); }
}

/* STEP 4E-1: collection overview only; existing detail/observation art is untouched. */
.collection .catalog-categories { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 16px; }
.collection .catalog-categories label { font-size:12px; }
.collection .catalog-categories select { min-height:44px; padding:8px 12px; color:var(--ink); background:var(--panel-deep); border:1px solid var(--line); border-radius:var(--radius); }
.collection .catalog-categories .hint { margin:0; font-size:11px; }
.collection .codex-grid.dense-grid { grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); }
.collection .discovered-tile img { width:90%; height:90%; object-fit:contain; image-rendering:auto; }
.collection .codex-tile:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.collection .discovered-tile:hover { border-color:var(--mint); }
.collection .preview-label { position:absolute; bottom:4px; left:3px; right:3px; font-size:8px; line-height:1.3; color:var(--muted); text-align:center; }
@media(max-width:600px) { .collection .codex-grid.dense-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .collection .catalog-categories .hint { flex-basis:100%; } }

/* STEP 4F-1: one shared save-management entry; existing collection UI is unchanged. */
.save-manager { max-width:760px; }
.save-manager .save-file-label { position:relative; cursor:pointer; }
.save-manager .save-file-label:focus-within { outline:2px solid var(--gold); outline-offset:3px; }
.save-manager .save-preview { margin-top:24px; padding:var(--panel-padding); border:1px solid var(--line); background:var(--panel); }
.save-manager .save-ack { display:flex; align-items:flex-start; gap:10px; margin:20px 0; line-height:1.6; }
.save-manager .save-ack input { width:20px; height:20px; flex-shrink:0; }
.save-manager p { overflow-wrap:anywhere; }

/* Uniform display-only slots for everything not yet discovered. */
.collection .placeholder-tile { border-style:dashed; background:var(--panel-deep); cursor:default; }
.collection .placeholder-tile .unknown-symbol { opacity:.45; }
.collection .slot-note { margin:0 0 16px; }

/* SPRINT 01: collection-only controls and artwork; shared shell stays unchanged. */
.collection .codex-grid.dense-grid { grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; }
.collection .codex-tile { min-height:64px; }
.collection .unknown-tile { border-color:var(--muted); background:var(--panel); }
.collection .tile-number { font-size:11px; color:var(--ink); background:var(--panel-deep); padding:3px 5px; border-radius:2px; }
.collection .tile-status { position:absolute; bottom:7px; inset-inline:3px; font-size:11px; line-height:1.4; color:var(--ink); text-align:center; }
.collection .unknown-tile .unknown-symbol { color:var(--muted); padding-bottom:6px; }
.collection .placeholder-tile { border-color:var(--line); background:transparent; }
.collection .placeholder-tile .unknown-symbol { font-size:20px; opacity:.55; }
.collection .discovered-tile img { width:100%; height:100%; padding:7px; }
.collection .tile-name { position:absolute; inset-inline:4px; bottom:27px; padding:2px 4px; background:var(--panel-deep); color:var(--ink); font-size:12px; line-height:1.25; overflow-wrap:anywhere; }
.collection .tile-progress { font-size:11px; color:var(--ink); }
.collection .catalog-search { position:relative; min-width:0; }
.collection .catalog-search input { padding-inline-end:48px; min-height:48px; }
.collection .clear-search { position:absolute; inset-inline-end:2px; top:2px; min-width:44px; min-height:44px; padding:4px; border:0; font-size:22px; }
.collection .catalog-feedback { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:12px 0; }
.collection .catalog-feedback .button { font-size:12px; padding:8px 12px; gap:8px; }
.collection .catalog-empty { border:1px solid var(--line); text-align:center; }
.collection .catalog-empty h2 { font-size:20px; }
.collection .catalog-empty p { color:var(--muted); }
.collection .catalog-categories .hint { font-size:12px; }
.collection .pagination { flex-wrap:wrap; }
.codex-detail .codex-overview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:32px; }
.codex-detail .codex-artwork { margin:0; min-width:0; background:var(--panel); border:1px solid var(--line); }
.codex-detail .codex-artwork img { display:block; width:100%; height:clamp(260px,35vw,480px); padding:16px; object-fit:contain; }
.codex-detail .codex-overview h1 { font-size:clamp(24px,3vw,36px); line-height:1.45; overflow-wrap:anywhere; margin:12px 0; }
.codex-detail .codex-discovery-status { color:var(--mint); }
.codex-detail .entry { padding:20px; }
.codex-detail .entry.locked { opacity:1; color:var(--muted); border:1px dashed var(--line); margin:8px 0; }
.codex-detail .entry.unlocked { border-color:var(--muted); }
.codex-detail .codex-animation { margin:20px 0; }
.codex-detail .codex-animation summary { cursor:pointer; padding:12px 0; min-height:44px; color:var(--muted); }
.codex-detail > .button:last-child { margin-bottom:28px; }
.collection #codex-search::-webkit-search-cancel-button { -webkit-appearance:none; }
@media(max-width:760px) {
 .codex-detail .codex-overview { grid-template-columns:minmax(0,1fr); gap:20px; }
 .codex-detail .codex-artwork img { height:320px; }
 .codex-detail .entries { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px) {
 .collection .codex-grid.dense-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
 .collection .catalog-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
 .collection .catalog-tabs button { min-height:44px; }
 .collection .tile-number { top:3px; left:3px; font-size:10px; padding:2px 3px; }
 .collection .tile-status { font-size:10px; bottom:5px; }
 .collection .tile-progress { font-size:10px; }
 .codex-detail .codex-artwork img { height:280px; }
}
@media(min-width:430px) and (max-width:600px) {
 .collection .codex-grid.dense-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

/* SPRINT 02: retain existing panels and controls for journey recovery and record links. */
.pending-notice .button { white-space:normal; text-align:center; }
.record-links { gap:10px; }
.record-links .button { min-height:44px; }
.observation-text > progress { margin-bottom:20px; }

/* Compact observation selector: circles and labels, without individual cards. */
.app-shell .observation-screen .observation-text { container-type:inline-size; }
.app-shell .observation-screen .choices { display:block; margin-bottom:16px; }
.app-shell .observation-grid { display:grid; grid-template-columns:repeat(6,minmax(44px,82px)); gap:1px; justify-content:start; width:fit-content; max-width:100%; border:1px solid #426173; background:#426173; }
.app-shell .observation-option { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:100%; max-width:82px; min-width:44px; height:65px; min-height:44px; padding:1px 0; border:0; border-radius:0; background:#061c26; box-shadow:none; color:var(--muted,#adc4d0); cursor:pointer; }
.app-shell .observation-option:hover { background:#102a33; color:var(--cream,#ebd8b1); }
.app-shell .observation-option:focus-visible { outline:2px solid #ebd8b1; outline-offset:-3px; }
.app-shell .observation-ring { position:relative; display:grid; place-items:center; flex:none; width:34px; height:34px; color:#adc4d0; }
.app-shell .observation-ring svg { position:absolute; inset:0; width:34px; height:34px; overflow:visible; transform:rotate(-90deg); }
.app-shell .observation-ring circle { fill:none; stroke-width:2; }
.app-shell .ring-segment { stroke:#426173; }
.app-shell .ring-segment.is-filled { stroke:currentColor; }
.app-shell .observation-ring>span { font-size:10px; line-height:1; font-variant-numeric:tabular-nums; }
.app-shell .observation-label { flex:none; max-width:100%; font-size:11px; line-height:13px; font-weight:500; text-align:center; overflow-wrap:anywhere; }
.app-shell .observation-option.is-observed .observation-ring { color:#9cdab8; }
.app-shell .observation-option.is-observed .observation-ring>span { font-size:17px; }
.app-shell .observation-option[aria-pressed="true"] { background:#2c302d; }
.app-shell .observation-option[aria-pressed="true"] .observation-label { color:#ebd8b1; text-decoration:underline; text-underline-offset:3px; }
.app-shell .observation-ring-guide { font-size:11px; line-height:1.5; color:#adc4d0; margin:10px 0; }
.app-shell .observation-selection { margin:12px 0 0; }
.app-shell .observation-selection>strong { font-size:14px; color:#ebd8b1; }
.app-shell .observation-selection>p { font-size:12px; line-height:1.6; margin:5px 0 10px; }
@container (max-width:470px) { .app-shell .observation-grid { grid-template-columns:repeat(4,minmax(44px,82px)); } }
@container (max-width:340px) { .app-shell .observation-grid { grid-template-columns:repeat(3,minmax(44px,82px)); } }
@container (max-width:220px) { .app-shell .observation-grid { grid-template-columns:repeat(2,minmax(44px,82px)); } }
.app-shell .observation-selection>[data-choice] { min-height:44px; padding:10px 14px; border:1px solid #426173; background:#122f3b; color:#ebd8b1; cursor:pointer; }
.app-shell .observation-selection>[data-choice]:focus-visible { outline:2px solid #ebd8b1; outline-offset:2px; }
/* Optional evidence stays secondary, with a full touch target. */
.app-shell .observation-evidence>summary { min-height:44px; box-sizing:border-box; padding:10px 0; font-size:12px; line-height:24px; cursor:pointer; }
.app-shell .observation-evidence>summary:focus-visible { outline:2px solid #ebd8b1; outline-offset:2px; }
/* SPRINT 14: compact narrative purpose within the existing observatory. */
.app-shell .mission-objective { margin:16px 0; padding-left:12px; border-left:2px solid var(--line); min-width:0; }
.app-shell .mission-objective h2 { font-size:13px; line-height:1.5; margin:0 0 5px; color:var(--gold); }
.app-shell .mission-objective>p { font-size:14px; line-height:1.6; margin:5px 0; }
.app-shell .mission-objective>.hint { font-size:12px; }
.app-shell .mission-objective .actions { margin:8px 0; gap:8px; flex-wrap:wrap; }
.app-shell .mission-objective .button { min-height:44px; white-space:normal; }
.app-shell .mission-briefing { margin-top:12px; padding:12px; border:1px solid var(--line); background:var(--panel-deep); }
.app-shell .mission-briefing h3 { font-size:15px; line-height:1.5; margin:0 0 8px; color:var(--ink); }
.app-shell .mission-briefing p { font-size:13px; line-height:1.6; margin:7px 0; }
.app-shell .signal-notes { margin:20px 0 24px; }
.app-shell .signal-notes h2,.app-shell .life-record-heading { font-size:17px; line-height:1.5; }
.app-shell .signal-notice { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.app-shell .signal-record summary { min-height:44px; }

/* Shared compact codex/observation grid; desktop six, small screens three. */
.app-shell .codex-observations { container-type:inline-size; margin:16px 0; }
@media (max-width:600px) { .app-shell .observation-grid { grid-template-columns:repeat(3,minmax(44px,82px)); } }

/* Keep the shared codex grid and its single result panel in a balanced reading column. */
.app-shell .codex-observations { max-width:720px; margin:20px auto; }
.app-shell .codex-observations .observation-grid { margin-inline:auto; }
.app-shell .codex-observations :is(.observation-ring-guide,.observation-selection) { max-width:640px; margin-inline:auto; }
.app-shell .codex-observations .observation-selection { border-top:1px solid var(--line); padding-top:12px; }
.app-shell .diversity-summary { margin:8px 0; }
.app-shell .codex-card > :is(.scope,.actions,.trophy,.hint[role="status"]) { max-width:640px; margin-inline:auto; }

/* Dedicated draft scenes preserve the full image; never crop subjects or alter approved art. */
.codex-detail .dedicated-species-art img { height:auto; max-height:520px; padding:0; object-fit:contain; }
.codex-detail .dedicated-species-art figcaption { padding:8px 12px; color:var(--muted); font-size:11px; }
/* Modular Species Field Guide: CSS/HTML text, never a flattened concept sheet. */
.app-shell .mastery-panel { border:1px solid var(--line); background:var(--panel-deep); padding:20px; margin:20px 0; }
.app-shell .mastery-panel h2 { font-size:20px; }
.app-shell .mastery-panel p { line-height:1.6; }
.app-shell .mastery-panel .button { display:inline-flex; align-items:center; min-height:44px; margin:4px 8px 4px 0; }
/* Flexible Editorial Field Guide V2. Natural image size defines the frame. */
.app-shell .field-guide { --guide-ink:#192b40; --guide-line:#b2a28b; --guide-accent:#93452d; color:var(--guide-ink); background:#f3e8d2; max-width:1280px; margin:24px auto; padding:40px 48px; border:1px solid #9d8674; font-size:16px; line-height:1.65; }
.app-shell .field-guide .button { display:inline-flex; align-items:center; min-height:44px; min-width:44px; color:var(--guide-ink); border:1px solid var(--guide-line); background:transparent; padding:10px 14px; margin-bottom:26px; }
.app-shell .field-guide .button:focus-visible { outline:3px solid var(--guide-accent); outline-offset:3px; }
.app-shell .field-guide .guide-heading { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:36px; border-block:2px solid var(--guide-ink); padding:24px 0; margin:0 0 18px; background:none; color:inherit; }
.app-shell .field-guide .guide-number { font:clamp(88px,10vw,144px)/1 Georgia,'Times New Roman',serif; letter-spacing:-.07em; color:var(--guide-accent); }
.app-shell .field-guide h1 { font:500 clamp(32px,3.6vw,48px)/1.3 Georgia,'Noto Serif',Batang,serif; color:inherit; margin:8px 0 12px; overflow-wrap:anywhere; }
.app-shell .field-guide h2 { font:600 24px/1.45 Georgia,Batang,serif; color:inherit; margin:4px 0 14px; }
.app-shell .field-guide p { font-size:16px; line-height:1.65; margin:0 0 18px; overflow-wrap:anywhere; }
.app-shell .field-guide .guide-kicker { font-size:11px; letter-spacing:.14em; }
.app-shell .field-guide .guide-names { margin:0 0 10px; }
.app-shell .field-guide .guide-names i { font-family:Georgia,serif; font-size:21px; }
.app-shell .field-guide .guide-approval { font-size:11px; letter-spacing:.1em; }
.app-shell .field-guide .guide-review { font-size:12px; border-bottom:1px solid var(--guide-line); padding:8px 0; margin:0; background:none; }
.app-shell .field-guide .guide-review summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; }
.app-shell .field-guide .guide-review summary:before { content:'+'; color:var(--guide-accent); font-size:20px; }
.app-shell .field-guide .guide-review[open] summary:before { content:'−'; }
.app-shell .field-guide .guide-tags { display:flex; flex-wrap:wrap; gap:8px 16px; margin:16px 0 32px; font-size:12px; }
.app-shell .field-guide .guide-tags span { padding:0 0 4px; border-bottom:1px solid var(--guide-accent); }
.app-shell .field-guide .editorial-block { padding:32px 0; border-top:1px solid var(--guide-line); }
.app-shell .field-guide .editorial-hero { padding-top:0; border:0; }
.app-shell .field-guide .editorial-hero .editorial-copy { max-width:760px; margin-bottom:24px; }
.app-shell .field-guide .editorial-hero .editorial-section-number { display:none; }
.app-shell .field-guide .editorial-hero h2 { font-size:20px; }
.app-shell .field-guide .editorial-hero p { font-size:20px; line-height:1.65; }
.app-shell .field-guide .editorial-art { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:24px; min-width:0; max-width:var(--block-art-width,100%); }
.app-shell .field-guide .editorial-plate { width:100%; max-width:var(--plate-width,100%); margin:0; min-width:0; }
.app-shell .field-guide .guide-image-slot { width:100%; box-sizing:border-box; min-height:0; padding:0; border:1px solid var(--guide-ink); background:none; }
.app-shell .field-guide .guide-image-slot img { width:100%; height:auto; display:block; max-width:100%; max-height:none; object-fit:contain; }
.app-shell .field-guide .guide-image-slot [hidden] { display:none; }
.app-shell .field-guide .guide-image-slot>span:not([hidden]) { display:block; padding:20px; font-size:14px; }
.app-shell .field-guide figcaption { display:flex; gap:12px; padding:10px 0 0; font-size:13px; line-height:1.6; }
.app-shell .field-guide figcaption b { color:var(--guide-accent); font-family:Georgia,serif; font-size:17px; }
.app-shell .field-guide .editorial-section-number { font:13px Georgia,serif; color:var(--guide-accent); }
.app-shell .field-guide .editorial-panorama { display:grid; grid-template-columns:minmax(200px,.7fr) minmax(0,1.6fr); gap:32px; align-items:center; }
.app-shell .field-guide .editorial-anatomy { display:grid; grid-template-columns:minmax(230px,.8fr) minmax(0,1.5fr); gap:40px; }
.app-shell .field-guide .editorial-anatomy .editorial-art { flex-wrap:nowrap; gap:20px; }
.app-shell .field-guide .editorial-study { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:48px; }
.app-shell .field-guide .editorial-study .editorial-copy { columns:2 240px; column-gap:32px; }
.app-shell .field-guide .editorial-section { break-inside:avoid; }
.app-shell .field-guide .editorial-essay .editorial-copy { display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:1000px; }
.app-shell .field-guide .editorial-notes { background:#e8dcc4; padding:24px; margin:16px 0 0; border-top:2px solid var(--guide-ink); }
.app-shell .field-guide .editorial-notes .editorial-copy { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.app-shell .field-guide .editorial-notes h2 { font-size:20px; }
.app-shell .field-guide>footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; border-top:2px solid var(--guide-ink); margin:32px 0 0; padding:16px 0 0; color:inherit; font-size:12px; }
@media(max-width:768px) {
 .app-shell .field-guide { padding:20px 16px; }
 .app-shell .field-guide .guide-heading { grid-template-columns:minmax(0,1fr); gap:12px; }
 .app-shell .field-guide .guide-number { font-size:76px; }
 .app-shell .field-guide h1 { font-size:32px; }
 .app-shell .field-guide .guide-kicker { font-size:9px; letter-spacing:.05em; }
 .app-shell .field-guide .guide-names i { font-size:18px; }
 .app-shell .field-guide .editorial-block { padding:24px 0; }
 .app-shell .field-guide .editorial-panorama,.app-shell .field-guide .editorial-anatomy,.app-shell .field-guide .editorial-study,.app-shell .field-guide .editorial-essay .editorial-copy,.app-shell .field-guide .editorial-notes .editorial-copy { display:block; }
 .app-shell .field-guide .editorial-anatomy .editorial-art { flex-wrap:wrap; }
 .app-shell .field-guide .editorial-study .editorial-copy { columns:auto; }
 .app-shell .field-guide .editorial-art { margin-top:20px; }
 .app-shell .field-guide .editorial-notes { padding:20px 16px; }
}
.app-shell .field-guide .editorial-plate:not([style]) .guide-image-slot { width:fit-content; max-width:100%; }
.app-shell .field-guide .editorial-plate:not([style]) img { width:auto; max-width:100%; }
.app-shell .field-guide figcaption strong { font-weight:600; }
.app-shell .field-guide figcaption small { display:block; margin-top:4px; font-size:13px; line-height:1.6; color:inherit; }
.app-shell .field-guide .guide-research { margin-top:32px; border-top:2px solid var(--guide-ink); border-bottom:1px solid var(--guide-line); }
.app-shell .field-guide .guide-research>summary { cursor:pointer; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px; font:600 22px/1.5 Georgia,Batang,serif; padding:12px 0; }
.app-shell .field-guide .guide-research>summary:after { content:'+'; color:var(--guide-accent); }
.app-shell .field-guide .guide-research[open]>summary:after { content:'−'; }
.app-shell .field-guide .guide-research>summary:focus-visible { outline:2px solid var(--guide-accent); outline-offset:3px; }
.app-shell .field-guide .research-chapter { max-width:800px; padding:24px 0; border-top:1px solid var(--guide-line); }
.app-shell .field-guide .research-chapter h3 { font:600 23px/1.5 Georgia,Batang,serif; margin:0 0 18px; }
.app-shell .field-guide .research-chapter h4 { font-size:18px; line-height:1.5; margin:24px 0 12px; }
.app-shell .field-guide .research-language-note { padding:16px; background:#e8dcc4; }

/* Nine-locale publication: local font fallback, no remote font dependency. */
.field-guide { overflow-wrap:anywhere; hyphens:auto; }
html:lang(zh-CN) .field-guide { font-family:"Noto Sans CJK SC","Microsoft YaHei","PingFang SC",sans-serif; }
html:lang(zh-TW) .field-guide { font-family:"Noto Sans CJK TC","Microsoft JhengHei","PingFang TC",sans-serif; }
.field-guide .editorial-copy,.field-guide .guide-heading>div { min-width:0; }

/* Long localized hub labels must wrap inside the existing three statistics. */
.habitat-discovery { margin-block:1rem; padding-block:.75rem; border-block:1px solid var(--border,#34515b); min-width:0; }
.habitat-discovery h3 { margin:0 0 .5rem; font-size:1rem; }
.habitat-discovery p { margin:.5rem 0; overflow-wrap:anywhere; }
.habitat-discovery ul { list-style:none; padding:0; display:grid; gap:.5rem; }
.habitat-discovery .button { max-width:100%; white-space:normal; overflow-wrap:anywhere; text-align:start; }
.report h1 { overflow-wrap:anywhere; }
/* Candidate-only presentation; approved scenes retain their existing styling. */
.candidate-art { width:100%; min-width:0; margin:0; background:var(--panel,#122f3b); }
.candidate-art>.candidate-organism { display:block; width:auto; height:auto; max-width:100%; margin-inline:auto; image-rendering:pixelated; object-fit:contain; }
.candidate-art figcaption { padding:10px; font-size:11px; overflow-wrap:anywhere; }
.candidate-composite { position:relative; display:grid; place-items:center; min-height:280px; padding:20px; isolation:isolate; overflow:hidden; background:#071c26; }
.candidate-composite .candidate-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.candidate-composite .candidate-organism { display:block; width:auto; height:auto; max-width:100%; max-height:360px; object-fit:contain; image-rendering:pixelated; transform:none; filter:none; }
@media(max-width:430px) { .candidate-composite .candidate-organism { max-height:240px; } }
.app-shell .observatory-home h1 { overflow-wrap:anywhere; word-break:normal; }
@media(max-width:768px) {
 .app-shell .observatory-home .stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
 .app-shell .observatory-home .stats>div { min-width:0; padding-inline:12px; }
 .app-shell .observatory-home .stats>div:first-child { padding-left:0; }
 .app-shell .observatory-home .stats span { white-space:normal; overflow-wrap:anywhere; hyphens:auto; }
}