@charset "UTF-8";
/* =============================================================================
   海岛之战 · 韩立对温天仁 —— 演法台 HUD
   Ink-wash xianxia ritual console. Film-grade overlay for a full-bleed WebGL stage.
   Sections:
     01 Tokens        02 Reset/base     03 Scrollbars/focus   04 Stage atmosphere
     05 Topbar        06 Panel shell    07 Chapter list       08 Counter chain
     09 Battle log    10 Controls       11 Stage overlay      12 Footer/status
     13 Timeline      14 Transport      15 Toast              16 Entry
     17 Help modal    18 Endcard        19 Keyframes          20 Responsive
   ============================================================================= */

/* == 01 · TOKENS ============================================================ */
:root {
  /* ink field */
  --ink: #050a10;
  --ink-deep: #08131b;
  --omen: #04060a;
  --surface: rgba(9, 20, 28, .72);
  --surface-2: rgba(6, 14, 20, .9);
  --sink: rgba(4, 10, 14, .72);

  /* ritual gold */
  --gold: #f0c463;
  --gold-bright: #ffe6a8;
  --gold-dim: #8a6f34;
  --gold-wash: rgba(240, 196, 99, .10);

  /* factions + elements */
  --wen: #a86ff0;
  --wen-deep: #6d2fb0;
  --jade: #4fe0a0;
  --thunder: #9fd8ff;

  /* semantic */
  --danger: #e0342f;
  --seal: #c0392b;
  --warn: #f5a623;
  --info: var(--thunder);
  --ok: var(--jade);

  /* text */
  --paper: #efe6d2;
  --paper-dim: rgba(239, 230, 210, .74);
  --muted: #8fa3b0;
  --ghost: #cfd6d6;

  /* rules */
  --line: rgba(240, 196, 99, .18);
  --line-soft: rgba(240, 196, 99, .10);
  --line-strong: rgba(240, 196, 99, .36);

  /* type */
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
  --sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* geometry */
  --top-h: 64px;
  --pl-w: 300px;
  --pr-w: 322px;
  --foot-h: 220px;
  --edge: 14px;
  --ctl-name-w: 74px;
  --r-lg: 14px;
  --r-md: 9px;
  --r-sm: 6px;

  /* depth */
  --lacquer: linear-gradient(180deg, rgba(11, 24, 33, .78) 0%, rgba(6, 14, 20, .86) 100%);
  --shadow-panel:
    0 24px 60px -22px rgba(2, 6, 10, .92),
    0 2px 18px -8px rgba(2, 6, 10, .7),
    inset 0 1px 0 rgba(255, 230, 168, .07),
    inset 0 0 60px -22px rgba(79, 224, 160, .22);
  --shadow-lift: 0 10px 26px -12px rgba(2, 6, 10, .9), 0 0 0 1px var(--line);
  --glow-gold: 0 0 18px -4px rgba(240, 196, 99, .55);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, .84, .44, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23f0c463' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* == 02 · RESET / BASE ====================================================== */
* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; }

body {
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

#app { position: fixed; inset: 0; }

h1, h2, h3, p, ol, ul, li, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }

button, input, select, output { font: inherit; color: inherit; font-family: var(--sans); }

button { border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }

[hidden] { display: none !important; }

::selection { background: rgba(240, 196, 99, .28); color: var(--gold-bright); }

.only-mobile { display: none !important; }

/* == 03 · SCROLLBARS / FOCUS ================================================ */
.panel-scroll,
.log-list,
.help-card,
#entry,
#help-modal,
#endcard { scrollbar-width: thin; scrollbar-color: var(--gold-dim) rgba(4, 10, 14, .7); }

.panel-scroll::-webkit-scrollbar,
.log-list::-webkit-scrollbar,
.help-card::-webkit-scrollbar,
#entry::-webkit-scrollbar,
#help-modal::-webkit-scrollbar,
#endcard::-webkit-scrollbar { width: 8px; height: 8px; }

.panel-scroll::-webkit-scrollbar-track,
.log-list::-webkit-scrollbar-track,
.help-card::-webkit-scrollbar-track,
#entry::-webkit-scrollbar-track,
#help-modal::-webkit-scrollbar-track,
#endcard::-webkit-scrollbar-track { background: rgba(4, 10, 14, .7); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(240, 196, 99, .07); }

.panel-scroll::-webkit-scrollbar-thumb,
.log-list::-webkit-scrollbar-thumb,
.help-card::-webkit-scrollbar-thumb,
#entry::-webkit-scrollbar-thumb,
#help-modal::-webkit-scrollbar-thumb,
#endcard::-webkit-scrollbar-thumb { border-radius: 8px; background: linear-gradient(180deg, var(--gold-dim), #b9903f); box-shadow: inset 0 0 0 1px rgba(4, 10, 14, .55); }

.panel-scroll::-webkit-scrollbar-thumb:hover,
.log-list::-webkit-scrollbar-thumb:hover,
.help-card::-webkit-scrollbar-thumb:hover,
#entry::-webkit-scrollbar-thumb:hover,
#help-modal::-webkit-scrollbar-thumb:hover,
#endcard::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold), var(--gold-bright)); }

.panel-scroll::-webkit-scrollbar-corner,
.log-list::-webkit-scrollbar-corner,
.help-card::-webkit-scrollbar-corner { background: transparent; }

:where(button, select, input, [tabindex]):focus-visible,
.chapter-item:focus-visible { outline: 2px solid rgba(240, 196, 99, .9); outline-offset: 2px; border-radius: var(--r-sm); }

.act-btn:focus-visible,
.tp-btn:focus-visible,
.icon-btn:focus-visible,
.seg-btn:focus-visible,
#btn-enter:focus-visible { box-shadow: 0 0 0 4px rgba(240, 196, 99, .18), var(--glow-gold); }

/* == 04 · STAGE + ATMOSPHERE ================================================ */
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; background: radial-gradient(120% 90% at 50% 8%, #0b1c26 0%, #050a10 62%, #04060a 100%); touch-action: none; }

#edge-glow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% 118%, rgba(79, 224, 160, .07), transparent 62%),
    radial-gradient(70% 50% at 4% -8%, rgba(159, 216, 255, .06), transparent 60%),
    radial-gradient(60% 45% at 100% 4%, rgba(168, 111, 240, .06), transparent 62%),
    radial-gradient(115% 92% at 50% 50%, transparent 38%, rgba(2, 6, 10, .34) 72%, rgba(2, 6, 10, .74) 100%),
    linear-gradient(90deg, rgba(2, 6, 10, .5) 0%, transparent 14%, transparent 86%, rgba(2, 6, 10, .5) 100%);
}

#frame-bars { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

#frame-bars .bar { position: absolute; left: 0; right: 0; height: 92px; }

#frame-bars .bar-top { top: 0; background: linear-gradient(180deg, rgba(4, 6, 10, .82) 0%, rgba(4, 6, 10, .34) 46%, rgba(4, 6, 10, 0) 100%); }

#frame-bars .bar-bottom { bottom: 0; height: 120px; background: linear-gradient(0deg, rgba(4, 6, 10, .8) 0%, rgba(4, 6, 10, .3) 48%, rgba(4, 6, 10, 0) 100%); }

/* == 05 · TOPBAR ============================================================ */
#topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-h);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--edge);
  background: linear-gradient(180deg, rgba(6, 14, 20, .92) 0%, rgba(6, 14, 20, .66) 70%, rgba(6, 14, 20, .34) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 10px 30px -18px rgba(2, 6, 10, .95);
}

#topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(240, 196, 99, 0) 0%,
      rgba(240, 196, 99, .12) 12%,
      rgba(255, 230, 168, .55) 50%,
      rgba(240, 196, 99, .12) 88%,
      rgba(240, 196, 99, 0) 100%);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }

.brand-seal {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
  color: var(--paper);
  border-radius: 7px;
  background: linear-gradient(155deg, #c8402f 0%, var(--seal) 45%, #8c2119 100%);
  box-shadow:
    0 6px 16px -8px rgba(192, 57, 43, .9),
    inset 0 0 0 1px rgba(255, 230, 168, .3),
    inset 0 -6px 12px -8px rgba(4, 6, 10, .8);
  transform: rotate(-2deg);
  text-shadow: 0 1px 2px rgba(60, 8, 6, .7);
}

.brand-text { min-width: 0; }

.brand-text h1 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.2;
  color: var(--gold-bright);
  text-shadow: 0 1px 0 rgba(4, 6, 10, .9), 0 0 18px rgba(240, 196, 99, .22);
  white-space: nowrap;
}

.brand-vs { font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .18em; color: var(--paper-dim); padding-left: 10px; border-left: 1px solid var(--line); white-space: nowrap; }

