/* V6 — 可讀性與戰鬥高光 */

/* 電影式開場：墨山顯影、三道身掠境、劍光題名。 */
body.opening-active{overflow:hidden}
.icon-button{display:grid;place-items:center;padding:0;line-height:1;text-align:center}
.drawer-toggle{width:auto;min-width:46px;padding:0 8px;border-radius:999px;white-space:nowrap}
.mobile-drawer-home{display:none}
.map-node[data-unavailable="true"]{cursor:help}
.opening-cinematic{
  position:fixed;
  z-index:220;
  inset:0;
  overflow:hidden;
  visibility:hidden;
  opacity:0;
  color:#edf4ed;
  background:#020604;
  isolation:isolate;
  transition:opacity .28s;
}
.opening-cinematic.visible{visibility:visible;opacity:1}
.opening-cinematic.leaving{animation:opening-leave .72s ease-in both}
.opening-cinematic.awaiting .opening-backdrop{opacity:.38;transform:scale(1.08);filter:saturate(.42) contrast(1.2) brightness(.4) blur(1px)}
.opening-backdrop,.opening-ink,.opening-clouds,.opening-paths,.opening-slash{position:absolute;inset:0;pointer-events:none}
.opening-backdrop{
  z-index:-8;
  opacity:0;
  background:linear-gradient(180deg,rgba(1,5,3,.22),rgba(1,5,3,.78)),url("assets/scenes/sect.jpg") center/cover no-repeat;
  filter:saturate(.62) contrast(1.24) brightness(.55);
  transform:scale(1.16);
}
.opening-cinematic.playing .opening-backdrop{animation:opening-world 5.4s cubic-bezier(.16,.8,.2,1) both}
.opening-ink{
  z-index:-4;
  background:
    radial-gradient(ellipse at 50% 46%,transparent 0 8%,rgba(2,7,4,.2) 32%,#010302 78%),
    repeating-radial-gradient(ellipse at 50% 52%,transparent 0 34px,rgba(211,230,214,.045) 35px 36px,transparent 37px 66px);
  clip-path:circle(0 at 50% 48%);
}
.opening-cinematic.playing .opening-ink{animation:opening-ink-reveal 2.2s cubic-bezier(.15,.72,.15,1) .12s both}
.opening-clouds{z-index:-2;opacity:.7;filter:blur(16px)}
.opening-clouds i{position:absolute;display:block;width:68vw;height:10vh;border-radius:50%;background:rgba(202,220,205,.1)}
.opening-clouds i:nth-child(1){left:-20%;top:27%;animation:opening-cloud 11s ease-in-out infinite alternate}
.opening-clouds i:nth-child(2){right:-25%;top:58%;opacity:.62;animation:opening-cloud-reverse 14s ease-in-out infinite alternate}
.opening-clouds i:nth-child(3){left:15%;bottom:8%;opacity:.38;animation:opening-cloud 17s ease-in-out -5s infinite alternate}
.opening-paths{z-index:-1;opacity:1}
.opening-paths i{
  position:absolute;
  bottom:-7%;
  width:42%;
  height:92%;
  opacity:0;
  background-image:url("assets/combat/player-paths-cutout.png");
  background-repeat:no-repeat;
  background-size:300% auto;
  filter:saturate(.8) contrast(1.16) brightness(.54);
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 68%,transparent 100%),linear-gradient(90deg,transparent,#000 28% 72%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 68%,transparent 100%);
}
.opening-paths .sword{left:-5%;background-position:0 12%}
.opening-paths .alchemy{left:29%;background-position:50% 12%}
.opening-paths .demon{right:-5%;background-position:100% 12%}
.opening-cinematic.playing .opening-paths .sword{animation:opening-path-left 2.45s ease-out .52s both}
.opening-cinematic.playing .opening-paths .alchemy{animation:opening-path-center 2.5s ease-out .82s both}
.opening-cinematic.playing .opening-paths .demon{animation:opening-path-right 2.45s ease-out 1.1s both}
.opening-orbit{
  position:absolute;
  z-index:3;
  left:50%;
  top:40%;
  display:grid;
  place-items:center;
  width:clamp(92px,10vw,144px);
  aspect-ratio:1;
  opacity:0;
  color:#e7c77d;
  border:1px solid rgba(231,199,125,.4);
  border-radius:50%;
  box-shadow:0 0 60px rgba(221,185,105,.12),inset 0 0 25px rgba(221,185,105,.08);
  transform:translate(-50%,-50%) scale(.42) rotate(-30deg);
}
.opening-orbit i,.opening-orbit b{position:absolute;border:1px solid rgba(231,199,125,.22);border-radius:50%}
.opening-orbit i{inset:-13px}.opening-orbit b{inset:12px;border-style:dashed}
.opening-orbit span{font-size:clamp(46px,6vw,78px);text-shadow:0 0 25px rgba(231,199,125,.5)}
.opening-cinematic.playing .opening-orbit{animation:opening-orbit-arrive 1.35s cubic-bezier(.12,.82,.2,1) 1.25s both}
.opening-cinematic.playing .opening-orbit i{animation:opening-orbit-spin 8s linear 1.7s infinite}
.opening-cinematic.playing .opening-orbit b{animation:opening-orbit-spin 5s linear 1.7s infinite reverse}
.opening-slash{
  z-index:8;
  left:-12%;
  right:-12%;
  top:49%;
  bottom:auto;
  height:3px;
  opacity:0;
  background:linear-gradient(90deg,transparent,#aeefff 18%,#fff 48%,#e8c876 66%,transparent);
  box-shadow:0 0 12px #d9ffff,0 0 44px rgba(174,239,255,.8);
  transform:rotate(-5deg) scaleX(0);
}
.opening-slash:after{content:"";position:absolute;inset:-28vh 0;background:linear-gradient(178deg,transparent 49.5%,rgba(255,255,255,.2) 50%,transparent 50.5%)}
.opening-cinematic.playing .opening-slash{animation:opening-heaven-cut .72s cubic-bezier(.08,.72,.18,1) 2.15s both}
.opening-start{
  position:absolute;
  z-index:18;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:22px;
  opacity:0;
  text-align:center;
  pointer-events:none;
  background:radial-gradient(circle at 50% 48%,rgba(21,43,32,.12),rgba(1,4,2,.62) 62%,rgba(1,3,2,.86));
  transition:opacity .48s ease,filter .48s ease;
}
.opening-cinematic.awaiting .opening-start{opacity:1;pointer-events:auto}
.opening-cinematic.playing .opening-start{opacity:0;filter:blur(8px);pointer-events:none}
.opening-start-seal{display:grid;place-items:center;width:76px;aspect-ratio:1;margin-bottom:19px;border:1px solid rgba(230,201,134,.48);border-radius:50%;color:#ead28f;font-size:38px;box-shadow:0 0 34px rgba(230,201,134,.12),inset 0 0 24px rgba(230,201,134,.06);animation:opening-start-breathe 1.8s ease-in-out infinite alternate}
.opening-start p{margin:0 0 20px;color:#dfe8df;font-size:15px;letter-spacing:.32em;text-indent:.32em;text-shadow:0 3px 18px #000}
.opening-start em{margin-top:12px;color:#8f9d94;font-size:10px;font-style:normal;letter-spacing:.1em}
.opening-begin{min-width:236px;padding:13px 30px 12px;border:1px solid rgba(230,201,134,.65);color:#f2dfaa;background:linear-gradient(110deg,rgba(103,78,36,.38),rgba(5,13,8,.88));box-shadow:0 14px 50px rgba(0,0,0,.52),inset 0 0 24px rgba(230,201,134,.05);cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.opening-begin span,.opening-begin small{display:block}.opening-begin span{font-size:18px;letter-spacing:.38em;text-indent:.38em}.opening-begin small{margin-top:5px;color:#9aa99f;font-size:10px;letter-spacing:.1em}
.opening-begin:hover,.opening-begin:focus-visible{border-color:#f3d98f;transform:translateY(-3px);box-shadow:0 18px 58px rgba(0,0,0,.58),0 0 34px rgba(230,201,134,.16)}
.opening-copy{
  position:absolute;
  z-index:12;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:16vh 22px 5vh;
  text-align:center;
  pointer-events:none;
}
.opening-kicker,.opening-oath{opacity:0;text-shadow:0 3px 16px #000}
.opening-kicker{margin:0 0 12px;color:#e4c983;font-size:11px;letter-spacing:.45em}
.opening-title{display:grid;justify-items:center;opacity:0;filter:blur(16px);transform:translateY(18px) scale(.9)}
.opening-title span{font-size:clamp(64px,10vw,132px);font-weight:600;letter-spacing:.16em;line-height:.95;text-shadow:0 5px 32px #000,0 0 32px rgba(209,239,228,.24)}
.opening-title strong{margin-top:14px;color:#e5ca87;font-size:clamp(17px,2vw,27px);font-weight:500;letter-spacing:.62em;text-indent:.62em}
.opening-oath{max-width:650px;margin:19px auto 0;color:#b7c3ba;font-size:13px;letter-spacing:.12em;line-height:1.8}
.opening-cinematic.playing .opening-kicker{animation:opening-copy-rise .8s ease-out 2.45s both}
.opening-cinematic.playing .opening-title{animation:opening-title-arrive 1s cubic-bezier(.12,.8,.18,1) 2.35s both}
.opening-cinematic.playing .opening-oath{animation:opening-copy-rise .9s ease-out 2.9s both}
.opening-enter{
  position:relative;
  min-width:230px;
  margin-top:28px;
  padding:12px 28px 11px;
  opacity:0;
  border:1px solid rgba(230,201,134,.58);
  color:#f1e2ba;
  background:linear-gradient(110deg,rgba(101,78,38,.38),rgba(8,17,12,.82));
  box-shadow:0 14px 45px rgba(0,0,0,.4),inset 0 0 24px rgba(230,201,134,.05);
  cursor:pointer;
  transform:translateY(14px);
  pointer-events:none;
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.opening-enter span,.opening-enter small{display:block}.opening-enter span{font-size:15px;letter-spacing:.25em;text-indent:.25em}.opening-enter small{margin-top:4px;color:#819087;font-size:8px;letter-spacing:.14em}
.opening-cinematic.ready .opening-copy{pointer-events:auto}.opening-cinematic.ready .opening-enter{opacity:1;transform:none;pointer-events:auto;animation:opening-enter-arrive .72s ease-out both,opening-enter-pulse 1.6s ease-in-out .72s infinite alternate}
.opening-enter:hover{border-color:#efd38d;transform:translateY(-3px)!important;box-shadow:0 18px 55px rgba(0,0,0,.5),0 0 30px rgba(230,201,134,.16)}
.opening-skip{position:absolute;z-index:20;right:24px;top:22px;padding:8px 11px;border:1px solid rgba(220,229,220,.15);color:#98a69c;background:rgba(4,10,6,.5);font-size:10px;letter-spacing:.12em;cursor:pointer;backdrop-filter:blur(8px)}
.opening-skip:hover{color:#f0dcaa;border-color:rgba(230,201,134,.45)}
.opening-music{position:absolute;z-index:20;left:24px;top:22px;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(220,229,220,.16);color:#aebbb2;background:rgba(4,10,6,.55);font-size:10px;letter-spacing:.1em;cursor:pointer;backdrop-filter:blur(8px);transition:color .2s,border-color .2s,box-shadow .2s}
.opening-music span{font-size:14px;color:#e5c77e}.opening-music b{font-weight:500}
.opening-music:hover{color:#f0dcaa;border-color:rgba(230,201,134,.48)}
.opening-cinematic[data-music="armed"] .opening-music,.opening-cinematic[data-music="loading"] .opening-music,.opening-cinematic[data-music="playing"] .opening-music{color:#e8d59e;border-color:rgba(230,201,134,.38);box-shadow:0 0 20px rgba(230,201,134,.08)}
.opening-cinematic[data-music="playing"] .opening-music span{animation:opening-music-pulse 1.15s ease-in-out infinite alternate}
.opening-cinematic[data-music="muted"] .opening-music span{color:#78837c}

@keyframes opening-world{0%{opacity:0;transform:scale(1.16);filter:saturate(.2) brightness(.18) blur(4px)}18%{opacity:1}100%{opacity:1;transform:scale(1.04) translateY(-1%);filter:saturate(.72) brightness(.55) contrast(1.2)}}
@keyframes opening-ink-reveal{0%{clip-path:circle(0 at 50% 48%);opacity:1}100%{clip-path:circle(92% at 50% 48%);opacity:1}}
@keyframes opening-cloud{to{transform:translateX(32vw) scaleX(1.18);opacity:.4}}
@keyframes opening-cloud-reverse{to{transform:translateX(-34vw) scaleX(1.2);opacity:.35}}
@keyframes opening-path-left{0%{opacity:0;transform:translateX(-18%) scale(1.06);filter:blur(10px) brightness(.3)}35%,78%{opacity:.34;filter:blur(0) brightness(.62)}100%{opacity:.13;transform:translateX(3%) scale(1);filter:blur(2px) brightness(.42)}}
@keyframes opening-path-center{0%{opacity:0;transform:translateY(9%) scale(1.08);filter:blur(10px) brightness(.3)}35%,78%{opacity:.3;filter:blur(0) brightness(.62)}100%{opacity:.12;transform:translateY(0) scale(1);filter:blur(2px) brightness(.4)}}
@keyframes opening-path-right{0%{opacity:0;transform:translateX(18%) scale(1.06);filter:blur(10px) brightness(.3)}35%,78%{opacity:.34;filter:blur(0) brightness(.62)}100%{opacity:.13;transform:translateX(-3%) scale(1);filter:blur(2px) brightness(.42)}}
@keyframes opening-orbit-arrive{0%{opacity:0;transform:translate(-50%,-50%) scale(.42) rotate(-30deg)}34%,76%{opacity:1}100%{opacity:.16;transform:translate(-50%,-50%) scale(2.8) rotate(15deg);filter:blur(2px)}}
@keyframes opening-orbit-spin{to{transform:rotate(360deg)}}
@keyframes opening-heaven-cut{0%{opacity:0;transform:rotate(-5deg) scaleX(0)}24%{opacity:1}62%{opacity:1;transform:rotate(-5deg) scaleX(1)}100%{opacity:0;transform:rotate(-5deg) scaleX(1.12);filter:blur(2px)}}
@keyframes opening-title-arrive{0%{opacity:0;filter:blur(16px);transform:translateY(18px) scale(.9)}35%,100%{opacity:1;filter:none;transform:none}}
@keyframes opening-copy-rise{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
@keyframes opening-enter-arrive{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes opening-enter-pulse{to{border-color:rgba(239,211,141,.86);box-shadow:0 14px 45px rgba(0,0,0,.4),0 0 25px rgba(230,201,134,.16)}}
@keyframes opening-music-pulse{to{color:#fff1c9;text-shadow:0 0 12px rgba(239,211,141,.8);transform:scale(1.1)}}
@keyframes opening-start-breathe{to{box-shadow:0 0 48px rgba(230,201,134,.2),inset 0 0 30px rgba(230,201,134,.1);transform:scale(1.035)}}
@keyframes opening-leave{0%{opacity:1;filter:none}38%{opacity:1;filter:brightness(1.6)}100%{opacity:0;filter:brightness(.25);transform:scale(1.025)}}

/* 全局閱讀尺度：不再用 5–8px 承載遊戲資訊。 */
.brand p,.panel-heading small,.panel-heading em,.map-node small,.map-hint,
.chapter-marker,.scene-caption,.story-tag,.choice-button em,.action-card em,
.resource-grid span,.technique-card span,.technique-card p,.empty-state,
.relation small,.relation em,.log-panel time,.log-panel li span,.eyebrow,
.origin-card small,.origin-card em,.intro-footnote,.background-card small,
.background-card em,.back-choice,.fate-clock,.artifact-card small,.artifact-card p,
.artifact-card em,.skill-book small,.skill-book em,.skill-chip,.empty-skill,
.draft-card small,.draft-card em,.ending-stats span,.legacy-result{
  font-size:max(10px,.66rem);
  line-height:1.45;
}
.realm-badge span,.status-meter>div,.story-copy>p,.choice-button span,
.action-card small,.background-card p,.origin-card p,.draft-card span,
.draft-dialog>p:not(.eyebrow){font-size:max(11px,.72rem);line-height:1.65}
.action-card b,.artifact-card strong,.relation b{font-size:max(12px,.77rem)}
.technique-card strong{font-size:max(13px,.84rem)}
.corruption-mark{font-size:max(10px,.66rem)}
.story-tag{font-size:max(10px,.66rem)!important}
.destiny-card small,.world-pulse>span,.legacy-codex span{font-size:max(10px,.66rem)}
.destiny-card strong,.world-pulse>strong{font-size:max(11px,.72rem)}
.destiny-card p{font-size:max(10px,.66rem);line-height:1.55}

/* 開局道身選擇：直接以戰鬥角色立繪預覽三條流派。 */
#mentorStep .origin-grid{gap:14px}
#mentorStep .origin-card{
  position:relative;
  min-height:390px;
  padding:0 16px 16px;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--accent) 28%,transparent);
  background:linear-gradient(155deg,rgba(25,36,29,.98),rgba(7,13,9,.98));
  text-align:left;
  box-shadow:0 16px 35px rgba(0,0,0,.24);
}
#mentorStep .origin-card:hover{box-shadow:0 22px 46px rgba(0,0,0,.42),0 0 24px color-mix(in srgb,var(--accent) 18%,transparent)}
.origin-portrait{
  position:relative;
  height:230px;
  margin:0 -16px 14px;
  overflow:hidden;
  background-image:url("assets/combat/player-paths-cutout.png");
  background-repeat:no-repeat;
  background-size:300% auto;
  background-position:0 18%;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  filter:saturate(.94) contrast(1.05);
  transition:background-size .32s,filter .32s;
}
.origin-portrait.alchemy{background-position:50% 18%}
.origin-portrait.demon{background-position:100% 18%}
.origin-portrait:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(5,10,7,.94) 100%),radial-gradient(circle at 50% 35%,transparent 26%,rgba(0,0,0,.22) 82%)}
.origin-portrait:after{content:"";position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);pointer-events:none}
.origin-portrait span{position:absolute;z-index:2;left:14px;bottom:11px;padding:5px 9px;border-left:2px solid var(--accent);color:#edf5ef;background:rgba(4,9,6,.72);font-size:11px;letter-spacing:.15em;text-shadow:0 2px 8px #000}
#mentorStep .origin-card:hover .origin-portrait{background-size:312% auto;filter:saturate(1.08) contrast(1.08) brightness(1.06)}
#mentorStep .origin-card small{font-size:10px;letter-spacing:.12em}
#mentorStep .origin-card strong{display:block;margin:4px 0 7px;font-size:18px}
#mentorStep .origin-card p{height:auto;min-height:50px;margin:0 0 9px;font-size:11px;line-height:1.65}
#mentorStep .origin-card em{font-size:10px}

/* 第三步：角色定名。門派、人物與專屬序章在確認前一次看清。 */
#nameStep{text-align:left}
.naming-stage{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(360px,1.18fr);gap:22px;align-items:stretch;max-width:820px;margin:0 auto;padding:10px;border:1px solid rgba(224,189,114,.2);background:linear-gradient(145deg,rgba(26,38,30,.96),rgba(7,13,9,.98));box-shadow:0 22px 55px rgba(0,0,0,.35)}
.naming-portrait{position:relative;min-height:430px;overflow:hidden;border:1px solid rgba(170,204,197,.28);background-image:linear-gradient(180deg,transparent 56%,rgba(3,8,5,.96) 100%),url("assets/combat/player-paths-cutout.png");background-repeat:no-repeat;background-size:auto,300% auto;background-position:center,0 42%;filter:saturate(.98) contrast(1.07)}
.naming-portrait.alchemy{background-position:center,50% 42%}.naming-portrait.demon{background-position:center,100% 42%}
.naming-portrait:after{content:"";position:absolute;inset:9px;border:1px solid rgba(224,189,114,.2);box-shadow:inset 0 0 40px rgba(0,0,0,.45);pointer-events:none}
.naming-portrait span{position:absolute;z-index:2;left:17px;bottom:16px;padding:7px 11px;border-left:2px solid var(--v3-gold);color:#fff3d3;background:rgba(4,9,6,.78);font-size:12px;letter-spacing:.18em}
.naming-copy{display:flex;flex-direction:column;padding:18px 16px 14px}
.naming-copy>small{color:var(--v3-gold);font-size:11px;letter-spacing:.12em}
.naming-copy h3{margin:6px 0 10px;color:#f4f1e6;font-size:clamp(25px,3vw,36px);font-weight:500;letter-spacing:.05em}
.naming-copy>p{min-height:72px;margin:0 0 14px;color:#aebbb1;font-size:12px;line-height:1.8}
.naming-cast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:18px}
.naming-cast span{min-width:0;padding:9px 7px;border:1px solid rgba(152,186,166,.18);background:rgba(20,33,25,.72);text-align:center}
.naming-cast b,.naming-cast small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.naming-cast b{color:#e8efe9;font-size:11px}.naming-cast small{margin-top:3px;color:#85958a;font-size:9px}
.name-field{display:block;margin-top:auto}.name-field>span{display:block;margin-bottom:7px;color:#d9c58e;font-size:11px;letter-spacing:.1em}
.name-field input{box-sizing:border-box;width:100%;height:52px;padding:0 14px;border:1px solid rgba(224,189,114,.38);border-radius:0;outline:none;color:#fff7dd;background:rgba(3,8,5,.76);font-family:inherit;font-size:18px;font-weight:500;line-height:1.2;letter-spacing:.1em;caret-color:#f0cf75;transition:border-color .2s,box-shadow .2s}
.name-field input:focus{border-color:#eccf82;box-shadow:0 0 0 3px rgba(224,189,114,.09),inset 0 0 22px rgba(224,189,114,.04)}
.name-field small{display:block;min-height:18px;margin-top:6px;color:#7f8e84;font-size:9px}.name-field small.error{color:#d98979}
.naming-actions{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px;margin-top:12px}.naming-actions button{min-height:45px;padding:9px 12px;font-size:12px;cursor:pointer}.secondary-button{border:1px solid rgba(154,183,166,.3);color:#c4d2c8;background:rgba(28,42,33,.75)}.secondary-button:hover{border-color:#91bfa3;color:#edf8f0}
.ending-stats{grid-template-columns:repeat(5,minmax(0,1fr))}

/* 戰況優先：名稱、血量、意圖與技能保持明確層級。 */
.boss-phase{font-size:11px;letter-spacing:.2em}
.round-pulse{font-size:10px}
.combatant-info{padding:10px 13px 11px}
.combatant-info>span{font-size:10px}
.combatant-info h2{font-size:clamp(16px,1.45vw,22px)}
.combatant-info>small{font-size:11px;font-variant-numeric:tabular-nums}
.combat-resource>span,.combat-resource>strong{font-size:11px}
.fighter-status{gap:5px;min-height:23px}
.status-chip{padding:3px 7px;font-size:9px;line-height:1.3}
.boss-mechanic{font-size:11px;line-height:1.5}
.intent-box{font-size:12px;line-height:1.45}
.intent-box>span{font-size:10px}
.intent-box>strong{font-size:12px}
.intent-box>em{font-size:10px}
.combat-message{min-height:23px;font-size:11px}
.combat-action{min-height:66px;padding:10px 11px}
.combat-action b{font-size:13px;letter-spacing:.03em}
.combat-action small{font-size:10px;line-height:1.45}
.damage-number small{font-size:10px}
.combat-cinematic small,.technique-cut.combo:after,.boss-transition small,
.finisher-overlay p,.critical-overlay>span{font-size:11px}

/* 高速線：突進時讓畫面朝命中點收束。 */
.combat-speed-lines{
  position:absolute;
  z-index:14;
  inset:6% -8% 22%;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  mix-blend-mode:screen;
}
.combat-speed-lines:before,.combat-speed-lines:after{
  content:"";
  position:absolute;
  inset:-20%;
  background:repeating-conic-gradient(from 90deg at 26% 48%,transparent 0 4.2deg,rgba(var(--combat-school-rgb),.54) 4.35deg 4.55deg,transparent 4.7deg 8.4deg);
  filter:blur(.35px) drop-shadow(0 0 4px var(--combat-school));
  transform:scaleX(1.2);
}
.combat-speed-lines:after{opacity:.48;transform:scaleX(1.35) rotate(.8deg)}
.combat-speed-lines.enemy:before,.combat-speed-lines.enemy:after{background:repeating-conic-gradient(from -90deg at 74% 48%,transparent 0 4.2deg,rgba(241,82,58,.56) 4.35deg 4.55deg,transparent 4.7deg 8.4deg)}
.combat-speed-lines.show{animation:speed-lines-show .28s ease-out both}

/* 殘影沿突進方向散去。實體由 JS 複製當前角色外觀。 */
.attack-afterimage{
  position:absolute;
  z-index:2;
  inset:0;
  opacity:0;
  pointer-events:none;
  background-repeat:no-repeat;
  filter:sepia(.15) saturate(1.5) drop-shadow(0 0 14px var(--combat-school));
  mix-blend-mode:screen;
  animation:afterimage-player .42s ease-out both;
}
.attack-afterimage.enemy-copy{filter:saturate(1.5) drop-shadow(0 0 14px #ef563e);animation-name:afterimage-enemy}
.attack-afterimage:nth-last-child(2){animation-delay:28ms;opacity:.28}
.attack-afterimage:nth-last-child(3){animation-delay:54ms;opacity:.2}

/* 命中粒子依流派改變形狀。 */
.combat-particles{position:absolute;z-index:34;inset:0;overflow:hidden;pointer-events:none}
.combat-particle{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:calc(var(--size) * .24);
  opacity:0;
  border-radius:999px;
  background:#fff;
  box-shadow:0 0 7px currentColor,0 0 16px currentColor;
  color:var(--combat-school);
  transform:rotate(var(--rot));
  animation:combat-particle-flight .55s cubic-bezier(.12,.7,.2,1) var(--delay) both;
}
.combat-particle.alchemy{height:var(--size);border:1px solid #dcff8b;border-radius:50%;background:radial-gradient(circle,#fff,#5dec99 38%,transparent 67%);color:#77f1a8}
.combat-particle.demon{height:calc(var(--size) * .12);border-radius:0;background:linear-gradient(90deg,#fff,#f12d58,transparent);color:#f12d58}
.combat-particle.enemy{color:#f06448;background:linear-gradient(90deg,#fff,#ef5a3f,transparent)}

/* 命中字印與雙層衝擊波。 */
.impact-seal{
  position:absolute;
  z-index:38;
  left:25%;
  top:42%;
  display:grid;
  place-items:center;
  width:112px;
  aspect-ratio:1;
  opacity:0;
  color:var(--combat-school);
  pointer-events:none;
  transform:translate(-50%,-50%);
}
.impact-seal.player-side{left:75%;color:#ef684f}
.impact-seal i,.impact-seal b{position:absolute;inset:0;border:2px solid currentColor;border-radius:50%;box-shadow:0 0 24px currentColor}
.impact-seal b{inset:15%;border-style:dashed;opacity:.65}
.impact-seal span{font-size:42px;font-weight:700;text-shadow:0 0 12px currentColor,0 3px 10px #000}
.impact-seal.sword i{border-radius:4%;transform:rotate(45deg)}
.impact-seal.alchemy i{background:repeating-conic-gradient(from 0deg,rgba(126,255,166,.2) 0 8deg,transparent 9deg 30deg)}
.impact-seal.demon i{border-radius:38% 62% 44% 56%;transform:rotate(-11deg)}
.impact-seal.show{animation:impact-seal-show .46s cubic-bezier(.1,.75,.2,1) both}
.impact-seal.show i{animation:impact-ring-out .46s ease-out both}
.impact-seal.show b{animation:impact-ring-spin .46s ease-out both}

/* 彩色瞬閃保留角色與 UI，不再整幕漂白。 */
.combat-flash{
  position:absolute;
  z-index:36;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(circle at 25% 45%,#fff 0 1%,rgba(var(--combat-school-rgb),.58) 3%,rgba(var(--combat-school-rgb),.14) 18%,transparent 48%);
  mix-blend-mode:screen;
}
.combat-flash.player-side{background:radial-gradient(circle at 75% 45%,#fff 0 1%,rgba(241,80,57,.58) 3%,rgba(241,80,57,.14) 18%,transparent 48%)}
.combat-flash.show{animation:combat-color-flash .24s ease-out both}

/* 三流派的畫面簽名。 */
#combatDialog.impact-sword-style .combat-arena:after,
#combatDialog.impact-alchemy-style .combat-arena:after,
#combatDialog.impact-demon-style .combat-arena:after{
  content:"";
  position:absolute;
  z-index:18;
  inset:6% -8% 14%;
  opacity:0;
  pointer-events:none;
}
#combatDialog.impact-sword-style .combat-arena:after{background:linear-gradient(173deg,transparent 45%,rgba(221,255,255,.92) 46%,transparent 47%),linear-gradient(7deg,transparent 48%,rgba(126,230,242,.62) 49%,transparent 50%);filter:drop-shadow(0 0 12px #dfffff);animation:sword-cross-cut .34s ease-out both}
#combatDialog.impact-alchemy-style .combat-arena:after{left:8%;right:48%;border:2px solid #7bf0a7;border-radius:50%;background:repeating-conic-gradient(from 8deg,rgba(104,248,154,.32) 0 5deg,transparent 6deg 26deg),radial-gradient(circle,rgba(224,255,139,.36),transparent 55%);box-shadow:0 0 28px rgba(89,239,148,.65),inset 0 0 25px rgba(89,239,148,.42);animation:alchemy-mandala .45s ease-out both}
#combatDialog.impact-demon-style .combat-arena:after{background:repeating-linear-gradient(66deg,transparent 0 9%,rgba(244,37,80,.86) 9.5% 10.1%,transparent 10.6% 18%);filter:drop-shadow(0 0 8px #ed315b);animation:demon-rift-storm .4s steps(4,end) both}

#combatDialog.shake-light .combat-arena{animation:arena-shake-light .24s steps(2,end) both}
#combatDialog.shake-heavy .combat-arena{animation:arena-shake-heavy .34s steps(2,end) both}
#combatDialog.shake-heavy .combat-backdrop{animation:backdrop-punch .36s ease-out both}

/* 原有停頓稍微收斂，避免高光時整幕只剩白黑。 */
@keyframes hit-stop-heavy{0%,55%{filter:grayscale(.55) contrast(1.55) brightness(1.28)}56%,100%{filter:none}}
@keyframes hit-stop-sword{0%,62%{filter:grayscale(.7) contrast(1.7) brightness(1.3)}63%,100%{filter:none}}
@keyframes speed-lines-show{0%{opacity:0;transform:scale(1.08)}24%,72%{opacity:.72}100%{opacity:0;transform:scale(.96)}}
@keyframes afterimage-player{0%{opacity:.42;transform:translateX(3%) scale(.99)}100%{opacity:0;transform:translateX(34%) scale(1.05);filter:blur(5px)}}
@keyframes afterimage-enemy{0%{opacity:.4;transform:translateX(-3%) scale(.99)}100%{opacity:0;transform:translateX(-34%) scale(1.05);filter:blur(5px)}}
@keyframes combat-particle-flight{0%{opacity:1;transform:translate(0,0) rotate(var(--rot)) scale(1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(calc(var(--rot) + 110deg)) scale(.35)}}
@keyframes impact-seal-show{0%{opacity:0;transform:translate(-50%,-50%) scale(.18) rotate(-18deg)}20%,62%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.65) rotate(9deg)}}
@keyframes impact-ring-out{to{transform:scale(1.55);opacity:0}}
@keyframes impact-ring-spin{to{transform:rotate(150deg) scale(.65);opacity:0}}
@keyframes combat-color-flash{0%{opacity:.95}100%{opacity:0;filter:blur(4px)}}
@keyframes sword-cross-cut{0%{opacity:0;transform:scaleX(.2)}22%,60%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.18)}}
@keyframes alchemy-mandala{0%{opacity:0;transform:rotate(-45deg) scale(.15)}32%,70%{opacity:.9;transform:rotate(15deg) scale(1)}100%{opacity:0;transform:rotate(48deg) scale(1.45)}}
@keyframes demon-rift-storm{0%{opacity:0;transform:scaleX(.8)}24%,72%{opacity:.9;transform:scaleX(1.04)}100%{opacity:0;transform:scaleX(1.12)}}
@keyframes arena-shake-light{0%,100%{transform:none}25%{transform:translate(-4px,2px)}55%{transform:translate(4px,-2px)}78%{transform:translate(-2px,-1px)}}
@keyframes arena-shake-heavy{0%,100%{transform:none}15%{transform:translate(-10px,4px) rotate(-.25deg)}34%{transform:translate(9px,-5px) rotate(.22deg)}52%{transform:translate(-7px,2px)}70%{transform:translate(5px,-2px)}86%{transform:translate(-2px,1px)}}
@keyframes backdrop-punch{0%{transform:scale(1.07)}28%{transform:scale(1.12);filter:saturate(1.2) brightness(.72) contrast(1.3)}100%{transform:scale(1.07)}}

@media(max-width:900px){
  .combatant-info h2{font-size:14px}
  .combatant-info>small{font-size:10px}
  .combat-resource{gap:5px}.combat-resource>span,.combat-resource>strong{font-size:10px}
  .combat-action{flex-basis:164px;min-height:64px}
  .intent-box>em{font-size:9px}
}

@media(max-width:780px){
  .topbar{position:sticky;z-index:45;top:0;grid-template-columns:1fr;gap:8px;min-height:0;margin:0 -8px;padding:8px;border-bottom-color:rgba(224,189,114,.2);background:rgba(5,11,7,.96);box-shadow:0 10px 30px rgba(0,0,0,.36);backdrop-filter:blur(18px)}
  .brand{min-width:0}.brand h1{overflow:hidden;font-size:20px;text-overflow:ellipsis;white-space:nowrap}
  .header-actions{display:grid;width:100%;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  .header-actions .icon-button,.header-actions .text-button{display:grid!important;place-items:center;width:100%;min-width:0;height:40px;padding:0 3px;border-radius:0;font-size:12px;line-height:1;text-align:center}
  .header-actions .drawer-toggle{font-size:12px}
  .drawer-toggle[aria-expanded="true"]{color:#101710;background:var(--v3-gold);border-color:var(--v3-gold)}
  .map-panel,.right-stack{display:none}
  .mobile-drawer-home{position:sticky;z-index:6;top:0;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;padding:0 14px;border:1px solid rgba(224,189,114,.34);color:#f0dfb4;background:linear-gradient(90deg,rgba(80,60,26,.7),rgba(25,37,29,.96));font-size:13px;font-weight:700;letter-spacing:.08em;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.34)}
  .mobile-drawer-home span{font-size:20px;line-height:1}
  body.mobile-map-open,body.mobile-codex-open{overflow:hidden}
  body.mobile-map-open:after,body.mobile-codex-open:after{content:"";position:fixed;z-index:38;inset:0;background:rgba(1,4,2,.76);backdrop-filter:blur(5px);pointer-events:none}
  body.mobile-map-open .map-panel{position:fixed;z-index:42;inset:105px 8px 8px;display:block!important;min-height:0;padding:8px;overflow:auto;border-color:rgba(224,189,114,.34);background:linear-gradient(150deg,rgba(25,38,29,.99),rgba(8,15,10,.99));box-shadow:0 22px 70px rgba(0,0,0,.7)}
  body.mobile-codex-open .right-stack{position:fixed;z-index:42;inset:105px 8px 8px;display:grid!important;grid-template-columns:1fr;align-content:start;gap:10px;padding:8px;overflow:auto;border:1px solid rgba(224,189,114,.3);background:rgba(5,11,7,.98);box-shadow:0 22px 70px rgba(0,0,0,.7)}
  body.mobile-map-open .map-panel .map{height:min(58vh,470px)}
  body.mobile-codex-open .right-stack .panel{overflow:visible}
  .naming-stage{grid-template-columns:1fr;gap:10px;padding:8px}.naming-portrait{min-height:245px;background-size:auto,300% auto;background-position:center,0 32%}.naming-portrait.alchemy{background-position:center,50% 32%}.naming-portrait.demon{background-position:center,100% 32%}
  .naming-copy{padding:13px 10px 10px}.naming-copy>p{min-height:0}.naming-cast{margin-bottom:14px}
}

@media(max-width:540px){
  .header-actions #openingReplay{display:block;min-width:46px;padding:0 8px}
  .opening-skip{right:12px;top:11px;padding:7px 9px}
  .opening-music{left:12px;top:11px;padding:7px 9px}.opening-music b{font-size:10px}
  .opening-start{padding:18px}.opening-start-seal{width:68px;font-size:34px}.opening-start p{font-size:13px;letter-spacing:.22em;text-indent:.22em}.opening-begin{min-width:218px}.opening-start em{font-size:10px}
  .opening-copy{padding:14vh 18px 4vh}
  .opening-kicker{font-size:9px;letter-spacing:.28em}
  .opening-title span{font-size:58px;letter-spacing:.1em;text-indent:.1em}
  .opening-title strong{margin-top:10px;font-size:16px;letter-spacing:.38em;text-indent:.38em}
  .opening-oath{max-width:310px;margin-top:15px;font-size:11px;letter-spacing:.07em}
  .opening-enter{min-width:215px;margin-top:22px}
  .opening-paths i{bottom:2%;width:70%;height:72%;background-position-y:10%}
  .opening-paths .sword{left:-34%}.opening-paths .alchemy{left:15%}.opening-paths .demon{right:-34%}
  .opening-orbit{top:38%;width:88px}
  #combatDialog.combat-dialog{grid-template-rows:30px minmax(242px,1fr) auto}
  .boss-phase{font-size:10px}.round-pulse{font-size:10px}
  .combatant-info{padding:6px 7px 7px}
  .combatant-info h2{font-size:13px}
  .combatant-info>small{font-size:10px}
  .combat-resource{margin-top:4px}.combat-resource>span{width:18px;height:18px}.combat-resource>span,.combat-resource>strong{font-size:9px}.combat-resource>strong{min-width:52px}
  .fighter-status{min-height:19px}.status-chip{padding:2px 4px;font-size:9px}
  .boss-mechanic{font-size:10px}
  .intent-box{padding:6px 8px}.intent-box>strong{font-size:11px;line-height:1.4}
  .combat-message{min-height:18px;font-size:10px}
  .mobile-action-head{font-size:11px}.mobile-action-head span{font-size:9px}
  .combat-action{min-height:66px;padding:8px}
  .combat-action b{font-size:12px}.combat-action small{font-size:10px}
  .combat-cinematic small,.critical-overlay>span{font-size:10px}
  .impact-seal{width:78px}.impact-seal span{font-size:30px}
  #mentorStep .origin-card{min-height:360px}
  .origin-portrait{height:215px;background-position-y:16%}
  .naming-stage{padding:6px}.naming-portrait{min-height:210px}.naming-copy h3{font-size:25px}.naming-copy>p{font-size:11px;line-height:1.65}.naming-cast{grid-template-columns:1fr}.naming-cast span{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;text-align:left}.naming-cast small{margin-top:0}.naming-actions{grid-template-columns:1fr}.name-field input{height:48px;font-size:17px}
  .ending-stats{grid-template-columns:1fr 1fr}
}

@media(prefers-reduced-motion:reduce){
  .opening-cinematic.playing .opening-backdrop{opacity:1;transform:scale(1.04);filter:saturate(.7) brightness(.5);animation:none!important}
  .opening-cinematic.playing .opening-ink{clip-path:circle(92% at 50% 48%);animation:none!important}
  .opening-cinematic.playing .opening-paths i{opacity:.13;transform:none;filter:brightness(.45);animation:none!important}
  .opening-cinematic.playing .opening-orbit{opacity:.16;transform:translate(-50%,-50%) scale(2.6);animation:none!important}
  .opening-cinematic.playing .opening-kicker,.opening-cinematic.playing .opening-title,.opening-cinematic.playing .opening-oath{opacity:1;transform:none;filter:none;animation:none!important}
  .opening-slash{display:none}
  .combat-speed-lines,.attack-afterimage,.combat-particle,.impact-seal,.combat-flash{display:none!important}
  #combatDialog.shake-light .combat-arena,#combatDialog.shake-heavy .combat-arena{animation:none!important}
}