/* Fire Emblem Awakening zone — styled after the game's menus.
   Page: the system wallpaper's dark damask (damask.webp). Windows: near-black panels with a thin gold double
   rule, like the in-game unit and status windows. Parchment: the warm paper of the New Game / tutorial
   windows (paper.webp). Buttons: the game's rounded command plates — red for Fight/Begin, blue for the
   cursor highlight — and the lit difficulty plates (btn-*.webp). All images are textures from the cartridge,
   see tools/fea/build_assets.py. No web fonts are loaded; the serif stack falls back to local fonts.
   Sections: tokens · chrome (header, nav, footer) · shared parts · hero · intro · sections · responsive */

/* ===== Tokens ===== */
body.zone-fire-emblem-awakening {
  color-scheme: dark;
  --fe-black: #121014;
  --fe-panel: #1d1a1f;
  --fe-panel-2: #29242a;
  --fe-gold: #d2ac5e;
  --fe-gold-light: #f3dc9a;
  --fe-gold-dark: #8c6a2c;
  --fe-paper: #efe1bf;
  --fe-paper-2: #e3cfa2;
  --fe-ink: #3b2a17;
  --fe-ink-2: #6b5435;
  --fe-red: #b8232d;
  --fe-red-hi: #e85a4c;
  --fe-blue: #1f5fbf;
  --fe-blue-hi: #5aa8f0;
  --fe-text: #ece4d2;
  --fe-text-2: #b9ad93;
  --fe-serif: "Cinzel", "Trajan Pro", "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --fe-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Shared component tokens (site.css / zone.css): windows on search and article pages are parchment. */
  --bg: var(--fe-black);
  --card: var(--fe-paper);
  --card-2: var(--fe-paper-2);
  --line: #c9ad78;
  --bevel: #b9975a;
  --ink: var(--fe-ink);
  --ink-2: #4f3a22;
  --ink-3: var(--fe-ink-2);
  --link: #8a2a1c;
  --btn-top: #f6ebd2;
  --btn-bot: #e9d6ab;
  --title-top: #f6ebd2;
  --title-bot: #e6d1a3;
  --shell: var(--fe-blue);
  --shell-hi: var(--fe-blue-hi);
  --shell-lo: #143e7e;
  --shell-ink: #ffffff;
  --cursor: var(--fe-blue-hi);
  --cursor-2: #9fd0ff;
  --glow: rgba(90, 168, 240, .35);
  --radius: 6px;
  --z-display: var(--fe-serif);
  --z-nav-bg: transparent;

  background: url("damask.webp") 0 0 / 240px 256px repeat fixed, var(--fe-black);
  color: var(--fe-text);
  font-family: var(--fe-sans);
}
.zone-fire-emblem-awakening .window,
.zone-fire-emblem-awakening .lr-btn { color: var(--ink); }
.zone-fire-emblem-awakening .crumbs li { color: var(--fe-text-2); }
.zone-fire-emblem-awakening .crumbs a { color: var(--ink); } /* crumbs are parchment pills (--card) */
.zone-fire-emblem-awakening .crumbs a[aria-current] { color: var(--fe-gold-light); }
.zone-fire-emblem-awakening .result-count { color: var(--fe-text); }