.brand-text p { margin-top: 2px; font-size: 10.5px; letter-spacing: .1em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(240, 196, 99, .3);
  background: linear-gradient(180deg, rgba(240, 196, 99, .14), rgba(240, 196, 99, .05));
  color: var(--gold-bright);
  font-size: 11.5px;
  letter-spacing: .12em;
  white-space: nowrap;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}

.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: dot-pulse 2.6s ease-in-out infinite; }

#mode-badge.is-free { border-color: rgba(159, 216, 255, .4); background: linear-gradient(180deg, rgba(159, 216, 255, .16), rgba(159, 216, 255, .05)); color: #d6ecff; }

#mode-badge.is-free .dot { background: var(--thunder); box-shadow: 0 0 10px var(--thunder); animation-duration: 1.15s; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11, 24, 33, .8), rgba(6, 14, 20, .8));
  color: var(--paper-dim);
  font-size: 12px;
  letter-spacing: .1em;
  white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s, box-shadow .25s, transform .12s;
}

.icon-btn .ico { font-size: 14px; line-height: 1; font-family: var(--sans); }

.icon-btn:hover { color: var(--gold-bright); border-color: var(--line-strong); background: linear-gradient(180deg, rgba(240, 196, 99, .16), rgba(240, 196, 99, .05)); box-shadow: var(--glow-gold); }

.icon-btn:active { transform: translateY(1px); }

#btn-audio { position: relative; }

#btn-audio.is-on { color: var(--gold-bright); border-color: rgba(240, 196, 99, .42); background: linear-gradient(180deg, rgba(240, 196, 99, .18), rgba(240, 196, 99, .05)); }

#btn-audio.is-on .ico { color: var(--gold); text-shadow: 0 0 10px rgba(240, 196, 99, .8); animation: eq-pulse 1.7s ease-in-out infinite; }

#btn-audio.is-off { color: var(--muted); border-color: rgba(143, 163, 176, .26); background: linear-gradient(180deg, rgba(11, 24, 33, .7), rgba(6, 14, 20, .8)); }

#btn-audio.is-off .ico { position: relative; opacity: .75; }

#btn-audio.is-off .ico::after { content: ""; position: absolute; left: -3px; right: -3px; top: 52%; height: 1px; background: var(--muted); transform: rotate(-22deg); }

#btn-audio.is-off #audio-state { text-decoration: line-through; text-decoration-thickness: 1px; }

/* == 06 · PANEL SHELL ======================================================= */
.panel {
  position: fixed;
  top: calc(var(--top-h) + 12px);
  bottom: calc(var(--foot-h) + 12px);
  z-index: 25;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background-image:
    radial-gradient(120% 60% at 0% 0%, rgba(79, 224, 160, .07), transparent 60%),
    radial-gradient(100% 50% at 100% 100%, rgba(240, 196, 99, .07), transparent 62%),
    var(--lacquer);
  background-color: var(--surface-2);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .panel, #topbar, #bottom, .help-card, .end-inner, .entry-inner, #toast { background-color: rgba(6, 14, 20, .96); }
}

/* ritual corner ticks */
.panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  border-radius: 8px;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) left 0 top 0 / 14px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left 0 top 0 / 1px 14px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right 0 top 0 / 14px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right 0 top 0 / 1px 14px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left 0 bottom 0 / 14px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left 0 bottom 0 / 1px 14px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right 0 bottom 0 / 14px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) right 0 bottom 0 / 1px 14px no-repeat;
  opacity: .75;
  z-index: 2;
}

#panel-left { left: var(--edge); width: var(--pl-w); }
#panel-right { right: var(--edge); width: var(--pr-w); }

.panel-head { position: relative; display: flex; align-items: center; gap: 8px; flex: none; padding: 12px 14px 10px; }

.panel-head::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(240, 196, 99, .45), rgba(240, 196, 99, .1) 60%, transparent); }

.panel-head h2 { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: .28em; color: var(--gold-bright); text-shadow: 0 0 16px rgba(240, 196, 99, .3); }

.panel-sub { flex: 1; font-family: var(--mono); font-size: 8.5px; letter-spacing: .22em; color: var(--muted); text-transform: uppercase; text-align: right; opacity: .8; }

.panel-close { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); color: var(--gold-bright); font-size: 18px; line-height: 1; background: rgba(4, 10, 14, .7); }

.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 14px 14px; scroll-behavior: smooth; }

.block { padding: 10px 0 12px; }
.block + .block { border-top: 1px dashed rgba(240, 196, 99, .13); }

.block-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--serif); font-size: 12.5px; font-weight: 600; letter-spacing: .3em; color: var(--gold); }

.block-title::before {
  content: "";
  flex: none;
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
  box-shadow: 0 0 8px rgba(240, 196, 99, .5);
}

.block-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* == 07 · CHAPTER LIST ====================================================== */
.chapter-list { display: flex; flex-direction: column; gap: 5px; }

.chapter-item {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 6px;
  border-radius: var(--r-md);
  border: 1px solid rgba(240, 196, 99, .1);
  background: linear-gradient(180deg, rgba(9, 20, 28, .55), rgba(5, 12, 18, .5));
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s var(--ease), border-color .2s, background .25s, box-shadow .25s;
}

.chapter-item:hover {
  transform: translateY(-1px);
  border-color: rgba(240, 196, 99, .3);
  background: linear-gradient(180deg, rgba(240, 196, 99, .1), rgba(9, 20, 28, .55));
  box-shadow: 0 8px 20px -14px rgba(2, 6, 10, .95), inset 0 0 24px -14px rgba(240, 196, 99, .8);
}

.chapter-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim)); opacity: 0; transition: opacity .25s; }

.ci-index {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(240, 196, 99, .24);
  background: rgba(4, 10, 14, .6);
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1;
  color: var(--gold);
  transition: all .25s var(--ease);
}

.ci-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.ci-name { font-family: var(--serif); font-size: 13px; letter-spacing: .12em; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ci-desc { font-size: 10px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ci-time { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--muted); opacity: .9; }

.ci-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(240, 196, 99, .08); }

.ci-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  box-shadow: 0 0 8px rgba(240, 196, 99, .6);
  transition: transform .2s linear;
}

.chapter-item.is-active {
  border-color: rgba(240, 196, 99, .42);
  background: linear-gradient(180deg, rgba(240, 196, 99, .16), rgba(9, 20, 28, .6));
  box-shadow: 0 10px 26px -18px rgba(2, 6, 10, .95), inset 0 0 30px -16px rgba(240, 196, 99, .9);
}

.chapter-item.is-active::before { opacity: 1; }

.chapter-item.is-active .ci-index {
  border-color: rgba(255, 230, 168, .45);
  background: linear-gradient(155deg, #c8402f, var(--seal) 60%, #8c2119);
  color: var(--paper);
  transform: rotate(-3deg);
  box-shadow: 0 4px 12px -6px rgba(192, 57, 43, .95), inset 0 0 0 1px rgba(255, 230, 168, .25);
}

.chapter-item.is-active .ci-name { color: var(--gold-bright); text-shadow: 0 0 14px rgba(240, 196, 99, .4); }
.chapter-item.is-active .ci-desc { color: var(--paper-dim); }
.chapter-item.is-active .ci-time { color: var(--gold); opacity: 1; }

.chapter-item.is-done { opacity: .62; }
.chapter-item.is-done:hover { opacity: .88; }

.chapter-item.is-done .ci-index { border-color: rgba(79, 224, 160, .3); background: rgba(79, 224, 160, .08); color: rgba(79, 224, 160, .85); }

.chapter-item.is-done .ci-index::after {
  content: "✓";
  position: absolute;
  right: -4px;
  bottom: -5px;
  font-family: var(--sans);
  font-size: 8px;
  line-height: 1;
  color: var(--jade);
  text-shadow: 0 0 6px rgba(79, 224, 160, .8);
}

.chapter-item.is-done .ci-progress::after { background: linear-gradient(90deg, rgba(79, 224, 160, .4), rgba(79, 224, 160, .7)); }

/* == 08 · COUNTER CHAIN ===================================================== */
.chain { display: flex; flex-direction: column; gap: 6px; }

.chain-row {
  --rel: var(--gold);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  border: 1px solid rgba(240, 196, 99, .1);
  background: rgba(8, 19, 27, .5);
  opacity: .72;
  filter: saturate(.75);
  overflow: hidden;
  transition: opacity .3s, filter .3s, border-color .3s, box-shadow .3s;
}

.chain-node {
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid transparent;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .06em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chain-node.side-han { color: #c6f5e0; background: linear-gradient(180deg, rgba(79, 224, 160, .16), rgba(159, 216, 255, .07)); border-color: rgba(79, 224, 160, .3); }

.chain-node.side-wen { color: #ecd8ff; background: linear-gradient(180deg, rgba(168, 111, 240, .18), rgba(240, 196, 99, .07)); border-color: rgba(168, 111, 240, .34); }

.chain-rel {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1;
  color: var(--rel);
  background: rgba(4, 10, 14, .7);
  box-shadow: 0 0 10px -4px currentColor;
}

.chain-rel[data-rel="counter"] { --rel: var(--danger); }
.chain-rel[data-rel="break"] { --rel: var(--warn); }
.chain-rel[data-rel="boost"] { --rel: var(--gold); }
.chain-rel[data-rel="resist"] { --rel: var(--thunder); }

.chain-row:has(.chain-rel[data-rel="counter"]) { --rel: var(--danger); }
.chain-row:has(.chain-rel[data-rel="break"]) { --rel: var(--warn); }
.chain-row:has(.chain-rel[data-rel="boost"]) { --rel: var(--gold); }
.chain-row:has(.chain-rel[data-rel="resist"]) { --rel: var(--thunder); }

.chain-row.is-live {
  opacity: 1;
  filter: none;
  border-color: color-mix(in srgb, var(--rel) 45%, transparent);
  box-shadow: 0 0 22px -12px var(--rel), inset 0 0 24px -16px var(--rel);
  animation: chain-breathe 2.6s ease-in-out infinite;
}

.chain-row.is-live::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
      transparent 12%,
      color-mix(in srgb, var(--rel) 26%, transparent) 42%,
      rgba(255, 230, 168, .16) 52%,
      transparent 78%);
  background-size: 240% 100%;
  animation: chain-flow 2.8s linear infinite;
}

.chain-row.is-spent { opacity: .38; filter: grayscale(.7); animation: none; }

.chain-row.is-spent::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(207, 214, 214, .6), transparent);
  transform: rotate(-1.2deg);
}

.chain-note { margin-top: 8px; font-size: 10.5px; line-height: 1.6; letter-spacing: .06em; color: var(--muted); padding-left: 9px; border-left: 1px solid var(--line); }

/* == 09 · BATTLE LOG ======================================================== */
.log-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 214px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(4, 10, 14, .66), rgba(4, 10, 14, .42));
  box-shadow: inset 0 6px 14px -10px rgba(2, 6, 10, .95);
}

.log-item {
  --tone: var(--paper);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 7px;
  padding: 5px 7px 5px 9px;
  border-radius: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 10%, transparent), transparent 70%);
}

.log-item::before { content: ""; position: absolute; left: 2px; top: 5px; bottom: 5px; width: 2px; border-radius: 2px; background: var(--tone); box-shadow: 0 0 8px -1px var(--tone); opacity: .85; }

.log-time { font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em; color: var(--muted); }

.log-text { font-size: 11.5px; line-height: 1.55; letter-spacing: .03em; color: var(--paper); word-break: break-word; }

.log-item.tone-han { --tone: var(--jade); }
.log-item.tone-wen { --tone: var(--gold); }
.log-item.tone-neutral { --tone: #d8cdb8; }
.log-item.tone-danger { --tone: var(--danger); }
.log-item.tone-omen { --tone: #b9a6e8; }

.log-item.tone-han .log-text { color: #d6f7e8; }
.log-item.tone-wen .log-text { color: #f7e7c2; }
.log-item.tone-danger .log-text { color: #ffc9c5; }
.log-item.tone-omen .log-text { color: #ded4f5; }

.log-item.is-new { animation: log-in .55s var(--ease-out) 1 both; }

/* == 10 · CONTROLS ========================================================== */
.ctl { display: grid; grid-template-columns: var(--ctl-name-w) minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 30px; padding: 2px 0; }

label.ctl { cursor: pointer; }

.ctl-name { font-size: 11.5px; letter-spacing: .08em; color: var(--paper-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ctl output {
  min-width: 44px;
  padding: 2px 5px;
  border-radius: 5px;
  border: 1px solid var(--line-soft);
  background: rgba(4, 10, 14, .66);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--gold);
  text-align: right;
}

/* range ------------------------------------------------------------------ */
.ctl input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer; }

.ctl input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(240, 196, 99, .5), rgba(240, 196, 99, .12));
  box-shadow: inset 0 0 0 1px rgba(240, 196, 99, .2), inset 0 1px 2px rgba(2, 6, 10, .8);
}

.ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--gold-bright), var(--gold) 58%, #a37c2f 100%);
  box-shadow: 0 0 0 1px rgba(4, 10, 14, .9), 0 0 10px -1px rgba(240, 196, 99, .8);
  transition: transform .14s var(--ease), box-shadow .2s;
}

.ctl input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.14); box-shadow: 0 0 0 1px rgba(4, 10, 14, .9), 0 0 16px 0 rgba(255, 230, 168, .9); }

.ctl input[type="range"]:active::-webkit-slider-thumb { transform: scale(.96); }

.ctl input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(240, 196, 99, .5), rgba(240, 196, 99, .12));
  box-shadow: inset 0 0 0 1px rgba(240, 196, 99, .2);
}

.ctl input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }

.ctl input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--gold-bright), var(--gold) 58%, #a37c2f 100%);
  box-shadow: 0 0 0 1px rgba(4, 10, 14, .9), 0 0 10px -1px rgba(240, 196, 99, .8);
}

.ctl input[type="range"]:focus { outline: none; }
.ctl input[type="range"]:focus-visible { outline: 2px solid rgba(240, 196, 99, .85); outline-offset: 3px; }

/* select ----------------------------------------------------------------- */
.select {
  width: 100%;
  height: 28px;
  padding: 0 26px 0 9px;
  border-radius: 7px;
  border: 1px solid rgba(240, 196, 99, .22);
  background-color: rgba(6, 14, 20, .88);
  background-image: var(--arrow);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 7px;
  color: var(--paper);
  font-size: 11.5px;
  letter-spacing: .06em;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.select:hover { border-color: var(--line-strong); box-shadow: var(--glow-gold); background-color: rgba(11, 24, 33, .92); }

.select option { background: #08131b; color: var(--paper); }

.select option:checked { background: #14252f; color: var(--gold-bright); }

/* toggle ----------------------------------------------------------------- */
.toggle {
  position: relative;
  justify-self: start;
  width: 56px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(240, 196, 99, .2);
  background: linear-gradient(180deg, rgba(4, 10, 14, .85), rgba(8, 19, 27, .7));
  box-shadow: inset 0 1px 3px rgba(2, 6, 10, .8);
  transition: background .25s, border-color .25s, box-shadow .25s;
}

.toggle i {
  position: absolute;
  left: 3px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, var(--ghost), var(--muted));
  box-shadow: 0 1px 3px rgba(2, 6, 10, .9);
  transition: left .24s var(--ease), background .24s, box-shadow .24s;
}

.toggle em {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--muted);
  transition: color .24s, left .24s var(--ease), right .24s var(--ease);
}

.toggle:hover { border-color: var(--line-strong); }

.toggle.is-on {
  border-color: rgba(240, 196, 99, .5);
  background: linear-gradient(90deg, rgba(79, 224, 160, .3), rgba(240, 196, 99, .34));
  box-shadow: 0 0 16px -4px rgba(240, 196, 99, .7), inset 0 1px 2px rgba(2, 6, 10, .5);
}

.toggle.is-on i { left: calc(100% - 19px); background: linear-gradient(180deg, var(--gold-bright), var(--gold)); box-shadow: 0 0 10px rgba(240, 196, 99, .9), 0 1px 3px rgba(2, 6, 10, .8); }

.toggle.is-on em { right: calc(100% - 21px); color: #06121a; font-weight: 600; }

/* segmented -------------------------------------------------------------- */
.seg { justify-self: start; display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; border: 1px solid var(--line); background: rgba(4, 10, 14, .66); box-shadow: inset 0 1px 3px rgba(2, 6, 10, .7); }

.seg-btn { position: relative; padding: 4px 13px 6px; border-radius: 6px; font-size: 11.5px; letter-spacing: .14em; color: var(--muted); transition: color .2s, background .2s; }

.seg-btn:hover { color: var(--gold-bright); background: rgba(240, 196, 99, .08); }

.seg-btn.is-active { color: var(--gold-bright); background: linear-gradient(180deg, rgba(240, 196, 99, .26), rgba(240, 196, 99, .06)); text-shadow: 0 0 12px rgba(240, 196, 99, .5); }

.seg-btn.is-active::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright), var(--gold-dim));
  box-shadow: 0 0 8px rgba(240, 196, 99, .8);
}

/* action buttons --------------------------------------------------------- */
.panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-soft); }

