/* Dreams of the Fallen — Field Guide v1
 * A content-preserving appearance layer for the EXISTING /field-guide/ page.
 * All selectors are scoped to .astralis-field-guide. Do not replace live content.
 * Colors match Astralis Pixel World and Flutter CompanionColors.
 */
.astralis-field-guide {
  --fg-night: #05091d; --fg-panel: #0a1835; --fg-raised: #11254c;
  --fg-line: #b88b45; --fg-gold: #f6cb72; --fg-cyan: #66daff;
  --fg-violet: #c276ff; --fg-ivory: #f8f1dd; --fg-secondary: #c9d8f1;
  --fg-teal: #65f2df;
  color: var(--fg-ivory); background: var(--fg-night);
  line-height: 1.65; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-height: 100vh; isolation: isolate; overflow-wrap: anywhere;
}
.astralis-field-guide, .astralis-field-guide * { box-sizing: border-box; }
.astralis-field-guide a { color: var(--fg-cyan); text-underline-offset: 4px; }
.astralis-field-guide a:hover { color: var(--fg-gold); }
.astralis-field-guide :is(a,button,input,select,summary):focus-visible { outline: 3px solid var(--fg-cyan); outline-offset: 3px; }
.astralis-field-guide :is(h1,h2,h3,h4) { color: var(--fg-ivory); font-family: Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: .01em; line-height: 1.2; }
.astralis-field-guide :is(p,li) { max-width: 77ch; }
.astralis-field-guide p { margin: .75rem 0 1rem; }
.astralis-field-guide strong { color: #ffde9e; }
.astralis-field-guide h2 { font-size: clamp(1.7rem, 2.5vw, 2.35rem); margin: 0 0 1.1rem; }
.astralis-field-guide h3 { color: var(--fg-gold); font-size: 1.35rem; margin: 1.6rem 0 .8rem; }
.astralis-field-guide :is(code,kbd) { background: #09183c; border: 1px solid #365886; border-radius: 4px; color: #95ebff; padding: .12em .42em; font: 600 .92em ui-monospace, SFMono-Regular, Consolas, monospace; }
.astralis-field-guide pre { background: #06112b; padding: 1.2rem; border: 1px solid #4168a1; border-left: 3px solid var(--fg-cyan); white-space: pre-wrap; overflow-x: auto; border-radius: 4px; }
.astralis-field-guide pre code { border: 0; padding: 0; background: transparent; color: #eaf4ff; font-weight: normal; }
.astralis-field-guide ul { padding-left: 1.35rem; }
.astralis-field-guide li { margin: .35rem 0; }
.astralis-field-guide ::selection { background: #26799f; color: #fff; }
.astralis-field-guide :is(img,svg) { max-width: 100%; }
.astralis-field-guide .fg-pixel-art { image-rendering: crisp-edges; image-rendering: pixelated; }

/* Hero is deliberately short; reading content, not background art, owns the page. */
.astralis-field-guide .fg-hero { position: relative; min-height: 365px; display: flex; align-items: end; overflow: hidden; border-bottom: 2px solid var(--fg-line); background: #101b43 url('./astralis-moonlit-city.webp') center 51% / cover no-repeat; }
.astralis-field-guide .fg-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,9,26,.96) 0%, rgba(3,10,31,.87) 33%, rgba(4,10,29,.32) 82%),linear-gradient(0deg, rgba(2,7,23,.9),transparent 46%); }
.astralis-field-guide .fg-hero::after { content: '✦'; position: absolute; right: 3%; bottom: 11px; color: var(--fg-gold); text-shadow: 0 0 9px var(--fg-cyan); }
.astralis-field-guide .fg-hero-inner { position: relative; z-index: 1; width: min(1300px,calc(100% - 48px)); margin: 0 auto; padding: 65px 0 40px; }
.astralis-field-guide .fg-eyebrow { font: 700 11px system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-cyan); margin-bottom: 13px; }
.astralis-field-guide .fg-hero h1 { margin: 0; font-size: clamp(3rem, 6vw, 5.8rem); line-height: .98; color: #ffdfa0; text-shadow: 0 2px 1px #292038,0 3px 20px #030b1f; }
.astralis-field-guide .fg-hero p { max-width: 590px; font-size: clamp(1rem, 1.25vw, 1.16rem); color: #e5efff; margin: 20px 0 0; }
.astralis-field-guide .fg-hero .fg-breadcrumbs { display: flex; gap: 9px; align-items: center; margin-bottom: 23px; font-size: 12px; color: var(--fg-secondary); }
.astralis-field-guide .fg-hero .fg-breadcrumbs a { color: var(--fg-secondary); text-decoration: none; }
.astralis-field-guide .fg-hero .fg-breadcrumbs a:hover { color: var(--fg-cyan); }
.astralis-field-guide .fg-hero-actions { display:flex; flex-wrap:wrap; gap: 12px; margin-top: 28px; }

.astralis-field-guide .fg-button, .astralis-field-guide :is(a,button).fg-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 43px; padding: 11px 17px; color: var(--fg-cyan); border: 1px solid #65dafe; background: linear-gradient(#173d73,#0a2146); border-radius: 3px; text-decoration: none; font: 800 12px system-ui, sans-serif; letter-spacing: .07em; box-shadow: inset 0 0 0 2px #0b1a35,0 0 12px #66daff33; cursor: pointer; transition: border-color .13s, box-shadow .13s; }
.astralis-field-guide .fg-button:hover { border-color: var(--fg-gold); box-shadow: 0 0 18px #66daff44; color: #fff; }
.astralis-field-guide .fg-button.fg-outline { color: var(--fg-gold); border-color: var(--fg-line); background: #06102acb; }
.astralis-field-guide .fg-button svg { width: 16px; height: 16px; image-rendering: pixelated; }

.astralis-field-guide .fg-main { background: radial-gradient(ellipse at 94% 10%, #142f6433 0,transparent 42%),#05091d; padding: 40px 0 90px; }
.astralis-field-guide .fg-shell { display: grid; grid-template-columns: minmax(215px,255px) minmax(0,1fr); gap: 34px; width: min(1300px,calc(100% - 48px)); margin: 0 auto; align-items: start; }
.astralis-field-guide .fg-sidebar { position: sticky; top: 24px; max-height: calc(100dvh - 48px); overflow: auto; scrollbar-color: #3866a2 #0a1835; }
.astralis-field-guide .fg-toc { position: relative; background: #0b1a39; border: 1px solid var(--fg-line); padding: 16px; box-shadow: inset 0 0 0 4px #08112d,0 10px 25px #0007; }
.astralis-field-guide .fg-toc::before,.astralis-field-guide .fg-toc::after { content: '◆'; position: absolute; top: -10px; color: var(--fg-gold); background: #05091d; line-height: 1; font-size: 16px; }
.astralis-field-guide .fg-toc::before { left: -7px; }.astralis-field-guide .fg-toc::after { right: -7px; }
.astralis-field-guide .fg-toc-title { font: 800 11px system-ui,sans-serif; letter-spacing: .17em; text-transform: uppercase; color: var(--fg-gold); border-bottom: 1px solid #987a4e66; padding: 4px 2px 14px; margin-bottom: 12px; }
.astralis-field-guide .fg-search { display: flex; align-items: center; gap: 6px; width: 100%; height: 40px; background: #060f28; border: 1px solid #37588e; border-radius: 3px; padding: 4px 11px; margin-bottom: 14px; }
.astralis-field-guide .fg-search svg { color: var(--fg-cyan); width:17px;height:17px;flex:none; }
.astralis-field-guide .fg-search input { width: 100%; padding: 4px 0; background: none; border: 0; outline: none; color: var(--fg-ivory); font-size: 13px; font-family: inherit; }
.astralis-field-guide .fg-search:focus-within { outline: 2px solid var(--fg-cyan); outline-offset: 2px; }
.astralis-field-guide .fg-search input::placeholder { color:#95aaca; }
.astralis-field-guide .fg-toc-list { list-style:none; padding:0; margin:0; display:grid; gap:2px; }
.astralis-field-guide .fg-toc-list li { margin: 0; }
.astralis-field-guide .fg-toc-list a { display:flex; gap: 9px; align-items:baseline; border-left: 2px solid transparent; padding: 8px 8px 8px 10px; font: 600 12px/1.45 system-ui,sans-serif; color:#cbdbf4; text-decoration:none; }
.astralis-field-guide .fg-toc-list a:hover, .astralis-field-guide .fg-toc-list a[aria-current='location'] { color: var(--fg-cyan); background:#122f61; border-left-color:var(--fg-gold); }
.astralis-field-guide .fg-toc-list .fg-number { color: var(--fg-gold); font-family: ui-monospace,monospace; font-size:11px; opacity:.85; }
.astralis-field-guide .fg-toc-list [hidden] { display:none!important; }
.astralis-field-guide .fg-mobile-jump { display: none; }

.astralis-field-guide .fg-article { min-width: 0; }
.astralis-field-guide .fg-intro { border: 1px solid #5375a0; background:linear-gradient(125deg,#123466,#0a1936 65%); padding:24px 28px; margin-bottom:24px; position:relative; }
.astralis-field-guide .fg-intro::before { content:'✦';position:absolute; right:18px;top:12px;color:var(--fg-cyan); font-size:19px; }
.astralis-field-guide .fg-intro p { margin: 7px 0; font-size: 15px; color:var(--fg-secondary); }
.astralis-field-guide .fg-intro h2 { font-size:22px;margin:0;color:var(--fg-gold); }
.astralis-field-guide .fg-intro strong { color: var(--fg-cyan); }
.astralis-field-guide .fg-section { position: relative; padding: clamp(24px,3.5vw,42px); margin-bottom: 24px; background:linear-gradient(145deg,#132952 0%,#0a1835 16%,#08132d 100%); border:1px solid #997b48; outline:1px solid #436794; outline-offset:4px; box-shadow:inset 0 0 0 3px #071229, 0 17px 45px #0007; scroll-margin-top: 24px; }
.astralis-field-guide .fg-section::before,.astralis-field-guide .fg-section::after { content:'◆'; position:absolute; color:var(--fg-gold); background:#08142e; font-size:15px; line-height:1; }
.astralis-field-guide .fg-section::before {top:-9px;left:-7px}.astralis-field-guide .fg-section::after {bottom:-9px;right:-7px}
.astralis-field-guide .fg-section-number { display:inline-flex; gap:8px; align-items:center; margin:0 0 13px; color:var(--fg-cyan); font:800 10px system-ui,sans-serif; letter-spacing:.19em; text-transform:uppercase; }
.astralis-field-guide .fg-section h2 { padding-bottom:17px; border-bottom:1px solid #b88b4566; }
.astralis-field-guide .fg-section h2::after { content:' ✦'; font-family: Georgia,serif; color:var(--fg-gold); font-size:.65em; }
.astralis-field-guide .fg-section p, .astralis-field-guide .fg-section li {color:#dae7fb;}
.astralis-field-guide .fg-two-col { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; }
.astralis-field-guide .fg-mini-card { background: #0a2044; border: 1px solid #47699a; padding:15px 17px; }
.astralis-field-guide .fg-mini-card strong {display:block;color:var(--fg-gold);font-weight:750;margin-bottom:5px;}
.astralis-field-guide .fg-mini-card p { margin:0;font-size:13px; }
.astralis-field-guide .fg-callout { margin:22px 0; border-left: 3px solid var(--fg-cyan); background:#0c244b; padding:14px 18px; color:var(--fg-secondary); }
.astralis-field-guide .fg-callout strong { color:var(--fg-cyan); }
.astralis-field-guide .fg-chapter-divider { display:flex;align-items:center;gap:13px;color:var(--fg-gold);margin:35px 0;font-size:13px; }
.astralis-field-guide .fg-chapter-divider::before,.astralis-field-guide .fg-chapter-divider::after {content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#937449,transparent)}
.astralis-field-guide .fg-section table { width:100%;border-collapse:collapse;font-size:13px;display:block;overflow-x:auto; }
.astralis-field-guide .fg-section th, .astralis-field-guide .fg-section td { text-align:left;padding:11px 13px;border-bottom:1px solid #36537e; }
.astralis-field-guide .fg-section th {color:var(--fg-gold);background:#12234a;font-size:11px;letter-spacing:.03em}
.astralis-field-guide .fg-section blockquote { margin:18px 0;padding:16px 20px;border-left:3px solid var(--fg-violet);background:#24164299;color:#e7daff;font-family:Georgia,serif;font-size:18px; }
/* Enhancement-only styling; existing hint/reveal handlers stay authoritative. */
.astralis-field-guide :is(.fg-spoiler,.hint-card,[data-hint-step],[data-spoiler-level]) { border:1px solid #6b5487; background:#111837; margin:15px 0; padding:14px 17px; border-radius:3px; }
.astralis-field-guide .fg-spoiler-head { display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap; }
.astralis-field-guide .fg-spoiler-head strong { font:800 11px system-ui,sans-serif;color:var(--fg-gold);letter-spacing:.13em;text-transform:uppercase }
.astralis-field-guide .fg-hints { display:flex;gap:8px;flex-wrap:wrap;margin-top:12px; }
.astralis-field-guide :is(.fg-hints button,[data-hint-step] button,[data-spoiler-level] button) { background:#142b55;color:var(--fg-cyan);border:1px solid #4e76a5;border-radius:3px;font:700 12px system-ui,sans-serif;padding:9px 12px;cursor:pointer; }
.astralis-field-guide :is(.fg-hints button,[data-hint-step] button,[data-spoiler-level] button):hover { border-color:var(--fg-gold);color:var(--fg-ivory); }
.astralis-field-guide .fg-hints button[aria-pressed='true'] { color:#060d20; background:var(--fg-gold);border-color:var(--fg-gold); }
.astralis-field-guide .fg-hint-content {margin-top:14px; padding:14px; border:1px solid #426496;background:#08172d; }
.astralis-field-guide .fg-hint-content p {margin:0; }
.astralis-field-guide .fg-hint-content[hidden] { display:none; }
.astralis-field-guide details { border:1px solid #47628c;background:#0d1d3b;padding:13px;margin:12px 0; }
.astralis-field-guide details summary { color:var(--fg-gold);cursor:pointer;font-weight:750; }
.astralis-field-guide .fg-footer { border-top:1px solid #9e814c;background:#07132b;padding:35px 24px;color:var(--fg-secondary);font-size:12px;text-align:center;letter-spacing:.1em; }

@media (max-width: 960px) {
  .astralis-field-guide .fg-shell { grid-template-columns: 215px minmax(0,1fr);gap:22px; }
  .astralis-field-guide .fg-section { padding:25px; }
}
@media (max-width: 740px) {
  .astralis-field-guide .fg-hero { min-height:350px; background-position:54% center; }
  .astralis-field-guide .fg-hero::before { background:linear-gradient(90deg,#020918ed,#04102db0),linear-gradient(0deg,#020917eb,transparent 80%); }
  .astralis-field-guide .fg-hero-inner { width:calc(100% - 32px);padding:48px 0 30px; }
  .astralis-field-guide .fg-hero h1 { font-size:clamp(2.7rem,11vw,4rem); }
  .astralis-field-guide .fg-main {padding:22px 0 50px}
  .astralis-field-guide .fg-shell {width:calc(100% - 28px);display:block;}
  .astralis-field-guide .fg-sidebar {position:static;max-height:none;overflow:visible;margin-bottom:23px;}
  .astralis-field-guide .fg-toc {padding:12px;}
  .astralis-field-guide .fg-toc-list {max-height:205px;overflow:auto;}
  .astralis-field-guide .fg-section {padding:23px 18px;outline-offset:2px;}
  .astralis-field-guide .fg-intro {padding:22px;}
  .astralis-field-guide .fg-two-col {grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce) {
  .astralis-field-guide *, .astralis-field-guide *::before,.astralis-field-guide *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
}