:root {
  --sea: #0b2341;
  --sea2: #123a66;
  --gold: #f4c542;
  --gold2: #e09a1e;
  --red: #d7263d;
  --ink: #fff8ea;
  --muted: #b9c6d8;
  --panel: rgba(9, 22, 42, 0.92);
  --font: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sea);
  color: var(--ink);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: none;
}
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }

#game, #overlay { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#overlay { pointer-events: none; }

/* ---------- HUD ---------- */
.hud {
  position: fixed; left: 0; right: 0; top: 0;
  padding: env(safe-area-inset-top) 12px 0;
  pointer-events: none;
}
.xpbar { height: 8px; margin: 6px 0 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.45); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); }
.xpfill { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #59d0ff, #7cf3c4); transition: transform 0.15s; }
.hud-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hp { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lv { font-size: 13px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); white-space: nowrap; }
.lv b { color: var(--gold); font-size: 15px; }
.hpbar { position: relative; width: min(34vw, 160px); height: 16px; border-radius: 8px; background: rgba(0, 0, 0, 0.55); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); }
.hpfill { height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, #ff4d5e, #ff8a5c); transition: transform 0.12s; }
.hpbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.timer { font-size: 22px; font-weight: 800; letter-spacing: 0.04em; text-shadow: 0 2px 0 #000, 0 0 8px rgba(0, 0, 0, 0.5); font-variant-numeric: tabular-nums; }
.right { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.right b { font-variant-numeric: tabular-nums; }
.berry b { color: var(--gold); }
.icon { pointer-events: auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.45); }

.bossbar { margin: 8px auto 0; width: min(92vw, 420px); }
.bossname { text-align: center; font-weight: 800; font-size: 13px; color: #ffd2d6; text-shadow: 0 1px 2px #000; margin-bottom: 3px; }
.bosstrack { height: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.6); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.25); }
.bossfill { height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, #b3121f, #ff3b4a); transition: transform 0.1s; }
.hidden { display: none !important; }

/* 左下：已習得的招式 */
.skills {
  position: fixed; left: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px);
  display: flex; flex-wrap: wrap; gap: 4px; max-width: 60vw; pointer-events: none;
}
.skill { position: relative; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 18px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.18); }
.skill i { position: absolute; right: -3px; bottom: -4px; font-style: normal; font-size: 10px; font-weight: 800; background: var(--gold); color: #2a1a00; border-radius: 6px; padding: 0 4px; }

/* 右下：合體奧義 */
.ult {
  position: fixed; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 14px);
  width: 82px; height: 82px; border-radius: 50%; border: none; padding: 0;
  background: radial-gradient(circle at 35% 30%, #2b4f80, #0d2442);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  display: grid; place-items: center;
}
.ult-ring { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.12) 0); -webkit-mask: radial-gradient(circle, transparent 41px, #000 42px); mask: radial-gradient(circle, transparent 41px, #000 42px); }
.ult-label { position: relative; font-weight: 900; font-size: 15px; line-height: 1.1; text-align: center; color: var(--muted); }
.ult.ready { animation: pulse 0.9s ease-in-out infinite; background: radial-gradient(circle at 35% 30%, #ffdf6b, #e0731e); }
.ult.ready .ult-label { color: #3a1500; }
@keyframes pulse { 50% { transform: scale(1.08); box-shadow: 0 0 28px rgba(255, 210, 80, 0.85); } }

.banner {
  position: fixed; left: 0; right: 0; top: 34%;
  text-align: center; font-size: clamp(28px, 8vw, 52px); font-weight: 900;
  color: #fff; -webkit-text-stroke: 2px #2a0d00;
  text-shadow: 0 4px 0 #b3121f, 0 0 20px rgba(255, 180, 60, 0.7);
  opacity: 0; transform: scale(0.8); pointer-events: none;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(.16, 1, .3, 1);
}
.banner.show { opacity: 1; transform: scale(1); }
.flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.35s; }

/* ---------- 畫面 ---------- */
.screen {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 30%, rgba(18, 58, 102, 0.75), rgba(5, 14, 28, 0.92));
  z-index: 10;
}
.title-wrap { width: min(420px, 100%); text-align: center; display: flex; flex-direction: column; gap: 12px; }
.kicker { font-size: 12px; letter-spacing: 0.25em; color: var(--muted); }
h1 {
  margin: 0; font-size: clamp(38px, 12vw, 64px); line-height: 0.95; font-weight: 900; letter-spacing: 0.02em;
  color: var(--gold); -webkit-text-stroke: 2px #3a1800; text-shadow: 0 5px 0 #8a3b00, 0 10px 24px rgba(0, 0, 0, 0.6);
}
h1 span { color: #fff; text-shadow: 0 5px 0 #b3121f, 0 10px 24px rgba(0, 0, 0, 0.6); }
.sub { margin: 0; color: #dfe8f5; line-height: 1.6; }
.squad { display: flex; justify-content: center; gap: 8px; }
.chip { padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 30%, #0b2341); border: 1px solid var(--c); font-weight: 700; font-size: 14px; }
.howto { font-size: 13px; color: var(--muted); line-height: 1.8; text-align: left; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); }
.howto b { color: var(--gold); }
.best { font-size: 13px; color: var(--muted); min-height: 1em; }

.btn {
  width: 100%; min-height: 50px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08); font-size: 17px; font-weight: 800;
}
.btn:active { transform: scale(0.97); }
.btn.primary {
  background: linear-gradient(180deg, #ffd85a, #e8961c); color: #3a1500; border-color: transparent;
  box-shadow: 0 5px 0 #9a5208, 0 10px 20px rgba(0, 0, 0, 0.4); font-size: 20px;
}

.panel { width: min(560px, 100%); padding: 18px 16px; border-radius: 20px; background: var(--panel); border: 2px solid rgba(244, 197, 66, 0.5); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; gap: 10px; text-align: center; }
.panel.small { width: min(360px, 100%); }
.panel-title { font-size: 22px; font-weight: 900; color: var(--gold); text-shadow: 0 2px 0 #5a2a00; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px 12px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  transition: transform 0.12s, border-color 0.12s;
}
.card:hover, .card:focus-visible { transform: translateY(-3px); border-color: var(--gold); outline: none; }
.card .ic { font-size: 34px; }
.card .nm { font-weight: 900; font-size: 15px; }
.card .who { width: fit-content; align-self: center; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--c, #445); }
.card .ds { font-size: 12px; color: #d6deea; line-height: 1.5; }
.card .pips { display: flex; gap: 3px; }
.card .pips i { width: 9px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); }
.card .pips i.on { background: var(--gold); }
.card .new { font-size: 11px; font-weight: 900; color: #2a1a00; background: #7cf3c4; padding: 0 6px; border-radius: 6px; }
@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
  .card { flex-direction: row; text-align: left; padding: 12px; }
  .card .ic { font-size: 30px; width: 44px; text-align: center; }
  .card .body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
  .card .who { align-self: flex-start; }
}
.result-line { margin: 0; color: #dfe8f5; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats div { padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.stats span { display: block; font-size: 12px; color: var(--muted); }
.stats b { font-size: 20px; font-variant-numeric: tabular-nums; }

/* ---------- 載入 ---------- */
.loading-screen { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--sea); color: var(--muted); font-weight: 700; letter-spacing: 0.15em; transition: opacity 0.4s; }
.loading-screen.done { opacity: 0; pointer-events: none; }

/* ---------- 頭像 ---------- */
.portraits { display: flex; }
.portrait { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 40%, #0b2341); margin-left: -8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.portrait:first-child { margin-left: 0; }
.portrait.on { width: 40px; height: 40px; z-index: 2; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, 0.5); }
.portrait:not(.on) { opacity: 0.75; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.chip img { width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; margin: -4px 4px -4px -6px; background: rgba(0, 0, 0, 0.25); }
.card .who img { width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; margin: -3px 4px -2px -4px; }

/* ---------- 過場特寫 ---------- */
.cutin { position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.cutin-band {
  position: absolute; left: -10%; right: -10%; top: 50%; height: 190px; margin-top: -95px;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 18px, transparent 18px 36px), linear-gradient(90deg, #0b0f1c, #1b2a4a 50%, #0b0f1c);
  border-top: 4px solid var(--gold); border-bottom: 4px solid var(--gold);
  transform: skewY(-8deg) scaleX(0); transform-origin: left;
  transition: transform 0.28s cubic-bezier(.16, 1, .3, 1);
}
.cutin.in .cutin-band { transform: skewY(-8deg) scaleX(1); }
.cutin.out .cutin-band { transform: skewY(-8deg) scaleX(0); transform-origin: right; transition-duration: 0.35s; }
.cutin-faces { position: absolute; left: 0; right: 0; top: 50%; height: 160px; margin-top: -92px; display: flex; justify-content: center; gap: 2vw; transform: skewY(-8deg); }
.cutin-face {
  width: min(28vw, 170px); height: 160px; overflow: hidden; border: 3px solid #fff;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  transform: translateX(120vw) skewX(-8deg); opacity: 0;
  transition: transform 0.32s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 0.09s + 0.08s), opacity 0.2s calc(var(--i) * 0.09s + 0.08s);
}
.cutin.in .cutin-face { transform: translateX(0) skewX(-8deg); opacity: 1; }
.cutin.out .cutin-face { transform: translateX(-120vw) skewX(-8deg); transition-delay: calc(var(--i) * 0.04s); }
.cutin-face img { width: 130%; height: 130%; margin: -8% 0 0 -15%; object-fit: cover; transform: skewX(8deg) skewY(8deg); }
.cutin-title {
  position: absolute; left: 0; right: 0; top: calc(50% + 78px); text-align: center;
  font-size: clamp(24px, 7vw, 46px); font-weight: 900; color: #fff;
  -webkit-text-stroke: 2px #2a0d00; text-shadow: 0 4px 0 #b3121f, 0 0 18px rgba(255, 190, 60, 0.8);
  transform: skewY(-8deg) scale(1.6); opacity: 0;
  transition: transform 0.25s cubic-bezier(.16, 1, .3, 1) 0.3s, opacity 0.15s 0.3s;
}
.cutin-title small { display: block; font-size: 0.45em; color: var(--gold); -webkit-text-stroke: 1px #2a0d00; }
.cutin.in .cutin-title { transform: skewY(-8deg) scale(1); opacity: 1; }
.cutin.out .cutin-title { opacity: 0; transition-delay: 0s; }

/* 低血量警告 */
.danger { position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(255, 30, 30, 0.75); opacity: 0; transition: opacity 0.3s; }
.danger.on { animation: danger 1s ease-in-out infinite; }
@keyframes danger { 50% { opacity: 1; } }
/* 標題畫面：中間留空給 3D 角色站 */
#title { background: linear-gradient(180deg, rgba(5, 14, 28, 0.88) 0%, rgba(5, 14, 28, 0.35) 30%, rgba(5, 14, 28, 0) 42%, rgba(5, 14, 28, 0) 56%, rgba(5, 14, 28, 0.88) 74%); }
#title .title-wrap { height: 100%; justify-content: space-between; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
#title .title-top, #title .title-bottom { display: flex; flex-direction: column; gap: 10px; }
/* 標題畫面時藏起遊戲中的 HUD */
body.on-title .hud, body.on-title .skills, body.on-title .ult, body.on-title .swaps { opacity: 0; pointer-events: none; }
.hud, .skills, .ult, .swaps { transition: opacity 0.3s; }

/* ---------- 右側：待命夥伴（換人按鈕）---------- */
.swaps {
  position: fixed; right: 26px; bottom: calc(env(safe-area-inset-bottom) + 112px);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.swap {
  position: relative; width: 58px; height: 58px; padding: 0; border-radius: 50%;
  border: 3px solid var(--c); background: color-mix(in srgb, var(--c) 35%, #0b2341);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.swap-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.swap-face img { width: 100%; height: 100%; object-fit: cover; }
/* 冷卻：從上往下蓋一層暗色 */
.swap-face::after {
  content: ""; position: absolute; inset: 0; background: rgba(5, 12, 24, 0.68);
  transform-origin: bottom; transform: scaleY(var(--cd, 0));
}
.swap.ready { animation: swapReady 1.6s ease-in-out infinite; }
@keyframes swapReady { 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 4px 12px rgba(0, 0, 0, 0.5); } }
.swap-hp { position: absolute; left: 4px; right: 4px; bottom: -9px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.7); overflow: hidden; }
.swap-hp i { display: block; height: 100%; background: #6ee07a; transform-origin: left; transform: scaleX(var(--hp, 1)); }
.swap-key { position: absolute; left: -6px; top: -6px; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 6px; background: #0b2341; border: 1px solid rgba(255, 255, 255, 0.4); }
.swap-note { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 900; line-height: 1.1; text-align: center; text-shadow: 0 1px 2px #000; }
.swap.down { border-color: #555; }
.swap.down .swap-face img { filter: grayscale(1) brightness(0.5); }
.swap.down .swap-hp i { background: #ff5a5a; }
@media (hover: none) { .swap-key { display: none; } }

/* ---------- 選角 ---------- */
#select { place-items: start center; overflow-y: auto; touch-action: pan-y; }
.select-wrap { width: min(860px, 100%); display: flex; flex-direction: column; gap: 10px; text-align: center; padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 8px); }
.select-hint { color: var(--muted); font-size: 13px; min-height: 1.2em; }
.hero-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hero {
  position: relative; display: flex; flex-direction: column; gap: 5px; align-items: stretch; text-align: left;
  padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.14); transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.hero.picked { border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, rgba(9, 22, 42, 0.9)); transform: translateY(-2px); }
.hero-face { align-self: center; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; border: 3px solid var(--c); background: color-mix(in srgb, var(--c) 40%, #0b2341); }
.hero-face img { width: 100%; height: 100%; object-fit: cover; }
.hero-order { position: absolute; right: 8px; top: 8px; min-width: 26px; padding: 2px 7px; border-radius: 999px; background: var(--gold); color: #2a1a00; font-weight: 900; font-size: 12px; text-align: center; }
.hero-name { font-weight: 900; font-size: 18px; text-align: center; }
.hero-role { align-self: center; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--c); }
.hero-bars { display: flex; flex-direction: column; gap: 3px; margin: 2px 0; }
.bar { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.bar span { width: 26px; flex: none; }
.bar b { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--c); }
.hero-desc { font-size: 12px; line-height: 1.5; color: #dfe8f5; }
.hero-tag { font-size: 11px; line-height: 1.45; color: var(--gold); }
.select-actions { display: flex; gap: 10px; justify-content: center; }
.select-actions .btn { flex: 1; max-width: 220px; }
.btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 720px) {
  .hero-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero { padding: 8px; }
  .hero-face { width: 56px; height: 56px; }
  .hero-desc { font-size: 11px; }
}

/* 手機直式：血條換到頭像下面一行，不要被擠扁 */
@media (max-width: 520px) {
  .hud-row { align-items: flex-start; }
  .hp { flex: 1; flex-wrap: wrap; row-gap: 5px; }
  .hpbar { width: 100%; max-width: 180px; flex: none; }
}

/* ---------- 暫停：目前的技能 ---------- */
#pause { overflow-y: auto; touch-action: pan-y; place-items: start center; }
#pause .panel { margin-block: auto; }
#pause .panel { width: min(420px, 100%); }
.build { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.build-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border-left: 4px solid var(--c); }
.build-row.down { opacity: 0.55; }
.build-face { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 40%, #0b2341); }
.build-face img { width: 100%; height: 100%; object-fit: cover; }
.build-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.build-name { font-weight: 900; font-size: 14px; }
.build-name small { font-weight: 700; font-size: 11px; color: var(--muted); margin-left: 6px; }
.build-skills { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.bs { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.bs.off { opacity: 0.35; }
.bs .pips { display: flex; gap: 2px; }
.bs .pips i { width: 6px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
.bs .pips i.on { background: var(--gold); }

/* ---------- 覺醒（紅星）---------- */
.star { color: #ff3b4a; font-size: 1.15em; text-shadow: 0 0 8px rgba(255, 60, 70, 0.8); }
.card.evo { border-color: #ff3b4a; background: linear-gradient(160deg, rgba(120, 10, 25, 0.9), rgba(40, 8, 20, 0.95)); box-shadow: 0 0 24px rgba(255, 60, 70, 0.45); animation: evoGlow 1.4s ease-in-out infinite; }
.card.evo .ic .star { font-size: 40px; }
.card.evo .nm { color: #ffd2d6; }
@keyframes evoGlow { 50% { box-shadow: 0 0 36px rgba(255, 60, 70, 0.75); } }
.card .hint { font-size: 11px; color: var(--muted); line-height: 1.4; }
.card .hint.ok { color: #ff8a94; }
.skill.evo { border-color: #ff3b4a; box-shadow: 0 0 10px rgba(255, 60, 70, 0.6); }
.skill.evo i { background: #ff3b4a; color: #fff; }
.bs.evo { color: #ffd2d6; font-weight: 700; }
.pair { font-style: normal; font-size: 9px; font-weight: 900; padding: 0 4px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--muted); }
.pair.ok { border-color: #ff8a94; color: #ff8a94; }
#btn-reroll { min-height: 42px; font-size: 15px; }
#btn-reroll:disabled { opacity: 0.4; }
#levelup { overflow-y: auto; touch-action: pan-y; place-items: start center; }
#levelup .panel { margin-block: auto; }
.card .body { display: flex; flex-direction: column; gap: 5px; align-items: center; }
@media (max-width: 520px) { .card .body { align-items: flex-start; } }

/* 單人模式：沒有換人按鈕；鬼斬覺醒後才出現左下角的最終奧義按鈕（在技能列上方） */
body.solo #swaps { display: none; }
body.solo:not(.has-finale) #btn-ult { display: none; }
body.solo #btn-ult { right: auto; left: 12px; bottom: calc(env(safe-area-inset-bottom) + 56px); background: radial-gradient(circle at 35% 30%, #3a2a55, #120a1e); }
body.solo #btn-ult.ready { background: radial-gradient(circle at 35% 30%, #fff3c4, #c9a24a); }

/* ---------- 最終奧義：三格漫畫過場 ---------- */
.fcut { position: fixed; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.fcut-dim { position: absolute; inset: 0; background: rgba(6, 4, 12, 0.55); opacity: 0; transition: opacity 0.2s; }
.fcut.in .fcut-dim { opacity: 1; }
.fcut.out .fcut-dim { opacity: 0; transition-duration: 0.35s; }
.fcut-panel {
  position: absolute; left: -6%; right: -6%; overflow: hidden; --off: 120%;
  border: 4px solid #fff; outline: 3px solid #0a0610; background: #0c0816;
  transform: skewY(-6deg) translateX(calc(var(--off) * -1)); transition: transform 0.3s cubic-bezier(.16, 1, .3, 1);
}
.fcut-p1 { top: 9%; height: 30%; transition-delay: 0s; }
.fcut-p2 { top: 40%; height: 24%; transform: skewY(-6deg) translateX(var(--off)); transition-delay: 0.12s; }
.fcut-p3 { top: 65%; height: 15%; transition-delay: 0.24s; }
.fcut.in .fcut-panel { transform: skewY(-6deg) translateX(0); }
.fcut.out .fcut-p1, .fcut.out .fcut-p3 { transform: skewY(-6deg) translateX(var(--off)); transition-delay: 0s; }
.fcut.out .fcut-p2 { transform: skewY(-6deg) translateX(calc(var(--off) * -1)); transition-delay: 0s; }
/* 上格：臉部特寫，慢慢推近 */
.fcut-face { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, #3b2a55, #0c0816 70%); }
.fcut-face img { position: absolute; left: 50%; top: 50%; height: 125%; width: auto; transform: translate(-50%, -45%) skewY(6deg) scale(1); filter: contrast(1.15) saturate(0.85); transition: transform 1.4s linear; }
.fcut.in .fcut-face img { transform: translate(-50%, -45%) skewY(6deg) scale(1.1); }
/* 原作畫面版（索隆）：整格填滿，慢慢推近 */
.fcut-face img.photo { left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; object-position: 55% 40%; transform: skewY(6deg) scale(1); filter: contrast(1.08) saturate(1.05); }
.fcut.in .fcut-face img.photo { transform: skewY(6deg) scale(1.08); }
/* 中格：三把刀的原作畫面依序快速切進來（後一張蓋前一張，最後停在和道） */
.fcut-art { position: absolute; inset: 0; overflow: hidden; }
/* 中格的轉刀動畫：整格填滿（跟格子一起斜切） */
.fcut-vid { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; transform: skewY(6deg) scale(1.05); }
.fcut-vid + .fcut-wave { opacity: 0.15; mix-blend-mode: screen; pointer-events: none; }
.fcut-art img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; opacity: 0; transform: skewY(6deg) scale(1.3) translateX(10%); }
.fcut.in .fcut-art img { animation: fcut-flash 0.42s cubic-bezier(.2,.8,.3,1) forwards; animation-delay: calc(0.15s + var(--i) * 0.38s); }
@keyframes fcut-flash { to { opacity: 1; transform: skewY(6deg) scale(1.08) translateX(0); } }
.fcut-art + .fcut-wave { opacity: 0.18; mix-blend-mode: screen; pointer-events: none; }
.fcut-haki { position: absolute; inset: 0; background:
  repeating-linear-gradient(28deg, transparent 0 22px, rgba(150, 70, 230, 0.55) 22px 26px, rgba(10, 4, 18, 0.9) 26px 31px, transparent 31px 58px),
  linear-gradient(90deg, rgba(120, 50, 200, 0.45), transparent 30%, transparent 70%, rgba(120, 50, 200, 0.45));
  mix-blend-mode: screen; animation: fcut-slide 0.5s linear infinite; }
@keyframes fcut-slide { to { background-position: 60px 0, 0 0; } }
/* 中格：紫色聲波＋三把刀交叉旋轉 */
.fcut-wave { position: absolute; inset: 0; background:
  repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 2px, transparent 2px 9px),
  linear-gradient(180deg, transparent 20%, rgba(130, 60, 220, 0.9) 50%, transparent 80%);
  -webkit-mask: linear-gradient(180deg, transparent 15%, #000 35%, #000 65%, transparent 85%); mask: linear-gradient(180deg, transparent 15%, #000 35%, #000 65%, transparent 85%);
  animation: fcut-wave 0.12s steps(2) infinite; }
@keyframes fcut-wave { 50% { transform: scaleY(0.6); } }
.fcut-swords { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: fcut-spin 0.6s linear infinite; }
.fcut-swords i { position: absolute; left: -38vw; top: -7px; width: 76vw; max-width: 600px; height: 14px; background: linear-gradient(90deg, #2a2030 0 18%, #d8e4f0 18% 96%, #fff 96%); border: 2px solid #0a0610; border-radius: 2px 7px 7px 2px; }
/* 精緻刀模型的圖：取代上面的白色長條（高度 0，圖片垂直置中在旋轉中心上） */
.fcut-swords i.img { top: 0; height: 0; background: none; border: 0; }
.fcut-swords i.img img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateY(-50%); filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 5px #c070ff) drop-shadow(0 0 12px #7a2ae0); }   /* 黑刀外圍的紫色霸氣光 */
.fcut-swords i:nth-child(2) { transform: rotate(60deg); }
.fcut-swords i:nth-child(3) { transform: rotate(120deg); }
@keyframes fcut-spin { to { transform: rotate(360deg); } }
/* 下格：招式名稱 */
.fcut-p3 { background: linear-gradient(90deg, #0c0816, #2a1a44 50%, #0c0816); display: grid; place-items: center; }
.fcut-title { transform: skewY(6deg); text-align: center; color: #fff; font-weight: 900; line-height: 1.05; }
.fcut-title span { display: block; font-size: clamp(22px, 7.2vw, 46px); -webkit-text-stroke: 2px #0a0610; text-shadow: 0 3px 0 #6a2ab8, 0 0 16px rgba(190, 140, 255, 0.85); }
.fcut-title small { display: block; font-size: clamp(12px, 3.6vw, 20px); color: #e6d2ff; letter-spacing: 0.2em; }

/* ---------- 奧義開場：全屏武裝色霸氣（按下去那一刻；畫面只微微變暗）---------- */
.haki-screen { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 0.6s; }
.haki-screen.on { opacity: 1; transition: opacity 0.12s; }
.hs-flash { position: absolute; inset: 0; background: #14001f; opacity: 0; animation: hsFlash 0.55s ease-out; }
.hs-vig { position: absolute; inset: -6%; background: radial-gradient(ellipse 62% 58% at 50% 52%, transparent 40%, rgba(70, 12, 120, 0.12) 64%, rgba(40, 0, 70, 0.28) 84%, rgba(10, 0, 20, 0.42) 100%); animation: hsPulse 0.8s ease-in-out infinite alternate; }
.hs-swirl { position: absolute; left: 50%; top: 52%; width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax;
  background: repeating-conic-gradient(from 0deg, rgba(160, 70, 255, 0) 0deg, rgba(170, 80, 255, 0.16) 3deg, rgba(10, 0, 20, 0.08) 6deg, rgba(160, 70, 255, 0) 11deg, transparent 19deg);
  -webkit-mask: radial-gradient(circle, transparent 22%, #000 46%); mask: radial-gradient(circle, transparent 22%, #000 46%);
  animation: hsSpin 3.2s linear infinite; mix-blend-mode: screen; }
.hs-bolts { position: absolute; inset: 0; width: 100%; height: 100%; }
.hs-b-glow { fill: none; stroke: #b25cff; stroke-linejoin: bevel; opacity: 0.75; filter: drop-shadow(0 0 1.2px #d9a6ff); vector-effect: non-scaling-stroke; stroke-width: 7px; }
.hs-b-core { fill: none; stroke: #0a0010; stroke-linejoin: bevel; vector-effect: non-scaling-stroke; stroke-width: 2.5px; }
@keyframes hsFlash { 0% { opacity: 0.3; } 100% { opacity: 0; } }
@keyframes hsPulse { from { transform: scale(1); filter: brightness(0.9); } to { transform: scale(1.035); filter: brightness(1.25); } }
@keyframes hsSpin { to { transform: rotate(360deg); } }

/* ---------- 轉刀時慢慢釋放的霸王色（--lv：0～1，轉越快越大）---------- */
.conq-screen { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; --lv: 0; transition: opacity 0.6s; }
.conq-screen.off { opacity: 0; }
.cq-tint { position: absolute; inset: 0; background: #1a2a78; mix-blend-mode: multiply; opacity: calc(var(--lv) * 0.14); }
.cq-streak { position: absolute; inset: 0; opacity: calc(var(--lv) * 0.1); background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(220, 230, 255, 0.9) 9px 10px, transparent 10px 23px, rgba(220, 230, 255, 0.6) 23px 24px, transparent 24px 41px); animation: cqStreak 0.25s steps(2) infinite; }
.cq-vig { position: absolute; inset: -6%; opacity: var(--lv); background: radial-gradient(ellipse 65% 60% at 50% 50%, transparent 45%, rgba(30, 0, 10, 0.1) 75%, rgba(8, 0, 4, 0.3) 100%); }
.cq-bolts { position: absolute; inset: 0; width: 100%; height: 100%; }
.cq-bolts polyline { fill: none; stroke-linejoin: miter; stroke-linecap: round; }
.cq-b-glow { stroke: rgba(255, 30, 60, 0.45); filter: blur(4px); }
.cq-b-red { stroke: #ff2440; }
.cq-b-core { stroke: #08000a; }
@keyframes cqStreak { 50% { transform: translateX(6px); } }

/* ---------- 奧義的動畫演出：字幕跟著原聲一字一字出來 ---------- */
.fcut.cine .fcut-p2 { transform: skewY(-6deg) translateX(var(--off)); transition-delay: 0s; }
.fcut.cine.p2in .fcut-p2 { transform: skewY(-6deg) translateX(0); }
.fcut.cine.out .fcut-p2 { transform: skewY(-6deg) translateX(calc(var(--off) * -1)); }
.fcut.cine.hit .fcut-p3 { animation: cineJolt 0.18s ease-out; }
@keyframes cineJolt { 0% { margin-left: -10px; } 50% { margin-left: 7px; } 100% { margin-left: 0; } }
.cine-sub { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: skewY(6deg);
  font-family: 'Noto Serif TC', 'Yu Mincho', 'PMingLiU', serif; font-weight: 900; color: #fff; line-height: 1; white-space: nowrap; }
.cine-ch, .cine-dot { display: inline-block; font-style: normal; font-size: clamp(30px, 11vw, 64px);
  -webkit-text-stroke: 2.5px #0a0610; paint-order: stroke fill;
  text-shadow: 0 4px 0 #5a1fa8, 0 0 18px rgba(190, 120, 255, 0.95), 0 0 40px rgba(140, 60, 240, 0.7);
  animation: cineSlam 0.32s cubic-bezier(.2, 1.4, .4, 1) both; }
.cine-dot { font-size: clamp(20px, 7vw, 40px); margin: 0 0.05em; animation-duration: 0.2s; }
.cine-sub.red .cine-ch, .cine-sub.red .cine-dot { text-shadow: 0 4px 0 #8a0014, 0 0 18px rgba(255, 50, 70, 0.95), 0 0 40px rgba(200, 0, 30, 0.7); }
@keyframes cineSlam {
  0% { transform: scale(2.8); opacity: 0; filter: blur(6px) brightness(3); }
  55% { transform: scale(0.9); opacity: 1; filter: blur(0) brightness(1.8); }
  100% { transform: scale(1); opacity: 1; filter: none; }
}

/* 「大千・世界！」：全螢幕的大字，一個字一個字重擊出現，爆炸時炸開 */
.dsw { position: fixed; inset: 0; z-index: 9; pointer-events: none; overflow: hidden;
  font-family: 'Noto Serif TC', 'Yu Mincho', 'PMingLiU', serif; font-weight: 900; line-height: 1; }
.dsw-lines { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; opacity: 0.55;
  background: repeating-conic-gradient(from 0deg, rgba(255, 240, 200, 0) 0deg, rgba(255, 236, 190, 0.5) 0.6deg, rgba(255, 240, 200, 0) 1.6deg, transparent 4.5deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 40%); mask: radial-gradient(circle, transparent 18%, #000 40%);
  animation: dswLines 0.12s steps(2) infinite, dswIn 0.25s ease-out; }
@keyframes dswLines { 50% { transform: rotate(1.5deg); } }
@keyframes dswIn { from { opacity: 0; } }
.dsw-row { position: absolute; left: 0; right: 0; display: flex; justify-content: center; gap: 0.02em; }
.dsw-row.r1 { top: 9%; transform: translateX(-9%) rotate(-6deg); }   /* 上下分開，中間留給衝刺和地裂 */
.dsw-row.r2 { top: 60%; transform: translateX(9%) rotate(-6deg); }
.dsw-ch { position: relative; display: inline-block; font-size: clamp(60px, min(30vw, 34vh), 220px); color: #fff8e6;   /* 橫向螢幕也不會超出上下 */
  -webkit-text-stroke: 5px #0a0610; paint-order: stroke fill;
  text-shadow: 6px 8px 0 #0a0610, 0 0 26px rgba(255, 210, 120, 0.95), 0 0 70px rgba(255, 150, 40, 0.75);
  animation: dswSlam 0.34s cubic-bezier(.15, 1.5, .4, 1) var(--d, 0s) both; }
/* 字後面潑一團墨（尖刺狀），讓字更有份量 */
.dsw-ink { position: absolute; left: 50%; top: 50%; width: 1.5em; height: 1.5em; margin: -0.75em 0 0 -0.75em; z-index: -1;
  background: #0a0610; opacity: 0.85;
  clip-path: polygon(50% 0, 58% 30%, 85% 8%, 70% 38%, 100% 45%, 72% 58%, 92% 88%, 60% 70%, 50% 100%, 40% 72%, 10% 92%, 28% 58%, 0 48%, 30% 38%, 14% 10%, 42% 30%);
  animation: dswInk 0.3s ease-out calc(var(--d, 0s) + 0.16s) both; }
/* 從畫面上方直直砸下來：掉落（拉長、帶殘影模糊）→ 落地壓扁 → 彈一下 → 站定（使用者指定，不要一次全部出現） */
@keyframes dswSlam {
  0% { transform: translateY(-120vh) scale(0.9, 1.5); opacity: 1; filter: blur(5px) brightness(2); animation-timing-function: cubic-bezier(.6, 0, 1, .5); }
  55% { transform: translateY(0) scale(1.28, 0.7); filter: blur(0) brightness(2.6); animation-timing-function: ease-out; }
  75% { transform: translateY(-5%) scale(0.94, 1.08); filter: brightness(1.5); }
  100% { transform: none; opacity: 1; filter: none; }
}
@keyframes dswInk { from { transform: scale(0.2) rotate(40deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 0.85; } }
.dsw.hit .dsw-row { animation: dswJolt 0.2s ease-out; }
@keyframes dswJolt { 0% { margin-top: calc(var(--jolt, 14px) * -1); margin-left: calc(var(--jolt, 14px) * 0.6); } 35% { margin-top: calc(var(--jolt, 14px) * 0.7); margin-left: calc(var(--jolt, 14px) * -0.5); } 70% { margin-top: calc(var(--jolt, 14px) * -0.3); } 100% { margin-top: 0; margin-left: 0; } }
.dsw.burst .dsw-ch { animation: dswBurst 0.3s ease-out forwards; }
.dsw.burst .dsw-lines, .dsw.burst .dsw-ink, .dsw.burst .dsw-crack { opacity: 0; transition: opacity 0.2s; }
@keyframes dswBurst { 0% { transform: scale(1); filter: brightness(1); opacity: 1; } 100% { transform: scale(1.04); filter: brightness(3); opacity: 0; } }   /* 被爆炸白光吞掉 */

/* 字幕念完淡掉（台詞之間的停頓） */
.cine-ch.hush { transition: opacity 0.35s, filter 0.35s; opacity: 0; filter: blur(3px); }
/* 「大千世界」砸下來之後的張力：字一直細細地抖、光越來越強，撐到爆炸 */
.dsw.tense .dsw-ch { animation: dswTense 0.07s steps(2) infinite, dswGlow 1.6s ease-in forwards; }
@keyframes dswTense { 0% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -2px); } 100% { transform: translate(-1px, 2px); } }
@keyframes dswGlow { from { filter: brightness(1); } to { filter: brightness(1.6) drop-shadow(0 0 18px rgba(255, 220, 140, 0.9)); } }
.dsw.tense .dsw-lines { animation: dswLines 0.06s steps(2) infinite; opacity: 0.8; }
/* 轉刀動畫出來時：上格的頭像退場、轉刀動畫換到上面那格，中間留給遊戲裡正在轉刀的角色；整個畫面不壓暗 */
.fcut.cine .fcut-dim { background: rgba(6, 4, 12, 0.12); }
.fcut.cine .fcut-p2 { top: 9%; height: 30%; }
.fcut.cine .fcut-p1 { height: 55%; transition: transform 0.3s cubic-bezier(.16, 1, .3, 1), opacity 0.5s ease-in; }   /* 按下去：頭像放大到上面兩格的大小 */
.fcut.cine.faceoff .fcut-p1 { opacity: 0; }   /* 頭像慢慢淡出，再接轉刀動畫 */
.fcut.cine.p2in .fcut-p2 { transition-delay: 0.08s; }
.fcut.cine.p2in.game .fcut-p1, .fcut.cine.p2in.game .fcut-p2 { transform: skewY(-6deg) translateX(calc(var(--off) * -1)); transition-delay: 0s; }   /* 動畫收掉 */

/* 字砸下來的衝擊：白色衝擊圈往外擴、背後放射狀的裂痕 */
.dsw-shock { position: absolute; left: 50%; top: 50%; width: 1.6em; height: 1.6em; margin: -0.8em 0 0 -0.8em; z-index: -2; border-radius: 50%;
  border: 0.06em solid rgba(255, 250, 235, 0.95); box-shadow: 0 0 0.12em rgba(255, 220, 140, 0.9), inset 0 0 0.12em rgba(255, 220, 140, 0.9);
  animation: dswShock 0.45s ease-out 0.16s both; }   /* 字落地才炸開 */
@keyframes dswShock { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.dsw-crack { position: absolute; left: 50%; top: 50%; width: 2.2em; height: 2.2em; margin: -1.1em 0 0 -1.1em; z-index: -3; opacity: 0.75;
  background: repeating-conic-gradient(from 7deg, #0a0610 0deg 1.4deg, transparent 1.4deg 23deg, #0a0610 23deg 24deg, transparent 24deg 41deg);
  -webkit-mask: radial-gradient(circle, transparent 28%, #000 32%, #000 52%, transparent 70%); mask: radial-gradient(circle, transparent 28%, #000 32%, #000 52%, transparent 70%);
  animation: dswCrack 0.25s ease-out 0.16s both; }
@keyframes dswCrack { from { transform: scale(0.4) rotate(-10deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 0.75; } }
.dsw-ch { animation-duration: 0.3s; }


/* 爆炸時大字被斬碎：原本的字藏起來，換成一片片碎片飛出去 */
.dsw.cut .dsw-ch { color: transparent; -webkit-text-stroke-color: transparent; text-shadow: none; animation: none; }
.dsw.cut .dsw-ink, .dsw.cut .dsw-crack, .dsw.cut .dsw-shock { display: none; }   /* 斬下去的瞬間，字背後的尖刺墨痕和放射裂痕直接拿掉（使用者覺得像星星、很廉價）*/
.dsw.cut .dsw-lines { transition: opacity 0.15s; opacity: 0; }
.dsw-shard { position: absolute; left: 0; top: 0; color: #fff8e6; -webkit-text-stroke: 5px #0a0610; paint-order: stroke fill;
  text-shadow: 5px 6px 0 #0a0610, 0 0 10px rgba(255, 210, 120, 0.9); will-change: transform, opacity; }
.dsw-spark { position: absolute; left: 50%; top: 52%; width: 0.45em; height: 4px; margin-top: -2px; transform-origin: left center; border-radius: 2px;
  background: linear-gradient(90deg, #fff, #ffd27a 60%, transparent); box-shadow: 0 0 8px #ffc860; }
/* 月牙形斬擊：一口氣從一邊劃到另一邊，再變細消失 */
.dsw-slash { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
.dsw-sl { animation: dswSl 0.55s cubic-bezier(.2, .9, .3, 1) var(--d) both; }
@keyframes dswSl { 0% { transform: scaleX(0); opacity: 1; } 22% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1) scaleY(0.6); opacity: 0; } }

/* 斬開滑落：一道細而亮的斜線、靜止一拍、兩半沿著刀痕錯開，爆炸時被白光吞掉 */
.dsw-slipline { position: fixed; z-index: 10; height: 3px; margin-top: -1.5px; transform-origin: left center; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent); box-shadow: 0 0 6px #fff, 0 0 18px rgba(255, 230, 170, 0.9);
  animation: dswSlipLine 0.85s ease-out forwards; }
@keyframes dswSlipLine { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 10% { clip-path: inset(0 0 0 0); opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dswSlipLineR { 0% { clip-path: inset(0 0 0 100%); opacity: 1; } 10% { clip-path: inset(0 0 0 0); opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
.dsw-slipline { animation-fill-mode: both; }
.dsw.slipped .dsw-lines { opacity: 0; }
.dsw.slipend .dsw-shard { transition: opacity 0.3s, filter 0.3s; opacity: 0; filter: brightness(3); }
/* 燒成灰燼：從中間的刀痕開始變金紅、往上下燒掉 */
.dsw.burn .dsw-ink, .dsw.burn .dsw-crack, .dsw.burn .dsw-shock { display: none; }
.dsw.burn .dsw-lines { opacity: 0; transition: opacity 0.2s; }
.dsw.burn .dsw-ch { animation: dswBurn 1s ease-in forwards; -webkit-mask: linear-gradient(180deg, #000 0 30%, transparent 50%, #000 70% 100%) 0 0 / 100% 300%; mask: linear-gradient(180deg, #000 0 30%, transparent 50%, #000 70% 100%) 0 0 / 100% 300%; }
@keyframes dswBurn {
  0% { -webkit-mask-size: 100% 4000%; mask-size: 100% 4000%; -webkit-mask-position: 0 50%; mask-position: 0 50%; filter: brightness(1); color: #fff8e6; }
  30% { filter: brightness(1.8) sepia(1) saturate(4) hue-rotate(-15deg); }
  100% { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: 0 50%; mask-position: 0 50%; filter: brightness(2.5) sepia(1) saturate(5) hue-rotate(-20deg); opacity: 0; }
}
.dsw-ember { position: fixed; z-index: 10; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 30%, #ffd27a 50%, rgba(255, 120, 30, 0) 75%); will-change: transform, opacity; }   /* 不加 box-shadow：數量多時很吃效能 */
/* 水墨飛濺：字變成墨，往斬擊方向拉長、淡掉，甩出墨滴 */
.dsw.ink .dsw-ink, .dsw.ink .dsw-crack, .dsw.ink .dsw-shock { display: none; }
.dsw.ink .dsw-lines { opacity: 0; transition: opacity 0.2s; }
.dsw.ink .dsw-ch { animation: dswInkOut 0.7s cubic-bezier(.3, 0, .6, 1) forwards; }
.dsw.ink .r1 .dsw-ch { transform-origin: left center; }
.dsw.ink .r2 .dsw-ch { transform-origin: right center; }
@keyframes dswInkOut {
  0% { color: #fff8e6; filter: none; }
  15% { color: #0a0610; text-shadow: none; -webkit-text-stroke-color: #0a0610; }
  100% { color: #0a0610; text-shadow: none; -webkit-text-stroke-color: #0a0610; transform: scaleX(1.8) skewX(-20deg); opacity: 0; }
}
.dsw-drop { position: fixed; z-index: 10; margin: -6px; border-radius: 50% 45% 55% 50%; background: #0a0610; pointer-events: none; }
.dsw-streak { position: fixed; z-index: 10; width: 46px; height: 5px; margin-top: -2.5px; border-radius: 3px; background: linear-gradient(90deg, #0a0610, rgba(10, 6, 16, 0)); pointer-events: none; transform-origin: left center; }
/* 「三千」念完：字幕框也一起收掉，整個畫面交給角色轉刀 */
.fcut.cine.p2in.game .fcut-p3 { transform: skewY(-6deg) translateX(var(--off)); transition-delay: 0.05s; }
.fcut.cine.game .fcut-dim { opacity: 0; }
/* 電腦（橫向螢幕）：漫畫格不拉滿整個螢幕寬，改成置中、寬度跟著螢幕高度走（跟手機直向的比例差不多），
   動畫影片才不會被裁成一條、斜切也不會太陡；退場距離改成「半個螢幕＋格子本身寬」，保證整格滑出畫面 */
@media (min-aspect-ratio: 5/4) {
  .fcut-panel { --w: min(112vw, max(100vh, 56vw)); --off: calc(50vw + 100%); left: 50%; right: auto; width: var(--w); margin-left: calc(var(--w) / -2); }
  .fcut.cine .fcut-p2 { top: 5%; height: 40%; }   /* 動畫影片那格加高（比例接近影片），下緣停在角色頭上 */
  .fcut.cine .fcut-p1 { top: 5%; height: 58%; }
  .fcut-p3 { top: 68%; height: 14%; }
}

/* ---------- 煉獄鬼斬的招式字：洋紅紫的光、白紫閃電、紅色橫向刀光 ---------- */
.rgw { position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 0.15s;
  font-family: 'Potta One', 'Noto Serif TC', 'Yu Mincho', serif; font-weight: 400; line-height: 1; }   /* 毛筆粗體（使用者選的 B） */
.rgw.on { opacity: 1; }
.rgw-tint { position: absolute; inset: -5%; background: radial-gradient(ellipse 65% 60% at 50% 50%, transparent 50%, rgba(200, 30, 170, 0.18) 78%, rgba(120, 10, 140, 0.32) 100%); animation: hsPulse 0.6s ease-in-out infinite alternate; }
.rgw-bolts { position: absolute; inset: 0; width: 100%; height: 100%; }
.rgw-bolts polyline { fill: none; stroke-linejoin: miter; }
.rgw-b-glow { stroke: rgba(200, 90, 255, 0.55); stroke-width: 9px; }
.rgw-b-core { stroke: #fff; stroke-width: 2.5px; }
.rgw-row { position: absolute; left: 0; right: 0; display: flex; justify-content: center; align-items: flex-end; gap: 0.05em; }
.rgw-row.r1 { top: 8%; transform: rotate(-4deg); gap: 0.25em; }
.rgw-row.r2 { top: 60%; transform: translateX(-4%) rotate(-4deg); }
.rgw-w { display: inline-block; color: #0a0610; -webkit-text-stroke: 3px #fff; paint-order: stroke fill;   /* 照漫畫：黑墨毛筆字、細白邊、外面一圈洋紅紫的光 */
  text-shadow: 0 0 3px #ff2a5a, 0 0 16px rgba(255, 40, 190, 0.95), 0 0 42px rgba(170, 40, 255, 0.85);
  animation: dswSlam 0.3s cubic-bezier(.15, 1.5, .4, 1) both; }
.rgw-row.r1 .rgw-w { font-size: clamp(64px, 24vw, 180px); letter-spacing: 0.18em; }
.rgw-row.r2 .rgw-w { font-size: clamp(80px, 30vw, 220px); }
.rgw-row.r2 .rgw-w + .rgw-w { font-size: clamp(54px, 18vw, 140px); }   /* 「斬り」比「鬼」小一點 */
.rgw.hit .rgw-row { animation: dswJolt 0.2s ease-out; }
/* 紅色橫向刀光（參考動畫：眼前一道紅光橫過） */
.rgw-glint { position: absolute; left: -10%; width: 120%; height: 4px; margin-top: -2px; transform-origin: left center;
  background: linear-gradient(90deg, transparent, #ff2a3a 10%, #fff 50%, #ff2a3a 90%, transparent); box-shadow: 0 0 10px #ff2a3a, 0 0 26px rgba(255, 40, 60, 0.8);
  animation: dswSlipLine 0.7s ease-out forwards; }
.rgw.end { opacity: 0; transition: opacity 0.35s; }
.rgw.end .rgw-w { filter: brightness(2.6); transition: filter 0.15s; }

/* 煉獄鬼斬：畫面稍微泛洋紅紫光（照動畫截圖），加上縱向的白紫光帶 */
.rgw-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(200, 50, 230, 0.22), rgba(150, 20, 190, 0.22)); mix-blend-mode: overlay; animation: rgwWash 0.5s ease-in-out infinite alternate; }
.rgw-wash::after { content: ''; position: absolute; inset: 0; background: rgba(230, 120, 255, 0.05); mix-blend-mode: screen; }
@keyframes rgwWash { from { opacity: 0.85; } to { opacity: 1; } }
.rgw-beams { position: absolute; inset: 0; mix-blend-mode: screen; }
.rgw-beams i { position: absolute; background: linear-gradient(90deg, rgba(220, 120, 255, 0), rgba(240, 190, 255, 0.75) 40%, #fff 50%, rgba(240, 190, 255, 0.75) 60%, rgba(220, 120, 255, 0));
  -webkit-mask: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent); mask: linear-gradient(180deg, transparent, #000 15%, #000 80%, transparent); }

/* 寶箱打開：畫面上方列出這次得到的強化 */
.chest-pop { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 11; pointer-events: none; text-align: center; min-width: 220px;
  padding: 10px 16px 12px; border-radius: 14px; background: linear-gradient(180deg, rgba(60, 36, 8, 0.92), rgba(24, 14, 4, 0.92)); border: 2px solid #f0c040;
  box-shadow: 0 0 24px rgba(255, 200, 60, 0.6); color: #fff; font-weight: 700; animation: cpIn 0.3s cubic-bezier(.2, 1.4, .4, 1) both; transition: opacity 0.4s, transform 0.4s; }
.chest-pop.out { opacity: 0; transform: translateX(-50%) translateY(-12px); }
.cp-title { font-size: 20px; color: #ffd860; letter-spacing: 0.08em; margin-bottom: 6px; text-shadow: 0 2px 0 #5a3a08; }
.cp-item { font-size: 15px; margin: 3px 0; opacity: 0; animation: cpItem 0.3s ease-out both; }
.cp-item b { color: #ffd860; }
@keyframes cpIn { from { transform: translateX(-50%) scale(0.6); opacity: 0; } }
@keyframes cpItem { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 死・獅子歌歌的招式字：四周壓暗、白色居合光橫劃過，黑墨字白邊白光 ---------- */
.ssw .ssw-tint { position: absolute; inset: -5%; background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 45%, rgba(10, 12, 20, 0.35) 75%, rgba(0, 0, 0, 0.6) 100%); }
.ssw .rgw-w { text-shadow: 0 0 3px #fff, 0 0 14px rgba(220, 240, 255, 0.95), 0 0 36px rgba(160, 200, 255, 0.7); }
.ssw .rgw-row.r1 { top: 10%; }
.ssw .rgw-row.r1 .rgw-w { font-size: min(30vw, 30vh, 220px); }
.ssw .rgw-row.r2 { top: auto; bottom: 12%; flex-wrap: nowrap; }
.ssw .rgw-row.r2 .rgw-w, .ssw .rgw-row.r2 .rgw-w + .rgw-w { font-size: min(19vw, 19vh, 150px); }
.ssw-glint { position: absolute; left: -10%; top: 50%; width: 120%; height: 5px; margin-top: -2px; background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
  box-shadow: 0 0 18px #fff, 0 0 40px rgba(180, 220, 255, 0.9); transform-origin: left center; animation: sswGlint 0.18s ease-out both; }
@keyframes sswGlint { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* 居合收刀的全畫面閃光 */
.iaif { position: fixed; inset: 0; z-index: 7; pointer-events: none; animation: iaifShi 0.5s ease-out both; }
.iaif.shi { background: #fff; }
.iaif.rash { background: #c8fbff; animation-name: iaifRash; animation-duration: 0.6s; }
.iaif.goku { background: radial-gradient(ellipse at 50% 50%, rgba(255, 40, 60, 0.75), rgba(20, 0, 6, 0.9)); animation-name: iaifGoku; }
@keyframes iaifShi { 0% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes iaifRash { 0% { opacity: 0.85; background: #000; } 25% { opacity: 0.9; background: #000; } 32% { opacity: 0.9; background: #d8fdff; } 100% { opacity: 0; background: #c8fbff; } }
@keyframes iaifGoku { 0% { opacity: 0.8; } 100% { opacity: 0; } }

/* ---------- 三十六煩惱鳳的招式字：青藍的風、白字藍邊（沿用煉獄鬼斬的版面） ---------- */
.pdw .pdw-tint { position: absolute; inset: -5%; background: radial-gradient(ellipse 65% 60% at 50% 50%, transparent 48%, rgba(60, 170, 255, 0.16) 76%, rgba(20, 90, 200, 0.3) 100%); animation: hsPulse 0.6s ease-in-out infinite alternate; }
.pdw .pdw-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.pdw .pdw-lines line { stroke: rgba(225, 245, 255, 0.7); stroke-linecap: round; }
.pdw.out .pdw-lines line { stroke: rgba(240, 250, 255, 0.85); }
.pdw .rgw-w { flex: none; white-space: nowrap; font-family: 'Noto Serif TC', serif; font-weight: 900; line-height: 1;
  color: #06101f; -webkit-text-stroke: 0.06em #fff; paint-order: stroke fill;
  text-shadow: 0.04em 0.05em 0 #0a2a5e, 0 0 0.18em rgba(120, 205, 255, 0.95), 0 0 0.5em rgba(40, 140, 255, 0.75);
  animation: pdwSlam 0.22s cubic-bezier(.2, 1.6, .4, 1) both; }
/* 上排「三刀流」小一點、拉開字距；下排「千八十煩惱鳳」一整行，依螢幕寬度縮放，永遠放得下 */
.pdw .rgw-row { flex-wrap: nowrap; gap: 0; }
.pdw .rgw-row.r1 { top: 12%; transform: rotate(-5deg); }
.pdw .rgw-row.r2 { top: auto; bottom: 14%; transform: rotate(-5deg); }
.pdw .rgw-row.r1 .rgw-w { font-size: min(13vw, 13vh, 96px); letter-spacing: 0.35em; margin-right: -0.35em; }
.pdw .rgw-row.r2 .rgw-w { font-size: min(14.5vw, 15vh, 130px); letter-spacing: 0.02em; }
.pdw .rgw-row.r2 .rgw-w + .rgw-w { font-size: min(14.5vw, 15vh, 130px); }
@keyframes pdwSlam { from { opacity: 0; transform: scale(1.7); filter: blur(6px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
.pdw.out .rgw-row { transform: scale(1.06) rotate(-5deg); transition: transform 0.12s; }

/* ---------- 閻王三刀龍・一百三情飛龍侍極：綠色霸氣（照第 1062 集） ---------- */
.haki-screen.green .hs-flash { background: #021a06; }
.haki-screen.green .hs-vig { background: radial-gradient(ellipse 62% 58% at 50% 52%, transparent 40%, rgba(20, 160, 50, 0.12) 64%, rgba(5, 90, 25, 0.26) 84%, rgba(0, 25, 8, 0.42) 100%); }
.haki-screen.green .hs-swirl { background: repeating-conic-gradient(from 0deg, rgba(60, 255, 100, 0) 0deg, rgba(80, 255, 110, 0.16) 3deg, rgba(0, 20, 6, 0.08) 6deg, rgba(60, 255, 100, 0) 11deg, transparent 19deg); }
.haki-screen.green .hs-b-glow { stroke: #4dff6a; filter: drop-shadow(0 0 1.2px #b8ffbe); }
.haki-screen.green .hs-b-core { stroke: #f4ff9a; }
.fcut.green .fcut-face { background: radial-gradient(circle at 50% 40%, #1f5a2a, #04140a 70%); }
.fcut.green .fcut-haki { background:
  repeating-linear-gradient(28deg, transparent 0 22px, rgba(70, 255, 110, 0.5) 22px 26px, rgba(2, 18, 6, 0.9) 26px 31px, transparent 31px 58px),
  linear-gradient(90deg, rgba(40, 200, 80, 0.45), transparent 30%, transparent 70%, rgba(40, 200, 80, 0.45)); }
.fcut.green .cine-ch, .fcut.green .cine-dot { text-shadow: 0 4px 0 #0b5a1c, 0 0 18px rgba(90, 255, 120, 0.95), 0 0 40px rgba(30, 220, 70, 0.75); }
.dsw.green .dsw-ch { color: #f4fff2; text-shadow: 6px 8px 0 #031a08, 0 0 26px rgba(110, 255, 130, 0.95), 0 0 70px rgba(40, 230, 80, 0.8); }
.dsw.green .dsw-lines { background: repeating-conic-gradient(from 0deg, rgba(200, 255, 200, 0) 0deg, rgba(190, 255, 180, 0.5) 0.6deg, rgba(200, 255, 200, 0) 1.6deg, transparent 4.5deg); }
/* 白光吞掉畫面：一瞬間全白 → 綠黃放射線 → 慢慢退回遊戲 */
.wflash { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; animation: wfOut var(--ms, 1700ms) ease-in forwards; }
.wf-white { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #ffffff 0 45%, #f4fff4 70%, #dff7e6 100%); }
.wf-rays { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; opacity: 0.7;
  background: repeating-conic-gradient(from 0deg, rgba(90, 230, 120, 0) 0deg, rgba(90, 230, 120, 0.55) 0.5deg, rgba(90, 230, 120, 0) 1.2deg, transparent 7deg, rgba(240, 210, 80, 0.45) 7.6deg, transparent 8.4deg, transparent 13deg);
  -webkit-mask: radial-gradient(circle, transparent 6%, #000 30%); mask: radial-gradient(circle, transparent 6%, #000 30%);
  animation: wfRays 0.9s ease-out forwards; }
.wf-ring { position: absolute; left: 50%; top: 50%; width: 30vmin; height: 30vmin; margin: -15vmin 0 0 -15vmin; border-radius: 50%;
  box-shadow: 0 0 0 4vmin rgba(120, 255, 140, 0.55), 0 0 12vmin 6vmin rgba(160, 255, 170, 0.6); animation: wfRing 0.7s ease-out forwards; }
@keyframes wfOut { 0% { opacity: 0; } 4% { opacity: 1; } 45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wfRays { from { transform: rotate(0) scale(0.6); } to { transform: rotate(8deg) scale(1.1); opacity: 0.25; } }
@keyframes wfRing { from { transform: scale(0.2); opacity: 1; } to { transform: scale(5); opacity: 0; } }

/* 飛龍侍極收尾定格：橫在畫面中間的電影畫面（上下壓黑邊），慢慢推近 */
.eshot { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.es-dim { position: absolute; inset: 0; background: #020604; opacity: 0; transition: opacity 0.35s; }
.eshot.on .es-dim { opacity: 0.15; }   /* 背景只壓暗一點點：播動畫時地上的綠龍痕跡要看得到（使用者指定） */
.es-band { position: absolute; left: 0; right: 0; top: 50%; height: min(62vh, 56.25vw); transform: translateY(-50%) scaleY(0); overflow: hidden;
  box-shadow: 0 0 0 2px #0a1a0c, 0 0 40px rgba(80, 255, 110, 0.45); transition: transform 0.28s cubic-bezier(.2, .9, .3, 1); }
.eshot.on .es-band { transform: translateY(-50%) scaleY(1); }
.eshot.off .es-dim { opacity: 0; transition: opacity 0.8s ease-in; }
.eshot.off .es-band { opacity: 0; transition: opacity 0.8s ease-in; }   /* 慢慢淡掉，不要突然消失 */
.es-band video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; animation: esPush 3.2s linear forwards; }
@keyframes esPush { from { transform: scale(1.02); } to { transform: scale(1.14); } }

/* 飛龍侍極的衝擊格：黑底綠線 → 白底黑線 → 綠光退掉 */
.impact { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.impact .if-rays { position: absolute; left: 50%; top: 50%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
  -webkit-mask: radial-gradient(circle, transparent 4%, #000 22%); mask: radial-gradient(circle, transparent 4%, #000 22%); }
.impact .if-core { position: absolute; left: 50%; top: 50%; width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin; border-radius: 50%; }
.impact .if-glow { position: absolute; inset: 0; opacity: 0; }
.impact.f1 { background: #010402; }
.impact.f1 .if-rays { background: repeating-conic-gradient(from 3deg, #3dff5e 0deg 1.1deg, transparent 1.1deg 4.5deg, #b8ffbe 4.5deg 5.1deg, transparent 5.1deg 9deg); }
.impact.f1 .if-core { background: radial-gradient(circle, #eaffea 0 30%, #3dff5e 46%, transparent 70%); }
.impact.f2 { background: #f6fff6; }
.impact.f2 .if-rays { background: repeating-conic-gradient(from 3deg, #021006 0deg 1.4deg, transparent 1.4deg 4.5deg, #0b5a1c 4.5deg 5deg, transparent 5deg 9deg); }
.impact.f2 .if-core { background: radial-gradient(circle, #ffffff 0 30%, transparent 62%); }
.impact.f3 .if-glow { animation: ifGlow 0.9s ease-out forwards; background: radial-gradient(ellipse at 50% 50%, rgba(220, 255, 220, 0.95) 0, rgba(80, 255, 120, 0.75) 35%, rgba(20, 160, 60, 0.35) 70%, rgba(0, 40, 10, 0) 100%); }
@keyframes ifGlow { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }

/* 飛龍侍極：從兩排大字中間橫掃過去的龍（黑底用 screen 疊掉，只剩綠龍）*/
.dsw-dragon { position: fixed; left: 0; top: 0; width: max(190vw, 1100px); z-index: 9; pointer-events: none; transform-origin: 0 0; transform: translate(-300vw, 0); mix-blend-mode: screen; }
.dsw-dragon img { display: block; width: 100%; height: auto; }
.dsw.swept .dsw-lines { opacity: 0; transition: opacity 0.3s; }
.dsw.swept .dsw-ink, .dsw.swept .dsw-crack, .dsw.swept .dsw-shock { display: none; }

/* 飛龍侍極斬開大字的刀光：白芯綠邊，由左往右劃過 */
.dsw-slipline.green { background: linear-gradient(90deg, transparent, rgba(80, 255, 120, 0.9) 12%, #fff 50%, rgba(80, 255, 120, 0.9) 88%, transparent); box-shadow: 0 0 10px #4dff6a, 0 0 26px rgba(60, 255, 100, 0.8); }

/* 飛龍侍極：字碎掉時噴出的小碎屑（不規則的白綠色碎片） */
.dsw-chip { position: fixed; z-index: 10; pointer-events: none; background: #f4fff2; box-shadow: 0 0 6px rgba(80, 255, 120, 0.9);
  clip-path: polygon(0 20%, 60% 0, 100% 45%, 70% 100%, 10% 80%); }

/* 綠色版（飛龍侍極）被斬開時：原本的字要藏起來，只留碎片（不然綠色字的樣式會蓋掉 .dsw.cut，原字一直留著，看起來多一層白字） */
.dsw.green.cut .dsw-ch { color: transparent; -webkit-text-stroke-color: transparent; text-shadow: none; animation: none; }
.dsw.green.cut .dsw-shard { text-shadow: 6px 8px 0 #031a08, 0 0 26px rgba(110, 255, 130, 0.95); }

/* 開局選招 */
#startpick { overflow-y: auto; touch-action: pan-y; place-items: start center; }
#startpick .panel { margin-block: auto; }
/* 卡片：上面定位標籤＋發光圖示＋招式名，中間三條能力格，下面一行優點、一行缺點；每招有自己的主色 --c */
#startpick .sp-panel { width: min(440px, 100%); padding: 22px 16px 18px; gap: 2px;
  background: linear-gradient(180deg, rgba(16, 38, 68, 0.97), rgba(7, 18, 36, 0.97)); border: 1.5px solid rgba(244, 197, 66, 0.55); }
.sp-sub { font-size: 12px; color: var(--muted); letter-spacing: 0.2em; margin-bottom: 14px; }
/* 奧義按鈕寫招式名：字小一點才放得下 */
body.solo .ult-label { font-size: 14px; letter-spacing: 1px; }

/* 準備進度條：畫面微暗、中間一條金色進度條，跑滿才開打 */
.ready-ov { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(5, 14, 28, 0.25), rgba(5, 14, 28, 0.6)); animation: rdIn 0.2s ease-out; }
.rd-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 26px 20px; border-radius: 18px;
  background: rgba(9, 22, 42, 0.82); border: 1.5px solid rgba(244, 197, 66, 0.5); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.rd-num { font-size: 64px; line-height: 1; font-weight: 900; color: #fff; text-shadow: 0 3px 0 #5a2a00, 0 0 18px rgba(255, 200, 80, 0.6); font-variant-numeric: tabular-nums; }
.rd-num:empty { display: none; }
.rd-num.pop { animation: rdPop 0.35s ease-out; }
@keyframes rdPop { from { transform: scale(1.6); opacity: 0.3; } to { transform: scale(1); opacity: 1; } }
.rd-label { font-size: 20px; font-weight: 900; letter-spacing: 0.3em; color: var(--gold); text-shadow: 0 2px 0 #5a2a00; }
.rd-label::after { content: '…'; letter-spacing: 0; }
.rd-bar { width: min(260px, 68vw); height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
.rd-fill { width: 100%; height: 100%; border-radius: inherit; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--gold2), var(--gold) 70%, #fff3c4); box-shadow: 0 0 10px rgba(244, 197, 66, 0.7); }
@keyframes rdIn { from { opacity: 0; } to { opacity: 1; } }


/* =====================================================================
   介面風格：參考 DOOM Eternal（使用者指定 interfaceingame.com/games/doom-eternal）
   近黑半透明底、細霓虹描邊、切角（左上／右下斜切）、角落 L 形括號、英數用窄體粗字拉開字距、
   血條／經驗條分格、按下或滑過時整塊亮起；主色沿用金色（海賊王感），強調色用橘色
   ===================================================================== */
:root {
  --ui-bg: rgba(10, 11, 14, 0.92);
  --ui-bg2: rgba(24, 26, 32, 0.94);
  --ui-line: #f4c542;
  --ui-dim: rgba(244, 197, 66, 0.38);
  --ui-hot: #ff8a1a;
  --ui-num: 'Rajdhani', var(--font);
}
/* 切角外框：元素本身塗描邊色，::before 往內縮 1.5px 塗底色 → 斜切的邊也有描邊 */
.panel, .btn, .card, .sp-card, .stats div, .build-row, .rd-box, .howto, .icon, .skill, .lv {
  --cut: 12px; --frame: var(--ui-dim); --fill: var(--ui-bg);
  position: relative; isolation: isolate; border: none; border-radius: 0; box-shadow: none;
  background: var(--frame);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.panel::before, .btn::before, .card::before, .sp-card::before, .stats div::before, .build-row::before, .rd-box::before, .howto::before, .icon::before, .skill::before, .lv::before {
  content: ''; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ---------- 面板 ---------- */
.panel { --cut: 18px; padding: 22px 18px 18px; }
.panel::after { content: ''; position: absolute; inset: 7px; pointer-events: none;
  background:
    linear-gradient(var(--ui-hot), var(--ui-hot)) right top / 18px 2px no-repeat,
    linear-gradient(var(--ui-hot), var(--ui-hot)) right top / 2px 18px no-repeat,
    linear-gradient(var(--ui-hot), var(--ui-hot)) left bottom / 18px 2px no-repeat,
    linear-gradient(var(--ui-hot), var(--ui-hot)) left bottom / 2px 18px no-repeat; }
#startpick .sp-panel { background: var(--frame); border: none; }
.panel-title { display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--ui-num); font-size: 21px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ui-line); text-shadow: 0 0 14px rgba(244, 197, 66, 0.35); }
.panel-title::before, .panel-title::after { content: ''; flex: 1; max-width: 64px; height: 2px; background: linear-gradient(90deg, transparent, var(--ui-line)); }
.panel-title::after { background: linear-gradient(270deg, transparent, var(--ui-line)); }
#levelup, #pause, #result, #startpick, #select {
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 35%, rgba(40, 32, 18, 0.55), rgba(4, 5, 8, 0.93));
}

/* ---------- 按鈕 ---------- */
.btn { --cut: 10px; --fill: var(--ui-bg2); min-height: 48px; color: #f1e7cc; font-size: 16px; font-weight: 800; letter-spacing: 0.1em; transition: transform 0.1s; }
.btn:hover, .btn:focus-visible { --frame: var(--ui-line); --fill: rgba(60, 46, 14, 0.95); outline: none; }
.btn:active { transform: scale(0.97); --frame: var(--ui-hot); }
.btn.primary { --frame: var(--ui-line); --fill: linear-gradient(180deg, #ffdc6a, #f0a52a); background: var(--frame); color: #170d00; box-shadow: none; font-size: 19px; letter-spacing: 0.24em; }
.btn.primary::after { content: '»'; margin-left: 0.35em; letter-spacing: 0; }
.btn.primary:hover, .btn.primary:focus-visible { --fill: linear-gradient(180deg, #ffe58f, #ffb340); }
.btn:disabled { opacity: 0.4; }

/* ---------- 升級卡 ---------- */
.card { --frame: rgba(255, 255, 255, 0.2); --fill: var(--ui-bg2); transition: transform 0.12s; }
.card:hover, .card:focus-visible { --frame: var(--ui-line); --fill: linear-gradient(180deg, rgba(244, 197, 66, 0.18), rgba(24, 26, 32, 0.96) 60%); border: none; }
.card.evo { --frame: #ff3b4a; --fill: linear-gradient(160deg, rgba(120, 10, 25, 0.94), rgba(30, 6, 14, 0.97)); background: var(--frame); border: none; box-shadow: none; }
.card .who { border-radius: 0; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); padding: 1px 10px; }
.card .new { border-radius: 0; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); background: var(--ui-hot); color: #140a00; letter-spacing: 0.08em; }
.card .pips { gap: 4px; }
.card .pips i { width: 11px; height: 7px; border-radius: 0; transform: skewX(-20deg); }
.card .pips i.on { background: var(--ui-line); box-shadow: 0 0 6px rgba(244, 197, 66, 0.6); }

/* ---------- 開局選招卡 ---------- */
.sp-sub { font-family: var(--ui-num); }

/* ---------- 結算、暫停裡的資訊格 ---------- */
.stats div { --cut: 8px; --frame: rgba(255, 255, 255, 0.16); padding: 10px; }
.stats span { letter-spacing: 0.12em; }
.stats b { font-family: var(--ui-num); font-size: 24px; color: var(--ui-line); }
.build-row { --cut: 10px; --frame: color-mix(in srgb, var(--c, #f4c542) 55%, transparent); border-left: none; }
.howto { --cut: 10px; --frame: rgba(255, 255, 255, 0.14); --fill: rgba(6, 8, 12, 0.72); }
.rd-box { --cut: 12px; --frame: var(--ui-line); }

/* ---------- HUD ---------- */
.xpbar { position: relative; height: 7px; border-radius: 0; border: none; background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 1px rgba(244, 197, 66, 0.35);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.xpbar::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(0, 0, 0, 0.7) 22px 24px); }
.xpfill { background: linear-gradient(90deg, #e0901c, #ffd85a); box-shadow: 0 0 8px rgba(255, 200, 80, 0.7); }
.lv { --cut: 6px; --fill: rgba(6, 8, 12, 0.85); padding: 3px 10px 2px; font-family: var(--ui-num); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.lv b { font-size: 17px; }
.hpbar { height: 16px; border-radius: 0; border: none; background: rgba(0, 0, 0, 0.65); box-shadow: inset 0 0 0 1px rgba(255, 110, 110, 0.55);
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.hpbar::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(0, 0, 0, 0.55) 12px 14px); }
.hpfill { background: linear-gradient(90deg, #d81e34, #ff5a4a 70%, #ff9a6a); }
.hpbar span { z-index: 1; font-family: var(--ui-num); font-size: 12px; letter-spacing: 0.08em; }
.timer { position: relative; padding: 0 12px; font-family: var(--ui-num); font-weight: 700; font-size: 25px; letter-spacing: 0.1em; color: #fff7e2; }
.timer::before, .timer::after { content: ''; position: absolute; top: 12%; bottom: 12%; width: 6px; border: 2px solid var(--ui-line); }
.timer::before { left: 0; border-right: none; }
.timer::after { right: 0; border-left: none; }
.right { font-family: var(--ui-num); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; }
.icon { --cut: 8px; --fill: rgba(6, 8, 12, 0.85); width: 36px; height: 36px; color: var(--ui-line); }
.skill { --cut: 7px; --fill: rgba(6, 8, 12, 0.82); }
.skill i { border-radius: 0; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); background: var(--ui-line); font-family: var(--ui-num); }
.bossname { font-family: var(--ui-num); letter-spacing: 0.14em; text-transform: uppercase; }
.bosstrack { position: relative; border-radius: 0; border: none; box-shadow: inset 0 0 0 1px rgba(255, 90, 100, 0.6); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.bosstrack::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(0, 0, 0, 0.6) 16px 18px); }
/* 奧義按鈕：圓形量表保留（一圈就是集氣進度），中間改成黑色金屬底 */
.ult, body.solo #btn-ult { background: radial-gradient(circle at 50% 38%, #2a2d36, #0a0b0e 70%); box-shadow: 0 0 0 2px rgba(244, 197, 66, 0.25), 0 6px 18px rgba(0, 0, 0, 0.6); }
.ult.ready, body.solo #btn-ult.ready { background: radial-gradient(circle at 50% 38%, #ffe89a, #f08a1a 75%); }
.ult-label { font-family: var(--ui-num); color: #e9dcb8; }
/* 「出航！」：橘色光暈 */
.banner { color: #fff; -webkit-text-stroke: 2px #1a0d00; letter-spacing: 0.12em; text-shadow: 0 3px 0 #b34a00, 0 0 22px rgba(255, 138, 26, 0.85); }

/* 血條改到角色腳下（使用者指定）：上方 HUD 的血條藏起來 */
.hud .hpbar { display: none; }
.hpfloat { position: fixed; left: 0; top: 0; width: 58px; height: 7px; z-index: 1; pointer-events: none; will-change: transform;
  border-radius: 3px; background: #2a0e12; box-shadow: 0 0 0 1.5px #0a0a0c, 0 2px 4px rgba(0, 0, 0, 0.45); overflow: hidden; }
/* 剛扣掉的血：淡黃色，延遲 0.3 秒才慢慢縮回去（看得出這一下扣了多少） */
.hpf-lag, .hpf-fill { position: absolute; inset: 0; transform-origin: left; }
.hpf-lag { background: #ffe9a8; transition: transform 0.5s ease-out 0.3s; }
/* 血量：上緣一條亮邊，看起來有立體感 */
.hpf-fill { background: linear-gradient(180deg, #ff8a7a 0, #ff4a4f 30%, #d61d2e 70%, #a5121f 100%); transition: transform 0.1s; }
/* 每 25% 一條淡淡的刻度 */
.hpfloat::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(25% - 0.5px), rgba(0, 0, 0, 0.45) calc(25% - 0.5px) calc(25% + 0.5px), transparent calc(25% + 0.5px) calc(50% - 0.5px), rgba(0, 0, 0, 0.45) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px) calc(75% - 0.5px), rgba(0, 0, 0, 0.45) calc(75% - 0.5px) calc(75% + 0.5px), transparent calc(75% + 0.5px)); }
.hpfloat.low .hpf-fill { animation: hpLow 0.5s ease-in-out infinite alternate; }
@keyframes hpLow { to { filter: brightness(1.7); } }

/* 按住奧義按鈕跳出的選單（單人時按鈕在左下，選單疊在按鈕上方） */
.fpick { position: fixed; left: 12px; bottom: calc(env(safe-area-inset-bottom) + 148px); z-index: 6; display: flex; flex-direction: column; gap: 6px; width: 150px; animation: rdIn 0.15s ease-out; }
.fpick-h { font-family: var(--ui-num); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--ui-line); padding-left: 4px; text-shadow: 0 1px 2px #000; }
.fpick .fp-item { --cut: 8px; min-height: 42px; font-size: 15px; letter-spacing: 0.14em; }
.fpick .fp-item.on { --frame: var(--ui-line); --fill: linear-gradient(180deg, #ffdc6a, #f0a52a); color: #170d00; }
.fpick .fp-item.on::after { content: ' ✓'; }
#btn-ult { touch-action: none; -webkit-user-select: none; user-select: none; }
/* 選奧義時畫面四周暗下來，提示時間變慢了 */
body.fpick-on .danger { opacity: 1; box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.75); animation: none; }
/* 手指滑到的那一招：橘色亮起、往右推一點 */
.fpick .fp-item.hover { --frame: var(--ui-hot); --fill: linear-gradient(180deg, #ffb35a, #ff8a1a); color: #170d00; transform: translateX(6px) scale(1.04); }
.fpick .fp-item { transition: transform 0.08s; }
/* 換奧義冷卻：按鈕右上角的小秒數；冷卻中按住會抖一下 */
.ult-pickcd { position: absolute; right: -4px; top: -4px; min-width: 22px; padding: 1px 5px; font-family: var(--ui-num); font-size: 13px; font-weight: 700; line-height: 1.3;
  color: #fff; background: #3a3f4c; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); text-align: center; }
.ult-pickcd:empty { display: none; }
.pickcd-shake { animation: pickShake 0.3s; }
@keyframes pickShake { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
/* 冷卻中按住奧義按鈕：上方跳出「冷卻中」，0.9 秒內淡掉 */
.ult-cdmsg { position: fixed; left: 12px; bottom: calc(env(safe-area-inset-bottom) + 146px); width: 82px; z-index: 6; pointer-events: none; text-align: center;
  font-size: 15px; font-weight: 900; letter-spacing: 0.12em; color: #ffd7a8; -webkit-text-stroke: 1px #2a1200; paint-order: stroke fill;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 138, 26, 0.8); opacity: 0; }
.ult-cdmsg.show { animation: cdMsg 0.9s ease-out forwards; }
@keyframes cdMsg { 0% { opacity: 0; transform: translateY(6px) scale(0.9); } 15% { opacity: 1; transform: translateY(0) scale(1.05); } 60% { opacity: 1; transform: translateY(-4px) scale(1); } 100% { opacity: 0; transform: translateY(-14px); } }

/* 覺醒卡的奧義名稱：只在「・」的地方換行 */
.card .nw { white-space: nowrap; }

/* ===== 三刀流奧義・六道十字路（六道の辻）的全螢幕演出 ===== */
.rkd { position: fixed; inset: 0; z-index: 8; pointer-events: none; transition: opacity 0.4s; }
.rkd.out { opacity: 0; }
.rkd > * { position: absolute; }
.rkd::before { content: ''; position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 0.4s; }   /* 全黑 */
.rkd.dark::before { opacity: 1; }
/* 拔刀：刀柄迸出青白光線 */
.rkd-burst { width: 0; height: 0; }
.rkd-burst i { position: absolute; left: 0; top: 0; width: var(--l); height: 6px; margin-top: -3px; transform-origin: 0 50%; transform: rotate(var(--a)) scaleX(0);
  background: linear-gradient(90deg, #fff 0, #c9fbff 30%, rgba(90, 230, 255, 0.6) 70%, transparent); filter: drop-shadow(0 0 6px #6ff0ff);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%); animation: rkdRay 0.7s cubic-bezier(.1, .9, .3, 1) var(--d) both; }
@keyframes rkdRay { 0% { transform: rotate(var(--a)) scaleX(0); opacity: 1; } 35% { transform: rotate(var(--a)) scaleX(1); opacity: 1; } 100% { transform: rotate(var(--a)) scaleX(1.1); opacity: 0; } }
/* 白光一閃 → 黑白倒 S 漩渦（索隆直向旋轉） */
.rkd-swirl { inset: 0; background: radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, 0.55) 0, rgba(240, 255, 255, 0.92) 18%, #f4ffff 40%); animation: rkdSwirlFade var(--ms) ease-in both; }
.rkd-swirl svg { position: absolute; left: calc(var(--x) - 75vmax); top: calc(var(--y) - 75vmax); width: 150vmax; height: 150vmax; }
.rkd-arms { fill: #05080a; animation: rkdSpin var(--ms) cubic-bezier(.3, 0, .6, 1) both; transform-origin: 0 0; }
@keyframes rkdSpin { from { transform: rotate(-40deg) scale(0.6); } to { transform: rotate(520deg) scale(1.15); } }
@keyframes rkdSwirlFade { 0% { opacity: 0; } 6% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
/* 紅線：一條橫的劃過去，六條直的一條一條落下 */
.rkd-lines { inset: 0; }
.rkd-lines b, .rkd-lines em { position: absolute; background: #ff1a1a; box-shadow: 0 0 6px #ff2a2a, 0 0 18px rgba(255, 30, 30, 0.85), 0 0 40px rgba(255, 0, 0, 0.5); }
.rkd-lines .h { left: 0; right: 0; top: var(--y); height: 3px; margin-top: -1.5px; transform-origin: 0 50%; animation: rkdH 0.22s ease-out both; }
.rkd-lines .v { top: 0; bottom: 0; width: 3px; margin-left: -1.5px; transform-origin: 50% 0; animation: rkdV 0.16s ease-out calc(0.25s + var(--i) * 0.06s) both; }
.rkd-lines em { left: 0; top: calc(var(--y) + var(--dy)); width: 34px; height: 2px; border-radius: 50%; transform: rotate(var(--r)); opacity: 0; animation: rkdBit 0.4s ease-out 0.5s forwards; }
@keyframes rkdH { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rkdV { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rkdBit { to { opacity: 0.8; } }
.rkd-lines.gone { transition: opacity 0.25s; opacity: 0; }
/* 六道斬擊劃過畫面 */
.rkd-slash { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }
.rkd-sl { animation: rkdSl 0.9s cubic-bezier(.2, .9, .3, 1) var(--d) both; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes rkdSl { 0% { transform: scaleY(0); opacity: 1; } 20% { transform: scaleY(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: scaleY(1) scaleX(0.4); opacity: 0; } }
/* 青色主題的特寫、大字（六道十字路） */
.fcut.cyan .fcut-face { background: radial-gradient(circle at 50% 40%, #1d5a62, #031216 70%); }
.fcut.cyan .cine-ch, .fcut.cyan .cine-dot { text-shadow: 0 4px 0 #063a44, 0 0 18px rgba(120, 245, 255, 0.95), 0 0 40px rgba(40, 210, 240, 0.75); }
.dsw.cyan .dsw-ch { color: #f2ffff; text-shadow: 6px 8px 0 #021418, 0 0 26px rgba(130, 245, 255, 0.95), 0 0 70px rgba(40, 210, 240, 0.8); }
.dsw.cyan .dsw-lines { background: repeating-conic-gradient(from 0deg, rgba(200, 255, 255, 0) 0deg, rgba(180, 250, 255, 0.5) 0.6deg, rgba(200, 255, 255, 0) 1.6deg, transparent 4.5deg); }
/* 大字一排三個（六道十字路的「十字路」）：縮小、置中 */
.dsw-row.three { transform: rotate(-6deg) !important; }
.dsw-row.three .dsw-ch { font-size: clamp(50px, min(24vw, 28vh), 180px); }
/* ===== 標題畫面：選單人角色（索隆／宇智波鼬）===== */
.hero-pick { display: flex; gap: 10px; justify-content: center; }
.hp-chip { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border: 2px solid rgba(255, 255, 255, 0.18); background: rgba(10, 8, 6, 0.6); color: #e8e2d6; font: 800 15px/1 inherit; cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: border-color 0.15s, background 0.15s; }
.hp-chip img { width: 38px; height: 38px; object-fit: cover; background: rgba(255, 255, 255, 0.08); }
.hp-chip.on { border-color: var(--c, var(--gold)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.5)); color: #fff; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
/* ===== 鼬・月讀：畫面一瞬間變成紅天黑月的月讀世界 ===== */
.tsukuyomi-fx { position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 22%, #050003 0 9vmin, rgba(255, 60, 70, 0.9) 9.4vmin, rgba(170, 0, 18, 0.75) 22vmin, rgba(90, 0, 10, 0.82) 100%); mix-blend-mode: multiply; }
.tsukuyomi-fx.on { animation: tsukuFx 1.4s ease-out both; }
@keyframes tsukuFx { 0% { opacity: 0; } 12% { opacity: 1; } 60% { opacity: 0.85; } 100% { opacity: 0; } }

/* ===== 紅色主題的特寫、大字（鼬・須佐能乎）===== */
.fcut.red .fcut-face { background: radial-gradient(circle at 50% 40%, #6a1410, #160302 70%); }
.fcut.red .cine-ch, .fcut.red .cine-dot { text-shadow: 0 4px 0 #3a0604, 0 0 18px rgba(255, 110, 70, 0.95), 0 0 40px rgba(240, 50, 20, 0.75); }
.dsw.red .dsw-ch { color: #fff3ea; text-shadow: 6px 8px 0 #1a0302, 0 0 26px rgba(255, 120, 70, 0.95), 0 0 70px rgba(230, 40, 20, 0.8); }
.dsw.red .dsw-lines { background: repeating-conic-gradient(from 0deg, rgba(255, 200, 180, 0) 0deg, rgba(255, 150, 110, 0.5) 0.6deg, rgba(255, 200, 180, 0) 1.6deg, transparent 4.5deg); }

/* 奧義按鈕的換招提示：底下一排小點＝有幾招奧義（亮的是下次放的）；量表滿、可以換時右邊跳出「按住換招」 */
.ult-dots { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font-size: 8px; letter-spacing: 2px; line-height: 1; color: rgba(255, 240, 200, 0.85); pointer-events: none; }
.ult.ready .ult-dots { color: #3a1500; }
.ult-hint { position: absolute; left: calc(100% + 10px); top: 50%; translate: 0 -50%; white-space: nowrap; pointer-events: none;
  padding: 4px 10px 4px 22px; font-size: 13px; font-weight: 900; letter-spacing: 0.06em; color: #170d00;
  background: linear-gradient(180deg, #ffd27a, #ff9a2a); clip-path: polygon(10px 0, 100% 0, calc(100% - 6px) 100%, 0 100%, 0 50%);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)); opacity: 0; transform: translateX(-6px); transition: opacity 0.2s, transform 0.2s; }
.ult-hint::before { content: '⇄'; position: absolute; left: 9px; top: 50%; translate: 0 -52%; font-size: 12px; }
.ult-hint.show { opacity: 1; transform: none; animation: ultHint 1.6s ease-in-out infinite; }
.ult-hint.learned { font-size: 11px; padding: 3px 8px 3px 19px; opacity: 0; }
.ult-hint.learned.show { opacity: 0.8; animation: none; }
@keyframes ultHint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
body.ultbusy .ult-hint, body.fpick-on .ult-hint { opacity: 0 !important; }

/* ===== 鼬・伊邪那美：世界變灰（像動畫裡的藍灰夜色）、快門一閃、每次倒帶畫面掃過橫紋 =====
   去色、上色各自是一整片固定層（混色模式要直接放在最外層，包在同一個容器裡會只跟容器本身混色、變成一片灰霧） */
.iz-grey, .iz-tint, .iz-fx { position: fixed; inset: 0; z-index: 7; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
.iz-grey { background: #808080; mix-blend-mode: saturation; }   /* 去色 */
.iz-grey.on { opacity: 0.85; }
.iz-tint { background: #6d97a2; mix-blend-mode: multiply; }     /* 藍灰色調 */
.iz-tint.on { opacity: 0.45; }
.iz-fx.on { opacity: 1; }
.iz-grey.off, .iz-tint.off, .iz-fx.off { opacity: 0; transition: opacity 0.9s; }
.iz-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(6, 14, 18, 0.55) 100%); }
.iz-snap { position: absolute; inset: 0; background: #fff; opacity: 0; }
.iz-fx.snap .iz-snap { animation: izSnap 0.5s ease-out; }
@keyframes izSnap { 0% { opacity: 0.95; } 100% { opacity: 0; } }
.iz-rw { position: absolute; inset: 0; opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(240, 246, 255, 0.22) 0 2px, transparent 2px 8px),
    linear-gradient(90deg, rgba(255, 40, 60, 0.16), transparent 25%, transparent 75%, rgba(40, 200, 255, 0.16)); }
.iz-fx.rw .iz-rw { animation: izRw 0.32s steps(6); }
@keyframes izRw { 0% { opacity: 1; transform: translateX(-18px) skewX(-10deg); } 50% { opacity: 0.85; transform: translateX(12px) skewX(7deg); } 100% { opacity: 0; transform: none; } }
/* 字幕比較長（「お前はもう…失敗したんだ」）：字小一點，手機才不會超出格子 */
.cine-sub.long .cine-ch { font-size: clamp(22px, 7.6vw, 52px); }
.cine-sub.long .cine-dot { font-size: clamp(16px, 5vw, 34px); }

/* ---------- 亡者戯（阿修羅）：金黃＋紫的霸王色 ---------- */
.fcut.gold .fcut-face { background: radial-gradient(circle at 50% 40%, #5a3a06, #12061c 70%); }
.fcut.gold .cine-ch, .fcut.gold .cine-dot { text-shadow: 0 4px 0 #2a0a3a, 0 0 18px rgba(255, 220, 60, 0.95), 0 0 40px rgba(170, 60, 255, 0.75); }
.dsw.gold .dsw-ch { color: #fffbe6; text-shadow: 6px 8px 0 #1a0626, 0 0 26px rgba(255, 220, 60, 0.95), 0 0 70px rgba(170, 60, 255, 0.8); }
.haki-screen.gold .hs-flash { background: #1a0626; }
.haki-screen.gold .hs-vig { background: radial-gradient(ellipse 62% 58% at 50% 52%, transparent 40%, rgba(255, 210, 40, 0.12) 64%, rgba(140, 40, 220, 0.26) 84%, rgba(30, 0, 50, 0.45) 100%); }
.haki-screen.gold .hs-swirl { background: repeating-conic-gradient(from 0deg, rgba(255, 220, 60, 0) 0deg, rgba(255, 220, 60, 0.16) 3deg, rgba(120, 30, 200, 0.12) 6deg, rgba(255, 220, 60, 0) 11deg, transparent 19deg); }
.haki-screen.gold .hs-b-glow { stroke: #b44dff; filter: drop-shadow(0 0 1.2px #ffe680); }
.haki-screen.gold .hs-b-core { stroke: #fff2a0; }
/* 標題卡：全黑、白色毛筆字（動畫原樣） */
.mjc { position: fixed; inset: 0; z-index: 9; pointer-events: none; background: #000; opacity: 0; transition: opacity 0.08s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.02em;
  font-family: 'Potta One', 'Noto Serif TC', serif; line-height: 1; }
.mjc.on { opacity: 1; }
.mjc-row { display: flex; justify-content: center; gap: 0.06em; }
.mjc-w { color: #fff; font-size: min(26vw, 30vh, 230px); letter-spacing: 0.02em; animation: mjcIn 0.18s cubic-bezier(.2, 1.4, .4, 1) both;
  text-shadow: 0 0 1px #fff, 3px 3px 0 rgba(255, 255, 255, 0.25); }
.mjc-row.r2 .mjc-w { font-size: min(26vw, 30vh, 230px); }
.mjc.hit .mjc-row { animation: dswJolt 0.2s ease-out; }
@keyframes mjcIn { from { transform: scale(1.35); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
.iaif.gold { background: radial-gradient(ellipse at 50% 50%, #fff6c0, #ffd84a 45%, rgba(120, 30, 200, 0.9)); animation-name: iaifGoku; animation-duration: 0.7s; }
/* 死・獅子歌歌（照第 1059 集）：落地白光一閃 → 黑畫面一條細細的綠線；收刀斬開時青綠光一閃 */
.iaif.shiline { background: linear-gradient(180deg, #000 calc(50% - 2px), #b8ffd8 calc(50% - 1px), #6dffa8 50%, #b8ffd8 calc(50% + 1px), #000 calc(50% + 2px)); animation-name: iaifLine; animation-duration: 0.6s; }
.iaif.shicyan { background: radial-gradient(ellipse at 50% 50%, #f0fffc, #8ff6e0 50%, rgba(20, 120, 110, 0.85)); }
@keyframes iaifLine { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.iaif.shigreen { background: radial-gradient(ellipse at 50% 50%, #f0fff2, #6dff8a 45%, rgba(10, 90, 30, 0.85)); }

/* 死・獅子歌歌（有喊）：沿用煉獄鬼斬的泛光／閃電／光帶，換成閻王的綠 */
.ssw .rgw-wash { background: linear-gradient(180deg, rgba(40, 230, 90, 0.2), rgba(10, 150, 60, 0.22)); }
.ssw .rgw-wash::after { background: rgba(140, 255, 170, 0.05); }
.ssw .rgw-b-glow { stroke: rgba(60, 255, 110, 0.6); }
.ssw .rgw-b-core { stroke: #f0fff2; }
.ssw .rgw-beams i { background: linear-gradient(90deg, rgba(60, 255, 110, 0), rgba(170, 255, 190, 0.75) 40%, #fff 50%, rgba(170, 255, 190, 0.75) 60%, rgba(60, 255, 110, 0)); }
.ssw .ssw-tint { position: absolute; inset: -5%; background: radial-gradient(ellipse 65% 60% at 50% 50%, transparent 50%, rgba(20, 200, 70, 0.18) 78%, rgba(0, 60, 20, 0.45) 100%); animation: hsPulse 0.6s ease-in-out infinite alternate; }
.ssw .rgw-w { text-shadow: 0 0 3px #4dff6a, 0 0 16px rgba(60, 255, 110, 0.95), 0 0 42px rgba(20, 200, 80, 0.85); }
.ssw-glint { background: linear-gradient(90deg, transparent, #c8ffd4 15%, #fff 50%, #c8ffd4 85%, transparent); box-shadow: 0 0 14px #4dff6a, 0 0 36px rgba(60, 255, 110, 0.9); height: 3px; }

/* ---------- 開局選招卡（2026-10-31 重做：上架水準，不用 emoji）----------
   上半＝動畫截圖主視覺（右上角編號、左上角定位標籤），下半＝招式名＋拼音副標、2×2 能力格、優點／缺點各一行
   兩欄排：手機直式四張卡一個畫面放得下 */
#start-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-card { --cut: 12px; --frame: color-mix(in srgb, var(--c) 55%, rgba(255, 255, 255, 0.08)); --fill: linear-gradient(180deg, #14161c, #0c0d11);
  min-width: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; text-align: left; cursor: pointer; color: #fff;
  transition: transform 0.16s cubic-bezier(.2, .8, .3, 1), filter 0.16s; }
.sp-card:hover, .sp-card:focus-visible { --frame: var(--c); transform: translateY(-3px); outline: none; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--c) 35%, transparent)); }
.sp-card:active { transform: scale(0.97); }
.sp-art { position: relative; display: block; margin: 1.5px 1.5px 0; aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  clip-path: polygon(calc(var(--cut) - 1.5px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--cut) - 1.5px)); }
.sp-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 0.35s ease; filter: saturate(1.08) contrast(1.05); }
.sp-card:hover .sp-art img { transform: scale(1.08); }
.sp-art::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60px 34px at 100% 0%, rgba(0, 0, 0, 0.7), transparent 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 28%, transparent 55%, #101217 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--c) 28%, transparent), transparent 35%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px); }
.sp-tag { position: absolute; z-index: 1; top: 7px; left: 9px; padding: 2px 9px 2px 7px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; color: #0b0c10;
  background: var(--c); clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.sp-no { position: absolute; z-index: 1; top: 5px; right: 8px; font-family: var(--ui-num); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 3px #000; }
.sp-body { display: flex; flex-direction: column; gap: 7px; padding: 4px 10px 10px; margin-top: -14px; position: relative; z-index: 1; }
.sp-title { display: flex; flex-direction: column; gap: 1px; }
.sp-name { font-size: 20px; font-weight: 900; letter-spacing: 0.14em; line-height: 1.1; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9); }
.sp-en { font-style: normal; font-family: var(--ui-num); font-size: 10.5px; font-weight: 700; letter-spacing: 0.34em; color: var(--c); }
.sp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.sp-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-row i { font-style: normal; font-size: 10px; letter-spacing: 0.2em; color: rgba(214, 222, 236, 0.62); }
.sp-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.sp-bar s { height: 4px; text-decoration: none; background: rgba(255, 255, 255, 0.1); transform: skewX(-25deg); }
.sp-bar s.on { background: var(--c); box-shadow: 0 0 5px color-mix(in srgb, var(--c) 55%, transparent); }
.sp-bar s.half { background: linear-gradient(90deg, var(--c) 50%, rgba(255, 255, 255, 0.1) 50%); }
.sp-pc { display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.35; }
.sp-pc em { font-style: normal; display: flex; gap: 5px; align-items: baseline; }
.sp-pc em::before { flex: none; font-family: var(--ui-num); font-weight: 700; font-size: 12px; width: 8px; }
.sp-pc .pro { color: #b9ecc4; } .sp-pc .pro::before { content: '+'; color: #5be37b; }
.sp-pc .con { color: #f2b7b7; } .sp-pc .con::before { content: '\2212'; color: #ff6b6b; }
#startpick .sp-panel { width: min(460px, 100%); padding: 18px 14px 14px; }
.sp-sub { margin-bottom: 12px; }
@media (max-height: 760px) { .sp-art { aspect-ratio: 16 / 8; } .sp-body { gap: 5px; } }
@media (max-height: 660px) { .sp-art { aspect-ratio: 16 / 6.5; } .sp-pc { font-size: 10.5px; } }

/* ---------- 介面圖示（js/icons.js；2026-10-31 換掉所有 emoji）----------
   招式＝動畫截圖縮圖（切角、招式色細框）；輔助技能＝金色線條 SVG 徽章；沒截圖的招式＝名字第一個字的印章 */
.gi { display: inline-grid; place-items: center; flex: none; width: 1.5em; height: 1.5em; vertical-align: middle; color: var(--ui-line); }
.gi svg { width: 100%; height: 100%; display: block; }
.gi-art { position: relative; overflow: hidden; background: #000; clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%); }
.gi-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gi-art::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c, #f4c542) 80%, transparent); clip-path: inherit; }
.gi-seal { font-weight: 900; font-size: 0.9em; color: #120c02; background: var(--ui-line); clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%); }
.gi-p svg { filter: drop-shadow(0 0 4px rgba(244, 197, 66, 0.45)); }
.gi-evo { color: #ff5a66; }
.gi-evo svg { filter: drop-shadow(0 0 8px rgba(255, 60, 70, 0.8)); }
.gi-inl { width: 1.35em; height: 1.35em; margin: -0.2em 0.15em 0 0; }
.gi-inl.gi-art { width: 1.6em; height: 1.1em; }
.gi-btn { width: 1.2em; height: 1.2em; margin-right: 0.45em; margin-top: -0.15em; }
/* 升級卡的大圖示：招式是一張橫的小截圖，輔助技能是深色切角底上的金色徽章 */
.card .ic { display: grid; place-items: center; font-size: 0; }
.gi-card { width: 76px; height: 52px; }
.gi-card.gi-p, .gi-card.gi-evo { width: 52px; height: 52px; padding: 10px; background: radial-gradient(circle at 50% 40%, rgba(244, 197, 66, 0.18), rgba(8, 9, 12, 0.9) 70%);
  clip-path: polygon(22% 0, 100% 0, 100% 78%, 78% 100%, 0 100%, 0 22%); box-shadow: inset 0 0 0 1px rgba(244, 197, 66, 0.4); }
.gi-card.gi-evo { background: radial-gradient(circle at 50% 40%, rgba(255, 60, 70, 0.3), rgba(20, 4, 8, 0.9) 70%); }
@media (max-width: 520px) { .card .ic { width: 76px; } .gi-card { width: 70px; height: 48px; } .gi-card.gi-p, .gi-card.gi-evo { width: 48px; height: 48px; padding: 9px; } }
/* 畫面上的招式欄 */
.skill { font-size: 0; overflow: visible; }
.gi-hud { width: 100%; height: 100%; }
.gi-hud.gi-art { clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.gi-hud.gi-p { padding: 6px; }
.skill i { font-size: 10px; z-index: 2; }
.kills { display: flex; align-items: center; gap: 4px; }
.gi-kills { width: 1.1em; height: 1.1em; color: #e8e2d4; }

/* 說明文字裡的狀態關鍵字（【出血】等）：金色粗體 */
.kw { font-weight: 800; color: var(--ui-line); }

.gi-pause { width: 55%; height: 55%; display: block; margin: auto; color: var(--ui-line); }

/* ---------- 寶箱轉盤：三格轉輪，中幾格升級幾次；×1 金、×2 藍紫光芒、×3 大獎（白光、七彩光芒、紙花、震動）---------- */
.chest-ov { position: fixed; inset: 0; z-index: 12; display: grid; place-items: center; padding: 16px;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 40%, rgba(50, 36, 8, 0.78), rgba(3, 4, 7, 0.94)); animation: crIn 0.2s ease-out both; }
.chest-ov.out { opacity: 0; transition: opacity 0.22s; }
@keyframes crIn { from { opacity: 0; } }
.cr-panel { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.cr-reels { --ri: 76px; display: flex; gap: 10px; justify-content: center; cursor: pointer; }
.cr-reel { position: relative; width: 82px; height: var(--ri); overflow: hidden; background: #07080b;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: inset 0 0 0 1.5px rgba(244, 197, 66, 0.45), inset 0 10px 14px -8px #000, inset 0 -10px 14px -8px #000; transition: box-shadow 0.2s; }
.cr-strip { will-change: transform; }
.cr-item { height: var(--ri); display: grid; place-items: center; }
.gi-reel { width: 60px; height: 42px; }
.gi-reel.gi-p { width: 46px; height: 46px; padding: 6px; }
.cr-miss { width: 34px; height: 4px; background: rgba(255, 255, 255, 0.18); transform: skewX(-25deg); }
.cr-reel.stop { animation: crThud 0.25s ease-out; }
.cr-reel.hit { box-shadow: inset 0 0 0 2px var(--ui-line), 0 0 16px rgba(244, 197, 66, 0.55), inset 0 0 18px rgba(244, 197, 66, 0.35); }
.cr-reel.blank { opacity: 0.55; }
@keyframes crThud { 0% { transform: translateY(4px); } 60% { transform: translateY(-2px); } 100% { transform: none; } }
.cr-tier { min-height: 30px; font-size: 18px; font-weight: 800; letter-spacing: 0.2em; color: var(--ui-line); opacity: 0; }
.cr-tier b { font-family: var(--ui-num); font-size: 28px; letter-spacing: 0.05em; margin: 0 0.2em; }
.cr-tier em { font-style: normal; font-size: 13px; letter-spacing: 0.3em; padding: 2px 8px; margin-left: 8px; vertical-align: 4px; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.reveal .cr-tier { opacity: 1; animation: crPop 0.4s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes crPop { from { transform: scale(1.8); opacity: 0; } }
.cr-list { display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 20px; }
.cr-row { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; font-weight: 700; color: #f2f4f8; animation: crRow 0.3s ease-out both; }
.cr-row b { color: var(--ui-line); font-family: var(--ui-num); margin-left: 4px; }
@keyframes crRow { from { opacity: 0; transform: translateY(8px); } }
.cr-ok { width: 100%; }
.cr-ok:disabled { opacity: 0.35; }
.cr-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cr-fx .cr-rays { position: absolute; left: 50%; top: 40%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; opacity: 0; border-radius: 50%; }
.cr-fx .cr-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
/* ×1：金色光圈 */
.tier1 .cr-rays { background: radial-gradient(circle, rgba(255, 216, 74, 0.35), transparent 30%); animation: crBurst 0.8s ease-out both; }
/* ×2：藍紫色旋轉光芒 */
.tier2 .cr-tier { color: #b8a8ff; text-shadow: 0 0 16px rgba(150, 120, 255, 0.9); }
.tier2 .cr-tier em { background: #7a6bff; color: #fff; }
.tier2 .cr-rays { background: repeating-conic-gradient(from 0deg, rgba(120, 140, 255, 0.28) 0deg 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 5%, transparent 45%); mask: radial-gradient(circle, #000 5%, transparent 45%);
  animation: crSpin 6s linear infinite, crFade 0.5s ease-out both; }
.tier2 .cr-reel.hit { box-shadow: inset 0 0 0 2px #9a8cff, 0 0 18px rgba(130, 110, 255, 0.7), inset 0 0 18px rgba(130, 110, 255, 0.4); }
/* ×3：大獎——白光一閃、七彩旋轉光芒、紙花、面板震動、金色字 */
.tier3 .cr-tier { background: linear-gradient(90deg, #ffd84a, #ff7a5a, #ff5ad8, #6ab8ff, #7fe8d8, #ffd84a); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: crPop 0.45s cubic-bezier(.2, 1.6, .4, 1) both, crShine 1.2s linear infinite; }
.tier3 .cr-tier em { background: linear-gradient(90deg, #ffd84a, #ff5a6a); color: #1a0a00; -webkit-text-fill-color: #1a0a00; }
.tier3 .cr-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 216, 74, 0.38) 0deg 5deg, rgba(255, 90, 200, 0.22) 5deg 10deg, transparent 10deg 15deg); -webkit-mask: radial-gradient(circle, #000 8%, transparent 50%); mask: radial-gradient(circle, #000 8%, transparent 50%);
  animation: crSpin 3.5s linear infinite, crFade 0.4s ease-out both; }
.tier3 .cr-flash { animation: crFlash 0.6s ease-out both; }
.tier3 .cr-panel { animation: crShake 0.45s ease-out; }
.tier3 .cr-reel.hit { box-shadow: inset 0 0 0 2px #fff2a0, 0 0 22px rgba(255, 216, 74, 0.9), inset 0 0 22px rgba(255, 140, 200, 0.5); }
.cr-conf { position: absolute; top: -20px; height: 10px; opacity: 0.95; animation: crConf linear both; }
@keyframes crConf { to { transform: translateY(110vh) rotate(var(--rot)); opacity: 0.6; } }
@keyframes crBurst { from { opacity: 1; transform: scale(0.3); } to { opacity: 0; transform: scale(1.2); } }
@keyframes crSpin { to { transform: rotate(360deg); } }
@keyframes crFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes crFlash { 0% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes crShine { to { background-position: 200% 0; } }
@keyframes crShake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }

/* ---------- 暫停選單的音量拉桿（金色細軌＋切角滑塊，跟 DOOM 風格的面板一致）---------- */
.vol-box { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin: 2px 0 4px; background: rgba(6, 7, 10, 0.55);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: inset 0 0 0 1px rgba(244, 197, 66, 0.3); }
.vol-row { display: grid; grid-template-columns: 5.2em 1fr 3.4em; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: #f2f4f8; letter-spacing: 0.08em; }
.vol-val { font-family: var(--ui-num); font-size: 16px; color: var(--ui-line); text-align: right; letter-spacing: 0.02em; }
input.vol { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer; touch-action: none; --p: 100%; }
input.vol:focus { outline: none; }
input.vol::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--ui-line) var(--p), rgba(255, 255, 255, 0.14) var(--p)); }
input.vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 22px; margin-top: -8px; background: var(--ui-line); border: 0;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
input.vol::-moz-range-track { height: 6px; background: rgba(255, 255, 255, 0.14); border: 0; }
input.vol::-moz-range-progress { height: 6px; background: var(--ui-line); }
input.vol::-moz-range-thumb { width: 14px; height: 22px; border: 0; border-radius: 0; background: var(--ui-line); }
input.vol:active::-webkit-slider-thumb { background: #fff2b0; }
.vol-head { font-size: 13px; font-weight: 800; letter-spacing: 0.35em; color: var(--ui-line); padding-bottom: 2px; border-bottom: 1px solid rgba(244, 197, 66, 0.25); }
.vol-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.vol-btns .btn { margin: 0; font-size: 14px; padding-inline: 6px; }
.vol-row > span { text-align: left; }

/* ---------- 暫停選單：分頁（招式配置／傷害統計）、可點的招式、傷害統計表、招式詳細資訊（2026-10-31）---------- */
.ptabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.ptab { appearance: none; border: 0; cursor: pointer; padding: 8px 6px; font: inherit; font-size: 14px; font-weight: 800; letter-spacing: 0.15em; color: #b9bfca;
  background: rgba(255, 255, 255, 0.06); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); transition: background 0.15s, color 0.15s; }
.ptab.on { color: #1a1206; background: var(--ui-line); }
.bs-btn { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; padding: 3px 5px; margin: -3px -5px; border-radius: 4px; text-align: left; transition: background 0.15s; }
.bs-btn:hover, .bs-btn:focus-visible { background: rgba(244, 197, 66, 0.14); outline: none; }
.bs-btn:active { background: rgba(244, 197, 66, 0.25); }
.build-tip { font-size: 11px; color: #8a909c; text-align: center; letter-spacing: 0.1em; margin-top: 2px; }
.dmg-table { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin-bottom: 8px; background: rgba(6, 7, 10, 0.55);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: inset 0 0 0 1px rgba(244, 197, 66, 0.3); max-height: 46vh; overflow-y: auto; }
.dm-head { display: flex; justify-content: space-between; font-size: 13px; color: #c9ced8; letter-spacing: 0.08em; padding-bottom: 6px; border-bottom: 1px solid rgba(244, 197, 66, 0.25); }
.dm-head b { font-family: var(--ui-num); font-size: 18px; color: var(--ui-line); margin-left: 4px; }
.dm-row { display: grid; grid-template-columns: 1.4em minmax(0, 1.5fr) minmax(0, 1fr) 4.2em 3.6em; align-items: center; gap: 8px; font-size: 13px; color: #f2f4f8; }
.dm-rank { font-family: var(--ui-num); font-weight: 700; color: #8a909c; text-align: center; }
.dm-row:first-of-type .dm-rank, .dm-head + .dm-row .dm-rank { color: var(--ui-line); }
.dm-name { display: flex; align-items: center; gap: 5px; min-width: 0; font-weight: 700; }
.dm-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-bar { height: 8px; background: rgba(255, 255, 255, 0.08); }
.dm-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c8901e, var(--ui-line)); }
.dm-row.fin .dm-bar i { background: linear-gradient(90deg, #b8402a, #ff8a5a); }
.dm-row.fin .dm-name { color: #ffd0b8; }
.dm-val { font-family: var(--ui-num); font-size: 15px; text-align: right; color: #f2f4f8; }
.dm-pct { font-family: var(--ui-num); font-size: 13px; text-align: right; color: #9aa1ad; }
.dm-empty { text-align: center; font-size: 13px; color: #8a909c; padding: 14px 0; }
.sinfo { z-index: 13; display: grid; place-items: center; padding: 16px; background: rgba(3, 4, 7, 0.72); overflow-y: auto; }
.sinfo.hidden { display: none; }
.sinfo-panel { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.si-top { display: flex; align-items: center; gap: 12px; }
.gi-si { width: 74px; height: 52px; flex: none; }
.gi-si.gi-p { width: 52px; height: 52px; padding: 8px; }
.si-name { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; }
.si-sub { font-size: 12px; color: #aab0bb; margin-top: 3px; letter-spacing: 0.06em; }
.si-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.si-tag { font-size: 12px; font-weight: 700; padding: 3px 9px; color: #dfe9d0; background: rgba(120, 200, 120, 0.14); box-shadow: inset 0 0 0 1px rgba(140, 220, 140, 0.35); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.si-tag.main { color: #120c04; background: var(--tc, var(--ui-line)); box-shadow: none; }
.si-tag.neg { color: #f1c9c9; background: rgba(220, 90, 90, 0.14); box-shadow: inset 0 0 0 1px rgba(230, 110, 110, 0.35); }
.si-sec { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: rgba(255, 255, 255, 0.045); border-left: 2px solid rgba(244, 197, 66, 0.5); }
.si-h { font-size: 12px; font-weight: 800; letter-spacing: 0.3em; color: var(--ui-line); }
.si-lvs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.si-lvs li { opacity: 0.5; }
.si-lvs li.done { opacity: 0.8; }
.si-lvs li.cur { opacity: 1; padding: 6px 8px; margin: 0 -8px; background: rgba(244, 197, 66, 0.1); box-shadow: inset 2px 0 0 var(--ui-line); }
.si-lvn { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: #fff; }
.si-lvn b { font-family: var(--ui-num); font-size: 14px; color: var(--ui-line); min-width: 2.2em; }
.si-lvn em { font-style: normal; font-size: 11px; padding: 1px 6px; color: #1a1206; background: var(--ui-line); letter-spacing: 0.1em; }
.si-lvs p, .si-desc { margin: 3px 0 0; font-size: 12.5px; line-height: 1.6; color: #d4d8e0; }
.si-evo { font-size: 15px; font-weight: 800; color: #ffd0b8; letter-spacing: 0.04em; }
.si-evo.on { color: #ffb070; text-shadow: 0 0 10px rgba(255, 140, 60, 0.6); }
.si-req { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #9aa1ad; }
.si-req li { display: flex; align-items: center; gap: 5px; }
.si-req li::before { content: ''; width: 9px; height: 9px; flex: none; box-shadow: inset 0 0 0 1.5px #6b717c; transform: rotate(45deg); margin-right: 3px; }
.si-req li.ok { color: #e9f6dc; }
.si-req li.ok::before { background: #7ee07a; box-shadow: none; }
.si-ok { font-size: 12.5px; color: #ffcf8a; }
.si-note { font-size: 12.5px; color: #8a909c; }
.si-close { margin-top: 2px; }
/* 傷害統計：名稱和數字一行、長條在下面一整行（招式名很長，不會被截掉） */
.dm-row { grid-template-columns: 1.4em minmax(0, 1fr) auto 3.6em; grid-template-areas: "rk nm vl pc" "rk br br br"; row-gap: 3px; padding: 3px 0; }
.dm-rank { grid-area: rk; align-self: start; padding-top: 1px; }
.dm-name { grid-area: nm; }
.dm-name > span { white-space: normal; }
.dm-val { grid-area: vl; }
.dm-pct { grid-area: pc; }
.dm-bar { grid-area: br; height: 6px; }

/* ==========================================================================
   漫畫風格（2026-10-31 使用者：暫停介面很 AI、沒有漫畫感）——暫停選單、招式詳細資訊
   白紙底、黑色粗墨線、硬陰影（像漫畫分格）、網點、集中線背景；強調色用海賊王的紅
   只套用在 .manga 底下，其他畫面維持原樣
   ========================================================================== */
.manga {
  --ink: #141210; --paper: #f8f3e8; --paper2: #efe7d6; --red: #d6262c; --mark: #ffe14a;
  --tone: radial-gradient(circle, rgba(20, 18, 16, 0.32) 1px, transparent 1.3px) 0 0 / 5px 5px;
  --tone-dense: radial-gradient(circle, rgba(20, 18, 16, 0.55) 1.2px, transparent 1.5px) 0 0 / 4px 4px;
  --serif: 'Noto Serif TC', 'Yu Mincho', 'PMingLiU', serif;
}
/* 背景：暗下來＋集中線 */
#pause.manga, #skill-info.manga {
  background:
    repeating-conic-gradient(from 0deg at 50% 40%, rgba(255, 255, 255, 0.07) 0deg 0.8deg, transparent 0.8deg 5deg),
    radial-gradient(ellipse at 50% 40%, rgba(30, 28, 26, 0.55), rgba(6, 6, 8, 0.9));
}
/* 面板：白紙＋粗墨線框＋硬陰影；拿掉 DOOM 風格的切角和描邊 */
.manga .panel, .manga .btn, .manga .build-row {
  clip-path: none; isolation: auto; background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
.manga .panel::before, .manga .btn::before, .manga .build-row::before, .manga .panel::after { display: none; }
.manga .panel { padding: 18px 16px 16px; border-width: 3.5px; box-shadow: 8px 8px 0 var(--ink);
  background: linear-gradient(135deg, transparent 0 82%, rgba(20, 18, 16, 0.08) 82%), var(--paper); }
/* 網點裝飾：面板右上角一塊斜的網點 */
.manga .panel { position: relative; }
.manga #pause-build, .manga .ptabs, .manga .dmg-table, .manga .vol-box, .manga .btn { position: relative; z-index: 1; }
/* 標題：黑底白字的斜框（漫畫的旁白框）＋紅色色塊 */
.manga .panel-title { display: block; width: fit-content; margin: 0 auto 12px; padding: 4px 22px 6px; font-family: var(--serif); font-weight: 900; font-size: 26px;
  letter-spacing: 0.3em; text-indent: 0.3em; text-transform: none; color: #fff; background: var(--ink); text-shadow: none;
  transform: rotate(-2deg) skewX(-6deg); box-shadow: 5px 5px 0 var(--red); }
.manga .panel-title::before, .manga .panel-title::after { display: none; }
/* 分頁 */
.manga .ptabs { gap: 8px; margin-bottom: 12px; }
.manga .ptab { clip-path: none; font-family: var(--serif); font-weight: 900; font-size: 15px; letter-spacing: 0.2em; color: var(--ink); background: var(--paper);
  border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: skewX(-8deg); transition: transform 0.1s, box-shadow 0.1s; }
.manga .ptab.on { color: #fff; background: var(--ink); box-shadow: 3px 3px 0 var(--red); }
.manga .ptab:active { transform: skewX(-8deg) translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* 夥伴列 */
.manga .build { gap: 10px; }
.manga .build-row { padding: 10px; border-width: 2.5px; box-shadow: 4px 4px 0 var(--ink); background: var(--paper); }
.manga .build-row:first-child { background: linear-gradient(90deg, transparent 0 70%, transparent 70%), var(--paper); }
.manga .build-face { width: 46px; height: 46px; border: 2.5px solid var(--ink); background: var(--paper2); }
.manga .build-name { font-family: var(--serif); font-weight: 900; font-size: 17px; color: var(--ink); }
.manga .build-name small { font-family: var(--font); font-size: 11px; font-weight: 800; color: #fff; background: var(--red); padding: 1px 6px; margin-left: 8px; vertical-align: 2px; }
.manga .build-skills { gap: 6px 10px; }
.manga .bs { color: var(--ink); font-size: 13px; font-weight: 700; }
.manga .bs.off { opacity: 0.38; }
.manga .bs-btn { border-radius: 0; padding: 3px 6px; margin: -3px -6px; }
.manga .bs-btn:hover, .manga .bs-btn:focus-visible { background: linear-gradient(transparent 55%, var(--mark) 55%); }   /* 螢光筆畫線 */
.manga .bs-btn:active { background: linear-gradient(transparent 40%, var(--mark) 40%); }
.manga .bs .pips { gap: 3px; }
.manga .bs .pips i { width: 8px; height: 8px; border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); transform: rotate(45deg) scale(0.8); }
.manga .bs .pips i.on { background: var(--red); box-shadow: inset 0 0 0 1.5px var(--ink); }
.manga .pair { font-size: 10px; font-weight: 900; border-radius: 50%; width: 17px; height: 17px; display: inline-grid; place-items: center; padding: 0; color: var(--ink); border: 1.5px solid var(--ink); }
.manga .pair.ok { color: #fff; background: var(--ink); border-color: var(--ink); }
.manga .star { color: var(--red); text-shadow: none; }
.manga .gi { color: var(--ink); }
.manga .gi-p svg { filter: none; }
.manga .gi-art { clip-path: none; box-shadow: 0 0 0 1.5px var(--ink); }
.manga .gi-art::after { display: none; }
.manga .gi-seal { clip-path: none; background: var(--ink); color: #fff; }
.manga .build-tip { color: #6b6458; font-size: 11.5px; font-weight: 700; }
.manga .build-tip::before { content: '▶ '; color: var(--red); }
.manga .kw { color: var(--red); font-weight: 900; }
/* 傷害統計 */
.manga .dmg-table { clip-path: none; background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 12px; gap: 8px; }
.manga .dm-head { color: var(--ink); font-weight: 800; border-bottom: 2.5px solid var(--ink); padding-bottom: 8px; }
.manga .dm-head b { font-family: var(--serif); font-weight: 900; font-size: 22px; color: var(--red); }
.manga .dm-row { color: var(--ink); }
.manga .dm-rank { font-family: var(--serif); font-weight: 900; font-size: 13px; color: #fff; background: var(--ink); width: 1.6em; height: 1.6em; display: grid; place-items: center; transform: skewX(-8deg); padding: 0; }
.manga .dm-head + .dm-row .dm-rank { background: var(--red); }
.manga .dm-name { font-weight: 800; }
.manga .dm-row.fin .dm-name { color: var(--red); }
.manga .dm-bar { height: 10px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.manga .dm-bar i { background: var(--tone-dense), var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }   /* 網點長條 */
.manga .dm-head + .dm-row .dm-bar i, .manga .dm-row.fin .dm-bar i { background: var(--ink); }
.manga .dm-val { font-family: var(--serif); font-weight: 900; font-size: 16px; color: var(--ink); }
.manga .dm-pct { color: #6b6458; font-weight: 700; font-family: var(--font); font-size: 12px; }
.manga .dm-empty { color: #6b6458; font-weight: 700; }
/* 聲音 */
.manga .vol-box { clip-path: none; background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.manga .vol-head { font-family: var(--serif); font-weight: 900; font-size: 15px; letter-spacing: 0.3em; color: var(--ink); border-bottom: 2.5px solid var(--ink); }
.manga .vol-row { color: var(--ink); font-weight: 800; }
.manga .vol-val { font-family: var(--serif); font-weight: 900; color: var(--ink); }
.manga input.vol::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--ink) var(--p), transparent var(--p)), var(--tone); box-shadow: inset 0 0 0 1.5px var(--ink); }
.manga input.vol::-webkit-slider-thumb { width: 16px; height: 22px; margin-top: -8px; clip-path: none; background: var(--red); border: 2.5px solid var(--ink); }
.manga input.vol::-moz-range-track { height: 6px; background: var(--paper2); border: 1.5px solid var(--ink); }
.manga input.vol::-moz-range-progress { height: 6px; background: var(--ink); }
.manga input.vol::-moz-range-thumb { width: 14px; height: 20px; background: var(--red); border: 2.5px solid var(--ink); border-radius: 0; }
/* 按鈕：白紙＋墨線＋硬陰影；按下去往右下沉 */
.manga .btn { min-height: 46px; font-family: var(--serif); font-weight: 900; font-size: 16px; letter-spacing: 0.15em; color: var(--ink); border-width: 2.5px; box-shadow: 4px 4px 0 var(--ink); transition: transform 0.08s, box-shadow 0.08s; }
.manga .btn:hover, .manga .btn:focus-visible { background: linear-gradient(transparent 60%, var(--mark) 60%), var(--paper); }
.manga .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.manga .btn.primary { color: #fff; background: var(--red); font-size: 20px; letter-spacing: 0.35em; text-shadow: 2px 2px 0 var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.manga .btn.primary:hover, .manga .btn.primary:focus-visible { background: #e8343a; }
.manga .btn.primary::after { content: '！'; letter-spacing: 0; margin-left: 0.1em; }
.manga .btn .gi { color: var(--ink); }
.manga .vol-btns .btn { font-size: 14px; box-shadow: 3px 3px 0 var(--ink); }
/* ---------- 招式詳細資訊 ---------- */
.manga .sinfo-panel { gap: 12px; }
.manga .si-top { padding-bottom: 10px; border-bottom: 3px solid var(--ink); }
.manga .gi-si { width: 82px; height: 58px; box-shadow: 0 0 0 2.5px var(--ink), 4px 4px 0 2.5px var(--ink); }
.manga .gi-si.gi-p { width: 58px; height: 58px; background: var(--paper2); }
.manga .si-name { font-family: var(--serif); font-weight: 900; font-size: 22px; color: var(--ink); letter-spacing: 0.06em; }
.manga .si-sub { color: #4a443a; font-weight: 700; font-size: 12.5px; }
.manga .si-tag { clip-path: none; font-weight: 800; color: var(--ink); background: var(--paper); box-shadow: none; border: 2px solid var(--ink); padding: 2px 8px; transform: skewX(-8deg); }
.manga .si-tag.main { color: #fff; background: var(--ink); }
.manga .si-tag.neg { color: var(--red); border-color: var(--red); background: var(--paper); }
.manga .si-sec { position: relative; padding: 18px 12px 12px; margin-top: 8px; background: var(--paper); border: 2.5px solid var(--ink); border-left-width: 2.5px; box-shadow: 4px 4px 0 var(--ink); }
.manga .si-h { position: absolute; top: -12px; left: 10px; padding: 2px 10px; font-family: var(--serif); font-weight: 900; font-size: 13px; letter-spacing: 0.25em; color: #fff; background: var(--ink); transform: skewX(-8deg); }
.manga .si-lvs { gap: 10px; }
.manga .si-lvs li { opacity: 0.42; }
.manga .si-lvs li.done { opacity: 0.75; }
.manga .si-lvs li.cur { opacity: 1; margin: 0 -6px; padding: 8px 8px; background: var(--tone), var(--paper); box-shadow: inset 0 0 0 2px var(--ink); }
.manga .si-lvn { color: var(--ink); font-family: var(--serif); font-weight: 900; font-size: 15px; }
.manga .si-lvn b { font-family: var(--serif); color: var(--red); font-size: 14px; }
/* 「目前」：紅色爆炸貼紙 */
.manga .si-lvn em { color: #fff; background: var(--red); padding: 4px 9px; font-size: 11px; font-weight: 900; letter-spacing: 0.1em; transform: rotate(-6deg);
  clip-path: polygon(50% 0, 62% 18%, 84% 8%, 80% 32%, 100% 38%, 84% 54%, 98% 74%, 74% 74%, 70% 100%, 52% 82%, 32% 100%, 28% 76%, 4% 80%, 16% 58%, 0 40%, 20% 32%, 14% 8%, 38% 18%); }
.manga .si-lvs p, .manga .si-desc { color: #2a2620; font-weight: 600; }
.manga .si-evo { font-family: var(--serif); font-weight: 900; font-size: 17px; color: var(--ink); }
.manga .si-evo.on { color: var(--red); text-shadow: none; }
.manga .si-req { color: #4a443a; font-weight: 700; }
.manga .si-req li::before { width: 12px; height: 12px; box-shadow: inset 0 0 0 2px var(--ink); transform: none; margin-right: 2px; }
.manga .si-req li.ok { color: var(--ink); }
.manga .si-req li.ok::before { background: var(--red); box-shadow: inset 0 0 0 2px var(--ink); }
.manga .si-ok { color: var(--red); font-weight: 800; }
.manga .si-note { color: #6b6458; font-weight: 700; }
.manga .si-lvs li.cur { background: radial-gradient(circle, rgba(20, 18, 16, 0.16) 1px, transparent 1.3px) 0 0 / 5px 5px, var(--paper); }
.manga .build-face.mf { width: 54px; height: 54px; border-radius: 0; border-width: 2.5px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-3deg); }   /* 漫畫頭像：方形分格、微微傾斜 */

/* ---------- 懸賞令（暫停選單的夥伴欄，2026-10-31 使用者：做成懸賞風格）----------
   泛黃舊紙、WANTED 大字、照片框、DEAD OR ALIVE、羅馬拼音名字、懸賞金（฿ 數字 -）、右下角 MARINE */
.wanted { --wp: #e8d5a6; --wink: #3a2a18; flex: none; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 7px 5px;
  color: var(--wink); text-align: center; position: relative; transform: rotate(-2.5deg);
  background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(110, 70, 20, 0.35) 100%),
    repeating-linear-gradient(8deg, rgba(120, 80, 30, 0.05) 0 2px, transparent 2px 6px),
    var(--wp);
  border: 1.5px solid #6b5230; box-shadow: 3px 3px 0 var(--ink, #141210), inset 0 0 0 3px var(--wp), inset 0 0 0 4px rgba(58, 42, 24, 0.55); }
.wanted b { font-weight: 900; line-height: 1; }
.w-t { font-family: 'Playfair Display', 'Noto Serif TC', serif; font-size: 25px; letter-spacing: 0.02em; transform: scaleY(1.15); margin: 2px 0 3px; }
.w-ph { display: block; width: 100%; aspect-ratio: 1 / 0.86; overflow: hidden; border: 2px solid var(--wink); background: #cbb88a; }
.w-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: sepia(0.18) contrast(1.05); }
.w-doa { font-family: 'Playfair Display', serif; font-size: 8.5px; letter-spacing: 0.08em; margin-top: 3px; }
.w-nm { font-family: 'Playfair Display', serif; font-size: 12px; letter-spacing: 0.02em; transform: scaleY(1.2); margin: 2px 0 1px; white-space: nowrap; }
.w-by { font-family: 'Playfair Display', serif; font-size: 13px; letter-spacing: 0.04em; display: flex; align-items: baseline; gap: 2px; }
.w-by i { font-style: normal; font-size: 12px; }
.w-dash { margin-left: 1px; }
.w-mr { font-family: 'Playfair Display', serif; font-size: 6.5px; letter-spacing: 0.12em; align-self: flex-end; margin-top: 1px; opacity: 0.85; }
.manga .build-row:has(.wanted) { align-items: center; gap: 14px; padding: 12px 10px 12px 12px; }
.manga .build-row .build-main { gap: 6px; }
.manga .build-row:has(.wanted) .build-skills { flex-direction: column; align-items: flex-start; gap: 7px; }
/* 懸賞令旁的招式：名稱不斷行，放不下時等級菱形換到下一行；手機上通緝令縮小 */
.manga .build-row:has(.wanted) .bs-btn { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; row-gap: 2px; }
.manga .build-row:has(.wanted) .bs-btn > :not(.pips):not(.pair) { flex: none; }
.manga .build-row:has(.wanted) .bs-btn { white-space: nowrap; }
@media (max-width: 480px) {
  .wanted { width: 96px; padding: 5px 5px 4px; }
  .w-t { font-size: 20px; }
  .w-nm { font-size: 9.5px; }
  .w-by { font-size: 11px; }
  .w-doa { font-size: 7px; }
  .manga .build-row:has(.wanted) { gap: 10px; padding: 10px 8px; }
  .manga .build-row:has(.wanted) .bs { font-size: 12px; }
}

/* ==========================================================================
   懸賞令風格（2026-10-31 使用者：海賊的 UI 介面改成懸賞風格）
   海賊王角色在場時，暫停選單＋招式詳細資訊加上 .wp：泛黃舊紙、深褐墨水、通緝令的雙線框、襯線大字、紅色印章
   （沿用 .manga 的結構，只換材質和字；火影角色維持黑白漫畫風）
   ========================================================================== */
.manga.wp {
  --ink: #3a2a18; --paper: #ead7a8; --paper2: #dcc391; --red: #a52a1f; --mark: rgba(165, 42, 31, 0.22);
  --tone: radial-gradient(circle, rgba(58, 42, 24, 0.3) 1px, transparent 1.3px) 0 0 / 5px 5px;
  --tone-dense: radial-gradient(circle, rgba(58, 42, 24, 0.5) 1.2px, transparent 1.5px) 0 0 / 4px 4px;
  --wserif: 'Playfair Display', 'Noto Serif TC', 'Yu Mincho', serif;
}
#pause.manga.wp, #skill-info.manga.wp {
  background:
    repeating-conic-gradient(from 0deg at 50% 40%, rgba(255, 220, 160, 0.06) 0deg 0.8deg, transparent 0.8deg 5deg),
    radial-gradient(ellipse at 50% 40%, rgba(50, 34, 18, 0.6), rgba(10, 7, 4, 0.92));
}
/* 舊紙：中間亮、邊緣焦黃、紙纖維 */
.manga.wp .panel {
  background:
    radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(120, 76, 24, 0.38) 100%),
    repeating-linear-gradient(7deg, rgba(120, 80, 30, 0.045) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-83deg, rgba(90, 60, 20, 0.03) 0 1px, transparent 1px 9px),
    var(--paper);
  border: 2px solid #5b4326; box-shadow: 0 0 0 5px var(--paper), 0 0 0 7px #5b4326, 10px 12px 0 7px rgba(0, 0, 0, 0.55);
  margin: 7px;
}
.manga.wp .build-row, .manga.wp .dmg-table, .manga.wp .vol-box, .manga.wp .si-sec {
  background: rgba(255, 246, 222, 0.38); border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 3px rgba(234, 215, 168, 0.9), inset 0 0 0 4px rgba(58, 42, 24, 0.45);
}
/* 標題：像 WANTED 那樣的大襯線字，上下各一條粗細雙線 */
.manga.wp .panel-title { color: var(--ink); background: none; box-shadow: none; transform: none; font-family: var(--serif); font-size: 32px; letter-spacing: 0.4em; text-indent: 0.4em;
  padding: 6px 18px 8px; border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); margin-bottom: 14px; }
.manga.wp .ptab { font-family: var(--serif); color: var(--ink); background: transparent; border: 1.5px solid var(--ink); box-shadow: none; transform: none; }
.manga.wp .ptab.on { color: var(--paper); background: var(--ink); box-shadow: none; }
.manga.wp .ptab:active { transform: translate(1px, 1px); box-shadow: none; }
.manga.wp .build-name small, .manga.wp .vol-head + * small { background: var(--red); color: var(--paper); }
.manga.wp .bs-btn:hover, .manga.wp .bs-btn:focus-visible { background: linear-gradient(transparent 58%, var(--mark) 58%); }
.manga.wp .bs .pips i.on { background: var(--red); }
.manga.wp .pair.ok { color: var(--paper); }
.manga.wp .gi-art { box-shadow: 0 0 0 1.5px var(--ink); filter: sepia(0.25); }
.manga.wp .wanted { box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 3px var(--wp), inset 0 0 0 4px rgba(58, 42, 24, 0.55); }
.manga.wp .build-tip, .manga.wp .dm-pct, .manga.wp .si-note { color: #6e5636; }
.manga.wp .build-tip::before { color: var(--red); }
/* 數字用通緝令的襯線體 */
.manga.wp .dm-head b, .manga.wp .dm-val, .manga.wp .vol-val { font-family: var(--wserif); }
.manga.wp .dm-head { border-bottom: 3px double var(--ink); }
.manga.wp .dm-rank { background: var(--ink); color: var(--paper); transform: none; border-radius: 50%; }
.manga.wp .dm-head + .dm-row .dm-rank { background: var(--red); }
.manga.wp .dm-bar { background: transparent; }
/* 聲音 */
.manga.wp .vol-head { border-bottom: 3px double var(--ink); }
.manga.wp input.vol::-webkit-slider-thumb { background: var(--red); border-color: var(--ink); }
/* 按鈕：舊紙＋細墨線；「繼續」像紅色印章（圓角、雙線、微微傾斜） */
.manga.wp .btn { background: rgba(255, 246, 222, 0.45); border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 3px rgba(234, 215, 168, 0.9), inset 0 0 0 4px rgba(58, 42, 24, 0.4), 3px 3px 0 rgba(0, 0, 0, 0.35); color: var(--ink); }
.manga.wp .btn:hover, .manga.wp .btn:focus-visible { background: linear-gradient(transparent 62%, var(--mark) 62%), rgba(255, 246, 222, 0.45); }
.manga.wp .btn:active { transform: translate(2px, 2px); box-shadow: inset 0 0 0 3px rgba(234, 215, 168, 0.9), inset 0 0 0 4px rgba(58, 42, 24, 0.4), 1px 1px 0 rgba(0, 0, 0, 0.35); }
.manga.wp .btn.primary { color: var(--red); background: rgba(165, 42, 31, 0.08); border: 3px solid var(--red); border-radius: 6px; text-shadow: none;
  box-shadow: inset 0 0 0 2px rgba(234, 215, 168, 0.9), inset 0 0 0 3.5px var(--red); transform: rotate(-1.2deg); font-size: 22px; }
.manga.wp .btn.primary:hover, .manga.wp .btn.primary:focus-visible { background: rgba(165, 42, 31, 0.16); }
.manga.wp .btn.primary:active { transform: rotate(-1.2deg) translate(2px, 2px); }
.manga.wp .btn.primary::after { content: ''; }
/* 招式詳細資訊 */
.manga.wp .si-top { border-bottom: 3px double var(--ink); }
.manga.wp .gi-si { box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px rgba(0, 0, 0, 0.3); filter: sepia(0.2); }
.manga.wp .si-h { background: var(--ink); color: var(--paper); transform: none; }
.manga.wp .si-tag { transform: none; border-width: 1.5px; background: transparent; }
.manga.wp .si-tag.main { background: var(--ink); color: var(--paper); }
.manga.wp .si-lvs li.cur { background: rgba(255, 246, 222, 0.6); box-shadow: inset 0 0 0 1.5px var(--ink), inset 0 0 0 3px rgba(234, 215, 168, 0.9), inset 0 0 0 4px rgba(58, 42, 24, 0.4); }
/* 「目前」：紅色圓形印章 */
.manga.wp .si-lvn em { clip-path: none; background: transparent; color: var(--red); border: 2px solid var(--red); border-radius: 50%; padding: 3px 6px; transform: rotate(-12deg); box-shadow: inset 0 0 0 1.5px rgba(234, 215, 168, 0.9), inset 0 0 0 2.5px var(--red); }
.manga.wp .si-req li.ok::before { background: var(--red); }

/* ==========================================================================
   全介面主題（2026-10-31 使用者：其他畫面也改成懸賞風格；選火影就要火影風格）
   所有畫面（標題、開局選招、升級、寶箱、準備倒數、暫停、詳細資訊、結算）都加 .manga，再依角色加：
     .wp＝海賊王：懸賞令（舊紙、褐色墨水、雙線框、紅色印章、襯線大字）
     .nr＝火影：忍者卷軸（和紙、黑色毛筆字、上下卷軸木軸、紅色落款印、曉的紅雲）
   遊戲中的狀態列（HUD）用 body.theme-wp／body.theme-nr
   ========================================================================== */

/* ---------- 共用：卡片、統計格、倒數框等都改成紙＋墨線 ---------- */
.manga .card, .manga .sp-card, .manga .stats div, .manga .rd-box, .manga .howto, .manga .cr-reel {
  clip-path: none; isolation: auto; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
.manga .card::before, .manga .sp-card::before, .manga .stats div::before, .manga .rd-box::before, .manga .howto::before { display: none; }
/* 升級卡 */
.manga .card { transition: transform 0.1s, box-shadow 0.1s; }
.manga .card:hover, .manga .card:focus-visible { background: linear-gradient(transparent 0, transparent), var(--paper); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); border: 2px solid var(--ink); outline: none; }
.manga .card:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.manga .card .nm { font-family: var(--serif); font-weight: 900; font-size: 16px; color: var(--ink); }
.manga .card .ds { color: #2f271c; font-weight: 600; }
.manga .card .hint { color: #5d4d36; font-weight: 700; }
.manga .card .hint.ok { color: var(--red); }
.manga .card .who { clip-path: none; color: var(--paper); background: var(--ink); border-radius: 0; }
.manga .card .new { clip-path: none; color: #fff; background: var(--red); transform: rotate(-4deg); }
.manga .card .pips i { transform: rotate(45deg) scale(0.75); width: 10px; height: 10px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.manga .card .pips i.on { background: var(--red); box-shadow: inset 0 0 0 1.5px var(--ink); }
.manga .card.evo { background: linear-gradient(160deg, rgba(200, 40, 30, 0.14), transparent 60%), var(--paper); border: 3px solid var(--red); box-shadow: 5px 5px 0 var(--red); }
.manga .card.evo .nm { color: var(--red); }
.manga .gi-hud, .manga .card .gi { color: var(--ink); }
/* 開局選招卡 */
.manga .sp-card { padding: 0; }
.manga .sp-card:hover, .manga .sp-card:focus-visible { filter: none; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.manga .sp-art { clip-path: none; margin: 0; border-bottom: 2px solid var(--ink); }
.manga .sp-art img { filter: var(--art-filter, none); }
.manga .sp-art::after { display: none; }
.manga .sp-tag { clip-path: none; color: var(--paper); background: var(--ink); }
.manga .sp-no { color: #fff; text-shadow: 0 1px 2px #000; }
.manga .sp-body { margin-top: 0; padding: 8px 10px 10px; }
.manga .sp-name { font-family: var(--serif); color: var(--ink); text-shadow: none; font-size: 21px; }
.manga .sp-en { color: var(--red); }
.manga .sp-stats { border-top: 2px solid var(--ink); }
.manga .sp-row i { color: #5d4d36; font-weight: 700; }
.manga .sp-bar s { background: transparent; box-shadow: inset 0 0 0 1px rgba(40, 30, 20, 0.5); }
.manga .sp-bar s.on { background: var(--ink); box-shadow: none; }
.manga .sp-bar s.half { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.manga .sp-pc .pro { color: #2f5a2a; font-weight: 700; } .manga .sp-pc .pro::before { color: #2f7a2a; }
.manga .sp-pc .con { color: var(--red); font-weight: 700; } .manga .sp-pc .con::before { color: var(--red); }
.manga .sp-sub { color: #5d4d36; }
/* 結算 */
.manga .stats div { padding: 10px 8px; }
.manga .stats span { color: #5d4d36; font-weight: 800; }
.manga .stats b { font-family: var(--serif); font-weight: 900; color: var(--red); }
.manga .result-line { color: var(--ink); font-weight: 700; }
/* 準備倒數 */
#ready.manga { background: none; }
.manga .rd-box { padding: 16px 26px 18px; }
.manga .rd-num { font-family: var(--serif); color: var(--ink); text-shadow: 3px 3px 0 var(--red); }
.manga .rd-label { font-family: var(--serif); color: var(--ink); text-shadow: none; }
.manga .rd-bar { border-radius: 0; background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.manga .rd-fill { border-radius: 0; background: var(--red); }
/* 寶箱轉盤 */
.chest-ov.manga { background: radial-gradient(ellipse at 50% 40%, rgba(40, 30, 20, 0.55), rgba(6, 5, 4, 0.9)); }
.manga .cr-reel { background: var(--paper2); box-shadow: inset 0 8px 10px -8px rgba(0, 0, 0, 0.5), inset 0 -8px 10px -8px rgba(0, 0, 0, 0.5), 3px 3px 0 var(--ink); }
.manga .cr-reel.hit { box-shadow: 0 0 0 3px var(--red), 3px 3px 0 3px var(--ink); }
.manga .cr-miss { background: rgba(40, 30, 20, 0.35); }
.manga .cr-tier { font-family: var(--serif); color: var(--ink); text-shadow: none; }
.manga .cr-tier b { color: var(--red); font-family: var(--serif); }
.manga .cr-row { color: var(--ink); font-weight: 800; }
.manga .cr-row b { color: var(--red); }
/* 標題畫面：中間一張海報 */
#title.manga { background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.5)); }
.manga .title-wrap { padding: 18px 16px 16px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.55); }
.manga .kicker { color: #5d4d36; font-weight: 800; }
.manga h1 { color: var(--ink); text-shadow: none; -webkit-text-stroke: 0; }
.manga h1 span { color: var(--red); text-shadow: 3px 3px 0 var(--ink); }
.manga .sub { color: #2f271c; font-weight: 700; }
.manga .howto { background: rgba(255, 255, 255, 0.25); box-shadow: none; border-width: 1.5px; color: #2f271c; }
.manga .howto b { color: var(--red); }
.manga .best { color: #5d4d36; font-weight: 700; }
.manga .hp-chip { color: var(--ink); background: rgba(255, 255, 255, 0.3); border: 2px solid var(--ink); }
.manga .hp-chip.on { color: var(--paper); background: var(--ink); box-shadow: 3px 3px 0 var(--red); }
.manga .hp-chip img { border: 1.5px solid var(--ink); }

/* ---------- 懸賞令（.wp）的補充 ---------- */
.manga.wp .card, .manga.wp .sp-card, .manga.wp .stats div, .manga.wp .rd-box, .manga.wp .cr-reel { border-width: 1.5px; box-shadow: inset 0 0 0 3px rgba(234, 215, 168, 0.9), inset 0 0 0 4px rgba(58, 42, 24, 0.45), 3px 3px 0 rgba(0, 0, 0, 0.35); }
.manga.wp .card, .manga.wp .sp-card, .manga.wp .rd-box, .manga.wp .title-wrap {
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(120, 76, 24, 0.3) 100%), repeating-linear-gradient(7deg, rgba(120, 80, 30, 0.045) 0 2px, transparent 2px 7px), var(--paper); }
.manga.wp .title-wrap { border: 2px solid #5b4326; box-shadow: 0 0 0 5px var(--paper), 0 0 0 7px #5b4326, 10px 12px 0 7px rgba(0, 0, 0, 0.55); margin: 7px; }
.manga.wp h1 { font-family: var(--wserif); letter-spacing: 0.02em; border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); padding: 6px 0; }
.manga.wp .sp-art img { --art-filter: sepia(0.25) contrast(1.05); filter: sepia(0.25) contrast(1.05); }
.manga.wp .stats b, .manga.wp .rd-num { font-family: var(--wserif); }

/* ---------- 火影：忍者卷軸（.nr）---------- */
.manga.nr {
  --ink: #17110d; --paper: #f2e6c9; --paper2: #e4d2a8; --red: #b8141c; --mark: rgba(184, 20, 28, 0.2);
  --tone: radial-gradient(circle, rgba(23, 17, 13, 0.3) 1px, transparent 1.3px) 0 0 / 5px 5px;
  --tone-dense: radial-gradient(circle, rgba(23, 17, 13, 0.55) 1.2px, transparent 1.5px) 0 0 / 4px 4px;
  --brush: 'Potta One', 'Noto Serif TC', serif;
  --cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cpath d='M16 50c-9 0-13-9-7-15 3-3 7-4 10-3 1-10 11-16 20-12 5-10 18-12 25-5 7-8 20-6 23 4 10-2 19 6 16 15 8 1 12 10 6 16-3 3-7 3-11 3H16z' fill='%23c0121c' stroke='%23fff' stroke-width='4.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 背景：暗下來＋淡淡的紅雲 */
#pause.manga.nr, #skill-info.manga.nr, #levelup.manga.nr, #startpick.manga.nr, #result.manga.nr, .chest-ov.manga.nr {
  background: var(--cloud) 8% 14% / 150px no-repeat, var(--cloud) 92% 78% / 190px no-repeat, var(--cloud) 78% 8% / 90px no-repeat,
    radial-gradient(ellipse at 50% 40%, rgba(40, 10, 12, 0.55), rgba(5, 3, 4, 0.93));
}
/* 卷軸：和紙、上下深色木軸 */
.manga.nr .panel, .manga.nr .title-wrap {
  background: repeating-linear-gradient(90deg, rgba(120, 90, 50, 0.04) 0 1px, transparent 1px 4px), radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(120, 80, 30, 0.22) 100%), var(--paper);
  border: none; border-top: 12px solid #2b1a12; border-bottom: 12px solid #2b1a12;
  box-shadow: 0 -3px 0 #6b3a1e inset, 0 3px 0 #6b3a1e inset, 0 0 0 1.5px #2b1a12, 10px 10px 0 rgba(0, 0, 0, 0.55); margin: 6px 0;
}
/* 卷軸角落的紅雲 */
.manga.nr .panel::after { display: block; content: ''; position: absolute; right: 10px; bottom: 8px; width: 84px; height: 46px; inset: auto 10px 8px auto; background: var(--cloud) center / contain no-repeat; opacity: 0.9; pointer-events: none; z-index: 0; }
/* 標題：毛筆字＋紅色落款印「曉」 */
.manga.nr .panel-title, .manga.nr h1 { font-family: var(--brush); font-weight: 400; color: var(--ink); background: none; box-shadow: none; transform: none; letter-spacing: 0.25em; text-indent: 0.25em; }
.manga.nr .panel-title { font-size: 30px; display: flex; align-items: center; justify-content: center; gap: 10px; width: auto; }
.manga.nr .panel-title::after { display: grid; content: '曉'; place-items: center; flex: none; max-width: none; width: 30px; height: 30px; font-family: var(--serif); font-size: 18px; letter-spacing: 0; text-indent: 0;
  color: #fff; background: var(--red); border-radius: 3px; transform: rotate(6deg); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.manga.nr h1 span { color: var(--red); text-shadow: 3px 3px 0 var(--ink); }
.manga.nr .ptab { font-family: var(--brush); font-weight: 400; transform: none; border: 2px solid var(--ink); box-shadow: none; background: transparent; }
.manga.nr .ptab.on { background: var(--ink); color: var(--paper); box-shadow: inset 0 -4px 0 var(--red); }
.manga.nr .build-row, .manga.nr .dmg-table, .manga.nr .vol-box, .manga.nr .si-sec, .manga.nr .card, .manga.nr .sp-card, .manga.nr .stats div, .manga.nr .rd-box, .manga.nr .cr-reel {
  background: rgba(255, 252, 240, 0.5); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.manga.nr .si-h, .manga.nr .vol-head, .manga.nr .si-name, .manga.nr .build-name, .manga.nr .card .nm, .manga.nr .sp-name, .manga.nr .rd-label, .manga.nr .cr-tier { font-family: var(--brush); font-weight: 400; }
.manga.nr .si-h { background: var(--ink); color: var(--paper); transform: none; }
.manga.nr .si-tag { transform: none; border-radius: 2px; }
.manga.nr .si-tag.main { background: var(--red); border-color: var(--red); color: #fff; }
/* 「目前」：紅色方形落款印 */
.manga.nr .si-lvn em { clip-path: none; border-radius: 2px; background: var(--red); color: #fff; transform: rotate(-6deg); padding: 3px 7px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.manga.nr .si-lvs li.cur { background: rgba(255, 252, 240, 0.7); box-shadow: inset 3px 0 0 var(--red), inset 0 0 0 1.5px var(--ink); }
.manga.nr .dm-rank { transform: none; border-radius: 2px; }
.manga.nr .dm-head + .dm-row .dm-bar i, .manga.nr .dm-row.fin .dm-bar i { background: var(--red); }
/* 主要按鈕：黑底＋紅雲（曉的外袍）；一般按鈕：和紙＋墨線 */
.manga.nr .btn { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-family: var(--brush); font-weight: 400; background: rgba(255, 252, 240, 0.55); }
.manga.nr .btn.primary { color: #fff; text-shadow: none; border: 2px solid #000; background: var(--cloud) right 10px center / 70px no-repeat, var(--cloud) left 8px center / 44px no-repeat, #121014; box-shadow: 4px 4px 0 var(--red); transform: none; border-radius: 0; font-size: 22px; }
.manga.nr .btn.primary:hover, .manga.nr .btn.primary:focus-visible { background: var(--cloud) right 10px center / 70px no-repeat, var(--cloud) left 8px center / 44px no-repeat, #24181c; }
.manga.nr .btn.primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--red); }
.manga.nr .btn.primary::after { content: ''; }
.manga.nr .hp-chip.on { box-shadow: 3px 3px 0 var(--red); }
.manga.nr .card.evo { border-color: var(--red); box-shadow: 4px 4px 0 var(--red); }

/* ---------- 遊戲中的狀態列（HUD）----------
   懸賞：舊紙小牌＋褐色墨線；火影：和紙小牌＋黑墨線、紅色 */
body.theme-wp { --hud-paper: #ead7a8; --hud-ink: #3a2a18; --hud-red: #a52a1f; --hud-font: 'Playfair Display', 'Noto Serif TC', serif; }
body.theme-nr { --hud-paper: #f2e6c9; --hud-ink: #17110d; --hud-red: #b8141c; --hud-font: 'Potta One', 'Noto Serif TC', serif; }
body.theme-wp .timer, body.theme-nr .timer { padding: 1px 12px 2px; color: var(--hud-ink); font-family: var(--hud-font); font-weight: 900; font-size: 22px; letter-spacing: 0.06em; text-shadow: none;
  background: var(--hud-paper); border: 2px solid var(--hud-ink); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
body.theme-wp .timer::before, body.theme-wp .timer::after, body.theme-nr .timer::before, body.theme-nr .timer::after { display: none; }
body.theme-wp .lv, body.theme-nr .lv { clip-path: none; color: var(--hud-paper); background: var(--hud-ink); border: 2px solid var(--hud-ink); font-family: var(--hud-font); }
body.theme-wp .lv::before, body.theme-nr .lv::before { display: none; }
body.theme-wp .hpbar, body.theme-nr .hpbar { clip-path: none; background: var(--hud-paper); box-shadow: none; border: 2px solid var(--hud-ink); }
body.theme-wp .hpfill, body.theme-nr .hpfill { background: var(--hud-red); }
body.theme-wp .hpbar span, body.theme-nr .hpbar span { color: #fff; text-shadow: 0 0 2px var(--hud-ink), 1px 1px 0 var(--hud-ink); }
body.theme-wp .xpbar, body.theme-nr .xpbar { clip-path: none; height: 8px; background: var(--hud-paper); box-shadow: none; border-bottom: 2px solid var(--hud-ink); }
body.theme-wp .xpfill, body.theme-nr .xpfill { background: var(--hud-ink); box-shadow: none; }
body.theme-nr .xpfill { background: var(--hud-red); }
body.theme-wp .right, body.theme-nr .right { gap: 6px; }
body.theme-wp .kills, body.theme-wp .berry, body.theme-nr .kills, body.theme-nr .berry { padding: 1px 8px; color: var(--hud-ink); background: var(--hud-paper); border: 2px solid var(--hud-ink); font-family: var(--hud-font); text-shadow: none; }
body.theme-wp .berry b, body.theme-nr .berry b, body.theme-wp .kills .gi, body.theme-nr .kills .gi { color: var(--hud-red); }
body.theme-wp .icon, body.theme-nr .icon { clip-path: none; color: var(--hud-ink); background: var(--hud-paper); border: 2px solid var(--hud-ink); border-radius: 0; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
body.theme-wp .icon::before, body.theme-nr .icon::before { display: none; }
body.theme-wp .portrait, body.theme-nr .portrait { border-radius: 0; border: 2px solid var(--hud-ink); background: var(--hud-paper); }
body.theme-wp .portrait.on, body.theme-nr .portrait.on { box-shadow: 2px 2px 0 var(--hud-red); }
body.theme-wp .skill, body.theme-nr .skill { clip-path: none; background: var(--hud-paper); border: 2px solid var(--hud-ink); border-radius: 0; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4); }
body.theme-wp .skill::before, body.theme-nr .skill::before { display: none; }
body.theme-wp .skill i, body.theme-nr .skill i { clip-path: none; background: var(--hud-red); color: #fff; border: 1.5px solid var(--hud-ink); font-family: var(--hud-font); }
body.theme-wp .skill .gi, body.theme-nr .skill .gi { color: var(--hud-ink); }
body.theme-wp .skill.evo, body.theme-nr .skill.evo { border-color: var(--hud-red); box-shadow: 2px 2px 0 var(--hud-red); }
/* 奧義按鈕：懸賞＝舊紙圓章；火影＝黑底紅雲 */
body.theme-wp .ult, body.theme-wp #btn-ult { background: radial-gradient(circle at 50% 45%, #f3e3bb, #d9bf86 75%); box-shadow: 0 0 0 3px var(--hud-ink), 0 0 0 6px #ead7a8, 0 0 0 7.5px var(--hud-ink), 3px 4px 0 7px rgba(0, 0, 0, 0.4); }
body.theme-wp .ult-label { color: var(--hud-ink); font-family: 'Noto Serif TC', serif; }
body.theme-wp .ult.ready, body.theme-wp #btn-ult.ready { background: radial-gradient(circle at 50% 45%, #e0483c, #a52a1f 75%); }
body.theme-wp .ult.ready .ult-label { color: #fff; }
body.theme-nr .ult, body.theme-nr #btn-ult { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cpath d='M16 50c-9 0-13-9-7-15 3-3 7-4 10-3 1-10 11-16 20-12 5-10 18-12 25-5 7-8 20-6 23 4 10-2 19 6 16 15 8 1 12 10 6 16-3 3-7 3-11 3H16z' fill='%23c0121c' stroke='%23fff' stroke-width='4.5' stroke-linejoin='round'/%3E%3C/svg%3E") center 68% / 64px no-repeat, #121014;
  box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--hud-red), 3px 4px 0 5px rgba(0, 0, 0, 0.45); }
body.theme-nr .ult-label { color: #fff; font-family: 'Potta One', serif; font-weight: 400; text-shadow: 0 1px 2px #000; }
body.theme-nr .ult.ready, body.theme-nr #btn-ult.ready { box-shadow: 0 0 0 3px #000, 0 0 0 5px #ff3b40, 0 0 22px 6px rgba(255, 40, 50, 0.7); }
body.theme-wp .ult-ring, body.theme-nr .ult-ring { background: conic-gradient(var(--hud-red) calc(var(--p, 0) * 1%), rgba(0, 0, 0, 0.25) 0); }
/* 奧義選單 */
body.theme-wp .fpick .fp-item, body.theme-nr .fpick .fp-item { clip-path: none; color: var(--hud-ink); background: var(--hud-paper); border: 2px solid var(--hud-ink); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
body.theme-wp .fpick .fp-item::before, body.theme-nr .fpick .fp-item::before { display: none; }
body.theme-wp .fpick .fp-item.on, body.theme-nr .fpick .fp-item.on, body.theme-wp .fpick .fp-item.hover, body.theme-nr .fpick .fp-item.hover { color: #fff; background: var(--hud-red); }
body.theme-wp .fpick-h, body.theme-nr .fpick-h { color: var(--hud-paper); text-shadow: 1px 1px 0 #000; }
/* 畫面中間的大字（出航！等） */
body.theme-wp .banner, body.theme-nr .banner { color: var(--hud-paper); -webkit-text-stroke: 2.5px var(--hud-ink); text-shadow: 4px 4px 0 var(--hud-red); font-family: 'Noto Serif TC', serif; }
body.theme-nr .banner { font-family: 'Potta One', 'Noto Serif TC', serif; font-weight: 400; }
/* 頭目血條 */
body.theme-wp .bosstrack, body.theme-nr .bosstrack { background: var(--hud-paper); border: 2px solid var(--hud-ink); border-radius: 0; box-shadow: none; clip-path: none; }
body.theme-wp .bossfill, body.theme-nr .bossfill { background: var(--hud-red); }
body.theme-wp .bossname, body.theme-nr .bossname { color: var(--hud-paper); text-shadow: 1px 1px 0 #000, 0 0 4px #000; font-family: 'Noto Serif TC', serif; font-weight: 900; }
/* 標題畫面：上下兩塊牌子，中間空出來讓角色露出來（整張海報會擋住站在中間的索隆） */
.manga .title-wrap, .manga.wp .title-wrap, .manga.nr .title-wrap { padding: 0; background: none; border: none; box-shadow: none; margin: 0; }
.manga .title-top, .manga .title-bottom { padding: 12px 14px; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); }
.manga.wp .title-top, .manga.wp .title-bottom {
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(120, 76, 24, 0.3) 100%), repeating-linear-gradient(7deg, rgba(120, 80, 30, 0.045) 0 2px, transparent 2px 7px), var(--paper);
  border: 2px solid #5b4326; box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px #5b4326, 8px 10px 0 6px rgba(0, 0, 0, 0.5); margin: 6px; }
.manga.nr .title-top, .manga.nr .title-bottom {
  background: repeating-linear-gradient(90deg, rgba(120, 90, 50, 0.04) 0 1px, transparent 1px 4px), var(--paper);
  border: none; border-top: 10px solid #2b1a12; border-bottom: 10px solid #2b1a12; box-shadow: 0 -3px 0 #6b3a1e inset, 0 3px 0 #6b3a1e inset, 0 0 0 1.5px #2b1a12, 8px 8px 0 rgba(0, 0, 0, 0.5); }
.manga .title-bottom { display: flex; flex-direction: column; gap: 10px; }
.manga h1 { margin: 4px 0; font-size: clamp(34px, 9vw, 52px); }
/* 開局選招：舊主題的 #startpick .sp-panel 比較優先，這裡用同樣的優先度蓋回紙的底色 */
#startpick.manga .sp-panel { border: 2px solid var(--ink); }
#startpick.manga.wp .sp-panel {
  background: radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(120, 76, 24, 0.38) 100%), repeating-linear-gradient(7deg, rgba(120, 80, 30, 0.045) 0 2px, transparent 2px 7px), var(--paper);
  border: 2px solid #5b4326; }
#startpick.manga.nr .sp-panel {
  background: repeating-linear-gradient(90deg, rgba(120, 90, 50, 0.04) 0 1px, transparent 1px 4px), radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(120, 80, 30, 0.22) 100%), var(--paper);
  border: none; border-top: 12px solid #2b1a12; border-bottom: 12px solid #2b1a12; }
/* 火影：奧義準備好＝深紅底＋紅雲、白字（不再沿用舊的橘色） */
body.theme-nr .ult.ready, body.theme-nr #btn-ult.ready { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cpath d='M16 50c-9 0-13-9-7-15 3-3 7-4 10-3 1-10 11-16 20-12 5-10 18-12 25-5 7-8 20-6 23 4 10-2 19 6 16 15 8 1 12 10 6 16-3 3-7 3-11 3H16z' fill='%23c0121c' stroke='%23fff' stroke-width='4.5' stroke-linejoin='round'/%3E%3C/svg%3E") center 68% / 64px no-repeat, radial-gradient(circle at 50% 40%, #5a0a10, #1a0306 75%); }
body.theme-nr .ult.ready .ult-label, body.theme-nr .ult.ready .ult-dots, body.theme-wp .ult.ready .ult-dots { color: #fff; }

/* ---------- 火影：手配帳（賓果手冊）的一頁 ---------- */
.wanted.bingo { --wp: #f2e6c9; --wink: #17110d; transform: rotate(-2deg);
  background: repeating-linear-gradient(90deg, rgba(120, 90, 50, 0.04) 0 1px, transparent 1px 4px), var(--wp);
  border: 2px solid var(--wink); border-left: 7px solid #2b1a12; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45); padding-left: 6px; }
.bingo .w-t { font-family: 'Potta One', 'Noto Serif TC', serif; font-weight: 400; font-size: 21px; letter-spacing: 0.15em; transform: none; margin: 1px 0 4px; }
.bingo .w-ph { border: 2px solid var(--wink); background: #222; }
.bingo .w-ph img { filter: none; object-position: 40% 40%; }
.bingo .w-doa { font-family: 'Noto Serif TC', serif; font-size: 9px; letter-spacing: 0.04em; margin-top: 4px; }
.bingo .w-nm { font-family: 'Potta One', 'Noto Serif TC', serif; font-weight: 400; font-size: 13px; transform: none; letter-spacing: 0.06em; margin: 3px 0 2px; }
.bingo .w-by { font-family: 'Noto Serif TC', serif; font-size: 14px; color: #b8141c; gap: 6px; align-items: center; }
.bingo .bg-kills { font-size: 9px; color: var(--wink); font-weight: 800; }
.bingo .bg-cloud { position: absolute; right: -10px; bottom: -8px; width: 46px; height: 25px; transform: rotate(-10deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cpath d='M16 50c-9 0-13-9-7-15 3-3 7-4 10-3 1-10 11-16 20-12 5-10 18-12 25-5 7-8 20-6 23 4 10-2 19 6 16 15 8 1 12 10 6 16-3 3-7 3-11 3H16z' fill='%23c0121c' stroke='%23fff' stroke-width='4.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.manga.nr .btn:not(.primary) { background: #f6ecd4; }   /* 不透明：卷軸角落的紅雲不會從按鈕後面透出來 */
.portrait img, .hp-chip img, .swap-face img, .hero-face img { object-fit: cover; object-position: 50% 35%; }   /* 漫畫頭像：臉放中間 */

/* ---------- 六道の辻：紅線十字路＋鋸齒弧形斬擊（2026-10-31 照第 525 集重做） ---------- */
.rkd-red { inset: 0; }
.rkd-red svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px #ff3a2a) drop-shadow(0 0 12px rgba(255, 20, 10, 0.85)) drop-shadow(0 0 30px rgba(220, 0, 0, 0.55)); }
.rkd-red polygon { fill: #ff2414; }
.rkd-red circle { stroke: #ff2414; }
/* 時間對準原聲的斬擊聲（音軌 7.74～8.25 秒，紅線在 7.7 秒出現）：橫線馬上劃過去，六條直線跟著聲音一條條劈下 */
.rkd-red .rkd-h { animation: rkdH 0.16s cubic-bezier(.2, .9, .3, 1) 0.02s both; }
.rkd-red .rkd-v { animation: rkdV 0.1s ease-out calc(0.1s + var(--i) * 0.065s) both; }
.rkd-ring { opacity: 0; animation: rkdRing 0.3s cubic-bezier(.2, 1.4, .4, 1) var(--d) both; }
.rkd-ring-b { animation: rkdSpin2 1.6s linear infinite; }
@keyframes rkdRing { from { opacity: 0; transform: scale(2.2) rotate(-60deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes rkdSpin2 { to { transform: rotate(360deg); } }
.rkd-bit { opacity: 0; animation: rkdBit 0.25s ease-out var(--d) forwards; }
.rkd-red.gone { transition: opacity 0.35s, filter 0.1s; opacity: 0; filter: brightness(2.2); }
.rkd-arc { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; overflow: visible;
  filter: drop-shadow(0 0 4px #7ff6ff) drop-shadow(0 0 16px rgba(80, 230, 255, 0.75));
  clip-path: inset(0 100% 0 0); animation: rkdArcIn 0.2s cubic-bezier(.2, .9, .3, 1) var(--d) forwards; }
.rkd-arc .j { fill: #f2ffff; stroke: #8ff6ff; stroke-width: 2; animation: rkdArcJ 1.9s linear var(--d) both; }
.rkd-arc .t { fill: none; stroke: #c8fbff; stroke-linecap: round; opacity: 0; animation: rkdArcT 1.9s linear var(--d) both; }
@keyframes rkdArcIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.rkd-arc.v { clip-path: inset(0 0 100% 0); animation-name: rkdArcInV; animation-duration: 0.14s; }
@keyframes rkdArcInV { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rkdArcJ { 0%, 40% { opacity: 1; } 62% { opacity: 0; } 100% { opacity: 0; } }
@keyframes rkdArcT { 0%, 35% { opacity: 0; } 50% { opacity: 1; } 80% { opacity: 0.9; } 100% { opacity: 0; } }

/* ==========================================================================
   少年漫畫雜誌風介面（body.uih；網址 ?ui=poster 換回懸賞令／卷軸風）
   2026-10-31 使用者：方向參考《UNITED SURVIVAL》，但不能長得一樣（怕侵權）→ 改成自己的「漫畫雜誌」風格：
     暖白紙＋黑墨線＋硬陰影（漫畫分格）；主色紅墨（海賊王）／橘（火影）；
     面板上緣是雜誌頁首的粗墨線＋細紅線（不用黃黑警戒斜紋）；標題是黑底白字的漫畫旁白框、微微傾斜、紅色偏移陰影；
     按鈕是正的直角框（不用斜切平行四邊形）；英數字用直立的 Dela Gothic One（不用斜體）；
     等級是紅色印章、計時是白字黑邊紅影、奧義集滿是紅底集中線
   ========================================================================== */
body.uih {
  --acc: #e0262d; --acc-hi: #f2453f; --acc-d: #a81519; --paper: #fbf6ea; --k: #141210;
  --hd: 'Dela Gothic One', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --cj: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --ht: radial-gradient(circle, rgba(20, 18, 16, 0.14) 1.1px, transparent 1.4px) 0 0 / 6px 6px;
  --rule: linear-gradient(var(--k) 0 7px, var(--paper) 7px 9px, var(--acc) 9px 12px, transparent 12px);
}
body.uih.acc-nr { --acc: #ee6a12; --acc-hi: #ff8a3a; --acc-d: #b24a06; }
body.uih .manga { --ink: #141210; --paper: #fbf6ea; --paper2: #f1ead8; --red: var(--acc); --mark: rgba(224, 38, 45, 0.25); --serif: var(--cj); --wserif: var(--hd); --brush: var(--cj); }

/* ---------- 背景：暗下來＋淡淡的集中線 ---------- */
body.uih #pause.manga, body.uih #skill-info.manga, body.uih #levelup.manga, body.uih #startpick.manga, body.uih #result.manga, body.uih #select.manga, body.uih .chest-ov.manga {
  background: repeating-conic-gradient(from 0deg at 50% 42%, rgba(255, 255, 255, 0.06) 0deg 0.7deg, transparent 0.7deg 4deg),
    radial-gradient(ellipse at 50% 42%, rgba(40, 30, 26, 0.5), rgba(8, 6, 6, 0.9));
}

/* ---------- 面板：暖白紙、粗墨線、硬陰影；上緣雜誌頁首的粗墨線＋細紅線；右下角一塊網點 ---------- */
body.uih .manga .panel, body.uih #startpick.manga .sp-panel, body.uih .manga .title-top, body.uih .manga .title-bottom {
  position: relative; isolation: isolate; clip-path: none; color: var(--k); background: var(--paper);
  border: 3px solid var(--k); border-radius: 2px; box-shadow: 7px 7px 0 var(--k); margin: 0; padding-top: 26px;
}
body.uih .manga .panel::before, body.uih #startpick.manga .sp-panel::before, body.uih .manga .title-top::before, body.uih .manga .title-bottom::before {
  display: block; content: ''; position: absolute; inset: 0 0 auto 0; height: 12px; z-index: 0; clip-path: none; background: var(--rule); border: none;
}
body.uih .manga .panel::after, body.uih .manga .title-top::after, body.uih .manga .title-bottom::after {
  display: block; content: ''; position: absolute; inset: auto 0 0 auto; width: 50%; height: 45%; z-index: -1; pointer-events: none;
  background: var(--ht); -webkit-mask: linear-gradient(315deg, #000 0, transparent 70%); mask: linear-gradient(315deg, #000 0, transparent 70%);
}
/* 標題：黑底白字的漫畫旁白框，微微傾斜，紅色偏移陰影 */
body.uih .manga .panel-title {
  display: block; width: fit-content; max-width: 92%; margin: 2px auto 14px; padding: 6px 22px 7px;
  font: 400 21px/1.2 var(--hd); letter-spacing: 0.12em; text-indent: 0.12em; text-transform: uppercase; color: #fff; text-shadow: none;
  background: var(--k); border: 3px solid var(--k); border-radius: 0; box-shadow: 5px 5px 0 var(--acc); transform: rotate(-1.5deg);
}
body.uih .manga .panel-title::before, body.uih .manga .panel-title::after { display: none; }

/* ---------- 按鈕：正的直角框、粗墨線、硬陰影；主要按鈕紅底白字 ---------- */
body.uih .manga .btn {
  clip-path: none; isolation: auto; min-height: 46px; color: var(--k); background: var(--paper); border: 3px solid var(--k); border-radius: 2px;
  box-shadow: 4px 4px 0 var(--k); transform: none; font: 700 16px var(--cj); letter-spacing: 0.1em; text-shadow: none;
  transition: transform 0.08s, box-shadow 0.08s;
}
body.uih .manga .btn::before, body.uih .manga .btn::after { display: none; content: none; }
body.uih .manga .btn:hover, body.uih .manga .btn:focus-visible { background: linear-gradient(transparent 62%, var(--mark) 62%), var(--paper); outline: none; }
body.uih .manga .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--k); }
body.uih .manga .btn.primary { color: #fff; background: var(--acc); font: 400 22px var(--hd); letter-spacing: 0.16em; box-shadow: 5px 5px 0 var(--k);
  -webkit-text-stroke: 1.5px var(--k); paint-order: stroke fill; }
body.uih .manga .btn.primary:hover, body.uih .manga .btn.primary:focus-visible { background: var(--acc-hi); }
body.uih .manga .btn.primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--k); }
body.uih .manga .btn .gi { color: var(--k); }

/* ---------- 分頁、列表、表格、音量 ---------- */
body.uih .manga .ptab { font: 700 15px var(--cj); letter-spacing: 0.12em; color: var(--k); background: var(--paper); border: 3px solid var(--k); border-radius: 2px; box-shadow: 3px 3px 0 var(--k); transform: none; }
body.uih .manga .ptab.on { color: #fff; background: var(--k); box-shadow: inset 0 -5px 0 var(--acc), 3px 3px 0 var(--k); }
body.uih .manga .build-row, body.uih .manga .dmg-table, body.uih .manga .vol-box, body.uih .manga .si-sec {
  background: #fffdf6; border: 2.5px solid var(--k); border-radius: 2px; box-shadow: 3px 3px 0 var(--k); }
body.uih .manga .build-name { font: 900 17px var(--cj); color: var(--k); }
body.uih .manga .build-name small { color: #fff; background: var(--acc); border: none; transform: rotate(-3deg); display: inline-block; }
body.uih .manga .bs .pips i, body.uih .manga .card .pips i { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--k); transform: none; }
body.uih .manga .bs .pips i.on, body.uih .manga .card .pips i.on { background: var(--acc); box-shadow: inset 0 0 0 1.5px var(--k); }
body.uih .manga .dm-head b, body.uih .manga .dm-val, body.uih .manga .vol-val { font-family: var(--hd); font-weight: 400; }
body.uih .manga .dm-head { border-bottom: 3px solid var(--k); }
body.uih .manga .dm-rank { background: var(--k); color: #fff; transform: none; border-radius: 50%; }
body.uih .manga .dm-head + .dm-row .dm-rank { background: var(--acc); color: #fff; box-shadow: none; }
body.uih .manga .dm-bar i { background: var(--ht), #fff; }
body.uih .manga .dm-head + .dm-row .dm-bar i, body.uih .manga .dm-row.fin .dm-bar i { background: var(--acc); box-shadow: inset 0 0 0 1.5px var(--k); }
body.uih .manga .vol-head { font: 900 15px var(--cj); letter-spacing: 0.3em; border-bottom: 3px solid var(--k); }
body.uih .manga input.vol::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--acc) var(--p), #fff var(--p)); box-shadow: inset 0 0 0 2px var(--k); height: 8px; }
body.uih .manga input.vol::-webkit-slider-thumb { background: #fff; border: 3px solid var(--k); border-radius: 50%; width: 20px; height: 20px; margin-top: -6px; transform: none; }
body.uih .manga .vol-btns .btn { font-size: 13px; letter-spacing: 0.02em; }
body.uih .manga .si-h { background: var(--k); color: #fff; transform: rotate(-1deg); box-shadow: 3px 3px 0 var(--acc); }
body.uih .manga .si-name { font: 900 22px var(--cj); }
body.uih .manga .si-tag { transform: none; border: 2px solid var(--k); border-radius: 2px; background: #fff; color: var(--k); }
body.uih .manga .si-tag.main { background: var(--acc); border-color: var(--acc); color: #fff; }
body.uih .manga .si-lvn em { clip-path: none; background: var(--acc); color: #fff; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--acc); border-radius: 50%; transform: rotate(-10deg); padding: 3px 6px; }
body.uih .manga .si-lvs li.cur { background: #fff; box-shadow: inset 4px 0 0 var(--acc), inset 0 0 0 2px var(--k); }
body.uih .manga .si-req li.ok::before { background: var(--acc); }
body.uih .manga .kw { color: var(--acc); }
body.uih .manga .bs-btn:hover, body.uih .manga .bs-btn:focus-visible { background: linear-gradient(transparent 58%, var(--mark) 58%); }

/* ---------- 升級卡：紙卡、墨線、硬陰影；滑到時左邊一條紅墨、微微歪 ---------- */
body.uih .manga .card { clip-path: none; color: var(--k); background: #fffdf6; border: 3px solid var(--k); border-radius: 2px; box-shadow: 5px 5px 0 var(--k); }
body.uih .manga .card::before { display: none; }
body.uih .manga .card:hover, body.uih .manga .card:focus-visible { transform: translate(-2px, -2px) rotate(-0.4deg); box-shadow: 7px 7px 0 var(--k); border: 3px solid var(--k); outline: none;
  background: linear-gradient(90deg, var(--acc) 0 7px, transparent 7px), #fff; }
body.uih .manga .card .nm { font: 900 17px var(--cj); color: var(--k); }
body.uih .manga .card .ds { color: #2a2420; }
body.uih .manga .card .hint { color: #5a514a; }
body.uih .manga .card .hint.ok { color: var(--acc); }
body.uih .manga .card .who { color: #fff; background: var(--k); transform: none; }
/* NEW：紅色印章 */
body.uih .manga .card .new { color: #fff; background: var(--acc); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--acc); border-radius: 3px; transform: rotate(-8deg); font: 400 11px var(--hd); letter-spacing: 0.08em; }
body.uih .manga .card.evo { background: var(--ht), linear-gradient(160deg, #ffe3dc, #fff 62%); border: 3px solid var(--k); box-shadow: 5px 5px 0 var(--acc); }
body.uih .manga .card.evo .nm { color: var(--acc-d); }
body.uih .manga .gi-hud, body.uih .manga .card .gi { color: var(--k); }

/* ---------- 開局選招卡 ---------- */
body.uih .manga .sp-card { clip-path: none; color: var(--k); background: #fffdf6; border: 3px solid var(--k); border-radius: 2px; box-shadow: 5px 5px 0 var(--k); overflow: hidden; }
body.uih .manga .sp-card:hover, body.uih .manga .sp-card:focus-visible { transform: translate(-2px, -2px) rotate(-0.4deg); box-shadow: 7px 7px 0 var(--k); background: #fff; }
body.uih .manga .sp-art { border-bottom: 3px solid var(--k); }
body.uih .manga .sp-art img { filter: none; }
body.uih .manga .sp-tag { color: #fff; background: var(--k); border: none; transform: none; font-weight: 900; box-shadow: 2px 2px 0 var(--acc); }
body.uih .manga .sp-name { font: 900 22px var(--cj); color: var(--k); }
body.uih .manga .sp-en { display: inline-block; padding: 0; color: var(--acc); background: none; transform: none; font-family: var(--hd); letter-spacing: 0.12em; border-bottom: 2px solid var(--acc); }
body.uih .manga .sp-stats { border-top: 2.5px solid var(--k); }
body.uih .manga .sp-bar s { background: #fff; box-shadow: inset 0 0 0 1.5px var(--k); transform: none; border-radius: 1px; }
body.uih .manga .sp-bar s.on { background: var(--acc); box-shadow: inset 0 0 0 1.5px var(--k); }
body.uih .manga .sp-bar s.half { background: linear-gradient(90deg, var(--acc) 50%, #fff 50%); }
body.uih .manga .sp-pc .con { color: var(--acc); }

/* ---------- 結算、準備倒數、操作說明、寶箱 ---------- */
body.uih .manga .stats div, body.uih .manga .rd-box, body.uih .manga .howto, body.uih .manga .cr-reel {
  clip-path: none; color: var(--k); background: #fffdf6; border: 2.5px solid var(--k); border-radius: 2px; box-shadow: 3px 3px 0 var(--k); }
body.uih .manga .stats b { font: 400 24px var(--hd); color: var(--acc); background: none; padding: 0; -webkit-text-stroke: 0; }
body.uih .manga .stats span { color: #5a514a; }
body.uih .manga .rd-box { border-width: 3px; box-shadow: 5px 5px 0 var(--k); }
body.uih .manga .rd-num { font: 400 52px var(--hd); color: #fff; -webkit-text-stroke: 3px var(--k); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--acc); }
body.uih .manga .rd-label { font: 900 18px var(--cj); color: var(--k); }
body.uih .manga .rd-bar { background: #fff; box-shadow: inset 0 0 0 2px var(--k); }
body.uih .manga .rd-fill { background: var(--acc); }
body.uih .manga .howto { background: #f6f0e2; border-width: 2px; box-shadow: none; color: #2a2420; }
body.uih .manga .howto b { color: #fff; background: var(--k); padding: 0 5px; }
body.uih .manga .cr-tier { font-family: var(--hd); color: #fff; -webkit-text-stroke: 2px var(--k); paint-order: stroke fill; }
body.uih .manga .cr-tier b { color: var(--acc); font-family: var(--hd); }
body.uih .manga .cr-row b { color: #fff; background: var(--acc); padding: 0 4px; }

/* ---------- 標題畫面：上下兩塊紙面板；大標題黑字＋紅字墨邊 ---------- */
body.uih #title.manga { background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.45)); }
body.uih .manga .title-top, body.uih .manga .title-bottom { padding: 26px 14px 12px; margin: 6px; }
body.uih .manga .kicker { display: inline-block; padding: 2px 10px; color: #fff; background: var(--acc); transform: rotate(-1.5deg); font-weight: 900; }
body.uih .manga h1 { margin: 8px 0 4px; font: 400 clamp(38px, 10.5vw, 60px)/1 var(--hd); letter-spacing: 0.04em; color: var(--k); border: none; padding: 0; text-shadow: none; -webkit-text-stroke: 0; }
body.uih .manga h1 span { color: var(--acc); -webkit-text-stroke: 2.5px var(--k); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--k); }
body.uih .manga .sub { color: #2a2420; font-weight: 800; }
body.uih .manga .best { color: #5a514a; font-weight: 800; }
body.uih .manga .hp-chip { color: var(--k); background: #fff; border: 2.5px solid var(--k); border-radius: 2px; transform: none; box-shadow: 2px 2px 0 var(--k); font-weight: 900; }
body.uih .manga .hp-chip.on { color: #fff; background: var(--k); box-shadow: 3px 3px 0 var(--acc); }
body.uih .manga .hp-chip img { border: 2px solid var(--k); }

/* ---------- 遊戲中的狀態列（HUD） ---------- */
body.uih .xpbar { height: 10px; clip-path: none; border: none; border-bottom: 2.5px solid var(--k); box-shadow: none; background: var(--paper); }
body.uih .xpbar::after { display: block; content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1.5px), rgba(20, 18, 16, 0.55) calc(10% - 1.5px) 10%); }
body.uih .xpfill { background: var(--acc); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.28); }
/* 等級：紅色圓章（雙圈、微微歪） */
body.uih .lv { clip-path: none; display: grid; place-items: center; align-content: center; width: 46px; height: 46px; padding: 0; border-radius: 50%;
  color: #fff; background: var(--acc); border: 2px solid #fff; box-shadow: 0 0 0 2.5px var(--acc), 0 0 0 4.5px var(--k), 2px 3px 0 4px rgba(0, 0, 0, 0.3);
  font: 400 9px/1 var(--hd); letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-8deg); }
body.uih .lv::before { display: none; }
body.uih .lv b { display: block; font-size: 19px; line-height: 1; color: #fff; }
/* 計時：白字黑邊紅影 */
body.uih .timer { padding: 0 4px; color: #fff; background: none; border: none; box-shadow: none;
  font: 400 28px/1 var(--hd); letter-spacing: 0.04em; -webkit-text-stroke: 2.5px var(--k); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--acc); }
body.uih .timer::before, body.uih .timer::after { display: none; }
body.uih .right { gap: 7px; }
/* 擊倒數、貝里：紙條＋墨線 */
body.uih .kills, body.uih .berry { padding: 1px 9px; color: var(--k); background: var(--paper); border: 2.5px solid var(--k); border-radius: 2px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  transform: none; font: 400 15px var(--hd); letter-spacing: 0.04em; text-shadow: none; }
body.uih .kills .gi, body.uih .berry b { color: var(--acc); }
body.uih .icon { clip-path: none; width: 38px; height: 38px; color: var(--k); background: var(--paper); border: 2.5px solid var(--k); border-radius: 2px; transform: none; box-shadow: 3px 3px 0 var(--k); }
body.uih .icon::before { display: none; }
body.uih .portrait { border-radius: 2px; border: 2.5px solid var(--k); background: var(--paper); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
body.uih .portrait.on { box-shadow: 0 0 0 2px var(--acc), 3px 3px 0 2px var(--k); }
body.uih .skill { clip-path: none; background: var(--paper); border: 2.5px solid var(--k); border-radius: 2px; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
body.uih .skill::before { display: none; }
body.uih .skill i { clip-path: none; color: #fff; background: var(--acc); border: 1.5px solid var(--k); border-radius: 50%; font-family: var(--hd); }
body.uih .skill .gi { color: var(--k); }
body.uih .skill.evo { box-shadow: 0 0 0 2px var(--acc), 2px 2px 0 2px var(--k); }
/* 奧義按鈕：墨黑底網點＋紙白、墨線雙圈；集滿變紅底集中線 */
body.uih .ult, body.uih #btn-ult { background: var(--ht), radial-gradient(circle at 50% 40%, #3a3330, #141210 70%);
  box-shadow: 0 0 0 3px var(--k), 0 0 0 6px var(--paper), 0 0 0 8.5px var(--k), 3px 5px 0 8px rgba(0, 0, 0, 0.3); }
body.uih .ult.ready, body.uih #btn-ult.ready { background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.28) 0deg 2deg, transparent 2deg 12deg), radial-gradient(circle at 50% 42%, var(--acc-hi), var(--acc-d) 75%);
  box-shadow: 0 0 0 3px var(--k), 0 0 0 6px var(--paper), 0 0 0 8.5px var(--k), 0 0 24px 8px rgba(224, 38, 45, 0.5); }
body.uih.acc-nr .ult.ready, body.uih.acc-nr #btn-ult.ready { box-shadow: 0 0 0 3px var(--k), 0 0 0 6px var(--paper), 0 0 0 8.5px var(--k), 0 0 24px 8px rgba(238, 106, 18, 0.55); }
body.uih .ult-label { font: 900 15px var(--cj); color: #fff; text-shadow: 1px 1px 0 #000; }
body.uih .ult.ready .ult-label, body.uih #btn-ult.ready .ult-label, body.uih .ult.ready .ult-dots { color: #fff; -webkit-text-stroke: 1px var(--k); paint-order: stroke fill; text-shadow: none; }
body.uih .ult-ring { background: conic-gradient(var(--acc) calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.14) 0); }
body.uih .ult-hint { color: var(--k); background: var(--paper); border: 2px solid var(--k); border-radius: 2px; transform: none; box-shadow: 2px 2px 0 var(--acc); }
body.uih .ult-hint.show { transform: none; }
body.uih .fpick .fp-item { clip-path: none; color: var(--k); background: var(--paper); border: 2.5px solid var(--k); border-radius: 2px; box-shadow: 3px 3px 0 var(--k); transform: none; font: 900 15px var(--cj); }
body.uih .fpick .fp-item::before { display: none; }
body.uih .fpick .fp-item.on, body.uih .fpick .fp-item.hover { color: #fff; background: var(--acc); }
body.uih .fpick .fp-item.hover { transform: translateX(6px) scale(1.04); }
body.uih .fpick-h { color: #fff; text-shadow: 1px 1px 0 #000, 0 0 4px #000; }
/* 畫面中間的大字（出航！等）：白字黑邊紅影 */
body.uih .banner { color: #fff; font-family: var(--hd); font-style: normal; -webkit-text-stroke: 3px var(--k); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--acc); letter-spacing: 0.08em; }
/* 頭目血條 */
body.uih .bossname { display: inline-block; padding: 1px 12px; color: #fff; background: var(--k); border: none; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--acc); font: 900 14px var(--cj); letter-spacing: 0.14em; text-shadow: none; }
body.uih .bosstrack { clip-path: none; background: var(--paper); border: 3px solid var(--k); border-radius: 2px; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45); transform: none; }
body.uih .bosstrack::after { display: none; }
body.uih .bossfill { background: var(--acc); }
/* 狀態列排版：英數字型比較寬，頭像＋等級章不能被擠到換行 */
body.uih .hp { flex: none; flex-wrap: nowrap; align-items: center; gap: 10px; }
body.uih .lv { flex: none; }
body.uih .right { min-width: 0; flex-shrink: 1; }
body.uih .timer { font-size: 24px; }
body.uih .kills, body.uih .berry { font-size: 13px; padding: 1px 7px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; flex: none; }
body.uih .right { gap: 5px; }
body.uih .hud-row { gap: 4px; }
body.uih #btn-pause { flex: none; width: 34px; height: 34px; }
body.uih .timer { font-size: 21px; padding: 0 2px; }
body.uih .hp { gap: 8px; }
body.uih .loading-screen { color: #fff; font-family: var(--hd); -webkit-text-stroke: 1.5px var(--k); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--acc); }

/* ---------- 鬼気九刀流的釋放畫面：全螢幕片段（白光一閃進場、四周壓暗、最後淡出）---------- */
.rshot { position: fixed; inset: 0; z-index: 12; pointer-events: none; background: #000; opacity: 0; transition: opacity 0.1s; }
.rshot.on { opacity: 1; }
.rshot.off { opacity: 0; transition: opacity 0.22s; }
.rshot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(20, 0, 30, 0.75)); }
.rs-flash { position: absolute; inset: 0; background: #fff; animation: rsFlash 0.3s ease-out both; }
@keyframes rsFlash { from { opacity: 0.95; } to { opacity: 0; } }

/* ---------- 奧義按鈕：左右滑動換招（2026-10-31 使用者：不要文字提示）----------
   按鈕內側左右兩個小箭頭＝可以左右滑；還沒滑過的玩家箭頭會一直往外推一下，滑過一次之後只淡淡地留著
   換招時招式名往滑的方向換過去、那一側的箭頭閃一下 */
.ult-hint { display: none !important; }
.ult-arr { position: absolute; top: 50%; width: 9px; height: 16px; margin-top: -8px; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.ult-arr svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 1.5px #000) drop-shadow(1px 1px 0 #000); }
.ult-arr.l { left: 6px; }
.ult-arr.r { right: 6px; }
body.multi-fin .ult-arr { opacity: 0.85; }
body.multi-fin:not(.fin-learned) .ult-arr.l { animation: ultArrL 1.3s ease-in-out infinite; }
body.multi-fin:not(.fin-learned) .ult-arr.r { animation: ultArrR 1.3s ease-in-out infinite; }
body.multi-fin.fin-learned .ult-arr { opacity: 0.5; }
@keyframes ultArrL { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(-4px); } }
@keyframes ultArrR { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(4px); } }
.ult-arr.hit { animation: ultArrHit 0.3s ease-out !important; opacity: 1 !important; }
.ult-arr.l.hit { --dx: -7px; } .ult-arr.r.hit { --dx: 7px; }
@keyframes ultArrHit { 40% { transform: translateX(var(--dx)) scale(1.3); } }
.ult-label.swL { animation: ultSwL 0.22s ease-out; }
.ult-label.swR { animation: ultSwR 0.22s ease-out; }
@keyframes ultSwL { from { transform: translateX(16px); opacity: 0; } }
@keyframes ultSwR { from { transform: translateX(-16px); opacity: 0; } }
.ult-pickcd, .ult-cdmsg { display: none !important; }
#btn-ult { touch-action: none; }

/* ==========================================================================
   介面樣品 A：JUMP 官網風（?ui=jump，2026-10-31 使用者：想要像集英社 JUMP 官網，但不能讓人有既視感）
   借的是「手法」：溫暖米白底、大量留白、圖先講話（大圖＋柔和陰影）、灰色網點橫條當標題底、紅色只做重點、白字粗黑描邊的大標題
   不借的招牌：JUMP 的紅黃斜體 logo 字、紅色膠囊按鈕＋白圈箭頭、旗子圖示、JUMP 正紅
   我們自己的招牌：朱紅色（不是正紅）、標題旁的羅盤印記、船票造型的按鈕（兩側半圓缺口＋虛線撕線）
   目前只套在升級選卡（樣品）
   ========================================================================== */
body.uih.ui-jump { --jp-acc: #e4502e; --jp-ink: #151515; --jp-paper: #f6f2ec; }
body.uih.ui-jump #levelup.manga { background: rgba(246, 242, 236, 0.94); }
body.uih.ui-jump #levelup.manga .panel { background: transparent; border: none; box-shadow: none; padding: 0 14px 18px; }
body.uih.ui-jump #levelup.manga .panel::before, body.uih.ui-jump #levelup.manga .panel::after { display: none; }
/* 標題：灰色網點橫條＋白字粗黑描邊＋羅盤印記 */
body.uih.ui-jump #levelup.manga .panel-title {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 -14px 18px; padding: 16px 0 14px; transform: none;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.16) 1.3px, transparent 1.7px) 0 0 / 6px 6px, #e7e1d8; box-shadow: none; border: none;
  color: #fff; font: 400 34px 'Dela Gothic One', var(--cj), sans-serif; letter-spacing: 0.04em;
  -webkit-text-stroke: 8px var(--jp-ink); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--jp-ink);
}
body.uih.ui-jump #levelup.manga .panel-title::before {
  display: block; content: ''; width: 34px; height: 34px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' fill='%23fff' stroke='%23151515' stroke-width='3'/%3E%3Cpath d='M20 4 L24 20 L20 36 L16 20 Z' fill='%23e4502e' stroke='%23151515' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M4 20 L20 16.5 L36 20 L20 23.5 Z' fill='%23151515'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23fff' stroke='%23151515' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(2px 3px 0 var(--jp-ink));
}
/* 卡片：白卡＋柔和陰影＋圓角；左邊大圖（像封面），右邊字 */
body.uih.ui-jump #levelup.manga .card {
  display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden; text-align: left;
  background: #fff; border: none; border-radius: 10px; box-shadow: 0 6px 18px rgba(40, 28, 14, 0.14), 0 1px 2px rgba(40, 28, 14, 0.1);
}
body.uih.ui-jump #levelup.manga .card:hover, body.uih.ui-jump #levelup.manga .card:focus-visible {
  transform: translateY(-3px); border: none; box-shadow: 0 12px 26px rgba(40, 28, 14, 0.2), 0 2px 3px rgba(40, 28, 14, 0.1); outline: none; }
body.uih.ui-jump #levelup.manga .card .ic { flex: none; width: 34%; margin: 0; align-self: stretch; display: flex; }
body.uih.ui-jump #levelup.manga .card .ic .gi { width: 100%; height: 100%; min-height: 120px; border-radius: 0; box-shadow: none; border: none; margin: 0; }
body.uih.ui-jump #levelup.manga .card .ic .gi img { width: 100%; height: 100%; object-fit: cover; }
body.uih.ui-jump #levelup.manga .card .body { padding: 12px 14px; gap: 5px; }
body.uih.ui-jump #levelup.manga .card .nm { font: 900 18px var(--cj); color: var(--jp-ink); letter-spacing: 0.02em; }
body.uih.ui-jump #levelup.manga .card .who { align-self: flex-start; color: var(--jp-ink); background: #fff; border: 1.5px solid var(--jp-ink); border-radius: 999px; padding: 1px 9px 1px 3px; font-size: 11px; transform: none; box-shadow: none; }
body.uih.ui-jump #levelup.manga .card .new { color: #fff; background: var(--jp-acc); border: none; box-shadow: none; border-radius: 999px; transform: none; padding: 1px 8px; font: 400 10px 'Dela Gothic One', sans-serif; }
body.uih.ui-jump #levelup.manga .card .ds { color: #333; font-size: 13px; line-height: 1.5; }
body.uih.ui-jump #levelup.manga .card .hint { color: #8a8278; font-size: 11px; }
body.uih.ui-jump #levelup.manga .card .hint.ok { color: var(--jp-acc); }
body.uih.ui-jump #levelup.manga .card .pips i { background: #e7e1d8; box-shadow: none; }
body.uih.ui-jump #levelup.manga .card .pips i.on { background: var(--jp-acc); box-shadow: none; }
body.uih.ui-jump #levelup.manga .card.evo { background: linear-gradient(120deg, #fff 55%, #fde8e2); box-shadow: 0 0 0 2.5px var(--jp-acc), 0 8px 20px rgba(228, 80, 46, 0.25); }
/* 按鈕：船票（兩側半圓缺口＋左邊一條虛線撕線） */
body.uih.ui-jump #levelup.manga .btn {
  position: relative; color: #fff; background: var(--jp-ink); border: none; border-radius: 6px; box-shadow: none; transform: none;
  font: 900 15px var(--cj); letter-spacing: 0.1em; padding: 13px 28px 13px 40px;
  -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 9px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}
body.uih.ui-jump #levelup.manga .btn::after { display: block; content: ''; position: absolute; left: 24px; top: 8px; bottom: 8px; border-left: 2px dashed rgba(255, 255, 255, 0.45); }
body.uih.ui-jump #levelup.manga .btn .gi { color: #fff; }
body.uih.ui-jump #levelup.manga .btn:hover, body.uih.ui-jump #levelup.manga .btn:focus-visible { background: var(--jp-acc); }
body.uih.ui-jump #levelup.manga .btn:disabled { background: #b9b2a8; }

/* ==========================================================================
   介面樣品 B：懸賞令風（?ui=wanted）：整套介面都是明亮、乾淨的懸賞令紙（輕微泛黃，不燒焦、不髒——配亮色才不違和）
   背景是釘懸賞令的木頭公告板（暖褐色）；每張卡是一張小懸賞令（鐵釘、微微歪、照片框、襯線大字、紅色印章）
   目前只套在升級選卡（樣品）
   ========================================================================== */
body.uih.ui-wanted { --wt-ink: #2c1e10; --wt-red: #b3261c; --wt-paper: #f1e4c4; }
body.uih.ui-wanted #levelup.manga {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 9px, rgba(255, 255, 255, 0.03) 9px 11px, transparent 11px 23px),
    linear-gradient(rgba(118, 80, 46, 0.86), rgba(92, 62, 36, 0.9));
}
body.uih.ui-wanted #levelup.manga .panel { background: transparent; border: none; box-shadow: none; padding: 4px 16px 18px; }
body.uih.ui-wanted #levelup.manga .panel::before, body.uih.ui-wanted #levelup.manga .panel::after { display: none; }
/* 標題：一條釘在板子上的紙條，WANTED 那種襯線大字＋底下雙線 */
body.uih.ui-wanted #levelup.manga .panel-title {
  position: relative; margin: 6px auto 20px; padding: 12px 26px 14px; width: fit-content; transform: rotate(-1.2deg);
  color: var(--wt-ink); background: url(images/ui/wanted_poster.webp) center / 100% 100%; border: none;
  box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.25); font: 900 34px 'Playfair Display', var(--serif), serif; letter-spacing: 0.08em; text-shadow: none;
}
body.uih.ui-wanted #levelup.manga .panel-title::after {
  display: block; content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-top: 1.5px solid var(--wt-ink); border-bottom: 1.5px solid var(--wt-ink);
}
/* 卡片：小懸賞令（鐵釘、微微歪、照片框） */
body.uih.ui-wanted #levelup.manga .card {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 14px 14px; text-align: left; overflow: visible;
  color: var(--wt-ink); background: url(images/ui/wanted_poster.webp) center / 100% 100%; border: none; border-radius: 0;
  box-shadow: none; filter: drop-shadow(3px 5px 0 rgba(0, 0, 0, 0.28));
}
body.uih.ui-wanted #levelup.manga .card:nth-child(1) { transform: rotate(-1.1deg); }
body.uih.ui-wanted #levelup.manga .card:nth-child(2) { transform: rotate(0.8deg); }
body.uih.ui-wanted #levelup.manga .card:nth-child(3) { transform: rotate(-0.5deg); }
body.uih.ui-wanted #levelup.manga .card:hover, body.uih.ui-wanted #levelup.manga .card:focus-visible { border: none; box-shadow: none; outline: none; filter: drop-shadow(5px 9px 0 rgba(0, 0, 0, 0.3)); }
body.uih.ui-wanted #levelup.manga .card::after {
  display: block; content: ''; position: absolute; top: 4px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9d4cc 0 12%, #8a847b 30%, #3b3632 62%, #1c1916 100%); box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.5);
}
body.uih.ui-wanted #levelup.manga .card .ic { flex: none; margin: 0; }
body.uih.ui-wanted #levelup.manga .card .ic .gi { width: 78px; height: 92px; border-radius: 0; border: none; box-shadow: 0 0 0 2px var(--wt-ink), 0 0 0 4px rgba(241, 228, 196, 0.9), 0 0 0 5px rgba(44, 30, 16, 0.55); }
body.uih.ui-wanted #levelup.manga .card .ic .gi img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.25) contrast(1.05); }
body.uih.ui-wanted #levelup.manga .card .nm { font: 900 18px var(--serif), 'Noto Serif TC', serif; color: var(--wt-ink); letter-spacing: 0.03em; }
body.uih.ui-wanted #levelup.manga .card .who { align-self: flex-start; color: var(--wt-ink); background: none; border: none; border-top: 1.5px solid var(--wt-ink); border-bottom: 1.5px solid var(--wt-ink);
  border-radius: 0; padding: 1px 4px 1px 2px; font: 900 11px 'Playfair Display', var(--serif), serif; letter-spacing: 0.1em; transform: none; box-shadow: none; }
body.uih.ui-wanted #levelup.manga .card .new { color: var(--wt-red); background: rgba(250, 243, 225, 0.7); border: 2px solid var(--wt-red); box-shadow: none; border-radius: 3px; transform: rotate(-10deg); font: 900 11px 'Playfair Display', serif; letter-spacing: 0.1em; padding: 0 5px; }
body.uih.ui-wanted #levelup.manga .card .ds { color: #3a2a18; font-size: 13px; line-height: 1.5; }
body.uih.ui-wanted #levelup.manga .card .hint { color: #7a6446; font-size: 11px; }
body.uih.ui-wanted #levelup.manga .card .hint.ok { color: var(--wt-red); }
body.uih.ui-wanted #levelup.manga .card .pips i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--wt-ink); }
body.uih.ui-wanted #levelup.manga .card .pips i.on { background: var(--wt-red); box-shadow: inset 0 0 0 1.5px var(--wt-ink); }
body.uih.ui-wanted #levelup.manga .card.evo { filter: drop-shadow(0 0 6px rgba(255, 210, 120, 0.9)) drop-shadow(3px 5px 0 rgba(0, 0, 0, 0.28)); }
/* 按鈕：紅色印章 */
body.uih.ui-wanted #levelup.manga .btn {
  color: #fbeed0; background: var(--wt-red); border: 2px solid #fbeed0; outline: 2px solid var(--wt-red); border-radius: 4px; box-shadow: 2px 4px 0 rgba(0, 0, 0, 0.3);
  font: 900 15px var(--cj); letter-spacing: 0.12em; transform: rotate(-0.8deg);
}
body.uih.ui-wanted #levelup.manga .btn .gi { color: #fbeed0; }
body.uih.ui-wanted #levelup.manga .btn:hover, body.uih.ui-wanted #levelup.manga .btn:focus-visible { background: #c93226; }
body.uih.ui-wanted #levelup.manga .btn:disabled { background: #8f7a5c; outline-color: #8f7a5c; }
body.uih.ui-jump #levelup.manga .panel-title { width: calc(100% + 28px); max-width: none; box-sizing: border-box; align-self: stretch; }
body.uih.ui-wanted #levelup.manga .panel-title::after { width: auto; transform: none; background: none; }
body.uih.ui-wanted #levelup.manga .panel-title::after { left: 14px; right: auto; width: calc(100% - 28px); }

/* ==========================================================================
   電腦大螢幕：介面整體放大（2026-10-31 使用者：電腦玩按鈕都很小）
   --ui 由 main.js uiScale() 依畫面大小算（手機 1 倍，1920×1080 約 1.5 倍）
   只放大「介面本身」；跟著角色位置走的東西（頭上血條、奧義大字特效）不放大，位置才不會偏
   ========================================================================== */
#hud, #skills, #swaps, #btn-ult, #fpick, #ult-cdmsg, #banner { zoom: var(--hud, 1); }
.rd-box, .screen > *, .chest-ov > * { zoom: var(--ui, 1); }

/* 開局選招：返回角色選擇（2026-10-31 使用者：選角色後要能回上頁換人） */
#startpick .sp-back { display: block; width: 100%; margin: 12px 0 0; font-size: 14px; padding: 10px 12px; }

/* 標題畫面：副標＝遊戲類型標語、操作說明精簡成三行（2026-10-31 使用者：拿掉「索隆單人出航」那句、說明只留重點、排版要整齊）
   手機只顯示觸控操作，電腦（滑鼠）只顯示鍵盤按鍵 */
body.uih #title.manga .sub { font: 400 11px 'Dela Gothic One', var(--cj), sans-serif; letter-spacing: 0.2em; text-indent: 0.2em; white-space: nowrap; color: #6b5f52; margin: 6px 0 2px; }
body.uih #title.manga .howto.ht2 { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px 10px; margin: 0; padding: 11px 12px; text-align: left; font-size: 12.5px; line-height: 1.45; }
body.uih #title.manga .ht2 dt { justify-self: start; color: #fff; background: var(--k); padding: 2px 7px; font: 900 11.5px var(--cj); letter-spacing: 0.12em; }
body.uih #title.manga .ht2 dd { margin: 0; color: #2a2420; font-weight: 700; }
body.uih #title.manga .ht2 kbd { display: inline-block; min-width: 1.6em; margin: 0 1px; padding: 0 4px; text-align: center; font: 700 11px 'Rajdhani', var(--cj), sans-serif; line-height: 1.55;
  color: var(--k); background: #fff; border: 1.5px solid var(--k); border-radius: 3px; box-shadow: 0 2px 0 var(--k); }
.ht2 .ctl-key { display: none; }
@media (hover: hover) and (pointer: fine) { .ht2 .ctl-key { display: inline; } .ht2 .ctl-touch { display: none; } }
/* 標題畫面：上下兩塊面板放太大會把中間的角色擋住 → 最多放大 1.1 倍 */
#title > * { zoom: min(var(--ui, 1), 1.1); }
/* 電腦橫向大螢幕的標題畫面：標題放左邊、選角色＋出航放右邊，中間留給角色（不然上下兩塊會把角色擋住） */
@media (hover: hover) and (pointer: fine) and (min-aspect-ratio: 4/3) {
  #title .title-wrap { width: 100%; max-width: none; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 4vw; box-sizing: border-box; }
  #title .title-top, #title .title-bottom { width: 380px; flex: none; }
}

/* 選角畫面：角色天賦（2026-10-31 使用者：選角時顯示被動，索隆＝路痴、鼬＝烏鴉分身） */
.hero-passive:empty { display: none; }
body.uih #title.manga .hero-passive { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; text-align: left; background: #fffdf6; border: 2px solid var(--k); box-shadow: 3px 3px 0 var(--k); }
body.uih #title.manga .hps-tag { flex: none; color: #fff; background: var(--acc); padding: 2px 7px; font: 900 11.5px var(--cj); letter-spacing: 0.12em; }
body.uih #title.manga .hps-body { font-size: 12.5px; line-height: 1.5; font-weight: 700; color: #2a2420; }
body.uih #title.manga .hps-name { margin-right: 6px; font: 900 13.5px var(--cj); color: var(--k); }
body.uih #title.manga .hero-passive .kw { color: var(--acc); }

/* 煉獄鬼斬的大字：照原作漫畫的「アンチック體」（漢字 Zen Kaku Gothic New 900 極粗黑體、「り」Zen Old Mincho 明朝）
   2026-10-31 使用者：Potta One 太圓潤、沒有凶狠霸氣，要參考原作字體（_source/參考圖/Rengoku_Onigiri.png） */
.rgw .rgw-w { font-family: 'Zen Kaku Gothic New', 'Zen Old Mincho', 'Noto Sans TC', sans-serif; font-weight: 900; -webkit-text-stroke: 4px #fff; }

/* 左下角：天賦冷卻（暗色扇形順時針退掉＋剩餘秒數；好了就亮框，2026-10-31 使用者） */
.skill.talent { overflow: hidden; }
.skill.talent::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(rgba(10, 8, 6, 0.62) calc(var(--cd, 0) * 1%), transparent 0); }
.skill.talent .tcd { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 900 14px 'Rajdhani', var(--cj, sans-serif); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.skill.talent.ready { box-shadow: 0 0 0 2px var(--acc, #e0262d), 0 0 10px rgba(224, 38, 45, 0.75); }
/* 暫停選單：天賦那一行 */
.manga .bs-btn.talent { font-weight: 900; }
/* 左下角圖示可以點（點了暫停並顯示說明） */
#skills .skill { pointer-events: auto; cursor: pointer; }
#skills .skill:active { transform: scale(0.94); }

/* ==========================================================================
   新手教學（2026-10-31 使用者：朋友不知道怎麼拿奧義；教學要讓玩家自己選，不強迫）
   #tut-ask＝第一次出航的詢問框、#tutorial＝5 頁說明、#tip＝遊戲中的一次性提示
   ========================================================================== */
#title .tut-link { margin-top: -4px; padding: 7px 12px; font-size: 14px; font-weight: 900; letter-spacing: 0.12em; }
#title .tut-link .gi-btn, #btn-tips .gi-btn { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
#tut-ask, #tutorial { z-index: 30; }
.tut-ask { width: min(360px, 100%); text-align: center; }
.tut-ask-txt { margin: 4px 0 14px; font-size: 14px; line-height: 1.65; font-weight: 700; color: #2a2420; }
.tut-ask-txt b { color: var(--acc, #d6262c); }
.tut-ask-btns { display: flex; flex-direction: column; gap: 10px; }
.tut-ask-btns .btn { width: 100%; }

.tut-panel { width: min(400px, 100%); display: flex; flex-direction: column; gap: 10px; }
.tut-head { position: relative; display: flex; justify-content: center; align-items: center; }
.tut-head .panel-title { margin: 0 auto 2px !important; }
.tut-step { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 700 13px 'Rajdhani', var(--cj, sans-serif); letter-spacing: 0.08em; color: #6b5f52; }
.tut-body { min-height: 300px; color: #2a2420; text-align: left; }
.tut-body .kw { color: var(--acc, #d6262c); }
.tut-lead { margin: 0 0 10px; font-size: 14.5px; font-weight: 800; line-height: 1.5; }
.tut-end { margin: 14px 0 0; text-align: center; font: 900 16px var(--cj, sans-serif); letter-spacing: 0.1em; color: var(--k, #141210); }

/* 條列：左邊黑底小標、右邊說明 */
.tut-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.tut-list li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.55; font-weight: 700; }
.tut-list em { font-style: normal; color: #fff; background: var(--k, #141210); padding: 1px 7px; font: 900 12px var(--cj, sans-serif); letter-spacing: 0.12em; margin-top: 1px; }
.tut-list b { font-weight: 900; color: var(--k, #141210); }
.tut-body kbd { display: inline-block; min-width: 1.6em; margin: 0 1px; padding: 0 4px; text-align: center; font: 700 11.5px 'Rajdhani', var(--cj, sans-serif), sans-serif; line-height: 1.55;
  color: var(--k, #141210); background: #fff; border: 1.5px solid var(--k, #141210); border-radius: 3px; box-shadow: 0 2px 0 var(--k, #141210); }
.tut-body .ctl-key { display: none; }
@media (hover: hover) and (pointer: fine) { .tut-body .ctl-key { display: inline; } .tut-body .ctl-touch { display: none; } }

/* 流程：三格 → 三格 */
.tut-flow { display: flex; align-items: stretch; gap: 4px; }
.tut-flow .tf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 9px 4px; text-align: center;
  background: #fffdf6; border: 2px solid var(--k, #141210); box-shadow: 3px 3px 0 var(--k, #141210); }
.tut-flow .tf b { font: 400 19px 'Dela Gothic One', var(--cj, sans-serif); color: var(--k, #141210); line-height: 1.1; }
.tut-flow .tf span { font-size: 11.5px; font-weight: 800; color: #5a4f44; }
.tut-flow .tf.hot { background: var(--acc, #d6262c); }
.tut-flow .tf.hot b, .tut-flow .tf.hot span { color: #fff; }
.tut-flow .tf-ar { flex: none; align-self: center; width: 0; height: 0; border: 7px solid transparent; border-left: 9px solid var(--k, #141210); border-right: 0; }

  background: #fffdf6; border: 2px solid var(--k, #141210); box-shadow: 3px 3px 0 var(--k, #141210); }

/* 奧義按鈕示意：量表 72% */
.tut-ult { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 4px 0 2px; }
.tu-btn { position: relative; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--acc, #d6262c) calc(var(--p) * 1%), #d9d0c0 0); box-shadow: 0 0 0 3px var(--k, #141210), 4px 4px 0 3px var(--k, #141210); }
.tu-btn::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #2a2d36, #0a0b0e 70%); }
.tu-btn i { position: relative; font: 900 17px var(--cj, sans-serif); font-style: normal; letter-spacing: 0.1em; color: #fff; }
.tu-txt { font-size: 13px; font-weight: 800; line-height: 1.5; color: #2a2420; }

/* 頁碼點、上一頁／下一頁 */
.tut-dots { display: flex; justify-content: center; gap: 8px; }
.tut-dots i { width: 10px; height: 10px; transform: rotate(45deg); border: 2px solid var(--k, #141210); background: transparent; cursor: pointer; }
.tut-dots i.on { background: var(--acc, #d6262c); }
.tut-nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.tut-nav .btn { width: 100%; margin: 0; }
body.uih .manga .tut-nav .btn.primary { font-size: 19px; }
.tut-nav .btn:disabled { opacity: 0.35; }
.tut-panel .tut-close { width: 100%; margin: 0; padding: 7px 12px; font-size: 13px; }

/* 遊戲中的新手提示：畫面上方中間，點一下關掉 */
.tip-toast { position: fixed; z-index: 60; left: 50%; top: calc(env(safe-area-inset-top) + 76px); transform: translateX(-50%); width: min(420px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; cursor: pointer; zoom: var(--hud, 1);
  color: #141210; background: #fbf6ea; border: 2.5px solid #141210; box-shadow: 4px 4px 0 #141210; }
.tip-toast.pop { animation: tipIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes tipIn { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tip-toast .tip-tag { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 4px; color: #fff; background: var(--acc, #d6262c); font: 900 12px var(--cj, sans-serif); letter-spacing: 0.1em; }
.tip-toast .tip-tag .gi-btn { width: 15px; height: 15px; color: #fff; }
.tip-toast .tip-body { font-size: 13.5px; font-weight: 800; line-height: 1.5; }
.tip-toast .kw { color: var(--acc, #d6262c); }
/* 教學畫面：跟暫停選單一樣的暗底（不要預設的藍底） */
#tut-ask.manga, #tutorial.manga { background: radial-gradient(ellipse at 50% 42%, rgba(40, 30, 26, 0.6), rgba(8, 6, 6, 0.92)); }
#tutorial .tut-body { min-height: 340px; }   /* 每頁一樣高：上一頁／下一頁按鈕不會跳動 */

/* 奧義配方：「招式 Lv滿 ＋ 輔助技能 ＝ 奧義」（2026-10-31 玩家回報：不知道大千世界要鬼斬配霸氣）
   升級卡片、暫停選單「奧義配方」分頁、新手教學共用；已達成的一半變成黑底白字 */
.recipe { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; font-size: 12px; line-height: 1.3; }
.recipe .rc { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 3px; font-weight: 900; color: #141210; background: #fff; border: 1.5px solid #141210; white-space: nowrap; }
.recipe .rc.ok { color: #fff; background: #141210; }
.recipe .rc.ok .gi { color: #fff; }
.recipe .rc-op { font-style: normal; font-weight: 900; color: #141210; }
.recipe .rc-out { padding: 2px 8px; font-weight: 900; color: #fff; background: var(--acc, #d6262c); box-shadow: 2px 2px 0 #141210; white-space: nowrap; }
.card .hint.rc-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 4px; }
.rc-wrap .rc-h { font-size: 10.5px; font-weight: 900; letter-spacing: 0.15em; color: var(--acc, #d6262c); }
/* 暫停選單的配方分頁 */
.manga .rc-table { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; padding: 12px; background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.rc-row { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1.5px dashed rgba(20, 18, 16, 0.3); color: #141210; font-size: 13px; font-weight: 700; }
.rc-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.rc-row .rc-st { font-size: 11.5px; font-weight: 800; color: #6b5f52; }
.rc-row .rc-st.go { color: var(--acc, #d6262c); }
.rc-row .rc-st.on { color: #141210; }
.rc-row.evo .rc-out { background: #141210; box-shadow: 2px 2px 0 var(--acc, #d6262c); }
/* 新手教學第 3 頁：角色全部的配方 */
.tut-rc { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 10px; background: #fffdf6; border: 2px solid var(--k, #141210); }
.tut-rc-h { font: 900 12px var(--cj, sans-serif); letter-spacing: 0.12em; color: var(--acc, #d6262c); }
.tut-note { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; line-height: 1.5; color: #5a4f44; }
.tut-flow .tf-plus { flex: none; align-self: center; font: 900 20px var(--cj, sans-serif); font-style: normal; color: var(--k, #141210); }
/* 暫停選單三個分頁（招式配置／奧義配方／傷害統計）排一行 */
.ptabs { grid-template-columns: repeat(3, 1fr); }
body.uih .manga .ptab { font-size: 14px; letter-spacing: 0.04em; padding: 8px 2px; white-space: nowrap; }

/* 電腦版選角海報（樣品 ?sel=poster，2026-11-01 玩家建議）：作品分頁＋左右切換 */
.hero-pick.series-mode { display: flex; flex-direction: column; gap: 8px; }
.hp-series { display: flex; gap: 6px; }
.hp-tab { flex: 1; padding: 6px 4px; cursor: pointer; font: 900 13px var(--cj, sans-serif); letter-spacing: 0.15em; color: var(--k, #141210); background: #fff; border: 2px solid var(--k, #141210); }
.hp-tab.on { color: #fff; background: var(--k, #141210); box-shadow: 3px 3px 0 var(--acc, #d6262c); }
.hp-car { display: grid; grid-template-columns: 40px 1fr 40px; align-items: stretch; gap: 8px; }
.hp-arrow { display: grid; place-items: center; padding: 0; cursor: pointer; color: var(--k, #141210); background: #fff; border: 2px solid var(--k, #141210); box-shadow: 3px 3px 0 var(--k, #141210); }
.hp-arrow svg { width: 22px; height: 22px; }
.hp-arrow:hover { color: #fff; background: var(--acc, #d6262c); }
.hp-arrow:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--k, #141210); }
.hp-cur { display: flex; align-items: center; gap: 10px; padding: 6px 10px; color: #fff; background: var(--k, #141210); text-align: left; }
.hp-cur img { width: 44px; height: 44px; object-fit: cover; border: 2px solid #fff; }
.hp-cur b { display: block; font: 900 20px var(--cj, sans-serif); letter-spacing: 0.1em; }
.hp-cur small { display: block; font: 700 11px 'Rajdhani', var(--cj, sans-serif); letter-spacing: 0.22em; color: #d8d0c4; }
.hp-dots { display: flex; align-items: center; justify-content: center; gap: 6px; }
.hp-dots i { width: 8px; height: 8px; transform: rotate(45deg); border: 1.5px solid var(--k, #141210); }
.hp-dots i.on { background: var(--acc, #d6262c); }
.hp-dots em { margin-left: 6px; font-style: normal; font-size: 11px; font-weight: 700; color: #6b5f52; }

/* 遊戲設定（標題畫面，2026-11-01 使用者：後台設定＋開發者模式＋大廳就能調音量） */
#settings { z-index: 30; }
#settings.manga { background: radial-gradient(ellipse at 50% 42%, rgba(40, 30, 26, 0.6), rgba(8, 6, 6, 0.92)); }
.cfg-panel { width: min(440px, 100%); display: flex; flex-direction: column; gap: 10px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.cfg-body { display: flex; flex-direction: column; gap: 0; padding: 4px 12px 10px; background: #fff; border: 2.5px solid var(--k, #141210); box-shadow: 4px 4px 0 var(--k, #141210); }
.cfg-h { margin: 10px 0 2px; font: 900 12px var(--cj, sans-serif); letter-spacing: 0.3em; color: var(--acc, #d6262c); }
.cfg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1.5px dashed rgba(20, 18, 16, 0.2); color: var(--k, #141210); }
.cfg-row:last-child { border-bottom: 0; }
.cfg-row.dev { padding-left: 12px; }
.cfg-name { font: 900 14px var(--cj, sans-serif); text-align: left; }
.cfg-name small { display: block; margin-top: 1px; font-size: 11px; font-weight: 700; color: #6b5f52; }
.cfg-row.changed .cfg-name::after { content: '已調整'; margin-left: 6px; padding: 0 5px; font-size: 10px; color: #fff; background: var(--acc, #d6262c); vertical-align: 2px; }
.cfg-step { display: inline-flex; align-items: center; flex: none; border: 2px solid var(--k, #141210); }
.cfg-step button { width: 34px; height: 32px; padding: 0; cursor: pointer; font: 900 18px var(--cj, sans-serif); color: var(--k, #141210); background: #fff; border: 0; }
.cfg-step button:hover:not(:disabled) { color: #fff; background: var(--acc, #d6262c); }
.cfg-step button:disabled { opacity: 0.25; cursor: default; }
.cfg-step b { min-width: 74px; height: 32px; display: grid; place-items: center; grid-auto-flow: column; gap: 3px; font: 700 18px 'Rajdhani', var(--cj, sans-serif); color: #fff; background: var(--k, #141210); }
.cfg-step b small { font: 900 11px var(--cj, sans-serif); color: #d8d0c4; }
.cfg-tog { position: relative; flex: none; width: 52px; height: 28px; padding: 0; cursor: pointer; background: #d9d0c0; border: 2px solid var(--k, #141210); }
.cfg-tog i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border: 2px solid var(--k, #141210); transition: transform 0.15s; }
.cfg-tog.on { background: var(--acc, #d6262c); }
.cfg-tog.on i { transform: translateX(24px); }
.cfg-note { margin: 0; font-size: 11.5px; font-weight: 700; line-height: 1.5; color: #6b5f52; }
.cfg-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.cfg-btns .btn { width: 100%; margin: 0; }
body.uih .manga .cfg-btns .btn.primary { font-size: 19px; }
/* 標題：新手教學＋遊戲設定兩顆並排；自訂規則提示 */
#title .title-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: -4px; }
#title .title-links .tut-link { margin: 0; }
#title .tut-link .gi-btn { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
#title .cfg-flag { padding: 3px 8px; font: 900 11.5px var(--cj, sans-serif); letter-spacing: 0.12em; color: #fff; background: var(--acc, #d6262c); }
.r-custom { margin: 4px 0 8px; font-size: 12px; font-weight: 800; color: var(--acc, #d6262c); }

/* 復活詢問（2026-11-01 使用者：死掉可以復活一次） */
#revive { z-index: 30; }
#revive.manga { background: radial-gradient(ellipse at 50% 45%, rgba(90, 10, 14, 0.55), rgba(8, 4, 4, 0.92)); }
.revive-panel { width: min(360px, 100%); display: flex; flex-direction: column; gap: 10px; text-align: center; }
.revive-txt { margin: 2px 0 0; font-size: 14px; font-weight: 700; line-height: 1.65; color: #2a2420; }
.revive-txt b { color: var(--acc, #d6262c); }
.revive-left { margin: 0 0 4px; font: 900 13px var(--cj, sans-serif); letter-spacing: 0.15em; color: var(--acc, #d6262c); }
.revive-panel .btn { width: 100%; margin: 0; }
/* 奧義演出中按了暫停：暫停鍵閃一下，表示演出結束後會暫停 */
#btn-pause.queued { animation: pauseQueued 0.8s ease-in-out infinite alternate; }
@keyframes pauseQueued { from { box-shadow: 0 0 0 0 rgba(214, 38, 44, 0); } to { box-shadow: 0 0 0 4px rgba(214, 38, 44, 0.85); } }
.revive-left.short { color: #6b5f52; }
#btn-revive:disabled { opacity: 0.45; cursor: default; }

/* 手機直式的海報標題（2026-11-01 使用者：手機也要海報）：標題縮成一行、拿掉操作說明，中間整塊給海報＋角色 */
body.poster-tall #title { touch-action: none; }
body.poster-tall #title .title-top { padding: 18px 12px 8px; gap: 0; }
body.poster-tall #title .kicker, body.poster-tall #title .sub, body.poster-tall #title.manga .howto.ht2 { display: none; }
body.poster-tall #title .title-wrap { width: 100%; }
body.poster-tall #title .title-top, body.poster-tall #title .title-bottom { min-width: 0; }
body.poster-tall #title h1 { margin: 0; font-size: clamp(20px, 6.4vw, 34px); white-space: nowrap; }
body.poster-tall #title h1 br { display: none; }
body.poster-tall #title h1 span { margin-left: 0.22em; }
body.poster-tall #title .title-bottom { padding-top: 18px; gap: 8px; }
body.poster-tall #title .hero-passive { padding: 6px 9px; }
body.poster-tall #title .hps-body { font-size: 11.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.poster-tall #title .best { font-size: 11px; }
body.poster-tall .hp-car { grid-template-columns: 36px 1fr 36px; }
body.poster-tall .hp-cur { padding: 4px 8px; }
body.poster-tall .hp-cur img { width: 36px; height: 36px; }
body.poster-tall .hp-cur b { font-size: 17px; }

/* 選角海報層（2026-11-01 使用者：角色卡要融入背景，後面是遊戲場景很醜）
   疊在 3D 畫面上、標題面板底下：紙張底色＋同一張主圖放大模糊＋網點＋超大角色名，中間是角色卡 */
#poster-layer { display: none; position: fixed; inset: 0; z-index: 9; overflow: hidden; pointer-events: none;
  --pl-paper: #f3eee3; --pl-ink: #141210; --pl-acc: #2e9e5b; }
body { --card-h: 70vh; --card-top: 15vh; }   /* 角色卡的高度、位置（placePosterCard 依畫面算好設在 body） */
body.sel-poster #poster-layer { display: block; }
#poster-layer.dark { --pl-paper: #17161b; --pl-ink: #f1ece2; }
.pl-bg { position: absolute; inset: 0; background: var(--pl-paper); }
/* 同一張圖放大、模糊、淡淡鋪在底下：卡片和背景是同一個色調 */
.pl-bg::before { content: ''; position: absolute; inset: -6%; background: var(--pl-img) center 20% / cover no-repeat; filter: blur(22px) saturate(0.85); opacity: 0.42; }
#poster-layer.dark .pl-bg::before { opacity: 0.5; filter: blur(22px) saturate(0.9) brightness(0.7); }
/* 網點＋往中間收的暗角 */
.pl-bg::after { content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--pl-ink) 22%, transparent) 1.1px, transparent 1.6px) 0 0 / 7px 7px,
    radial-gradient(ellipse at 50% 45%, transparent 35%, color-mix(in srgb, var(--pl-paper) 70%, #000) 120%);
  -webkit-mask: linear-gradient(115deg, #000 0 30%, transparent 55%, #000 85%); mask: linear-gradient(115deg, #000 0 30%, transparent 55%, #000 85%); }
/* 超大角色名（描邊空心字）斜斜地鋪在背景 */
.pl-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg); white-space: nowrap;
  font: 400 min(42vh, 46vw) / 0.9 'Dela Gothic One', 'Noto Sans TC', sans-serif; letter-spacing: 0.02em;
  color: transparent; -webkit-text-stroke: 3px color-mix(in srgb, var(--pl-ink) 16%, transparent); }
/* 角色卡後面的一條斜色帶 */
#poster-layer::after { content: ''; position: absolute; left: -10%; right: -10%; top: calc(var(--card-top) + var(--card-h) * 0.55); height: calc(var(--card-h) * 0.22);
  background: var(--pl-acc); opacity: 0.9; transform: rotate(-12deg); }
.pl-card { position: absolute; z-index: 1; left: 50%; top: var(--card-top); height: var(--card-h); aspect-ratio: 1080 / 1500;
  transform: translateX(-50%) rotate(-1.5deg); box-shadow: 10px 10px 0 var(--pl-ink), 0 18px 40px rgba(0, 0, 0, 0.35); }
#poster-layer.dark .pl-card { box-shadow: 10px 10px 0 var(--pl-acc), 0 18px 40px rgba(0, 0, 0, 0.6); }
.pl-canvas { display: block; width: 100%; height: 100%; }
.pl-card.drop { animation: plDrop 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes plDrop { from { opacity: 0; transform: translate(-50%, -36px) rotate(-6deg); } to { opacity: 1; transform: translateX(-50%) rotate(-1.5deg); } }
/* 海報模式：標題畫面本身不要再壓暗（背景已經是設計好的） */
body.sel-poster #title.manga { background: none; }
/* 電腦橫向：標題面板固定 380px 寬，SURVIVAL 用 60px 會跑出框外（2026-11-01 使用者回報）→ 縮到放得下 */
@media (hover: hover) and (pointer: fine) and (min-aspect-ratio: 4/3) {
  body.uih #title.manga h1 { font-size: 42px; }
}
/* 寶箱「收下」按鈕：電腦顯示可以按空白鍵（2026-11-01 使用者） */
.cr-ok .cr-key { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cr-ok .cr-key { display: inline-block; margin-left: 10px; vertical-align: 2px; }
  .cr-ok .cr-key kbd { padding: 1px 6px; font: 700 12px 'Rajdhani', sans-serif; letter-spacing: 0.04em; color: #141210; background: #fff; border: 1.5px solid #141210; border-radius: 3px; box-shadow: 0 2px 0 #141210; }
}

/* 手機直式：角色卡要大張（2026-11-01 使用者：手機版角色卡沒有電腦版那麼大張好看）
   標題縮成小條；底欄壓成「作品分頁／選角列／一行天賦／出航＋教學＋設定」，空出來的高度全給角色卡 */
body.poster-tall #title.manga .title-top { padding: 14px 10px 6px; margin: 4px 6px; }
body.poster-tall #title.manga .title-top::before { height: 5px; }
body.poster-tall #title h1 { font-size: clamp(18px, 5.4vw, 28px); }
body.poster-tall #title.manga .title-bottom { display: grid; grid-template-columns: 1fr 46px 46px; gap: 7px; padding: 18px 10px 8px; margin: 4px 6px 6px; }
body.poster-tall #title .title-bottom > * { grid-column: 1 / -1; min-width: 0; }
body.poster-tall .hero-pick.series-mode { gap: 6px; }
body.poster-tall .hp-tab { padding: 4px; font-size: 12px; }
body.poster-tall .hp-dots { display: none; }
body.poster-tall .hp-cur { padding: 3px 8px; }
body.poster-tall .hp-cur img { width: 32px; height: 32px; }
/* 天賦：平常一行，點一下展開全文 */
body.poster-tall #title.manga .hero-passive { align-items: center; padding: 5px 8px; cursor: pointer; }
body.poster-tall #title .hps-body { -webkit-line-clamp: 1; }
body.poster-tall #title .hero-passive.open .hps-body { -webkit-line-clamp: 6; }
body.poster-tall #title .hero-passive::after { content: ''; flex: none; width: 7px; height: 7px; margin-left: auto; border: solid var(--k, #141210); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); }
body.poster-tall #title .hero-passive.open::after { transform: rotate(-135deg) translate(-2px, -2px); }
/* 出航＋兩顆小方鈕（教學、設定）同一排 */
body.poster-tall #title #btn-start { grid-column: 1; margin: 0; }
body.poster-tall #title .title-links { display: contents; }
body.poster-tall #title .title-links .tut-link { width: 46px; min-height: 0; height: 100%; padding: 0; font-size: 0; letter-spacing: 0; display: grid; place-items: center; }
body.poster-tall #title .title-links .tut-link .gi-btn { width: 22px; height: 22px; margin: 0; }
body.poster-tall #title #btn-tut { grid-column: 2; }
body.poster-tall #title #btn-cfg { grid-column: 3; }
body.poster-tall #title .best { margin: 0; text-align: center; }

/* 換人箭頭在角色卡左右兩側（2026-11-01 使用者：手機先做，電腦版也要一樣）；底欄的選角列拿掉，名字看卡片 */
.pc-arrow { display: none; }
body.sel-poster #title .pc-arrow { position: fixed; z-index: 3; top: calc(var(--card-top) + var(--card-h) * 0.5 - 28px); width: 34px; height: 56px; padding: 0;
  display: grid; place-items: center; cursor: pointer; color: var(--k, #141210); background: #fff; border: 2.5px solid var(--k, #141210); box-shadow: 3px 3px 0 var(--k, #141210); }
body.sel-poster #title .pc-arrow[data-d="-1"] { left: max(4px, calc(50% - var(--card-h) * 0.375 - 46px)); }   /* 卡片半寬＝高×0.36（斜 1.5 度再多一點＝0.375）；外側 12px 再放 34px 的箭頭 */
body.sel-poster #title .pc-arrow[data-d="1"] { right: max(4px, calc(50% - var(--card-h) * 0.375 - 50px)); }    /* 右邊多 4px 讓開卡片的陰影 */
body.sel-poster #title .pc-arrow svg { width: 22px; height: 22px; }
body.sel-poster #title .pc-arrow:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--k, #141210); }
body.sel-poster .hp-car { display: none; }
body.sel-poster #title .pc-arrow:hover { color: #fff; background: var(--acc, #d6262c); }
/* 起手招式卡片：招式名下面的日文讀音（2026-11-01 使用者：英文改日文） */
body.uih .manga .sp-en.sp-jp { font-size: 12px; letter-spacing: 0.2em; }
/* 電腦版海報標題：兩側面板往外推一點，讓出角色卡左右箭頭的位置（卡片不要因為箭頭變小） */
@media (hover: hover) and (pointer: fine) and (min-aspect-ratio: 4/3) {
  body.sel-poster #title .title-wrap { padding: 0 2.5vw; }
}
#title > .pc-arrow { zoom: 1; }   /* 箭頭用 fixed 對齊角色卡，不跟著面板放大 */

/* 標題：生存戰／劇情關卡切換（2026-11-01 使用者：多一個關卡型的玩法） */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--k, #141210); }
.mode-pick button { padding: 6px 4px; cursor: pointer; font: 900 13px var(--cj, sans-serif); letter-spacing: 0.2em; color: var(--k, #141210); background: #fff; border: 0; }
.mode-pick button + button { border-left: 2px solid var(--k, #141210); }
.mode-pick button.on { color: #fff; background: var(--acc, #d6262c); }
body.poster-tall .mode-pick button { padding: 4px; font-size: 12px; }
/* 劇情關卡：選關 */
#stages { z-index: 30; }
#stages.manga { background: radial-gradient(ellipse at 50% 40%, rgba(40, 30, 26, 0.6), rgba(8, 6, 6, 0.92)); }
.stg-panel { width: min(460px, 100%); display: flex; flex-direction: column; gap: 8px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.stg-hero { font: 900 13px var(--cj, sans-serif); letter-spacing: 0.25em; color: var(--acc, #d6262c); }
.stg-list { display: flex; flex-direction: column; gap: 8px; }
.stg-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; text-align: left; color: var(--k, #141210); background: #fff; border: 2.5px solid var(--k, #141210); box-shadow: 4px 4px 0 var(--k, #141210); }
.stg-row:hover:not(.locked) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--acc, #d6262c); }
.stg-row:active:not(.locked) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--k, #141210); }
.stg-row.locked { cursor: default; opacity: 0.55; background: #ece6da; box-shadow: none; }
.stg-no { display: grid; place-items: center; height: 44px; font: 700 24px 'Rajdhani', var(--cj, sans-serif); color: #fff; background: var(--k, #141210); }
.stg-row.cleared .stg-no { background: var(--acc, #d6262c); }
.stg-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stg-main small { font: 900 11px var(--cj, sans-serif); letter-spacing: 0.2em; color: var(--acc, #d6262c); }
.stg-main b { font: 900 16px var(--cj, sans-serif); line-height: 1.3; }
.stg-main em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #6b5f52; }
.stg-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.stg-time { font: 700 12px 'Rajdhani', var(--cj, sans-serif); color: #6b5f52; }
.stg-lock .gi-btn, .stg-lock svg { width: 22px; height: 22px; }
.stg-note { margin: 0; font-size: 11.5px; font-weight: 700; line-height: 1.5; color: #6b5f52; }
/* 星星（菱形，跟作品分頁的點一樣的語言） */
.st-star { display: inline-block; width: 12px; height: 12px; margin: 0 2px; transform: rotate(45deg); border: 2px solid var(--k, #141210); background: #fff; }
.st-star.on { background: #f4c542; }
.r-stars { display: flex; justify-content: center; gap: 6px; margin: 2px 0 10px; }
.r-stars .st-star { width: 20px; height: 20px; border-width: 2.5px; margin: 0 6px; }
#btn-next { margin-bottom: 8px; }

/* 招式大字一律用日文（2026-11-01 使用者）：三組大字（煉獄鬼斬り／千八十煩悩鳳／死・獅子歌歌）同一套アンチック體，漢字上面標假名 */
.pdw .rgw-w { font-family: 'Zen Kaku Gothic New', 'Zen Old Mincho', 'Noto Sans TC', sans-serif; }
.rgw ruby { ruby-position: over; }
.rgw rt { font-family: 'Zen Old Mincho', serif; font-weight: 900; font-size: 0.2em; letter-spacing: 0.12em; line-height: 1.2;
  color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 2px #000, 0 0 5px #000, 0 0 10px rgba(0, 0, 0, 0.8); }
/* 覺醒等過場：有角色卡的角色用卡片（直式，不歪斜），標題移到卡片下面 */
.cutin.has-card .cutin-faces { top: 50%; height: auto; margin-top: calc(min(40vh, 290px) / -2 - 30px); transform: none; gap: 3vw; }
.cutin.has-card .cutin-face { width: auto; height: min(40vh, 290px); aspect-ratio: 1080 / 1500; overflow: visible; background: none; border: 0;
  box-shadow: 8px 8px 0 #141210, 0 14px 30px rgba(0, 0, 0, 0.45); transform: translateX(120vw) rotate(-4deg); }
.cutin.has-card.in .cutin-face { transform: translateX(0) rotate(-3deg); }
.cutin.has-card.out .cutin-face { transform: translateX(-120vw) rotate(-3deg); }
.cutin.has-card .cutin-face img { width: 100%; height: 100%; margin: 0; object-fit: cover; transform: none; }
.cutin.has-card .cutin-title { top: calc(50% + min(40vh, 290px) / 2 - 18px); }
/* 過場標題：跟招式大字同一套アンチック體；長名字（閻王三刀龍・一百三情飛龍侍極）自動縮到一行放得下 */
.cutin-title span { display: inline-block; white-space: nowrap; font-family: 'Zen Kaku Gothic New', 'Noto Sans TC', sans-serif; font-weight: 900;
  font-size: min(1em, calc(92vw / var(--n, 8))); }

/* 遊戲名稱 MANGA RUMBLE（2026-11-01 改名）：電腦版兩行（MANGA／紅字 RUMBLE），比 SURVIVAL 短，字可以大一點；手機一行 */
@media (hover: hover) and (pointer: fine) and (min-aspect-ratio: 4/3) { body.uih #title.manga h1 { font-size: 58px; } }
body.poster-tall #title h1 { font-size: clamp(20px, 6.8vw, 32px); }

/* 暫停鍵：原本米白底配黃色圖示幾乎看不到 → 紅底白槓、粗黑框，和擊殺／貨幣小框區隔開 */
body.uih #btn-pause { width: 40px; height: 40px; background: var(--acc); border: 3px solid var(--k); box-shadow: 3px 3px 0 var(--k); margin-left: 2px; }
body.uih #btn-pause .gi-pause { width: 62%; height: 62%; color: #fff; }
body.uih #btn-pause:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--k); }
/* 電腦版（滑鼠）：暫停鍵下方標出快捷鍵 Esc */
@media (hover: hover) and (pointer: fine) {
  body.uih #btn-pause { position: relative; overflow: visible; }
  body.uih #btn-pause::after { content: 'ESC'; position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); padding: 0 4px; font: 900 9px/14px var(--cj, sans-serif); letter-spacing: 0.06em; color: var(--k); background: var(--paper); border: 1.5px solid var(--k); border-radius: 2px; box-shadow: 1.5px 1.5px 0 var(--k); pointer-events: none; }
}
/* iOS Safari：按鈕裡的百分比高度算不出來，圖示會縮成一個點 → 改用固定像素並置中 */
body.uih #btn-pause { display: grid; place-items: center; padding: 0; -webkit-appearance: none; appearance: none; }
body.uih #btn-pause .gi-pause { width: 24px; height: 24px; min-width: 24px; margin: 0; flex: none; }
/* 升級卡片：角色名後面標出招式定位（近戰／遠程／控場…），細線隔開，不另外加框 */
.card .who .who-tag { font-style: normal; margin-left: 6px; padding-left: 6px; border-left: 1px solid currentColor; }
body.uih.ui-wanted #levelup.manga .card .who .who-tag { color: var(--wt-red); border-left-color: var(--wt-ink); }

/* ---------- 互動新手引導（js/guide.js）：聚光燈＋跳動箭頭＋一句話 ---------- */
.guide { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.guide.hidden { display: none; }
.guide.block { pointer-events: auto; }
.gd-hole { position: absolute; left: 0; top: 0; border-radius: 6px; box-shadow: 0 0 0 200vmax rgba(12, 10, 8, 0.72), 0 0 0 3px #fff inset; outline: 3px dashed var(--acc, #d6262c); outline-offset: 3px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), width 0.25s, height 0.25s, border-radius 0.25s; pointer-events: none; }
.gd-arrow { position: absolute; left: 0; top: 0; width: 40px; height: 52px; pointer-events: none; }
.gd-arrow svg { width: 40px; height: 52px; display: block; fill: var(--acc, #d6262c); stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; overflow: visible; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.6)); }
.gd-arrow.down svg { animation: gdBobD 0.7s ease-in-out infinite alternate; }
.gd-arrow.up svg { animation: gdBobU 0.7s ease-in-out infinite alternate; }
@keyframes gdBobD { from { transform: translateY(-6px); } to { transform: translateY(2px); } }
@keyframes gdBobU { from { transform: rotate(180deg) translateY(-6px); } to { transform: rotate(180deg) translateY(2px); } }
.gd-bubble { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); width: max-content; max-width: min(320px, calc(100vw - 24px)); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 3px; padding: 10px 14px 9px; color: #141210; background: #fbf6ea; border: 3px solid #141210; box-shadow: 4px 4px 0 var(--acc, #d6262c); pointer-events: none; text-align: left; }
.gd-bubble.pop { animation: gdPop 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes gdPop { from { opacity: 0; transform: translateX(-50%) scale(0.85); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.gd-step { align-self: flex-start; padding: 0 7px; color: #fff; background: var(--acc, #d6262c); font: 900 11px var(--cj, sans-serif); letter-spacing: 0.12em; }
.gd-title { font: 900 19px/1.3 var(--cj, sans-serif); letter-spacing: 0.04em; }
.gd-sub { font-size: 13.5px; font-weight: 700; line-height: 1.55; color: #3a3028; }
.gd-sub b { color: var(--acc, #d6262c); }
.gd-next { display: none; margin-left: auto; font: 800 11px var(--cj, sans-serif); color: #8a7a68; letter-spacing: 0.08em; animation: gdBlink 1.1s ease-in-out infinite alternate; }
.guide.block .gd-next { display: block; }
@keyframes gdBlink { from { opacity: 0.45; } to { opacity: 1; } }
.gd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.gd-skip { pointer-events: auto; padding: 2px 8px; color: #6b5f52; background: none; border: 1.5px solid #b9ab98; border-radius: 2px; font: 800 11px var(--cj, sans-serif); letter-spacing: 0.08em; cursor: pointer; }
/* 電腦版：選招卡片角落標出數字鍵（1～4），刷新選項標 R；手機不顯示 */
.key-no { display: none; }
@media (hover: hover) and (pointer: fine) {
  .card, .sp-art { position: relative; }
  .key-no { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; font: 900 12px/1 var(--ui-num, sans-serif); color: #141210; background: #fbf6ea; border: 2px solid #141210; border-radius: 3px; box-shadow: 2px 2px 0 #141210; pointer-events: none; }
  .card > .key-no { position: absolute; z-index: 3; top: 6px; left: 6px; }
  .sp-art > .key-no { position: absolute; z-index: 2; top: 5px; right: 7px; }
  .sp-art > .key-no ~ .sp-no, .sp-art > .sp-no { display: none; }
  #btn-reroll .key-no { margin-left: 8px; vertical-align: 1px; }
}