.act-btn {
  position: relative;
  padding: 9px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(240, 196, 99, .24);
  background: linear-gradient(180deg, rgba(12, 26, 35, .85), rgba(6, 14, 20, .9));
  color: var(--paper);
  font-size: 12px;
  letter-spacing: .14em;
  overflow: hidden;
  transition: transform .14s var(--ease), border-color .2s, box-shadow .25s, color .2s, background .25s;
}

.act-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 230, 168, .18) 50%, transparent 70%); opacity: 0; transition: opacity .3s; }

.act-btn:hover { color: var(--gold-bright); border-color: rgba(240, 196, 99, .5); transform: translateY(-1px); box-shadow: 0 10px 24px -16px rgba(2, 6, 10, .95), 0 0 20px -6px rgba(240, 196, 99, .6); }

.act-btn:hover::after { opacity: 1; }
.act-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 8px rgba(2, 6, 10, .8); }

.act-btn.is-primary {
  color: #06121a;
  font-weight: 600;
  border-color: rgba(255, 230, 168, .65);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 62%, #d3a544);
  box-shadow: 0 10px 26px -14px rgba(240, 196, 99, .9), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.act-btn.is-primary:hover { color: #06121a; box-shadow: 0 14px 30px -14px rgba(240, 196, 99, 1), 0 0 24px -6px rgba(255, 230, 168, .8); }

/* == 11 · STAGE OVERLAY ===================================================== */
#stage-overlay { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }

/* chapter title card ----------------------------------------------------- */
#chapter-card {
  position: absolute;
  left: 50%;
  top: 15%;
  z-index: 3;
  width: max-content;
  max-width: min(88vw, 640px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 34px 18px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px) scale(.98);
  transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s linear .7s;
}

#chapter-card::before {
  content: "";
  position: absolute;
  inset: -46px -90px -34px;
  z-index: -1;
  background: radial-gradient(56% 60% at 50% 50%, rgba(4, 8, 12, .62), rgba(4, 8, 12, .2) 56%, transparent 78%);
  filter: blur(14px);
}

#chapter-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 18%, var(--gold-bright) 50%, var(--gold-dim) 82%, transparent);
  transform: scaleX(0);
  transition: transform 1s var(--ease-out) .12s;
}

#chapter-card.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s; }

#chapter-card.is-show::after { transform: scaleX(1); }

.cc-index {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 7px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--paper);
  background: linear-gradient(155deg, #c8402f, var(--seal) 55%, #87201a);
  box-shadow: 0 10px 26px -12px rgba(192, 57, 43, 1), inset 0 0 0 1px rgba(255, 230, 168, .35);
  transform: rotate(-3deg);
  text-shadow: 0 1px 3px rgba(60, 8, 6, .8);
}

.cc-name {
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: .22em;
  text-indent: .22em;
  background: linear-gradient(180deg, #fff4d8 0%, var(--gold-bright) 34%, var(--gold) 62%, #9a7a35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 3px rgba(4, 6, 10, .95)) drop-shadow(0 0 26px rgba(240, 196, 99, .45));
}

.cc-sub {
  padding: 3px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(4, 8, 12, .58) 16%, rgba(4, 8, 12, .58) 84%, transparent);
  font-size: 12.5px;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--paper-dim);
  text-shadow: 0 1px 4px rgba(4, 6, 10, 1), 0 0 14px rgba(4, 6, 10, .9);
}

/* spell calligraphy ------------------------------------------------------ */
#spell-card {
  position: absolute;
  top: 17%;
  right: calc(var(--pr-w) + 96px);
  z-index: 3;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(18px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s linear .55s;
}

#spell-card::before { content: ""; position: absolute; inset: -26px -30px; z-index: -1; background: radial-gradient(60% 55% at 60% 40%, rgba(4, 8, 12, .74), transparent 74%); filter: blur(7px); }

#spell-card.is-show { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s; }

.sp-name {
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: .26em;
  line-height: 1.1;
  color: var(--gold-bright);
  text-shadow:
    0 0 2px rgba(4, 6, 10, 1),
    0 2px 6px rgba(4, 6, 10, 1),
    0 0 22px rgba(240, 196, 99, .6),
    0 0 46px rgba(240, 196, 99, .3);
}

.sp-owner { writing-mode: vertical-rl; margin-top: 6px; font-family: var(--serif); font-size: 11.5px; letter-spacing: .28em; color: var(--paper-dim); text-shadow: 0 1px 4px rgba(4, 6, 10, 1); }

.sp-rule {
  width: 1px;
  height: 190px;
  margin-top: 4px;
  background: linear-gradient(180deg, transparent, var(--gold) 22%, var(--gold-bright) 50%, var(--gold) 78%, transparent);
  box-shadow: 0 0 10px rgba(240, 196, 99, .6);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .8s var(--ease-out) .1s;
}

#spell-card.is-show .sp-rule { transform: scaleY(1); }

/* world-projected tags --------------------------------------------------- */
#labels-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .5s var(--ease), filter .5s var(--ease); }

/* cinematic titles take priority over world tags */
#stage-overlay:has(#chapter-card.is-show) #labels-layer,
#stage-overlay:has(#spell-card.is-show) #labels-layer { opacity: .2; filter: blur(1.4px); }

/* the vertical spell title sits where a long chapter title ends — showing both
   at once overlaps them, so the chapter card owns the frame while it is up */
#stage-overlay:has(#chapter-card.is-show) #spell-card { opacity: 0; visibility: hidden; }

.tag3d {
  --tone: var(--paper);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tone) 42%, transparent);
  background: linear-gradient(180deg, rgba(4, 9, 14, .82), rgba(4, 9, 14, .68));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 3px 12px -4px rgba(2, 6, 10, .95), 0 0 14px -6px var(--tone);
  color: var(--paper);
  font-size: 11.5px;
  letter-spacing: .08em;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
  transform-origin: 0 50%;
}

.tag3d::after { content: ""; position: absolute; left: -16px; top: 50%; width: 15px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tone) 75%, transparent)); }

.tag-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 8px var(--tone), 0 0 2px rgba(4, 6, 10, .9); animation: tag-pulse 2.2s ease-in-out infinite; }

.tag-text { text-shadow: 0 1px 3px rgba(4, 6, 10, 1), 0 0 10px rgba(4, 6, 10, .9); }

.tag3d.tone-han { --tone: var(--jade); color: #d9f8ea; }
.tag3d.tone-wen { --tone: var(--gold); color: #f9ead0; }
.tag3d.tone-neutral { --tone: var(--ghost); color: var(--paper); }
.tag3d.tone-danger { --tone: var(--danger); color: #ffd2ce; }
.tag3d.tone-omen { --tone: #b9a6e8; color: #e4dcf8; }

.tag3d.is-hero {
  padding: 6px 14px 6px 11px;
  gap: 8px;
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .22em;
  border-width: 1px;
  box-shadow: 0 6px 20px -6px rgba(2, 6, 10, 1), 0 0 26px -8px var(--tone), inset 0 0 20px -12px var(--tone);
}

.tag3d.is-hero .tag-dot { width: 8px; height: 8px; }
.tag3d.is-hero::after { left: -22px; width: 21px; }

.tag3d.is-hero .tag-text { padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--tone) 40%, transparent); }

/* impact flash ----------------------------------------------------------- */
#impact-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(52% 52% at 50% 46%, rgba(255, 248, 226, .96) 0%, rgba(255, 226, 160, .55) 38%, rgba(240, 196, 99, .18) 62%, transparent 78%);
  transition: opacity .1s ease-out;
}

/* == 12 · FOOTER / STATUS =================================================== */
#bottom {
  position: fixed;
  left: calc(var(--pl-w) + var(--edge) * 2);
  right: calc(var(--pr-w) + var(--edge) * 2);
  bottom: 10px;
  z-index: 28;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 16px 9px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background-image:
    radial-gradient(90% 120% at 50% 0%, rgba(240, 196, 99, .07), transparent 62%),
    var(--lacquer);
  background-color: var(--surface-2);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: var(--shadow-panel);
}

#bottom::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 230, 168, .5) 50%, transparent); }

#status-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; }

.fighter { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.f-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; line-height: 1.25; }
.fighter.is-right .f-head { flex-direction: row-reverse; }

.f-name { font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: .16em; white-space: nowrap; color: var(--paper); }

#status-hanli .f-name { color: #c9f6e3; text-shadow: 0 0 14px rgba(79, 224, 160, .35); }
#status-wen .f-name { color: #f7e2b4; text-shadow: 0 0 14px rgba(240, 196, 99, .35); }