/* ===== Chrome ===== */
.fe-header { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, rgba(10, 9, 12, .96), rgba(22, 19, 24, .94)); border-bottom: 1px solid var(--fe-gold-dark); box-shadow: 0 1px 0 rgba(243, 220, 154, .25), 0 8px 18px -10px #000; }
.fe-bar { width: min(1180px, 100% - 32px); margin: 0 auto; padding: 10px 0 4px; display: flex; align-items: center; gap: 18px; }
.fe-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; color: inherit; text-decoration: none; }
.fe-brand-logo { width: 196px; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8)); }
.fe-brand-tag { padding: 2px 10px; border: 1px solid var(--fe-gold); border-radius: 3px; color: var(--fe-gold-light); font-family: var(--fe-serif); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; }
.fe-tools { display: flex; align-items: center; gap: 14px; }
.fe-exit { color: var(--fe-text-2); font-size: .8rem; text-decoration: none; white-space: nowrap; }
.fe-exit:hover { color: var(--fe-gold-light); text-decoration: underline; }
.zone-fire-emblem-awakening .fe-search { width: 220px; height: 34px; background: var(--fe-panel); border: 1px solid var(--fe-gold-dark); box-shadow: inset 0 1px 4px #000; }
.zone-fire-emblem-awakening .fe-search:focus-within { border-color: var(--fe-gold-light); box-shadow: 0 0 0 2px var(--glow); }
.zone-fire-emblem-awakening .fe-search input[type="search"] { color: var(--fe-text); font-size: .88rem; }
.zone-fire-emblem-awakening .fe-search input::placeholder { color: var(--fe-text-2); }
.zone-fire-emblem-awakening .fe-search button { width: 28px; height: 28px; background: var(--fe-blue); color: #fff; }

/* Section nav: the game's command plates; the current one carries the blue cursor. */
.zone-fire-emblem-awakening .fe-nav { position: static; border: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.zone-fire-emblem-awakening .fe-nav .zone-nav-inner { height: 46px; gap: 6px; }
.zone-fire-emblem-awakening .fe-nav a { padding: 5px 14px; border: 1px solid #4a3f33; border-radius: 4px; background: linear-gradient(180deg, #3a3238, #1d191e); color: var(--fe-text); font-family: var(--fe-serif); font-size: .84rem; font-weight: 600; letter-spacing: .03em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.zone-fire-emblem-awakening .fe-nav a:hover { border-color: var(--fe-gold); color: var(--fe-gold-light); background: linear-gradient(180deg, #4a3f40, #241f24); }
.zone-fire-emblem-awakening .fe-nav a[aria-current] { border-color: var(--fe-blue-hi); background: linear-gradient(180deg, #3b86de, #164a9a); color: #fff; box-shadow: 0 0 10px rgba(90, 168, 240, .45), inset 0 1px 0 rgba(255, 255, 255, .3); }

.fe-footer { margin-top: 64px; border-top: 1px solid var(--fe-gold-dark); background: linear-gradient(rgba(25, 18, 10, .78), rgba(18, 13, 8, .92)), url("dragon-paper.webp") center / cover; color: var(--fe-paper); }
.fe-footer-inner { width: min(1180px, 100% - 32px); margin: 0 auto; padding: 34px 0 28px; display: grid; justify-items: center; gap: 16px; text-align: center; }
.fe-footer-logo { width: 220px; height: auto; opacity: .9; }
.fe-footer-links, .fe-footer-base { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.fe-footer a, .fe-footer .linklike { color: var(--fe-paper); font-size: .9rem; text-decoration: none; }
.fe-footer a:hover, .fe-footer .linklike:hover { color: var(--fe-gold-light); text-decoration: underline; }
.fe-footer-base a, .fe-footer-base .linklike { color: var(--fe-text-2); font-size: .82rem; }
.fe-legal { max-width: 720px; margin: 0; color: var(--fe-text-2); font-size: .76rem; }

/* ===== Shared parts ===== */
.fe-page { width: min(1180px, 100% - 32px); margin: 0 auto; }
/* Dark window with the double gold rule. */
.fe-window { position: relative; padding: 20px 22px; border: 1px solid var(--fe-gold-dark); border-radius: 6px; background: linear-gradient(180deg, rgba(41, 36, 42, .96), rgba(22, 19, 23, .97)); box-shadow: inset 0 0 0 3px rgba(18, 16, 20, .9), inset 0 0 0 4px rgba(210, 172, 94, .45), 0 10px 26px -12px #000; }
.fe-window-cap, .fe-stats-cap { display: inline-block; margin: 0 0 12px; padding: 2px 14px; border-radius: 3px; background: linear-gradient(180deg, #5b4220, #33240f); border: 1px solid var(--fe-gold); color: var(--fe-gold-light); font-family: var(--fe-serif); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
/* Parchment sheet. */
.fe-parchment { border: 1px solid #a8844a; border-radius: 6px; background: url("paper.webp") center / cover, var(--fe-paper); color: var(--fe-ink); box-shadow: inset 0 0 26px rgba(120, 82, 30, .35), 0 10px 26px -12px #000; }
.fe-panel { padding: 16px 18px; background: linear-gradient(180deg, #f7ecd3, #e9d5aa); } /* wide panels: paper.webp would stretch */

.fe-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 132px; padding: 8px 22px; border-radius: 6px; color: #fff; font-family: var(--fe-serif); font-weight: 700; letter-spacing: .06em; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px -4px #000; }
.fe-btn-red { border: 1px solid #ff9a85; background: linear-gradient(180deg, var(--fe-red-hi), var(--fe-red) 55%, #7d1219); }
.fe-btn-blue { border: 1px solid #9fd0ff; background: linear-gradient(180deg, var(--fe-blue-hi), var(--fe-blue) 55%, #123c7d); }
.fe-btn:hover { filter: brightness(1.12); }
.fe-btn:focus-visible, .fe-row:focus-visible { outline: 2px solid var(--fe-gold-light); outline-offset: 2px; }

.fe-section { margin-top: 52px; scroll-margin-top: 120px; }
.fe-section-head { margin-bottom: 18px; }
.fe-eyebrow { margin: 0 0 4px; color: var(--fe-gold); font-family: var(--fe-serif); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; }
.fe-section-head h2 { display: flex; align-items: center; gap: 12px; margin: 0; color: #fff; font-family: var(--fe-serif); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; text-shadow: 0 2px 6px #000; }
.fe-section-head h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--fe-gold), transparent); }
.fe-count { padding: 1px 10px; border-radius: 99px; background: var(--fe-blue); font-family: var(--fe-sans); font-size: .85rem; }
.fe-section-head > p:last-child:not(.fe-eyebrow) { max-width: 760px; margin: 8px 0 0; color: var(--fe-text-2); }

.fe-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fe-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid rgba(140, 106, 44, .5); border-radius: 5px; background: rgba(255, 250, 235, .55); color: var(--fe-ink); text-decoration: none; }
.fe-row:hover { border-color: var(--fe-blue); background: rgba(196, 226, 255, .55); }
.fe-row > span:first-child { display: grid; gap: 2px; flex: 1; }
.fe-row small { color: var(--fe-ink-2); }
.fe-chev { color: var(--fe-blue); font-size: .75rem; }
.fe-empty, .fe-soon-note { margin: 10px 0 0; color: var(--fe-text-2); font-style: italic; }
.fe-parchment .fe-empty { margin: 0; color: var(--fe-ink-2); }
.fe-ch-label { display: block; color: var(--fe-gold); font-family: var(--fe-serif); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }

/* ===== Hero: title screen ===== */
.fe-hero { width: min(1180px, 100% - 32px); margin: 22px auto 0; }
.fe-hero-frame { position: relative; overflow: hidden; min-height: 400px; display: flex; align-items: center; border: 1px solid var(--fe-gold); border-radius: 8px; background: #000; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .7), 0 18px 40px -16px #000; isolation: isolate; }
.fe-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.fe-hero-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 90% at 28% 50%, rgba(10, 8, 6, .35), rgba(10, 8, 6, .82) 80%), linear-gradient(90deg, rgba(8, 6, 4, .7), transparent 60%); }
.fe-hero-text { position: relative; max-width: 560px; padding: 40px 44px 70px; }
.fe-hero-logo { width: min(420px, 100%); height: auto; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .9)); }
.fe-kicker { margin: 18px 0 6px; color: var(--fe-gold-light); font-family: var(--fe-serif); font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; }
.fe-hero h1 { margin: 0; color: #fff; font-family: var(--fe-serif); font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.12; text-shadow: 0 2px 8px #000; }
.fe-hero-sub { margin: 10px 0 0; color: var(--fe-text); font-size: 1.02rem; text-shadow: 0 1px 4px #000; }
.fe-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.fe-hero-cast { position: absolute; right: 2%; bottom: 0; z-index: -1; display: flex; align-items: flex-end; height: 92%; }
.fe-hero-cast img { width: auto; height: 100%; filter: drop-shadow(0 0 14px rgba(0, 0, 0, .7)); }
.fe-hero-cast .is-lucina { height: 88%; margin-right: -44px; }
/* Chapter title card along the bottom, like the game's chapter intro telop. */
.fe-telop { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 9px 44px; background: linear-gradient(90deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .55) 60%, transparent); border-top: 1px solid rgba(210, 172, 94, .6); color: var(--fe-gold-light); font-family: var(--fe-serif); font-size: 1.05rem; }
.fe-telop span { margin-right: 14px; color: var(--fe-text-2); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }

/* ===== Intro: New Game window + records ===== */
.fe-intro { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; margin-top: 24px; }
.fe-intro-text { margin: 0 0 16px; color: var(--fe-text); line-height: 1.6; }
.fe-difficulty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0 0 16px; padding: 0; list-style: none; }
.fe-difficulty li { display: grid; gap: 4px; }
.fe-difficulty img { width: 128px; height: 24px; image-rendering: auto; }
.fe-difficulty span { color: var(--fe-text-2); font-size: .86rem; }
.fe-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; padding-top: 14px; border-top: 1px solid rgba(210, 172, 94, .3); }
.fe-modes dt { color: var(--fe-gold-light); font-family: var(--fe-serif); font-weight: 700; letter-spacing: .06em; }
.fe-modes dd { margin: 2px 0 0; color: var(--fe-text-2); font-size: .88rem; }
.fe-stats-card { padding: 20px 22px; background: linear-gradient(rgba(247, 236, 211, .6), rgba(247, 236, 211, .6)), url("paper.webp") center / cover, var(--fe-paper); }
.fe-stats-card .fe-stats-cap { color: var(--fe-gold-light); }
/* Rows like the status window's stat lines: label left, value right, ruled. */
.fe-stats { display: grid; margin: 0; }
.fe-stats > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid rgba(140, 106, 44, .4); }
.fe-stats dt { color: var(--fe-ink-2); font-family: var(--fe-serif); font-weight: 700; }
.fe-stats dd { margin: 0; color: var(--fe-ink); font-family: var(--fe-serif); font-size: 1.5rem; font-weight: 700; }
.fe-stats .fe-stat-sub { grid-column: 1 / -1; color: var(--fe-ink-2); font-family: var(--fe-sans); font-size: .8rem; font-weight: 400; }

/* ===== Walkthrough: world map + chapter scroll ===== */
.fe-world { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }
.fe-map { display: grid; gap: 12px; margin: 0; }
.fe-map img { width: 100%; height: auto; border: 1px solid var(--fe-gold-dark); border-radius: 6px; box-shadow: inset 0 0 0 3px #000, 0 10px 24px -12px #000; }
.fe-scroll { padding: 16px; border: 1px solid var(--fe-gold-dark); border-radius: 6px; background: rgba(18, 16, 20, .9); }
.fe-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.fe-chapters li { padding: 7px 12px; border: 1px solid #3c3330; border-left: 3px solid var(--fe-gold-dark); border-radius: 4px; background: linear-gradient(90deg, #2b2529, #1b181c); }
.fe-chapters strong { color: var(--fe-text); font-family: var(--fe-serif); font-size: .95rem; font-weight: 600; }
.fe-chapters li:first-child, .fe-chapters li:last-child { border-left-color: var(--fe-red-hi); }

/* ===== Paralogues ===== */
.fe-paralogues { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fe-card { padding: 12px 14px; border: 1px solid #a8844a; border-radius: 5px; background: linear-gradient(180deg, rgba(255, 249, 232, .9), rgba(234, 216, 176, .92)); color: var(--fe-ink); box-shadow: 0 6px 14px -8px #000; }
.fe-card .fe-ch-label { color: #8a5d1c; }
.fe-card strong { font-family: var(--fe-serif); font-size: .98rem; }

/* ===== Characters: roster ===== */
.fe-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; margin: 0 0 16px; padding: 0; list-style: none; }
.fe-unit { display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; border: 1px solid var(--fe-gold-dark); border-radius: 6px; background: linear-gradient(180deg, rgba(41, 36, 42, .96), rgba(22, 19, 23, .97)); }
.fe-unit-art { display: flex; justify-content: center; align-items: flex-end; height: 190px; background: radial-gradient(circle at 50% 70%, rgba(90, 168, 240, .28), transparent 65%), linear-gradient(180deg, #23314a, #141a26); border-bottom: 1px solid var(--fe-gold-dark); }
.fe-unit-art img { width: auto; max-width: 100%; height: 180px; object-fit: contain; object-position: bottom; }
.fe-unit-plate { display: flex; align-items: center; gap: 8px; padding: 8px 12px 2px; }
.fe-shield { width: 19px; height: 20px; }
.fe-unit-plate strong { color: #fff; font-family: var(--fe-serif); font-size: 1.05rem; }
.fe-unit small { padding: 2px 12px 12px; color: var(--fe-text-2); font-size: .84rem; line-height: 1.45; }
.fe-unit-link { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; color: inherit; text-decoration: none; }
.fe-unit:has(.fe-unit-link:hover) { border-color: var(--fe-gold-light); box-shadow: 0 0 12px rgba(243, 220, 154, .25); }

/* ===== Classes: weapon types ===== */
.fe-weapons { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0 0 12px; padding: 0; list-style: none; }
.fe-weapon { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.fe-weapon img { width: 48px; height: 48px; image-rendering: pixelated; flex: none; }
.fe-weapon span { display: grid; gap: 2px; }
.fe-weapon strong { color: var(--fe-gold-light); font-family: var(--fe-serif); }
.fe-weapon small { color: var(--fe-text-2); font-size: .86rem; }

/* ===== Skills ===== */
.fe-skills { display: flex; align-items: center; gap: 22px; }
.fe-skill-strip { width: 324px; height: 144px; flex: none; }
.fe-skills .fe-rows { flex: 1; }
.fe-skills .fe-row { background: rgba(255, 250, 235, .9); }
.fe-skills .fe-empty { margin: 0; }

/* Folded lists (open on wide screens; home.html folds them on phones) */
.fe-fold > summary { display: none; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .fe-intro, .fe-world { grid-template-columns: 1fr; }
  .fe-map { grid-template-columns: 1fr 1fr; }
  .fe-hero-cast { opacity: .45; }
}
@media (max-width: 720px) {
  .fe-bar { flex-wrap: wrap; gap: 10px; }
  .fe-brand-logo { width: 160px; }
  .fe-exit { display: none; }
  .fe-tools { display: none; } /* zone.css hides the search box under 640px; the nav's Search link remains */
  .fe-header { position: static; }
  .fe-hero-frame { min-height: 340px; }
  .fe-hero-text { padding: 28px 22px 64px; }
  .fe-telop { padding: 8px 22px; }
  .fe-hero-cast { right: -30px; opacity: .3; }
  .fe-difficulty, .fe-modes, .fe-chapters { grid-template-columns: 1fr; }
  .fe-skills { flex-direction: column; align-items: flex-start; }
  .fe-skill-strip { width: 100%; max-width: 324px; height: auto; }
  .fe-fold > summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border: 1px solid var(--fe-gold-dark); border-radius: 5px; background: linear-gradient(90deg, #2b2529, #1b181c); color: var(--fe-gold-light); font-family: var(--fe-serif); cursor: pointer; list-style: none; }
  .fe-fold > summary::-webkit-details-marker { display: none; }
  .fe-fold > summary::after { content: '▼'; font-size: .7rem; }
  .fe-fold[open] > summary { margin-bottom: 10px; }
  .fe-fold[open] > summary::after { content: '▲'; }
  .fe-guides .fe-row small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .fe-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fe-unit-art { height: 130px; }
  .fe-unit-art img { height: 122px; }
  .fe-unit-plate { padding: 6px 8px 2px; }
  .fe-unit-plate strong { font-size: .95rem; }
  .fe-unit small { padding: 2px 8px 10px; font-size: .76rem; }
}