:root {
  color-scheme: dark;
  --ink: #f6f1ff;
  --muted: #9ca5c3;
  --panel: rgba(20, 25, 50, .9);
  --panel-2: rgba(31, 37, 70, .94);
  --line: rgba(173, 186, 255, .18);
  --gold: #ffd36e;
  --pink: #ff74a6;
  --cyan: #62e7ef;
  --green: #74e3a7;
  --red: #ff6d7e;
  --shadow: 0 18px 55px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #0b0e1d; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  background:
    radial-gradient(circle at 18% 12%, rgba(92, 61, 150, .35), transparent 33rem),
    radial-gradient(circle at 88% 75%, rgba(22, 133, 150, .2), transparent 28rem),
    linear-gradient(155deg, #17142c 0%, #0c1021 52%, #08131d 100%);
}

button { font: inherit; }

.noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .16;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.035) 3px 4px);
  z-index: 10;
}

#app { width: min(1180px, 100%); margin: 0 auto; min-height: 100vh; padding: 22px; }

#app:has(.title-screen) { width:min(1440px,100%); padding:clamp(10px,2vw,28px); display:grid; align-items:center; }
.title-screen { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#0c1327; box-shadow:var(--shadow); }
.title-illustration { position:relative; }
.title-illustration img { display:block; width:100%; height:auto; image-rendering:pixelated; }
.title-logo { position:absolute; top:6%; left:9%; color:#fff5d9; text-shadow:0 3px 0 #12243d,0 0 18px #071329; }
.title-logo p { margin:0 0 8px; font-size:clamp(.875rem,1.5vw,1.125rem); letter-spacing:.3em; color:var(--gold); }
.title-logo h1 { font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(1.8rem,4.7vw,4.25rem); line-height:1.3; letter-spacing:.04em; margin:0 0 10px; }
.title-logo span { font-size:clamp(.875rem,1.6vw,1.125rem); letter-spacing:.12em; }
.title-menu { padding:22px 20px 18px; text-align:center; border-top:1px solid rgba(255,211,110,.3); }
.title-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.title-actions button { width:min(260px,100%); min-height:52px; font-size:1.125rem; letter-spacing:.12em; }
.title-actions button:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.title-save-note { margin:16px auto 12px; max-width:650px; color:#c3cbe0; font-size:.875rem; line-height:1.7; }
.title-version { color:var(--muted); font-size:.8125rem; }
@media(max-width:600px) {
  .title-illustration { display:flex; flex-direction:column-reverse; }
  .title-logo { position:static; padding:24px 16px 22px; text-align:center; background:linear-gradient(150deg,#142748,#0c1327); }
  .title-logo h1 { font-size:clamp(1.5rem,7vw,2.5rem); }
  .title-logo p { letter-spacing:.2em; }
  .title-logo span { letter-spacing:.04em; }
  .title-menu { padding:22px 16px; }
  .title-actions { flex-direction:column; align-items:center; }
  .title-actions button { width:100%; max-width:360px; }
}

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand h1 { margin: 0; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: .08em; }
.brand small { color: var(--gold); font-weight: 800; letter-spacing: .16em; }
.brand-area{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-width:0}
.se-toggle{min-height:44px;padding:8px 10px;font-size:.75rem;white-space:nowrap}
.se-toggle[aria-pressed="true"]{color:var(--cyan);border-color:#62e7ef66}
.title-sound{margin-top:12px}
.audio-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.title-sound .audio-controls{justify-content:center}
@media(max-width:540px){.brand-area{flex-direction:column;align-items:flex-start;gap:5px}.brand-area .se-toggle{min-height:44px}}
.turn-chip, .resource-chip { border: 1px solid var(--line); background: rgba(8,12,27,.72); padding: 8px 12px; border-radius: 6px; font-weight: 800; }
.resource-row { display: flex; gap: 8px; flex-wrap: wrap; }
.turn-progress { display:grid; gap:2px; border-color:var(--cyan); }
.turn-progress small { font-size:.72rem; font-weight:600; color:var(--cyan); }
.turn-urgent { --turn-accent:#ffd476; }
.turn-final { --turn-accent:#ff8caf; }
.turn-progress:is(.turn-urgent,.turn-final) { border-color:var(--turn-accent); }
.turn-progress:is(.turn-urgent,.turn-final) small { color:var(--turn-accent); }
.turn-intro { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:20px; pointer-events:none; background:rgba(5,9,24,.42); animation:turn-intro-fade 2.6s ease both; }
.turn-intro-card { display:grid; gap:12px; width:min(100%,420px); padding:30px 24px; text-align:center; background:linear-gradient(145deg,#242d4b,#0c1127); border:1px solid var(--turn-accent,var(--cyan)); border-radius:12px; box-shadow:0 16px 60px #05081899; animation:turn-intro-rise 2.6s ease both; }
.turn-intro-area { color:#b9c5e2; font-size:.8rem; letter-spacing:.12em; }
.turn-intro-number { color:#fff; font-size:clamp(2rem,8vw,3.2rem); line-height:1.2; }
.turn-intro-remaining { color:var(--turn-accent,var(--cyan)); font-size:clamp(1.4rem,6vw,2rem); }
.turn-intro-card small { color:#b9c5e2; font-size:.78rem; }
@keyframes turn-intro-fade { 0% { opacity:0; } 10%,82% { opacity:1; visibility:visible; } 100% { opacity:0; visibility:hidden; } }
@keyframes turn-intro-rise { 0% { transform:translateY(12px); } 12%,100% { transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .turn-intro-card { animation:none; } .turn-intro { animation:turn-intro-fade 2.6s steps(1,end) both; } }

.panel {
  background: linear-gradient(180deg, rgba(30,35,67,.95), rgba(14,18,38,.96));
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.save-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;margin-bottom:18px;border-color:#ffd36e66}
.save-panel h2{font-size:1.25rem;margin:5px 0 10px}.save-panel p{margin:6px 0;line-height:1.6}.save-panel small,.save-info small{color:var(--muted);font-size:.875rem;line-height:1.7}
.memory-list{margin-top:20px;border-top:1px solid var(--line);padding-top:8px}.memory-list h4{margin:10px 0;font-size:1rem}.memory-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.memory-row strong{display:block;font-size:1rem}.memory-row small{display:block;margin-top:5px;color:var(--muted);font-size:.875rem;line-height:1.6}.memory-row.unlocked strong{color:var(--gold)}.memory-row button{white-space:nowrap;font-size:.875rem;padding:9px 12px;min-height:44px}.memory-locked{font-size:.875rem;color:var(--muted);white-space:nowrap}.memory-note{font-size:.875rem;color:var(--muted);line-height:1.6}
.save-panel .primary{width:auto;min-width:150px}.save-actions{display:flex;flex-direction:column;gap:8px}.save-info p{margin:0 0 7px;color:var(--gold);line-height:1.6}.save-info button{width:100%;margin-top:12px}.save-result{font-size:.875rem;color:var(--muted)}
@media(max-width:600px){.save-panel{align-items:stretch;flex-direction:column;padding:16px;gap:12px}.save-panel .primary{width:100%}}

.intro { padding: 18px 20px 14px; margin-bottom: 18px; position: relative; overflow: hidden; }
.intro::before { content: ""; position: absolute; width: 140px; height: 140px; right: -45px; top: -60px; transform: rotate(45deg); border: 18px solid rgba(255,211,110,.13); }
.eyebrow { color: var(--cyan); font-size: .75rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.intro h2 { margin: 5px 0 6px; font-size: clamp(1.25rem, 3vw, 2rem); }
.intro p { color: var(--muted); margin: 0; line-height: 1.75; max-width: 70ch; }

.lineup {
  width: 100%; max-height: 330px; object-fit: contain; object-position: center bottom;
  image-rendering: pixelated; filter: drop-shadow(0 16px 12px rgba(0,0,0,.45));
}

.selection-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, .7fr); gap: 16px; }
.roster { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.char-card {
  --accent: var(--pink); position: relative; overflow: hidden; min-height: 250px; padding: 0;
  color: var(--ink); text-align: left; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, rgba(38,45,82,.98), rgba(18,22,45,.98)); cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.char-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 70%, white); }
.char-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent), 0 14px 35px rgba(0,0,0,.32); }
.char-card.awakened { background: linear-gradient(180deg, rgba(39,59,100,.98), rgba(18,22,45,.98)); }
.char-card.awakened .portrait { filter: brightness(1.08) drop-shadow(0 0 12px rgba(116,185,255,.3)); }
.bond-mark { color: var(--gold); font-size: .8rem; }
.char-card.selected::after { content: "編成中"; position: absolute; top: 8px; right: 8px; background: var(--accent); color: #101426; padding: 4px 8px; font-size: .72rem; font-weight: 900; border-radius: 4px; }
.portrait { height: 150px; background-image: url('./assets/character-lineup.png'); background-repeat: no-repeat; background-size: 600% auto; background-position-y: center; image-rendering: pixelated; }
.char-copy { padding: 10px 12px 12px; }
.char-copy h3 { margin: 0; font-size: 1rem; }
.role { color: var(--accent); font-size: .76rem; font-weight: 900; margin-top: 3px; }
.hook { color: var(--muted); font-size: .8rem; line-height: 1.55; margin: 8px 0 0; }

.squad-panel { padding: 16px; align-self: start; position: sticky; top: 14px; }
.squad-panel h3 { margin: 0 0 12px; }
.squad-open { width:100%; margin-top:12px; }
.reserve-note { color:var(--muted); font-size:.78rem; line-height:1.7; margin:12px 0 0; }
.squad-vitals { font-size:.78rem; color:var(--ink); margin:12px 0 6px; }
.squad-actions { display:grid; gap:10px; margin-top:18px; }
.operation-squad .char-card { min-height:310px; }
.operation-squad .char-copy small { font-size:.74rem; }
.operation-unit { min-width:0; display:flex; flex-direction:column; gap:8px; }
.operation-unit .char-card { width:100%; flex:1; }
.operation-release { padding:10px; border:1px solid var(--line); border-radius:8px; background:rgba(5,9,22,.35); }
.operation-release p { margin:0 0 8px; color:var(--muted); font-size:.75rem; overflow-wrap:anywhere; }
.operation-release button { width:100%; min-height:44px; padding:10px 8px; }
.squad-release-preview { margin-top:14px; padding:12px; border:1px solid var(--gold); border-radius:8px; background:rgba(90,65,20,.15); }
.squad-release-preview h4 { margin:0 0 8px; color:var(--gold); font-size:.875rem; }
.squad-release-preview p { margin:8px 0 0; font-size:.78rem; line-height:1.6; }
.squad-release-preview span { display:block; color:var(--muted); }
.squad-slot { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px; margin: 7px 0; border: 1px dashed var(--line); border-radius: 7px; background: rgba(5,9,22,.35); }
.squad-num { width: 28px; height: 28px; border-radius: 4px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--gold); font-weight: 900; }
.squad-name { font-weight: 900; }
.squad-skill { color: var(--muted); font-size: .73rem; margin-top: 2px; }
.quote { min-height: 66px; margin: 12px 0; padding: 11px; color: #d8dcf0; background: rgba(7,10,23,.55); border-left: 3px solid var(--pink); font-size: .86rem; line-height: 1.6; }

.primary, .secondary, .command, .region, .tiny-btn {
  border: 0; border-radius: 6px; cursor: pointer; font-weight: 900; transition: filter .15s, transform .15s;
}
.primary { width: 100%; padding: 13px 16px; background: linear-gradient(135deg, var(--gold), #ff9c62); color: #171221; }
.secondary { padding: 10px 14px; color: var(--ink); background: #313858; border: 1px solid var(--line); }
.primary:hover, .secondary:hover, .command:hover, .tiny-btn:hover { filter: brightness(1.12); }
.primary:active, .secondary:active, .command:active, .tiny-btn:active { transform: translateY(1px); }
button:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.4); transform: none !important; }

.sortie-briefing { overflow:hidden; }
.sortie-heading { padding:24px; min-height:175px; background:#1b2942; }
.sortie-heading.sortie-street { background:linear-gradient(90deg,#10182def,#10182d80),url('./assets/seventh-street.png') center top / cover; }
.sortie-heading.sortie-canal-quay { background:linear-gradient(90deg,#10182def,#10182d80),url('./assets/canal-quay.png') center top / cover; }
.sortie-heading.sortie-canal-gate { background:linear-gradient(90deg,#10182def,#10182d80),url('./assets/canal-gate.png') center top / cover; }
.sortie-heading.sortie-hq { background:linear-gradient(90deg,#10182def,#10182d80),url('./assets/seventh-hq.png') center top / cover; }
.sortie-heading h2 { font-size:clamp(1.5rem,4vw,2rem); margin:8px 0; }
.sortie-heading h2:focus { outline:none; }
.sortie-heading p { font-size:1rem; color:#d4dfef; margin:0; line-height:1.6; }
.sortie-content { padding:clamp(16px,3vw,28px); }
.sortie-intel { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sortie-section { min-width:0; padding:18px; border:1px solid var(--line); border-radius:10px; background:#10172bcc; }
.sortie-section h3 { font-size:1.125rem; margin:0 0 14px; }
.sortie-section h3>span { font-size:.875rem; color:#b9c9df; font-weight:500; margin-left:8px; }
.sortie-enemies { border-collapse:collapse; width:100%; font-size:1rem; }
.sortie-enemies caption { text-align:left; font-size:.875rem; color:#b9c9df; margin-bottom:10px; }
.sortie-enemies th,.sortie-enemies td { padding:10px 6px; border-bottom:1px solid var(--line); text-align:right; }
.sortie-enemies th:first-child { text-align:left; font-weight:600; }
.sortie-enemies thead th { font-size:.875rem; color:#c2cce0; }
.sortie-enemies img { height:36px; width:28px; object-fit:cover; object-position:top; vertical-align:middle; margin-right:6px; }
.sortie-rewards dl { display:flex; flex-wrap:wrap; gap:16px 30px; margin:0 0 16px; }
.sortie-rewards dt { color:#c2cce0; font-size:.875rem; }
.sortie-rewards dd { color:var(--gold); font-size:1.5rem; font-weight:800; margin:4px 0 0; }
.sortie-rewards p { font-size:1rem; line-height:1.7; margin:0 0 10px; }
.sortie-rewards small { color:#b9c9df; display:block; font-size:.875rem; line-height:1.6; }
.sortie-squad { margin-top:18px; }
.sortie-members { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.sortie-member { display:flex; gap:10px; align-items:center; padding:12px; background:#202b42; border:1px solid #5b719343; border-radius:8px; min-width:0; }
.sortie-member.wounded { border-color:#e7808f; }
.sortie-member .roster-thumb { flex:0 0 52px; width:52px; height:76px; }
.sortie-member-copy { min-width:0; flex:1; }
.sortie-member h4 { font-size:1rem; margin:0; }
.sortie-member h4>span { color:var(--gold); }.sortie-member h4 small { font-size:.875rem; font-weight:500; }
.sortie-member p { font-size:.875rem; line-height:1.6; color:#c7d3e7; margin:6px 0 0; overflow-wrap:anywhere; }
.sortie-member .sortie-condition { color:#eef3fc; }.sortie-member.wounded .sortie-condition { color:#ffb2be; }
.sortie-member .meter { margin-top:6px; }
.sortie-warning { margin-top:18px; padding:16px; border:1px solid #f483995c; border-radius:8px; background:#50273866; font-size:1rem; }
.sortie-warning strong { color:#ffa8b8; }.sortie-warning p { margin:6px 0 0; line-height:1.6; }
.sortie-actions { margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
.sortie-actions p { color:#bbc9df; font-size:.875rem; line-height:1.6; margin:0 0 12px; }
.sortie-actions>div { display:flex; justify-content:flex-end; gap:12px; }.sortie-actions button { min-height:48px; font-size:1rem; }
.sortie-actions .primary { width:auto; min-width:180px; }
@media(max-width:1000px){.sortie-members{grid-template-columns:1fr}.sortie-member .roster-thumb{flex-basis:68px;width:68px}}
@media(max-width:650px){.sortie-intel{grid-template-columns:1fr}.sortie-heading{padding:20px;min-height:155px}.sortie-section{padding:14px}.sortie-actions>div{flex-direction:column-reverse}.sortie-actions button{width:100%}}

.game-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .65fr); gap: 16px; }
.operation-preparation{padding:16px;margin-bottom:16px}
.preparation-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin-bottom:12px}
.preparation-heading small{color:var(--muted);font-size:.75rem;line-height:1.5}
.preparation-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.preparation-actions button{min-width:0;min-height:64px;display:grid;gap:5px;padding:10px;text-align:left;white-space:normal;overflow-wrap:anywhere}
.preparation-actions strong{font-size:1rem;color:var(--gold)}
.preparation-actions span{font-size:.75rem;line-height:1.5;color:#cbd3e9}
.preparation-actions button:disabled strong,.preparation-actions button:disabled span{color:var(--muted)}
.operation-preparation .threat-card{margin-top:14px}
.threat-actions{display:flex;flex-wrap:wrap;gap:10px}
.threat-actions button{min-height:44px;flex:1 1 180px}
.equipment-preparation{margin:14px 0;padding:14px;border:1px solid #ab915c80;border-radius:8px;background:#342d2033;line-height:1.6}
.equipment-preparation>strong{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;color:var(--gold)}
.equipment-preparation small,.equipment-preparation p{font-size:.8125rem;color:#cbd3e9}
.equipment-preparation p{margin:8px 0 12px}
.equipment-preparation button{width:100%;min-height:44px}
.unit-equipment{margin:7px 0;color:var(--gold);font-size:.8125rem;line-height:1.5}
@media(max-width:540px){.operation-preparation{padding:12px}.preparation-actions{gap:6px}.preparation-actions button{padding:9px 7px}.preparation-actions span{font-size:.7rem}}
.map-panel { min-width:0; padding:0; align-self:start; overflow:hidden; }
.policy-future{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:.8125rem;line-height:1.6;color:#e9d9b3}
.civic-map{padding:18px;border-top:1px solid var(--line);background:#111d28}
.civic-map-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.civic-map-heading h3{margin:0;font-size:1rem}.civic-map-heading small{color:var(--muted);font-size:.8125rem;line-height:1.5}
.civic-map-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.civic-place{display:flex;gap:12px;padding:10px;min-height:100px;min-width:0;text-align:left;background:#17273a;border:1px solid var(--line);border-radius:9px;color:var(--ink);font:inherit;cursor:pointer}
.civic-place:hover{border-color:var(--gold)}.civic-place:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.civic-place>span{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.civic-place strong{font-size:.875rem}.civic-place b{color:#f5dba2;font-size:.8125rem;font-weight:500;line-height:1.5}.civic-place small{color:#b8c6d5;font-size:.75rem;line-height:1.5}.civic-place em{font-size:.75rem;color:var(--cyan);font-style:normal;margin-top:5px}
.civic-scene{position:relative;min-width:0;min-height:120px;border-radius:7px;overflow:hidden;background:linear-gradient(#12213040,#10213099),var(--civic-art) center/cover;image-rendering:pixelated}
.civic-place .civic-scene{width:100px;min-height:90px;flex-shrink:0}
.civic-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#f0c47b28);pointer-events:none}
.civic-lanterns{position:absolute;inset:25% 16% auto;display:flex;justify-content:space-between}
.civic-lanterns i{width:7px;height:10px;background:#6c6f75;border:2px solid #353a42}
.civic-rebuild .civic-lanterns i{background:#ffdda5;border-color:#956c3d;box-shadow:0 0 14px 5px #ffc57680}
.civic-relief .civic-lanterns i{background:#c0efdf;border-color:#5c9482;box-shadow:0 0 10px 3px #81efc64d}
.civic-people{position:absolute;bottom:24%;left:18%;right:18%;display:flex;justify-content:space-around;align-items:end}
.civic-people i{position:relative;width:7px;height:10px;background:#8ea4c6;border-radius:1px;box-shadow:0 3px 0 -1px #39485c}
.civic-people i::before{content:'';position:absolute;top:-4px;left:1px;width:5px;height:4px;background:#d4b29d}
.civic-people i:nth-child(2){height:8px;background:#b78587}.civic-people i:nth-child(3){background:#ceb078}
.civic-distant .civic-people{left:auto;right:15%;width:25%}.civic-distant .civic-people i:nth-child(n+2){display:none}
.civic-distant::after{background:linear-gradient(transparent,#11152288)}
.civic-crates{position:absolute;bottom:24%;left:13%;display:none;gap:3px}.civic-crates i{width:13px;height:10px;background:#95754f;border:2px solid #d0b080;box-shadow:inset 2px 0 #513a29}
.civic-requisition .civic-crates,.civic-resupply .civic-crates{display:flex}
.civic-resupply .civic-people{left:50%;right:8%}.civic-resupply .civic-lanterns i{background:#a8cedb}
.civic-scene-tag{position:absolute;left:8px;bottom:7px;z-index:1;font-size:.75rem;padding:3px 5px;background:#0b152cd9;border-radius:3px;color:#fff0cf}
.civic-detail{display:grid;grid-template-columns:minmax(140px,.65fr) minmax(0,1.35fr);gap:16px;padding:14px;margin:14px 0 20px;border:1px solid var(--line);border-radius:9px;background:#101f2e}
.civic-detail h4{font-size:1rem;color:#f5dba2;margin:6px 0 10px}.civic-detail p{font-size:.875rem;line-height:1.7;margin:8px 0}
.civic-resident{border-left:2px solid #b9a56b;padding-left:12px;margin-top:14px}.civic-resident small{display:block;color:var(--muted);font-size:.75rem;line-height:1.6}.civic-resident strong{display:block;font-size:.8125rem;margin-top:6px;color:#d9e4eb}
.civic-relationship{display:inline-block;font-size:.75rem;color:#bceadc;margin-bottom:6px}
.civic-action{padding:16px;margin:14px 0 20px;border:1px solid #dbc18b80;border-radius:8px;background:#3a302b55}
.civic-action>strong{display:block;color:var(--gold)}.civic-action p{font-size:.875rem;line-height:1.7}.civic-action button{min-height:44px;width:100%;white-space:normal}
.civic-later{margin-top:18px;min-height:44px}.civic-place-pending{border-color:#dbc18b70}.civic-awaiting{filter:saturate(.65)}
.civic-route-note{color:#efbda1}.civic-unsettled{font-size:.875rem;color:var(--muted);line-height:1.7}
.civic-defense,.civic-outcome{margin:14px 0;padding:14px;border:1px solid #70b1a855;border-radius:8px;background:#19352e55;text-align:left}
.civic-defense strong,.civic-outcome strong{color:#bceadc;font-size:.9375rem}.civic-defense p,.civic-outcome p{font-size:.875rem;line-height:1.7;margin:9px 0}.civic-defense small,.civic-outcome small{color:#d1dbe0;font-size:.8125rem;line-height:1.7;display:block}
.civic-outcome.civic-lost{border-color:#bb799455;background:#3c202755}.civic-lost strong{color:#f6bac9}
.map-canvas .region .region-life-lights{display:flex;position:absolute;right:6px;top:4px;gap:3px;margin:0}
.region-life-lights i{width:3px;height:4px;background:#c6a37e;box-shadow:0 0 3px #ffc77e60}
.civic-rebuild .region-life-lights i{background:#ffdb93;box-shadow:0 0 8px 2px #ffc77e80}.civic-relief .region-life-lights i{background:#a7e7cb}.civic-requisition .region-life-lights i{background:#a29b92;box-shadow:none}
.map-canvas .region.owned.civic-rebuild:not(.threatened):not(.supply-isolated){background:linear-gradient(135deg,#25413bf2,#4a3b25f2);box-shadow:inset 0 0 13px #dfb77724,0 4px 12px #0008}
.map-canvas .region.owned.civic-relief:not(.threatened):not(.supply-isolated){background:#20483ff2}
.map-canvas .region.owned.civic-requisition:not(.threatened):not(.supply-isolated){background:#353a40f2}
@media(max-width:760px){.civic-map{padding:14px}.civic-map-list{grid-template-columns:1fr}.civic-detail{grid-template-columns:1fr;padding:12px}.civic-detail>.civic-scene{min-height:145px}.civic-place .civic-scene{width:90px}.civic-defense,.civic-outcome{padding:12px}}
.map-title { padding:18px 18px 0; }
.map-title h2 { margin: 0; font-size: 1.15rem; }
.map-title p { color:#c1cbe0; font-size:.875rem; line-height:1.6; margin:8px 0 0; }
.map-legend { display:flex; flex-wrap:wrap; gap:8px 16px; padding:14px 18px 0; font-size:.875rem; }
.map-legend span { border-left:4px solid; padding-left:7px; }
.legend-owned { color:var(--cyan); }.legend-frontier { color:var(--gold); }.legend-enemy { color:#e3b0c5; }.legend-threat { color:#ff98a4; }
.map-scroll-hint { font-size:.875rem; color:#b0bfd6; margin:12px 18px; line-height:1.6; }
.map-viewport { width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-color:#6d829f #151e30; border-top:1px solid #788ba94d; }
.map-viewport:focus-visible { outline:3px solid var(--gold); outline-offset:-3px; }
.map-canvas { position:relative; width:100%; min-width:47.5rem; aspect-ratio:3/2; isolation:isolate; background:#26374a; }
.map-canvas.seventh-town-map { background-image:linear-gradient(#1020370d,#0a152b38),url('./assets/seventh-town.png'); background-size:100% 100%; background-repeat:no-repeat; }
.map-canvas.canal-waterway-map { background-image:linear-gradient(#1020370d,#0a152b38),url('./assets/canal-map.png'); background-size:100% 100%; background-repeat:no-repeat; }
.map-routes { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.route-bed { stroke:#091322aa; stroke-width:7px; }
.map-route { fill:none; stroke-width:3px; stroke-linecap:round; }
.map-route.secured { stroke:#71e9df; }.map-route.frontier { stroke:#ffdb86; stroke-dasharray:10 5; }.map-route.unreached { stroke:#d0becac4; stroke-dasharray:3 7; }.map-route.contested { stroke:#ff7b8d; stroke-dasharray:7 4; }
.map-canvas .region { position:absolute; width:7.625rem; min-height:4.875rem; padding:6px; transform:translate(-50%,-50%); color:#fff3f7; background:#2d2339f2; border:2px solid #b78da2; box-shadow:0 4px 12px #0008; z-index:2; font-size:.875rem; line-height:1.4; }
.map-canvas .region span { display:block; margin-top:2px; }
.map-canvas .region strong { display:block; font-size:.875rem; margin-top:2px; white-space:nowrap; }
.region-status { font-size:.875rem; font-weight:700; }
.region-detail { color:#e0d7e6; font-size:.75rem; font-weight:500; }
.map-canvas .region.owned { border-color:var(--cyan); background:#103c49f2; cursor:default; }
.map-canvas .region.garrison-available{cursor:pointer}.map-canvas .region.garrison-available:hover{filter:brightness(1.2)}.region-guard{font-size:.875rem;color:#9af6e6;font-weight:700}
.map-canvas.rescue-prison-map{background-image:linear-gradient(#1016230a,#08101c38),url('./assets/prison-map.png');background-size:100% 100%;background-repeat:no-repeat}
.rescue-progress{margin:16px 18px 0;padding:18px;display:grid;grid-template-columns:1.2fr 1fr;gap:18px;border:1px solid #bb8c5580;border-radius:10px;background:linear-gradient(125deg,#342923,#162330);line-height:1.7}
.rescue-progress h3{margin:5px 0;font-size:1.25rem;color:#ffda92}.rescue-progress p{margin:6px 0 0;font-size:1rem}
.rescue-route-status{display:flex;flex-direction:column;justify-content:center;gap:10px}.rescue-route-status>span{font-size:.875rem;color:#c1d0df}
.rescue-progress.route-broken{border-color:#ff7990;background:linear-gradient(125deg,#49242d,#1c2331)}
.evacuation-pips{display:flex;flex-wrap:wrap;gap:7px}.evacuation-pips span{padding:6px 10px;border:1px solid #607286;border-radius:5px;font-size:.875rem;color:#c2cddd}.evacuation-pips .complete{border-color:#7ae3cd;background:#224940;color:#bcffee}
.evacuation-marker{position:absolute;z-index:4;transform:translateX(-50%);display:grid;gap:3px;padding:9px 12px;background:#102d39ee;border:1px solid #8ce6d6;border-radius:8px;color:#b9fff2;pointer-events:none;box-shadow:0 4px 12px #0008;font-size:.875rem;white-space:nowrap}
.evacuation-marker span{font-size:.875rem;color:#d5e6ec}.rescue-adviser{border-color:#b28d54}.rescue-adviser p{line-height:1.7}.rescue-adviser>strong{display:block;color:#ffd290;font-size:.875rem;margin-top:12px}
.chapter-stage.chapter-rescue{background:linear-gradient(90deg,#151c2bed,#151c2bc4),url('./assets/prison-map.png') center/cover}.sortie-heading.sortie-rescue{background:linear-gradient(#0e152240,#0e1522c9),url('./assets/prison-battle.png') center/cover}
@media(max-width:760px){.rescue-progress{grid-template-columns:1fr;gap:12px;margin:12px 12px 0;padding:14px}}
.map-canvas .region.attackable { border-color:var(--gold); background:#453422f2; animation:pulse 1.9s infinite; }
.map-canvas .region.attackable:hover { filter:brightness(1.2); }
.map-canvas .region:focus-visible { outline:3px solid #fff; outline-offset:3px; z-index:3; }
.map-canvas .region.threatened { border-color:var(--red); background:#54243af5; animation:danger-pulse 1.15s infinite; }
.region.fortified:not(.owned) { box-shadow:inset 0 0 0 3px rgba(255,109,126,.16),0 7px 18px rgba(0,0,0,.35); }
.map-canvas .region.hq { width:8.125rem; }
.map-canvas .region:disabled { opacity:1; filter:none; transform:translate(-50%,-50%)!important; cursor:not-allowed; }
@media(prefers-reduced-motion:reduce){.map-canvas .region{animation:none!important;transition:none!important}}
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255,211,110,0), 0 0 24px rgba(255,211,110,.28); } }
@keyframes danger-pulse { 50% { box-shadow:0 0 0 9px rgba(255,109,126,0),0 0 28px rgba(255,82,112,.5); } }

.side-stack { display: grid; gap: 12px; align-content: start; }
.commander-card { display:grid; grid-template-columns:92px 1fr; gap:10px; min-height:118px; padding:10px; overflow:hidden; }
.commander-card img { width:100%; height:112px; object-fit:contain; object-position:center top; image-rendering:pixelated; filter:drop-shadow(0 8px 7px rgba(0,0,0,.45)); }
.commander-card h3 { margin:3px 0; font-size:1rem; }
.commander-card p { margin:4px 0 0; color:#d8dcef; font-size:.75rem; line-height:1.55; }
.side-card { padding: 14px; }
.side-card h3 { margin: 0 0 10px; font-size: 1rem; }
.side-title { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.side-title h3 { margin:0; }
.text-btn { padding:5px 7px; color:var(--cyan); cursor:pointer; border:0; border-bottom:1px solid rgba(98,231,239,.5); background:transparent; font-size:.72rem; font-weight:900; }
.unit-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.unit-row:last-child { border-bottom: 0; }
.unit-button { width:100%; color:var(--ink); text-align:left; cursor:pointer; border-left:0;border-right:0;border-top:0;background:transparent; }
.unit-button:hover { background:rgba(98,231,239,.055); }
.unit-row small { color: var(--muted); display: block; margin-top: 2px; }
.unit-row .courage { color: var(--gold); font-weight: 900; }
.level { color: var(--gold); font-weight: 900; }
.meter { height: 6px; margin-top: 5px; background: #090c19; border-radius: 10px; overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), #79ffb5); }
.mission { color: #d9ddef; font-size: .86rem; line-height: 1.6; }
.income-note { color:var(--gold); }
.shop-teaser { border-color:rgba(255,211,110,.34); background:linear-gradient(180deg,rgba(71,56,27,.55),rgba(18,22,43,.96)); }
.shop-open,.tiny-shop { width:100%; padding:10px; color:#171528; cursor:pointer; border:0; border-radius:5px; background:linear-gradient(135deg,var(--gold),#ff9c62); font-weight:900; }
.tiny-shop { margin-top:12px; }
.equipped-text { color:var(--gold); }
.threat-card { border-color:rgba(255,109,126,.55); background:linear-gradient(180deg,rgba(74,29,51,.95),rgba(24,18,37,.97)); }
.threat-card h3 { color:#ffd8df; }
.danger-btn { width:100%; padding:11px; border:0; border-radius:6px; color:white; background:linear-gradient(135deg,#e64562,#992c55); font-weight:900; cursor:pointer; }
.danger { color:white; background:#9d3153; border-color:#ff6d7e; }
.log-list { max-height: 150px; overflow: auto; margin: 0; padding: 0; list-style: none; font-size: .78rem; color: var(--muted); }
.log-list li { padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.06); }

.battle-stage { padding: 16px; }
.battle-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.battle-head h2 { margin: 0; font-size: 1.2rem; }
.battle-field { display: grid; grid-template-columns: 1fr 70px 1fr; gap: 10px; align-items: center; min-height: 355px; border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: radial-gradient(circle at 50% 50%, rgba(120,69,152,.27), transparent 50%), linear-gradient(180deg,#1d2445,#11152c); }
.team { display: grid; gap: 9px; }
.versus { color: var(--gold); font-size: 1.2rem; font-weight: 1000; text-align: center; }
.fighter { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; min-height: 94px; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(9,12,29,.74); transition: transform .15s, opacity .15s, border-color .15s; }
.fighter.target { border-color: var(--red); cursor: pointer; }
.fighter.target.selected-target { box-shadow: 0 0 0 2px rgba(255,109,126,.35); }
.fighter.acting { transform: translateX(7px); border-color: var(--gold); }
.enemy-team .fighter.acting { transform: translateX(-7px); }
.fighter.down { opacity: .28; filter: grayscale(1); }
.fighter.awakened { border-color: rgba(255,211,110,.5); box-shadow: inset 0 0 24px rgba(116,185,255,.08); }
.mini-portrait { width: 68px; height: 80px; background-image: url('./assets/character-lineup.png'); background-repeat: no-repeat; background-size: 600% auto; background-position-y: center; image-rendering: pixelated; }
.enemy-avatar { width: 66px; height: 66px; display: grid; place-items: center; font-size: 2rem; background: linear-gradient(135deg,#4b253a,#1d1830); border-radius: 7px; }
.fighter h4 { margin: 0 0 5px; font-size: .9rem; }
.hp-line { font-size: .72rem; color: var(--muted); }
.hpbar { height: 8px; border-radius: 8px; background: #070a16; overflow: hidden; margin-top: 5px; }
.hpbar i { display: block; height: 100%; background: linear-gradient(90deg, #ff5270, #ffab76); transition: width .25s; }
.status { color: var(--gold); font-size: .7rem; margin-top: 4px; }
.command-zone { display: grid; grid-template-columns: 1fr 1.15fr; gap: 12px; margin-top: 12px; }
.speaker { padding: 12px; min-height: 104px; }
.speaker-name { color: var(--cyan); font-weight: 900; font-size: .8rem; }
.speaker-text { margin-top: 8px; line-height: 1.6; font-size: .9rem; }
.commands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.command { min-height: 48px; color: #151528; background: var(--gold); padding: 8px; }
.command.skill { background: var(--pink); }
.command.guard { background: var(--cyan); }
.battle-log { grid-column: 1/-1; min-height: 34px; padding: 8px 10px; border-radius: 5px; background: rgba(6,8,20,.75); color: #cbd1ea; font-size: .8rem; }

.event-stage { min-height: 620px; display: grid; grid-template-columns: minmax(280px,.85fr) minmax(360px,1.15fr); overflow: hidden; position: relative; }
.event-stage::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 25% 50%, rgba(116,185,255,.2), transparent 34%), linear-gradient(120deg, transparent 48%, rgba(255,255,255,.035) 48% 50%, transparent 50%); pointer-events:none; }
.event-stage.brave { box-shadow: var(--shadow), inset 0 0 70px rgba(255,211,110,.08); }
.petit-event{min-height:480px}
.petit-event .event-copy h2{font-size:clamp(1.65rem,4vw,2.5rem)}
.petit-cast{display:flex;align-items:end;justify-content:center;gap:4px;padding:24px 12px;background:linear-gradient(180deg,#1b30433b,#060917dd)}
.petit-cast figure{flex:1;min-width:0;margin:0;text-align:center}
.petit-cast img{display:block;width:100%;height:360px;object-fit:contain;object-position:center bottom}
.petit-cast figcaption{padding:10px 0;color:var(--gold);font-size:.875rem}
.petit-event .event-copy>.secondary{margin-top:10px}
@media(max-width:700px){.petit-event{grid-template-columns:1fr}.petit-cast{padding:14px 16px 8px}.petit-cast img{height:205px}.petit-cast figcaption{padding:6px 0}.petit-event .event-copy{padding:20px}.petit-event .event-copy h2{margin:8px 0 16px}.petit-event .event-copy .dialogue{min-height:0}}
.event-art { position: relative; min-height: 620px; display:grid; place-items:end center; background:linear-gradient(180deg,rgba(14,20,44,.3),rgba(6,9,23,.92)); overflow:hidden; }
.event-portrait { width:100%; height:560px; background-image:url('./assets/character-lineup.png'); background-repeat:no-repeat; background-size:600% auto; background-position:0 center; image-rendering:pixelated; filter:drop-shadow(0 22px 20px rgba(0,0,0,.55)); animation:event-breathe 2.8s ease-in-out infinite; }
.event-spark { position:absolute; top:21%; right:18%; color:var(--gold); font-size:2rem; opacity:.8; animation:spark 1.8s ease-in-out infinite; }
.event-copy { position:relative; z-index:1; padding:clamp(24px,5vw,64px); display:flex; flex-direction:column; justify-content:center; }
.event-copy h2 { font-size:clamp(2rem,5vw,3.6rem); margin:8px 0 24px; }
.dialogue { min-height:180px; padding:20px; background:rgba(6,9,23,.72); border:1px solid var(--line); border-left:4px solid var(--cyan); border-radius:8px; }
.dialogue strong { color:var(--cyan); }
.dialogue p { font-size:1.05rem; line-height:1.9; margin:12px 0 0; }
.event-progress { display:flex; gap:7px; margin:18px 0; }
.event-progress i { width:26px; height:4px; background:rgba(255,255,255,.14); border-radius:8px; }
.event-progress i.on { background:var(--gold); }
.resolve-choices { display:grid; gap:12px; }
.resolve-choice { padding:18px; text-align:left; white-space:normal; border:1px solid var(--line); border-left:4px solid var(--gold); background:#18233b; color:#edf1ff; border-radius:10px; }
.resolve-choice:hover,.resolve-choice:focus-visible { background:#253553; border-color:var(--gold); outline:2px solid var(--gold); outline-offset:3px; }
.resolve-choice strong { display:block; font-size:1.125rem; color:var(--gold); }
.resolve-choice span { display:block; margin-top:8px; font-size:.875rem; color:#b5dfff; }
.resolve-choice p { margin:8px 0 0; font-size:1rem; line-height:1.7; }
#resolve-rethink,#choose-resolve { margin-top:14px; }
.chapter-stage { overflow:hidden; background:radial-gradient(ellipse at 70% 35%,#65324f66,transparent 55%),linear-gradient(150deg,#1b2944,#101528); }
.chapter-stage.chapter-canal { background:linear-gradient(#101b2db8,#101b2d99),url('./assets/canal-quay.png') center 20% / cover; }
.chapter-stage.chapter-gate { position:relative; background:linear-gradient(#101b2d70,#101b2d99),url('./assets/canal-gate.png') center top / cover; }
.chapter-stage.gate-open { background-image:linear-gradient(#101b2d40,#101b2d88),url('./assets/canal-gate-open.png'); }
.chapter-gate>.chapter-heading,.chapter-gate>.chapter-cast,.chapter-gate>.chapter-dialogue,.chapter-gate>.gate-panorama { position:relative; }
.gate-reveal { position:absolute; inset:0; pointer-events:none; background:linear-gradient(#101b2d70,#101b2d99),url('./assets/canal-gate.png') center top / cover; animation:gate-dissolve 2.4s ease-in-out both; }
.gate-panorama { height:clamp(248px,40vw,396px); display:flex; align-items:flex-end; justify-content:center; padding:24px; }
.gate-panorama span { padding:10px 22px; border:1px solid #f4d48488; border-radius:6px; background:#10182dc9; color:#ffe8a8; font-size:1.25rem; letter-spacing:.12em; animation:gate-caption 2.4s ease-out both; }
@keyframes gate-dissolve { from { opacity:1; } to { opacity:0; } }
@keyframes gate-caption { 0%,45% { opacity:0; transform:translateY(8px); } 100% { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .gate-reveal { animation:none; opacity:0; } .gate-panorama span { animation:none; } }
.chapter-heading { padding:24px 28px 0; }
.chapter-heading h2 { margin:8px 0 0; font-size:clamp(1.5rem,4vw,2.5rem); }
.chapter-cast { display:flex; align-items:flex-start; justify-content:center; gap:clamp(10px,8vw,110px); padding:8px 24px 0; }
/* Allocate row width in proportion to source aspect ratios, so every portrait
   has the same displayed height even when three characters share a phone row. */
.chapter-character { --portrait-ratio:0.6666666667; margin:0; flex:var(--portrait-ratio) 1 0%; min-width:0; width:auto; max-width:calc(330px * var(--portrait-ratio)); opacity:.6; filter:saturate(.65); transition:opacity .2s; }
.chapter-character:has(>img[src$="princess-commander.png"]) { --portrait-ratio:1; }
.chapter-character.speaking { opacity:1; filter:none; }
.chapter-character img { display:block; width:100%; height:auto; aspect-ratio:var(--portrait-ratio); object-fit:contain; object-position:bottom; image-rendering:pixelated; }
.chapter-character figcaption { display:flex; flex-direction:column; justify-content:end; min-height:58px; text-align:center; font-size:1rem; color:#e5dfed; padding:8px 0; }
.chapter-character figcaption small { font-size:.875rem; color:var(--muted); }
.chapter-dialogue { border-top:1px solid var(--line); padding:24px 28px; background:#0a1023eb; }
.chapter-dialogue>strong { color:var(--pink); font-size:1rem; }
.chapter-dialogue>p { margin:14px 0 22px; min-height:3.6em; font-size:1.125rem; line-height:1.8; }
.chapter-controls { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; }
.chapter-controls>span { margin-right:auto; font-size:.875rem; color:var(--muted); }
.chapter-controls .primary { width:auto; min-width:160px; }
.chapter-controls button:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.boss-objective { display:flex; align-items:center; gap:12px; margin:8px 0; }
.boss-objective img { width:60px; height:88px; object-fit:contain; image-rendering:pixelated; }
.boss-objective p { margin:0; }
.boss-objective small,.boss-objective strong { display:block; line-height:1.6; }
.boss-objective small { color:var(--muted); font-size:.875rem; }
.boss-objective strong { color:var(--pink); font-size:1rem; }
.expedition-intro { padding:24px; margin-bottom:20px; }
.expedition-intro h2 { margin:8px 0 12px; }
.expedition-intro p { color:#cbd3e9; line-height:1.7; }
.expedition-intro .resource-chip { display:inline-block; }
.area-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.area-card { padding:24px; display:flex; flex-direction:column; }
.area-card h3 { font-size:1.75rem; margin:10px 0; }
.area-card p { color:#cbd3e9; line-height:1.7; }
.area-card .area-detail { color:var(--gold); font-size:.875rem; }
.area-card .primary { margin-top:auto; }
.recruit-banner { display:flex; align-items:center; justify-content:center; gap:20px; margin:24px 0; padding:16px; border:1px solid var(--pink); border-radius:10px; background:#3d253c; }
.recruit-banner img { height:140px; width:100px; object-fit:contain; image-rendering:pixelated; }
.recruit-banner strong { color:#ffb5cd; font-size:1.125rem; }
@media(max-width:700px){.area-grid{grid-template-columns:1fr}.expedition-intro,.area-card{padding:18px}.recruit-banner{gap:10px;text-align:left}}
@media(max-width:540px) {
  .chapter-heading { padding:20px 18px 0; }
  .chapter-cast { gap:12px; padding:12px 12px 0; }
  .chapter-dialogue { padding:20px 18px; }
  .chapter-dialogue>p { font-size:1rem; }
  .chapter-controls .primary { width:100%; }
}
@keyframes event-breathe { 50% { transform:translateY(-5px); filter:drop-shadow(0 28px 22px rgba(0,0,0,.5)) brightness(1.05); } }
@keyframes spark { 50% { transform:scale(1.25) rotate(12deg); opacity:1; } }

.aftermath-stage { min-height:650px; display:grid; grid-template-columns:minmax(250px,.65fr) minmax(480px,1.35fr); overflow:hidden; }
.aftermath-princess { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:650px; padding:18px; background:radial-gradient(circle at 50% 35%,rgba(89,118,199,.24),transparent 42%),linear-gradient(180deg,#172044,#090d20); }
.canal-aftermath .aftermath-princess { background:linear-gradient(#101b2d88,#101b2dcc),url('./assets/canal-quay.png') center top / cover; }
.supply-recoveries { padding:14px 20px 14px 34px; border:1px solid #55e0d844; border-radius:8px; background:#10252d; color:#d4f7ed; font-size:1rem; line-height:1.9; }
.aftermath-princess>img { position:absolute; inset:10px 0 auto; width:100%; height:480px; object-fit:contain; object-position:center top; image-rendering:pixelated; filter:drop-shadow(0 20px 15px rgba(0,0,0,.48)); }
.princess-quote { position:relative; z-index:1; padding:16px; background:rgba(7,10,25,.86); border:1px solid rgba(255,211,110,.35); border-radius:8px; }
.princess-quote strong { color:var(--gold); }
.princess-quote p { margin:8px 0 0; line-height:1.7; }
.aftermath-main { padding:clamp(24px,4vw,54px); align-self:center; }
.aftermath-main h2 { margin:7px 0 22px; font-size:clamp(1.6rem,4vw,2.6rem); }
.policy-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.policy-card { min-height:240px; padding:18px 14px; color:var(--ink); text-align:left; cursor:pointer; border:1px solid var(--line); border-radius:9px; background:linear-gradient(180deg,rgba(42,49,88,.95),rgba(18,22,44,.96)); transition:transform .16s,border-color .16s; }
.policy-card:hover { transform:translateY(-3px); border-color:var(--gold); }
.policy-card strong { display:block; font-size:1.05rem; margin-top:12px; }
.policy-card p { min-height:68px; color:var(--muted); font-size:.82rem; line-height:1.6; }
.policy-card small { color:var(--gold); font-weight:900; }
.policy-icon { width:42px; height:42px; display:grid; place-items:center; color:#11162a; background:var(--gold); border-radius:6px; font-size:1.3rem; font-weight:900; }
.after-note { color:var(--muted); font-size:.8rem; line-height:1.6; margin:16px 0; }
.worker-grid { display:grid; gap:10px; margin-bottom:14px; }
.worker-card { position:relative; display:grid; grid-template-columns:90px 1fr; min-height:112px; padding:8px; color:var(--ink); text-align:left; cursor:pointer; border:1px solid var(--line); border-radius:9px; background:rgba(18,23,48,.92); }
.worker-card:hover,.worker-card.best { border-color:var(--cyan); }
.worker-card.best::after { content:'得意'; position:absolute; top:8px; right:8px; padding:3px 7px; color:#101426; background:var(--cyan); border-radius:4px; font-size:.7rem; font-weight:900; }
.worker-portrait { width:86px; height:94px; background-image:url('./assets/character-lineup.png'); background-repeat:no-repeat; background-size:600% auto; background-position-y:center; image-rendering:pixelated; }
.worker-card strong,.worker-card span,.worker-card small { display:block; }
.worker-card strong { margin:8px 0 2px; }
.worker-card span { color:var(--gold); font-size:.75rem; font-weight:900; }
.worker-card small { color:var(--muted); margin-top:7px; line-height:1.5; padding-right:38px; }
.result-worker { display:grid; grid-template-columns:180px 1fr; gap:18px; align-items:center; min-height:250px; padding:15px; background:rgba(7,10,24,.5); border:1px solid var(--line); border-radius:9px; }
.result-portrait { width:180px; height:220px; background-image:url('./assets/character-lineup.png'); background-repeat:no-repeat; background-size:600% auto; background-position-y:center; image-rendering:pixelated; }
.result-worker h3 { font-size:1.6rem; margin:5px 0 12px; }
.result-worker p { line-height:1.8; color:#e6e7f4; }
.result-job { color:var(--cyan); font-weight:900; font-size:.78rem; letter-spacing:.08em; }
.delta-row { display:flex; flex-wrap:wrap; gap:7px; margin:14px 0; }
.delta-row span { padding:7px 10px; color:#171528; background:var(--gold); border-radius:4px; font-size:.8rem; font-weight:900; }

.decision-stage { min-height:620px; display:grid; grid-template-columns:.9fr 1.1fr; overflow:hidden; }
.decision-map { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px; text-align:center; background:radial-gradient(circle,rgba(255,70,102,.22),transparent 45%),linear-gradient(145deg,#30162c,#0b1021); }
.decision-map h2 { font-size:clamp(1.7rem,4vw,2.7rem); margin:18px 0 8px; }
.decision-map p { color:var(--muted); line-height:1.7; max-width:36ch; }
.alarm-ring { width:120px; height:120px; display:grid; place-items:center; border:4px solid var(--red); border-radius:50%; color:white; background:rgba(255,72,102,.16); font-size:4rem; font-weight:1000; box-shadow:0 0 45px rgba(255,72,102,.3); animation:danger-pulse 1.2s infinite; }
.decision-main { display:flex; flex-direction:column; justify-content:center; gap:12px; padding:clamp(25px,5vw,62px); }
.decision-main h2 { margin:4px 0 14px; font-size:clamp(2rem,5vw,3.4rem); }
.decision-option { padding:18px; color:var(--ink); text-align:left; cursor:pointer; border:1px solid var(--cyan); border-radius:8px; background:linear-gradient(135deg,rgba(20,68,79,.9),rgba(20,27,52,.95)); }
.decision-option.risky { border-color:var(--red); background:linear-gradient(135deg,rgba(82,30,53,.9),rgba(29,22,48,.95)); }
.decision-option strong,.decision-option span { display:block; }
.decision-option strong { font-size:1rem; }
.decision-option span { color:var(--muted); font-size:.8rem; margin-top:5px; }
.warning-stage { max-width:850px; min-height:360px; margin:9vh auto; padding:clamp(25px,5vw,55px); display:grid; grid-template-columns:150px 1fr; gap:28px; align-items:center; border-color:rgba(255,109,126,.48); }
.warning-stage h2 { font-size:clamp(1.8rem,4vw,2.8rem); margin:7px 0 12px; }
.warning-stage p { color:var(--muted); line-height:1.8; margin-bottom:25px; }
.warning-icon { width:120px; height:120px; display:grid; place-items:center; margin:0 auto; border:3px solid var(--red); border-radius:50%; color:#ffdbe2; background:rgba(255,82,112,.12); font-size:3.8rem; }
.enemy-result { border-color:rgba(255,109,126,.35); }
.enemy-result .warning-icon { margin-bottom:18px; }

.status-shell { display:grid; grid-template-columns:minmax(240px,.55fr) minmax(560px,1.45fr); gap:14px; align-items:start; }
.roster-nav { padding:18px; position:sticky; top:14px; }
.roster-nav h2 { font-size:1.8rem; margin:4px 0; }
.roster-nav>p { color:var(--muted); font-size:.8rem; margin:0 0 16px; }
.roster-tab { width:100%; min-height:88px; display:grid; grid-template-columns:70px 1fr; gap:8px; align-items:center; margin:8px 0; padding:6px; color:var(--ink); text-align:left; cursor:pointer; border:1px solid var(--line); border-radius:8px; background:rgba(11,15,33,.65); }
.roster-tab:hover,.roster-tab.active { border-color:var(--cyan); background:rgba(28,58,74,.72); }
.roster-tab span,.roster-tab small { display:block; }
.roster-tab small { color:var(--muted); margin-top:3px; }
.roster-thumb { width:68px; height:74px; background-image:url('./assets/character-lineup.png'); background-repeat:no-repeat; background-size:600% auto; background-position-y:center; image-rendering:pixelated; }
.status-detail { --char-accent:var(--cyan); padding:clamp(18px,3vw,34px); border-top:3px solid var(--char-accent); }
.status-hero { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(280px,1.3fr); gap:20px; min-height:290px; align-items:center; }
.status-art { position:relative; height:290px; overflow:hidden; border-radius:9px; background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--char-accent) 18%,transparent),transparent 54%),rgba(7,10,24,.55); }
.status-portrait { width:100%; height:290px; background-image:url('./assets/character-lineup.png'); background-repeat:no-repeat; background-size:600% auto; background-position-y:center; image-rendering:pixelated; filter:drop-shadow(0 14px 12px rgba(0,0,0,.48)); }
.status-condition { position:absolute; left:10px; bottom:10px; padding:5px 9px; color:#11162a; background:var(--char-accent); border-radius:4px; font-size:.74rem; font-weight:900; }
.status-identity h2 { margin:5px 0 10px; font-size:clamp(2rem,5vw,3.5rem); }
.status-identity>p { min-height:58px; color:#dfe3f4; line-height:1.7; }
.level-line { display:flex; justify-content:space-between; gap:12px; color:var(--gold); font-size:.8rem; }
.level-line span { color:var(--muted); }
.xp-track,.growth-track { height:8px; margin-top:7px; overflow:hidden; border-radius:10px; background:#070a16; }
.xp-track i,.growth-track i { display:block; height:100%; background:linear-gradient(90deg,var(--char-accent),var(--gold)); }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:18px 0; }
.stat-grid>div { padding:12px; border:1px solid var(--line); border-radius:7px; background:rgba(7,10,24,.5); }
.stat-grid span,.stat-grid strong { display:block; }
.stat-grid span { color:var(--muted); font-size:.72rem; }
.stat-grid strong { margin-top:4px; font-size:1.35rem; }
.stat-grid small { color:var(--muted); font-size:.72rem; }
.status-columns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.status-block { padding:16px; margin-top:10px; border:1px solid var(--line); border-radius:8px; background:rgba(7,10,24,.45); }
.status-block h3 { margin:3px 0 12px; }
.block-label { color:var(--cyan); font-size:.68rem; font-weight:900; letter-spacing:.13em; }
.skill-entry { padding:10px 0; border-top:1px solid var(--line); }
.skill-entry:first-of-type { border-top:0; }
.skill-entry strong { color:#e9ebf8; }
.skill-entry.signature strong { color:var(--gold); }
.skill-entry p { margin:5px 0 0; color:var(--muted); font-size:.8rem; line-height:1.55; }
.profile-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:.82rem; }
.profile-row span { color:var(--muted); }
.profile-row strong { text-align:right; }
.growth-block { position:relative; overflow:hidden; }
.growth-block.complete { border-color:rgba(255,211,110,.5); background:linear-gradient(135deg,rgba(75,58,22,.35),rgba(8,12,27,.6)); }
.growth-block.mystery { border-style:dashed; }
.growth-block p { color:#dce0ef; line-height:1.65; }
.growth-block small { display:block; margin-top:7px; color:var(--gold); }
.record-grid { display:grid; grid-template-columns:120px 120px 1fr; gap:8px; }
.record-grid>div { padding:10px; border:1px solid var(--line); border-radius:6px; }
.record-grid span,.record-grid strong { display:block; }
.record-grid span { color:var(--muted); font-size:.72rem; }
.record-grid strong { margin-top:5px; }
.record-grid .memory strong { color:var(--gold); }

.shop-stage { padding:clamp(18px,3vw,34px); }
.shop-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.shop-head h2 { margin:5px 0; font-size:clamp(1.7rem,4vw,2.6rem); }
.shop-head p { color:var(--muted); margin:5px 0 18px; }
.shop-message { min-height:48px; margin:4px 0 16px; padding:12px 15px; color:#f8e5ac; border-left:3px solid var(--gold); background:rgba(72,53,19,.28); line-height:1.55; }
.shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.shop-card { --char-accent:var(--cyan); min-height:420px; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-top:3px solid var(--char-accent); border-radius:9px; background:linear-gradient(180deg,rgba(35,42,76,.96),rgba(15,19,38,.98)); }
.shop-card.purchased { border-color:rgba(255,211,110,.6); box-shadow:inset 0 0 34px rgba(255,211,110,.05); }
.shop-portrait { height:185px; background-image:url('./assets/character-lineup.png'); background-repeat:no-repeat; background-size:600% auto; background-position-y:center; image-rendering:pixelated; }
.shop-card-copy { display:flex; flex:1; flex-direction:column; padding:14px; }
.shop-owner { color:var(--char-accent); font-size:.72rem; font-weight:900; }
.shop-card h3 { margin:4px 0 8px; font-size:1rem; }
.item-effect { color:var(--gold); font-size:.82rem; }
.shop-card p { flex:1; color:var(--muted); font-size:.8rem; line-height:1.6; }
.shop-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.shop-card-foot>span { color:var(--gold); font-weight:900; }
.shop-card-foot button { padding:8px 10px; color:#171528; cursor:pointer; border:0; border-radius:5px; background:var(--gold); font-weight:900; }
.shop-card-foot button:disabled { color:var(--muted); background:#303652; }
.equipment-tiers { list-style:none; margin:8px 0; padding:0; }
.equipment-tier { display:flex; justify-content:space-between; gap:12px; padding:12px 9px; border:1px solid var(--line); border-radius:6px; margin:6px 0; background:rgba(7,10,23,.35); }
.equipment-tier>div:first-child { min-width:0; flex:1; }
.equipment-tier span,.equipment-tier strong,.equipment-tier small { display:block; }
.equipment-tier span { color:var(--char-accent); font-size:.72rem; }
.equipment-tier strong { font-size:.85rem; margin:4px 0; overflow-wrap:anywhere; }
.equipment-tier small { color:var(--muted); font-size:.72rem; line-height:1.5; }
.equipment-tier .tier-price { flex:0 0 80px; text-align:right; }
.equipment-tier .tier-price strong { color:var(--gold); white-space:nowrap; }
.equipment-tier.tier-current { border-color:var(--gold); background:rgba(72,53,19,.25); }
.equipment-tier.tier-done { opacity:.7; }
.equipment-tier.tier-locked { border-style:dashed; }
.shop-card .shop-current { flex:0; margin:4px 0; }
.shop-card .shop-unlock { flex:0; color:var(--gold); margin:6px 0; }
.shop-card-foot { margin-top:auto; }
.shop-card-foot button { min-height:44px; }

.result { max-width: 720px; margin: 10vh auto; padding: 26px; text-align: center; }
.result h2 { font-size: clamp(1.8rem, 5vw, 3rem); margin: 6px 0; }
.result p { color: var(--muted); line-height: 1.8; }
.growth-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 18px 0; }
.growth-item { padding: 10px; background: rgba(7,10,23,.55); border: 1px solid var(--line); border-radius: 7px; }
.campaign-result { max-width:1100px; margin:20px auto 40px; overflow:hidden; border-color:#b69a586e; background:linear-gradient(180deg,#0c1428b8,#10182c82 28%,#11182ded 65%),var(--result-art) center 35% / cover; }
.campaign-result-heading { padding:32px 30px 8px; text-align:center; }
.result-ribbon { display:inline-block; margin-bottom:16px; padding:7px 22px; border-top:1px solid #f7d27e80; border-bottom:1px solid #f7d27e80; color:#ffe5a4; font-size:.875rem; letter-spacing:.18em; font-weight:800; }
.campaign-result-heading .eyebrow { color:#e2c78f; }
.campaign-result h2 { margin:8px 0 12px; font-size:clamp(1.8rem,4.8vw,3.2rem); text-shadow:0 3px 14px #0009; }
.campaign-result-heading p { max-width:680px; margin:0 auto; color:#d9e2f3; font-size:1rem; line-height:1.8; }
.return-lineup { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:4px 30px 26px; }
.return-member { min-width:0; text-align:center; animation:return-arrive .65s ease-out both; animation-delay:calc(var(--arrival)*.12s); }
.return-art { height:clamp(180px,23vw,265px); display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.return-member-copy { position:relative; padding:17px 14px 12px; border:1px solid #7885a448; border-top:2px solid var(--accent); border-radius:8px; background:linear-gradient(145deg,#202b43ee,#11192df5); }
.return-role { display:block; color:var(--accent); font-size:.875rem; }
.return-member h3 { font-size:1.4rem; margin:5px 0 10px; }
.return-level { display:block; font-size:1.7rem; color:#fff0c7; }
.return-level span { font-size:1.2rem; color:#c3b789; }
.return-growth { display:block; color:#ffe2a0; font-size:.875rem; min-height:1.5em; margin:5px 0; }
.return-member p { margin:14px 0 0; padding-top:12px; border-top:1px solid #71809838; min-height:4.4em; color:#d4dced; font-size:.875rem; line-height:1.7; }
.campaign-result-bottom { padding:0 30px 26px; }
.return-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; padding:18px 0; border-top:1px solid #e4c37840; border-bottom:1px solid #e4c37840; text-align:center; background:#0c132966; }
.return-stats>div { padding:0 10px; }
.return-stats>div+div { border-left:1px solid #7885a438; }
.return-stats dt,.return-stats span { font-size:.875rem; color:#b7c5dd; }
.return-stats dd { margin:5px 0 0; font-size:1.75rem; color:#ffdfa1; font-weight:800; overflow-wrap:anywhere; }
.return-stats small { font-size:.875rem; font-weight:400; }
.return-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; padding-top:24px; }
.return-footer strong { font-size:1rem; color:#e4eaf6; }
.return-footer .save-result { margin:6px 0 0; font-size:.875rem; }
.return-footer .primary { width:auto; min-height:52px; }
.campaign-result.is-return { border-color:#7a8da666; background-image:linear-gradient(#111a2bcc,#11182df0),var(--result-art); }
.is-return .result-ribbon { color:#bcd1e6; border-color:#8b9cb577; }
@keyframes return-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:600px) {
  .campaign-result { margin-top:10px; }
  .campaign-result-heading { padding:24px 16px 8px; }
  .return-lineup { gap:20px; grid-template-columns:1fr; padding:10px 16px 24px; }
  .return-member { display:grid; grid-template-columns:minmax(110px,38%) minmax(0,1fr); align-items:center; text-align:left; }
  .return-art { height:190px; }
  .return-member-copy { padding:14px 12px; }
  .return-member p { min-height:0; }
  .return-role { font-size:.875rem; }
  .campaign-result-bottom { padding:0 16px 24px; }
  .return-stats { gap:14px; grid-template-columns:1fr; text-align:left; padding:16px; }
  .return-stats>div { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 14px; padding:0; }
  .return-stats>div+div { border-left:0; border-top:1px solid #7885a438; padding-top:12px; }
  .return-stats dd { margin:0; font-size:1.5rem; }
  .return-stats span { flex-basis:100%; text-align:right; }
  .return-footer .primary { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .return-member { animation:none; } }
.toast { position: fixed; left: 50%; bottom: 25px; transform: translateX(-50%); z-index: 20; background: #fff2c8; color: #181426; padding: 10px 16px; border-radius: 6px; font-weight: 900; box-shadow: var(--shadow); animation: toast-in .25s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

@media (max-width: 820px) {
  #app { padding: 12px; }
  .selection-layout, .game-grid { grid-template-columns: 1fr; }
  .roster { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .squad-panel { position: static; }
  .battle-field { grid-template-columns: 1fr 34px 1fr; padding: 8px; }
  .fighter { grid-template-columns: 48px 1fr; min-height: 78px; padding: 6px; }
  .mini-portrait, .enemy-avatar { width: 46px; height: 58px; font-size: 1.5rem; }
  .fighter h4 { font-size: .78rem; }
  .event-stage { grid-template-columns:1fr; min-height:auto; }
  .event-art { min-height:300px; }
  .event-portrait { height:320px; width:min(420px,100%); }
  .event-copy { padding:24px; }
  .aftermath-stage { grid-template-columns:1fr; }
  .aftermath-princess { min-height:300px; }
  .aftermath-princess>img { height:260px; object-position:left top; }
  .princess-quote { margin-left:34%; }
  .aftermath-main { padding:24px; }
  .decision-stage { grid-template-columns:1fr; }
  .decision-map { min-height:300px; }
  .warning-stage { grid-template-columns:1fr; text-align:center; margin:4vh auto; }
  .status-shell { grid-template-columns:1fr; }
  .roster-nav { position:static; }
  .roster-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
  .roster-nav>.eyebrow,.roster-nav>h2,.roster-nav>p { grid-column:1/-1; }
  .roster-tab { grid-template-columns:1fr; text-align:center; min-height:112px; }
  .roster-thumb { margin:auto; }
  .shop-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 540px) {
  .brand small { display: none; }
  .topbar { align-items: flex-start; }
  .resource-row { justify-content: flex-end; }
  .roster { grid-template-columns: 1fr 1fr; gap: 7px; }
  .char-card { min-height: 218px; }
  .portrait { height: 125px; }
  .char-copy { padding: 8px; }
  .hook { font-size: .74rem; }
  .battle-stage { padding: 8px; }
  .battle-field { grid-template-columns: 1fr 24px 1fr; gap: 4px; min-height: 330px; }
  .fighter { grid-template-columns: 1fr; text-align: center; min-height: 92px; }
  .mini-portrait, .enemy-avatar { display: none; }
  .command-zone { grid-template-columns: 1fr; }
  .growth-grid { grid-template-columns: 1fr; }
  .policy-grid { grid-template-columns:1fr; }
  .policy-card { min-height:auto; }
  .policy-card p { min-height:auto; }
  .princess-quote { margin-left:0; }
  .aftermath-princess>img { opacity:.48; }
  .result-worker { grid-template-columns:110px 1fr; }
  .result-portrait { width:110px; height:160px; }
  .status-hero { grid-template-columns:1fr; }
  .status-art { height:250px; }
  .status-portrait { height:250px; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .status-columns { grid-template-columns:1fr; }
  .record-grid { grid-template-columns:1fr 1fr; }
  .record-grid .memory { grid-column:1/-1; }
  .shop-head { display:block; }
  .shop-head .secondary { width:100%; margin:8px 0 12px; }
  .shop-grid { grid-template-columns:1fr; }
  .shop-card { min-height:340px; }
}

/* Standalone portraits use the same face-and-torso framing as the lineup atlas. */
.rose-portrait { background-image:url('./assets/rose-commander.png'); background-size:120% auto; background-position:center 22%; background-repeat:no-repeat; }

.map-canvas.garden-royal-map { background-image:linear-gradient(#1020370d,#0a152b38),url('./assets/garden-map.png'); background-size:100% 100%; background-repeat:no-repeat; }
.sortie-heading.sortie-garden { background:linear-gradient(90deg,#10182def,#10182d80),url('./assets/garden-battle.png') center top / cover; }
.chapter-stage.chapter-garden { background:linear-gradient(#101b2da8,#101b2d99),url('./assets/garden-battle.png') center top / cover; }
.garden-cast { gap:clamp(8px,3vw,40px); }
.garden-cast .chapter-character { min-width:0; }
.garden-cast .chapter-character figcaption { overflow-wrap:anywhere; }

.sion-portrait{background-image:url('./assets/sion-assassin.png');background-size:120% auto;background-position:center 22%;background-repeat:no-repeat}

.chapter-adviser{align-self:center;max-width:300px;padding:20px;border-left:3px solid #77879d;color:var(--muted);font-size:1rem;line-height:1.8;background:#0d172bbd}.chapter-adviser h3{margin:8px 0;color:var(--ink);font-size:1.4rem}.chapter-adviser small{font-size:.875rem}.chapter-adviser.speaking{border-color:var(--gold)}@media(max-width:540px){.chapter-adviser{padding:12px;max-width:52%;font-size:.875rem}.chapter-adviser h3{font-size:1.15rem}}

.map-canvas.village-rural-map{background-image:linear-gradient(#251d140d,#151e2438),url('./assets/village-map.png');background-size:100% 100%;background-repeat:no-repeat}
.sortie-heading.sortie-village{background:linear-gradient(90deg,#171c24ef,#171c2470),url('./assets/village-battle.png') center top/cover}
.chapter-stage.chapter-village{background:linear-gradient(#191a1ba8,#111821bb),url('./assets/village-battle.png') center top/cover}
.village-life{margin:12px 0;padding:12px 14px;border-left:3px solid #c5a76f;background:#282a2d;color:#e0dbcd;font-size:1rem;line-height:1.65}
.village-life strong{color:#e7c993}
.village-life p{margin:5px 0 0}

.event-portrait.sion-portrait{background-size:contain;background-position:center}
.memory-reward{padding:14px 16px;border:1px solid var(--gold);border-radius:10px;background:#e4bd6320;font-size:1rem;line-height:1.7}
.memory-reward strong{display:block;color:var(--gold);margin-bottom:4px}

.fatigue-label{display:block;margin:6px 0;font-size:.875rem;line-height:1.5;color:var(--muted)}
.fatigue-label.is-near{color:#f4ce83}.fatigue-label.is-tired{color:#ffadbb;font-weight:700}
.status-fatigue{margin:12px 0;padding:12px 16px;background:#10162a;border-radius:10px}
.status-fatigue p{font-size:.875rem;line-height:1.6;color:var(--muted);margin:6px 0}

.raid-marker{position:absolute;z-index:4;transform:translate(-50%,-50%);padding:8px 11px;border:1px solid #ff849a;border-radius:8px;background:#371c2bef;color:#fff1f4;pointer-events:none;box-shadow:0 4px 18px #100b17a6;font-size:.875rem;line-height:1.5;white-space:nowrap}
.raid-marker strong,.raid-marker span{display:block}.raid-marker strong{color:#ff9db1}
.garrison-layout{display:grid;grid-template-columns:minmax(190px,.7fr) minmax(0,2fr);gap:18px;margin-top:18px}
.garrison-regions{padding:14px;align-self:start;display:grid;gap:10px}
.garrison-regions button{text-align:left;display:grid;gap:6px;padding:14px;font-size:1rem}
.garrison-regions button span{font-size:.875rem;color:var(--muted)}
.garrison-regions button[aria-pressed=true]{border-color:var(--cyan);background:#1b3545}
.garrison-detail{padding:22px;min-width:0}
.garrison-outlook{padding:16px;margin:14px 0;border:1px solid #6edfd36b;background:#102a31;border-radius:10px;line-height:1.7}
.garrison-outlook strong{font-size:1.2rem;color:var(--cyan)}
.garrison-outlook p{margin:8px 0;font-size:1rem}
.garrison-outlook small{display:block;font-size:.875rem;color:var(--muted)}
.garrison-pick-title{margin-top:24px}
.garrison-units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.garrison-unit{display:flex;align-items:center;gap:12px;padding:12px;text-align:left;min-width:0;background:#141c31;border:1px solid #4b587d;border-radius:10px}
.garrison-unit>.roster-thumb{width:70px;height:90px;flex-shrink:0}
.garrison-unit>span{display:grid;gap:5px;min-width:0}
.garrison-unit strong{font-size:1rem}.garrison-unit small,.garrison-unit span span,.garrison-unit b{font-size:.875rem;line-height:1.6}
.garrison-unit span span{color:var(--muted)}.garrison-unit b{color:var(--cyan)}
.garrison-unit:disabled{opacity:.65;cursor:default}.garrison-unit.assigned{opacity:1;border-color:var(--cyan);background:#1b3545}
.garrison-unit:disabled:not(.assigned) b{color:var(--muted)}
.operation-squad .char-card:disabled{opacity:.6;cursor:default}
.garrison-result{display:flex;align-items:center;justify-content:center;gap:18px;margin:20px auto}
.garrison-result>.roster-thumb{width:90px;height:110px}.garrison-result-chance{color:var(--muted);font-size:.875rem}
@media(max-width:760px){.garrison-layout{grid-template-columns:1fr}.garrison-regions{grid-template-columns:repeat(2,minmax(0,1fr))}.garrison-detail{padding:16px}.garrison-units{grid-template-columns:1fr}}

/* Area 06: keep supply and counterattack status above the map. */
.map-canvas.capital-outskirts-map{background-image:linear-gradient(#1016230a,#08101c38),url('./assets/capital-map.png');background-size:100% 100%;background-repeat:no-repeat}
.chapter-stage.chapter-capital{background:linear-gradient(90deg,#151c2bed,#151c2bb8),url('./assets/capital-map.png') center/cover}
.sortie-heading.sortie-capital{background:linear-gradient(#0e152240,#0e1522c9),url('./assets/capital-battle.png') center/cover}
.capital-progress{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;margin:12px 0;padding:16px;border:1px solid #719da6;border-radius:8px;background:#152734}
.capital-progress h3{margin:5px 0;color:#8de3e2;font-size:1rem}.capital-progress p{margin:5px 0 0;color:#d0d9e4;font-size:.875rem;line-height:1.7}
.capital-progress.supply-cut{border-color:#dba26b;background:#30252a}.capital-progress.supply-cut h3{color:#ffd09d}
.capital-raid-status strong{color:#ffc0c9;font-size:.875rem}
@media(max-width:700px){.capital-progress{grid-template-columns:1fr;gap:12px}.capital-raid-status{padding-top:10px;border-top:1px solid #ffffff26}}

.map-route.isolated{stroke:#e6ad78;stroke-dasharray:2 6}.map-canvas .region.supply-isolated{border-color:#e6ad78;background:#49332bf2}.legend-isolated::before{background:#e6ad78}

/* Chapter 7: the castle and the life after the campaign. */
.map-canvas.castle-royal-map{background-image:linear-gradient(#1016230a,#08101c38),url('./assets/castle-map.png');background-size:100% 100%;background-repeat:no-repeat}
.chapter-stage.chapter-castle{background:linear-gradient(#10182785,#111928ba),url('./assets/castle-battle.png') center top/cover}
.sortie-heading.sortie-castle{background:linear-gradient(#0e152240,#0e1522c9),url('./assets/castle-battle.png') center/cover}
.final-epilogue{overflow:hidden;background:#101827}
.ending-heading{padding:clamp(28px,6vw,72px) clamp(20px,5vw,60px);background:linear-gradient(#1018274d,#101827f2),url('./assets/castle-map.png') center 25%/cover;text-align:center}
.ending-heading h2{font-size:clamp(2rem,5vw,4rem);margin:20px 0;color:#ffe8b5;letter-spacing:.08em}
.ending-heading p{color:#e0e5ef;line-height:1.9}
.ending-heading blockquote{max-width:750px;margin:28px auto 0;padding:22px 16px;border-block:1px solid #e6c48870;color:#fff2d6;line-height:2;font-size:clamp(.95rem,1.7vw,1.15rem)}
.ending-adviser{max-width:850px;margin:0 auto;padding:22px clamp(20px,4vw,40px);line-height:1.9;color:#c8d4e5}
.ending-adviser strong{color:#8de3e2}.ending-roster-title{text-align:center;margin:38px 20px 12px;color:#ffe8b5}
.ending-roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:0 clamp(16px,4vw,44px) 32px}
.ending-roster .return-member{display:flex;flex-direction:column}.ending-roster .return-art{height:225px;flex-shrink:0}.ending-roster .return-member-copy{flex:1}.ending-roster .return-member p{text-align:left;line-height:1.9;min-height:0}
.ending-footer{text-align:center;padding:32px 20px;background:linear-gradient(#192d3a,#111b2b);border-top:1px solid #749bad45}.ending-footer p{font-size:1.15rem;line-height:2;color:#ffe8b5}.ending-footer small{display:block;color:#bfcce0;line-height:1.8}.ending-footer>div{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:24px}.ending-footer button{min-height:48px}
.ending-revisit{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:20px;margin-bottom:20px}.ending-revisit strong{color:#ffe8b5}
@media(max-width:700px){.ending-roster{grid-template-columns:1fr;gap:18px}.ending-roster .return-member{display:grid;grid-template-columns:minmax(100px,34%) minmax(0,1fr);align-items:center}.ending-roster .return-art{height:190px}.ending-roster .return-member-copy{padding:15px 12px}.ending-roster .return-member p{font-size:.85rem}.ending-heading blockquote{text-align:left}.ending-revisit{align-items:flex-start;flex-direction:column}.ending-footer>div{flex-direction:column}.ending-footer button{width:100%}}
.chapter-character>img[src$="general-graus.png"]{transform:scaleX(-1)}
/* Edgar uses the same portrait height and foot alignment as the other speakers. */
.chapter-character.edgar-character{--portrait-ratio:.6666666667}
.adviser-portrait{display:block;width:120px;height:180px;max-width:100%;object-fit:contain;object-position:bottom;margin:0 auto 14px;image-rendering:pixelated}
.training-guidance{margin:12px 0;padding:12px;border:1px solid #658d9c;border-radius:8px;background:#172934;font-size:.875rem;line-height:1.7}
.training-guidance strong{color:#9ce4e6}.training-guidance p{margin:7px 0}.training-guidance small{display:block;font-size:.875rem;color:#c7d4e3}.training-guidance.underlevel{border-color:#c49b5a;background:#322b25}.training-guidance.underlevel strong{color:#ffda95}.training-return button{width:100%}
.area-level{color:#9ce4e6;font-weight:700}

/* Separate high-resolution Lizette art keeps her face readable in small portraits. */
.lizette-portrait{background-image:url('./assets/lizette-maid-grip.png');background-repeat:no-repeat;background-size:120% auto;background-position:center 28%}
.mini-portrait.lizette-portrait,.roster-thumb.lizette-portrait,.worker-portrait.lizette-portrait{background-size:165% auto;background-position:58% 29%}
.status-portrait.lizette-portrait,.event-portrait.lizette-portrait,.result-portrait.lizette-portrait{background-size:contain;background-position:center bottom}

.roster-lineup{display:flex;height:clamp(72px,18vw,260px);align-items:flex-end}
.lineup-member{display:flex;flex:1 1 0;min-width:0;height:100%;align-items:flex-end;justify-content:center}
.lineup-member .sprite-window{height:75%;filter:none}

/* Approved party art is shared by selection, status, conversations and results. */
.party-portrait{background-image:var(--party-art);background-repeat:no-repeat;background-size:100% auto;background-position:center 12%}
.ranka-portrait{--party-art:url('./assets/ranka-portrait-v2.png');--face-x:57%;--face-y:19%}
.cecil-portrait{--party-art:url('./assets/cecil-portrait-v2.png');--face-x:47%;--face-y:24%}
.nena-portrait{--party-art:url('./assets/nena-portrait-v2.png');--face-x:53%;--face-y:25%}
.momo-portrait{--party-art:url('./assets/momo-portrait-v2.png');--face-x:35%;--face-y:24%}
.yura-portrait{--party-art:url('./assets/yura-portrait-v2.png');--face-x:56%;--face-y:33%}
.mini-portrait.party-portrait,.roster-thumb.party-portrait,.worker-portrait.party-portrait{background-size:160% auto;background-position:var(--face-x) var(--face-y)}
.status-portrait.party-portrait,.event-portrait.party-portrait,.result-portrait.party-portrait{background-size:contain;background-position:center bottom}

/* Use the same uncropped full illustration for every status character. */
.status-art{display:block;width:100%;padding:0;border:1px solid var(--line);color:var(--ink);cursor:zoom-in}
.status-character-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;image-rendering:pixelated}
.status-art-hint{position:absolute;right:8px;top:8px;padding:5px 8px;border-radius:5px;background:#091226df;color:#fff1c8;font-size:.75rem}
.status-art:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.roster-tabs{display:grid;gap:8px}
.roster-tabs .roster-tab{margin:0}
.roster-scroll-hint{display:none;color:var(--muted);font-size:.75rem;margin-top:8px}
.character-art-viewer{width:min(960px,calc(100vw - 24px));height:min(94dvh,1100px);max-width:none;max-height:94dvh;margin:auto;padding:16px;border:1px solid #b3996666;border-radius:12px;background:#10182b;color:var(--ink);box-shadow:var(--shadow);overflow:hidden}
.character-art-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px}
.character-art-viewer::backdrop{background:#030610dc}
.art-viewer-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.art-viewer-header h2{margin:0;font-size:1.3rem;color:var(--gold)}
.art-viewer-header p,.art-viewer-controls p{margin:5px 0 0;font-size:.75rem;color:var(--muted);line-height:1.5}
.art-viewer-header button,.art-viewer-controls button{min-height:44px;flex-shrink:0}
.art-viewer-stage{min-height:0;overflow:auto;overscroll-behavior:contain;background:#080d19;border-radius:8px;scrollbar-color:#77623d #080d19}
.art-viewer-stage img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.art-viewer-stage.is-zoomed img{width:max(100%,1024px);height:auto;max-width:none}
.art-viewer-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px}
.art-viewer-controls p{margin:0}
.art-viewer-stage:focus-visible,.character-art-viewer button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hub-preparation{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px;margin-bottom:20px;align-items:center}
.hub-preparation h3{margin:0 0 8px}.hub-preparation p{color:#cbd3e9;font-size:.875rem;line-height:1.6}
.hub-preparation .equipment-preparation{margin:0}
.hub-preparation>div>button{width:100%;min-height:44px}
.selection-dock{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;margin-top:18px}
.selection-dock-party{display:flex;gap:10px;min-width:0;align-items:center;line-height:1.5}
.selection-dock-party strong{flex-shrink:0;color:var(--gold)}
.selection-dock-party span{font-size:.875rem;color:#d8dff0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selection-dock-actions{display:flex;gap:8px;flex-shrink:0}
.selection-dock-actions button{min-height:48px}
@media(max-width:900px){
  .status-shell{grid-template-columns:minmax(0,1fr)}
  .roster-nav{display:block;position:static;padding:12px;min-width:0}
  .roster-nav h2{font-size:1.2rem}.roster-nav>p{margin:5px 0 10px}
  .roster-tabs{display:flex;overflow-x:auto;gap:8px;padding-bottom:5px;scroll-snap-type:x proximity}
  .roster-tabs .roster-tab{flex:0 0 116px;grid-template-columns:1fr;min-height:100px;text-align:center;scroll-snap-align:start}
  .roster-tabs .roster-thumb{width:54px;height:54px;margin:auto}
  .roster-tabs .roster-tab small{font-size:.6875rem;line-height:1.4}
  .roster-scroll-hint{display:block}
  #app:has(.selection-dock){padding-bottom:calc(140px + env(safe-area-inset-bottom))}
  .selection-dock{position:fixed;inset:auto 0 0;z-index:15;margin:0;border-radius:12px 12px 0 0;background:#101a30f5;box-shadow:0 -5px 25px #0005;display:grid;gap:8px;padding:10px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .selection-dock-actions{display:flex}.selection-dock-actions button{flex:1 1 0;padding:10px 8px}
}
@media(max-width:540px){.hub-preparation{grid-template-columns:1fr;padding:14px;gap:14px}.character-art-viewer{padding:12px}.art-viewer-controls{gap:7px}.art-viewer-controls p{font-size:.6875rem}}

/* Passive support uses the same teal feedback as healing and the battle UI. */
.support-trait{display:grid;gap:3px;margin:10px 0 0;font-size:.875rem;line-height:1.5;color:var(--cyan,#75e5df)}
.support-trait span{color:var(--muted)}
.party-support{margin:14px 0;padding:12px 14px;border:1px solid #47777f;border-radius:10px;background:#142737;font-size:.875rem;line-height:1.6}
.party-support>strong{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;color:#93ebe3}
.party-support small{font-size:.8125rem;color:#b5c6d7}
.party-support>small{display:block;margin-top:8px}
.party-support p{margin:6px 0}
.support-entry{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:7px}
.support-entry span{color:#e0e9f3}
.support-inactive{opacity:.65}
.support-result{color:#97efc7;border-top:1px solid #34555c;padding-top:8px}

.story-illustration{margin:8px auto 18px;max-width:650px}
.story-illustration img{display:block;width:100%;height:auto;max-height:390px;object-fit:contain;border-radius:10px;image-rendering:pixelated}
.flashback-caption{margin-top:8px;text-align:center;color:var(--gold);font-size:.8125rem;line-height:1.5;letter-spacing:.04em}
.extras-menu{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0}
.extras-menu>button{min-height:44px;padding:9px 14px;font-size:.875rem}
.battle-speed{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.8125rem}
.battle-speed>span{color:var(--muted);margin-right:4px}
.battle-speed button{min-height:44px;padding:8px 12px;font:inherit;color:var(--ink);background:#1b2840;border:1px solid var(--line);border-radius:7px;cursor:pointer}
.battle-speed button[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan);background:#1b3b4b}
.battle-speed-bar{display:flex;justify-content:flex-end;margin:0 0 12px}
.cg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.cg-card{min-width:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#172239;color:var(--ink);padding:0;text-align:left;font:inherit}
button.cg-card{cursor:pointer}
.cg-card img{display:block;width:100%;height:150px;object-fit:cover}
.cg-card strong{display:block;padding:12px;font-size:.9375rem;line-height:1.5}
.cg-card[aria-pressed=true]{border-color:var(--gold)}
.cg-locked{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:206px;color:var(--muted);text-align:center}
.cg-locked>span{font-size:2rem;opacity:.5}.cg-locked small{padding:0 10px 16px;font-size:.8125rem}
.gallery-shell{padding:clamp(16px,3vw,32px)}
.gallery-viewer{padding:14px;background:#0d1526;border:1px solid var(--line);border-radius:10px;margin:20px 0}
.gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:8px 0}
.gallery-controls strong{flex:1;text-align:center;font-size:1rem}
.gallery-controls button{min-height:44px;padding:9px 12px;font-size:.875rem}
.gallery-image{max-height:75vh;overflow:auto;background:#080e1b;border-radius:8px}
.gallery-image img{display:block;width:100%;height:auto;max-height:65vh;object-fit:contain}
.gallery-image.zoomed img{width:175%;max-width:none;max-height:none}
.save-manager{padding:clamp(16px,3vw,32px)}
.save-tool{padding:20px 0;border-top:1px solid var(--line);margin-top:18px}
.save-tool p{line-height:1.7;overflow-wrap:anywhere}
.save-file-label{display:block;margin-bottom:10px;font-size:.9375rem}
.save-tool input[type=file]{display:block;width:100%;max-width:100%;padding:12px;border:1px solid var(--line);border-radius:7px;background:#172239;color:var(--ink);font:inherit}
.import-preview{margin-top:20px;padding:16px;border:1px solid #ffd36e66;border-radius:10px;background:#322e2233}
.import-preview dl>div{margin:12px 0}.import-preview dt{font-size:.8125rem;color:var(--muted)}.import-preview dd{margin:5px 0;font-size:.9375rem;line-height:1.6;overflow-wrap:anywhere}
.import-actions{display:flex;flex-wrap:wrap;gap:10px}.import-actions button{min-height:44px}
#save-manager-message{color:var(--gold);min-height:1.5em}
@media(max-width:700px){.cg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cg-card img{height:110px}.cg-card strong{padding:10px;font-size:.8125rem}.cg-locked{min-height:174px}.extras-menu>button{flex:1}.extras-menu .battle-speed{flex-basis:100%}.gallery-viewer{padding:8px}.gallery-controls strong{flex-basis:100%;order:-1}.gallery-image img{max-height:55vh}.import-actions button{flex:1}}

.chapter-character>img[src$="canal-captain.png"],.chapter-character>img[src$="village-requisition-captain.png"]{transform:scaleX(-1)}

.ending-illustration{margin:24px auto 30px;max-width:1000px}
.ending-illustration>a{display:block;border-radius:12px;overflow:hidden}
.ending-illustration img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;image-rendering:pixelated}
.ending-illustration figcaption{margin-top:14px;color:#ffe8b5;line-height:1.8;font-size:1rem}
.ending-illustration figcaption a{display:block;width:fit-content;margin:8px auto 0;padding:8px 12px;color:#a7e7e3;font-size:.9rem;text-underline-offset:4px}
.ending-illustration a:focus-visible{outline:3px solid #ffd36e;outline-offset:4px}

.staff-credits{position:fixed;inset:0;z-index:20;display:grid;grid-template-rows:auto minmax(0,1fr) auto;isolation:isolate;overflow:hidden;padding:max(20px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:#080c18;color:#fff3d9;text-align:center}
.staff-credits::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#080c18d9,#080c18ed),url('./assets/ending-homecoming-v2.png') center/cover;pointer-events:none}
.staff-header{padding:6px 0 18px;border-bottom:1px solid #ffd36e35}
.staff-header h2{margin:9px 0;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(1.4rem,4vw,2.2rem);letter-spacing:.15em}
.staff-header p{margin:0;color:#b9c3d5;font-size:.85rem;letter-spacing:.12em}
.staff-window{min-height:0;overflow:hidden;position:relative;mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent)}
.staff-track{max-width:760px;margin:0 auto;padding:32px 12px;--staff-start:100vh;--staff-duration:75s}
.staff-credits-roll .staff-track{animation:staff-credit-roll var(--staff-duration) linear both;will-change:transform}
@keyframes staff-credit-roll{from{transform:translateY(var(--staff-start))}to{transform:translateY(-100%)}}
.staff-track dl{margin:0}
.staff-credit{padding:22px 0 30px;break-inside:avoid}
.staff-credit dt{margin-bottom:12px;color:#d0b780;font-size:clamp(.82rem,2.6vw,1rem);letter-spacing:.16em;line-height:1.7}
.staff-credit dd{margin:0;font-size:clamp(1.4rem,4.7vw,2rem);font-weight:600;letter-spacing:.08em;line-height:1.6;overflow-wrap:anywhere}
.staff-credit .staff-credit-note{margin-top:6px;font-size:.75rem;font-weight:400;color:#aab5c9}
.staff-roll-thanks{padding:60px 0 72px;line-height:2}
.staff-roll-thanks span{color:#b9c3d5;font-size:.9rem}
.staff-roll-thanks strong{display:block;margin:12px 0 36px;color:#ffe4a9;font-size:1.8rem}
.staff-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding-top:16px;border-top:1px solid #ffd36e35}
.staff-controls button{min-height:44px;padding:10px 16px;font-size:.85rem}
.staff-credits button:focus-visible,.staff-window:focus-visible,.staff-finale:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.staff-credits-list .staff-window{overflow-y:auto;overscroll-behavior:contain;mask-image:none;scrollbar-color:#736442 #101525}
.staff-finale{min-height:0;overflow-y:auto;align-self:stretch;padding:24px 0;overscroll-behavior:contain}
.staff-finale img{display:block;width:min(660px,100%);max-height:48vh;object-fit:contain;height:auto;margin:auto;border-radius:8px;image-rendering:pixelated}
.staff-thanks{margin:24px 0 12px;font-size:clamp(1.15rem,4.5vw,1.8rem);line-height:1.7;color:#ffe4a9}
.staff-finale>p:last-child{color:#b9c3d5;font-size:.9rem}
@media(max-width:600px){.staff-header{padding-bottom:12px}.staff-controls{gap:8px;padding-top:12px}.staff-controls button{flex:1 1 40%;padding:9px 10px}.staff-credit{padding:20px 0 26px}.staff-finale{padding-top:18px}}
@media(prefers-reduced-motion:reduce){.staff-credits-roll .staff-track{animation:none;transform:none;will-change:auto}.staff-window{overflow-y:auto;mask-image:none}}

.postgame-stage{max-width:1000px;margin:24px auto;padding:clamp(18px,4vw,34px)}
.postgame-stage>p{color:var(--muted);line-height:1.7}
.postgame-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
.postgame-grid article{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid var(--line);border-radius:10px;background:rgba(7,10,23,.4)}
.postgame-grid h3,.postgame-grid p{margin:0}
.postgame-grid p,.postgame-grid small{line-height:1.7;color:var(--muted)}
.postgame-grid small{display:block;font-size:.8rem}
.postgame-grid button{width:100%;min-height:48px;margin-top:auto}
.postgame-grid .postgame-hard{border-color:var(--gold);background:linear-gradient(145deg,rgba(90,48,28,.35),rgba(7,10,23,.55))}
.postgame-entry{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;padding:18px}
.postgame-entry p{margin:6px 0 0;color:var(--muted)}
.postgame-entry button{min-height:44px}
.hard-mode-note{color:var(--gold)!important}
.mode-save-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0}
.mode-save-actions button{min-height:44px}
@media(max-width:640px){.postgame-grid{grid-template-columns:1fr}.postgame-entry button,.mode-save-actions button{width:100%}}

/* Two portraits share the frame; relationships are readable on a phone. */
.preparation-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
.cooperation-hub{padding:24px}
.cooperation-list{display:grid;gap:14px;margin-top:16px}
.cooperation-card{display:grid;grid-template-columns:minmax(100px,180px) minmax(0,1fr);gap:16px;padding:14px;border:1px solid var(--line);border-radius:10px;background:#10172c99}
.cooperation-card h3{margin:6px 0;color:var(--gold)}
.cooperation-card p{font-size:.875rem;line-height:1.7}
.cooperation-card button{min-height:44px;white-space:normal}
.cooperation-portraits{display:flex;align-items:end;justify-content:center;overflow:hidden;gap:4px}
.cooperation-portraits>.cooperation-portrait{flex:var(--portrait-ratio,.6666666667) 1 0%;min-width:0;width:0}
.cooperation-portrait[src$="princess-commander.png"]{--portrait-ratio:1}
.cooperation-portrait{display:block;width:100%;height:180px;object-fit:contain;object-position:center bottom}
.cooperation-memory{display:grid;grid-template-columns:minmax(200px,.75fr) minmax(0,1fr);gap:16px;overflow:hidden}
.cooperation-memory>.cooperation-portraits{padding:18px;background:radial-gradient(ellipse at bottom,#68517466,transparent 70%)}
.cooperation-memory .cooperation-portrait{height:380px}
.cooperation-picker{margin:12px 0;display:grid;gap:6px}
.cooperation-picker h3{margin:0;font-size:.875rem;color:var(--gold)}
.cooperation-picker button{min-height:48px;white-space:normal;text-align:left;border-color:#a89460}
.cooperation-picker button[aria-pressed=true]{background:#66533866;box-shadow:inset 3px 0 var(--gold)}
.cooperation-picker small{display:block;color:var(--muted);font-size:.75rem;margin-top:4px}
@media(max-width:760px){.preparation-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.cooperation-hub{padding:16px}.cooperation-card{grid-template-columns:1fr;padding:12px;gap:8px}.cooperation-card>.cooperation-portraits{max-height:160px}.cooperation-memory{grid-template-columns:1fr;gap:0}.cooperation-memory>.cooperation-portraits{padding:10px}.cooperation-memory .cooperation-portrait{height:180px}.cooperation-memory .event-copy{padding:18px}.cooperation-memory .dialogue{min-height:110px}}
.relationship-scenes{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.relationship-scenes>h3{margin:0 0 8px;color:var(--gold)}

.status-tablist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:16px;padding:5px;border:1px solid var(--line);border-radius:10px;background:#0a1128}
.status-tablist button{min-width:0;min-height:46px;padding:10px 6px;border:1px solid transparent;border-radius:6px;color:var(--muted);font:inherit;font-size:.875rem;font-weight:700;cursor:pointer;background:transparent}
.status-tablist button[aria-selected=true]{color:var(--ink);border-color:var(--char-accent);background:color-mix(in srgb,var(--char-accent) 16%,#111a31)}
.status-tablist button:focus-visible,.status-tab-panel:focus-visible{outline:2px solid var(--char-accent);outline-offset:3px}
.status-tab-panel[hidden]{display:none!important}
.character-profile{padding:16px;border:1px solid var(--line);border-radius:10px;background:#0b132899}
.character-profile h3{margin:6px 0 12px}
.profile-introduction{margin:0 0 18px;color:#dce1f0;line-height:1.8}
.profile-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.profile-facts>div{padding:12px;border:1px solid var(--line);border-radius:8px;background:#17213977}
.profile-facts dt,.profile-relations dt{color:var(--gold);font-size:.8125rem;font-weight:700}
.profile-facts dd{margin:7px 0 0;font-size:.9375rem;line-height:1.6;overflow-wrap:anywhere}
.profile-note{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.profile-note p,.profile-relations dd{color:var(--muted);font-size:.875rem;line-height:1.8}
.profile-note p{margin:0}
.profile-note button{margin-top:12px;min-height:44px}
.profile-relations{margin:0;display:grid;gap:12px}
.profile-relations dd{margin:4px 0 0}
@media(max-width:540px){.status-tablist{gap:3px;padding:4px}.status-tablist button{font-size:.8125rem;padding:10px 3px}.character-profile{padding:12px}.profile-facts{gap:7px}.profile-facts>div{padding:10px}.profile-facts>div:nth-child(n+3){grid-column:1/-1}}

/* On narrow screens, daily scenes keep the uncropped CG above the dialogue. */
.cooperation-memory.illustrated-memory{grid-template-columns:minmax(0,1fr);gap:0;padding:0}
.relationship-art{margin:0;background:#171b30}
.relationship-art img{display:block;width:100%;height:auto;aspect-ratio:3/2}
.illustrated-memory .event-copy{padding:24px;min-width:0}
@media(max-width:760px){.illustrated-memory .event-copy{padding:18px}.illustrated-memory .dialogue{min-height:0}}

.event-stage.petit-event.illustrated-memory{grid-template-columns:minmax(0,1fr);gap:0;padding:0;min-height:0}
.event-stage.petit-event.illustrated-memory::before{display:none}

/* Readable on the map and hub, with a direct route to the newest conversation. */
.ready-relationship{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;margin-bottom:16px;border-color:#7ce1d455}
.ready-relationship p{margin:6px 0 0;color:var(--muted);line-height:1.6}.ready-relationship button{flex-shrink:0;min-height:44px}
@media(max-width:540px){.ready-relationship{align-items:stretch;flex-direction:column;padding:14px}.ready-relationship button{width:100%}.status-detail .stat-grid strong{font-size:1.1rem}}

.operation-buffs{margin-top:10px;color:var(--muted);font-size:.8rem}.operation-buffs summary{cursor:pointer;min-height:44px;display:flex;align-items:center}.operation-buffs summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.operation-buffs summary::after{content:"＋";margin-left:auto;padding-left:10px}.operation-buffs[open] summary::after{content:"−"}

.gallery-registration{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px;margin:18px 0 10px;border:1px solid var(--line);border-radius:10px;background:#10192c}.gallery-registration p{margin:8px 0 0;line-height:1.6;color:var(--muted)}.gallery-registration .gallery-wallet{color:var(--gold)}.gallery-registration>button{min-height:44px;flex-shrink:0}.cg-card>small{display:block;padding:0 12px 12px;color:var(--muted);font-size:.8rem}.cg-unregistered{cursor:default}.cg-unregistered button{margin:0 10px 12px;width:calc(100% - 20px);min-height:44px}#gallery-message{min-height:1.5em;color:var(--cyan);line-height:1.6}
@media(max-width:700px){.gallery-registration{align-items:stretch;flex-direction:column;padding:14px}.gallery-registration>button{width:100%}.cg-unregistered button{font-size:.85rem}}

/* Desktop conversations fit below the actual header; controls stay in view.
   Mobile retains the existing image-then-text reading layout. */
@media (min-width:901px) {
  #app:has(>.chapter-stage,>.event-stage,>.cooperation-memory) {
    height:100vh;height:100dvh;min-height:0;
    display:flex;flex-direction:column;
  }
  #app:has(>.chapter-stage,>.event-stage,>.cooperation-memory)>.topbar {flex:none}
  #app>.chapter-stage,#app>.event-stage,#app>.cooperation-memory {
    flex:1;min-height:0;min-width:0;position:relative;
  }
  .event-stage>.event-art {min-height:0;height:100%}
  .event-stage .event-portrait {height:100%;max-height:100%}
  .event-stage .petit-cast {min-height:0}
  .event-stage .petit-cast img {height:min(360px,48vh)}
  .cooperation-memory>.cooperation-portraits {min-height:0}
  .cooperation-memory .cooperation-portrait {height:min(380px,50vh)}
  :is(.event-stage,.cooperation-memory)>.event-copy {
    min-height:0;padding:20px;overflow:auto;
  }
  :is(.event-stage,.cooperation-memory) .event-copy h2 {font-size:1.65rem;margin:6px 0 12px}
  :is(.event-stage,.cooperation-memory) .dialogue {min-height:0}
  .event-copy .event-progress {margin:10px 0}
  .event-copy>.primary {flex:none;min-height:44px}

  /* Shared grid cell puts the CG behind the translucent reading window.
     Contain preserves the full composition instead of cropping faces. */
  #app>.illustrated-memory {
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  }
  .illustrated-memory>.relationship-art,
  .illustrated-memory>.event-copy {grid-area:1/1;min-width:0;min-height:0}
  .illustrated-memory>.relationship-art {height:100%;overflow:hidden}
  .illustrated-memory>.relationship-art img {
    width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:center;
  }
  .illustrated-memory>.event-copy {
    align-self:end;z-index:2;margin:16px;padding:16px 20px;
    max-height:min(60%,380px);overflow:hidden;justify-content:flex-start;
    border:1px solid #d1d9ff40;border-radius:12px;
    background:rgba(8,13,30,.8);backdrop-filter:blur(8px);
    box-shadow:0 8px 30px #0007;
  }
  .illustrated-memory .event-copy>.eyebrow,
  .illustrated-memory .event-copy>h2,
  .illustrated-memory .event-copy>button,
  .illustrated-memory .event-copy>.event-progress {flex:none}
  .illustrated-memory .event-copy>.eyebrow {font-size:.7rem}
  .illustrated-memory .event-copy>h2 {font-size:1.4rem;margin:4px 0 10px}
  .illustrated-memory .event-copy>.dialogue {
    flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
    padding:10px 14px;background:#06091766;
  }
  .illustrated-memory .dialogue p {margin:6px 0 0;font-size:1rem;line-height:1.7}
  .illustrated-memory .event-copy>.primary {margin-top:10px}
  .illustrated-memory .event-copy>.memory-note {flex:none;margin:8px 0 0;font-size:.75rem;line-height:1.4}
  .illustrated-memory .event-copy>.secondary {flex:none;margin-top:8px;min-height:36px;padding:6px 12px}

  .chapter-stage {display:flex;flex-direction:column}
  .chapter-stage>.chapter-heading {flex:none;padding:16px 20px 0;z-index:1}
  .chapter-stage .chapter-heading h2 {font-size:1.6rem}
  .chapter-stage>.chapter-cast {flex:1;min-height:0;padding:8px 20px 0}
  .chapter-stage .chapter-character {height:100%;min-height:0}
  .chapter-stage .chapter-character img {height:calc(100% - 48px);aspect-ratio:auto;object-fit:contain}
  .chapter-stage .chapter-character figcaption {min-height:48px;height:48px;font-size:.875rem}
  .chapter-stage>.chapter-dialogue {
    flex:none;min-height:0;max-height:48%;display:flex;flex-direction:column;padding:16px 20px;
  }
  .chapter-stage .chapter-dialogue>p {flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;margin:8px 0 12px;font-size:1rem;line-height:1.7}
  .chapter-stage .chapter-controls {flex:none}
  .chapter-stage .chapter-controls button {min-height:44px}
  .chapter-stage>.gate-panorama {flex:1;min-height:0;height:auto}
  .chapter-stage:has(>.story-illustration) {display:block}
  .chapter-stage>.story-illustration {position:absolute;inset:0;margin:0;max-width:none}
  .chapter-stage>.story-illustration img {width:100%;height:100%;max-height:none;object-fit:contain;border-radius:0}
  .chapter-stage>.story-illustration .flashback-caption {position:absolute;top:92px;left:20px;right:20px;margin:0;text-shadow:0 2px 4px #000;background:#080d1ecc;border-radius:6px;padding:6px}
  .chapter-stage:has(>.story-illustration)>.chapter-dialogue {
    position:absolute;left:16px;right:16px;bottom:16px;z-index:2;
    border:1px solid #d1d9ff40;border-radius:12px;
    background:rgba(8,13,30,.8);backdrop-filter:blur(8px);box-shadow:0 8px 30px #0007;
  }
}
@media (min-width:901px) and (max-height:640px) {
  .illustrated-memory>.event-copy {margin:12px;padding:12px 16px;max-height:calc(100% - 24px)}
  .illustrated-memory .event-copy>.memory-note {display:none}
  .illustrated-memory .event-copy>h2 {font-size:1.2rem;margin:3px 0 6px}
}

/* Secondary map tools are closed on entry; native disclosure supports keyboard. */
.map-optional.side-card{padding:0}
.map-optional>summary{padding:12px 14px;min-height:48px;cursor:pointer;font-weight:700;font-size:.9375rem;overflow-wrap:anywhere}
.map-optional>summary::marker{color:var(--cyan)}
.map-optional>summary:focus-visible{outline:2px solid var(--gold);outline-offset:-3px;border-radius:10px}
.map-optional>summary>small{display:inline;margin-left:8px;font-size:.75rem;font-weight:400;color:var(--muted)}
.map-optional[open]>summary{border-bottom:1px solid var(--line)}
.map-optional-body{padding:12px 14px 14px}
.map-optional-body>.mission:first-child{margin-top:0}

/* Soundtrack room, available after the final chapter. */
.music-room{max-width:1060px;margin:20px auto;padding:0;overflow:hidden}
.music-room-intro{padding:clamp(24px,4vw,44px);background:linear-gradient(90deg,#10172bef,#10172b99),url('./assets/title-reclamation.png') center 42%/cover}
.music-room-intro h2{font-size:clamp(1.6rem,4vw,2.4rem);margin:12px 0}.music-room-intro p{color:#d2daeb}.music-room-intro>span{font-size:.8rem;color:var(--gold)}
.music-room-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;padding:28px}
.music-deck{align-self:start;min-width:0;position:sticky;top:20px}.music-deck h3{font-size:clamp(1.3rem,3vw,1.8rem);line-height:1.4;min-height:2.8em;margin:8px 0 24px;overflow-wrap:anywhere}.music-deck>p:first-of-type{color:var(--cyan);margin:16px 0 0}
.music-deck audio{width:100%;display:block;color-scheme:dark}.music-transport{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.music-transport button{min-height:44px;flex:1;font-size:.8rem;white-space:nowrap}.music-transport button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}.music-message{color:#acb9d3;font-size:.85rem;line-height:1.7;min-height:3.4em}
.music-track-list{display:flex;flex-direction:column;gap:8px;min-width:0}.music-track{display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:12px 14px;text-align:left;background:#111a2d;border:1px solid #394762;border-radius:10px;color:#eff3ff}.music-track>span:nth-child(2){flex:1;min-width:0}.music-track small,.music-track strong{display:block;line-height:1.5}.music-track small{color:#aebed7;font-size:.75rem}.music-track strong{font-size:.95rem;overflow-wrap:anywhere}.music-track-number{color:#7d90ac;font-size:.85rem}.music-track-play{color:var(--gold);font-size:.7rem}.music-track[aria-pressed="true"]{border-color:var(--gold);background:linear-gradient(110deg,#3b3440,#20283e)}.music-track[aria-pressed="true"] .music-track-number{color:var(--gold)}.music-track:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
@media(max-width:700px){.music-room-grid{grid-template-columns:1fr;gap:16px;padding:18px}.music-deck{position:static}.music-deck h3{min-height:0;margin-bottom:16px}.music-room-intro{padding:24px 18px}.music-track{min-height:68px}}

.graus-awakening{max-width:1060px;margin:20px auto;display:grid;grid-template-columns:minmax(250px,.9fr) minmax(0,1.1fr);padding:24px;gap:30px;align-items:center;background:radial-gradient(ellipse at 20% 70%,#722a2e66,transparent 60%),#11182a}.graus-awakening-art{min-width:0;display:flex;justify-content:center}.graus-awakening-art img{width:100%;height:min(65dvh,650px);object-fit:contain;filter:drop-shadow(0 0 16px #d9643744)}.graus-awakening-copy h2{font-size:clamp(1.5rem,4vw,2.3rem);line-height:1.4;margin:10px 0 20px}.graus-awakening-copy>p{line-height:1.85;color:#d4d9e6}.graus-awakening-copy .graus-last-quote{font-size:1.1rem;color:#ffdcaa;font-weight:700}.graus-last-rules{margin:20px 0;padding:16px;border:1px solid #ba855666;border-radius:10px;background:#1b1d31}.graus-last-rules>strong{color:var(--gold)}.graus-last-rules p{font-size:.9rem;line-height:1.7}.graus-last-rules small{display:block;font-size:.8rem;line-height:1.7;color:#b9c4d8}.graus-awakening-copy>.primary{width:100%;min-height:50px}
@media(max-width:700px){.graus-awakening{grid-template-columns:1fr;gap:8px;padding:18px}.graus-awakening-art img{height:240px;max-height:35dvh}.graus-awakening-copy h2{margin:8px 0 14px}.graus-last-rules{margin:14px 0;padding:12px}}

.boss-rematch-prep{max-width:1060px;margin:20px auto;padding:26px}.boss-rematch-prep h2{font-size:clamp(1.5rem,4vw,2.2rem);margin:10px 0}.boss-rematch-prep>p{line-height:1.8;color:#c7d0e2}.boss-rematch-rules{padding:15px 18px;margin:20px 0;border:1px solid #d6aa6a66;border-radius:10px;background:#272338}.boss-rematch-rules strong{color:var(--gold)}.boss-rematch-rules p{font-size:.9rem;line-height:1.8;margin-bottom:0}.boss-rematch-prep h3{font-size:1rem}.boss-rematch-prep h3 span{color:var(--gold);margin-left:8px}.boss-rematch-roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.boss-rematch-pick{display:flex;align-items:center;gap:10px;min-width:0;min-height:100px;padding:10px;text-align:left;color:var(--ink);background:#17223a;border:1px solid #61718b77;border-radius:10px}.boss-rematch-pick .roster-thumb{width:58px;height:78px;flex-shrink:0}.boss-rematch-pick strong,.boss-rematch-pick small{display:block;line-height:1.5}.boss-rematch-pick small{color:#b3c1db;font-size:.8rem}.boss-rematch-pick[aria-pressed="true"]{background:#3b3245;border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.boss-rematch-pick:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}.boss-rematch-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.boss-rematch-actions button{min-height:48px;flex:1}.boss-rematch-result{max-width:760px;margin:20px auto}
@media(max-width:700px){.boss-rematch-prep{padding:18px}.boss-rematch-roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.boss-rematch-pick{padding:8px;gap:6px}.boss-rematch-pick .roster-thumb{width:44px;height:64px}.boss-rematch-actions{flex-direction:column}}

.site-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; padding:8px 16px 28px; font-size:.75rem; color:rgba(255,255,255,.55); }
.site-footer a { color:rgba(255,255,255,.75); text-decoration:underline; text-underline-offset:4px; }
.policy-page { width:min(720px,100%); margin:0 auto; padding:32px 22px 48px; line-height:1.8; }
.policy-page h1 { font-size:1.5rem; margin:0 0 16px; }
.policy-page h2 { font-size:1.05rem; margin:28px 0 6px; color:var(--gold); }
.policy-page p { margin:0 0 10px; }
.policy-page a { color:rgba(255,255,255,.85); text-underline-offset:4px; }
.policy-links { margin-top:32px; }
.site-footer .share-btn { background:none; border:0; padding:0; font:inherit; color:rgba(255,255,255,.75); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }