/* ==========================================================================
   Shinobi Auto-Battler — styles
   Two skins, one per story era (docs/ART_BIBLE.md §6): Part I is wood, paper and the
   orange of Naruto's jacket; Shippuden is night steel and Akatsuki red. The screens
   set html[data-era] (js/ui/UIManager.js setEra); the :root values are Part I's.
   Portraits are images from assets/ or code-drawn busts (js/render/Figure.js); the
   icons are an inline SVG sprite (js/render/icons.js).
   ========================================================================== */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/anton.woff2') format('woff2'); }
@font-face { font-family: 'Yuji Syuku'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/yuji-syuku.woff2') format('woff2'); }
:root {
  --bg: #17120e;
  --bg2: #1e1811;
  --surface: #261e16;
  --surface2: #33291d;
  --surface3: #43362a;
  --line: #5a4630;
  --text: #f5ecdc;
  --muted: #c7b79b;
  --dim: #8b7b63;
  --accent: #ff8a3d;
  --accent2: #ffb86b;
  --good: #5fd68a;
  --bad: #ff5d5d;
  --warn: #ffcc4d;
  --paper: #f1e3c4;
  --paper2: #dcc79a;
  --paper-ink: #2a1d0f;
  --wood: #7a5230;
  --wood2: #45301a;
  --steel: #b3bcc6;
  --steel2: #6b7885;
  --primary-ink: #1c0d02;
  --tab-ink: #26303a;
  --tab-on: #7a2a00;
  --primary-grad: linear-gradient(180deg, #ff9b52, #f0691f);
  --primary-edge: #7a3a10;
  --primary-glow: rgba(255, 122, 40, .28);
  --card-edge: linear-gradient(180deg, #9a6a3e, #5a3a1e);
  --font-display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --font-brush: 'Yuji Syuku', 'Yu Mincho', serif;
  --r-genin: #a3aebb;
  --r-chunin: #4dabf7;
  --r-jonin: #b388ff;
  --r-kage: #ffc53d;
  --n-fire: #ff5a36;
  --n-wind: #5fd38a;
  --n-lightning: #ffd43b;
  --n-earth: #c08a52;
  --n-water: #3fa9f5;
  --n-none: #c9d1da;
  --radius: 14px;
  --shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --t: 0.2s;
  /* The bottom tab bar's own height (the tabs). The safe-area inset is added once, as the
     bar's bottom padding (see #tabbar), never to the grid row as well. */
  --tabbar-h: 54px;
  --topbar-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* The top inset (a status bar drawn over the page in an installed app): the top bar's padding,
     once, and the top bar's grid row grows by the same amount. */
  --safe-t: env(safe-area-inset-top, 0px);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; letter-spacing: .01em; line-height: 1.15; }
h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; }
h2 { font-size: 1.3rem; font-weight: 800; }
h3 { font-size: 1.05rem; font-weight: 750; }
p { margin: 0 0 .75em; line-height: 1.5; color: var(--muted); }
a { color: var(--accent2); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: .85rem; }
.tiny { font-size: .75rem; }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1 1 auto; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------- App shell ---------------- */
/* minmax(0, …) columns: no screen content can make the app wider than the window. */
/* Rows: top bar, the scrolling screen, the tab bar at its own height ('auto': the tabs plus
   the safe-area padding, so the bar sits flush on the bottom edge with no empty strip). */
#app { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--topbar-h) + var(--safe-t)) minmax(0, 1fr) auto; }
#topbar { display: flex; align-items: center; gap: 12px; padding: var(--safe-t) 14px 0; background: linear-gradient(180deg, #151d27, #111820); border-bottom: 1px solid var(--line); z-index: 5; }
#topbar .brand { display: flex; align-items: center; gap: 8px; font-weight: 900; letter-spacing: .02em; cursor: pointer; user-select: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffb86b, #e0621d); color: #1b0f06; font-weight: 900; font-size: 16px; box-shadow: 0 0 0 2px #2a1a0c inset; }
#topbar .brand span.title { font-size: 1.02rem; }
#topbar .spacer { flex: 1; }
.currency { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-variant-numeric: tabular-nums; min-height: 34px; }
.currency .ico { font-size: 1rem; }
.icon-btn { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: transform var(--t), background var(--t), border-color var(--t); font-size: 1.1rem; }
.icon-btn:hover { background: var(--surface2); border-color: var(--surface3); }
.icon-btn:active { transform: scale(.95); }

/* The screen scrolls in its own grid row above the tab bar, so nothing can sit behind the
   bar; the bottom padding leaves the last row of content clear of it. */
#screen { overflow-y: auto; overflow-x: hidden; padding: 16px 16px 28px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.screen { max-width: 1100px; margin: 0 auto; }
.screen.enter { animation: screenIn var(--t) ease-out; }
@keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#tabbar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: var(--tabbar-h); background: #0f151d; border-top: 1px solid var(--line); padding: 0 max(2px, env(safe-area-inset-right, 0px)) var(--safe-b) max(2px, env(safe-area-inset-left, 0px)); z-index: 5; }
/* Seven tabs from a 320 px phone up: the label shrinks with the width so it never clips. */
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; cursor: pointer; color: var(--dim); font-size: clamp(.6rem, 2.55vw, .72rem); font-weight: 700; letter-spacing: -.01em; min-height: 44px; min-width: 0; padding: 0 1px; transition: color var(--t), background var(--t); position: relative; }
.tab .tl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; }
.tab .ti { font-size: 1.25rem; line-height: 1; transition: transform var(--t); }
.tab:hover { color: var(--muted); }
.tab.active { color: var(--accent); }
.tab.active .ti { transform: translateY(-2px) scale(1.08); }
.tab.active::after { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
.tab .dot { position: absolute; top: 8px; right: calc(50% - 18px); width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px #0f151d; }

/* Side rail: wide screens, and phones held sideways (a bottom bar would eat a third of
   the height). Rows shrink to 44px when the window is short, and the rail scrolls as a
   last resort, so every tab stays reachable. */
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  #app { grid-template-rows: calc(var(--topbar-h) + var(--safe-t)) 1fr; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "top top" "nav main"; }
  #topbar { grid-area: top; }
  #screen { grid-area: main; padding: 22px 26px 32px; }
  #tabbar { grid-area: nav; grid-template-columns: 1fr; grid-auto-rows: minmax(44px, 76px); align-content: start; overflow-y: auto; border-top: 0; border-right: 1px solid var(--line); padding: 8px 0 calc(8px + var(--safe-b)); }
  .tab { font-size: .72rem; }
  .tab.active::after { top: 18%; bottom: 18%; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #app { grid-template-columns: 76px minmax(0, 1fr); }
  #screen { padding: 12px 16px 20px; }
  #tabbar { padding: 4px 0 calc(4px + var(--safe-b)); }
  html #debug-fab { bottom: 12px; }
}

/* ---------------- Buttons ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface2); color: var(--text); font-weight: 750; cursor: pointer; transition: transform var(--t), background var(--t), box-shadow var(--t), opacity var(--t), border-color var(--t); user-select: none; text-decoration: none; max-width: 100%; text-align: center; text-wrap: balance; }
.btn:hover { background: var(--surface3); }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(180deg, #ff9b52, #f0691f); border-color: #ff9b52; color: #1c0d02; box-shadow: 0 4px 14px rgba(255, 122, 40, .28); }
.btn.primary:hover { box-shadow: 0 6px 20px rgba(255, 122, 40, .42); filter: brightness(1.05); }
.btn.good { background: linear-gradient(180deg, #45e08e, #1fae62); border-color: #45e08e; color: #04200f; }
.btn.danger { background: #3a1a1d; border-color: #7a2c33; color: #ffb3b3; }
.btn.danger:hover { background: #4a2126; }
.btn.ghost { background: transparent; }
/* Every tap target is at least 44×44 (QA.md); "small" only means tighter padding and text. */
.btn.small { min-height: 44px; padding: 6px 12px; font-size: .88rem; border-radius: 10px; }
.btn.big { min-height: 56px; padding: 12px 26px; font-size: 1.08rem; border-radius: 14px; }
.btn.block { width: 100%; }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; transform: none !important; filter: grayscale(.4); box-shadow: none; }
.btn .sub { font-weight: 600; font-size: .8em; opacity: .85; }

/* ---------------- Cards / panels ---------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); }
.card.hover { transition: transform var(--t), border-color var(--t), box-shadow var(--t); cursor: pointer; }
.card.hover:hover { transform: translateY(-2px); border-color: var(--surface3); box-shadow: var(--shadow); }
.card.hover:active { transform: scale(.99); }
.grid { display: grid; gap: 12px; }
.grid.two { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.section-title h2 { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .76rem; font-weight: 750; background: var(--surface2); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.pill.good { color: var(--good); border-color: #1f6b43; background: #10281c; }
.pill.bad { color: var(--bad); border-color: #6b2525; background: #2a1414; }
.pill.warn { color: var(--warn); border-color: #6b5a1f; background: #29240f; }
.pill.accent { color: var(--accent2); border-color: #6b3a14; background: #2a1a0c; }
.divider { height: 1px; background: var(--line); margin: 14px 0; }
.bar { height: 8px; border-radius: 99px; background: #0b1016; overflow: hidden; border: 1px solid #0a0e13; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; transition: width .3s; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .9rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------- Nature / rarity chips ---------------- */
.nat { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: .74rem; font-weight: 800; color: #0d1117; white-space: nowrap; }
.nat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.35); }
.nat.Fire { background: var(--n-fire); }
.nat.Wind { background: var(--n-wind); }
.nat.Lightning { background: var(--n-lightning); }
.nat.Earth { background: var(--n-earth); }
.nat.Water { background: var(--n-water); }
.nat.none { background: var(--n-none); }
.nat.taijutsu { background: #e9eef4; }
.tier { font-weight: 850; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.tier.genin { color: var(--r-genin); }
.tier.chunin { color: var(--r-chunin); }
.tier.jonin { color: var(--r-jonin); }
.tier.kage { color: var(--r-kage); }
.stars { color: var(--r-kage); letter-spacing: 1px; font-size: .85rem; white-space: nowrap; }
.stars .off { color: #3a4654; }
.role { font-size: .74rem; font-weight: 750; color: var(--muted); }

/* ---------------- Avatar (portrait slot) ----------------
   A circle holding the portrait image (assets/portraits) or the code-drawn bust canvas,
   ringed in the tier colour. .unknown: a "?" for a ninja not met yet. */
.avatar { position: relative; width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface2); font-weight: 900; font-size: 1.05rem; letter-spacing: .02em; box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), 0 0 0 3px var(--ring, var(--r-genin)); user-select: none; }
.avatar img, .avatar canvas { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none; }
.avatar .flip { transform: scaleX(-1); }
.avatar.sm { width: 40px; height: 40px; font-size: .82rem; }
.avatar.lg { width: 84px; height: 84px; font-size: 1.5rem; }
.avatar.xl { width: 128px; height: 128px; font-size: 2rem; }
.avatar.unknown { background: #222c38 !important; color: #52606f !important; }
.avatar .q { color: #52606f; }
.ring-genin { --ring: var(--r-genin); } .ring-chunin { --ring: var(--r-chunin); } .ring-jonin { --ring: var(--r-jonin); } .ring-kage { --ring: var(--r-kage); } .ring-enemy { --ring: #ff6b6b; } .ring-boss { --ring: var(--accent); }

/* ---------------- Character cards (roster / team) ---------------- */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.char-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: transform var(--t), border-color var(--t), box-shadow var(--t), opacity var(--t); text-align: center; min-height: 44px; }
.char-card:hover { transform: translateY(-2px); border-color: var(--surface3); box-shadow: var(--shadow-sm); }
.char-card:active { transform: scale(.98); }
.char-card .name { font-weight: 800; font-size: .88rem; line-height: 1.15; }
.char-card .meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
.char-card.locked { opacity: .5; }
.char-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.char-card.disabled { opacity: .35; cursor: not-allowed; }
.char-card .lvl { position: absolute; top: 8px; left: 10px; font-size: .72rem; font-weight: 800; color: var(--muted); }
.char-card .badge-tl { position: absolute; top: 8px; right: 8px; }
.char-card .power { font-size: .74rem; color: var(--dim); font-weight: 700; }
.match-up { color: var(--good); font-weight: 900; }
.match-down { color: var(--bad); font-weight: 900; }

/* ---------------- Home ---------------- */
.hero { position: relative; overflow: hidden; border-radius: 20px; padding: 26px 22px; background: radial-gradient(1200px 300px at 80% -10%, rgba(255,138,61,.25), transparent 60%), linear-gradient(135deg, #1a2433, #111822 60%); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero .kanji { position: absolute; right: -10px; top: -30px; font-size: 200px; font-weight: 900; color: rgba(255,255,255,.035); pointer-events: none; }
.hero h1 { margin-bottom: .25em; }
.hero .cta { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.tile .k { color: var(--muted); font-size: .78rem; font-weight: 700; }
.tile .v { font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ---------------- Story map ---------------- */
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; cursor: pointer; font-weight: 800; color: var(--muted); min-height: 44px; transition: background var(--t), color var(--t); }
.seg button.on { background: var(--surface3); color: var(--text); }
.arc-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.arc-card { position: relative; overflow: hidden; border-radius: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: transform var(--t), border-color var(--t), box-shadow var(--t); min-height: 108px; }
.arc-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--a1, #333), transparent 70%); opacity: .22; pointer-events: none; }
.arc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--surface3); }
.arc-card.locked { cursor: not-allowed; filter: grayscale(.9); opacity: .55; }
.arc-card.locked:hover { transform: none; box-shadow: none; }
.arc-card.current { border-color: var(--accent); }
.arc-card h3 { position: relative; margin-bottom: 4px; }
.arc-card .eps { position: relative; font-size: .75rem; color: var(--muted); font-weight: 700; }
.arc-card .prog { position: relative; margin-top: 12px; }
.arc-card .lock { position: absolute; right: 14px; top: 14px; font-size: 1.1rem; }
/* The battle pins now sit on the arc's drawn stage: see ".map-stage" in the Phase 3 block below. */
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,138,61,.55); } 50% { box-shadow: 0 0 0 10px rgba(255,138,61,0); } }
.enemy-list { display: flex; flex-direction: column; gap: 8px; }
.enemy-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); }
.enemy-row .en { font-weight: 800; }
.mech { font-size: .78rem; color: var(--muted); }
.mech b { color: var(--text); }

