/* Environments, visual revision 2. Existing controls own all interaction and FX state. */
.environment-section {
  --environment-accent: var(--orange, #ff6a24);
  --environment-cool: var(--cyan, #78d9ff);
  position: relative;
  isolation: isolate;
  min-inline-size: 0;
  margin-block: clamp(2.5rem, 5vw, 5rem);
  padding: clamp(1rem, 2.5vw, 2.4rem);
  border: 1px solid var(--line, #665038);
  background: linear-gradient(120deg, rgb(53 120 143 / .1), transparent 36%, rgb(137 59 19 / .1)), var(--deck-surface, #100d0b);
  box-shadow: 0 1.5rem 4rem var(--deck-shadow, #0008);
  scroll-margin-top: 7rem;
}
.environment-section::before {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: min(42%, 21rem);
  block-size: 2px;
  background: linear-gradient(90deg, var(--environment-cool), var(--environment-accent), transparent);
}
.environment-section .subhead { position: relative; margin-block-end: 1.5rem; padding-inline-end: min(6vw, 5rem); }
.environment-section .subhead > span { color: var(--gold); font-family: "Axtlan Soles", sans-serif; letter-spacing: .18em; }
.environment-section .subhead h2 { margin-block: .5rem .75rem; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.12; color: var(--deck-copy); }
.environment-section .subhead p { max-inline-size: 68ch; color: var(--deck-muted); }
.environment-selector { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .65rem; margin-block-end: 1.25rem; counter-reset: environment-item; }
.environment-tab {
  --cinematic-accent: var(--environment-accent);
  counter-increment: environment-item;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-inline-size: 0;
  padding: .3rem;
  border: 1px solid var(--deck-edge);
  background: var(--deck-surface-soft);
  color: var(--deck-copy);
  text-align: start;
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, translate .3s ease, box-shadow .3s ease;
}
.environment-tab::before {
  content: counter(environment-item, decimal-leading-zero);
  position: absolute;
  z-index: 2;
  inset-block-start: .6rem;
  inset-inline-start: .6rem;
  padding: .18rem .35rem;
  background: #080706eb;
  color: #fff2df;
  font: 700 .63rem/1.25 "Axtlan Soles", sans-serif;
  letter-spacing: .1em;
  pointer-events: none;
}
.environment-tab::after { content: ""; position: absolute; inset-inline: .3rem; inset-block-end: -1px; block-size: 2px; background: linear-gradient(90deg, var(--environment-cool), var(--environment-accent)); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.environment-tab img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3/2; object-fit: cover; clip-path: polygon(0 0, calc(100% - .55rem) 0, 100% .55rem, 100% 100%, 0 100%); }
.environment-tab > span:not(.cinematic-edge):not(.input-response-layer) { display: block; padding: .7rem .45rem .55rem; font-size: .9rem; font-weight: 700; line-height: 1.35; font-family: inherit; overflow-wrap: anywhere; }
.environment-tab:hover, .environment-tab[aria-selected=true] { border-color: var(--environment-accent); background: color-mix(in srgb, var(--deck-surface-soft) 88%, var(--orange)); color: var(--deck-copy); box-shadow: inset 0 0 1.25rem rgb(255 106 36 / .08); }
.environment-tab[aria-selected=true]::after { opacity: 1; }
.environment-section :is(button, summary, [tabindex]):focus-visible { outline: 3px solid var(--environment-cool); outline-offset: -3px; }
.environment-panel { --cinematic-accent: var(--environment-cool); position: relative; min-inline-size: 0; border: 1px solid var(--deck-edge); background: linear-gradient(125deg, rgb(57 106 118 / .1), transparent 50%), var(--deck-surface-soft); margin: 0 0 1rem; }
.environment-panel[hidden] { display: none !important; }
.environment-panel:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.environment-scene { position: relative; isolation: isolate; align-self: center; overflow: hidden; margin: .65rem; min-inline-size: 0; background: #080b0b; }
.environment-scene::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(236 198 140 / .24); box-shadow: inset 0 0 2rem rgb(0 0 0 / .16); pointer-events: none; }
.environment-scene img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3/2; object-fit: contain; }
.environment-copy { position: relative; min-inline-size: 0; align-self: center; padding: clamp(1.1rem, 2.3vw, 2.4rem); }
.environment-copy::before { content: ""; display: block; inline-size: 3.4rem; block-size: 2px; margin-block-end: 1.1rem; background: linear-gradient(90deg, var(--environment-cool), var(--environment-accent)); }
.environment-copy h3 { margin: 0 0 .9rem; font-size: clamp(1.4rem, 2.1vw, 2.4rem); line-height: 1.12; color: var(--deck-copy); overflow-wrap: anywhere; }
.environment-copy p { margin: 0 0 1rem; line-height: 1.65; color: var(--deck-muted); overflow-wrap: anywhere; }
.environment-copy details { border-block-start: 1px solid var(--line); padding-block-start: .75rem; }
.environment-copy summary { cursor: pointer; color: var(--deck-copy); line-height: 1.5; padding-block: .4rem; }
.environment-copy summary::marker { color: var(--gold); }
.environment-copy details p { margin-block: .7rem 0; }
.environment-marks { display: flex; align-items: center; gap: 1rem; margin-block-end: 1rem; }
.environment-marks img { display: block; object-fit: contain; inline-size: 7rem; max-inline-size: 45%; block-size: 7rem; }
.environment-marks .environment-glyph { inline-size: 3rem; block-size: 3rem; }
/* No new animation loop: existing cinematic surfaces supply observed, suspended borders. */
body[data-mode="full"][data-motion="full"]:not([data-fx-suspended]) .environment-panel.is-vfx-active:not([hidden]) .environment-scene img { animation: environment-image-arrive .85s cubic-bezier(.16, 1, .3, 1) both; }
body[data-mode="full"][data-motion="full"]:not([data-fx-suspended]) .environment-panel.is-vfx-active:not([hidden]) .environment-copy { animation: environment-copy-arrive .65s cubic-bezier(.16, 1, .3, 1) .08s both; }
body[data-mode="full"][data-motion="full"]:not([data-fx-suspended]) .environment-copy details[open] p { animation: environment-copy-arrive .35s ease both; }
@media(hover:hover) and (pointer:fine) { body[data-mode="full"][data-motion="full"]:not([data-fx-suspended]) .environment-tab:hover { translate: 0 -.2rem; } }
@keyframes environment-image-arrive { from { opacity: .5; scale: 1.025; } to { opacity: 1; scale: 1; } }
@keyframes environment-copy-arrive { from { opacity: 0; translate: 0 .6rem; } to { opacity: 1; translate: 0 0; } }
@media(max-width:1000px) { .environment-selector { grid-template-columns: repeat(4, minmax(0,1fr)); } .environment-panel:not([hidden]) { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); } }
@media(max-width:650px) { .environment-selector { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; } .environment-tab { flex-direction: row; align-items: center; } .environment-tab img { inline-size: 3.75rem; flex: 0 0 3.75rem; } .environment-tab::before { inset-inline-start: .35rem; inset-block-start: .35rem; font-size: .5rem; padding: .12rem; } .environment-tab > span:not(.cinematic-edge):not(.input-response-layer) { font-size: .78rem; padding: .45rem; } .environment-panel:not([hidden]) { grid-template-columns: minmax(0,1fr); } .environment-scene { margin: .4rem; } }
body[data-mode="low"] .environment-section *, body[data-motion="reduced"] .environment-section *, body[data-fx-suspended] .environment-section * { animation: none !important; transition: none !important; }
body[data-contrast="high"] .environment-section { background: #080706; --deck-copy: #fff; --deck-muted: #fff; --deck-edge: #fff; --line: #fff; }
@media(prefers-reduced-motion:reduce), (forced-colors:active) { .environment-section *, .environment-section *::before, .environment-section *::after { animation: none !important; transition: none !important; translate: none !important; } }
@media(forced-colors:active) { .environment-section,.environment-tab,.environment-panel,.environment-copy details { border-color: CanvasText; background: Canvas; color: CanvasText; box-shadow: none; } .environment-section :is(h2,h3,p,summary,span) { color: CanvasText; } .environment-tab[aria-selected=true] { outline: 2px solid Highlight; } .environment-section :focus-visible { outline-color: Highlight; } .environment-tab::before { background: Canvas; color: CanvasText; } .environment-marks { background: #101010; forced-color-adjust: none; } }

/* Script-aware type and wrapping for all 28 editions; layout never changes source IDs. */
.environment-section .subhead > span { font-family: var(--axtlan-display-localized, inherit); overflow-wrap: anywhere; }
.environment-section :is(h2,h3) { font-family: var(--axtlan-display-localized, inherit); }
.environment-section :is(p,summary), .environment-tab > span:not(.cinematic-edge):not(.input-response-layer) { font-family: var(--axtlan-reading, inherit); }
.environment-section bdi { unicode-bidi: isolate; }
html[lang="x-binary"] .environment-selector { grid-template-columns: repeat(2,minmax(0,1fr)); }
html[lang="x-binary"] .environment-tab { flex-direction: row; align-items: center; }
html[lang="x-binary"] .environment-tab img { inline-size: 3.75rem; flex: 0 0 3.75rem; }
html[lang="x-binary"] .environment-tab > span:not(.cinematic-edge):not(.input-response-layer) { font-size: .72rem; line-height: 1.4; overflow-wrap: anywhere; }
html[lang="x-binary"] .environment-panel:not([hidden]) { grid-template-columns: minmax(0,1fr); }
html[lang="x-binary"] .environment-section .subhead h2 { font-size: var(--binary-heading-size,1rem); overflow-wrap: anywhere; }
@media(max-width:650px) { html[lang="x-binary"] .environment-selector { grid-template-columns: minmax(0,1fr); } }