.f-tag { font-size: 10px; letter-spacing: .1em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.f-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(240, 196, 99, .16);
  background: linear-gradient(180deg, rgba(3, 8, 12, .92), rgba(8, 19, 27, .8));
  box-shadow: inset 0 1px 3px rgba(2, 6, 10, .9);
  overflow: hidden;
}

.fighter.is-right .f-bar { transform: scaleX(-1); }

.f-fill {
  --tone: var(--jade);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 999px;
  background-color: var(--tone);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .04) 46%, rgba(2, 6, 10, .28));
  box-shadow: 0 0 12px -3px var(--tone), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: width .35s var(--ease), background-color .4s;
}

#status-wen .f-fill { --tone: var(--gold); }

.f-mark { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: linear-gradient(180deg, #d9fff0, var(--jade)); box-shadow: 0 0 8px var(--jade), 0 0 2px rgba(4, 6, 10, .9); }

.f-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 18px; }
.fighter.is-right .f-chips { justify-content: flex-end; }

.chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(240, 196, 99, .2);
  background: rgba(8, 19, 27, .66);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--paper-dim);
  white-space: nowrap;
  transition: color .25s, border-color .25s, box-shadow .3s, opacity .3s, background .25s;
}

#chips-hanli .chip { border-color: rgba(79, 224, 160, .22); }
#chips-wen .chip { border-color: rgba(240, 196, 99, .22); }

.chip.is-live {
  color: var(--gold-bright);
  border-color: rgba(240, 196, 99, .55);
  background: linear-gradient(180deg, rgba(240, 196, 99, .2), rgba(8, 19, 27, .6));
  box-shadow: 0 0 14px -4px rgba(240, 196, 99, .9);
  animation: chip-breathe 2.4s ease-in-out infinite;
}

#chips-hanli .chip.is-live {
  color: #d9fff0;
  border-color: rgba(79, 224, 160, .6);
  background: linear-gradient(180deg, rgba(79, 224, 160, .22), rgba(8, 19, 27, .6));
  box-shadow: 0 0 14px -4px rgba(79, 224, 160, .95);
}

.chip.is-spent { opacity: .42; filter: grayscale(.7); text-decoration: line-through; text-decoration-thickness: 1px; animation: none; box-shadow: none; }

.blood-pips { display: inline-flex; align-items: center; gap: 5px; padding: 0 2px; }

.pip {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border-radius: 1px;
  border: 1px solid rgba(224, 52, 47, .75);
  background: linear-gradient(150deg, #ff5a4d, var(--danger) 55%, #8d1f1c);
  box-shadow: 0 0 7px -1px rgba(224, 52, 47, .9);
  transition: all .3s var(--ease);
}

.pip.is-spent { background: transparent; border-color: rgba(207, 214, 214, .3); box-shadow: none; opacity: .55; }

.fighter.is-critical .f-fill { background-color: var(--danger); animation: critical-pulse 1.05s ease-in-out infinite; }

.fighter.is-critical .f-name { color: #ffc9c5; }

.fighter.is-pale .f-bar,
.fighter.is-pale .f-chips { filter: grayscale(.8) brightness(.82); opacity: .72; }

#battle-clock {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(4, 10, 14, .6);
  font-family: var(--mono);
  white-space: nowrap;
}

#clock-now { font-size: 14px; letter-spacing: .04em; color: var(--gold-bright); text-shadow: 0 0 12px rgba(240, 196, 99, .45); }
#battle-clock i { font-style: normal; font-size: 11px; color: var(--gold-dim); }
#clock-total { font-size: 11px; color: var(--muted); }

#subtitle { position: relative; padding: 0 10px; text-align: center; background: radial-gradient(110% 150% at 50% 50%, rgba(4, 8, 12, .5), transparent 72%); }

#quote {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.42;
  letter-spacing: .1em;
  color: var(--paper);
  text-shadow: 0 1px 4px rgba(4, 6, 10, .95);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

#note { margin-top: 1px; font-size: 10px; line-height: 1.35; letter-spacing: .08em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* == 13 · TIMELINE ========================================================== */
#timeline { padding: 2px 2px 0; }

#track {
  position: relative;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(240, 196, 99, .2);
  background: linear-gradient(180deg, rgba(3, 8, 12, .9), rgba(9, 20, 28, .72));
  box-shadow: inset 0 2px 6px rgba(2, 6, 10, .85);
  transition: box-shadow .2s, border-color .2s;
}

#track:hover { border-color: rgba(240, 196, 99, .34); }

#track:focus-within { border-color: rgba(240, 196, 99, .7); box-shadow: 0 0 0 2px rgba(240, 196, 99, .45), 0 0 18px -4px rgba(240, 196, 99, .7), inset 0 2px 6px rgba(2, 6, 10, .85); }

#track-chapters { position: absolute; inset: 0; z-index: 2; border-radius: 7px; overflow: hidden; }

.tc-seg {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(240, 196, 99, .16);
  background: linear-gradient(180deg, rgba(240, 196, 99, .05), rgba(79, 224, 160, .03));
  transition: background .3s;
}

.tc-seg:nth-child(even) { background: linear-gradient(180deg, rgba(159, 216, 255, .05), rgba(168, 111, 240, .04)); }
.tc-seg:last-child { border-right: 0; }

.tc-seg em {
  font-family: var(--serif);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  pointer-events: none;
  text-shadow: 0 0 4px rgba(3, 8, 12, 1), 0 0 2px rgba(3, 8, 12, 1), 0 1px 2px rgba(3, 8, 12, .9);
  transition: color .3s, text-shadow .3s;
}

.tc-seg.is-active { background: linear-gradient(180deg, rgba(240, 196, 99, .22), rgba(240, 196, 99, .07)); }
.tc-seg.is-active em { color: var(--gold-bright); text-shadow: 0 0 12px rgba(240, 196, 99, .6); }

#track-beats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.tb-tick { position: absolute; top: 50%; width: 1px; height: 5px; transform: translate(-50%, -50%); background: rgba(207, 214, 214, .3); }

.tb-tick[data-major="1"] { width: 2px; height: 11px; border-radius: 1px; background: rgba(240, 196, 99, .5); box-shadow: 0 0 7px rgba(240, 196, 99, .45); }

#track-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 0;
  border-radius: 7px 0 0 7px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(240, 196, 99, .08), rgba(240, 196, 99, .26));
  box-shadow: inset 0 0 20px -8px rgba(255, 230, 168, .9), inset -2px 0 6px -2px rgba(255, 230, 168, .75);
}

#track-handle { position: absolute; top: 50%; left: 0; z-index: 4; width: 14px; height: 14px; transform: translate(-50%, -50%); pointer-events: none; }

#track-handle i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff6de, var(--gold) 58%, #9a7a35 100%);
  box-shadow: 0 0 0 1px rgba(4, 8, 12, .9), 0 0 14px rgba(240, 196, 99, .8);
}

#scrub {
  position: absolute;
  left: 0;
  top: -7px;
  z-index: 5;
  width: 100%;
  height: calc(100% + 14px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

#scrub:focus { outline: none; }
#scrub::-webkit-slider-runnable-track { height: 100%; background: transparent; border: 0; }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 40px; background: transparent; border: 0; box-shadow: none; }
#scrub::-moz-range-track { height: 100%; background: transparent; border: 0; }
#scrub::-moz-range-progress { background: transparent; }
#scrub::-moz-range-thumb { width: 24px; height: 40px; background: transparent; border: 0; box-shadow: none; }

/* == 14 · TRANSPORT ========================================================= */
#transport { display: flex; align-items: center; gap: 8px; }

.tp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  min-width: 42px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(240, 196, 99, .22);
  background: linear-gradient(180deg, rgba(12, 26, 35, .85), rgba(6, 14, 20, .9));
  color: var(--paper);
  font-size: 11px;
  letter-spacing: .1em;
  white-space: nowrap;
  transition: transform .14s var(--ease), color .2s, border-color .2s, box-shadow .25s, background .25s;
}

.tp-btn:hover {
  color: var(--gold-bright);
  border-color: rgba(240, 196, 99, .5);
  background: linear-gradient(180deg, rgba(240, 196, 99, .16), rgba(6, 14, 20, .85));
  box-shadow: 0 0 18px -6px rgba(240, 196, 99, .8);
}

.tp-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 8px rgba(2, 6, 10, .85); }