/* ---------------- Team builder ---------------- */
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.slot { position: relative; min-height: 150px; border-radius: 16px; border: 2px dashed var(--line); background: var(--bg2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; cursor: pointer; transition: border-color var(--t), background var(--t); text-align: center; }
.slot:hover { border-color: var(--surface3); }
.slot.filled { border-style: solid; background: var(--surface); }
.slot.leader { border-color: #6b4a14; }
.slot.leader.filled { border-color: var(--r-kage); }
.slot .slot-label { position: absolute; top: 6px; left: 8px; font-size: .68rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.slot.leader .slot-label { color: var(--r-kage); }
.slot .name { font-weight: 800; font-size: .84rem; }
.slot .forced { position: absolute; top: 6px; right: 8px; font-size: .68rem; }
.matchup-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.matchup-stars { font-size: 1.3rem; letter-spacing: 2px; color: var(--r-kage); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-weight: 750; font-size: .8rem; cursor: pointer; min-height: 44px; min-width: 44px; transition: background var(--t), color var(--t), border-color var(--t); }
.chip.on { background: var(--surface3); color: var(--text); border-color: var(--surface3); }
.warnbox { border: 1px solid #6b5a1f; background: #221e0d; color: #ffe08a; border-radius: 12px; padding: 10px 12px; font-size: .86rem; }

/* ---------------- Summon ---------------- */
.banner-tab { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 10px 14px; cursor: pointer; font-weight: 800; font-size: .85rem; color: var(--muted); min-height: 44px; transition: all var(--t); }
.banner-tab.on { color: var(--text); border-color: var(--accent); background: #24170d; }
.banner-tab.locked { opacity: .45; }
.banner-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 22px; border: 1px solid var(--line); background: radial-gradient(600px 240px at 90% 0%, var(--b1, rgba(179,136,255,.25)), transparent 60%), linear-gradient(135deg, #1d2533, #121821); box-shadow: var(--shadow); }
.featured { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.feat { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; text-align: center; }
.feat .n { font-size: .72rem; font-weight: 750; line-height: 1.15; }
.feat.locked { opacity: .45; }
.rates { width: 100%; border-collapse: collapse; font-size: .86rem; }
.rates td { padding: 5px 4px; border-bottom: 1px solid var(--line); }
.pity { display: flex; align-items: center; gap: 12px; }
.pull-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
/* Scrolls when the cards don't fit (phone landscape): the stage is centred by margin:auto,
   so a tall reveal starts at the top instead of being cut off above and below. */
.pull-overlay { position: fixed; inset: 0; z-index: 60; background: radial-gradient(circle at 50% 45%, #1b2230, #06080c 70%); display: flex; overflow-x: hidden; overflow-y: auto; padding: 12px 0; }
.pull-overlay > .col { margin: auto; }
.pull-overlay .burst-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.scroll-unroll { position: relative; width: min(560px, 86vw); height: 120px; display: grid; place-items: center; }
.scroll-paper { height: 96px; width: 0; background: linear-gradient(180deg, #f4e4c1, #e6cf9c); border-top: 4px solid #b3894a; border-bottom: 4px solid #b3894a; box-shadow: 0 10px 40px rgba(0,0,0,.5); animation: unroll .8s cubic-bezier(.2,.8,.2,1) forwards; display: grid; place-items: center; color: #5a3b12; font-weight: 900; letter-spacing: .2em; overflow: hidden; }
.scroll-rod { position: absolute; top: 4px; width: 22px; height: 112px; border-radius: 11px; background: linear-gradient(90deg, #6b3f14, #b8752f, #6b3f14); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.scroll-rod.l { left: calc(50% - 11px); animation: rodL .8s cubic-bezier(.2,.8,.2,1) forwards; }
.scroll-rod.r { left: calc(50% - 11px); animation: rodR .8s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes unroll { to { width: 100%; } }
@keyframes rodL { to { left: -11px; } }
@keyframes rodR { to { left: calc(100% - 11px); } }
.flash { position: fixed; inset: 0; pointer-events: none; z-index: 70; animation: flash .7s ease-out forwards; }
.flash.big { animation: flashBig 1.4s ease-out forwards; }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }
@keyframes flashBig { 0% { opacity: 1; } 30% { opacity: .9; } 100% { opacity: 0; } }
.reveal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: min(900px, 94vw); }
.reveal-grid.single { grid-template-columns: minmax(0, 220px); justify-content: center; }
.reveal-card { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; text-align: center; opacity: 0; transform: scale(.7) rotateY(80deg); transition: transform .35s cubic-bezier(.2,.9,.3,1.3), opacity .3s; }
.reveal-card.show { opacity: 1; transform: none; }
.reveal-card.genin { border-color: var(--r-genin); }
.reveal-card.chunin { border-color: var(--r-chunin); box-shadow: 0 0 18px rgba(77,171,247,.35); }
.reveal-card.jonin { border-color: var(--r-jonin); box-shadow: 0 0 24px rgba(179,136,255,.45); }
.reveal-card.kage { border-color: var(--r-kage); box-shadow: 0 0 40px rgba(255,197,61,.7); animation: kageGlow 1.2s ease-in-out infinite alternate; }
@keyframes kageGlow { from { box-shadow: 0 0 24px rgba(255,197,61,.5); } to { box-shadow: 0 0 56px rgba(255,197,61,.95); } }
.reveal-card .nm { font-weight: 850; font-size: .8rem; line-height: 1.1; }
.reveal-card .tag { position: absolute; top: 6px; left: 6px; font-size: .64rem; font-weight: 900; padding: 2px 6px; border-radius: 6px; background: var(--good); color: #062012; }
.reveal-card .tag.up { background: var(--r-kage); color: #2a1d02; }
.reveal-card .tag.refund { background: var(--r-chunin); color: #04131f; }
.burst { position: absolute; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; animation: burst 1.1s ease-out forwards; }
@keyframes burst { from { transform: translate(0,0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* ---------------- Battle ---------------- */
#battle { position: fixed; inset: 0; z-index: 30; background: #06090d; display: grid; grid-template-rows: auto 1fr auto; }
#battle .bhud { display: flex; align-items: center; gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); background: #0b1016; border-bottom: 1px solid #1a2330; }
#battle .bhud .obj { flex: 1; min-width: 0; font-weight: 800; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#battle .bhud .obj .sub { color: var(--muted); font-weight: 700; font-size: .78rem; }
#battle .timer { font-variant-numeric: tabular-nums; font-weight: 900; padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); min-width: 64px; text-align: center; }
.stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.stage canvas { display: block; background: #000; touch-action: manipulation; }
.ultbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; padding-bottom: max(10px, var(--safe-b)); background: #0b1016; border-top: 1px solid #1a2330; }
.ult { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: transform .12s, border-color var(--t), background var(--t), opacity var(--t); overflow: hidden; text-align: left; }
.ult:active { transform: scale(.97); }
.ult .avatar { width: 46px; height: 46px; font-size: .9rem; }
.ult .info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ult .nm { font-weight: 800; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ult .hp { height: 6px; border-radius: 4px; background: #0a0e13; overflow: hidden; }
.ult .hp i { display: block; height: 100%; background: var(--good); transition: width .15s; }
.ult .ck { height: 6px; border-radius: 4px; background: #0a0e13; overflow: hidden; }
.ult .ck i { display: block; height: 100%; background: linear-gradient(90deg, #4dabf7, #9be3ff); transition: width .15s; }
.ult.ready { border-color: #9be3ff; background: #12263a; animation: ready 0.9s ease-in-out infinite; }
.ult.ready .avatar { animation: glow 0.9s ease-in-out infinite; }
@keyframes ready { 0%, 100% { box-shadow: 0 0 0 0 rgba(155,227,255,.55); } 50% { box-shadow: 0 0 18px 2px rgba(155,227,255,.55); } }
@keyframes glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.ult.dead { opacity: .35; filter: grayscale(1); cursor: default; animation: none; }
.ult .clash { position: absolute; right: 6px; top: 6px; font-size: .62rem; font-weight: 900; padding: 2px 6px; border-radius: 6px; letter-spacing: .03em; }
.clash.overpower { background: var(--good); color: #04200f; }
.clash.standoff { background: var(--warn); color: #231a02; }
.clash.overwhelmed { background: var(--bad); color: #2a0606; }
.ult .ultname { font-size: .66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (orientation: landscape) and (max-height: 560px) {
  .ultbar { padding: 4px 8px; padding-bottom: max(4px, var(--safe-b)); gap: 6px; }
  .ult { min-height: 46px; padding: 4px 6px; gap: 6px; }
  .ult .avatar { width: 34px; height: 34px; font-size: .75rem; }
  .ult .avatar .emo { display: none; }
  .ult .ultname { display: none; }
  #battle .bhud { padding: 3px 8px; }
}
/* Four cards across on every screen: on a narrow one each card is a compact tile (portrait over its bars). */
@media (max-width: 640px) {
  .ultbar { gap: 6px; padding: 6px; padding-bottom: max(6px, var(--safe-b)); }
  .ult { flex-direction: column; align-items: stretch; gap: 4px; min-height: 0; padding: 6px 5px; text-align: center; }
  .ult .avatar { width: 40px; height: 40px; margin: 0 auto; }
  .ult .nm { font-size: .7rem; }
  .ult .ultname { display: none; }
  .ult .hp, .ult .ck { height: 5px; }
  .ult .clash { right: 3px; top: 3px; font-size: .55rem; padding: 1px 4px; }
}
.onboard { position: absolute; z-index: 5; max-width: min(360px, 86vw); background: #fff8e7; color: #2a1d08; border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); font-weight: 650; font-size: .92rem; line-height: 1.4; animation: popIn .25s ease-out; }
.onboard b { color: #b34a00; }
.onboard .row { margin-top: 8px; justify-content: flex-end; }
.onboard .btn { min-height: 44px; padding: 6px 12px; background: #2a1d08; color: #fff8e7; border: 0; }
@keyframes popIn { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
/* The pause menu covers the whole battle screen (fixed), not just the stage: on a phone held
   upright the stage is only ~230 px tall and the menu card used to clip. */
.pause-veil { position: fixed; inset: 0; background: rgba(5,8,12,.72); display: grid; place-items: center; z-index: 34; backdrop-filter: blur(2px); overflow-y: auto; padding: 16px; }

/* ---------------- Modals / toasts ---------------- */
#modal-root .veil { position: fixed; inset: 0; background: rgba(4,6,10,.7); z-index: 80; display: grid; place-items: center; padding: 16px; animation: fadeIn var(--t) ease-out; backdrop-filter: blur(3px); }
.modal { width: min(560px, 100%); max-height: min(88vh, 900px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6); padding: 20px; animation: popIn .22s ease-out; }
.modal.wide { width: min(820px, 100%); }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#toast-root { position: fixed; left: 50%; top: calc(var(--topbar-h) + var(--safe-t) + 10px); transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 460px); }
.toast { min-height: 44px; background: #111a24; border: 1px solid var(--line); color: var(--text); padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow); font-weight: 700; font-size: .9rem; animation: toastIn .25s ease-out; pointer-events: auto; text-align: center; }
.toast.good { border-color: #1f6b43; }
.toast.bad { border-color: #7a2c33; }
.toast.sticky { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(255, 138, 61, .25), var(--shadow); }
.toast.sticky::after { content: ' ↻'; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Results */
.result-hero { text-align: center; padding: 8px 0 4px; }
.result-hero .big { font-size: 2.2rem; font-weight: 950; letter-spacing: .04em; }
.result-hero .big.win { color: var(--good); text-shadow: 0 0 24px rgba(61,220,132,.35); }
.result-hero .big.lose { color: var(--bad); }
.reward-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.reward { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); font-weight: 850; font-size: 1.05rem; animation: popIn .35s ease-out both; }
.dmg-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.dmg-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.dmg-table .barcell { width: 45%; }

/* Settings / forms */
textarea, input[type=text], input[type=search], input[type=number], select { width: 100%; background: #0c1219; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--text); }
textarea { min-height: 90px; resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: .78rem; }
/* A 56×44 button (the tap target) drawing a 52×30 switch: track ::before, knob ::after. */
.toggle { position: relative; width: 56px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; flex: 0 0 auto; }
.toggle::before { content: ''; position: absolute; left: 2px; top: 7px; width: 52px; height: 30px; border-radius: 99px; background: var(--surface3); border: 1px solid var(--line); transition: background var(--t); }
.toggle::after { content: ''; position: absolute; top: 11px; left: 6px; width: 22px; height: 22px; border-radius: 50%; background: #dfe6ee; transition: transform var(--t); }
.toggle.on::before { background: var(--accent); }
.toggle.on::after { transform: translateX(22px); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); min-height: 44px; }
/* Volume sliders: a 44 px tall track area, the accent as the thumb. */
input.vol { -webkit-appearance: none; appearance: none; width: 120px; height: 44px; background: transparent; cursor: pointer; margin: 0; }
input.vol::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--surface3); border: 1px solid var(--line); }
input.vol::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); margin-top: -9px; }
input.vol::-moz-range-track { height: 6px; border-radius: 3px; background: var(--surface3); border: 1px solid var(--line); }
input.vol::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.intro-tap { margin-top: 10px; font-family: var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent2); font-size: .95rem; animation: tapPulse 1.4s ease-in-out infinite; }
@keyframes tapPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.setting:last-child { border-bottom: 0; }

/* Debug panel */
#debug-fab { position: fixed; right: 12px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px); z-index: 95; }
.debug-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); z-index: 96; background: #0b1016; border-left: 1px solid var(--line); box-shadow: -10px 0 40px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.debug-panel header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.debug-panel .body { overflow-y: auto; padding: 10px 12px 40px; font-size: .82rem; }
.debug-panel details { border-left: 2px solid var(--line); margin: 4px 0 4px 4px; padding-left: 8px; }
.debug-panel summary { cursor: pointer; font-weight: 800; padding: 3px 0; color: var(--accent2); }
.debug-panel .dbg-field { display: grid; grid-template-columns: 1fr 110px; gap: 6px; align-items: center; margin: 3px 0; }
.debug-panel .dbg-field label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debug-panel .dbg-field input { padding: 4px 6px; border-radius: 6px; font-size: .8rem; }
.debug-panel .tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 480px) {
  #topbar { gap: 8px; padding: var(--safe-t) 10px 0; }
  #topbar .brand span.title { display: none; }
  .currency { padding: 5px 8px; font-size: .9rem; }
  #screen { padding: 12px 12px 28px; }
  .slots { grid-template-columns: repeat(2, 1fr); }
  .pull-buttons { grid-template-columns: 1fr; }
  .reveal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Battle layout, the same on every screen (js/ui/BattleScreen.js _layout): the top bar, the stage
   (16:9 at the full width, or shorter when the screen is wide, --stage-h), the message panel under it
   (dialogue while someone talks, the Nature Wheel otherwise; it takes the rest, at least --panel-min),
   the portrait cards. The canvas never drives layout: it letterboxes inside the stage. */
#battle { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto var(--stage-h, 56vw) minmax(var(--panel-min, 110px), 1fr) auto; }
.stage { position: relative; min-width: 0; min-height: 0; }
.stage canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.binfo { position: relative; display: block; min-height: 0; overflow: hidden; border-top: 1px solid #1a2330; background: #080c11; }
.binfo-body { height: 100%; overflow-y: auto; padding: 10px 14px; }
.binfo .wheel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 8px; font-weight: 800; font-size: .8rem; }
.binfo .wheel .gt { color: var(--dim); }
.binfo .foes { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; }
.binfo .foe { display: flex; align-items: center; gap: 8px; font-size: .85rem; }

/* Summon banner picker: current banners in one row, the rest in a grouped archive */
.banner-picker { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.banner-current { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.banner-current .banner-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.banner-tab .sub { font-size: .7rem; font-weight: 700; color: var(--dim); }
.banner-archive-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 8px 12px; min-height: 44px; cursor: pointer; font-weight: 800; font-size: .85rem; color: var(--muted); text-align: left; }
.banner-archive { display: flex; flex-direction: column; gap: 8px; }
.banner-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.banner-grid .banner-tab { padding: 8px 10px; font-size: .8rem; }

/* ---------------- Tips, tutorial and screen headers (Session 4) ---------------- */
.tip-card { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #1a2230; border: 1px solid #3a4d66; box-shadow: var(--shadow-sm); animation: popIn .25s ease-out; }
.tip-card .tip-ico { font-size: 1.4rem; line-height: 1.2; }
.tip-card .tip-body { flex: 1 1 auto; min-width: 0; }
.tip-card .tip-body p { margin: 2px 0 0; font-size: .88rem; color: var(--text); }
.tip-card .btn { flex: 0 0 auto; align-self: center; }
.screen-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.screen-head h1 { margin: 0; }
/* Extra controls and the ? button stay together (and wrap together, right-aligned). */
.screen-head .head-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.big-emoji { font-size: 2.6rem; line-height: 1; margin: 4px 0 8px; }
.lesson-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 12px 0; }
.lesson-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: .8rem; font-weight: 750; color: var(--muted); min-width: 0; }
.lesson-steps li .num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface3); color: var(--text); font-weight: 900; }
.lesson-steps li.current { border-color: var(--accent); color: var(--text); }
.lesson-steps li.current .num { background: var(--accent); color: #1c0d02; }
.lesson-steps li.done .num { background: #173524; color: var(--good); }
.lesson-card h2 { margin: 2px 0 6px; }
.learn { margin: 8px 0 4px; padding: 10px 12px; border-radius: 12px; background: #221a0e; border: 1px solid #6b4a14; color: #ffe0b0; font-size: .9rem; }
.concept { margin-top: 12px; }
.concept h3 { margin: 14px 0 6px; }
.role-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.role-list li { display: flex; gap: 10px; align-items: flex-start; }
.role-list .role-ico { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: var(--surface2); border: 1px solid var(--line); }
.lane-demo { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 6px; padding: 10px; border-radius: 12px; background: var(--bg2); border: 1px dashed var(--line); font-weight: 800; }
.lane-demo .arrow { color: var(--dim); }
.lane-demo .foe { color: var(--bad); }
.wheel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; }
.wheel-row .gt { color: var(--dim); font-weight: 900; }
.quiz { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.quiz-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.quiz-opt { min-height: 44px; min-width: 44px; padding: 6px 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; }
.quiz-opt.right { border-color: var(--good); background: #10281c; }
.quiz-opt.wrong { border-color: var(--bad); background: #2a1414; }
.quiz-ok { color: var(--good); }
.quiz-no { color: var(--warn); }
/* Unanswered, the quiz is the thing blocking the lesson: say so with a glow, and a shake when the locked button is tapped. */
.quiz.unanswered { border-color: #ff9b52; box-shadow: 0 0 0 1px rgba(255,155,82,.35), 0 0 18px rgba(255,122,40,.18); }
.quiz.nudge { animation: quizNudge .5s ease; }
@keyframes quizNudge { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.quiz-lock-note { color: var(--warn); text-align: right; }
@media (prefers-reduced-motion: reduce) { .quiz.nudge { animation: none; } }
.clash-table { width: 100%; border-collapse: collapse; }
.clash-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.clash-table .clash { display: inline-block; white-space: nowrap; font-size: .66rem; font-weight: 900; padding: 2px 6px; border-radius: 6px; }
.coach { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #221a0e; border: 1px solid #6b4a14; }
.coach p { color: #ffe0b0; margin: 6px 0 0; }
.onboard { left: 0; right: 0; margin: 0 auto; width: min(380px, 88vw); }
@media (max-width: 480px) {
  .lesson-steps { grid-template-columns: 1fr; }
}

/* ---------------- Wiki (Session 4) ---------------- */
.help-btn { font-weight: 900; font-size: 1.05rem; color: var(--accent2); flex: 0 0 auto; }
.back-btn { flex: 0 0 auto; min-height: 44px; }
.hero-help { position: absolute; top: 12px; right: 12px; z-index: 1; }
.row.tight { gap: 6px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 12px; font-size: .8rem; color: var(--muted); }
.crumbs a { color: var(--accent2); text-decoration: none; min-height: 44px; min-width: 44px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; }
.crumbs .sep { color: var(--dim); }
.wsearch { font-size: 1rem; min-height: 48px; margin-bottom: 10px; }
.wresults:empty { display: none; }
.wresults { margin-bottom: 12px; }
.wlist { display: flex; flex-direction: column; gap: 6px; }
.wlist.compact .wrow { padding: 6px 10px; }
.wrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-align: left; cursor: pointer; transition: border-color var(--t), background var(--t); }
.wrow:hover { border-color: var(--surface3); background: var(--surface2); }
.wrow .grow { min-width: 0; }
.wrow b { display: block; overflow-wrap: anywhere; }
.wcard { display: flex; gap: 12px; align-items: flex-start; text-align: left; color: var(--text); width: 100%; }
.wcard h3 { margin: 0 0 4px; }
.wcard p { margin: 0; }
.wcard-ico { font-size: 1.6rem; line-height: 1.2; }
.whero { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.wsec { margin-top: 18px; }
.wsec > h2 { font-size: 1.1rem; margin-bottom: 8px; }
.wuse { margin-top: 10px; }
.wnode { margin-top: 12px; scroll-margin-top: 12px; }
.wnode p { margin: 6px 0; }
.wnode .wlist { margin: 10px 0; }
.wlink { color: var(--accent2); font-weight: 750; text-decoration: underline; text-decoration-color: rgba(255,184,107,.4); text-underline-offset: 2px; }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wtable { width: 100%; border-collapse: collapse; font-size: .86rem; }
.wtable th, .wtable td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.wtable th { color: var(--muted); font-weight: 800; font-size: .78rem; }
.wtable.matrix td, .wtable.matrix th { text-align: center; }
.wtable.matrix td.win { color: var(--good); font-weight: 900; }
.wtable.matrix td.lose { color: var(--bad); font-weight: 900; }
.wtable.matrix td.even { color: var(--dim); }
.guide h2 { margin-top: 20px; }
.guide h3 { margin-top: 16px; }
.guide p, .guide li { color: var(--text); line-height: 1.55; }
.guide ul, .guide ol { padding-left: 22px; margin: 0 0 .75em; }
.guide li { margin: 4px 0; }
.guide code { background: var(--surface2); padding: 1px 5px; border-radius: 6px; font-size: .9em; }
.guide h2:first-child, .guide h3:first-child { margin-top: 0; }
.callout { border-left: 4px solid var(--accent); background: #221a0e; border-radius: 0 12px 12px 0; padding: 10px 14px; margin: 12px 0; }
.callout p { margin: 0; color: #ffe0b0; }
.guide-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.inline-btn { vertical-align: middle; margin: 2px 0; }
.spinner { width: 28px; height: 28px; margin: 8px auto; border-radius: 50%; border: 3px solid var(--surface3); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wheel-wrap { display: grid; place-items: center; margin: 8px 0; }
.wheel-svg { width: min(300px, 80vw); height: auto; }
.wheel-edge { stroke: #7c8ea3; stroke-width: 3; transition: stroke var(--t), opacity var(--t); }
.wheel-edge.win { stroke: #3ddc84; stroke-width: 5; }
.wheel-edge.lose { stroke: #ff5d5d; stroke-width: 5; }
.wheel-edge.dim { opacity: .25; }
.wheel-node circle { stroke: #0d1117; stroke-width: 3; }
.wheel-node.on circle { stroke: #fff; stroke-width: 4; }
.center-row { justify-content: center; }
.chip.nat-pick { min-height: 44px; padding: 4px 8px; }
.challenge { text-align: left; color: var(--text); width: 100%; }
.challenge.locked { opacity: .6; }
.wiki .screen-head { flex-wrap: nowrap; align-items: flex-start; }
.wiki .screen-head h1 { font-size: clamp(1.3rem, 5vw, 2.1rem); min-width: 0; overflow-wrap: anywhere; flex: 1 1 auto; align-self: center; }
.wiki .screen-head .grow { display: none; }
.wheel-label { font-weight: 800; font-family: system-ui, sans-serif; fill: #0d1117; }

/* ---------------- Achievements (Session 4) ---------------- */
#ach-btn { position: relative; }
#ach-btn .dot, .icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px #111820; }
#ach-btn.active { border-color: var(--accent); }
.ach-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ach-summary .big-num { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.ach-summary .grow { min-width: 120px; }
.ach-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ach { padding: 14px; }
.ach p { margin: 6px 0 8px; }
.ach.ready { border-color: var(--r-kage); box-shadow: 0 0 0 1px rgba(255,197,61,.4) inset; }
.ach.claimed { opacity: .72; }
.pull-buttons.tickets { margin-top: 10px; }
button.tile { text-align: left; color: var(--text); cursor: pointer; width: 100%; font: inherit; }
button.tile:hover { border-color: var(--surface3); }
button.toast { font: inherit; cursor: pointer; }

/* ---------------- Settings (Session 4) ---------------- */
.card.gap { margin-top: 12px; }
.setting-text { min-width: 0; flex: 1 1 auto; }
.setting .seg { flex: 0 0 auto; }
.toggle:disabled { opacity: .45; cursor: not-allowed; }
.good-text { color: var(--good); }
.warn-text { color: var(--warn); }
.boot-loading { padding-top: 30vh; }
.spinner.small-spin { width: 18px; height: 18px; margin: 0; border-width: 2px; }
@media (max-width: 480px) {
  .setting { flex-wrap: wrap; }
  .setting .seg { margin-left: auto; }
}

/* ---------------- Splash and intro (Session 5) ----------------
   A fixed overlay above the app. 100dvh: the real visible height on phones (the
   address bar comes and goes). The runners are the battle token in CSS: a head
   circle over a tunic trapezoid, in silhouette. */
#intro { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 100; background: radial-gradient(900px 500px at 50% 110%, #1c2533, transparent 70%), var(--bg); display: grid; place-items: center; overflow: hidden; transition: opacity .3s ease-in; }
#intro.out { opacity: 0; pointer-events: none; }
#intro.shake { animation: introShake .4s linear; }
.intro-skip { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); z-index: 2; color: var(--muted); }
.intro-splash { display: grid; place-items: center; gap: 14px; animation: introFade .25s ease-out both; }
.intro-splash.out { animation: introFadeOut .2s ease-in both; }
.brand-mark.big { width: 84px; height: 84px; font-size: 46px; box-shadow: 0 0 0 3px #2a1a0c inset, 0 10px 40px rgba(240, 105, 31, .35); }
.intro-name { font-weight: 900; font-size: clamp(1.3rem, 5vw, 2rem); letter-spacing: .02em; }
.intro-scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 16px; }
/* A dusk band behind the runners, so their silhouettes read against the sky. */
.intro-scene::before { content: ''; position: absolute; left: 0; right: 0; bottom: 28%; height: 34%; background: linear-gradient(180deg, transparent, rgba(255, 138, 61, .10) 55%, rgba(255, 184, 107, .22) 100%); pointer-events: none; }
.intro-ground { position: absolute; left: 0; right: 0; bottom: 28%; height: 2px; background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); }
.runner { position: absolute; left: 0; bottom: calc(28% + var(--dy, 0px)); width: 40px; height: 62px; transform: translateX(-120px) scale(var(--s, 1)); transform-origin: 50% 100%; animation: introRun 1.1s linear var(--d, 0ms) both; }
.runner .bob { position: absolute; inset: 0; animation: introBob .2s ease-in-out infinite alternate; }
.runner .head { position: absolute; left: 8px; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #05070a; }
.runner .body { position: absolute; left: 2px; bottom: 6px; width: 36px; height: 34px; background: #05070a; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.runner::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.intro-title { position: relative; z-index: 1; opacity: 0; display: grid; place-items: center; gap: 8px; text-align: center; }
.intro-title h1 { margin: 0; font-size: clamp(1.8rem, 8vw, 3.4rem); letter-spacing: .01em; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
.intro-title p { margin: 0; color: var(--muted); font-weight: 700; }
.intro-title.slam { animation: introSlam .5s cubic-bezier(.2, .9, .25, 1.2) both; }
.intro-title.fade { animation: introFade .6s ease-out both; }
.intro-flash { position: absolute; inset: 0; background: #fff; pointer-events: none; animation: flash .5s ease-out forwards; }
@keyframes introFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes introFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes introRun { from { transform: translateX(-120px) scale(var(--s, 1)); } to { transform: translateX(calc(100vw + 120px)) scale(var(--s, 1)); } }
@keyframes introBob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes introSlam { from { opacity: 0; transform: scale(2.8); } 60% { opacity: 1; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes introShake { 0%, 100% { transform: none; } 20% { transform: translate(-8px, 5px); } 40% { transform: translate(7px, -4px); } 60% { transform: translate(-5px, 3px); } 80% { transform: translate(3px, -2px); } }

/* ---------------- Start menu (Session 5) ----------------
   body.start-mode: the menu is up (no top bar, no tab bar, the screen fills the app).
   body.start-sub: the Wiki or Settings opened from the menu (tab bar hidden, "‹ Menu" back). */
body.start-mode #topbar, body.start-mode #tabbar, body.start-sub #tabbar { display: none; }
body.start-mode #app { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
body.start-sub #app { grid-template-rows: calc(var(--topbar-h) + var(--safe-t)) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
body.start-mode #screen { padding: 0; grid-area: auto; }
.start { position: relative; min-height: 100%; display: grid; grid-template-rows: 1fr auto 1fr auto; align-items: center; justify-items: center; gap: 12px; padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: radial-gradient(900px 500px at 50% 115%, #1c2533, transparent 70%), radial-gradient(700px 300px at 85% -10%, rgba(255, 138, 61, .16), transparent 60%); }
.start-brand { align-self: end; display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 520px; }
.start-brand h1 { margin: 6px 0 0; font-size: clamp(1.7rem, 7vw, 2.6rem); }
.start-brand p { margin: 0; font-size: .95rem; }
.start-menu { align-self: start; width: min(380px, 100%); display: grid; gap: 10px; }
.start-item { width: 100%; min-height: 56px; flex-direction: column; gap: 2px; padding: 10px 16px; line-height: 1.2; }
.start-item .sub { font-size: .78rem; }
.start-busy { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 56px; color: var(--muted); font-weight: 700; }
.start-note { min-height: 1.3em; margin: 0; text-align: center; }
.start-links { margin-top: 2px; }
.start-links .btn { color: var(--muted); }
.start-foot { align-self: end; justify-self: stretch; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; }
.start-foot p { margin: 0; max-width: 60ch; }
.build-stamp { flex: 0 0 auto; font-size: .72rem; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Phones held sideways: brand on the left, buttons on the right, one footer line. */
@media (orientation: landscape) and (max-height: 560px) {
  .start { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "brand menu" "foot foot"; align-items: center; gap: 8px 20px; padding-top: max(10px, env(safe-area-inset-top, 0px)); }
  .start-brand { grid-area: brand; align-self: center; }
  .start-brand .brand-mark.big { width: 64px; height: 64px; font-size: 34px; }
  .start-brand h1 { font-size: clamp(1.4rem, 3.6vw, 2rem); }
  .start-brand p { font-size: .85rem; }
  .start-menu { grid-area: menu; align-self: center; width: min(360px, 100%); gap: 8px; }
  .start-item { min-height: 48px; padding: 6px 14px; }
  .start-foot { grid-area: foot; }
  .start-foot p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}

/* The build stamp in Settings › About sits bottom-right of its card. */
.about-stamp { display: block; text-align: right; margin: 8px 0 0; }

/* ---------------- 0.11: conveniences ---------------- */
/* Story map mode tabs: Story · Hard · Daily · Boss Rush, one row that fits a 360 px phone. */
.mode-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-bottom: 6px; }
.mode-tabs button { padding: 6px 4px; font-size: .82rem; line-height: 1.15; overflow-wrap: anywhere; }
.mode-tabs button.on.hard { background: #3a1a1d; color: #ffb3b3; }
.mode-tabs button.locked { opacity: .55; }
.mode-note { margin: 0 0 10px; }
.arc-fold { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-bottom: 10px; padding: 8px 14px; border-radius: 12px; border: 1px solid #1f6b43; background: #10281c; color: var(--good); font-weight: 800; cursor: pointer; text-align: left; }
/* Node states: the next battle glows, locked ones are greyed with a lock and a hint. */
.map-legend { margin: -8px 0 12px; }
.power-check { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); }
.power-check.low { border-color: #6b5a1f; }
.power-check.ok { border-color: #1f6b43; }
.row.end { justify-content: flex-end; }
.fight-row { gap: 8px; }
/* Team Builder counter hints and presets. */
.counter-pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .68rem; font-weight: 850; white-space: nowrap; border: 1px solid var(--line); background: var(--surface2); }
.counter-pill.match-up { color: var(--good); border-color: #1f6b43; background: #10281c; }
.counter-pill.match-down { color: var(--bad); border-color: #6b2525; background: #2a1414; }
.counter-pill.match-even { color: var(--muted); }
.presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.preset { display: flex; flex: 1 1 100px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.preset.on { border-color: var(--accent); }
.preset.empty { border-style: dashed; }
.preset-load { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 4px 10px; border: 0; background: none; cursor: pointer; text-align: left; }
.preset-load .tiny { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-save { flex: 0 0 44px; min-height: 44px; border: 0; border-left: 1px solid var(--line); background: var(--surface2); cursor: pointer; }
/* Roster auto-level card, sort row and the dialogs. */
.auto-level { margin-bottom: 10px; }
.sort-row { gap: 6px; margin-top: 4px; }
.sort-row .filters { margin: 4px 0; }
.plan-list { margin: 8px 0; padding-left: 20px; font-size: .9rem; }
.plan-list li { margin: 2px 0; }
.reserve-field { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.reserve-field input, .reserve-input { width: 120px; min-height: 44px; }
.skip-anim { margin-top: 10px; }
.skip-anim label { gap: 4px; color: var(--muted); }
.result-actions .btn { flex: 1 1 auto; }
@media (max-width: 480px) {
  .mode-tabs button { font-size: .74rem; padding: 6px 2px; }
  .fight-row > .btn { flex: 1 1 auto; }
}

/* ---------------- 0.11.2: suggesting the install ---------------- */
/* The start-menu notice: a slim card under the menu buttons (never pushes them off a 360×780 screen). */
.install-notice { display: flex; align-items: center; gap: 10px; width: min(380px, 100%); align-self: center; padding: 8px 10px 8px 12px; border-radius: 12px; border: 1px solid #6b3a14; background: #2a1a0c; text-align: left; }
/* Sideways: the notice takes its own row under the menu column. */
@media (orientation: landscape) and (max-height: 560px) {
  .start:has(.install-notice) { grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: "brand menu" "brand notice" "foot foot"; }
  .install-notice { grid-area: notice; align-self: start; width: min(360px, 100%); }
}
.install-notice .ins-emoji, #install-banner .ins-emoji { font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
.install-notice .ins-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; line-height: 1.2; }
.install-notice .ins-text b { font-size: .9rem; }
.install-notice .btn { flex: 0 0 auto; }
/* The reminder banner: its own grid row between the screen and the tab bar, so it never covers content. */
#app { grid-template-rows: calc(var(--topbar-h) + var(--safe-t)) minmax(0, 1fr) auto auto; }
#install-banner { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: #2a1a0c; border-top: 1px solid #6b3a14; font-weight: 700; font-size: .88rem; z-index: 5; }
#install-banner .ins-text { flex: 1 1 auto; min-width: 0; }
#install-banner .ins-close { min-width: 44px; padding: 6px 8px; flex: 0 0 auto; }
body.start-mode #install-banner, body.start-sub #install-banner { display: none; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  #app { grid-template-rows: calc(var(--topbar-h) + var(--safe-t)) 1fr auto; grid-template-areas: "top top" "nav main" "nav banner"; }
  #install-banner { grid-area: banner; }
}
/* The popup and the steps dialogs. */
.install-perks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.install-perks li { padding: 8px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); font-size: .92rem; }
.ins-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; counter-reset: ins; }
.ins-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); font-size: .92rem; line-height: 1.35; counter-increment: ins; }
.ins-step::before { content: counter(ins); flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #1c0d02; font-weight: 900; font-size: .8rem; }
.ins-ico { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--surface2); border: 1px solid var(--line); color: var(--accent2); }
.ins-copy { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.ins-link { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: .85rem; }
.ins-copy .btn { flex: 0 0 auto; }

/* ==========================================================================
   Phase 3: the era skins, icons, type and the battle overlays (docs/ART_BIBLE.md §6–§10)
   ========================================================================== */
/* Shippuden: night steel and Akatsuki red. Part I's values live on :root. */
html[data-era="p2"] {
  --bg: #0a0b0f; --bg2: #0f1218; --surface: #141923; --surface2: #1b2230; --surface3: #26303f; --line: #303b4c;
  --text: #eef2f7; --muted: #9fb0c3; --dim: #67788c; --accent: #e63946; --accent2: #ff6b6b; --good: #5fd38a;
  --paper: #dfe4ec; --paper2: #b7c0cc; --paper-ink: #11151c; --wood: #2a313d; --wood2: #171b23; --steel: #97a6b8; --steel2: #4d5a6b;
  --primary-ink: #fff5f5; --tab-ink: var(--dim); --tab-on: var(--accent2);
  --primary-grad: linear-gradient(180deg, #ff5a68, #b5131f); --primary-edge: #ff8a94; --primary-glow: rgba(230, 57, 70, .35);
  --card-edge: linear-gradient(180deg, #a8b6c8, #55627a);
}

/* Icons: an inline SVG sprite, sized by the text around it. */
.ico { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -.15em; flex: 0 0 auto; }
.ico-slot { display: inline-grid; place-items: center; }
.tab .ti .ico { width: 22px; height: 22px; }
.icon-btn .ico { width: 22px; height: 22px; }
.currency .ico { width: 1.05em; height: 1.05em; font-size: 1rem; }
.nat .ico { width: 12px; height: 12px; }
.nat::before { display: none; }
.role .ico { width: 13px; height: 13px; }
.big-emoji .ico { width: 1em; height: 1em; }
.tip-card .tip-ico .ico, .wcard-ico .ico { color: var(--accent2); }
.role-list .role-ico .ico { width: 20px; height: 20px; color: var(--accent2); }
.btn .ico { width: 1.05em; height: 1.05em; }

/* Type: the display face for titles, numbers and the anime cut-ins; the brush face for kanji and epithets. */
h1, h2, .brand, .intro-name, .start-brand h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
h1 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); }
h2 { font-size: 1.32rem; }
.tier { font-family: var(--font-display); font-weight: 400; letter-spacing: .07em; }
.tile .v, .ach-summary .big-num, .result-hero .big, #battle .timer, .power-check b { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; }
.brand-mark, .brand-mark.big { font-family: var(--font-brush); font-weight: 400; }
.hero .kanji { font-family: var(--font-brush); font-weight: 400; }
.brush { font-family: var(--font-brush); }
.btn.primary, .btn.big { font-family: var(--font-display); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; font-size: 1.02rem; }
.btn.small.primary { font-size: .9rem; }
.btn.big { font-size: 1.15rem; }
.btn .sub { font-family: var(--font); font-weight: 650; text-transform: none; letter-spacing: 0; }

/* Shell: the top bar as a wooden beam (Part I) or a steel rail (Shippuden), the tab bar as a headband plate. */
#topbar { background: linear-gradient(180deg, var(--surface2), var(--surface)); border-bottom: 2px solid var(--wood); }
html[data-era="p2"] #topbar { border-bottom: 1px solid var(--line); box-shadow: inset 0 -2px 0 var(--steel2); }
.brand-mark { background: radial-gradient(circle at 35% 30%, #ffb86b, #e0621d); color: #1b0f06; box-shadow: 0 0 0 2px #2a1a0c inset; }
html[data-era="p2"] .brand-mark { background: radial-gradient(circle at 35% 30%, #ff6b6b, #a4141f); color: #fff; box-shadow: 0 0 0 2px #2a0c0f inset; }
.currency { background: var(--paper); color: var(--paper-ink); border-color: var(--wood2); }
html[data-era="p2"] .currency { background: var(--surface2); color: var(--text); border-color: var(--steel2); }
.icon-btn { background: var(--surface2); border-color: var(--wood2); }
html[data-era="p2"] .icon-btn { border-color: var(--steel2); }
#ach-btn .dot, .icon-btn .dot { box-shadow: 0 0 0 2px var(--surface); }
#tabbar { background: linear-gradient(180deg, var(--steel), var(--steel2)); border-top: 2px solid var(--wood2); }
html[data-era="p2"] #tabbar { background: linear-gradient(180deg, #1b2230, #0c0f15); border-top: 1px solid var(--steel2); }
.tab { color: var(--tab-ink); text-transform: uppercase; letter-spacing: .02em; }
.tab:hover { color: var(--tab-on); }
.tab.active { color: var(--tab-on); }
.tab .dot { box-shadow: 0 0 0 2px var(--steel2); }
html[data-era="p2"] .tab .dot { box-shadow: 0 0 0 2px #0c0f15; }
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) {
  #tabbar { border-top: 0; border-right: 2px solid var(--wood2); }
  html[data-era="p2"] #tabbar { border-right: 1px solid var(--steel2); }
}

/* Cards, buttons, chips */
.card { position: relative; border: 2px solid var(--wood); }
.card::before { content: ''; position: absolute; inset: 0; border-radius: calc(var(--radius) - 2px); pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,220,160,.10), inset 0 14px 30px rgba(0,0,0,.22); }
.card > * { position: relative; }
html[data-era="p2"] .card { border: 1px solid var(--line); border-top: 3px solid var(--steel2); background: linear-gradient(135deg, #151a24, #0f1219 70%); }
html[data-era="p2"] .card::before { box-shadow: inset 0 0 0 1px rgba(151,166,184,.08); }
.tile, .enemy-row, .setting, .wrow, .lesson-steps li, .ach, .preset, .banner-tab, .reward, .toast { border-color: var(--wood2); }
html[data-era="p2"] .tile, html[data-era="p2"] .enemy-row, html[data-era="p2"] .wrow, html[data-era="p2"] .lesson-steps li, html[data-era="p2"] .preset, html[data-era="p2"] .banner-tab, html[data-era="p2"] .reward, html[data-era="p2"] .toast { border-color: var(--line); }
.btn { border-color: var(--wood2); }
html[data-era="p2"] .btn { border-color: var(--steel2); background: linear-gradient(180deg, #232b39, #171c26); }
html[data-era="p2"] .btn:hover { background: linear-gradient(180deg, #2c3546, #1d2330); }
.btn.primary { background: var(--primary-grad); border-color: var(--primary-edge); color: var(--primary-ink); box-shadow: 0 4px 14px var(--primary-glow); }
.btn.primary:hover { box-shadow: 0 6px 20px var(--primary-glow); }
.btn.ghost, html[data-era="p2"] .btn.ghost { background: transparent; }
.seg { border-color: var(--wood2); }
.seg button.on { background: var(--paper); color: var(--paper-ink); }
html[data-era="p2"] .seg { border-color: var(--steel2); }
html[data-era="p2"] .seg button.on { background: var(--surface3); color: var(--text); box-shadow: inset 0 0 0 1px var(--steel2); }
.mode-tabs button.on.hard { background: #3a1a1d; color: #ffb3b3; }
.pill.side { color: var(--muted); border-style: dashed; }
.toast { background: var(--surface); }
.modal { border-color: var(--wood); }
html[data-era="p2"] .modal { border-color: var(--steel2); }
.hero { background: radial-gradient(1200px 300px at 80% -10%, rgba(255,138,61,.28), transparent 60%), linear-gradient(135deg, #2c2116, #1a1410 60%); border-color: var(--wood); }
html[data-era="p2"] .hero { background: radial-gradient(1200px 300px at 80% -10%, rgba(230,57,70,.28), transparent 60%), linear-gradient(135deg, #1a2130, #0f1219 60%); border-color: var(--steel2); }
.hero .kanji { color: rgba(255,255,255,.05); }
.node-map { --m1: var(--surface2); --m2: var(--bg2); border-color: var(--wood); }
html[data-era="p2"] .node-map { border-color: var(--steel2); }
.banner-hero { --b1: rgba(255,138,61,.22); background: radial-gradient(600px 240px at 90% 0%, var(--b1), transparent 60%), linear-gradient(135deg, #2c2116, #1a1410); border-color: var(--wood); }
html[data-era="p2"] .banner-hero { --b1: rgba(230,57,70,.25); background: radial-gradient(600px 240px at 90% 0%, var(--b1), transparent 60%), linear-gradient(135deg, #1a2130, #0f1219); border-color: var(--steel2); }
.hard-mode .hero, .hard-mode .banner-hero { border-color: #7a2c33; }
.tip-card, .coach, .learn, .callout { background: var(--paper); color: var(--paper-ink); border-color: var(--wood); }
.tip-card .tip-body p, .coach p, .callout p { color: var(--paper-ink); }
.tip-card .btn, .coach .btn { background: var(--wood); color: var(--paper); border-color: var(--wood2); }
html[data-era="p2"] .tip-card, html[data-era="p2"] .coach, html[data-era="p2"] .learn, html[data-era="p2"] .callout { background: #1b2230; color: var(--text); border-color: var(--steel2); }
html[data-era="p2"] .tip-card .tip-body p, html[data-era="p2"] .coach p, html[data-era="p2"] .callout p { color: var(--text); }
html[data-era="p2"] .tip-card .btn, html[data-era="p2"] .coach .btn { background: var(--surface3); color: var(--text); border-color: var(--steel2); }
.onboard { background: var(--paper); color: var(--paper-ink); border: 3px solid var(--wood); }
.onboard b { color: #b34a00; }
.onboard .btn { background: var(--wood); color: var(--paper); }
html[data-era="p2"] .onboard { background: #1b2230; color: var(--text); border-color: var(--steel2); }
html[data-era="p2"] .onboard b { color: var(--accent2); }
html[data-era="p2"] .onboard .btn { background: var(--accent); color: #fff; }
.start { background: radial-gradient(900px 500px at 50% 115%, var(--surface2), transparent 70%), radial-gradient(700px 300px at 85% -10%, rgba(255, 138, 61, .16), transparent 60%); }
html[data-era="p2"] .start { background: radial-gradient(900px 500px at 50% 115%, #1b2230, transparent 70%), radial-gradient(700px 300px at 85% -10%, rgba(230, 57, 70, .18), transparent 60%); }
#intro { background: radial-gradient(900px 500px at 50% 110%, var(--surface2), transparent 70%), var(--bg); }
.install-notice, #install-banner { background: var(--surface2); border-color: var(--wood); }
html[data-era="p2"] .install-notice, html[data-era="p2"] #install-banner { border-color: var(--steel2); }

/* Battle chrome */
#battle .bhud { background: linear-gradient(180deg, var(--surface2), var(--surface)); border-bottom: 2px solid var(--wood); }
html[data-era="p2"] #battle .bhud { border-bottom: 1px solid var(--steel2); }
#battle .bhud .obj { padding: 4px 8px; border-radius: 6px; background: var(--paper); color: var(--paper-ink); border-left: 4px solid var(--accent); }
#battle .bhud .obj .sub { color: var(--paper-ink); opacity: .72; }
html[data-era="p2"] #battle .bhud .obj { background: #0c0f15; color: var(--text); }
html[data-era="p2"] #battle .bhud .obj .sub { color: var(--muted); opacity: 1; }
#battle .timer { background: #0b0f14; color: #fff; border-color: var(--line); font-size: 1.05rem; }
.ultbar { background: linear-gradient(180deg, var(--surface), var(--bg2)); border-top: 2px solid var(--wood); }
html[data-era="p2"] .ultbar { border-top: 1px solid var(--steel2); }
.ult { background: var(--surface2); border-color: var(--wood2); }
html[data-era="p2"] .ult { border-color: var(--steel2); background: linear-gradient(180deg, #1a2130, #11161f); }
.ult.ready { border-color: var(--accent2); background: var(--surface3); animation: readyGlow .9s ease-in-out infinite; }
.ult.ready .avatar { animation: glow .9s ease-in-out infinite; box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), 0 0 0 3px var(--accent), 0 0 14px var(--accent2); }
@keyframes readyGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,184,107,.5); } 50% { box-shadow: 0 0 16px 2px rgba(255,184,107,.6); } }
html[data-era="p2"] .ult.ready { animation-name: readyGlowRed; }
@keyframes readyGlowRed { 0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,.5); } 50% { box-shadow: 0 0 16px 2px rgba(255,107,107,.6); } }
.ult .clash { font-family: var(--font-display); font-weight: 400; letter-spacing: .05em; font-size: .64rem; }
.binfo { background: var(--bg2); border-top: 1px solid var(--line); }
.pause-veil .card { width: min(360px, 100%); }
/* The stage overlays (js/ui/BattleScreen.js): each is positioned over the canvas and never takes taps. */
.stage .overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* Ultimate cut-in: the name card slides across the top of the stage. */
.namecard { position: absolute; left: -28px; top: 8%; width: max-content; max-width: calc(100% + 12px); height: 24%; min-height: 44px; max-height: 120px; display: flex; align-items: center; gap: 8px; padding: 0 64px 0 40px; transform: skewX(-12deg); background: linear-gradient(90deg, var(--paper) calc(100% - 64px), transparent); border-top: 3px solid var(--wood); border-bottom: 3px solid var(--wood); opacity: 0; pointer-events: none; z-index: 3; }
html[data-era="p2"] .namecard { background: linear-gradient(90deg, #0c0f15 calc(100% - 64px), transparent); border-color: var(--accent); }
.namecard.show { animation: cutin 1.1s cubic-bezier(.2,.9,.25,1) both; }
@keyframes cutin { 0% { opacity: 0; transform: skewX(-12deg) translateX(-40px); } 12% { opacity: 1; transform: skewX(-12deg) translateX(0); } 80% { opacity: 1; transform: skewX(-12deg) translateX(6px); } 100% { opacity: 0; transform: skewX(-12deg) translateX(30px); } }
.namecard .avatar { width: auto; height: 78%; aspect-ratio: 1; flex: 0 0 auto; transform: skewX(12deg); border-radius: 6px; box-shadow: 0 0 0 2px var(--wood); }
.namecard .avatar img, .namecard .avatar canvas { border-radius: 4px; }
.namecard .txt { transform: skewX(12deg); min-width: 0; }
.namecard .who { font-family: var(--font-display); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-ink); opacity: .8; }
.namecard .what { font-family: var(--font-display); font-size: clamp(.9rem, 4.2vw, 1.25rem); letter-spacing: .03em; text-transform: uppercase; color: var(--paper-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
html[data-era="p2"] .namecard .who, html[data-era="p2"] .namecard .what { color: #fff; }
/* Clash readout: two lines, big enough to read on a phone. */
.readout { position: absolute; left: 0; right: 0; top: 26%; text-align: center; pointer-events: none; opacity: 0; z-index: 3; padding: 0 8px; }
.readout .l1 { font-family: var(--font-display); font-size: clamp(1rem, 5vw, 1.5rem); letter-spacing: .12em; color: #fff; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.8); }
.readout .l2 { font-family: var(--font-display); font-size: clamp(1.8rem, 9vw, 2.9rem); letter-spacing: .06em; line-height: 1; color: var(--good); -webkit-text-stroke: 1.5px #06200f; text-shadow: 0 4px 0 rgba(0,0,0,.6), 0 0 22px rgba(95,211,138,.7); }
.readout.standoff .l2 { color: var(--warn); -webkit-text-stroke-color: #2a2000; text-shadow: 0 4px 0 rgba(0,0,0,.6), 0 0 22px rgba(255,204,77,.6); }
.readout.overwhelmed .l2 { color: var(--bad); -webkit-text-stroke-color: #2a0606; text-shadow: 0 4px 0 rgba(0,0,0,.6), 0 0 22px rgba(255,93,93,.6); }
.readout.counter .l2 { color: #9be3ff; -webkit-text-stroke-color: #062033; text-shadow: 0 4px 0 rgba(0,0,0,.6), 0 0 22px rgba(155,227,255,.6); }
.readout.fight .l2 { color: var(--accent2); -webkit-text-stroke-color: #3a1a00; text-shadow: 0 4px 0 rgba(0,0,0,.6), 0 0 22px rgba(255,184,107,.6); }
.readout.fight .l1 { font-size: clamp(.8rem, 3.6vw, 1.2rem); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.readout.show { animation: readout 1.6s ease-out both; }
@keyframes readout { 0% { opacity: 0; transform: scale(1.6); } 10% { opacity: 1; transform: scale(.96); } 18% { transform: scale(1.02); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-14px); } }
/* Boss intro: letterbox bars, speed lines, the name card with the epithet. */
.stage .bars { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.stage .bars::before, .stage .bars::after { content: ''; position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .35s ease-out; }
.stage .bars::before { top: 0; } .stage .bars::after { bottom: 0; }
.stage .bars.in::before, .stage .bars.in::after { height: 12%; }
.speedlines { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0 6deg, rgba(255,255,255,.14) 6deg 7deg); mix-blend-mode: screen; z-index: 2; }
.speedlines.show { animation: sl .9s ease-out both; }
@keyframes sl { 0% { opacity: 0; transform: scale(1.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
.bosscard { position: absolute; left: 0; right: 0; bottom: 16%; display: flex; align-items: flex-end; gap: 10px; padding: 0 0 0 6%; pointer-events: none; opacity: 0; z-index: 4; }
.bosscard.show { animation: bosscard 1.6s cubic-bezier(.2,.9,.25,1) both; }
.bosscard.quick { animation-duration: .9s; }
@keyframes bosscard { 0% { opacity: 0; transform: translateX(40px); } 15% { opacity: 1; transform: translateX(0); } 85% { opacity: 1; } 100% { opacity: 0; } }
.bosscard .avatar { width: 26%; max-width: 150px; height: auto; aspect-ratio: 1; border-radius: 6px; box-shadow: 0 0 0 3px var(--accent), 0 10px 30px rgba(0,0,0,.7); background: #000; }
.bosscard .avatar img, .bosscard .avatar canvas { border-radius: 4px; }
.bosscard .txt { flex: 0 1 auto; min-width: 0; padding: 6px 56px 8px 14px; background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.6) calc(100% - 56px), transparent); border-left: 5px solid var(--accent); }
.bosscard .name { font-family: var(--font-display); font-size: clamp(1.3rem, 6.4vw, 2rem); letter-spacing: .04em; text-transform: uppercase; color: #fff; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bosscard .title { font-family: var(--font-brush); font-size: clamp(.85rem, 3.6vw, 1.05rem); color: var(--accent2); margin-top: 3px; }
.bosscard .tag { font-family: var(--font-display); font-size: .62rem; letter-spacing: .14em; color: #fff; opacity: .7; }
/* On a phone a long Ultimate or boss name wraps onto a second line instead of being cut short. */
@media (max-width: 640px) {
  .namecard { height: auto; max-height: none; padding-top: 5px; padding-bottom: 5px; max-width: calc(100% + 20px); }
  .namecard .avatar { height: 40px; }
  .namecard .what { white-space: normal; text-overflow: clip; }
  .bosscard .name { white-space: normal; text-overflow: clip; }
}
/* Victory / defeat beat over the stage */
.endcard { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; z-index: 4; }
.endcard.show { animation: endcard 1.3s ease-out both; }
@keyframes endcard { 0% { opacity: 0; transform: scale(1.5); } 15% { opacity: 1; transform: scale(.98); } 22% { transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } }
.endcard .big { font-family: var(--font-display); font-size: clamp(2.2rem, 12vw, 4.4rem); letter-spacing: .1em; text-transform: uppercase; color: #fff; -webkit-text-stroke: 2px #000; text-shadow: 0 6px 0 rgba(0,0,0,.6), 0 0 30px rgba(0,0,0,.8); }
.endcard.win .big { color: #ffd66b; text-shadow: 0 6px 0 rgba(0,0,0,.6), 0 0 40px rgba(255,214,107,.7); }
.endcard.lose .big { color: #ff6b6b; }
/* Dialogue (Phase 5): a paper box on a wooden frame, the speaker's portrait beside it. */
.caption { position: absolute; left: 0; right: 0; top: 0; padding: 6px 12px; background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,0)); color: #fff; font-family: var(--font-brush); font-size: .95rem; text-align: center; text-shadow: 0 1px 2px #000; z-index: 2; }
.dlg { position: absolute; left: 3%; right: 3%; bottom: 4%; display: flex; gap: 8px; align-items: flex-end; z-index: 3; pointer-events: auto; }
.dlg.right { flex-direction: row-reverse; }
.dlg .avatar { width: 22%; max-width: 128px; height: auto; aspect-ratio: 1; }
.dlg .box { position: relative; flex: 1; min-width: 0; min-height: 78px; padding: 18px 12px 12px; border-radius: 10px; background: linear-gradient(180deg, var(--paper), var(--paper2)); color: var(--paper-ink); border: 3px solid var(--wood); box-shadow: 0 10px 30px rgba(0,0,0,.55); font-size: .9rem; line-height: 1.35; font-weight: 650; }
html[data-era="p2"] .dlg .box { background: linear-gradient(180deg, #1b2230, #11161f); color: var(--text); border: 2px solid var(--steel2); border-radius: 4px; }
.dlg .name { position: absolute; top: -13px; left: 10px; padding: 2px 10px; border-radius: 6px; background: var(--wood); color: var(--paper); font-family: var(--font-display); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; border: 2px solid var(--wood2); }
.dlg.right .name { left: auto; right: 10px; }
html[data-era="p2"] .dlg .name { background: var(--accent); color: #fff; border-color: #ff8a94; }
.dlg .next { position: absolute; right: 10px; bottom: 6px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--wood); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.dlg-ctl { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; z-index: 3; pointer-events: auto; }
.dlg-ctl .btn { min-height: 44px; padding: 4px 12px; font-size: .78rem; background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.25); color: #fff; }
.dlg-ctl .btn.on { border-color: var(--accent2); color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2) inset; }
/* The scene layer (js/ui/Dialogue.js): inside a stage, or a full-screen veil for the map's and the screens' scenes. */
.scene { position: absolute; inset: 0; z-index: 6; pointer-events: auto; touch-action: manipulation; }
.scene.scene-veil { position: fixed; z-index: 70; background: rgba(4,6,10,.8); backdrop-filter: blur(3px); animation: fadeIn var(--t) ease-out; }
.scene.scene-veil .dlg { left: 50%; right: auto; transform: translateX(-50%); width: min(720px, 94vw); bottom: max(8%, calc(var(--safe-b) + 16px)); }
.scene.scene-veil .caption { top: 24%; background: none; font-size: clamp(1.1rem, 4.6vw, 1.5rem); padding: 10px 24px; }
.scene .caption { font-size: clamp(.9rem, 3.8vw, 1.1rem); padding: 10px 16px 18px; }
.scene .dlg .text { min-height: 2.7em; white-space: pre-wrap; }
.scene .dlg .box.pop { animation: popIn .25s ease-out; }
.scene .dlg .avatar { flex: 0 0 auto; }
.scene .dlg .avatar.lg { width: 22%; max-width: 128px; height: auto; }
.scene .hidden { display: none; }
/* A battle's scene plays in the message panel under the stage (js/ui/BattleScreen.js), not over the fight:
   the caption across the top, the speaker and the box, Auto and Skip at the side. */
.binfo .scene { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: start; gap: 6px 8px; padding: 16px max(10px, calc((100% - 960px) / 2)) 8px; background: var(--bg2); }
.binfo .scene .caption { position: static; grid-column: 1; grid-row: 1; background: none; padding: 0 0 2px; text-align: left; }
.binfo .scene .caption.hidden { display: none; }
.binfo .scene .dlg { position: static; grid-column: 1; grid-row: 2; min-height: 0; align-items: flex-start; }
.binfo .scene .dlg .avatar, .binfo .scene .dlg .avatar.lg { width: clamp(60px, min(18vw, calc(var(--panel-min, 110px) - 28px)), 112px); height: auto; max-width: none; aspect-ratio: 1; }
.binfo .scene .dlg .box { min-height: 72px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.binfo .scene .dlg-ctl { position: static; grid-column: 2; grid-row: 2; flex-direction: column; align-self: end; }
.binfo .scene .caption:not(.hidden) ~ .dlg-ctl { grid-row: 1; align-self: center; flex-direction: row; }
.binfo .scene .dlg-ctl .btn { min-height: 40px; }
/* A coach tip with a teacher: the portrait and the name over the text (js/ui/BattleScreen.js, TeamBuilderScreen.js). */
.onboard .who, .coach .who { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
.onboard .who .avatar, .coach .who .avatar { width: 32px; height: 32px; }
/* The Wiki's story log */
.wline { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; }
.wline .avatar { flex: 0 0 auto; }
.wline.right { flex-direction: row-reverse; text-align: right; }
.wline .nm { font-family: var(--font-display); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent2); }
.wline .tx { margin-top: 2px; }
.wcap { text-align: center; font-family: var(--font-brush); font-size: 1.05rem; color: var(--muted); margin: 12px 0 6px; }
.wscene + .wscene { margin-top: 14px; }
.wscene h3 .pill { margin-left: 8px; }
.dlg-ctl .btn.on { background: var(--accent); color: var(--primary-ink); border-color: var(--accent); }

/* Story map: the arc's stage behind the battle pins (js/ui/StoryMapScreen.js). */
.arc-card h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; font-size: 1.05rem; }
.arc-card { border-color: var(--wood2); }
html[data-era="p2"] .arc-card { border-color: var(--line); }
.map-stage { position: relative; margin: 8px 0 16px; aspect-ratio: 16 / 10; max-height: 460px; border-radius: 12px; overflow: hidden; border: 2px solid var(--wood); background: #000; }
html[data-era="p2"] .map-stage { border: 1px solid var(--steel2); border-radius: 6px; }
.map-stage canvas.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45)); pointer-events: none; }
.map-stage svg.path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.map-stage .pin { position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1rem; background: var(--paper); color: var(--paper-ink); border: 3px solid var(--wood); box-shadow: 0 4px 10px rgba(0,0,0,.6); z-index: 2; cursor: pointer; padding: 0; }
.map-stage .pin.boss { width: 56px; height: 56px; }
.map-stage .pin.boss .ico { width: 26px; height: 26px; color: #7a2a00; }
.map-stage .pin.cleared { background: #1f6b43; color: #d9ffe6; border-color: #0f3b24; }
.map-stage .pin.cleared .ico { color: #d9ffe6; }
.map-stage .pin.current { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,138,61,.35), 0 0 18px var(--accent), 0 4px 10px rgba(0,0,0,.6); animation: pinPulse 1.6s infinite; }
@keyframes pinPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08); } }
.map-stage .pin.locked { background: #3a3f46; color: #8a93a0; border-color: #202429; filter: grayscale(1); }
.map-stage .pin.selected { box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 4px 10px rgba(0,0,0,.6); }
.map-stage .pin .lbl { position: absolute; top: 105%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font); font-size: .62rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px #000; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.map-stage .pin .rec { position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .58rem; font-weight: 900; color: var(--accent2); text-shadow: 0 1px 2px #000; font-family: var(--font); }
.map-stage .pin .hint { position: absolute; top: 105%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font); font-size: .58rem; font-weight: 800; color: var(--warn); text-shadow: 0 1px 2px #000; }
html[data-era="p2"] .map-stage .pin { background: #1b2230; color: #fff; border-color: var(--steel2); }
html[data-era="p2"] .map-stage .pin.boss .ico { color: var(--accent2); }
.map-stage .stage-name { position: absolute; left: 10px; top: 8px; z-index: 2; font-family: var(--font-brush); font-size: .9rem; color: #fff; text-shadow: 0 1px 2px #000, 0 0 8px #000; pointer-events: none; }
.enemy-row .avatar { --ring: #ff6b6b; }
@media (max-width: 480px) { .map-stage .pin { width: 40px; height: 40px; font-size: .9rem; } .map-stage .pin.boss { width: 50px; height: 50px; } .map-stage .pin .lbl { max-width: 76px; } }

/* Summon: the ceremony stage and the tiered reveal cards (js/ui/SummonScreen.js). */
.pull-overlay { background: radial-gradient(circle at 50% 45%, #2a1f14, #0a0705 70%); }
html[data-era="p2"] .pull-overlay { background: radial-gradient(circle at 50% 45%, #1b2230, #06080c 70%); }
.ceremony { position: relative; width: min(560px, 94vw); aspect-ratio: 9 / 13; max-height: 72vh; margin: 0 auto; overflow: hidden; border-radius: 16px; }
.ceremony canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.kage-card { position: absolute; left: 8%; right: 8%; top: 6%; bottom: 14%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; opacity: 0; pointer-events: none; z-index: 3; }
.kage-card.show { animation: kage 4.2s ease-out both; }
@keyframes kage { 0% { opacity: 0; transform: scale(1.15); } 10% { opacity: 1; transform: scale(1); } 88% { opacity: 1; } 100% { opacity: 0; } }
.kage-card .avatar { width: 72%; max-width: 300px; height: auto; aspect-ratio: 1; border-radius: 14px; box-shadow: 0 0 0 4px var(--r-kage), 0 0 0 7px #3b2a00, 0 0 40px rgba(255,197,61,.8), 0 20px 50px rgba(0,0,0,.6); }
.kage-card .avatar img, .kage-card .avatar canvas { border-radius: 12px; }
.kage-card .plate { width: 90%; padding: 8px 10px; text-align: center; background: linear-gradient(180deg, #ffd66b, #d99a1f); color: #2a1d02; border-radius: 8px; border: 2px solid #7a5300; }
.kage-card .plate .nm { font-family: var(--font-display); font-size: clamp(1.2rem, 6vw, 1.6rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.kage-card .plate .ti { font-family: var(--font-brush); font-size: .95rem; margin-top: 2px; }
.reveal-card .nm { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; font-size: .84rem; }
.reveal-card.kage::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, rgba(255,197,61,0) 0 40%, rgba(255,240,180,.35) 50%, rgba(255,197,61,0) 60% 100%); animation: spinRay 3s linear infinite; pointer-events: none; }
.reveal-card > * { position: relative; }
@keyframes spinRay { to { transform: rotate(360deg); } }
.reveal-card.new::after { content: 'NEW'; position: absolute; right: 6px; top: 6px; font-family: var(--font-display); font-size: .62rem; letter-spacing: .1em; padding: 2px 6px; border-radius: 6px; background: var(--accent); color: var(--primary-ink); }

/* Screen transitions and the small flourishes */
.screen.enter { animation: screenIn .28s cubic-bezier(.2,.8,.2,1); }
.pop { animation: popIn .3s cubic-bezier(.2,.9,.3,1.3) both; }
.bump { animation: bump .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
.shine { position: relative; overflow: hidden; }
.shine::after { content: ''; position: absolute; top: -50%; bottom: -50%; left: -30%; width: 40%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: shine 1.1s ease-out both; pointer-events: none; }
@keyframes shine { from { left: -40%; } to { left: 130%; } }
.levelup { animation: levelUp .6s cubic-bezier(.2,.9,.3,1.4); }
@keyframes levelUp { 0% { box-shadow: 0 0 0 0 rgba(255,214,107,.8); } 60% { box-shadow: 0 0 0 10px rgba(255,214,107,0); } 100% { box-shadow: 0 0 0 0 rgba(255,214,107,0); } }
@media (prefers-reduced-motion: reduce) {
  /* The overlays simply appear and go (the screen removes .show after the hold). */
  .namecard.show, .readout.show, .bosscard.show, .endcard.show, .kage-card.show { animation: none !important; opacity: 1; }
  .speedlines.show { animation: none !important; opacity: 0; }
  .reveal-card.kage::before, .map-stage .pin.current { animation: none; }
}