:root{
  --ink:#0b0f17; --ink2:#121a26; --paper:#efe6d2; --dim:#a99f8c;
  --amber:#f2b45a; --ember:#e0662f; --jade:#5fb59a; --blood:#b8322a; --tide:#6aa7d8;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#05070b;color:var(--paper);font-family:var(--serif);overflow:hidden;
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* 9:16 stage, letterboxed; all sizes in container units so it scales as one picture */
.ios-top{position:fixed;top:0;left:0;right:0;height:max(4px,env(safe-area-inset-top));background:#05070b;z-index:1}
.stage{position:absolute;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);left:0;right:0;margin:auto;
  --vh:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  width:min(100vw,calc(var(--vh)*9/16));height:min(var(--vh),calc(100vw*16/9));
  overflow:hidden;background:var(--ink);container-type:size;isolation:isolate}
@media (min-aspect-ratio:9/16){ .stage{box-shadow:0 0 0 1px #1c2433,0 0 80px #000} }
.layer{position:absolute;inset:0}
.hidden{display:none!important}

/* backgrounds & CG */
.bg>div,.cg>div{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity var(--t,700ms) ease}
.bg>div.on,.cg>div.on{opacity:1}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,14,.35),rgba(5,8,14,0) 30%,rgba(5,8,14,0) 55%,rgba(5,8,14,.75));pointer-events:none}
.cg>div{background-color:#05070b;background-size:contain;background-repeat:no-repeat}
.cg>div.cover{background-size:cover}
.cg>div.kenburns.on{animation:kb 14s ease-out forwards}
@keyframes kb{from{transform:scale(1.0)}to{transform:scale(1.08)}}

/* characters */
.chars{pointer-events:none}
.ch{position:absolute;bottom:25cqh;height:50cqh;transform:translateX(-50%);transition:left .5s ease,opacity .4s ease,filter .3s ease,transform .4s ease;opacity:0}
.ch img{height:100%;width:auto;display:block;filter:drop-shadow(0 1.2cqh 1.5cqh rgba(0,0,0,.6))}
.ch.on{opacity:1}
.ch.dim{filter:brightness(.55) saturate(.7)}
.ch.speak{transform:translateX(-50%) scale(1.02)}
.ch.pixel img{image-rendering:pixelated}
.ch.small{height:34cqh}
.ch.big{height:60cqh;bottom:20cqh}
.ch.flip img{transform:scaleX(-1)}

.rain{pointer-events:none;opacity:.55}
.fx{pointer-events:none}
.fx .flash{position:absolute;inset:0;background:#fff;animation:flash .5s ease-out forwards}
.fx .flash.red{background:#b8322a}
.fx .flash.amber{background:#f2b45a}
@keyframes flash{from{opacity:.85}to{opacity:0}}
.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-.4cqw,0)}20%,80%{transform:translate(.8cqw,.3cqw)}30%,50%,70%{transform:translate(-1.4cqw,-.3cqw)}40%,60%{transform:translate(1.4cqw,.2cqw)}}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.85));animation:fadein 1s forwards}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* HUD */
.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:2.4cqw 3cqw;z-index:20;
  background:linear-gradient(180deg,rgba(5,8,14,.75),transparent)}
.hud-place{font-size:3.2cqw;letter-spacing:.3em;color:var(--dim);padding-top:1cqw}
.hud-btns{display:flex;gap:1.6cqw}
.icon-btn{font-size:3.1cqw;padding:1.2cqw 2.2cqw;border:1px solid rgba(242,180,90,.35);border-radius:1cqw;background:rgba(11,15,23,.6);color:var(--paper)}
.icon-btn.on{background:var(--amber);color:var(--ink);border-color:var(--amber)}

/* dialog */
.dialog{position:absolute;left:3cqw;right:3cqw;bottom:3cqw;z-index:15;cursor:pointer}
.dlg-box{position:relative;min-height:27cqh;padding:7cqw 5.5cqw 5cqw;border-radius:1.4cqw;
  background:linear-gradient(180deg,rgba(14,19,30,.88),rgba(8,11,18,.94));
  border:1px solid rgba(242,180,90,.38);box-shadow:0 0 0 .5cqw rgba(8,11,18,.6),0 2cqh 6cqh rgba(0,0,0,.6),inset 0 0 6cqw rgba(242,180,90,.05)}
