/* Visual novel stage: persistent location, independent cast and bottom textbox. */
.campaign{height:100dvh;overflow:hidden;background:#151c24}
.campaign header{position:fixed;z-index:5;top:0;left:0;right:0;height:54px;padding:8px 24px;background:linear-gradient(#101920df,#10192090);border:0;pointer-events:none}
.campaign header a{pointer-events:auto}.campaign .edition{font-size:12px}
.campaign main{max-width:none;margin:0;padding:0;height:100dvh}
.campaign .scene{position:absolute;inset:0;height:100%;border:0;border-radius:0;background-position:center;background-size:cover;transition:background-image .25s}
.campaign .scene[data-background=gate]{background-image:url('./backgrounds/gate.png')}
.campaign .scene[data-background=hall]{background-image:url('./backgrounds/hall.png')}
.campaign .scene:after{content:'';position:absolute;inset:0;background:linear-gradient(#10212b33,transparent 25%,#10212b44 70%,#07141be6);pointer-events:none}
.campaign .setting{top:72px;left:4%;z-index:1;background:#14242bc9;padding:10px 18px;border-left:2px solid #e3bc74;max-width:80%;text-shadow:0 2px 4px #000}
.campaign .setting h1{font-size:clamp(17px,2vw,25px);margin:0}.campaign #location{font-size:10px;letter-spacing:.15em}.campaign #subtitle{display:none}
.campaign .dialogue{position:absolute;z-index:3;bottom:18px;left:4%;right:4%;min-height:0;max-height:43dvh;overflow:auto;padding:16px 24px;background:linear-gradient(110deg,#12232bf2,#182a34ed);border:1px solid #c9b582;border-top:3px solid #e3bc74;border-radius:3px;box-shadow:0 12px 50px #0008}
.campaign .caption{border-bottom:1px solid #aec5ca33;padding-bottom:7px}.campaign .caption h2{font-size:18px;letter-spacing:.02em}
.campaign #story{font:clamp(17px,1.65vw,23px)/1.55 Georgia,serif;max-width:none;margin:12px 0;min-height:2.9em;white-space:pre-line}
.reading{display:flex;align-items:center;gap:14px;justify-content:flex-end}.reading button{padding:5px 12px;font-size:13px}.reading span{font-size:12px;color:#bdc9cb}.reading #previous{margin-right:auto}
.campaign #choices{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:8px}.campaign #choices button{font-size:14px;background:#263b42ef;padding:9px 12px}
#actors{position:absolute;z-index:2;inset:19% 8% 26%;display:flex;justify-content:space-evenly;align-items:end;gap:2%;pointer-events:none}
.actor{margin:0;position:relative;min-width:0;width:24%;max-width:290px;opacity:.55;transform:scale(.94);transform-origin:bottom;transition:opacity .2s,transform .2s;animation:actor-in .25s ease-out}
.actor.speaking{opacity:1;transform:scale(1.04);z-index:2}.actor.leaving{opacity:0;transform:translateY(12px);position:absolute}
.actor img{display:block;object-fit:contain;width:100%;height:min(44dvh,360px);image-rendering:pixelated;filter:drop-shadow(0 10px 8px #0009)}
.actor figcaption{position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:2px 10px;white-space:nowrap;font-size:12px;background:#14232ee8;border:1px solid #b5a077;color:#eee4cd;border-radius:3px}
.campaign .scene-sprite{z-index:2;width:130px;height:130px;bottom:29%;right:12%}
#egg{position:absolute;z-index:2;bottom:31%;left:47%;width:64px;height:85px;border-radius:50% 50% 44% 44%;background:radial-gradient(ellipse at 30% 25%,#809b69 0 10%,transparent 11%),radial-gradient(ellipse at 65% 60%,#809b69 0 14%,transparent 15%),#fff1d1;box-shadow:0 6px 14px #0008}
#egg.warming{box-shadow:0 0 28px #ffb95eaa;animation:warm 1.8s ease-in-out infinite}
#menu-toggle{position:fixed;z-index:12;right:18px;top:10px;font-size:12px;padding:6px 12px;background:#14252de8}
.campaign .controls{position:fixed;z-index:11;top:54px;right:18px;width:min(320px,90vw);padding:16px;background:#14252dfc;border:1px solid #b4a37c;box-shadow:0 12px 25px #0008}
.campaign #save-status{display:block;width:100%;margin:0;font-size:11px}
.campaign .detail-panel{position:fixed;z-index:10;inset:64px 4% 20px;overflow:auto;padding:24px;background:#14242cfc;border:1px solid #b4a37c;box-shadow:0 10px 50px #000b}
.close-panel{float:right;position:sticky;top:0;background:#263b42}
.campaign #error:not(:empty){position:fixed;z-index:20;top:58px;left:4%;max-width:70%;background:#522a29;padding:12px;border:1px solid #e0a69a}
.campaign footer{display:none}.campaign[data-phase=avatar] .dialogue{max-height:80dvh;left:15%;right:15%}.campaign[data-phase=avatar] #actors{display:none}.campaign[data-phase=avatar] .setting{display:none}
.campaign[data-phase=avatar] #story{min-height:0;font-size:17px}.campaign .avatar-layout{margin:14px 0;gap:18px}.campaign .avatar-fields{gap:10px}.campaign #complete-note{margin:8px 0;font-size:12px}
@keyframes actor-in{from{opacity:0;transform:translateY(12px)}to{opacity:.55}}
@keyframes warm{50%{transform:rotate(3deg)}}
@media(max-width:620px){.campaign header{padding:8px 12px}.campaign .edition{display:none}.campaign .brand{font-size:16px}.campaign .setting{top:63px;left:3%;padding:6px 10px}.campaign .setting h1{font-size:17px}.campaign .dialogue{left:3%;right:3%;bottom:10px;padding:12px;max-height:48dvh}.campaign #story{font-size:17px;line-height:1.45;min-height:3em}.campaign .caption h2{font-size:15px}.campaign #choices{grid-template-columns:1fr}.campaign #choices button{padding:7px;font-size:13px}#actors{inset:22% 2% 42%;gap:0}.actor{width:25%}.actor img{height:27dvh}.actor figcaption{font-size:10px;padding:2px 4px;max-width:120%;overflow:hidden}.campaign .scene-sprite{bottom:43%;width:82px;height:82px;right:8%}#egg{bottom:44%;width:44px;height:59px}.campaign[data-phase=avatar] .dialogue{left:3%;right:3%;max-height:88dvh}.campaign .portrait-wrap{display:none}.campaign .avatar-layout{grid-template-columns:1fr}.campaign .detail-panel{inset:58px 3% 10px;padding:16px}}
@media(prefers-reduced-motion:reduce){.campaign *, .campaign *:after{animation:none!important;transition:none!important}}
#mentor-partners{position:absolute;z-index:2;bottom:28%;left:5%;display:flex;gap:16px;pointer-events:none}#mentor-partners img{width:105px;height:105px;image-rendering:pixelated;filter:drop-shadow(0 5px 5px #0008)}
@media(max-width:620px){#mentor-partners{bottom:43%;left:2%;gap:0}#mentor-partners img{width:64px;height:64px}}
.campaign main{position:relative;display:flow-root}
@media(max-width:620px){#actors{inset:18% 0 32%;overflow:clip}.actor{flex:1;width:auto}.actor img{width:190px;max-width:none;height:290px;margin-left:calc(50% - 95px)}.actor figcaption{bottom:18px}}
/* Close staging: foreground interlocutor or opposing sides, with feet behind the textbox. */
#actors{inset:9% 0 5%;overflow:clip;align-items:end;gap:0}
#actors .actor{flex:none;width:52%;max-width:none;transform:scale(.96)}
#actors .actor.speaking{transform:scale(1.04)}
#actors .actor img{width:100%;height:85dvh;margin:0;object-fit:contain;object-position:center bottom}
#actors .actor figcaption{display:none}
#actors[data-layout=front] .actor{width:min(90vw,900px)}
#actors[data-layout=exchange]{justify-content:space-between}
#actors[data-layout=exchange] .actor:first-child{margin-left:-6%}
#actors[data-layout=exchange] .actor:last-child{margin-right:-6%}
#avatar-sprites{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.avatar-choice{text-align:center;padding:6px;background:#263b42}.avatar-choice[aria-pressed=true]{border:3px solid var(--gold);background:#405246}
.avatar-choice img{width:100%;height:160px;image-rendering:pixelated;object-fit:contain}
.identity-sprite{width:240px;height:300px;object-fit:contain;image-rendering:pixelated}
#avatar-form>label{display:inline-flex;flex-direction:column;gap:4px;margin:6px 16px 6px 0}
#avatar-name{font:inherit;background:#14252d;color:var(--ink);border:1px solid #8b997f;padding:10px;max-width:100%}
@media(max-width:620px){#actors{inset:12% 0 12%}#actors .actor{width:75%}#actors .actor img{height:72dvh;width:100%;margin:0}#actors[data-layout=front] .actor{width:140%;flex-shrink:0}#actors[data-layout=exchange] .actor:first-child{margin-left:-23%}#actors[data-layout=exchange] .actor:last-child{margin-right:-23%}#avatar-sprites{grid-template-columns:repeat(2,1fr)}.avatar-choice img{height:115px}#avatar-form>label{max-width:100%}}
.avatar-change{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}.avatar-change button{display:flex;flex-direction:column;align-items:center;font-size:12px}.avatar-change img{width:90px;height:100px;object-fit:contain;image-rendering:pixelated}
/* Pokémon occupy the middle scale, below foreground trainers. */
.campaign .scene-sprite{width:240px;height:240px;right:10%;bottom:27%}
#mentor-partners img{width:160px;height:160px}
@media(max-width:620px){.campaign .scene-sprite{width:145px;height:145px;right:6%;bottom:43%}#mentor-partners img{width:100px;height:100px}}
#battle-stage{position:absolute;inset:0;z-index:2;pointer-events:none}
.combat-mon{position:absolute;width:280px;text-align:center}.combat-mon.own{left:12%;bottom:29%}.combat-mon.foe{right:12%;bottom:40%}
.combat-mon .pokemon-sprite{width:240px;height:240px;filter:drop-shadow(0 12px 8px #0008)}
.combat-status{background:#15262ded;border:1px solid #b9ac7a;padding:8px 14px;border-radius:5px;display:grid;gap:3px}.combat-status strong{font-size:20px;color:#ead392}.combat-status span{font-size:13px}.combat-status meter{width:100%;height:18px}
@media(max-width:620px){.combat-mon{width:155px}.combat-mon.own{left:3%;bottom:37%}.combat-mon.foe{right:3%;bottom:51%}.combat-mon .pokemon-sprite{width:145px;height:145px}.combat-status{padding:5px 8px}.combat-status strong{font-size:15px}.combat-status span{font-size:11px}.campaign[data-phase=forest] .dialogue{max-height:38dvh}.campaign[data-phase=forest] #story{font-size:15px}}
.campaign .scene[data-background=edge]{background-image:url('./backgrounds/edge.png')}
.campaign .scene[data-background=grove]{background-image:url('./backgrounds/grove.png')}
.campaign .scene[data-background=lake]{background-image:url('./backgrounds/lake.png')}
#battle-stage{overflow:clip}.combat-mon .pokemon-sprite{width:320px;height:320px;margin-left:calc(50% - 160px)}
@media(max-width:620px){.combat-mon .pokemon-sprite{width:220px;height:220px;margin-left:calc(50% - 110px)}}
#passive-notice{position:fixed;left:12px;right:12px;top:60px;z-index:7;background:#182e28f2;border:1px solid #c4b983;padding:8px 12px;font-size:13px;pointer-events:none;animation:notice-fade 8s forwards}
@keyframes notice-fade{0%,75%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#passive-notice{animation:none;position:static}}

/* Classic battle screen: the field and command panel have their own layout. */
body[data-combat=true] .scene{background:linear-gradient(#c4e7ee 0%,#e9f5d6 46%,#92b677 47%,#d9d0a5 100%)}
body[data-combat=true] .setting,body[data-combat=true] .reading{display:none}
body[data-combat=true] .dialogue{background:#f8f3df;color:#202e37;border:5px double #536768;border-radius:12px;max-height:36dvh;min-height:170px;padding:12px 20px}
body[data-combat=true] #speaker{color:#304b45}body[data-combat=true] #story{font-size:16px;max-height:8dvh;overflow:auto;margin:4px 0 10px}
body[data-combat=true] #choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
body[data-combat=true] #choices button{background:#fffdf3;color:#233a40;border:2px solid #718780;border-radius:8px;padding:9px;text-align:left}
body[data-combat=true] #choices button:disabled{opacity:.45}body[data-combat=true] #choices button:focus-visible{outline:3px solid #b34535}
body[data-combat=true] .combat-mon.own{left:8%;bottom:32%}body[data-combat=true] .combat-mon.foe{right:8%;bottom:56%}
body[data-combat=true] .combat-status{background:#fffbe9;color:#273b3c;border:3px solid #647964;border-radius:16px 4px;box-shadow:3px 4px #0003}
body[data-combat=true] .combat-status strong{color:#263b35}
body[data-combat=true] .combat-mon .pokemon-sprite{width:240px;height:240px;margin-left:calc(50% - 120px);image-rendering:pixelated}
body[data-combat=true] .combat-mon.own .pokemon-sprite{width:280px;height:280px;margin-left:calc(50% - 140px)}
@media(max-width:620px){body[data-combat=true] .combat-mon{width:155px}body[data-combat=true] .combat-mon.own{left:4%;bottom:34%}body[data-combat=true] .combat-mon.foe{right:4%;bottom:59%}body[data-combat=true] .combat-mon .pokemon-sprite{width:155px;height:155px;margin-left:0}body[data-combat=true] .combat-mon.own .pokemon-sprite{width:180px;height:180px;margin-left:-12px}body[data-combat=true] .dialogue{padding:8px 12px}body[data-combat=true] #story{font-size:14px}body[data-combat=true] .combat-status strong{font-size:14px}}

body[data-combat=true] .combat-mon[data-count="3"]{width:28%;left:calc(3% + var(--slot)*33%);right:auto}
body[data-combat=true] .combat-mon[data-count="3"][data-position="0"]{--slot:0}
body[data-combat=true] .combat-mon[data-count="3"][data-position="1"]{--slot:1}
body[data-combat=true] .combat-mon[data-count="3"][data-position="2"]{--slot:2}
body[data-combat=true] .combat-mon[data-count="3"] .pokemon-sprite{width:150px;height:150px;margin-left:calc(50% - 75px)}
@media(max-width:620px){body[data-combat=true] .combat-mon[data-count="3"] .pokemon-sprite{width:100px;height:100px;margin-left:calc(50% - 50px)}body[data-combat=true] .combat-mon[data-count="3"] .combat-status{padding:3px;border-width:2px}body[data-combat=true] .combat-mon[data-count="3"] .combat-status strong{font-size:11px}body[data-combat=true] .combat-mon[data-count="3"] .combat-status span{font-size:9px}}
body.campaign[data-combat=true] .scene[data-background]{background-image:linear-gradient(#bedfe7 0%,#e7efcd 41%,#a5bf83 42%,#d7cc9d 100%)}
body.campaign[data-combat=true] .scene:after{background:none}
body[data-combat=true] .combat-mon{isolation:isolate}
body[data-combat=true] .combat-mon:after{content:'';position:absolute;left:4%;right:4%;height:20%;bottom:2%;border-radius:50%;background:#84975b;border:4px solid #bcc68b;z-index:-1;box-shadow:0 6px 0 #74834f}

#companion-sidebar{position:absolute;z-index:4;top:68px;right:14px;width:215px;max-height:48dvh;overflow:auto;background:#14242cf5;border:1px solid #b4a37c;border-radius:8px;padding:10px;box-shadow:0 5px 20px #0005}
#companion-sidebar h3{margin:0 0 8px;font-size:16px}#companion-sidebar button{display:block;width:100%;text-align:left;margin:3px 0;font-size:12px;padding:7px}.companion-name{background:#263d46}#companion-sidebar p{font-size:12px}
@media(max-width:620px){#companion-sidebar{top:60px;right:8px;width:160px;max-height:30dvh;padding:6px}#companion-sidebar button{font-size:11px;padding:6px}}
body[data-combat=true] .combat-mon[data-count="2"]{width:38%;left:calc(6% + var(--slot)*50%);right:auto}
body[data-combat=true] .combat-mon[data-count="2"][data-position="0"]{--slot:0}
body[data-combat=true] .combat-mon[data-count="2"][data-position="1"]{--slot:1}
body[data-combat=true] .combat-mon[data-count="2"] .pokemon-sprite{width:185px;height:185px;margin-left:calc(50% - 92px)}
@media(max-width:620px){body[data-combat=true] .combat-mon[data-count="2"] .pokemon-sprite{width:125px;height:125px;margin-left:calc(50% - 62px)}body[data-combat=true] .combat-mon[data-count="2"] .combat-status{padding:4px}body[data-combat=true] .combat-mon[data-count="2"] .combat-status strong{font-size:12px}}

/* Semantic emphasis: neutral outcome, independent of labels and save data. */
.campaign:not([data-combat=true]) #choices button[data-kind=mission]{background:#263455;color:#fff;border:2px solid #c4caff;border-left-width:6px;min-height:48px;font-weight:700}
.choice-badge{display:block;font-size:.85em;text-decoration:underline;text-underline-offset:3px}
.campaign:not([data-combat=true])[data-narrative-kind=event] .dialogue,
.campaign:not([data-combat=true])[data-narrative-kind=mission] .dialogue{border:2px solid #c4caff;border-top-width:5px}
#narrative-notice{color:#f2f0ff;background:#263455;border:1px solid #c4caff;border-radius:5px;padding:5px 9px;margin:0 0 8px;font-weight:700;font-size:14px;width:fit-content;max-width:100%}
.campaign:not([data-combat=true]) #choices button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(forced-colors:active){.campaign #choices button[data-kind=mission],#narrative-notice{border-color:ButtonText}.campaign:not([data-combat=true])[data-narrative-kind=event] .dialogue,.campaign:not([data-combat=true])[data-narrative-kind=mission] .dialogue{border-color:CanvasText}}