.tp-btn.is-main {
  height: 40px;
  min-width: 100px;
  color: #06121a;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .18em;
  border-color: rgba(255, 230, 168, .6);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, #d3a544);
  box-shadow: 0 10px 26px -14px rgba(240, 196, 99, .95), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.tp-btn.is-main:hover {
  color: #06121a;
  background: linear-gradient(180deg, #fff3d4, var(--gold-bright) 55%, var(--gold));
  box-shadow: 0 14px 30px -14px rgba(240, 196, 99, 1), 0 0 26px -8px rgba(255, 230, 168, .9);
}

#play-ico { font-size: 10px; letter-spacing: 0; }

#speed-readout { padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line-soft); background: rgba(4, 10, 14, .6); font-family: var(--mono); font-size: 11px; color: var(--gold); white-space: nowrap; }

#hint { flex: 1; min-width: 0; text-align: right; font-size: 10px; letter-spacing: .06em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }

/* == 15 · TOAST ============================================================= */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--foot-h) + 26px);
  z-index: 60;
  max-width: min(520px, 84vw);
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(240, 196, 99, .34);
  background: linear-gradient(180deg, rgba(12, 26, 35, .94), rgba(5, 12, 18, .96));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -20px rgba(2, 6, 10, 1), 0 0 26px -12px rgba(240, 196, 99, .8);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--gold-bright);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

#toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* == 16 · ENTRY ============================================================= */
#entry {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  overflow-y: auto;
  background:
    radial-gradient(70% 55% at 50% 6%, rgba(20, 52, 66, .55), transparent 62%),
    radial-gradient(60% 50% at 12% 92%, rgba(79, 224, 160, .12), transparent 64%),
    radial-gradient(60% 50% at 88% 88%, rgba(168, 111, 240, .14), transparent 64%),
    radial-gradient(120% 100% at 50% 50%, #071119 0%, var(--ink) 55%, var(--omen) 100%);
  transition: opacity .75s var(--ease), transform .75s var(--ease), visibility 0s linear .75s;
}

#entry::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 28% 34%, rgba(79, 224, 160, .18), transparent 66%),
    radial-gradient(34% 26% at 72% 44%, rgba(159, 216, 255, .16), transparent 66%),
    radial-gradient(40% 30% at 52% 76%, rgba(240, 196, 99, .14), transparent 68%),
    radial-gradient(30% 24% at 82% 18%, rgba(168, 111, 240, .16), transparent 66%);
  filter: blur(46px);
  opacity: .85;
  animation: aurora-drift 26s ease-in-out infinite alternate;
}

#entry::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 180px 180px; opacity: .05; mix-blend-mode: soft-light; }

#entry.is-hidden { opacity: 0; visibility: hidden; transform: scale(1.05); pointer-events: none; }

.entry-inner {
  position: relative;
  z-index: 1;
  margin: auto;
  width: min(660px, 100%);
  padding: 28px 34px 24px;
  border-radius: 18px;
  border: 1px solid rgba(240, 196, 99, .22);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(240, 196, 99, .08), transparent 62%),
    linear-gradient(180deg, rgba(10, 22, 31, .78), rgba(5, 11, 17, .9));
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow:
    0 40px 90px -40px rgba(2, 6, 10, 1),
    inset 0 1px 0 rgba(255, 230, 168, .1),
    inset 0 0 80px -30px rgba(79, 224, 160, .3);
  text-align: center;
  animation: entry-rise .9s var(--ease-out) both;
}

.entry-inner::before { content: ""; position: absolute; inset: 8px; border-radius: 12px; border: 1px solid rgba(240, 196, 99, .1); pointer-events: none; }

.entry-mark { position: relative; width: 92px; height: 92px; margin: 0 auto 14px; }

.ink-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(240, 196, 99, .3);
  box-shadow: 0 0 24px -8px rgba(240, 196, 99, .6), inset 0 0 20px -10px rgba(240, 196, 99, .8);
  animation: ring-spin 22s linear infinite;
}

.ink-ring::after { content: ""; position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 10px var(--gold); }

.ink-ring.r2 { inset: 11px; border-style: dashed; border-color: rgba(159, 216, 255, .28); animation: ring-spin 16s linear infinite reverse; }

.ink-ring.r2::after { background: var(--thunder); box-shadow: 0 0 10px var(--thunder); }

.entry-seal {
  position: absolute;
  inset: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  color: var(--paper);
  background: linear-gradient(155deg, #c8402f, var(--seal) 55%, #87201a);
  box-shadow: 0 10px 26px -12px rgba(192, 57, 43, 1), inset 0 0 0 1px rgba(255, 230, 168, .32);
  transform: rotate(-3deg);
  text-shadow: 0 1px 3px rgba(60, 8, 6, .8);
}

.entry-kicker { font-size: 11px; letter-spacing: .42em; text-indent: .42em; color: var(--muted); }

.entry-title {
  margin: 8px 0 12px;
  font-family: var(--serif);
  font-size: clamp(36px, 6.4vw, 58px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: .12em;
  background: linear-gradient(180deg, #fff6e2 0%, var(--gold-bright) 32%, var(--gold) 62%, #96762f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 6px rgba(2, 6, 10, .9)) drop-shadow(0 0 30px rgba(240, 196, 99, .35));
}

.entry-title span {
  display: inline-block;
  margin: 0 .3em;
  font-size: .4em;
  vertical-align: .28em;
  letter-spacing: .1em;
  color: var(--danger);
  -webkit-text-fill-color: #e8564c;
  text-shadow: 0 0 18px rgba(224, 52, 47, .6);
}

.entry-desc { max-width: 480px; margin: 0 auto; font-family: var(--serif); font-size: 13px; line-height: 2; letter-spacing: .1em; color: var(--paper-dim); }

.entry-chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 20px; }

.entry-chapters li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  border: 1px solid rgba(240, 196, 99, .18);
  background: linear-gradient(180deg, rgba(240, 196, 99, .08), rgba(4, 10, 14, .5));
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--paper);
}

.entry-chapters i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-style: normal;
  font-size: 11px;
  color: var(--gold-bright);
  background: rgba(240, 196, 99, .14);
  border: 1px solid rgba(240, 196, 99, .3);
}

#btn-enter {
  position: relative;
  width: min(330px, 100%);
  height: 50px;
  border-radius: 999px;
  border: 1px solid rgba(240, 196, 99, .28);
  background: linear-gradient(180deg, rgba(12, 26, 35, .9), rgba(5, 12, 18, .92));
  color: var(--muted);
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .28em;
  text-indent: .28em;
  overflow: hidden;
  transition: transform .2s var(--ease), color .3s, background .4s, box-shadow .4s, border-color .3s;
}

#btn-enter:disabled { cursor: progress; }

#btn-enter:disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(240, 196, 99, .22) 45%, rgba(255, 230, 168, .3) 52%, transparent 78%);
  background-size: 250% 100%;
  animation: shimmer 2.2s linear infinite;
}

#btn-enter:not(:disabled) {
  cursor: pointer;
  color: #06121a;
  font-weight: 600;
  border-color: rgba(255, 230, 168, .7);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 58%, #d3a544);
  box-shadow: 0 16px 36px -18px rgba(240, 196, 99, 1), inset 0 1px 0 rgba(255, 255, 255, .45);
  animation: enter-breathe 3s ease-in-out infinite;
}

#btn-enter:not(:disabled):hover { transform: translateY(-2px); background: linear-gradient(180deg, #fff5da, var(--gold-bright) 52%, var(--gold)); }

#btn-enter:not(:disabled):active { transform: translateY(0); }

#load-bar {
  position: relative;
  width: min(330px, 100%);
  height: 3px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: rgba(4, 10, 14, .8);
  box-shadow: inset 0 0 0 1px rgba(240, 196, 99, .14);
  overflow: hidden;
}

#load-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold) 60%, var(--gold-bright));
  box-shadow: 0 0 12px rgba(240, 196, 99, .8);
  transition: width .35s var(--ease);
}

.entry-hint { margin-top: 14px; font-size: 10.5px; line-height: 1.7; letter-spacing: .08em; color: var(--muted); }

/* == 17 · HELP MODAL ======================================================== */
#help-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 20px;
  overflow-y: auto;
  background: radial-gradient(80% 60% at 50% 40%, rgba(6, 16, 22, .72), rgba(3, 6, 10, .86));
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  animation: scrim-in .3s var(--ease) both;
}

.help-card {
  position: relative;
  margin: auto;
  width: min(880px, 100%);
  max-height: min(84vh, 780px);
  overflow-y: auto;
  padding: 26px 30px 22px;
  border-radius: 16px;
  border: 1px solid rgba(240, 196, 99, .26);
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(240, 196, 99, .08), transparent 60%),
    linear-gradient(180deg, rgba(11, 24, 33, .96), rgba(5, 12, 18, .98));
  box-shadow: 0 50px 100px -40px rgba(2, 6, 10, 1), inset 0 1px 0 rgba(255, 230, 168, .1);
  animation: card-in .42s var(--ease-out) both;
}

.help-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(4, 10, 14, .7);
  color: var(--gold-bright);
  font-size: 18px;
  line-height: 1;
  transition: background .2s, border-color .2s, transform .15s;
}