.dlg-box::before,.dlg-box::after{content:"";position:absolute;width:4cqw;height:4cqw;border:2px solid var(--amber);opacity:.7}
.dlg-box::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.dlg-box::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.dlg-name{position:absolute;top:-4.2cqw;left:4cqw;padding:1.2cqw 4cqw;font-size:4.2cqw;font-weight:600;letter-spacing:.15em;
  background:linear-gradient(90deg,#3a2414,#6b3f1c 50%,#3a2414);border:1px solid var(--amber);border-radius:.8cqw;color:#ffe9c4;
  text-shadow:0 0 2cqw rgba(242,180,90,.6)}
.dlg-name:empty{display:none}
.dlg-text{font-size:4.6cqw;line-height:1.75;letter-spacing:.04em;white-space:pre-wrap;min-height:13cqh}
.dlg-text.narr{color:#d8cfbd;font-style:normal}
.dlg-text.thought{color:#b9c9de}
.dlg-text em{font-style:normal;color:var(--amber)}
.dlg-next{position:absolute;right:4cqw;bottom:2.4cqw;font-size:3cqw;color:var(--amber);animation:bob 1s infinite;opacity:0}
.dlg-next.on{opacity:1}
@keyframes bob{50%{transform:translateY(.8cqw)}}
.dlg-portrait{position:absolute;right:2cqw;bottom:calc(27cqh - 2cqw);width:26cqw;height:26cqw;pointer-events:none;
  background-size:cover;background-position:center top;border:1px solid rgba(242,180,90,.5);border-radius:1cqw;box-shadow:0 1cqh 3cqh rgba(0,0,0,.6);
  image-rendering:pixelated;opacity:0;transition:opacity .25s}
.dlg-portrait.on{opacity:1}

/* choices */
.choices{position:absolute;inset:0;z-index:25;display:flex;flex-direction:column;justify-content:center;gap:3cqw;padding:0 8cqw;background:rgba(5,8,14,.55)}
.choices .prompt{text-align:center;font-size:4cqw;color:var(--dim);margin-bottom:2cqw;letter-spacing:.1em}
.choice{padding:4cqw 5cqw;font-size:4.4cqw;line-height:1.5;text-align:left;border-radius:1.2cqw;
  background:linear-gradient(90deg,rgba(26,20,14,.95),rgba(14,19,30,.95));border:1px solid rgba(242,180,90,.45);
  box-shadow:0 1cqh 3cqh rgba(0,0,0,.5);transition:transform .15s,border-color .15s;animation:rise .35s backwards}
.choice:nth-child(3){animation-delay:.06s}.choice:nth-child(4){animation-delay:.12s}
.choice:hover,.choice:focus-visible{border-color:var(--amber);transform:translateX(1cqw);outline:none}
.choice small{display:block;font-size:3.2cqw;color:var(--dim);margin-top:.8cqw}
@keyframes rise{from{opacity:0;transform:translateY(2cqw)}}

/* chapter caption */
.caption{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#05070b;text-align:center;gap:3cqw}
.caption .k{font-size:3.4cqw;letter-spacing:.6em;color:var(--amber);opacity:0;animation:cap 1s .2s forwards}
.caption .t{font-size:9cqw;font-weight:900;letter-spacing:.25em;opacity:0;animation:cap 1.2s .6s forwards;text-shadow:0 0 4cqw rgba(242,180,90,.35)}
.caption .s{font-size:3.6cqw;color:var(--dim);letter-spacing:.2em;opacity:0;animation:cap 1s 1.3s forwards;max-width:80cqw;line-height:1.8}
@keyframes cap{from{opacity:0;transform:translateY(1.5cqw);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* full screens: title, menu, log, settings */
.screen{position:absolute;inset:0;z-index:40;overflow:auto;background:rgba(5,8,14,.94)}
.title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;background:#05070b}
.title .art{position:absolute;inset:0;background-size:cover;background-position:center;animation:kb 30s ease-out forwards;filter:brightness(.7) saturate(1.05)}
.title .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,14,.2) 0%,rgba(5,8,14,0) 30%,rgba(5,8,14,.85) 72%,#05070b)}
.title .logo{position:relative;margin-top:16cqh;text-align:center}
.title .logo .zh{font-size:15cqw;font-weight:900;letter-spacing:.12em;color:#ffeccc;
  text-shadow:0 0 3cqw rgba(242,180,90,.75),0 0 10cqw rgba(224,102,47,.45),0 .5cqw 0 #3a1d0a}
.title .logo .en{font-size:3.6cqw;letter-spacing:.9em;margin-top:1.5cqw;color:var(--amber);padding-left:.9em}
.title .logo .tag{display:inline-block;font-size:4.2cqw;font-weight:600;color:#e9dcc2;margin-top:4cqw;letter-spacing:.6em;padding:1cqw 1.5cqw 1cqw 3.5cqw;
  text-shadow:0 0 1cqw #000,0 0 3cqw #000,0 0 5cqw rgba(0,0,0,.9);background:radial-gradient(ellipse at center,rgba(5,7,11,.7),rgba(5,7,11,0) 70%);
  animation:guttering 7s infinite}
@keyframes guttering{0%,100%{opacity:.92}38%{opacity:.92}40%{opacity:.35}41%{opacity:.85}43%{opacity:.5}46%{opacity:.92}78%{opacity:.88}80%{opacity:.6}82%{opacity:.92}}
@media (prefers-reduced-motion:reduce){.title .logo .tag{animation:none}}
.title .glow{position:absolute;left:50%;top:21cqh;width:60cqw;height:60cqw;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(242,180,90,.25),transparent 65%);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.5;transform:translate(-50%,-50%) scale(1.12)}}
.title nav{position:relative;margin-top:auto;margin-bottom:12cqh;display:flex;flex-direction:column;gap:2.4cqw;width:62cqw}
.menu-btn{position:relative;padding:3.4cqw 0;font-size:4.6cqw;letter-spacing:.5em;text-align:center;padding-left:.5em;
  background:linear-gradient(90deg,transparent,rgba(242,180,90,.12),transparent);border-top:1px solid rgba(242,180,90,.25);border-bottom:1px solid rgba(242,180,90,.25);transition:background .2s,color .2s}
.menu-btn:hover,.menu-btn:focus-visible{background:linear-gradient(90deg,transparent,rgba(242,180,90,.32),transparent);color:#fff;outline:none}
.menu-btn:disabled{opacity:.35;cursor:default}
.title .foot{position:absolute;bottom:3cqh;width:100%;text-align:center;font-size:2.8cqw;color:#6c6a64;letter-spacing:.2em}

.panel{padding:8cqw 6cqw 10cqw}
.panel h2{font-size:6cqw;letter-spacing:.3em;text-align:center;margin-bottom:5cqw;color:#ffe9c4}
.panel h3{font-size:4cqw;color:var(--amber);margin:5cqw 0 2cqw;letter-spacing:.15em}
.panel .row{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:3cqw 0;border-bottom:1px solid #1f2836;font-size:4cqw}
.panel input[type=range]{width:42cqw;accent-color:var(--amber)}
.seg{display:flex;gap:1.4cqw}.seg button{padding:1.4cqw 3cqw;border:1px solid #3a4352;border-radius:1cqw;font-size:3.6cqw}
.seg button.on{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.close{position:sticky;top:0;float:right;font-size:4cqw;padding:2cqw 3cqw;border:1px solid #3a4352;border-radius:1cqw;background:var(--ink)}
.log-item{padding:3cqw 0;border-bottom:1px solid #1a2230;font-size:4cqw;line-height:1.7}
.log-item b{display:block;color:var(--amber);font-size:3.4cqw;letter-spacing:.1em}
.log-item.narr{color:#cfc6b4}
.log-item.pick{color:var(--jade)}
.slot{display:flex;gap:3cqw;align-items:center;width:100%;padding:3cqw;margin-bottom:2.4cqw;border:1px solid #2a3344;border-radius:1.2cqw;background:#0e141f;text-align:left}
.slot .th{width:18cqw;height:24cqw;flex:none;background-size:cover;background-position:center;border-radius:.8cqw;background-color:#1a2230}
.slot .meta{font-size:3.4cqw;color:var(--dim);line-height:1.6}
.slot .meta b{display:block;font-size:4cqw;color:var(--paper)}
.slot:hover{border-color:var(--amber)}
.pause-list{display:flex;flex-direction:column;gap:2.4cqw;max-width:70cqw;margin:6cqh auto 0}

/* name / avatar */
.create{display:flex;flex-direction:column;gap:4cqw}
.avatars{display:grid;grid-template-columns:1fr 1fr;gap:3cqw}
.avatar{border:1px solid #2a3344;border-radius:1.4cqw;padding:3cqw;background:#0e141f;text-align:center;font-size:3.8cqw}
.avatar img{width:100%;image-rendering:pixelated;border-radius:1cqw;margin-bottom:2cqw}
.avatar.on{border-color:var(--amber);box-shadow:0 0 0 2px rgba(242,180,90,.4),0 0 6cqw rgba(242,180,90,.2)}
.create input{width:100%;font:inherit;font-size:16px;font-size:max(16px,4.6cqw);padding:3cqw 4cqw;background:#0e141f;color:var(--paper);border:1px solid #3a4352;border-radius:1.2cqw;text-align:center;letter-spacing:.2em}
.create input:focus{outline:none;border-color:var(--amber)}
.primary{padding:3.6cqw;font-size:4.6cqw;letter-spacing:.4em;background:linear-gradient(180deg,#f6c06c,#c97a2c);color:#1b0f05;border-radius:1.2cqw;font-weight:600;box-shadow:0 1cqh 3cqh rgba(201,122,44,.3)}
.primary:disabled{filter:grayscale(1);opacity:.5}
.spirit-card{display:flex;gap:3cqw;align-items:center;border:1px solid #2a3344;border-radius:1.4cqw;padding:3cqw;background:#0e141f;text-align:left;width:100%}
.spirit-card img{width:24cqw;height:24cqw;object-fit:cover;object-position:top;border-radius:1cqw;image-rendering:pixelated;flex:none}
.spirit-card .d{font-size:3.4cqw;color:var(--dim);line-height:1.6}
.spirit-card .d b{display:block;font-size:4.6cqw;color:var(--paper);margin-bottom:.6cqw}
.spirit-card.on{border-color:var(--amber);box-shadow:0 0 0 2px rgba(242,180,90,.4)}

.toast{position:absolute;left:50%;top:12cqh;transform:translate(-50%,-2cqw);z-index:60;padding:2.4cqw 5cqw;font-size:3.6cqw;border-radius:5cqw;
  background:rgba(14,19,30,.95);border:1px solid var(--amber);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.fade{position:absolute;inset:0;z-index:50;background:#000;opacity:1;pointer-events:none;transition:opacity var(--ft,600ms) ease}
.fade.out{opacity:0}

/* ========= battle ========= */
.battle{z-index:12;background:#05070b}
.battle canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.b-top{position:absolute;top:0;left:0;right:0;padding:2.5cqw 3cqw;display:flex;flex-direction:column;gap:1.6cqw;background:linear-gradient(180deg,rgba(5,8,14,.85),transparent)}
.b-wave{font-size:3.2cqw;letter-spacing:.3em;color:var(--amber);text-align:center}
.b-order{display:flex;gap:1.2cqw;justify-content:center;align-items:center}
.b-order .o{width:8.5cqw;height:8.5cqw;border-radius:50%;background-size:cover;background-position:center 20%;border:2px solid #3a4352;image-rendering:pixelated;background-color:#151c28;transition:transform .2s}
.b-order .o.e{border-color:#8a3a33}.b-order .o.p{border-color:#b98a3e}
.b-order .o:first-child{width:11cqw;height:11cqw;border-color:var(--amber);box-shadow:0 0 3cqw rgba(242,180,90,.6)}
.b-order .lab{font-size:2.6cqw;color:var(--dim);margin-right:1cqw}
.b-bars{position:absolute;left:0;right:0;bottom:0;padding:3cqw;background:linear-gradient(0deg,rgba(5,8,14,.97) 70%,transparent)}
.b-party{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6cqw;margin-bottom:2.4cqw}
.battle[data-party-size="1"] .b-party{grid-template-columns:1fr}
.b-unit{flex:1;display:flex;gap:2cqw;align-items:center;padding:1.6cqw;border-radius:1.2cqw;background:#0e141f;border:1px solid #232c3b;transition:border-color .2s}
.b-unit.active{border-color:var(--amber);box-shadow:0 0 3cqw rgba(242,180,90,.25)}
.b-unit.ko{opacity:.4}
.b-unit .pf{width:11cqw;height:11cqw;flex:none;border-radius:.8cqw;background-size:cover;background-position:center 15%;image-rendering:pixelated}
.b-unit .nm{font-size:3.2cqw;margin-bottom:.8cqw;display:flex;justify-content:space-between}
.b-unit .nm span{color:var(--dim);font-size:2.8cqw}
.b-unit .nm b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}
.meter{margin-top:1cqw}
.meter-label{display:flex;justify-content:space-between;gap:1cqw;font:500 2.6cqw/1.2 system-ui,sans-serif;color:#e9d8ca}
.meter.sp .meter-label{color:#9edcf2}.meter.oath .meter-label{color:#ffcf78}
.battle[data-party-size="4"] .meter{position:relative;height:4.6cqw;margin-top:.7cqw}
.battle[data-party-size="4"] .meter-label{position:relative;z-index:1;line-height:4.6cqw;padding:0 1cqw;color:#fff2df;text-shadow:0 1px 2px #000}
.battle[data-party-size="4"] .meter .bar{position:absolute;inset:0;height:auto;margin:0;border-radius:.6cqw;opacity:.55}
.battle[data-party-size="4"] .b-unit .pf{width:8cqw;height:8cqw}
.battle[data-party-size="4"] .b-unit .nm{font-size:3cqw;margin-bottom:.3cqw}
.bar{height:1.6cqw;border-radius:1cqw;background:#1b2230;overflow:hidden;margin-top:.7cqw;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:1cqw;transition:width .35s ease}
.bar.hp i{background:linear-gradient(90deg,#9a2a22,#e05a3a)}
.bar.sp i{background:linear-gradient(90deg,#2f6f8f,#6ac0e0)}
.bar.oath i{background:linear-gradient(90deg,#b86a1c,#ffd27a)}
.bar.oath.full i{animation:pulse 1s infinite}
@keyframes pulse{50%{filter:brightness(1.5)}}
.b-cmds{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqw}
.cmd{position:relative;padding:2.2cqw .6cqw 1.8cqw;border-radius:1.2cqw;background:linear-gradient(180deg,#1a2231,#0f1520);border:1px solid #2e3a4e;font-size:3.6cqw;text-align:center;line-height:1.3}
.cmd small{display:block;font-size:2.6cqw;color:var(--dim);margin-top:.5cqw}
.cmd .ic{display:block;width:9cqw;height:9cqw;margin:0 auto 1cqw;background-image:url(../assets/ui/abilities.webp);background-size:400% 400%;border-radius:1cqw}
.cmd:not(:disabled):hover{border-color:var(--amber)}
.cmd:disabled{opacity:.35}
.cmd.ult{border-color:#b9832f;background:linear-gradient(180deg,#3a2614,#1a120a)}
.cmd.ult:not(:disabled){animation:pulse 1.2s infinite}
.cmd.back{grid-column:span 4;padding:2cqw}
.b-hint{font-size:3.3cqw;color:var(--dim);text-align:center;min-height:5cqw;margin-bottom:1.6cqw;line-height:1.4}
.b-hint b{color:var(--amber);font-weight:400}
.dmg{position:absolute;font-size:6cqw;font-weight:900;color:#fff;text-shadow:0 0 1cqw #000,0 .4cqw 0 #000;pointer-events:none;animation:dmg 1s ease-out forwards;transform:translate(-50%,-50%);white-space:nowrap}
.dmg.heal{color:#8ef0b8}.dmg.crit{color:#ffd27a;font-size:8cqw}.dmg.miss{color:#9aa4b4;font-size:4.4cqw}.dmg.info{color:#9fd3ff;font-size:4cqw}
@keyframes dmg{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-80%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.target-ring{position:absolute;width:24cqw;height:6cqw;border:2px solid var(--amber);border-radius:50%;transform:translate(-50%,-50%);animation:ring 1s infinite;pointer-events:none}
@keyframes ring{50%{opacity:.4;transform:translate(-50%,-50%) scale(1.15)}}
.tap-target{position:absolute;transform:translate(-50%,-100%);width:28cqw;height:34cqw;cursor:pointer}
.telegraph{position:absolute;left:50%;top:18cqh;transform:translateX(-50%);padding:1.8cqw 4cqw;font-size:3.4cqw;border-radius:3cqw;background:rgba(120,24,18,.9);border:1px solid #ff7a5a;max-width:94%;text-align:center;animation:pulse 1s infinite;pointer-events:none}
.cutin{position:absolute;inset:0;z-index:5;background-size:cover;background-position:center;animation:cutin 1.4s ease forwards}
@keyframes cutin{0%{opacity:0;transform:translateX(30%) skewX(-8deg)}15%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateX(-15%)}}
.b-result{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqw;background:rgba(5,8,14,.8);animation:fadein .6s}
.b-result .big{font-size:12cqw;font-weight:900;letter-spacing:.3em;color:#ffe2a8;text-shadow:0 0 5cqw rgba(242,180,90,.7)}
.b-result .big.lose{color:#d5d9e2;text-shadow:0 0 5cqw rgba(120,140,180,.6)}
.b-result p{font-size:3.8cqw;color:var(--dim);text-align:center;line-height:1.8;padding:0 10cqw}
.b-result .primary{min-width:50cqw}
.b-help{position:absolute;inset:0;z-index:9;background:rgba(5,8,14,.92);padding:10cqh 8cqw;font-size:4cqw;line-height:1.8;overflow:auto}
.b-help h3{color:var(--amber);font-size:5cqw;margin-bottom:3cqw;letter-spacing:.2em}
.b-help li{margin:0 0 2cqw 4cqw}
.ending .caption{inset:0;padding:8cqh 6cqw 5cqh;overflow:auto;justify-content:center}
.ending .caption .t{font-size:8cqw}
.ending .caption .k,.ending .caption .t,.ending .caption .s{opacity:1;animation:none}
.ending-notes{margin-top:4cqh;text-align:left;font-size:3.2cqw;line-height:1.7;color:#d8cbb8;width:100%}
.ending-notes summary{cursor:pointer;text-align:center;color:var(--amber);margin-bottom:2cqw}
.ending-notes p{margin-bottom:1.4cqw}
.ending-credit{margin-top:4cqh;font-size:2.8cqw;line-height:1.8;color:#a99f8c;text-align:center}

@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} }

/* ========= travel map ========= */
.worldmap{position:absolute;inset:0;z-index:35;background:#06090e;overflow:hidden;touch-action:none}
.worldmap.hidden{display:none}
.worldmap canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.wm-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:3cqw 4cqw;
  background:linear-gradient(#06090ee6,#06090e00);pointer-events:none}
.wm-title{font-size:3.4cqw;letter-spacing:.25em;color:var(--amber)}
.wm-menu{pointer-events:auto;font-size:3.2cqw;padding:1.6cqw 3.2cqw;border:1px solid #3a4352;border-radius:1cqw;background:#0b1019cc;color:var(--paper)}
.wm-banner{position:absolute;left:50%;top:16cqh;transform:translate(-50%,0);text-align:center;font-size:6.4cqw;font-weight:900;letter-spacing:.3em;
  color:#ffe9c4;text-shadow:0 0 3cqw #000,0 0 6cqw rgba(242,180,90,.35);opacity:0;pointer-events:none;white-space:nowrap}
.wm-banner small{display:block;font-size:3.4cqw;letter-spacing:.8em;color:var(--amber);margin-top:1.5cqw}
.wm-banner.on{animation:wmBanner 3.2s ease forwards}
@keyframes wmBanner{0%{opacity:0;transform:translate(-50%,2cqw)}15%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0}}
.wm-bubble{position:absolute;left:5cqw;right:5cqw;bottom:7cqh;display:flex;gap:3cqw;align-items:center;padding:3cqw 4cqw;border:1px solid #6a5434;
  border-radius:2cqw;background:rgba(10,14,22,.93);box-shadow:0 2cqw 6cqw #000a;animation:wmIn .35s ease;pointer-events:none}
.wm-bubble .f{flex:none;width:13cqw;height:13cqw;border-radius:50%;background:#121a26 center/cover no-repeat;border:2px solid #c89a52;image-rendering:pixelated}
.wm-bubble .f.none{display:none}
.wm-bubble b{display:block;font-size:3.2cqw;color:var(--amber);margin-bottom:1cqw}
.wm-bubble p{font-size:3.9cqw;line-height:1.7;color:var(--paper)}
.wm-bubble.narr{justify-content:center;text-align:center;border-color:#2c3544}
.wm-bubble.narr p{color:#c9c0ad;font-style:italic}
.wm-bubble.hidden,.wm-panel.hidden,.wm-offer.hidden,.wm-bottom.hidden,.wm-hint.hidden{display:none}
@keyframes wmIn{from{opacity:0;transform:translateY(2cqw)}to{opacity:1;transform:none}}
.wm-bottom{position:absolute;left:0;right:0;bottom:0;padding:4cqw 6cqw 5cqh;background:linear-gradient(#06090e00,#06090ef2 40%)}
.wm-go{width:100%;display:flex;flex-direction:column;align-items:center;gap:.8cqw}
.wm-go small{font-size:3cqw;font-weight:400;letter-spacing:.1em;opacity:.8}
.wm-go:disabled{opacity:.55;filter:grayscale(.6)}
.wm-hint{position:absolute;left:6cqw;right:6cqw;bottom:20cqh;padding:3cqw 4cqw;border-radius:1.6cqw;background:rgba(14,20,31,.92);border:1px solid #2f5f86;
  font-size:3.5cqw;line-height:1.7;color:#d6e6f5;animation:wmIn .4s ease;pointer-events:none}
.wm-panel{position:absolute;left:4cqw;right:4cqw;bottom:20cqh;max-height:46cqh;overflow:auto;padding:3cqw;border:1px solid #3a4352;border-radius:2cqw;
  background:rgba(9,13,20,.96);box-shadow:0 2cqw 8cqw #000c;animation:wmIn .3s ease}
.wm-panel .hd{display:flex;align-items:center;gap:3cqw;margin-bottom:2.4cqw}
.wm-panel .hd .th{width:14cqw;height:14cqw;border-radius:50%;background:center/cover;border:2px solid #c89a52;flex:none}
.wm-panel .hd b{flex:1;font-size:5cqw;color:#ffe9c4;letter-spacing:.15em}
.wm-panel .x{font-size:6cqw;line-height:1;padding:0 2cqw;color:var(--dim);background:none;border:0}
.wm-panel .row{display:flex;align-items:center;gap:3cqw;width:100%;text-align:left;padding:2.6cqw;margin-top:1.6cqw;border:1px solid #232c3b;border-radius:1.4cqw;background:#0e141f}
.wm-panel .row b{display:block;font-size:3.8cqw;font-weight:600}
.wm-panel .row small{display:block;font-size:3.1cqw;color:var(--dim);margin-top:.6cqw;line-height:1.5}
.wm-panel .row .fc{flex:none;width:11cqw;height:11cqw;border-radius:50%;background:#121a26 center/contain no-repeat;border:2px solid #8fc3ff;image-rendering:pixelated}
.wm-panel .row.event .fc{border-color:#9be0b4}
.wm-panel .row .bd{flex:none;width:8cqw;height:8cqw;display:grid;place-items:center;border-radius:50%;font-size:3.4cqw;background:#3a2614;color:#ffd9a0;border:1px solid #8a5a24}
.wm-panel .row.mem .bd{background:#1b2230;color:#aab4c4;border-color:#3a4352}
.wm-panel .row.main{border-color:#8a5a24}
.wm-panel .row:hover{border-color:var(--amber)}
.wm-panel .mh{margin-top:3cqw;font-size:3cqw;letter-spacing:.4em;color:var(--dim)}
.wm-panel .empty{font-size:3.4cqw;color:var(--dim);padding:2cqw 0}
.wm-offer{position:absolute;left:6cqw;right:6cqw;bottom:9cqh;padding:5cqw;border:1px solid #6a5434;border-radius:2cqw;background:rgba(10,14,22,.95);
  box-shadow:0 2cqw 8cqw #000c;text-align:center;animation:wmIn .4s ease}
.wm-offer .fc{width:20cqw;height:20cqw;margin:-14cqw auto 2cqw;border-radius:50%;background:#121a26 center/contain no-repeat;border:2px solid #c89a52;image-rendering:pixelated}
.wm-offer p{font-size:4cqw;line-height:1.7;margin-bottom:4cqw}
.wm-offer .bt{display:flex;flex-direction:column;gap:2.4cqw}

#chars{transition:opacity .45s ease}
#chars.under-cg{opacity:0;pointer-events:none}

.wm-btns{display:flex;gap:2cqw;pointer-events:auto}
.wm-world{font-size:3.2cqw;padding:1.6cqw 3.2cqw;border:1px solid #6a5434;border-radius:1cqw;background:#0b1019cc;color:var(--amber)}
.worldmap.world .wm-panel{display:none}

.ch.crowd{height:var(--crowd-h);width:var(--slot);bottom:27cqh;z-index:2}
.ch.crowd.back{bottom:31cqh;z-index:1;filter:brightness(.88)}
.ch.prop-back{z-index:3;height:18cqh;bottom:27cqh}
.ch.crowd img{width:100%;height:100%;object-fit:contain;object-position:center bottom}