.help-close:hover { background: rgba(240, 196, 99, .16); border-color: var(--line-strong); transform: rotate(90deg); }

.help-card h2 {
  padding-bottom: 12px;
  margin-bottom: 18px;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--gold-bright);
  border-bottom: 1px solid var(--line);
  text-shadow: 0 0 22px rgba(240, 196, 99, .3);
}

.help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.help-cols h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--serif); font-size: 14px; letter-spacing: .26em; color: var(--gold); }

.help-cols h3::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--seal); box-shadow: 0 0 8px rgba(192, 57, 43, .8); }

.help-cols li { position: relative; padding: 5px 0 5px 14px; font-size: 12.5px; line-height: 1.7; letter-spacing: .04em; color: var(--paper-dim); border-bottom: 1px dashed rgba(240, 196, 99, .08); }

.help-cols li:last-child { border-bottom: 0; }

.help-cols li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 4px; height: 4px; transform: rotate(45deg); background: rgba(240, 196, 99, .5); }

.help-cols b { font-weight: 600; color: var(--gold-bright); }

.help-counter b { color: #d9fff0; }
.help-counter li:nth-child(even) b { color: #ecd8ff; }

.help-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 11px; letter-spacing: .06em; color: var(--muted); }

/* == 18 · ENDCARD =========================================================== */
#endcard {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 20px;
  overflow-y: auto;
  background:
    radial-gradient(70% 60% at 50% 108%, rgba(109, 47, 176, .38), transparent 62%),
    radial-gradient(60% 50% at 50% -10%, rgba(30, 16, 48, .7), transparent 60%),
    radial-gradient(120% 100% at 50% 50%, rgba(8, 6, 16, .92), rgba(4, 6, 10, .97));
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  backdrop-filter: blur(10px) saturate(110%);
  animation: scrim-in .6s var(--ease) both;
}

#endcard::before {
  content: "";
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(34% 26% at 30% 62%, rgba(109, 47, 176, .3), transparent 66%),
    radial-gradient(30% 22% at 70% 48%, rgba(143, 163, 176, .14), transparent 66%),
    radial-gradient(26% 20% at 52% 84%, rgba(79, 224, 160, .08), transparent 68%);
  filter: blur(50px);
  animation: fog-drift 30s ease-in-out infinite alternate;
}

#endcard::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 180px 180px; opacity: .06; mix-blend-mode: soft-light; }

.end-inner {
  position: relative;
  z-index: 1;
  margin: auto;
  width: min(620px, 100%);
  padding: 34px 34px 28px;
  border-radius: 16px;
  border: 1px solid rgba(240, 196, 99, .2);
  background: linear-gradient(180deg, rgba(14, 12, 26, .82), rgba(4, 6, 10, .92));
  box-shadow: 0 50px 100px -40px rgba(2, 6, 10, 1), inset 0 0 90px -34px rgba(109, 47, 176, .8);
  text-align: center;
  animation: card-in .8s var(--ease-out) both;
}

.end-inner::before,
.end-inner::after { content: ""; position: absolute; left: 26px; right: 26px; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 196, 99, .55) 50%, transparent); }

.end-inner::before { top: 14px; }
.end-inner::after { bottom: 14px; }

.end-kicker { font-family: var(--mono); font-size: 10.5px; letter-spacing: .4em; text-indent: .4em; color: #b9a6e8; }

.end-inner h2 {
  margin: 10px 0 16px;
  font-family: var(--serif);
  font-size: clamp(40px, 7.6vw, 70px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: .3em;
  text-indent: .3em;
  background: linear-gradient(180deg, #eef2f2 0%, var(--ghost) 42%, #7d8a94 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 8px rgba(2, 6, 10, 1)) drop-shadow(0 0 34px rgba(168, 111, 240, .55));
}

.end-desc { font-family: var(--serif); font-size: 13px; line-height: 2.05; letter-spacing: .1em; color: var(--ghost); opacity: .92; }

.end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.end-actions .act-btn { min-width: 132px; padding: 11px 18px; }

/* == 19 · KEYFRAMES ========================================================= */
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}

@keyframes eq-pulse {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  30% { transform: translateY(-1.5px) scale(1.1); opacity: .82; }
  60% { transform: translateY(.5px) scale(.95); opacity: 1; }
}

@keyframes tag-pulse {
  0%, 100% { box-shadow: 0 0 8px var(--tone), 0 0 2px rgba(4, 6, 10, .9); transform: scale(1); }
  50% { box-shadow: 0 0 14px var(--tone), 0 0 2px rgba(4, 6, 10, .9); transform: scale(1.18); }
}

@keyframes chip-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}

@keyframes chain-breathe {
  0%, 100% { box-shadow: 0 0 22px -14px var(--rel), inset 0 0 24px -18px var(--rel); }
  50% { box-shadow: 0 0 26px -8px var(--rel), inset 0 0 28px -12px var(--rel); }
}

@keyframes chain-flow {
  0% { background-position: 140% 0; }
  100% { background-position: -60% 0; }
}

@keyframes log-in {
  0% { opacity: 0; transform: translateX(-10px); box-shadow: inset 0 0 0 1px rgba(255, 230, 168, .5); background-color: rgba(240, 196, 99, .16); }
  60% { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); box-shadow: inset 0 0 0 1px transparent; background-color: transparent; }
}

@keyframes critical-pulse {
  0%, 100% { box-shadow: 0 0 12px -3px var(--danger), inset 0 0 0 1px rgba(255, 255, 255, .12); filter: brightness(1); }
  50% { box-shadow: 0 0 20px 0 rgba(224, 52, 47, .95), inset 0 0 0 1px rgba(255, 255, 255, .22); filter: brightness(1.35); }
}

@keyframes aurora-drift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(2%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-1%, 1%, 0) scale(1.03); }
}

@keyframes fog-drift {
  0% { transform: translate3d(-3%, 1%, 0) scale(1.02); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.1); }
}

@keyframes ring-spin { to { transform: rotate(360deg); } }

@keyframes shimmer {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

@keyframes enter-breathe {
  0%, 100% { box-shadow: 0 16px 36px -18px rgba(240, 196, 99, 1), 0 0 0 0 rgba(240, 196, 99, .28), inset 0 1px 0 rgba(255, 255, 255, .45); }
  50% { box-shadow: 0 18px 40px -16px rgba(240, 196, 99, 1), 0 0 0 8px rgba(240, 196, 99, 0), inset 0 1px 0 rgba(255, 255, 255, .5); }
}

@keyframes entry-rise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes card-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* == 20 · RESPONSIVE ======================================================== */

/* --- 1100–1439: narrower lacquer columns, tighter type -------------------- */
@media (max-width: 1439px) {
  :root { --top-h: 60px; --pl-w: 264px; --pr-w: 288px; --foot-h: 198px; --edge: 12px; --ctl-name-w: 68px; }

  .brand-text h1 { font-size: 17px; letter-spacing: .12em; }
  .brand-vs { font-size: 10px; padding-left: 8px; }
  .brand-text p { font-size: 9.5px; }
  .brand-seal { width: 32px; height: 32px; font-size: 18px; }
  .icon-btn { height: 32px; padding: 0 9px; font-size: 11px; }
  .badge { height: 26px; font-size: 11px; padding: 0 9px; }

  .panel-head { padding: 10px 12px 8px; }
  .panel-head h2 { font-size: 15px; letter-spacing: .22em; }
  .panel-scroll { padding: 2px 12px 12px; }
  .block { padding: 10px 0 12px; }
  .block-title { font-size: 12px; letter-spacing: .24em; }

  .ci-name { font-size: 13px; }
  .ci-desc { font-size: 9.5px; }
  .chain-node { font-size: 11px; padding: 3px 4px; }
  .log-list { max-height: 190px; }
  .log-text { font-size: 11px; }
  .ctl-name { font-size: 11px; }
  .ctl output { min-width: 40px; font-size: 9.5px; }
  .act-btn { padding: 8px 8px; font-size: 11.5px; letter-spacing: .1em; }

  #bottom { padding: 8px 14px 9px; }
  #quote { font-size: 13.5px; }
  .f-name { font-size: 14px; }
  #hint { font-size: 9.5px; }
  #spell-card { right: calc(var(--pr-w) + 64px); }
}

/* --- ≤1100: panels become off-canvas drawers ------------------------------ */
@media (max-width: 1100px) {
  :root { --foot-h: 200px; --pl-w: 300px; --pr-w: 300px; }

  .only-mobile { display: inline-flex !important; }

  .panel {
    top: calc(var(--top-h) + 8px);
    bottom: 8px;
    width: min(320px, 86vw);
    z-index: 45;
    background-color: rgba(5, 12, 18, .97);
    transition: transform .36s var(--ease), box-shadow .36s var(--ease);
    will-change: transform;
  }

  #panel-left { left: 8px; transform: translateX(calc(-100% - 16px)); box-shadow: 26px 0 60px -24px rgba(2, 6, 10, .98); }

  #panel-right { right: 8px; transform: translateX(calc(100% + 16px)); box-shadow: -26px 0 60px -24px rgba(2, 6, 10, .98); }

  #panel-left.is-open,
  #panel-right.is-open { transform: translateX(0); }

  #panel-left.is-open { box-shadow: 30px 0 80px -20px rgba(2, 6, 10, 1), 0 0 0 1px rgba(240, 196, 99, .3); }
  #panel-right.is-open { box-shadow: -30px 0 80px -20px rgba(2, 6, 10, 1), 0 0 0 1px rgba(240, 196, 99, .3); }

  .panel-close { display: grid !important; place-items: center; }
  .panel-sub { text-align: right; }

  #bottom { left: 10px; right: 10px; }

  #spell-card { right: 8%; top: 15%; }
  #chapter-card { top: 13%; }
  .log-list { max-height: 220px; }
}

/* --- ≤900: timeline labels drop out --------------------------------------- */
@media (max-width: 900px) {
  .tc-seg em { display: none; }
  #hint { display: none; }
  #transport { justify-content: center; }
  .help-cols { grid-template-columns: 1fr; gap: 18px; }
}

/* --- ≤680: compact chrome, stacked footer --------------------------------- */
@media (max-width: 680px) {
  :root { --top-h: 56px; --foot-h: 232px; --edge: 8px; }

  #topbar { gap: 8px; padding: 0 8px; }
  .brand { gap: 7px; }
  .brand-seal { width: 28px; height: 28px; font-size: 16px; border-radius: 6px; }
  .brand-text h1 { font-size: 15px; letter-spacing: .1em; }
  .brand-vs, .brand-text p { display: none; }

  .topbar-actions { gap: 4px; }
  .icon-btn { width: 34px; height: 34px; padding: 0; }
  .icon-btn .lbl, #audio-state { display: none; }
  .icon-btn .ico { font-size: 15px; }
  .badge { height: 26px; padding: 0 8px; gap: 5px; font-size: 10px; letter-spacing: .06em; }
  .badge .dot { width: 5px; height: 5px; }

  /* footer: two compact fighter bars + clock */
  #bottom { left: 8px; right: 8px; bottom: 8px; padding: 8px 10px 9px; gap: 6px; }

  #status-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "han clock" "wen clock"; align-items: center; gap: 6px 10px; }

  #status-hanli { grid-area: han; }
  #status-wen { grid-area: wen; }
  #battle-clock { grid-area: clock; align-self: center; flex-direction: column; gap: 0; padding: 4px 9px; align-items: center; }
  #battle-clock i { display: none; }
  #clock-now { font-size: 13px; }
  #clock-total { font-size: 9.5px; }

  .fighter { gap: 3px; }
  .f-head { gap: 6px; }
  .fighter.is-right .f-head { flex-direction: row; }
  .fighter.is-right .f-bar { transform: none; }
  .fighter.is-right .f-chips { justify-content: flex-start; }
  .f-name { font-size: 13px; letter-spacing: .1em; }
  .f-tag { font-size: 9px; letter-spacing: .04em; }
  .f-bar { height: 6px; }
  .f-chips { gap: 3px; min-height: 16px; }
  .chip { font-size: 9px; padding: 1px 6px; }
  .pip { width: 6px; height: 6px; }
  .blood-pips { gap: 4px; }

  #subtitle { padding: 0 2px; }
  #quote { font-size: 12.5px; line-height: 1.5; letter-spacing: .06em; -webkit-line-clamp: 2; line-clamp: 2; }
  #note { display: none; }

  #timeline { padding: 2px 0 0; }
  #track { height: 24px; }
  #scrub { top: -10px; height: calc(100% + 20px); }
  #track-handle { width: 16px; height: 16px; }

  #transport { gap: 6px; justify-content: center; }
  .tp-btn { height: 40px; min-width: 44px; padding: 0 10px; font-size: 11px; }
  .tp-btn.is-main { height: 40px; min-width: 92px; font-size: 12px; letter-spacing: .12em; }
  #speed-readout { padding: 5px 7px; font-size: 10.5px; }
  #hint { display: none; }

  #toast { bottom: calc(var(--foot-h) + 18px); font-size: 12px; padding: 8px 16px; letter-spacing: .1em; }

  #chapter-card { top: 12%; padding: 4px 18px 16px; }
  .cc-index { width: 32px; height: 32px; font-size: 18px; }
  .cc-name { font-size: clamp(28px, 8vw, 40px); letter-spacing: .16em; text-indent: .16em; }
  .cc-sub { font-size: 10.5px; letter-spacing: .2em; text-indent: .2em; }

  #spell-card { right: 5%; top: 13%; gap: 7px; }
  .sp-name { font-size: clamp(22px, 6.4vw, 32px); letter-spacing: .2em; }
  .sp-owner { font-size: 10px; letter-spacing: .2em; }
  .sp-rule { height: 140px; }

  .tag3d { font-size: 10.5px; padding: 2px 7px 2px 6px; }
  .tag3d.is-hero { font-size: 13px; padding: 4px 10px; letter-spacing: .16em; }

  #entry { padding: 18px 12px; }
  .entry-inner { padding: 22px 18px 20px; border-radius: 14px; }
  .entry-mark { width: 74px; height: 74px; margin-bottom: 12px; }
  .entry-seal { inset: 19px; font-size: 21px; }
  .entry-kicker { font-size: 10px; letter-spacing: .28em; text-indent: .28em; }
  .entry-desc { font-size: 12px; line-height: 1.95; }
  .entry-chapters { gap: 6px; margin: 14px 0 16px; }
  .entry-chapters li { font-size: 11px; padding: 4px 10px 4px 5px; }
  #btn-enter { height: 46px; font-size: 14px; letter-spacing: .2em; text-indent: .2em; }
  .entry-hint { font-size: 9.5px; }

  #help-modal { padding: 14px 10px; }
  .help-card { padding: 20px 18px 16px; max-height: 88vh; border-radius: 14px; }
  .help-card h2 { font-size: 19px; letter-spacing: .22em; padding-right: 34px; }
  .help-cols li { font-size: 12px; }

  #endcard { padding: 16px 12px; }
  .end-inner { padding: 26px 20px 22px; }
  .end-desc { font-size: 12px; line-height: 1.95; }
  .end-actions .act-btn { min-width: 120px; padding: 10px 14px; }
}

/* --- ≤400: last-mile squeeze (390×844) ------------------------------------ */
@media (max-width: 400px) {
  .brand-text h1 { font-size: 14px; letter-spacing: .06em; }
  .badge { padding: 0 6px; font-size: 9.5px; }
  .icon-btn { width: 32px; height: 32px; }
  .topbar-actions { gap: 3px; }
  .tp-btn { min-width: 42px; padding: 0 8px; }
  .tp-btn.is-main { min-width: 84px; }
  #battle-clock { padding: 3px 7px; }
}

/* --- short desktop windows ------------------------------------------------ */
@media (min-width: 1101px) and (max-height: 760px) {
  :root { --foot-h: 176px; }
  #note { display: none; }
  #quote { -webkit-line-clamp: 1; line-clamp: 1; }
  .block { padding: 9px 0 11px; }
  .log-list { max-height: 160px; }
  #chapter-card { top: 11%; }
  #spell-card { top: 12%; }
  .entry-inner { padding: 20px 28px 18px; }
  .entry-mark { width: 72px; height: 72px; margin-bottom: 10px; }
  .entry-seal { inset: 19px; font-size: 21px; }
  .entry-chapters { margin: 12px 0 14px; }
}

/* --- coarse pointers: bigger hit areas ------------------------------------ */
@media (pointer: coarse) {
  .ctl input[type="range"] { height: 26px; }
  .ctl input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; }
  .ctl input[type="range"]::-moz-range-thumb { width: 17px; height: 17px; }
  .chapter-item { padding: 10px 10px 11px; }
  .toggle { width: 60px; height: 28px; }
  .toggle i { width: 20px; height: 20px; }
  .toggle.is-on i { left: calc(100% - 23px); }
  .toggle em { font-size: 11px; }
  .toggle.is-on em { right: calc(100% - 24px); }
}

/* --- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .12s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }

  #entry::before, #endcard::before { transform: none !important; }
  .chain-row.is-live::before { background-position: 50% 0 !important; }
  #btn-enter:disabled::after { opacity: .35; }
}