/* ════════════════════════════════════════════
   黑潮之途 — 主樣式
   ════════════════════════════════════════════ */

:root {
  --bg:          #0d0d0d;
  --surface:     #141414;
  --surface2:    #1c1c1c;
  --border:      #2a2a2a;
  --text:        #cbbfa8;
  --text-dim:    #6a5e4e;
  --text-bright: #e8dcc8;

  --accent:      #c8890a;
  --accent-dim:  #6a4a06;
  --night-accent: #5a7acc;
  --night-dim:   #2a3a5a;
  --dawn-color:  #e8d040;

  --success:     #3a7a3a;
  --danger-col:  #7a2020;

  /* 地圖格色 */
  --c-fog:     #080808;
  --c-empty:   #161616;
  --c-forest:  #121811;
  --c-ruins:   #080807;
  --c-cave:    #101217;
  --c-altar:   #170a1a;
  --c-rest:    #1a1206;
  --c-enemy:   #1a0606;
  --c-relic:   #06191a;

  --font-serif: 'Noto Serif TC', 'Source Han Serif TC', 'Source Han Serif TW', 'Songti TC', 'STSong', 'PMingLiU', 'MingLiU', serif;
  --font-sans:  'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', 'Arial', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
}

/* 襯線＝展示級（大標/儀式時刻）；小字回無襯線（14px 以下中文襯線難讀） */
.title-kicker,
.brief-num,
.brief-item b,
.btn-primary,
.btn-secondary,
.modal-content h2,
.combat-name,
.day-transition-title,
#gameover-title {
  font-family: var(--font-serif);
}

.modal-content h2,
.day-transition-title,
#gameover-title {
  font-weight: 900;
}

.btn-small,
.btn-tiny,
#right-panel h3,
.log-panel-title,
.guide-quest-title,
.inventory-title,
.char-detail-section-title,
.combat-log-section h3,
.library-pick-section h3,
.library-select-heading h3,
.note-title,
.relic-lore-title,
.equipment-note-title-text {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .05em;
}

#darkness-num,
.actions-count,
.combat-enemy-hp-text {
  font-variant-numeric: tabular-nums;
}

#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

body.combat-world-impact-surge #game-screen {
  animation: combat-world-impact-surge .46s cubic-bezier(.12, .74, .16, 1);
}

body.combat-world-impact-surge #event-modal:not(.hidden) .modal-content.combat-modal {
  animation: combat-modal-world-impact-surge .46s cubic-bezier(.12, .74, .16, 1);
}

body.combat-world-impact-finisher #game-screen {
  animation: combat-world-impact-finisher .56s cubic-bezier(.1, .76, .14, 1);
}

body.combat-world-impact-finisher #event-modal:not(.hidden) .modal-content.combat-modal {
  animation: combat-modal-world-impact-finisher .56s cubic-bezier(.1, .76, .14, 1);
}

body.combat-preimpact-world-surge #game-screen,
body.combat-preimpact-world-surge #event-modal:not(.hidden) .modal-content.combat-modal {
  animation: combat-preimpact-world-surge .16s steps(2, end);
}

body.combat-preimpact-world-finisher #game-screen,
body.combat-preimpact-world-finisher #event-modal:not(.hidden) .modal-content.combat-modal {
  animation: combat-preimpact-world-finisher .26s steps(3, end);
}

@keyframes combat-world-impact-surge {
  0%, 100% { transform: translate(0, 0); filter: none; }
  12% { transform: translate(-5px, 2px); filter: brightness(1.04) contrast(1.03); }
  28% { transform: translate(4px, -2px); }
  46% { transform: translate(-3px, -1px); }
  68% { transform: translate(2px, 1px); filter: brightness(1.02); }
}

@keyframes combat-world-impact-finisher {
  0%, 100% { transform: translate(0, 0); filter: none; }
  8% { transform: translate(-10px, 4px); filter: brightness(1.08) contrast(1.05) saturate(1.06); }
  20% { transform: translate(9px, -5px); }
  34% { transform: translate(-7px, -3px); filter: grayscale(.12) brightness(1.05); }
  52% { transform: translate(5px, 2px); }
  72% { transform: translate(-2px, 1px); filter: brightness(1.02); }
}

@keyframes combat-modal-world-impact-surge {
  0%, 100% { transform: translate(0, 0); filter: none; }
  12% { transform: translate(-6px, 3px); filter: brightness(1.04) contrast(1.03); }
  28% { transform: translate(5px, -3px); }
  46% { transform: translate(-3px, -1px); }
  68% { transform: translate(2px, 1px); filter: brightness(1.02); }
}

@keyframes combat-modal-world-impact-finisher {
  0%, 100% { transform: translate(0, 0); filter: none; }
  8% { transform: translate(-13px, 6px); filter: brightness(1.1) contrast(1.06) saturate(1.06); }
  20% { transform: translate(11px, -6px); }
  34% { transform: translate(-9px, -4px); filter: grayscale(.14) brightness(1.06); }
  52% { transform: translate(6px, 3px); }
  72% { transform: translate(-3px, 1px); filter: brightness(1.02); }
}

@keyframes combat-preimpact-world-surge {
  0%, 100% { filter: none; }
  34% { filter: grayscale(.16) brightness(1.2) contrast(1.1); }
  67% { filter: brightness(.82) contrast(1.2); }
}

@keyframes combat-preimpact-world-finisher {
  0%, 100% { filter: none; }
  22% { filter: grayscale(.55) brightness(1.48) contrast(1.22); }
  48% { filter: brightness(.72) contrast(1.28) saturate(.72); }
  74% { filter: grayscale(.3) brightness(1.26) contrast(1.14); }
}

/* ── Screens ─────────────────────────────── */
.screen { display: none; flex: 1; flex-direction: column; }
.screen.active { display: flex; }

/* ── Start Screen ────────────────────────── */
#start-screen {
  position: relative;
  min-height: 100vh;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
  background: #080908;
}

#start-screen::before,
#start-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#start-screen::before {
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.24) 68%, rgba(0,0,0,.66) 100%),
    linear-gradient(90deg, rgba(6,8,8,.94) 0%, rgba(6,9,9,.7) 36%, rgba(6,12,12,.34) 62%, rgba(6,7,7,.86) 100%),
    linear-gradient(180deg, rgba(4,4,4,.42) 0%, rgba(4,4,4,.08) 38%, rgba(4,4,4,.86) 100%);
  z-index: 1;
}

#start-screen::after {
  background:
    radial-gradient(circle at 28% 38%, rgba(201,145,47,.12), transparent 30%),
    radial-gradient(circle at 58% 50%, rgba(74,154,154,.16), transparent 34%),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 72%, rgba(255,255,255,.025) 0 1px, transparent 1.5px);
  background-size: auto, auto, 34px 34px, 46px 46px;
  mix-blend-mode: screen;
  opacity: .68;
  z-index: 2;
}

.start-bg {
  position: absolute;
  inset: 0;
  background: url("assets/start-bg.png") center / cover no-repeat;
  transform: scale(1.02);
}

.start-shell {
  position: relative;
  z-index: 3;
  width: min(1120px, calc(100% - 40px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(280px, .58fr);
  align-items: center;
  gap: 42px;
  padding: 46px 0 38px;
}

#start-screen .title-card {
  width: min(620px, 100%);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.title-kicker {
  color: #70b2a6;
  font-size: .78em;
  letter-spacing: .2em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.game-title {
  position: relative;
  display: inline-grid;
  isolation: isolate;
  margin: 0 0 18px;
  line-height: 1;
}

.game-title img {
  position: relative;
  z-index: 2;
  display: block;
  width: min(620px, 100%);
  height: auto;
  opacity: .92;
  filter:
    brightness(.82)
    saturate(.88)
    sepia(.08)
    hue-rotate(158deg)
    drop-shadow(0 22px 30px rgba(0,0,0,.72))
    drop-shadow(0 0 26px rgba(49,116,112,.18));
}

.game-title::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 7%;
  bottom: 9%;
  height: 22%;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.62), transparent 70%);
  filter: blur(10px);
  transform: translateY(16px);
}

.logo-mist {
  position: absolute;
  z-index: 3;
  left: 4%;
  right: 4%;
  bottom: -5%;
  height: 38%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 42% 55%, rgba(106, 178, 170, .18), transparent 62%),
    linear-gradient(180deg, transparent 0%, rgba(15, 32, 31, .22) 42%, rgba(5, 8, 8, .46) 100%);
  mix-blend-mode: screen;
  filter: blur(8px);
  opacity: .62;
}

.game-subtitle {
  color: rgba(235,225,200,.82);
  font-size: 1.04em;
  line-height: 1.85;
  max-width: 560px;
  margin: 0 0 30px;
}

.start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#start-screen .btn-primary,
#start-screen .btn-secondary {
  margin: 0;
  min-width: 148px;
}

.start-brief {
  display: grid;
  gap: 12px;
  align-self: end;
  margin-bottom: 9vh;
}

.brief-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(134, 157, 137, .18);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(15, 22, 20, .6), rgba(8, 9, 9, .42)),
    rgba(10,10,9,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.032), 0 14px 36px rgba(0,0,0,.24);
  backdrop-filter: blur(9px) saturate(.86);
}

.brief-num {
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 1.45em;
  text-align: center;
}

.brief-item span:last-child {
  color: var(--text-dim);
  font-size: .88em;
  line-height: 1.55;
}

.brief-item b {
  display: block;
  color: var(--text-bright);
  font-size: .95em;
  margin-bottom: 2px;
}

/* ── Buttons ─────────────────────────────── */
.btn-primary {
  display: block;
  margin: 8px auto;
  min-width: 140px;
  padding: 11px 28px;
  background: var(--accent);
  color: #0d0d0d;
  font-family: var(--font-serif);
  font-size: 1em;
  letter-spacing: .06em;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.btn-primary:hover:not(:disabled) { background: #e0a020; }
.btn-primary:disabled { opacity: .45; cursor: default; }

.btn-secondary {
  display: block;
  margin: 8px auto;
  min-width: 120px;
  padding: 9px 22px;
  background: transparent;
  color: var(--text-dim);
  font-size: .9em;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn-small {
  padding: 4px 10px;
  background: transparent;
  color: var(--text-dim);
  font-size: .9em;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.btn-small:hover { border-color: var(--accent); color: var(--accent); }
.btn-small:disabled { opacity: .4; cursor: default; }

/* 觸控/鍵盤可點回饋：觸控裝置沒有 hover，補 :focus-visible 與 :active */
.choice-btn:focus-visible,
.class-card:focus-visible,
.btn-small:focus-visible {
  outline: 2px solid rgba(201, 145, 47, .9);
  outline-offset: 2px;
}
.choice-btn:active:not(:disabled),
.class-card:active,
.btn-small:active:not(:disabled),
.char-card:active,
.map-cell:active {
  filter: brightness(1.22);
}

.btn-tiny {
  padding: 1px 6px;
  background: transparent;
  color: var(--accent);
  font-size: .85em;
  border: 1px solid var(--accent-dim);
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
}
.btn-tiny:hover { background: rgba(200,137,10,.12); }

/* ── Game Screen Layout ───────────────────── */
#game-screen {
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

#top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
}

#day-display {
  min-width: 0;
  flex-shrink: 0;
}

#day-label { font-size: 1em; color: var(--text-bright); }

.phase-day   { color: var(--accent);      font-size: .92em; margin-left: 10px; }
.phase-night { color: var(--night-accent); font-size: .92em; margin-left: 10px; }
.phase-dawn  { color: var(--dawn-color);   font-size: .92em; margin-left: 10px; }

#actions-display {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
  min-height: 34px;
  padding: 5px 10px;
  color: var(--text-dim);
  font-size: .92em;
  border: 1px solid rgba(201,145,47,.24);
  border-radius: 6px;
  background: rgba(201,145,47,.055);
}

.actions-label {
  color: var(--text-bright);
  font-weight: 600;
}

.action-pips {
  display: flex;
  gap: 4px;
}

.action-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(201,145,47,.48);
  background: rgba(0,0,0,.26);
}

.action-pip.filled {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(201,145,47,.36);
}

.actions-count {
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}

.actions-hint {
  color: #b7a57f;
  font-size: .86em;
  white-space: nowrap;
}

#actions-display.actions-low {
  border-color: rgba(224,160,32,.42);
}

#actions-display.actions-empty {
  border-color: rgba(224,160,32,.72);
  background: rgba(224,160,32,.12);
  box-shadow: 0 0 18px rgba(224,160,32,.12);
}

#actions-display.actions-empty .actions-hint {
  color: var(--accent);
}

#btn-end-day.end-day-ready {
  border-color: rgba(224,160,32,.9);
  background: linear-gradient(180deg, #d99a1d, #a96a12);
  color: #120d06;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(224,160,32,.26);
  transform: translateY(-1px);
}

#btn-end-day.end-day-ready:hover {
  border-color: #f0bd52;
  color: #090604;
  box-shadow: 0 0 24px rgba(224,160,32,.38);
}

#top-controls { display: flex; gap: 8px; align-items: center; }
#btn-open-log {
  display: none;
}
.dev-tool-btn {
  border-color: rgba(112, 178, 166, .45);
  color: #9bd4cb;
}

#main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Map Panel ───────────────────────────── */
#map-panel {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  gap: 8px;
}

.turn-end-float {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 5;
  max-width: calc(100% - 36px);
  padding: 8px 14px;
  color: #130d04;
  font-family: var(--font-sans);
  font-size: .95em;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  border: 1px solid rgba(255, 224, 150, .62);
  border-radius: 999px;
  background: linear-gradient(180deg, #e5aa35, #b87514);
  box-shadow: 0 8px 24px rgba(0,0,0,.32), 0 0 18px rgba(224,160,32,.28);
  transition: opacity .16s ease, transform .16s ease;
}

.turn-end-float.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.turn-end-float:hover {
  background: linear-gradient(180deg, #f0bb4c, #c98719);
  box-shadow: 0 8px 24px rgba(0,0,0,.34), 0 0 24px rgba(224,160,32,.38);
}

.turn-end-float:focus-visible {
  outline: 2px solid rgba(255, 230, 170, .9);
  outline-offset: 3px;
}

.guide-quest-card {
  width: 100%;
  box-sizing: border-box;
  align-self: center;
  flex: 0 0 auto;
  margin-top: 10px;
  padding: 8px 12px 9px;
  border: 1px solid rgba(112, 178, 166, .32);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(14, 42, 40, .78), rgba(13, 12, 10, .7)),
    rgba(7, 8, 8, .72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 28px rgba(0,0,0,.24),
    0 0 20px rgba(112, 178, 166, .12);
  animation: guide-quest-card-in .28s ease-out both;
}

.guide-quest-card.altar-stage {
  border-color: rgba(230, 178, 96, .46);
  background:
    linear-gradient(135deg, rgba(72, 48, 22, .74), rgba(14, 12, 10, .72)),
    rgba(7, 8, 8, .72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 28px rgba(0,0,0,.24),
    0 0 22px rgba(230, 178, 96, .15);
}

.guide-quest-step {
  margin-bottom: 3px;
  color: #8fd8cd;
  font-size: .72em;
  font-weight: 800;
  letter-spacing: .12em;
}

.guide-quest-card.altar-stage .guide-quest-step {
  color: #e7bb69;
}

.guide-quest-title {
  color: var(--text-bright);
  font-size: .92em;
  font-weight: 800;
  margin-bottom: 3px;
}

.guide-quest-body {
  color: var(--text-dim);
  font-size: .78em;
  line-height: 1.42;
}

#map-grid {
  display: grid;
  grid-template-columns: repeat(12, 46px);
  grid-template-rows:    repeat(12, 46px);
  gap: 2px;
  border: 0;
  transform-origin: 0 0;
  will-change: transform;
}

#map-viewport {
  position: relative;
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
  align-self: center;
  min-height: auto;
  overflow: hidden;
  border: 1px solid rgba(201,145,47,.5);
  background:
    linear-gradient(180deg, rgba(0,0,0,.72), rgba(21,18,14,.88));
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.8),
    inset 0 0 34px rgba(0,0,0,.75),
    0 0 26px rgba(201,145,47,.12);
}

.map-cell {
  width: 46px; height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: filter .08s;
  position: relative;
  user-select: none;
  border: 1px solid transparent;
}
.map-cell:hover:not(.fog) { filter: brightness(1.6); }

/* 迷霧 */
.map-cell.fog { background: var(--c-fog); cursor: default; }
.map-cell.fog:hover { filter: none; }

/* 地形 */
.map-cell.type-empty  { background: var(--c-empty); }
.map-cell.type-forest {
  background:
    radial-gradient(circle at 50% 48%, rgba(142, 170, 112, .20), rgba(9, 11, 8, .16) 68%),
    url("assets/terrain/forest-tile.png?v=2") center / 106% 106% no-repeat,
    var(--c-forest);
  box-shadow:
    inset 0 0 0 1px rgba(150, 170, 130, .08),
    inset 0 0 12px rgba(0, 0, 0, .24);
}
.map-cell.type-ruins {
  background:
    radial-gradient(circle at 50% 48%, rgba(188, 182, 158, .22), rgba(3, 3, 3, .24) 68%),
    url("assets/terrain/ruins-tile.png?v=2") center / 110% 110% no-repeat,
    var(--c-ruins);
  box-shadow:
    inset 0 0 0 1px rgba(222, 214, 190, .12),
    inset 0 0 11px rgba(0, 0, 0, .24);
}
.map-cell.type-cave {
  background:
    radial-gradient(circle at 50% 48%, rgba(92, 112, 176, .22), rgba(8, 8, 12, .14) 68%),
    url("assets/terrain/cave-tile.png?v=2") center / 108% 108% no-repeat,
    var(--c-cave);
  box-shadow:
    inset 0 0 0 1px rgba(139, 157, 224, .14),
    inset 0 0 12px rgba(0, 0, 0, .22);
}
.map-cell.type-altar {
  border-color: rgba(213, 166, 90, .34);
  background:
    radial-gradient(circle at 50% 45%, rgba(222, 169, 86, .38), rgba(70, 38, 30, .48) 58%, rgba(15, 7, 14, .42) 100%),
    url("assets/terrain/altar-tile.png") center / 118% 118% no-repeat,
    var(--c-altar);
  box-shadow:
    inset 0 0 16px rgba(244, 191, 104, .14),
    0 0 10px rgba(214, 146, 75, .18);
}
.map-cell.type-altar:not(.cleared):not(.has-player) {
  border-color: rgba(230, 178, 96, .58);
  box-shadow:
    inset 0 0 18px rgba(244, 191, 104, .20),
    0 0 15px rgba(214, 146, 75, .28);
}
.map-cell.type-rest {
  background:
    radial-gradient(circle at 50% 48%, rgba(151, 72, 24, .24), rgba(12, 7, 4, .52) 70%),
    url("assets/terrain/rest-tile.png") center / 116% 116% no-repeat,
    var(--c-rest);
}
#game-screen.night-mode .map-cell.type-rest:not(.cleared) {
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(122, 220, 255, .34);
  background:
    url("assets/terrain/rest-tile.png") center / 116% 116% no-repeat,
    transparent;
  box-shadow:
    inset 0 0 0 1px rgba(118, 230, 255, .06),
    0 0 11px rgba(78, 178, 255, .28);
}
#game-screen.night-mode .map-cell.type-rest:not(.cleared)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(146, 240, 255, .82), rgba(70, 162, 255, .55) 50%, rgba(20, 44, 114, .22) 76%, transparent 100%),
    radial-gradient(ellipse at 50% 72%, rgba(104, 176, 255, .48), rgba(18, 42, 108, .18) 64%, transparent 82%);
  -webkit-mask: url("assets/terrain/rest-tile.png") center / 116% 116% no-repeat;
  mask: url("assets/terrain/rest-tile.png") center / 116% 116% no-repeat;
  mix-blend-mode: color;
  opacity: .92;
}
#game-screen.night-mode .map-cell.type-rest:not(.cleared) > * {
  position: relative;
  z-index: 1;
}
.map-cell.type-rest.cleared {
  background:
    radial-gradient(circle at 50% 48%, rgba(82, 48, 32, .18), rgba(8, 6, 5, .58) 70%),
    url("assets/terrain/rest-tile-used.png") center / 116% 116% no-repeat,
    var(--c-rest);
}
.map-cell.type-enemy  {
  background:
    radial-gradient(circle at 50% 48%, rgba(190, 92, 84, .58) 0 30%, rgba(116, 46, 46, .32) 52%, rgba(36, 10, 12, .12) 72%, transparent 100%),
    #151111;
}
.map-cell.type-relic  { background: var(--c-relic); }

/* 玩家位置：永遠先找得到自己 */
.map-cell.has-player  {
  border-color: rgba(224, 160, 32, .6) !important;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,.46),
    0 0 0 2px rgba(224, 160, 32, .5),
    0 0 14px rgba(224, 160, 32, .3);
  animation: player-cell-breathe 2.4s ease-in-out infinite alternate;
}
@keyframes player-cell-breathe {
  from {
    box-shadow:
      inset 0 0 12px rgba(0,0,0,.46),
      0 0 0 2px rgba(224, 160, 32, .42),
      0 0 10px rgba(224, 160, 32, .22);
  }
  to {
    box-shadow:
      inset 0 0 12px rgba(0,0,0,.46),
      0 0 0 2px rgba(224, 160, 32, .66),
      0 0 18px rgba(224, 160, 32, .4);
  }
}

/* 可移動格高亮 */
.map-cell.adjacent-highlight { border-color: var(--accent-dim); }

.map-cell.guide-quest-target:not(.fog):not(.has-player) {
  border-color: rgba(255, 226, 152, .92);
  box-shadow:
    inset 0 0 16px rgba(255, 226, 152, .2),
    0 0 0 1px rgba(255, 226, 152, .5),
    0 0 18px rgba(255, 206, 116, .32);
  animation: guide-target-pulse 1.1s ease-in-out infinite alternate;
}

.map-cell.guide-quest-target.type-altar:not(.fog):not(.has-player) {
  border-color: rgba(255, 206, 116, .98);
  box-shadow:
    inset 0 0 18px rgba(255, 206, 116, .24),
    0 0 0 1px rgba(255, 206, 116, .62),
    0 0 22px rgba(255, 206, 116, .42);
}

.guide-quest-badge {
  position: absolute;
  left: 50%;
  top: -8px;
  z-index: 5;
  padding: 1px 5px 2px;
  border: 1px solid rgba(255, 230, 170, .62);
  border-radius: 999px;
  background: rgba(18, 14, 10, .92);
  color: #ffe6aa;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(255, 206, 116, .28);
}

/* 清除過的格子 */
.map-cell.type-enemy.cleared  { background: #0e0606; }
.map-cell.type-relic.cleared  { background: #060d0e; }
.map-cell.type-forest.cleared,
.map-cell.type-ruins.cleared,
.map-cell.type-cave.cleared {
  filter: brightness(.9) saturate(.82);
}
.map-cell.type-forest.cleared .cell-label,
.map-cell.type-ruins.cleared .cell-label,
.map-cell.type-cave.cleared .cell-label {
  color: rgba(214, 204, 178, .58);
  font-size: .66rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}

/* 未踏入的地形格（?）— 統一暗色調，弱化地形背景 */
.map-cell.type-forest:not(.has-player):not(.cleared) .cell-icon,
.map-cell.type-ruins:not(.has-player):not(.cleared) .cell-icon,
.map-cell.type-cave:not(.has-player):not(.cleared) .cell-icon,
.map-cell.type-altar:not(.has-player):not(.cleared) .cell-icon { color: var(--text-dim); font-size: 1.1em; }

.cell-icon  { font-size: 1.15em; line-height: 1; pointer-events: none; }
.cell-icon-img {
  width: min(92%, 44px);
  height: min(92%, 44px);
  object-fit: contain;
  filter:
    drop-shadow(0 0 5px rgba(201, 145, 47, .62))
    drop-shadow(0 2px 5px rgba(0, 0, 0, .62));
}
.cell-icon-img.dark-gift-map-icon {
  filter:
    drop-shadow(0 0 5px rgba(145, 66, 255, .72))
    drop-shadow(0 2px 5px rgba(0, 0, 0, .62));
}
.cell-icon-img.treasure-chest-map-icon {
  width: min(96%, 46px);
  height: min(96%, 46px);
}
.cell-icon-img.treasure-chest-weapon {
  filter:
    saturate(1.12)
    brightness(1.08)
    drop-shadow(0 0 6px rgba(238, 184, 72, .72))
    drop-shadow(0 2px 5px rgba(0, 0, 0, .62));
}
.cell-icon-img.treasure-chest-broken {
  filter:
    saturate(.72)
    sepia(.28)
    hue-rotate(-10deg)
    brightness(.78)
    drop-shadow(0 0 5px rgba(118, 54, 31, .68))
    drop-shadow(0 2px 5px rgba(0, 0, 0, .7));
}
.cell-icon-img.enemy-map-icon {
  width: min(98%, 47px);
  height: min(98%, 47px);
}
.cell-icon-img.relic-map-icon,
.cell-icon-img.dropped-relic-map-icon {
  width: min(86%, 41px);
  height: min(86%, 41px);
  object-fit: contain;
  filter:
    drop-shadow(0 0 7px rgba(122, 238, 218, .5))
    drop-shadow(0 2px 5px rgba(0, 0, 0, .72));
}
.cell-icon-img.rescue-map-icon,
.cell-icon-img.unique-strong-map-icon,
.cell-icon-img.corrupted-map-icon {
  width: min(98%, 47px);
  height: min(98%, 47px);
  object-fit: contain;
  filter:
    drop-shadow(0 0 7px rgba(213, 55, 32, .62))
    drop-shadow(0 2px 6px rgba(0, 0, 0, .74));
}
.cell-icon-img.rescue-map-icon {
  filter:
    drop-shadow(0 0 7px rgba(232, 185, 70, .72))
    drop-shadow(0 2px 6px rgba(0, 0, 0, .74));
}
.cell-icon-img.enemy-map-cage_warden {
  filter:
    drop-shadow(0 0 6px rgba(232, 185, 70, .78))
    drop-shadow(0 2px 6px rgba(0, 0, 0, .72));
}
.cell-icon-img.echo-site-map-icon {
  width: min(98%, 48px);
  height: min(98%, 48px);
  filter:
    brightness(1.08)
    saturate(1.12)
    drop-shadow(0 0 7px rgba(117, 231, 211, .66))
    drop-shadow(0 0 9px rgba(201, 145, 47, .34))
    drop-shadow(0 2px 6px rgba(0, 0, 0, .72));
}
.cell-icon-img.battle-map-icon {
  width: min(94%, 45px);
  height: min(94%, 45px);
  filter:
    drop-shadow(0 0 6px rgba(213, 55, 32, .7))
    drop-shadow(0 2px 6px rgba(0, 0, 0, .72));
}
.cell-label { font-size: .66em; color: var(--text-dim); pointer-events: none; }
.cell-drop-badge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(230,167,57,.78);
  border-radius: 50%;
  background: rgba(18, 14, 10, .88);
  box-shadow: 0 0 10px rgba(230,167,57,.34);
  font-size: .72em;
  line-height: 1;
  pointer-events: none;
  z-index: 3;
}
.cell-q-badge {
  position: absolute; top: 2px; right: 3px;
  font-size: .58em; color: #777; font-weight: 700;
  line-height: 1; pointer-events: none;
}
.rest-cooldown-badge {
  position: absolute;
  top: 2px;
  right: 3px;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border: 1px solid rgba(225, 151, 74, .38);
  border-radius: 999px;
  background: rgba(20, 10, 6, .88);
  color: #e1a25c;
  font-size: 9px;
  font-weight: 800;
  line-height: 10px;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 0 5px rgba(0, 0, 0, .9);
}

.render-error {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  color: var(--danger);
  font-size: .9em;
  padding: 12px;
  text-align: center;
}

#map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.legend-item { font-size: .85em; color: var(--text-dim); }

#map-hint { font-size: .85em; color: var(--text-dim); text-align: center; }

@keyframes guide-quest-card-in {
  0% { opacity: 0; transform: translateY(-8px); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes guide-target-pulse {
  0% { filter: brightness(1); transform: translateY(0); }
  100% { filter: brightness(1.28); transform: translateY(-1px); }
}

/* 黑夜模式不要濾整張地圖，避免黑暗怪警戒色被轉色。 */
#game-screen.night-mode #map-grid  {
  filter: none;
  background:
    radial-gradient(circle at 50% 44%, rgba(30, 43, 88, .24), transparent 46%),
    linear-gradient(180deg, rgba(3, 4, 14, .96), rgba(1, 1, 7, .98));
  border-color: rgba(84, 105, 170, .42);
  box-shadow:
    inset 0 0 0 1px rgba(8, 12, 34, .92),
    inset 0 0 54px rgba(0, 0, 0, .92),
    0 0 30px rgba(31, 48, 112, .24);
}
#game-screen.night-mode .map-cell.type-empty:not(.fog):not(.has-player)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 44%, rgba(32, 43, 92, .12), transparent 46%),
    rgba(3, 5, 18, .48);
  mix-blend-mode: multiply;
}
#game-screen.night-mode .map-cell.has-player::after,
#game-screen.night-mode .map-cell:hover::after {
  background:
    radial-gradient(circle at 50% 44%, rgba(64, 73, 122, .16), transparent 48%),
    rgba(3, 5, 18, .28);
}
#game-screen.night-mode .map-cell.type-empty:not(.fog):not(.has-player) {
  border-color: rgba(84, 105, 170, .16);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, .64);
}
#game-screen.night-mode .map-cell.has-player .cell-icon,
#game-screen.night-mode .map-cell.has-player .cell-label {
  color: #e4bf70;
  text-shadow: 0 0 12px rgba(230, 167, 57, .45);
}
#game-screen.night-mode #map-panel { background: #080812; }
#game-screen.night-mode #log-panel { background: #080810; }
#game-screen.night-mode #top-bar   { background: #0a0a16; border-color: #1a1a3a; }
#game-screen.night-mode             { background: #09090f; }

/* 黎明 */
#game-screen.dawn-mode #map-grid { filter: brightness(1.2) sepia(.2); }

/* ── Right Panel ─────────────────────────── */
#right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 8px 14px;
  gap: 12px;
  min-width: 240px;
}

#right-panel h3 {
  font-size: .9em;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.panel-hint     { font-size: .8em; font-weight: normal; text-transform: none; }
.panel-small-text { font-size: .85em; color: var(--text-dim); }

/* ── Character Cards ─────────────────────── */
.char-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 8px 10px;
  margin-bottom: 14px;
  border-radius: 1px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 第一列：圖示 + 名字 + 職業 + HP 條 */
.card-title-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 4px;
}
.card-icon  { font-size: 1.1em; flex-shrink: 0; }
.card-name  { font-size: 1em; color: var(--text-bright); font-weight: 600; }
.card-cls   { font-size: .78em; color: var(--text-dim); margin-right: auto; }
.card-hp-wrap { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

/* HP 條（沿用舊版） */
.hp-bar-wrap { display: flex; align-items: center; gap: 6px; }
.hp-bar {
  width: 60px;
  height: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.hp-fill           { height: 100%; background: #3a7a3a; transition: width .25s; }
.hp-fill.low       { background: #7a4a18; }
.hp-fill.critical  { background: #7a1818; }
.hp-text           { font-size: .8em; color: var(--text-dim); white-space: nowrap; }

/* 資訊列（能力 / 聖物 / 狀態） */
.card-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: .84em;
  line-height: 1.35;
}
.card-label {
  color: var(--text-dim);
  flex-shrink: 0;
  width: 2.4em;
  text-align: right;
}
.card-val { color: var(--text); flex: 1; min-width: 0; }
.card-val.dim { color: var(--text-dim); }

/* 卡片雙欄佈局 */
.card-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 6px 10px;
  margin-top: 2px;
}
.card-col-left { display: flex; flex-direction: column; gap: 2px; }
.card-col-right {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-left: 1px solid var(--border);
  padding-left: 8px;
}
.card-slot { font-size: .84em; min-width: 0; }
.card-slot-label {
  font-size: .82em;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.card-item-name {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-bright);
  font-weight: 600;
  margin-bottom: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.equipment-inline-icon {
  width: 1.45em;
  height: 1.45em;
  object-fit: contain;
  flex: 0 0 auto;
  vertical-align: -0.35em;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
.equipment-reward-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-bright);
  font-weight: 700;
}
.equipment-reward-count {
  color: var(--accent);
  margin-left: 2px;
}
.card-item-desc {
  color: var(--text-dim);
  line-height: 1.4;
  font-size: .94em;
}

/* 狀態顏色 */
.status-ok       { color: #5a9a5a; }
.status-low      { color: #aa7030; }
.status-critical { color: #9a2020; }
.status-shield   { color: #4a7aaa; }

/* 聖物文字：一個聖物固定一行，名字彈性收縮、查看鈕不被擠落行 */
.card-relic-line {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.card-relic-line + .card-relic-line { margin-top: 2px; }
.card-relic-name {
  display: inline-block;
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 48px);
  color: #4a9a9a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.card-relic-line .card-relic-name { max-width: none; }
.card-relic-line .btn-tiny { flex: 0 0 auto; }
.card-relic-name.fused  { color: #9a5aaa; }

/* 裝備列 */
.card-resonance-row {
  align-items: flex-start;
}
.card-resonance-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.card-resonance-tag {
  display: inline-flex;
  max-width: 100%;
  padding: 1px 5px;
  border: 1px solid rgba(74, 168, 152, .45);
  background: rgba(64, 150, 138, .12);
  color: #8fd8cd;
  font-size: .9em;
  line-height: 1.35;
}

.card-equip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.equip-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .78em;
  background: rgba(160,128,96,.1);
  border: 1px solid rgba(160,128,96,.25);
  padding: 1px 5px;
  color: #a08060;
}

.inventory-panel {
  margin-top: 8px;
  padding: 14px 14px 16px;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .16)),
    url("assets/ui/inventory-panel-bg.png") center / 100% 100% no-repeat;
}
.inventory-title {
  display: flex;
  justify-content: space-between;
  color: var(--accent);
  font-size: .86em;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 0 4px;
  text-shadow: 0 0 10px rgba(201, 145, 47, .22);
}
.inventory-title span {
  color: var(--text-dim);
  font-weight: 400;
}
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.inventory-slot {
  min-height: 86px;
  padding: 8px;
  border: 1px solid rgba(160,128,96,.25);
  background: rgba(160,128,96,.08);
  font-size: .8em;
}
.inventory-slot.empty {
  display: grid;
  place-items: center;
  color: transparent;
  border: 0;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .12)),
    url("assets/ui/inventory-empty-slot-bg.png") center / 100% 100% no-repeat;
}
.inventory-item-main {
  color: var(--text-bright);
  font-weight: 700;
  margin-bottom: 4px;
}
.inventory-item-desc {
  color: var(--text-dim);
  line-height: 1.35;
  margin-bottom: 5px;
}

.char-flavor {
  font-size: .78em;
  color: var(--text-dim);
  margin-top: 3px;
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 3px;
}

.char-slot-empty {
  font-size: .85em;
  color: var(--text-dim);
  padding: 8px 4px;
  border: 1px dashed var(--border);
  text-align: center;
  margin-bottom: 4px;
}

/* ── Relic List ──────────────────────────── */
.relic-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  margin-bottom: 3px;
  font-size: .92em;
}
.relic-item.resonating { border-color: #2e6f63; }
.relic-icon   { flex-shrink: 0; }
.relic-name   { color: #4a9a9a; font-weight: 600; }
.relic-effect { flex-basis: 100%; color: var(--text-dim); font-size: .9em; line-height: 1.4; }
.relic-holder { color: var(--text-dim); margin-left: auto; font-size: .85em; white-space: nowrap; }
.relic-empty  { font-size: .9em; color: var(--text-dim); padding: 4px; }

/* ── Resonance Panel ─────────────────────── */
#resonance-panel {
  background: #081714;
  border: 1px solid #1d4f46;
  padding: 8px 10px;
  font-size: .9em;
}
.resonance-item  { margin-bottom: 6px; color: #8fd8cd; }
.resonance-item b { color: #aee8dd; }
.resonance-desc  { color: var(--text-dim); font-size: .9em; }

.effect-tag {
  font-size: .82em;
  color: #a09050;
  padding: 2px 0;
  border-bottom: 1px solid var(--border);
}

/* ── Log Panel（左欄） ───────────────────── */
#log-panel {
  width: 210px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 8px 10px;
  gap: 0;
}
.log-panel-title {
  font-size: .82em;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.log-panel-close {
  display: none;
}
#log-messages   { display: flex; flex-direction: column; gap: 2px; }
.log-msg        { font-size: .86em; color: var(--text-dim); line-height: 1.6; word-break: break-all; padding-left: 6px; }
.log-msg.important { color: var(--text-bright); }
.log-msg.danger    { color: #b04040; }
.log-msg.reward    { color: #4a8a4a; }
.log-msg.night     { color: var(--night-accent); }
.log-msg.combat    { color: #a07020; }
.log-msg.dim       { color: #444; }

#log-panel #guide-quest-card {
  order: 10;
}

.log-day-header {
  font-size: .78em;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 0 2px;
  border-bottom: 1px solid rgba(200,137,10,.25);
  margin-bottom: 2px;
  letter-spacing: .04em;
}
.log-day-group {
  margin-top: 4px;
}
.log-day-summary {
  font-size: .78em;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  padding: 2px 0;
  user-select: none;
  letter-spacing: .04em;
}
.log-day-summary:hover { color: #888; }
.log-day-group[open] .log-day-summary { color: #777; }
.log-day-group .log-msg { padding-left: 10px; }

/* ── Modals ──────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.modal.hidden { display: none; }

.modal-content {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .24)),
    url("assets/ui/modal-panel-frame.png") center / 100% 100% no-repeat,
    var(--surface2);
  border: 0;
  border-radius: 12px;
  padding: 34px 38px 28px;
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
  height: min(560px, calc(100vh - 36px));
  max-height: calc(100vh - 36px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 42px rgba(0,0,0,.52),
    0 18px 60px rgba(0,0,0,.62),
    0 0 28px rgba(201,145,47,.1);
}
.modal-content.wide {
  width: min(900px, calc(100vw - 32px));
  max-width: 900px;
}
.modal-content.combat-modal {
  position: relative;
  width: min(940px, calc(100vw - 32px));
  max-width: 940px;
  height: min(720px, calc(100vh - 24px));
}
.modal-content.narrative-modal {
  width: min(980px, calc(100vw - 32px));
  max-width: 980px;
  height: min(680px, calc(100vh - 36px));
}
.modal-content.tutorial-modal {
  height: min(500px, calc(100vh - 36px));
  padding-top: 28px;
  padding-bottom: 24px;
}
.modal-content.squad-select-layout {
  background:
    linear-gradient(180deg, rgba(32, 30, 26, .94), rgba(12, 12, 11, .96));
  border: 1px solid var(--border);
  max-width: 1000px;
  width: min(1000px, calc(100vw - 28px));
  height: auto;
  max-height: 88vh;
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}
.squad-select-detail {
  flex: 0 0 230px;
  padding: 20px 16px;
  overflow-y: auto;
  background: var(--surface);
  min-height: 400px;
}
#squad-detail-left  { border-right: 1px solid var(--border); }
#squad-detail-right { border-left:  1px solid var(--border); }
.squad-select-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 22px 20px 0;
  overflow: hidden;
}

.squad-select-center #squad-select {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  padding-bottom: 8px;
}

/* 手機版選角：點卡片彈出的角色詳情視窗（桌面側欄可見時不會觸發） */
.mobile-class-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, .74);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mobile-class-detail-modal {
  width: 100%;
  max-width: 560px;
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface, #17130c);
  border: 1px solid var(--border, #3a3122);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 16px calc(16px + env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
}
.mobile-class-detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  position: sticky;
  bottom: 0;
}
.mobile-class-detail-actions .mcd-select {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: #c79a3e;
  color: #1c1206;
  font-weight: 700;
  font-size: 1.02em;
  cursor: pointer;
}
.mobile-class-detail-actions .mcd-select.mcd-remove {
  background: #6e2c2c;
  color: #f3e7e7;
}
.mobile-class-detail-actions .mcd-back {
  flex: 0 0 auto;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--surface2, #221c12);
  color: var(--text, #e8dec6);
  border: 1px solid var(--border, #3a3122);
  cursor: pointer;
}
.mobile-class-detail-actions .mcd-full-note {
  flex: 1;
  align-self: center;
  text-align: center;
  color: #d9b27a;
  font-size: .9em;
}

.squad-actions {
  flex: 0 0 auto;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: 10px;
  justify-content: center;
  margin: 0 -20px;
  padding: 12px 18px 14px;
  width: auto;
  background:
    linear-gradient(180deg, rgba(14, 13, 11, .28), rgba(14, 13, 11, .94) 45%, rgba(10, 10, 9, .98));
  box-shadow: 0 -14px 24px rgba(0, 0, 0, .34);
}

/* 詳情面板 */
.char-detail-placeholder {
  color: var(--text-dim);
  font-size: .9em;
  margin-top: 40px;
  text-align: center;
}
.char-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.char-detail-icon { font-size: 2.4em; }
.char-detail-icon.class-avatar {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  display: block;
  border: 1px solid rgba(201,145,47,.46);
  border-radius: 10px;
  overflow: hidden;
  background: #070706;
  box-shadow: inset 0 0 12px rgba(0,0,0,.55), 0 0 14px rgba(201,145,47,.14);
}
.char-detail-icon.class-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.char-detail-name { font-size: 1.15em; font-weight: 700; color: var(--text-bright); }
.char-detail-flavor { font-size: .85em; color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
.char-detail-section {
  border-top: 1px solid var(--border);
  padding: 12px 0 8px;
}
.char-detail-section-title {
  font-size: .8em;
  color: var(--accent-dim);
  letter-spacing: .05em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.char-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: .9em;
  margin-bottom: 4px;
}
.detail-label { color: var(--text-dim); }
.char-detail-passive-name {
  font-size: .92em;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.char-detail-passive-detail {
  font-size: .85em;
  color: var(--text-dim);
  line-height: 1.5;
}
.passive-section-list {
  display: grid;
  gap: 7px;
}
.passive-section {
  display: grid;
  gap: 3px;
}
.passive-section-label {
  color: var(--accent);
  font-size: .78em;
  font-weight: 700;
  line-height: 1.2;
}
.passive-section-text {
  color: var(--text-dim);
  font-size: .88em;
  line-height: 1.5;
}
.char-detail-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
}
.char-detail-item-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .95em;
  color: var(--text-bright);
  margin-bottom: 5px;
  font-weight: 600;
}
.char-detail-item-desc {
  font-size: .84em;
  color: var(--text-dim);
  line-height: 1.55;
}

.modal-content h2 {
  font-family: var(--font-serif);
  font-size: 1.25em;
  color: var(--accent);
  margin-bottom: 12px;
  line-height: 1.4;
  flex: 0 0 auto;
}

.modal-content.tutorial-modal h2 {
  margin-bottom: 6px;
}

#modal-desc {
  font-size: 1em;
  color: var(--text);
  line-height: 1.48;
  margin-bottom: 10px;
  white-space: pre-wrap;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 10px;
  scrollbar-gutter: stable;
}

.event-illustration-img {
  display: block;
  position: absolute;
  right: 74px;
  bottom: 104px;
  width: min(54%, 500px);
  max-height: 260px;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
  filter:
    drop-shadow(0 12px 22px rgba(0, 0, 0, .5))
    drop-shadow(0 0 20px rgba(126, 72, 190, .2));
}

.event-backdrop-img {
  position: absolute;
  inset: 12px;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  border-radius: 8px;
  overflow: hidden;
}

.modal-content.event-backdrop-modal::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0;
  pointer-events: none;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 0, 0, .1), rgba(0, 0, 0, .54) 76%),
    linear-gradient(180deg, rgba(0, 0, 0, .48), rgba(0, 0, 0, .58));
}

.modal-content.event-backdrop-modal h2 {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}

.modal-content.event-backdrop-modal #modal-desc {
  color: #f3ead4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .92);
}

.modal-content.event-backdrop-modal .event-backdrop-img.dark-avatar-chase-backdrop {
  background-position: 50% 42%;
}

.modal-content.event-backdrop-modal:has(.dark-avatar-chase-backdrop) {
  width: min(900px, calc(100vw - 32px));
  max-width: 900px;
  min-height: min(620px, calc(100dvh - 44px));
}

.modal-content.event-backdrop-modal:has(.dark-avatar-chase-backdrop)::after {
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 0, 0, .04), rgba(0, 0, 0, .42) 62%, rgba(0, 0, 0, .72) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .5) 58%, rgba(0, 0, 0, .82) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .52) 0%, rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, .46) 100%);
}

.modal-content.event-backdrop-modal:has(.dark-avatar-chase-backdrop) #modal-desc {
  max-width: min(560px, 72%);
}

.modal-content.event-backdrop-modal:has(.dark-avatar-chase-backdrop) #modal-choices {
  position: relative;
  z-index: 1;
}

.modal-content.tutorial-backdrop-modal {
  width: min(900px, calc(100vw - 32px));
  max-width: 900px;
}

.modal-content.tutorial-backdrop-modal.event-backdrop-modal::after {
  background:
    linear-gradient(90deg, rgba(4, 3, 2, .88) 0%, rgba(5, 4, 3, .72) 48%, rgba(4, 3, 2, .32) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .24), rgba(0, 0, 0, .62));
}

.modal-content.tutorial-backdrop-modal.event-backdrop-modal:has(.tutorial-backdrop-dark-avatar)::after {
  background:
    linear-gradient(90deg, rgba(4, 3, 2, .24) 0%, rgba(4, 3, 2, .34) 42%, rgba(4, 3, 2, .78) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .58));
}

.modal-content.tutorial-backdrop-modal .event-backdrop-img.tutorial-backdrop-explore {
  background-position: 60% 46%;
}

.modal-content.tutorial-backdrop-modal .event-backdrop-img.tutorial-backdrop-relics {
  background-position: 58% 46%;
}

.modal-content.tutorial-backdrop-modal .event-backdrop-img.tutorial-backdrop-equipment {
  background-position: 55% 48%;
}

.modal-content.tutorial-backdrop-modal .event-backdrop-img.tutorial-backdrop-dark-avatar {
  background-position: 44% 50%;
}

.modal-content.tutorial-backdrop-modal .event-backdrop-img.tutorial-backdrop-notes {
  background-position: 58% 48%;
}

.modal-content.tutorial-backdrop-modal #modal-desc {
  margin-top: 8px;
}

.tutorial-page-event .tutorial-top-spacer {
  height: 10px;
}

.tutorial-page-event .tutorial-layout {
  grid-template-columns: minmax(0, 1fr);
  min-height: 260px;
  align-items: center;
}

.tutorial-page-event .tutorial-copy {
  width: min(520px, 62%);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .94);
}

.tutorial-page-event .tutorial-copy p {
  color: #f2e7d2;
}

.tutorial-page-event .tutorial-points li {
  color: #e3d0a8;
}

.tutorial-page-dark-avatar .tutorial-layout {
  align-items: end;
}

.tutorial-page-dark-avatar .tutorial-copy {
  justify-self: end;
  width: min(470px, 48%);
}

.tutorial-page-dark-avatar .tutorial-art {
  position: absolute;
  left: 112px;
  top: 96px;
  z-index: 3;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tutorial-page-dark-avatar .tutorial-dark-grid {
  grid-template-columns: repeat(3, 46px);
  gap: 14px;
}

.tutorial-page-dark-avatar .tutorial-dark-token {
  width: 46px;
  height: 46px;
}

.tutorial-page-dark-avatar .tutorial-dark-token img {
  width: 38px;
  height: 38px;
}

.tutorial-page-dark-avatar .tutorial-dark-token span {
  top: -5px;
  right: -9px;
  width: 22px;
  height: 22px;
  font-size: .9rem;
  box-shadow: 0 0 10px var(--monster-glow-b);
}

.modal-content.event-intro-scene .event-backdrop-img {
  animation: event-intro-image-focus 1.25s cubic-bezier(.16, .72, .18, 1) both;
}

.modal-content.event-intro-scene .event-illustration-img {
  animation: event-intro-illustration-focus 1.2s cubic-bezier(.16, .72, .18, 1) both;
}

.modal-content.event-intro-scene h2 {
  animation: event-intro-title-in .42s ease-out .38s both;
}

.modal-content.event-intro-scene #modal-desc {
  animation: event-intro-copy-in .44s ease-out .56s both;
}

.modal-content.event-intro-scene #modal-choices {
  animation: event-intro-copy-in .38s ease-out .78s both;
}

.modal-content.event-intro-scene.event-backdrop-modal::after {
  animation: event-intro-backdrop-shade 1.25s ease-out both;
}

.modal-content.fate-roll-success .event-backdrop-img {
  animation: fate-success-glow .72s ease-out;
  filter: brightness(1.12) saturate(1.08);
}

.modal-content.fate-fail-blood .event-backdrop-img {
  animation: fate-blood-impact .7s ease-out;
  filter: brightness(.96) saturate(1.32);
}

.modal-content.fate-fail-night .event-backdrop-img {
  animation: fate-night-surge .9s ease-out;
  filter: brightness(1.02) saturate(1.24);
}

.modal-content.fate-fail-life .event-backdrop-img {
  animation: fate-life-erasure .95s ease-out;
  filter: brightness(.9) saturate(1.18);
}

.modal-content.fate-fail-blood {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 42px rgba(70, 0, 0, .62),
    0 18px 60px rgba(0,0,0,.62),
    0 0 32px rgba(170, 22, 18, .22);
}

.modal-content.fate-fail-night {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 42px rgba(42, 14, 86, .62),
    0 18px 60px rgba(0,0,0,.62),
    0 0 34px rgba(122, 64, 220, .24);
}

.modal-content.fate-fail-life {
  animation: fate-modal-soul-shake .58s ease-out;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 48px rgba(44, 0, 68, .68),
    0 18px 60px rgba(0,0,0,.66),
    0 0 38px rgba(94, 42, 190, .28);
}

.modal-content.event-backdrop-modal.fate-roll-success::before,
.modal-content.event-backdrop-modal.fate-fail-blood::before,
.modal-content.event-backdrop-modal.fate-fail-night::before,
.modal-content.event-backdrop-modal.fate-fail-life::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  border-radius: 8px;
  pointer-events: none;
}

.modal-content.event-backdrop-modal.fate-roll-success::before {
  animation: fate-success-flash .85s ease-out forwards;
  background: radial-gradient(circle at 50% 42%, rgba(255, 234, 150, .72), transparent 50%);
}

.modal-content.event-backdrop-modal.fate-fail-blood {
  animation: fate-modal-blood-shake .5s ease-out;
}

.modal-content.event-backdrop-modal.fate-fail-blood::before {
  animation: fate-blood-flash .8s ease-out forwards;
  background:
    radial-gradient(circle at 50% 48%, rgba(210, 15, 10, .68), transparent 46%),
    linear-gradient(180deg, rgba(70, 0, 0, .58), rgba(0, 0, 0, .18));
}

.modal-content.event-backdrop-modal.fate-fail-night {
  animation: fate-modal-night-pulse .65s ease-out;
}

.modal-content.event-backdrop-modal.fate-fail-night::before {
  animation: fate-night-flash .95s ease-out forwards;
  background:
    radial-gradient(circle at 50% 48%, rgba(126, 54, 255, .58), transparent 52%),
    radial-gradient(circle at 50% 12%, rgba(18, 0, 40, .88), transparent 68%);
}

.modal-content.event-backdrop-modal.fate-fail-life::before {
  animation: fate-life-flash 1.05s ease-out forwards;
  background:
    radial-gradient(circle at 58% 32%, rgba(160, 72, 255, .62), transparent 42%),
    linear-gradient(90deg, rgba(0, 0, 0, .82), transparent 34%, rgba(0, 0, 0, .74));
}

.modal-desc-result.fate-result-reveal {
  transform-origin: left center;
  animation: fate-result-text-in .34s ease-out both;
}

.modal-desc-result.fate-fail-blood {
  color: #ffd8c9;
  text-shadow: 0 0 9px rgba(210, 24, 18, .72), 0 2px 8px rgba(0, 0, 0, .95);
}

.modal-desc-result.fate-fail-night {
  color: #e9dbff;
  text-shadow: 0 0 11px rgba(126, 72, 255, .72), 0 2px 8px rgba(0, 0, 0, .95);
}

.modal-desc-result.fate-fail-life {
  color: #eadcff;
  text-shadow: 0 0 13px rgba(168, 94, 255, .84), 0 2px 8px rgba(0, 0, 0, .95);
  animation-name: fate-result-text-erased;
  animation-duration: .52s;
}

.modal-content.event-hit,
.modal-content.event-dark-hit,
.modal-content.event-clear,
.modal-content.event-ambush,
.modal-content.event-scene,
.modal-content.event-discover,
.modal-content.event-reward,
.modal-content.event-quiet {
  animation: event-fx-pulse .42s ease-out;
}

.modal-content.event-hit {
  animation-name: event-hit-shake;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 42px rgba(95, 0, 0, .58),
    0 18px 60px rgba(0,0,0,.62),
    0 0 30px rgba(185, 34, 24, .2);
}

.modal-content.event-dark-hit {
  animation-name: event-dark-pulse;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 42px rgba(44, 12, 88, .62),
    0 18px 60px rgba(0,0,0,.62),
    0 0 34px rgba(120, 65, 220, .22);
}

.modal-content.event-clear {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 42px rgba(40, 98, 88, .48),
    0 18px 60px rgba(0,0,0,.62),
    0 0 26px rgba(112, 178, 166, .18);
}

.modal-content.event-scene {
  animation-name: event-scene-breathe;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 42px rgba(124, 92, 50, .24),
    0 18px 60px rgba(0,0,0,.62),
    0 0 24px rgba(180, 128, 62, .12);
}

.modal-content.event-discover {
  animation-name: event-discover-breathe;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 46px rgba(186, 138, 46, .42),
    0 18px 60px rgba(0,0,0,.62),
    0 0 34px rgba(230, 178, 78, .2);
}

.modal-content.event-reward {
  animation-name: event-reward-breathe;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 42px rgba(154, 102, 36, .34),
    0 18px 60px rgba(0,0,0,.62),
    0 0 28px rgba(224, 164, 72, .16);
}

.modal-content.resonance-awaken {
  overflow-x: hidden;
  width: min(820px, calc(100vw - 32px));
  max-width: 820px;
  height: min(680px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  background:
    linear-gradient(180deg, rgba(8, 5, 3, .24), rgba(8, 5, 3, .52)),
    url("assets/ui/modal-panel-frame.png") center / 100% 100% no-repeat,
    var(--surface2);
  animation: resonance-awaken-modal .7s cubic-bezier(.16, .72, .18, 1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 54px rgba(40, 132, 128, .34),
    inset 0 0 92px rgba(174, 112, 38, .16),
    0 20px 70px rgba(0,0,0,.68),
    0 0 42px rgba(88, 190, 178, .18);
}

.modal-content.resonance-awaken h2,
.modal-content.resonance-awaken #modal-desc,
.modal-content.resonance-awaken #modal-choices {
  position: relative;
  z-index: 3;
}

.modal-content.resonance-awaken #modal-desc {
  overflow-x: hidden;
}

.modal-content.event-quiet {
  animation-name: event-quiet-breathe;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 38px rgba(120, 112, 92, .18),
    0 18px 60px rgba(0,0,0,.62);
}

.modal-content.event-ambush {
  animation-name: event-ambush-strike;
  animation-delay: .1s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 48px rgba(130, 18, 10, .62),
    0 18px 60px rgba(0,0,0,.66),
    0 0 34px rgba(180, 42, 24, .2);
}

.modal-content.event-hit::before,
.modal-content.event-dark-hit::before,
.modal-content.event-clear::before,
.modal-content.event-ambush::before,
.modal-content.event-scene::before,
.modal-content.event-discover::before,
.modal-content.event-reward::before,
.modal-content.resonance-awaken::before,
.modal-content.event-quiet::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  border-radius: 8px;
  pointer-events: none;
}

.modal-content.event-hit::before {
  animation: event-hit-flash .68s ease-out forwards;
  background:
    radial-gradient(circle at 50% 48%, rgba(216, 28, 18, .64), transparent 45%),
    linear-gradient(180deg, rgba(85, 0, 0, .42), rgba(0, 0, 0, .08));
}

.modal-content.event-dark-hit::before {
  animation: event-dark-flash .82s ease-out forwards;
  background:
    radial-gradient(circle at 50% 48%, rgba(130, 64, 255, .56), transparent 52%),
    linear-gradient(180deg, rgba(15, 0, 35, .62), rgba(0, 0, 0, .12));
}

.modal-content.event-clear::before {
  animation: event-clear-flash .62s ease-out forwards;
  background: radial-gradient(circle at 50% 44%, rgba(160, 235, 215, .42), transparent 58%);
}

.modal-content.event-scene::before {
  animation: event-scene-flash .9s ease-out .08s forwards;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(188, 139, 72, .14), transparent 46%),
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0, 0, 0, .28) 100%);
}

.modal-content.event-discover::before {
  animation: event-discover-flash 1.06s ease-out .08s forwards;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 222, 132, .22), transparent 42%),
    radial-gradient(ellipse at 50% 56%, rgba(100, 66, 28, .2), transparent 58%);
}

.modal-content.event-reward::before {
  animation: event-reward-flash .96s ease-out .08s forwards;
  background:
    linear-gradient(105deg, transparent 34%, rgba(255, 219, 146, .18) 49%, transparent 64%),
    radial-gradient(ellipse at 50% 58%, rgba(194, 125, 42, .18), transparent 58%);
}

.modal-content.resonance-awaken::before {
  inset: 10px;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .48) 0%, rgba(0, 0, 0, .22) 34%, rgba(0, 0, 0, .48) 68%, rgba(0, 0, 0, .84) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .12) 34%, rgba(0, 0, 0, .18) 66%, rgba(0, 0, 0, .62) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(255, 184, 82, .08), rgba(0, 0, 0, .34) 70%);
}

.modal-content.resonance-awaken::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 0;
  border-radius: 8px;
  pointer-events: none;
  background: url("assets/events/resonance-awaken-backdrop.png") 50% 46% / cover no-repeat;
  filter: brightness(.92) saturate(1.08);
}

.modal-content.event-quiet::before {
  animation: event-quiet-flash 1.1s ease-out .12s forwards;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(170, 154, 112, .08), transparent 48%),
    radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(0, 0, 0, .22) 100%);
}

.modal-content.event-ambush::before {
  animation: event-ambush-flash .9s ease-out .12s forwards;
  inset: 0;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(190, 24, 14, .18), transparent 48%),
    radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(80, 0, 0, .38) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 201, 116, .18),
    inset 0 0 38px rgba(170, 20, 12, .28),
    inset 0 0 92px rgba(0, 0, 0, .42);
}

.event-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}

.event-ambush-fx-layer {
  mix-blend-mode: screen;
}

.event-scene-fx-layer,
.event-discover-fx-layer,
.event-reward-fx-layer,
.resonance-awaken-fx-layer {
  mix-blend-mode: screen;
}

.event-scene-fx-vignette,
.event-scene-fx-sweep,
.event-scene-fx-dust,
.event-ambush-fx-field,
.event-ambush-fx-shadow,
.event-ambush-fx-eye,
.event-ambush-fx-ember,
.event-ambush-fx-warning-line,
.event-discover-fx-glow,
.event-discover-fx-ring,
.event-discover-fx-ray,
.event-discover-fx-mote,
.event-reward-fx-warmth,
.event-reward-fx-sheen,
.event-reward-fx-spark,
.event-quiet-fx-hush,
.event-quiet-fx-dust,
.resonance-awaken-fx-vignette,
.resonance-awaken-fx-beam,
.resonance-awaken-fx-rune,
.resonance-awaken-fx-mote {
  position: absolute;
  pointer-events: none;
}
.cell-drop-badge img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255, 220, 128, .48));
}

.event-scene-fx-vignette {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(214, 154, 74, .16), transparent 42%),
    radial-gradient(ellipse at 50% 52%, transparent 54%, rgba(0, 0, 0, .36) 100%);
  animation: event-scene-vignette 1.04s ease-out forwards;
}

.event-scene-fx-sweep {
  left: -22%;
  top: 16%;
  width: 38%;
  height: 76%;
  background: linear-gradient(104deg, transparent, rgba(236, 196, 128, .16), transparent);
  filter: blur(4px);
  opacity: 0;
  animation: event-scene-sweep .98s ease-out 180ms forwards;
}

.event-scene-fx-dust {
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(205, 176, 124, .46);
  box-shadow: 0 0 7px rgba(205, 160, 88, .24);
  opacity: 0;
  animation: event-scene-dust .86s ease-out var(--delay) forwards;
}

.event-discover-fx-glow {
  left: 50%;
  top: 42%;
  width: min(360px, 52vw);
  height: min(230px, 32vh);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 218, 122, .36), rgba(182, 112, 36, .12) 38%, transparent 70%);
  animation: event-discover-glow 1.12s ease-out forwards;
}

.event-discover-fx-ring {
  left: 50%;
  top: 43%;
  width: min(190px, 32vw);
  height: min(190px, 32vw);
  border: 1px solid rgba(255, 217, 128, .42);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(255, 197, 90, .2);
  animation: event-discover-ring 1s ease-out 120ms forwards;
  opacity: 0;
}

.event-discover-fx-ray {
  left: 50%;
  top: 43%;
  width: min(320px, 50vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 232, 168, .56), transparent);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: event-discover-ray .78s ease-out 200ms forwards;
}

.event-discover-fx-ray-b {
  transform: translate(-50%, -50%) rotate(90deg);
  animation-delay: 260ms;
}

.event-discover-fx-mote,
.event-reward-fx-spark,
.event-quiet-fx-dust {
  left: var(--x);
  top: var(--y);
  border-radius: 50%;
  opacity: 0;
}

.event-discover-fx-mote {
  width: 3px;
  height: 3px;
  background: rgba(255, 235, 172, .9);
  box-shadow: 0 0 10px rgba(255, 208, 98, .58);
  animation: event-discover-mote .86s ease-out var(--delay) forwards;
}

.event-reward-fx-warmth {
  inset: 0;
  background: radial-gradient(ellipse at 50% 58%, rgba(228, 154, 62, .22), transparent 54%);
  animation: event-reward-warmth 1s ease-out forwards;
}

.event-reward-fx-sheen {
  left: -18%;
  top: 10%;
  width: 40%;
  height: 90%;
  background: linear-gradient(105deg, transparent, rgba(255, 230, 168, .24), transparent);
  filter: blur(2px);
  animation: event-reward-sheen .92s ease-out 180ms forwards;
  opacity: 0;
}

.event-reward-fx-spark {
  width: 3px;
  height: 3px;
  background: rgba(255, 226, 156, .88);
  box-shadow: 0 0 9px rgba(255, 196, 82, .52);
  animation: event-reward-spark .72s ease-out var(--delay) forwards;
}

.event-quiet-fx-hush {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(0, 0, 0, .24) 100%),
    linear-gradient(180deg, transparent, rgba(150, 135, 104, .06));
  animation: event-quiet-hush 1.16s ease-out forwards;
}

.event-quiet-fx-dust {
  width: 2px;
  height: 2px;
  background: rgba(178, 162, 126, .48);
  box-shadow: 0 0 7px rgba(175, 152, 104, .28);
  animation: event-quiet-dust 1s ease-out var(--delay) forwards;
}

.resonance-awaken-fx-vignette {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, var(--res-primary, rgba(90, 226, 208, .18)), transparent 42%),
    radial-gradient(ellipse at 50% 56%, var(--res-secondary, rgba(220, 154, 66, .12)), transparent 56%),
    radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(0, 0, 0, .32) 100%);
  animation: resonance-awaken-vignette 1.2s ease-out forwards;
}

.resonance-awaken-fx-beam {
  left: 50%;
  top: 50%;
  width: min(620px, 80vw);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--res-primary, rgba(159, 255, 236, .78)), transparent);
  filter: blur(.5px);
  opacity: 0;
  transform-origin: center;
  animation: resonance-awaken-beam .86s ease-out 120ms forwards;
}

.resonance-awaken-fx-beam-a { --beam-rot: 24deg; }
.resonance-awaken-fx-beam-b { --beam-rot: -28deg; animation-delay: 190ms; }

.resonance-awaken-fx-rune {
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 52px;
  height: 52px;
  border: 1px solid var(--res-primary, rgba(168, 255, 236, .36));
  border-radius: 50%;
  box-shadow: inset 0 0 16px var(--res-shadow, rgba(95, 222, 205, .16)), 0 0 20px var(--res-primary, rgba(86, 210, 192, .12));
  opacity: 0;
  animation: resonance-awaken-rune 1.08s ease-out var(--delay, 160ms) forwards;
}

.resonance-awaken-fx-rune::before,
.resonance-awaken-fx-rune::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--res-secondary, rgba(255, 217, 132, .28));
  transform: rotate(45deg);
}

.resonance-awaken-fx-rune::after {
  inset: 22px 6px;
  border-left: 0;
  border-right: 0;
  transform: rotate(-25deg);
}

.resonance-awaken-fx-rune-a { --x: 24%; --y: 34%; --delay: 160ms; }
.resonance-awaken-fx-rune-b { --x: 74%; --y: 38%; --delay: 260ms; }
.resonance-awaken-fx-rune-c { --x: 50%; --y: 70%; --delay: 340ms; }

.resonance-awaken-fx-mote {
  left: var(--x);
  top: var(--y);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--res-primary, rgba(178, 255, 239, .92));
  box-shadow: 0 0 12px var(--res-primary, rgba(122, 246, 224, .72));
  opacity: 0;
  animation: resonance-awaken-mote .92s ease-out var(--delay) forwards;
}

.resonance-awaken-scene {
  position: relative;
  height: 142px;
  margin: 2px auto 14px;
  width: min(420px, 100%);
  flex: 0 0 auto;
  pointer-events: none;
}

.resonance-awaken-icon-scene {
  height: 176px;
  margin-top: -2px;
  margin-bottom: 12px;
  max-width: 100%;
  isolation: isolate;
  --res-sprite-hue: 0deg;
  --res-sprite-sat: 1.48;
  --res-charge-bright: 1.52;
  --res-wave-bright: 1.1;
}

.resonance-awaken-icon-scene.resonance-theme-pain {
  --res-sprite-hue: -18deg;
  --res-sprite-sat: 1.72;
  --res-charge-bright: 1.5;
  --res-wave-bright: 1.12;
}

.resonance-awaken-icon-scene.resonance-theme-scar {
  --res-sprite-hue: -42deg;
  --res-sprite-sat: 1.82;
  --res-charge-bright: 1.46;
  --res-wave-bright: 1.08;
}

.resonance-awaken-icon-scene.resonance-theme-iron {
  --res-sprite-hue: 18deg;
  --res-sprite-sat: 1.22;
  --res-charge-bright: 1.38;
  --res-wave-bright: 1.02;
}

.resonance-awaken-icon-scene.resonance-theme-bee {
  --res-sprite-hue: 166deg;
  --res-sprite-sat: 1.38;
  --res-charge-bright: 1.5;
  --res-wave-bright: 1.18;
}

.resonance-awaken-icon-scene.resonance-theme-fate {
  --res-sprite-hue: 238deg;
  --res-sprite-sat: 1.7;
  --res-charge-bright: 1.42;
  --res-wave-bright: 1.08;
}

.resonance-awaken-icon-scene.resonance-theme-lucky {
  --res-sprite-hue: 38deg;
  --res-sprite-sat: 1.36;
  --res-charge-bright: 1.62;
  --res-wave-bright: 1.18;
}

.resonance-awaken-icon-scene.resonance-theme-eye {
  --res-sprite-hue: 180deg;
  --res-sprite-sat: 1.55;
  --res-charge-bright: 1.48;
  --res-wave-bright: 1.14;
}

.resonance-awaken-icon-scene.resonance-theme-breaker {
  --res-sprite-hue: -8deg;
  --res-sprite-sat: 1.95;
  --res-charge-bright: 1.56;
  --res-wave-bright: 1.16;
}

.resonance-awaken-icon-scene.resonance-theme-banner {
  --res-sprite-hue: 88deg;
  --res-sprite-sat: 1.34;
  --res-charge-bright: 1.44;
  --res-wave-bright: 1.1;
}

.resonance-awaken-icon-core-img,
.resonance-awaken-icon-ghost,
.resonance-awaken-icon-burst,
.resonance-awaken-charge-sprite,
.resonance-awaken-charge-aura,
.resonance-awaken-wave-sprite,
.resonance-awaken-impact-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.resonance-awaken-charge-sprite {
  z-index: 5;
  width: min(360px, 72vw);
  height: min(360px, 72vw);
  background: url("assets/effects/resonance-awaken-charge.png") 33.333% 0 / 400% 200% no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
  filter:
    hue-rotate(var(--res-sprite-hue, 0deg))
    brightness(calc(var(--res-charge-bright, 1.52) * .86))
    contrast(1.04)
    saturate(calc(var(--res-sprite-sat, 1.75) * .82))
    drop-shadow(0 0 16px rgba(255, 226, 114, .38))
    drop-shadow(0 0 30px var(--res-primary, rgba(230, 54, 42, .42)))
    drop-shadow(0 0 44px var(--res-shadow, rgba(130, 0, 0, .26)));
  animation:
    resonance-awaken-charge-motion 1.02s cubic-bezier(.18, .82, .2, 1) both,
    resonance-awaken-charge-frames 1.02s steps(1, end) both;
}

.resonance-awaken-charge-aura {
  display: none;
  z-index: 1;
  width: min(330px, 68vw);
  height: min(330px, 68vw);
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    repeating-conic-gradient(from -18deg, transparent 0 15deg, rgba(255, 221, 92, .28) 16deg 19deg, transparent 20deg 34deg),
    radial-gradient(circle, rgba(255, 238, 160, .34) 0 8%, rgba(255, 178, 48, .18) 28%, transparent 66%);
  filter:
    blur(.4px)
    drop-shadow(0 0 18px rgba(255, 219, 102, .5))
    drop-shadow(0 0 36px var(--res-primary, rgba(230, 54, 42, .5)));
  animation: resonance-awaken-charge-aura 1.02s ease-out both;
}

.resonance-awaken-wave-sprite {
  z-index: 6;
  width: min(370px, 78vw);
  height: min(370px, 78vw);
  background: url("assets/effects/resonance-awaken-wave.png") 0 0 / 400% 200% no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
  filter:
    hue-rotate(var(--res-sprite-hue, 0deg))
    brightness(var(--res-wave-bright, 1.1))
    saturate(calc(var(--res-sprite-sat, 1.48) * .86))
    drop-shadow(0 0 20px rgba(255, 218, 104, .72))
    drop-shadow(0 0 36px var(--res-primary, rgba(230, 54, 42, .54)));
  animation:
    resonance-awaken-wave-motion .72s cubic-bezier(.08, .74, .2, 1) .82s both,
    resonance-awaken-wave-frames .72s steps(1, end) .82s both;
}

.resonance-awaken-impact-flash {
  display: none;
  z-index: 4;
  width: min(210px, 48vw);
  height: min(210px, 48vw);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 245, .96) 0 7%, rgba(255, 226, 116, .54) 18%, transparent 62%),
    conic-gradient(from 10deg, transparent 0 9deg, rgba(255, 245, 178, .86) 10deg 12deg, transparent 13deg 44deg);
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(.2px) drop-shadow(0 0 22px rgba(255, 228, 108, .76));
  animation: resonance-awaken-impact-flash .38s ease-out .82s both;
}

.resonance-awaken-icon-core-img,
.resonance-awaken-icon-ghost {
  width: min(168px, 40vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.resonance-awaken-icon-core-img {
  z-index: 4;
  filter:
    drop-shadow(0 0 12px var(--res-primary, rgba(230, 54, 42, .72)))
    drop-shadow(0 0 30px var(--res-shadow, rgba(130, 0, 0, .52)));
  animation: resonance-awaken-icon-core 1.36s cubic-bezier(.16, .78, .24, 1) both;
}

.resonance-awaken-icon-core-img img,
.resonance-awaken-icon-ghost img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.resonance-awaken-icon-ghost {
  display: none;
  z-index: 2;
  opacity: 0;
  mix-blend-mode: screen;
  filter:
    saturate(1.35)
    brightness(1.18)
    drop-shadow(0 0 22px var(--res-primary, rgba(230, 54, 42, .72)));
}

.resonance-awaken-icon-ghost-a {
  animation: resonance-awaken-icon-ghost-a .92s ease-out .08s both;
}

.resonance-awaken-icon-ghost-b {
  animation: resonance-awaken-icon-ghost-b 1.18s ease-out .2s both;
}

.resonance-awaken-icon-burst {
  display: none;
  z-index: 1;
  width: min(250px, 56vw);
  height: min(250px, 56vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 10deg, transparent 0 8deg, var(--res-primary, rgba(230, 54, 42, .58)) 9deg 12deg, transparent 13deg 22deg),
    radial-gradient(circle, rgba(255, 222, 176, .24), var(--res-primary, rgba(230, 54, 42, .18)) 32%, transparent 68%);
  opacity: 0;
  filter: blur(.2px) drop-shadow(0 0 22px var(--res-primary, rgba(230, 54, 42, .58)));
  mix-blend-mode: screen;
}

.resonance-awaken-icon-burst-a {
  animation: resonance-awaken-icon-burst .82s ease-out .04s both;
}

.resonance-awaken-icon-burst-b {
  width: min(310px, 64vw);
  height: min(310px, 64vw);
  transform: translate(-50%, -50%) rotate(18deg);
  animation: resonance-awaken-icon-burst 1.08s ease-out .16s both reverse;
}

.resonance-awaken-echo {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--res-primary, rgba(126, 255, 232, .9));
  font-family: var(--font-serif);
  font-size: 5.8rem;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 0 18px var(--res-primary, rgba(126, 255, 232, .5)),
    0 0 42px var(--res-shadow, rgba(24, 88, 82, .5));
  opacity: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

.resonance-awaken-echo-a {
  animation: resonance-awaken-echo .82s ease-out both;
}

.resonance-awaken-echo-b {
  animation: resonance-awaken-echo-ghost 1.18s ease-out .18s both;
}

.resonance-awaken-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 244, 186, .96) 0 12%, var(--res-primary, rgba(106, 238, 218, .72)) 21%, var(--res-shadow, rgba(44, 94, 92, .28)) 48%, transparent 72%);
  box-shadow:
    0 0 24px var(--res-primary, rgba(126, 255, 232, .52)),
    0 0 54px var(--res-secondary, rgba(222, 164, 72, .26));
  transform: translate(-50%, -50%);
  animation: resonance-awaken-core 1.48s ease-out both;
}

.resonance-awaken-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid var(--res-primary, rgba(151, 255, 236, .46));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.resonance-awaken-ring-a {
  width: 128px;
  height: 128px;
  animation: resonance-awaken-ring 1.26s ease-out .08s both;
}

.resonance-awaken-ring-b {
  width: 194px;
  height: 194px;
  border-color: var(--res-secondary, rgba(255, 211, 128, .28));
  animation: resonance-awaken-ring 1.38s ease-out .18s both reverse;
}

.resonance-awaken-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 156px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--res-primary, rgba(180, 255, 238, .82)), transparent);
  opacity: 0;
  transform-origin: center;
  animation: resonance-awaken-spark 1s ease-out .16s both;
}

.resonance-awaken-spark-a { transform: translate(-50%, -50%) rotate(18deg); }
.resonance-awaken-spark-b { transform: translate(-50%, -50%) rotate(96deg); animation-delay: .24s; }
.resonance-awaken-spark-c { transform: translate(-50%, -50%) rotate(-38deg); animation-delay: .32s; }

.resonance-awaken-copy {
  position: relative;
  z-index: 3;
}

.resonance-awaken-copy.compact {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 190, 90, .18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(12, 7, 3, .62), rgba(9, 6, 4, .78));
  box-shadow:
    inset 0 1px 0 rgba(255, 222, 140, .08),
    0 14px 28px rgba(0, 0, 0, .28);
}

.resonance-awaken-lead {
  margin: 0;
  color: #f2e8cb;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .92), 0 0 12px rgba(255, 184, 82, .22);
}

.resonance-awaken-list {
  display: grid;
  gap: 10px;
}

.resonance-awaken-list.compact {
  gap: 7px;
}

.resonance-awaken-entry {
  border-left: 2px solid var(--res-primary, rgba(122, 238, 218, .48));
  padding: 2px 0 2px 10px;
}

.resonance-awaken-heading {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 2px;
  color: var(--res-secondary, #ffe1a0);
  font-family: var(--font-serif);
  line-height: 1.35;
}

.resonance-awaken-heading strong {
  font-size: 1.02em;
  letter-spacing: 0;
}

.resonance-awaken-owner {
  color: var(--res-primary, #94e7da);
  font-family: var(--font-sans);
  font-size: .92em;
  font-weight: 700;
}

.resonance-awaken-entry p {
  margin: 0;
  color: #eadfc8;
  font-size: .94em;
  line-height: 1.48;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .88);
}

.resonance-awaken-card {
  position: relative;
  border: 1px solid rgba(122, 238, 218, .22);
  background:
    linear-gradient(135deg, var(--res-shadow, rgba(20, 52, 50, .58)), rgba(14, 12, 10, .5)),
    rgba(10, 12, 12, .62);
  border-radius: 8px;
  padding: 12px 14px 12px 68px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.24), 0 0 18px var(--res-shadow, transparent);
  animation: resonance-awaken-card-in .42s ease-out .26s both;
}

.resonance-awaken-sigil {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 40px;
  height: 40px;
  border: 1px solid var(--res-primary, rgba(122, 238, 218, .34));
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--res-primary, #94e7da);
  background:
    radial-gradient(circle, var(--res-shadow, rgba(24, 88, 82, .45)), rgba(0,0,0,.1) 70%);
  box-shadow:
    inset 0 0 14px var(--res-shadow, rgba(24, 88, 82, .28)),
    0 0 18px var(--res-primary, rgba(122, 238, 218, .18));
  transform: translateY(-50%);
  overflow: hidden;
}

.resonance-awaken-sigil::before,
.resonance-awaken-sigil::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--res-secondary, rgba(255, 211, 128, .32));
  transform: rotate(45deg);
}

.resonance-awaken-sigil::after {
  inset: 16px 4px;
  border-left: 0;
  border-right: 0;
  transform: rotate(-18deg);
}

.resonance-awaken-sigil span {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-weight: 900;
  text-shadow: 0 0 10px var(--res-primary, rgba(122, 238, 218, .68));
}

.resonance-awaken-kicker {
  color: var(--res-primary, #94e7da);
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 3px;
}

.resonance-awaken-card h3 {
  margin: 0 0 6px;
  color: var(--res-secondary, #ffe1a0);
  font-family: var(--font-serif);
  font-size: 1.08em;
  letter-spacing: .04em;
}

.resonance-awaken-card p {
  margin: 0;
  color: var(--text);
  font-size: .92em;
  line-height: 1.55;
}

.event-ambush-fx-field {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(150, 12, 8, .22), transparent 34%),
    radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(0, 0, 0, .62) 100%);
  animation: event-ambush-field 1.12s ease-out forwards;
}

.event-ambush-fx-shadow {
  bottom: 12%;
  width: 38%;
  height: 62%;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(0, 0, 0, .92), rgba(0, 0, 0, .58) 34%, transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .7) 46%, transparent 100%);
  filter: blur(8px);
  opacity: 0;
  animation: event-ambush-shadow-in 1.1s ease-out 80ms forwards;
}

.event-ambush-fx-shadow-left {
  left: -10%;
  transform: skewX(-8deg);
  --shadow-x: -28px;
}

.event-ambush-fx-shadow-right {
  right: -10%;
  transform: skewX(8deg) scaleX(-1);
  animation-delay: 160ms;
  --shadow-x: 28px;
}

.event-ambush-fx-eye {
  left: 50%;
  top: 49%;
  width: 118px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 230, 170, .88), rgba(210, 24, 14, .8), transparent);
  box-shadow:
    0 0 10px rgba(255, 202, 118, .54),
    0 0 24px rgba(190, 26, 12, .4);
  opacity: 0;
  animation: event-ambush-eye .9s ease-out 180ms forwards;
}

.event-ambush-fx-warning-line {
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 142, .62), rgba(170, 20, 12, .3), transparent);
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(.2);
  animation: event-ambush-warning-line .62s ease-out var(--delay) forwards;
}

.event-ambush-fx-ember {
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(255, 232, 170, .92);
  box-shadow:
    0 0 8px rgba(255, 216, 120, .78),
    0 0 16px rgba(198, 34, 16, .52);
  opacity: 0;
  animation: event-ambush-spark .72s ease-out var(--delay) forwards;
}

.modal-desc-result.event-hit,
.modal-desc-result.event-dark-hit,
.modal-desc-result.event-clear {
  animation: fate-result-text-in .34s ease-out both;
}

.modal-desc-result.event-hit {
  color: #ffd8c9;
  text-shadow: 0 0 9px rgba(210, 24, 18, .68), 0 2px 8px rgba(0, 0, 0, .95);
}

.modal-desc-result.event-dark-hit {
  color: #eadcff;
  text-shadow: 0 0 11px rgba(126, 72, 255, .7), 0 2px 8px rgba(0, 0, 0, .95);
}

.modal-desc-result.event-clear {
  color: #d9fff3;
  text-shadow: 0 0 9px rgba(112, 178, 166, .52), 0 2px 8px rgba(0, 0, 0, .9);
}

@keyframes resonance-awaken-modal {
  0% { transform: translateY(8px) scale(.986); filter: brightness(.76) saturate(.82); }
  34% { transform: translateY(-2px) scale(1.012); filter: brightness(1.18) saturate(1.18); }
  68% { transform: translateY(1px) scale(.998); }
  100% { transform: translateY(0) scale(1); filter: brightness(1) saturate(1); }
}

@keyframes resonance-awaken-shock {
  0%, 100% { transform: translate(0, 0) scale(1); }
  18% { transform: translate(-1px, 1px) scale(1.006); }
  34% { transform: translate(2px, -1px) scale(1.01); }
  50% { transform: translate(-2px, 0) scale(1.006); }
  68% { transform: translate(1px, 1px) scale(1.002); }
}

@keyframes resonance-awaken-flash {
  0% { opacity: 0; transform: scale(.9); filter: blur(0); }
  24% { opacity: .96; transform: scale(1.02); filter: blur(1px); }
  52% { opacity: .34; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.16); filter: blur(9px); }
}

@keyframes resonance-awaken-vignette {
  0% { opacity: 0; transform: scale(.96); }
  28% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes resonance-awaken-beam {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--beam-rot, 0deg)) scaleX(.08); filter: blur(0); }
  34% { opacity: .9; transform: translate(-50%, -50%) rotate(var(--beam-rot, 0deg)) scaleX(1); filter: blur(.5px); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--beam-rot, 0deg)) scaleX(1.22); filter: blur(5px); }
}

@keyframes resonance-awaken-rune {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(-42deg); filter: blur(2px); }
  36% { opacity: .8; transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22) rotate(38deg); filter: blur(4px); }
}

@keyframes resonance-awaken-mote {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.45); }
  28% { opacity: .96; }
  100% { opacity: 0; transform: translate(-50%, -38px) scale(1.18); }
}

@keyframes resonance-awaken-core {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); filter: blur(3px); }
  24% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); filter: blur(0); }
  48% { transform: translate(-50%, -50%) scale(.92); }
  100% { opacity: .92; transform: translate(-50%, -50%) scale(1); }
}

@keyframes resonance-awaken-icon-core {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.48); filter: blur(6px) drop-shadow(0 0 10px var(--res-primary, rgba(230, 54, 42, .72))); }
  38% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); filter: blur(0) drop-shadow(0 0 20px var(--res-primary, rgba(230, 54, 42, .82))); }
  66% { transform: translate(-50%, -50%) scale(.98); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes resonance-awaken-icon-ghost-a {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  18% { opacity: .5; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.48); }
}

@keyframes resonance-awaken-icon-ghost-b {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.96) rotate(0deg); }
  22% { opacity: .28; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.82) rotate(3deg); }
}

@keyframes resonance-awaken-icon-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.42) rotate(-10deg); }
  28% { opacity: .75; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18) rotate(24deg); }
}

@keyframes resonance-awaken-charge-motion {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08) rotate(-18deg);
    filter: hue-rotate(var(--res-sprite-hue, 0deg)) brightness(calc(var(--res-charge-bright, 1.52) * .56)) contrast(1) saturate(calc(var(--res-sprite-sat, 1.48) * .62)) blur(2.4px);
  }
  14% {
    opacity: .2;
    transform: translate(-50%, -50%) scale(1.02) rotate(-10deg);
  }
  42% {
    opacity: .34;
    transform: translate(-50%, -50%) scale(.86) rotate(4deg);
    filter: hue-rotate(var(--res-sprite-hue, 0deg)) brightness(calc(var(--res-charge-bright, 1.52) * .7)) contrast(1.03) saturate(calc(var(--res-sprite-sat, 1.48) * .72)) blur(1.1px);
  }
  72% {
    opacity: .78;
    transform: translate(-50%, -50%) scale(.66) rotate(14deg);
    filter: hue-rotate(var(--res-sprite-hue, 0deg)) brightness(calc(var(--res-charge-bright, 1.52) * 1.02)) contrast(1.1) saturate(calc(var(--res-sprite-sat, 1.48) * .98)) blur(.15px);
  }
  88% {
    opacity: .86;
    transform: translate(-50%, -50%) scale(.54) rotate(19deg);
    filter: hue-rotate(var(--res-sprite-hue, 0deg)) brightness(calc(var(--res-charge-bright, 1.52) * 1.12)) contrast(1.12) saturate(calc(var(--res-sprite-sat, 1.48) * 1.04)) blur(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.46) rotate(22deg);
    filter: hue-rotate(var(--res-sprite-hue, 0deg)) brightness(calc(var(--res-charge-bright, 1.52) * .78)) contrast(1.04) saturate(calc(var(--res-sprite-sat, 1.48) * .82)) blur(2.6px);
  }
}

@keyframes resonance-awaken-charge-frames {
  0% { background-position: 33.333% 100%; }
  16% { background-position: 0 100%; }
  32% { background-position: 100% 0; }
  48% { background-position: 66.666% 0; }
  64% { background-position: 33.333% 0; }
  80% { background-position: 0 0; }
  100% { background-position: 100% 100%; }
}

@keyframes resonance-awaken-charge-aura {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.28) rotate(-30deg); }
  16% { opacity: .58; }
  62% { opacity: .82; transform: translate(-50%, -50%) scale(.78) rotate(18deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.32) rotate(48deg); }
}

@keyframes resonance-awaken-wave-motion {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.22) rotate(-6deg);
    filter: hue-rotate(var(--res-sprite-hue, 0deg)) brightness(calc(var(--res-wave-bright, 1.1) * 1.36)) saturate(calc(var(--res-sprite-sat, 1.48) * .92)) blur(1px);
  }
  12% {
    opacity: .98;
    transform: translate(-50%, -50%) scale(.42) rotate(0deg);
  }
  48% {
    opacity: .88;
    transform: translate(-50%, -50%) scale(1.02) rotate(5deg);
    filter: hue-rotate(var(--res-sprite-hue, 0deg)) brightness(calc(var(--res-wave-bright, 1.1) * 1.16)) saturate(calc(var(--res-sprite-sat, 1.48) * .86)) blur(.2px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.58) rotate(9deg);
    filter: hue-rotate(var(--res-sprite-hue, 0deg)) brightness(calc(var(--res-wave-bright, 1.1) * .94)) saturate(calc(var(--res-sprite-sat, 1.48) * .78)) blur(5px);
  }
}

@keyframes resonance-awaken-wave-frames {
  0% { background-position: 0 0; }
  14% { background-position: 33.333% 0; }
  28% { background-position: 66.666% 0; }
  42% { background-position: 100% 0; }
  56% { background-position: 0 100%; }
  70% { background-position: 33.333% 100%; }
  84% { background-position: 66.666% 100%; }
  100% { background-position: 100% 100%; }
}

@keyframes resonance-awaken-impact-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.26) rotate(0deg); filter: blur(2px); }
  24% { opacity: .96; transform: translate(-50%, -50%) scale(.8) rotate(12deg); filter: blur(.2px); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55) rotate(34deg); filter: blur(10px); }
}

@keyframes resonance-awaken-echo {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.32) rotate(-9deg); filter: blur(6px); }
  28% { opacity: .82; transform: translate(-50%, -50%) scale(1) rotate(0deg); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.42) rotate(5deg); filter: blur(8px); }
}

@keyframes resonance-awaken-echo-ghost {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.72); filter: blur(0); }
  18% { opacity: .32; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); filter: blur(14px); }
}

@keyframes resonance-awaken-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.28) rotate(-32deg); filter: blur(1px); }
  34% { opacity: .88; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(40deg); filter: blur(4px); }
}

@keyframes resonance-awaken-spark {
  0% { opacity: 0; filter: blur(0); clip-path: inset(0 50% 0 50%); }
  32% { opacity: .92; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; filter: blur(4px); clip-path: inset(0 0 0 0); }
}

@keyframes resonance-awaken-card-in {
  0% { opacity: 0; transform: translateY(12px) scale(.985); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes fate-success-glow {
  0% { filter: brightness(.82) saturate(.92); transform: scale(1.015); }
  42% { filter: brightness(1.32) saturate(1.25); transform: scale(1.025); }
  100% { filter: brightness(1.12) saturate(1.08); transform: scale(1); }
}

@keyframes event-intro-image-focus {
  0% { opacity: 0; filter: brightness(.56) saturate(.86) blur(2px); }
  26% { opacity: 1; }
  100% { opacity: 1; filter: brightness(.9) saturate(1) blur(0); }
}

@keyframes event-intro-illustration-focus {
  0% { opacity: 0; transform: translateY(10px) scale(.96); filter: brightness(.58) saturate(.88) blur(2px); }
  28% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) saturate(1) blur(0); }
}

@keyframes event-intro-title-in {
  0% { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes event-intro-copy-in {
  0% { opacity: 0; transform: translateY(10px); filter: blur(1px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes event-intro-backdrop-shade {
  0% {
    opacity: .92;
    background:
      radial-gradient(circle at 50% 42%, rgba(0, 0, 0, .26), rgba(0, 0, 0, .72) 76%),
      linear-gradient(180deg, rgba(0, 0, 0, .64), rgba(0, 0, 0, .7));
  }
  100% {
    opacity: 1;
    background:
      radial-gradient(circle at 50% 42%, rgba(0, 0, 0, .1), rgba(0, 0, 0, .54) 76%),
      linear-gradient(180deg, rgba(0, 0, 0, .48), rgba(0, 0, 0, .58));
  }
}

@keyframes fate-success-flash {
  0% { opacity: 0; filter: blur(0); transform: scale(.95); }
  26% { opacity: .9; filter: blur(2px); transform: scale(1.03); }
  100% { opacity: 0; filter: blur(8px); transform: scale(1.12); }
}

@keyframes fate-blood-impact {
  0% { filter: brightness(.72) saturate(.8); transform: scale(1); }
  28% { filter: brightness(1.35) saturate(1.62); transform: scale(1.035); }
  52% { filter: brightness(.78) saturate(1.45); transform: translateX(-2px) scale(1.02); }
  72% { transform: translateX(2px) scale(1.01); }
  100% { filter: brightness(.96) saturate(1.32); transform: translateX(0) scale(1); }
}

@keyframes fate-blood-flash {
  0% { opacity: 0; transform: scale(.98); }
  18% { opacity: .95; transform: scale(1.02); }
  34% { opacity: .18; }
  48% { opacity: .72; transform: scale(1.01); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes fate-modal-blood-shake {
  0%, 100% { transform: translate(0, 0); }
  14% { transform: translate(-7px, 2px); }
  28% { transform: translate(6px, -2px); }
  42% { transform: translate(-4px, 1px); }
  58% { transform: translate(3px, 0); }
}

@keyframes fate-night-surge {
  0% { filter: brightness(.72) saturate(.78); transform: scale(1); }
  35% { filter: brightness(1.24) saturate(1.5); transform: scale(1.045); }
  66% { filter: brightness(.9) saturate(1.28); transform: scale(1.018); }
  100% { filter: brightness(1.02) saturate(1.24); transform: scale(1); }
}

@keyframes fate-night-flash {
  0% { opacity: 0; transform: scale(.92) rotate(0deg); filter: blur(0); }
  24% { opacity: .82; transform: scale(1.04) rotate(-.4deg); filter: blur(1px); }
  52% { opacity: .38; transform: scale(1.08) rotate(.35deg); }
  100% { opacity: 0; transform: scale(1.16) rotate(0deg); filter: blur(8px); }
}


@keyframes fate-modal-night-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.012); }
  56% { transform: scale(.996); }
  100% { transform: scale(1); }
}

@keyframes fate-life-erasure {
  0% { filter: brightness(.8) saturate(.72) blur(0); transform: scale(1); }
  34% { filter: brightness(1.25) saturate(1.38) blur(.3px); transform: scale(1.04); }
  58% { filter: brightness(.62) saturate(1.18) blur(.8px); transform: scale(1.025); }
  100% { filter: brightness(.9) saturate(1.18) blur(0); transform: scale(1); }
}

@keyframes fate-life-flash {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(0); }
  22% { opacity: .86; clip-path: inset(0 0 0 0); filter: blur(.6px); }
  48% { opacity: .44; clip-path: inset(0 0 0 28%); }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); filter: blur(7px); }
}

@keyframes fate-modal-soul-shake {
  0%, 100% { transform: translateX(0) scale(1); filter: none; }
  20% { transform: translateX(4px) scale(1.008); filter: contrast(1.18); }
  40% { transform: translateX(-5px) scale(.998); filter: contrast(.92); }
  62% { transform: translateX(2px) scale(1.004); }
}

@keyframes fate-result-text-in {
  0% { opacity: 0; transform: translateY(8px) scale(.985); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes fate-result-text-erased {
  0% { opacity: 0; transform: translateX(18px) skewX(-8deg); filter: blur(6px); }
  54% { opacity: 1; transform: translateX(-2px) skewX(2deg); filter: blur(.8px); }
  100% { opacity: 1; transform: translateX(0) skewX(0); filter: blur(0); }
}

@keyframes event-hit-shake {
  0%, 100% { transform: translate(0, 0); }
  16% { transform: translate(-6px, 2px); }
  32% { transform: translate(5px, -2px); }
  50% { transform: translate(-3px, 1px); }
  66% { transform: translate(2px, 0); }
}

@keyframes event-dark-pulse {
  0% { transform: scale(1); filter: contrast(1); }
  34% { transform: scale(1.012); filter: contrast(1.16); }
  68% { transform: scale(.997); filter: contrast(.96); }
  100% { transform: scale(1); filter: contrast(1); }
}

@keyframes event-fx-pulse {
  0% { transform: scale(1); }
  42% { transform: scale(1.006); }
  100% { transform: scale(1); }
}

@keyframes event-hit-flash {
  0% { opacity: 0; }
  20% { opacity: .88; }
  38% { opacity: .2; }
  54% { opacity: .62; }
  100% { opacity: 0; }
}

@keyframes event-dark-flash {
  0% { opacity: 0; transform: scale(.94); filter: blur(0); }
  28% { opacity: .76; transform: scale(1.04); filter: blur(1px); }
  58% { opacity: .34; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.14); filter: blur(7px); }
}

@keyframes event-clear-flash {
  0% { opacity: 0; transform: scale(.96); }
  32% { opacity: .72; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.1); }
}

@keyframes event-scene-breathe {
  0%, 100% { transform: scale(1); filter: none; }
  44% { transform: scale(1.002); filter: brightness(1.04); }
}

@keyframes event-discover-breathe {
  0%, 100% { transform: scale(1); filter: none; }
  42% { transform: scale(1.004); filter: brightness(1.08); }
}

@keyframes event-reward-breathe {
  0%, 100% { transform: scale(1); filter: none; }
  46% { transform: scale(1.003); filter: brightness(1.05); }
}

@keyframes event-quiet-breathe {
  0%, 100% { transform: scale(1); filter: none; }
  48% { transform: scale(.998); filter: brightness(.96); }
}

@keyframes event-scene-flash {
  0% { opacity: 0; transform: scale(.99); }
  30% { opacity: .56; transform: scale(1.01); }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes event-discover-flash {
  0% { opacity: 0; transform: scale(.96); }
  24% { opacity: .74; transform: scale(1.02); }
  58% { opacity: .34; }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes event-reward-flash {
  0% { opacity: 0; transform: translateX(-14px); }
  28% { opacity: .62; }
  100% { opacity: 0; transform: translateX(18px); }
}

@keyframes event-quiet-flash {
  0% { opacity: 0; transform: scale(1.02); }
  36% { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(.99); }
}

@keyframes event-scene-vignette {
  0% { opacity: 0; transform: scale(.99); }
  32% { opacity: .72; }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes event-scene-sweep {
  0% { opacity: 0; transform: translateX(0) skewX(-10deg); }
  30% { opacity: .6; }
  100% { opacity: 0; transform: translateX(340%) skewX(-10deg); }
}

@keyframes event-scene-dust {
  0% { opacity: 0; transform: translateY(8px) scale(.5); }
  30% { opacity: .72; }
  100% { opacity: 0; transform: translateY(-14px) scale(.08); }
}

@keyframes event-discover-glow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  24% { opacity: .82; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}

@keyframes event-discover-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  24% { opacity: .76; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.26); }
}

@keyframes event-discover-ray {
  0% { opacity: 0; scale: .2 1; }
  26% { opacity: .62; }
  100% { opacity: 0; scale: 1 1; }
}

@keyframes event-discover-mote {
  0% { opacity: 0; transform: translateY(10px) scale(.4); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-18px) scale(.08); }
}

@keyframes event-reward-warmth {
  0% { opacity: 0; transform: scale(.98); }
  30% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.06); }
}

@keyframes event-reward-sheen {
  0% { opacity: 0; transform: translateX(0) skewX(-12deg); }
  28% { opacity: .72; }
  100% { opacity: 0; transform: translateX(330%) skewX(-12deg); }
}

@keyframes event-reward-spark {
  0% { opacity: 0; transform: translateY(8px) scale(.5); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px) scale(.08); }
}

@keyframes event-quiet-hush {
  0% { opacity: 0; transform: scale(1.02); }
  34% { opacity: .58; }
  100% { opacity: 0; transform: scale(.99); }
}

@keyframes event-quiet-dust {
  0% { opacity: 0; transform: translate(0, 6px) scale(.5); }
  30% { opacity: .68; }
  100% { opacity: 0; transform: translate(8px, -18px) scale(.12); }
}

@keyframes event-ambush-strike {
  0%, 100% { transform: translate(0, 0) scale(1); filter: none; }
  12% { transform: translate(-9px, 0) scale(1.008); filter: contrast(1.24); }
  26% { transform: translate(7px, -3px) scale(1.004); }
  42% { transform: translate(-4px, 2px) scale(1.002); }
  62% { transform: translate(2px, 0) scale(1); }
}

@keyframes event-ambush-flash {
  0% { opacity: 0; transform: scale(.995); }
  12% { opacity: .9; transform: scale(1.006); }
  24% { opacity: .18; }
  42% { opacity: .62; transform: scale(1.002); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes event-ambush-field {
  0% { opacity: 0; transform: scale(.98); }
  16% { opacity: .92; transform: scale(1.01); }
  50% { opacity: .7; }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes event-ambush-shadow-in {
  0% { opacity: 0; translate: var(--shadow-x, 0) 0; scale: .86; }
  24% { opacity: .66; }
  100% { opacity: 0; translate: 0 0; scale: 1.04; }
}

@keyframes event-ambush-eye {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.12); }
  18% { opacity: .95; transform: translate(-50%, -50%) scaleX(1); }
  34% { opacity: .24; }
  58% { opacity: .72; transform: translate(-50%, -50%) scaleX(.7); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(.2); }
}

@keyframes event-ambush-warning-line {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.1); }
  24% { opacity: .66; }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.1); }
}

@keyframes event-ambush-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.08); }
}

#modal-desc,
#event-modal .dice-row,
#modal-choices {
  position: relative;
  z-index: 1;
}

.modal-content.tutorial-modal #modal-desc {
  flex: 0 0 auto;
  overflow: visible;
  padding-right: 0;
  padding-top: 0;
  margin-top: 24px;
  margin-bottom: 0;
  white-space: normal;
}

.modal-content.tutorial-modal #modal-choices {
  margin-top: auto;
  padding-top: 10px;
  overflow: visible;
}

.modal-content.tutorial-modal .choice-btn {
  min-height: 54px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.modal-desc-intro,
.modal-desc-result {
  line-height: inherit;
}

.modal-desc-result:not([hidden]) {
  margin-top: .9em;
}

#modal-desc.typing::after,
#modal-desc .typing::after {
  content: "";
  display: inline-block;
  width: .55em;
  height: 1em;
  margin-left: 2px;
  border-right: 1px solid var(--accent);
  vertical-align: -0.12em;
  animation: type-caret .72s steps(1) infinite;
}

@keyframes type-caret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

#modal-choices,
.modal-content.narrative-modal #modal-choices {
  flex: 0 0 auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  background: transparent;
}

.modal-content.combat-modal #modal-desc {
  flex: 0 0 auto;
  min-height: 116px;
  max-height: 150px;
  margin-bottom: 8px;
  position: relative;
  overflow-y: hidden;
  font-size: .96em;
  line-height: 1.42;
}

.modal-content.combat-modal #modal-desc.has-combat-log-open {
  padding-right: 0;
  padding-bottom: 0;
}

.modal-content.combat-modal #modal-choices {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(180px, 24vh);
  padding-top: 8px;
}

.modal-content.combat-modal .choice-btn {
  padding: 7px 12px;
  line-height: 1.28;
}

.modal-extra {
  flex: 0 0 auto;
  margin: 12px 0 16px;
}

.combat-scene {
  position: relative;
  flex: 0 0 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px minmax(0, 1fr);
  grid-template-rows: 348px auto;
  gap: 14px;
  align-items: stretch;
  padding: 26px 32px 24px;
  background:
    radial-gradient(circle at 50% 62%, rgba(155, 52, 22, .14), transparent 44%),
    linear-gradient(180deg, rgba(8, 7, 6, .8), rgba(2, 2, 2, .86));
  border: 1px solid rgba(201, 145, 47, .34);
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, .28),
    0 0 22px rgba(0, 0, 0, .28);
}

.combat-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("assets/ui/combat-arena-frame.png") center / 100% 100% no-repeat;
  opacity: .68;
  filter: brightness(.72) saturate(.9) contrast(1.04);
}

.combat-scene::after {
  content: "";
  position: absolute;
  inset: 18px 22px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 22%, transparent 78%, rgba(0, 0, 0, .22)),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .06), rgba(0, 0, 0, .34) 76%);
}

.combat-scene > * {
  position: relative;
  z-index: 1;
}

.combat-scene.combat-impact-light {
  animation: combat-impact-light .2s ease-out;
}

.combat-scene.combat-impact-heavy {
  animation: combat-impact-heavy .28s ease-out;
}

.combat-scene.combat-impact-crushing {
  animation: combat-impact-crushing .43s cubic-bezier(.12, .72, .18, 1);
}

.combat-scene.combat-impact-burst {
  animation: combat-impact-burst .36s cubic-bezier(.16, .78, .2, 1);
}

.combat-scene.combat-impact-surge {
  animation: combat-impact-surge .46s cubic-bezier(.12, .74, .16, 1);
}

.combat-scene.combat-impact-finisher {
  animation: combat-impact-finisher .56s cubic-bezier(.1, .76, .14, 1);
}

.combat-scene.combat-preimpact-surge::after {
  animation: combat-preimpact-exposure .16s steps(2, end);
}

.combat-scene.combat-preimpact-finisher::after {
  animation: combat-preimpact-exposure-strong .26s steps(3, end);
}

.combat-scene.combat-preimpact-surge .combat-unit,
.combat-scene.combat-preimpact-surge .combat-enemy-card,
.combat-scene.combat-preimpact-surge .combat-attack-trail,
.combat-scene.combat-preimpact-surge .combat-hit-effect,
.combat-scene.combat-preimpact-finisher .combat-unit,
.combat-scene.combat-preimpact-finisher .combat-enemy-card,
.combat-scene.combat-preimpact-finisher .combat-attack-trail,
.combat-scene.combat-preimpact-finisher .combat-hit-effect {
  animation-play-state: paused !important;
}

.combat-scene.combat-impact-burst::after,
.combat-scene.combat-impact-surge::after,
.combat-scene.combat-impact-finisher::after {
  animation: combat-impact-exposure .34s ease-out;
}

.combat-scene.combat-impact-surge::after {
  animation-duration: .42s;
}

.combat-scene.combat-impact-finisher::after {
  animation-duration: .5s;
}

.combat-scene.combat-hit-stop .combat-attack-trail,
.combat-scene.combat-hit-stop .combat-hit-effect,
.combat-scene.combat-hit-stop .combat-enemy-card,
.combat-scene.combat-hit-stop .combat-damage-pop,
.combat-scene.combat-hit-stop .combat-unit {
  animation-play-state: paused !important;
}

/* 終結白閃幀 */
.combat-finisher-flash {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: rgba(255, 248, 230, .92);
  mix-blend-mode: overlay;
  animation: combat-finisher-flash .17s ease-out forwards;
}
@keyframes combat-finisher-flash {
  0%   { opacity: .92; }
  100% { opacity: 0; }
}

/* 傷害蓋章（重擊/終結） */
.combat-damage-stamp {
  position: absolute;
  left: 50%;
  top: -1.2em;
  font: 900 .32em/1 var(--font-serif);
  letter-spacing: .14em;
  padding: .18em .45em .14em .55em;
  border: 2px solid currentColor;
  border-radius: 3px;
  pointer-events: none;
  animation: damage-stamp-in .3s cubic-bezier(.2, 1.6, .4, 1) .08s both;
}
.combat-damage-stamp.stamp-surge {
  color: #ffd86e;
  text-shadow: 0 0 12px rgba(255, 176, 50, .8);
}
.combat-damage-stamp.stamp-finisher {
  color: #ff9676;
  text-shadow: 0 0 14px rgba(255, 90, 40, .85);
}
@keyframes damage-stamp-in {
  0%   { transform: translateX(-50%) rotate(-11deg) scale(2.1); opacity: 0; }
  100% { transform: translateX(-50%) rotate(-4deg) scale(1); opacity: 1; }
}

/* 傷害數字逐位彈入 */
.combat-damage-digit {
  animation: damage-digit-in .26s cubic-bezier(.2, 1.5, .4, 1) both;
}
.combat-damage-pop .combat-damage-digit:nth-child(2) { animation-delay: .05s; }
.combat-damage-pop .combat-damage-digit:nth-child(3) { animation-delay: .1s; }
@keyframes damage-digit-in {
  0%   { transform: translateY(-8px) scale(1.6); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* 敵方 HP 殘影條：藏在主條底下，掉血瞬間露出「被咬掉的那段」再縮回 */
.combat-hp-ghost {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  background: rgba(255, 168, 122, .55);
  transition: width .5s ease .3s;
  pointer-events: none;
}

/* 結算覆盤 tips */
.gameover-tip {
  margin-top: 8px;
  padding: 6px 10px;
  border-left: 2px solid rgba(201, 145, 47, .55);
  background: rgba(201, 145, 47, .07);
  color: var(--text-dim);
  font-size: .9em;
  text-align: left;
}

/* 共鳴剪影牆 */
.resonance-wall {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(201, 145, 47, .18);
}
.resonance-wall-title {
  font-size: .86em;
  color: var(--text-dim);
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.resonance-wall-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.resonance-wall-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: brightness(0) opacity(.42);
  transition: filter .2s;
}
.resonance-wall-icon.seen {
  filter: drop-shadow(0 0 7px rgba(201, 145, 47, .45));
}

/* 起始畫面生涯印記 */
.career-strip {
  margin-top: 14px;
  font-size: .88em;
  color: rgba(214, 196, 158, .85);
  letter-spacing: .04em;
}
.career-strip .career-hook {
  display: block;
  margin-top: 3px;
  color: rgba(150, 138, 168, .82);
  font-size: .92em;
}

@keyframes combat-impact-light {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(-2px, 1px); }
  70% { transform: translate(2px, -1px); }
}

@keyframes combat-impact-heavy {
  0%, 100% { transform: translate(0, 0); }
  18% { transform: translate(-4px, 2px); }
  42% { transform: translate(4px, -2px); }
  68% { transform: translate(-2px, -1px); }
}

@keyframes combat-impact-crushing {
  0%, 100% { transform: translate(0, 0); filter: none; }
  12% { transform: translate(-5px, 2px); filter: brightness(1.08) contrast(1.06); }
  28% { transform: translate(4px, -2px); }
  46% { transform: translate(-3px, -1px); }
  64% { transform: translate(2px, 1px); filter: brightness(1.02) contrast(1.04); }
}

@keyframes combat-impact-burst {
  0%, 100% { transform: translate(0, 0); filter: none; }
  16% { transform: translate(-3px, 1px); filter: brightness(1.06) saturate(1.06); }
  38% { transform: translate(3px, -1px); }
  64% { transform: translate(-1px, 1px); filter: brightness(1.02) contrast(1.04); }
}

@keyframes combat-impact-surge {
  0%, 100% { transform: translate(0, 0); filter: none; }
  12% { transform: translate(-6px, 3px); filter: brightness(1.12) contrast(1.08) saturate(1.08); }
  28% { transform: translate(5px, -3px); }
  46% { transform: translate(-4px, -2px); }
  68% { transform: translate(2px, 1px); filter: brightness(1.04) contrast(1.06); }
}

@keyframes combat-impact-finisher {
  0%, 100% { transform: translate(0, 0) scale(1); filter: none; }
  10% { transform: translate(-9px, 4px) scale(1.006); filter: brightness(1.2) contrast(1.14) saturate(1.12); }
  24% { transform: translate(8px, -4px) scale(1.004); }
  40% { transform: translate(-6px, -3px) scale(1.003); filter: grayscale(.35) brightness(1.08); }
  58% { transform: translate(4px, 2px) scale(1.001); }
  76% { transform: translate(-2px, 1px) scale(1); filter: brightness(1.03) contrast(1.06); }
}

@keyframes combat-impact-exposure {
  0%, 100% { opacity: .68; filter: brightness(.72) saturate(.9) contrast(1.04); }
  18% { opacity: .9; filter: grayscale(.18) brightness(1.4) saturate(.8) contrast(1.28); }
  34% { opacity: .74; filter: sepia(.3) brightness(1.16) saturate(1.28) contrast(1.12); }
}

@keyframes combat-preimpact-exposure {
  0%, 100% { opacity: .68; filter: brightness(.72) saturate(.9) contrast(1.04); }
  45% { opacity: .96; filter: grayscale(.3) brightness(1.5) contrast(1.24); }
  72% { opacity: .78; filter: brightness(.58) contrast(1.3); }
}

@keyframes combat-preimpact-exposure-strong {
  0%, 100% { opacity: .68; filter: brightness(.72) saturate(.9) contrast(1.04); }
  22% { opacity: 1; filter: grayscale(.62) brightness(1.85) contrast(1.35); }
  52% { opacity: .86; filter: brightness(.46) contrast(1.44) saturate(.64); }
  78% { opacity: .98; filter: grayscale(.35) brightness(1.42) contrast(1.22); }
}

.combat-intent-arrow {
  position: fixed;
  inset: 0;
  z-index: 201;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.combat-intent-arrow line {
  stroke: rgba(231, 64, 48, .86);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 6 5;
  marker-end: url("#combat-intent-arrow-head");
  filter: drop-shadow(0 0 5px rgba(231, 64, 48, .7));
}

.combat-intent-arrow circle,
.combat-intent-arrow marker path {
  fill: rgba(255, 104, 82, .96);
}
.combat-tools {
  width: 128px;
  height: calc(100% - 56px);
  display: grid;
  grid-template-rows: 52px 96px 86px;
  align-items: center;
  justify-items: center;
  align-content: center;
  gap: 10px;
  pointer-events: auto;
}
.combat-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 52px;
  pointer-events: auto;
}
.combat-actions.combat-actions-inline-disabled {
  display: none;
}
.combat-bottom-tools {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.combat-tools .combat-guard-button,
.combat-tools .combat-bag-button {
  width: 62px;
  min-height: 60px;
  pointer-events: auto;
}

.combat-tools .combat-actions,
.combat-tools .combat-bottom-tools,
.combat-tools .combat-guard-dice,
.combat-tools .combat-guard-button,
.combat-tools .combat-bag-button {
  flex: 0 0 auto;
}

.combat-enemy-card,
.combat-squad-card {
  position: relative;
  min-width: 0;
  height: 348px;
  box-sizing: border-box;
  padding: 10px;
  background: rgba(10,10,10,.42);
  border: 1px solid var(--border);
}
.hoverable-enemy { cursor: default; }

.combat-enemy-card {
  text-align: center;
  border-color: #5a1818;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.combat-enemy-card.has-card-bg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 232px;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(2, 2, 4, .12), rgba(2, 2, 4, .26)),
    radial-gradient(circle at 50% 34%, rgba(132, 70, 230, .18), transparent 52%),
    var(--enemy-card-bg) center 42% / 128% auto no-repeat;
  opacity: .98;
  filter: saturate(1.08) contrast(1.02);
}

.combat-enemy-card.defeated.has-card-bg::before {
  filter: grayscale(1) saturate(.12) brightness(.62) contrast(1.06);
  opacity: .78;
}

.combat-enemy-card.defeated.has-card-bg::after {
  filter: grayscale(1) saturate(.12) brightness(.62) contrast(1.06);
  opacity: .78;
}

.combat-enemy-card.enemy-treasure_mimic.has-card-bg::before {
  background: var(--enemy-card-bg) center 56% / auto 72% no-repeat;
  opacity: 1;
  filter: none;
}

.combat-enemy-card.enemy-dark_gift_mimic.has-card-bg::before {
  background: var(--enemy-card-bg) center 56% / auto 74% no-repeat;
  opacity: 1;
  filter: none;
}

.combat-enemy-card.enemy-cage_warden.has-card-bg::before,
.combat-enemy-card.enemy-dice_corruptor.has-card-bg::before,
.combat-enemy-card.enemy-echo_guardian_wound.has-card-bg::before,
.combat-enemy-card.enemy-echo_guardian_eagle.has-card-bg::before,
.combat-enemy-card.enemy-echo_guardian_fate.has-card-bg::before,
.combat-enemy-card.enemy-echo_guardian_banner.has-card-bg::before,
.combat-enemy-card.enemy-night_heart.has-card-bg::before {
  height: 100%;
  background:
    linear-gradient(180deg, rgba(2, 1, 5, .14), rgba(3, 1, 6, .22) 42%, rgba(1, 1, 3, .5)),
    url("assets/enemies/full-card-atmosphere-bg.png") center center / cover no-repeat;
  opacity: 1;
  filter: saturate(1.08) contrast(1.04);
}

.combat-enemy-card.enemy-abyss_warden.has-card-bg::before,
.combat-enemy-card[class*="enemy-dark_monster_"].has-card-bg::before {
  height: 100%;
  background:
    linear-gradient(180deg, rgba(2, 1, 5, .06), rgba(3, 1, 6, .22) 58%, rgba(1, 1, 3, .42)),
    var(--enemy-card-bg) center center / cover no-repeat;
  opacity: 1;
  filter: saturate(1.08) contrast(1.04);
}

.combat-enemy-card.enemy-shadow_worm.has-card-bg::before,
.combat-enemy-card.enemy-rot_crawler.has-card-bg::before,
.combat-enemy-card.enemy-plague_moth.has-card-bg::before,
.combat-enemy-card.enemy-rot_knight.has-card-bg::before,
.combat-enemy-card.enemy-shadow_hunter.has-card-bg::before {
  height: 100%;
  background:
    linear-gradient(180deg, rgba(3, 1, 7, .08), rgba(4, 1, 8, .2) 58%, rgba(1, 1, 3, .46)),
    var(--enemy-card-bg) center center / cover no-repeat;
  opacity: 1;
  filter: saturate(1.06) contrast(1.04);
}

.combat-enemy-card.has-card-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 232px;
  z-index: 0;
  pointer-events: none;
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .34), inset 0 -20px 28px rgba(0, 0, 0, .38);
}

.combat-enemy-card.enemy-treasure_mimic.has-card-bg::after,
.combat-enemy-card.enemy-dark_gift_mimic.has-card-bg::after {
  display: none;
}

.combat-enemy-card.enemy-cage_warden.has-card-bg::after,
.combat-enemy-card.enemy-dice_corruptor.has-card-bg::after,
.combat-enemy-card.enemy-echo_guardian_wound.has-card-bg::after,
.combat-enemy-card.enemy-echo_guardian_eagle.has-card-bg::after,
.combat-enemy-card.enemy-echo_guardian_fate.has-card-bg::after,
.combat-enemy-card.enemy-echo_guardian_banner.has-card-bg::after,
.combat-enemy-card.enemy-night_heart.has-card-bg::after {
  height: 100%;
  background:
    linear-gradient(180deg, transparent 0, transparent 58%, rgba(3, 1, 6, .28) 76%, rgba(2, 1, 5, .52) 100%),
    var(--enemy-card-bg) center top / auto 69% no-repeat;
  box-shadow:
    inset 0 0 32px rgba(0, 0, 0, .34),
    inset 0 -42px 42px rgba(0, 0, 0, .46);
}

.combat-enemy-card.enemy-echo_guardian_fate.has-card-bg::after {
  background:
    linear-gradient(180deg, transparent 0, transparent 58%, rgba(3, 1, 6, .28) 76%, rgba(2, 1, 5, .52) 100%),
    var(--enemy-card-bg) center top / auto 67% no-repeat;
}

.combat-enemy-card.enemy-cage_warden.has-card-bg::after {
  background:
    linear-gradient(180deg, transparent 0, transparent 58%, rgba(3, 1, 6, .28) 76%, rgba(2, 1, 5, .52) 100%),
    var(--enemy-card-bg) center top / auto 58% no-repeat;
}

.combat-enemy-card.enemy-echo_guardian_sword.has-card-bg::before {
  height: 100%;
  background:
    linear-gradient(180deg, rgba(2, 1, 5, .08), rgba(3, 1, 6, .18) 48%, rgba(1, 1, 3, .48)),
    url("assets/enemies/full-card-atmosphere-bg.png") center center / cover no-repeat;
  opacity: 1;
  filter: saturate(1.02) contrast(1.06);
}

.combat-enemy-card.enemy-echo_guardian_sword.has-card-bg::after {
  height: 100%;
  background:
    linear-gradient(180deg, transparent 0, transparent 62%, rgba(3, 1, 6, .28) 78%, rgba(2, 1, 5, .52) 100%),
    var(--enemy-card-bg) center 6% / auto 88% no-repeat;
  box-shadow:
    inset 0 0 32px rgba(0, 0, 0, .34),
    inset 0 -42px 42px rgba(0, 0, 0, .46);
}

.combat-enemy-card.enemy-abyss_warden.has-card-bg::after,
.combat-enemy-card[class*="enemy-dark_monster_"].has-card-bg::after {
  height: 100%;
  box-shadow:
    inset 0 0 32px rgba(0, 0, 0, .34),
    inset 0 -42px 42px rgba(0, 0, 0, .46);
}

.combat-enemy-card.enemy-shadow_worm.has-card-bg::after,
.combat-enemy-card.enemy-rot_crawler.has-card-bg::after,
.combat-enemy-card.enemy-plague_moth.has-card-bg::after,
.combat-enemy-card.enemy-rot_knight.has-card-bg::after,
.combat-enemy-card.enemy-shadow_hunter.has-card-bg::after {
  height: 100%;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, .32),
    inset 0 -42px 42px rgba(0, 0, 0, .5);
}

.combat-enemy-card.enemy-cage_warden .combat-enemy-divider {
  margin-top: 16px;
}

.combat-enemy-card.enemy-cage_warden .combat-enemy-info-panel {
  margin-top: 8px;
  padding-top: 4px;
}

.combat-enemy-card.enemy-cage_warden .combat-weakness-effect {
  font-size: .72em;
  line-height: 15px;
}

.combat-enemy-card.has-card-bg > * {
  position: relative;
  z-index: 1;
}

.combat-enemy-card.has-card-bg {
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, .12) 0, rgba(10, 10, 10, .16) 232px, rgba(10, 10, 10, .58) 232px, rgba(10, 10, 10, .66) 100%);
}

.combat-enemy-card.has-card-bg .combat-enemy-figure {
  min-height: 118px;
}

.combat-enemy-card.has-card-bg .combat-weakness-icon-row {
  align-items: center;
  justify-content: center;
}

.combat-enemy-card.has-card-bg .combat-stat-line {
  min-height: 24px;
}

.combat-enemy-info-panel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 12px;
  padding-top: 4px;
  overflow: hidden;
}

.combat-enemy-card.has-card-bg .combat-enemy-info-panel {
  background: rgba(5, 5, 6, .12);
  border-top: 0;
  margin: 12px -10px -10px;
  padding: 6px 10px 8px;
}

.combat-enemy-divider {
  position: relative;
  flex: 0 0 1px;
  width: 78%;
  height: 1px;
  margin: 28px auto 0;
  z-index: 2;
  background:
    linear-gradient(90deg, transparent, rgba(201, 145, 47, .68) 18%, rgba(244, 205, 113, .82) 50%, rgba(201, 145, 47, .68) 82%, transparent);
  box-shadow: 0 0 8px rgba(201, 145, 47, .28);
  pointer-events: none;
}

.combat-enemy-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid rgba(244, 205, 113, .76);
  background: rgba(20, 16, 10, .94);
  box-shadow: 0 0 8px rgba(201, 145, 47, .35);
}

.combat-enemy-info-panel .combat-weakness-icon-row {
  margin-top: 0;
}

.combat-enemy-card.has-card-bg .combat-side-label,
.combat-enemy-card.has-card-bg .combat-stat-line,
.combat-enemy-card.has-card-bg .combat-weakness-effect {
  text-shadow: 0 2px 6px rgba(0, 0, 0, .95);
}

.combat-squad-card {
  display: grid;
  grid-template-rows: 20px repeat(3, minmax(0, 1fr));
  gap: 6px;
  border-color: #263a26;
  overflow: visible;
}

.combat-side-label {
  color: var(--text-dim);
  font-size: .78em;
  letter-spacing: .12em;
  text-transform: uppercase;
  height: 20px;
  margin-bottom: 6px;
}

.combat-enemy-figure {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: min(320px, 100%);
  margin: 0 auto 4px;
}

.combat-enemy-sprite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  font-size: 3.55em;
  line-height: 1;
  margin: 0 0 4px;
  filter: drop-shadow(0 0 16px rgba(140,40,40,.35));
}

.combat-enemy-detail-button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: help;
  font: inherit;
}

.combat-enemy-sprite.combat-enemy-detail-button {
  font-size: 3.55em;
}

.combat-enemy-detail-button:hover,
.combat-enemy-detail-button:focus-visible {
  filter:
    drop-shadow(0 0 14px rgba(245, 210, 123, .5))
    drop-shadow(0 0 16px rgba(140,40,40,.35));
  outline: none;
}

.combat-enemy-img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 18px rgba(112, 40, 190, .42));
}

.combat-enemy-img.flip-x {
  transform: scaleX(-1);
}

.combat-enemy-img.large {
  width: 140px;
  height: 140px;
  max-width: none;
  margin: -22px -22px -18px;
}

.combat-enemy-card.enemy-abyss_warden .combat-enemy-img.large,
.combat-enemy-card[class*="enemy-dark_monster_"] .combat-enemy-img.large {
  width: calc(190px * var(--dark-avatar-scale, 1));
  height: calc(190px * var(--dark-avatar-scale, 1));
  margin: -28px -48px -48px;
  filter:
    brightness(1.05)
    saturate(1.12)
    drop-shadow(0 0 20px rgba(82, 220, 255, .36))
    drop-shadow(0 0 28px rgba(118, 48, 255, .48));
}

.combat-enemy-card.reel-combat-enemy .combat-enemy-figure {
  min-height: 176px;
  height: 176px;
  margin-top: -14px;
  margin-bottom: -8px;
}

.combat-enemy-card.reel-combat-enemy .combat-enemy-img.large {
  width: calc(228px * var(--dark-avatar-scale, 1));
  height: calc(228px * var(--dark-avatar-scale, 1));
  margin: -54px -68px -72px;
}

.combat-enemy-card.enemy-abyss_warden .combat-enemy-sprite,
.combat-enemy-card[class*="enemy-dark_monster_"] .combat-enemy-sprite {
  position: relative;
  z-index: 1;
  transform: translateY(10px);
}

.combat-enemy-img.large.flip-x {
  transform: scaleX(-1);
}

.combat-enemy-img.soft-edge {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 56%, rgba(0, 0, 0, .72) 69%, transparent 84%);
  mask-image: radial-gradient(ellipse at center, #000 56%, rgba(0, 0, 0, .72) 69%, transparent 84%);
}

.combat-enemy-card.defeated .combat-enemy-sprite {
  filter: grayscale(1) saturate(.12) brightness(.72) contrast(1.08);
  opacity: .76;
}

.combat-enemy-card.defeated .combat-enemy-img {
  filter:
    grayscale(1)
    saturate(.12)
    brightness(.72)
    contrast(1.08)
    drop-shadow(0 0 12px rgba(0, 0, 0, .72));
}

.combat-enemy-card.self-targeted {
  border-color: rgba(211, 52, 52, 0.95);
  box-shadow:
    0 0 0 1px rgba(211, 52, 52, 0.55),
    0 0 22px rgba(211, 52, 52, 0.34),
    inset 0 0 24px rgba(114, 13, 13, 0.28);
  animation: combat-self-wound-pulse 1.05s ease-in-out infinite alternate;
}

.combat-enemy-card.self-targeted .combat-enemy-figure {
  filter: drop-shadow(0 0 14px rgba(232, 47, 47, 0.7));
}

@keyframes combat-self-wound-pulse {
  from {
    box-shadow:
      0 0 0 1px rgba(211, 52, 52, 0.45),
      0 0 14px rgba(211, 52, 52, 0.26),
      inset 0 0 16px rgba(114, 13, 13, 0.2);
  }
  to {
    box-shadow:
      0 0 0 1px rgba(255, 82, 82, 0.8),
      0 0 30px rgba(211, 52, 52, 0.44),
      inset 0 0 30px rgba(114, 13, 13, 0.34);
  }
}

.combat-blood-splatter {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  background-image: url("assets/effects/blood-splatter-sheet.png");
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: var(--blood-pos-x, 50%) var(--blood-pos-y, 50%);
  filter:
    saturate(1.22)
    contrast(1.08)
    drop-shadow(0 1px 4px rgba(0, 0, 0, .45));
  transform:
    translate(-50%, -50%)
    rotate(var(--blood-rot, 0deg))
    scale(var(--blood-scale, 1))
    scaleX(var(--blood-flip, 1));
  transform-origin: center;
}

.combat-enemy-figure .combat-blood-splatter.enemy {
  left: 50%;
  top: 50%;
  width: 138px;
  height: 138px;
  opacity: 0;
}

.combat-enemy-card.defeated .combat-blood-splatter.enemy {
  opacity: .92;
  animation: blood-splatter-pop .34s ease-out both;
}

.combat-unit > .combat-blood-splatter.ally {
  left: 50%;
  top: 44%;
  width: min(152px, 92%);
  aspect-ratio: 1;
  opacity: .86;
  z-index: 4;
  animation: blood-splatter-pop .34s ease-out both;
}

@keyframes blood-splatter-pop {
  from {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--blood-rot, 0deg))
      scale(calc(var(--blood-scale, 1) * .72))
      scaleX(var(--blood-flip, 1));
  }
  to {
    opacity: .9;
    transform:
      translate(-50%, -50%)
      rotate(var(--blood-rot, 0deg))
      scale(var(--blood-scale, 1))
      scaleX(var(--blood-flip, 1));
  }
}

.combat-enemy-status-icons {
  position: absolute;
  right: 0;
  top: 50%;
  min-height: 42px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 0;
  max-width: 88px;
  flex-wrap: wrap;
  transform: translateY(-50%);
}

.combat-suspicious-flaw-badge {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 214, 121, .5);
  border-radius: 50%;
  background: rgba(42, 30, 12, .78);
  color: #ffe29a;
  font: 700 .86rem/1 var(--font-sans);
  box-shadow: 0 0 14px rgba(255, 190, 84, .18);
  cursor: help;
}

.modal-choices.combat-result-waiting,
.combat-actions.combat-result-waiting {
  visibility: hidden;
  pointer-events: none;
}

.combat-weakness-icon-row {
  min-height: 42px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: -2px 0 4px;
  flex-wrap: wrap;
}

.combat-enemy-name {
  position: relative;
  z-index: 3;
  color: var(--text-bright);
  font-family: var(--font-serif);
  font-size: 1.05em;
  height: 25px;
  margin-bottom: 8px;
}

.combat-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  text-align: center;
  overflow: visible;
}

.combat-vs {
  width: 92px;
  height: 92px;
  color: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--font-serif);
  font-size: 0;
  background: url("assets/ui/vs-emblem.png") center / contain no-repeat;
  filter: brightness(.94) saturate(.98) drop-shadow(0 0 12px rgba(190, 58, 22, .34));
  pointer-events: none;
}
.combat-card-dice {
  position: absolute;
  z-index: 4;
  width: 32px;
  height: 32px;
  aspect-ratio: 1 / 1;
  transform-origin: center center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  padding: 4px;
  box-sizing: border-box;
  border: 2px solid rgba(201,145,47,.72);
  border-radius: 6px;
  background: linear-gradient(145deg, #eee3c8, #bda46f);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,.48), 0 0 8px rgba(201,145,47,.2);
  overflow: hidden;
}
.combat-card-dice::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  background: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  filter: saturate(1.08) contrast(1.05);
}
.combat-card-dice span {
  position: relative;
  z-index: 1;
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
.combat-card-dice span.on {
  background: #211812;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.2);
}
.combat-card-dice .dice-number {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  color: currentColor;
  font-family: var(--font-serif);
  font-size: .95em;
  line-height: 1;
}
.combat-card-dice.player {
  top: -10px;
  right: -10px;
}
.combat-card-dice.combat-guard-dice {
  position: absolute;
  left: calc(50% - 17px);
  right: auto;
  top: auto;
  bottom: calc(100% + 7px);
  z-index: 2;
  width: 34px;
  height: 34px;
  margin: 0;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(124, 196, 255, .34), 0 5px 14px rgba(0, 0, 0, .52);
}
.combat-card-dice.enemy {
  top: -10px;
  left: -10px;
}

.combat-floating-enemy-dice {
  position: absolute;
  top: -8px;
  left: -8px;
  transform: none;
  z-index: 32;
  pointer-events: none;
}

.combat-enemy-card.has-card-bg > .combat-floating-enemy-dice,
.combat-enemy-card > .combat-floating-enemy-dice {
  position: absolute;
  z-index: 32;
}

.combat-enemy-card.has-card-bg > .combat-enemy-damage-die-panel,
.combat-enemy-card > .combat-enemy-damage-die-panel {
  z-index: 32;
}

.combat-floating-enemy-dice .combat-card-dice.enemy {
  position: relative;
  top: auto;
  left: auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(154, 61, 45, .82);
  border-radius: 4px;
  background:
    radial-gradient(circle at 38% 28%, rgba(176, 79, 54, .32), transparent 45%),
    linear-gradient(145deg, #3b211d, #120d0c 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 184, 118, .12),
    inset 0 0 10px rgba(0, 0, 0, .62),
    0 4px 12px rgba(0, 0, 0, .55),
    0 0 14px rgba(132, 32, 22, .34);
}

.combat-floating-enemy-dice .combat-card-dice.enemy span.on {
  background: #f0b16d;
  box-shadow: 0 0 5px rgba(226, 84, 44, .55);
}
.trap-dice-preview {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 10px 0 12px;
}
.trap-dice-label {
  color: var(--muted);
  font-size: .86em;
}
.combat-card-dice.trap-dice {
  position: static;
  width: 42px;
  height: 42px;
}
.combat-card-dice.trap-dice span {
  width: 5px;
  height: 5px;
}
.combat-card-dice.dice-theme-warrior,
.dice-result.dice-theme-warrior {
  color: #2b1110;
}
.combat-card-dice.dice-theme-warrior {
  border-color: transparent;
  border-radius: 3px;
  overflow: visible;
  background:
    radial-gradient(circle at 42% 30%, rgba(215,218,207,.22), transparent 40%),
    linear-gradient(145deg, #6f7473, #33393b 58%, #1b1010);
  box-shadow:
    0 5px 14px rgba(0,0,0,.48),
    inset 0 0 0 4px rgba(34, 10, 9, .86),
    inset 0 0 0 6px rgba(174, 58, 48, .5),
    inset 0 0 12px rgba(0,0,0,.58);
}
.combat-card-dice.dice-theme-warrior::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(238,208,166,.42), transparent 34%, rgba(134,34,28,.25) 72%, rgba(0,0,0,.38)),
    url("assets/dice/warrior-frame-overlay.png") center / 100% 100% no-repeat;
  filter: contrast(1.18) saturate(1.2) drop-shadow(0 0 3px rgba(190,52,42,.42));
}
.dice-result.dice-theme-warrior { background: radial-gradient(circle at 50% 30%, rgba(150,50,40,.22), rgba(0,0,0,.2) 65%); }
.combat-card-dice.dice-theme-warrior span.on {
  z-index: 4;
  width: 4.5px;
  height: 4.5px;
  background: #150706;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 1px rgba(255,228,190,.24),
    0 0 4px rgba(192,54,44,.45);
}
.combat-card-dice.dice-theme-warrior.trap-dice span.on {
  width: 6.5px;
  height: 6.5px;
}
.dice-result.dice-theme-warrior .dice-face { color: #f0d6c8; text-shadow: 0 0 16px rgba(182,62,48,.48); }

.combat-card-dice.dice-theme-explorer,
.dice-result.dice-theme-explorer {
  border-color: rgba(139,169,96,.82);
  color: #102018;
  box-shadow: 0 5px 14px rgba(0,0,0,.55), 0 0 10px rgba(112,178,166,.25);
}
.combat-card-dice.dice-theme-explorer {
  border-color: transparent;
  border-radius: 4px;
  overflow: visible;
  background:
    radial-gradient(circle at 42% 30%, rgba(220,204,140,.18), transparent 42%),
    linear-gradient(145deg, #5b694c, #273e34 58%, #101b16);
  box-shadow:
    0 5px 14px rgba(0,0,0,.48),
    inset 0 0 0 4px rgba(38, 52, 33, .82),
    inset 0 0 0 6px rgba(178, 143, 70, .42),
    inset 0 0 12px rgba(0,0,0,.52);
}
.combat-card-dice.dice-theme-explorer::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(236,206,126,.32), transparent 36%, rgba(47,118,98,.18) 72%, rgba(0,0,0,.34)),
    url("assets/dice/explorer-frame-overlay.png") center / 100% 100% no-repeat;
  filter: contrast(1.12) saturate(1.12) drop-shadow(0 0 3px rgba(112,178,166,.36));
}
.dice-result.dice-theme-explorer { background: radial-gradient(circle at 50% 30%, rgba(80,130,90,.22), rgba(0,0,0,.2) 65%); }
.combat-card-dice.dice-theme-explorer span.on {
  z-index: 4;
  width: 5px;
  height: 5px;
  background: #172018;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border-radius: 0;
  box-shadow: 0 0 3px rgba(204,176,96,.42);
}
.combat-card-dice.dice-theme-explorer.trap-dice span.on {
  width: 7px;
  height: 7px;
}
.dice-result.dice-theme-explorer .dice-face { color: #cfe6b8; text-shadow: 0 0 16px rgba(112,178,166,.5); }

.combat-card-dice.dice-theme-support,
.dice-result.dice-theme-support {
  border-color: rgba(245,214,138,.88);
  color: #3b2b11;
  box-shadow: 0 5px 14px rgba(0,0,0,.5), 0 0 14px rgba(245,214,138,.3);
}
.combat-card-dice.dice-theme-support {
  border-color: transparent;
  border-radius: 5px;
  overflow: visible;
  background:
    radial-gradient(circle at 42% 30%, rgba(255,244,198,.28), transparent 44%),
    linear-gradient(145deg, #f1dfaa, #9d8751 55%, #4b594c);
  box-shadow:
    0 5px 14px rgba(0,0,0,.45),
    inset 0 0 0 4px rgba(82, 73, 42, .62),
    inset 0 0 0 6px rgba(244, 217, 135, .44),
    inset 0 0 12px rgba(0,0,0,.34);
}
.combat-card-dice.dice-theme-support::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,250,210,.42), transparent 36%, rgba(245,214,138,.22) 72%, rgba(0,0,0,.18)),
    url("assets/dice/support-frame-overlay.png") center / 100% 100% no-repeat;
  filter: contrast(1.08) saturate(1.08) drop-shadow(0 0 4px rgba(245,214,138,.52));
}
.dice-result.dice-theme-support { background: radial-gradient(circle at 50% 30%, rgba(210,180,80,.22), rgba(0,0,0,.2) 65%); }
.combat-card-dice.dice-theme-support span.on {
  z-index: 4;
  width: 5px;
  height: 5px;
  background: #fff8d6;
  box-shadow: 0 0 5px rgba(255,242,178,.95), inset 0 1px 1px rgba(255,255,255,.55);
}
.combat-card-dice.dice-theme-support.trap-dice span.on {
  width: 7px;
  height: 7px;
}
.dice-result.dice-theme-support .dice-face { color: #fff0bd; text-shadow: 0 0 18px rgba(245,214,138,.62); }

.combat-card-dice.dice-theme-scholar,
.dice-result.dice-theme-scholar {
  border-color: rgba(167,42,42,.9);
  color: #180808;
  box-shadow: 0 5px 14px rgba(0,0,0,.58), 0 0 14px rgba(167,42,42,.34);
}
.combat-card-dice.dice-theme-scholar {
  border-color: transparent;
  border-radius: 4px;
  overflow: visible;
  background:
    radial-gradient(circle at 42% 30%, rgba(236,219,186,.22), transparent 42%),
    linear-gradient(145deg, #b4a084, #5d5144 58%, #1d1412);
  box-shadow:
    0 5px 14px rgba(0,0,0,.52),
    inset 0 0 0 4px rgba(33, 21, 18, .78),
    inset 0 0 0 6px rgba(214, 185, 136, .35),
    inset 0 0 12px rgba(0,0,0,.56);
}
.combat-card-dice.dice-theme-scholar::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(244,226,190,.32), transparent 36%, rgba(80,40,32,.2) 72%, rgba(0,0,0,.34)),
    url("assets/dice/scholar-frame-bone-overlay.png") center / 100% 100% no-repeat;
  filter: contrast(1.14) saturate(1.05) drop-shadow(0 0 4px rgba(190,40,45,.26));
}
.dice-result.dice-theme-scholar { background: radial-gradient(circle at 50% 30%, rgba(150,38,38,.24), rgba(0,0,0,.2) 65%); }
.combat-card-dice.dice-theme-scholar span.on {
  z-index: 4;
  width: 5px;
  height: 5px;
  background: #5c0f13;
  box-shadow: 0 0 4px rgba(210,49,49,.75), inset 0 1px 1px rgba(255,205,178,.18);
}
.combat-card-dice.dice-theme-scholar.trap-dice span.on {
  width: 7px;
  height: 7px;
}
.dice-result.dice-theme-scholar .dice-face { color: #f0d7c3; text-shadow: 0 0 18px rgba(167,42,42,.58); }

.combat-card-dice.dice-theme-neutral,
.dice-result.dice-theme-neutral {
  border-color: rgba(201,145,47,.72);
}
.combat-card-dice.dice-d12 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  padding: 0;
  border-radius: 0;
  clip-path: polygon(50% 0%, 75% 7%, 93% 25%, 100% 50%, 93% 75%, 75% 93%, 50% 100%, 25% 93%, 7% 75%, 0% 50%, 7% 25%, 25% 7%);
}
.combat-card-dice.dice-d12::before {
  inset: 0;
  clip-path: inherit;
}
.combat-card-dice.dice-d12::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 2;
  pointer-events: none;
  clip-path: inherit;
  background:
    radial-gradient(circle at 35% 22%, rgba(255,240,202,.38), transparent 22%),
    linear-gradient(145deg, rgba(255,235,184,.26), transparent 42%, rgba(0,0,0,.38));
  box-shadow: inset 0 0 0 2px rgba(25, 14, 10, .56), inset 0 0 12px rgba(0,0,0,.48);
  filter: none;
}
.combat-card-dice.dice-d12 .dice-number {
  position: relative;
  z-index: 5;
  color: #f4dec2;
  font-size: 1.02em;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.82), 0 0 8px rgba(167,42,42,.46);
}
.combat-card-dice.dice-d12-fate,
.combat-card-dice.dice-d12-lucky {
  border: 0;
  clip-path: none;
  overflow: visible;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 128%;
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.58));
}
.combat-card-dice.dice-d12-fate {
  background-image: url("assets/dice/fate-d12-base-ui-alpha.png");
}
.combat-card-dice.dice-d12-lucky {
  background-image: url("assets/dice/lucky-d12-base-ui-alpha.png");
}
.combat-card-dice.dice-d12-fate::before,
.combat-card-dice.dice-d12-lucky::before {
  display: none;
}
.combat-card-dice.dice-d12-fate::after,
.combat-card-dice.dice-d12-lucky::after {
  display: none;
}
.combat-card-dice.dice-d12-fate.dice-pip-settled,
.combat-card-dice.dice-d12-lucky.dice-pip-settled {
  animation: d12-image-dice-settle .22s ease forwards;
}
@keyframes d12-image-dice-settle {
  0%   { transform: scale(1.28); filter: drop-shadow(0 0 12px rgba(201,145,47,.72)); }
  60%  { transform: scale(.94); }
  100% { transform: scale(1); filter: drop-shadow(0 5px 8px rgba(0,0,0,.58)); }
}
.combat-card-dice.modal.dice-d12 {
  width: 56px;
  height: 56px;
}
.combat-card-dice.modal.dice-d12 .dice-number {
  font-size: 1.08em;
}
.combat-bag-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--text-bright);
  cursor: pointer;
  font-size: .72em;
  font-weight: 700;
  position: relative;
}
.combat-guard-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  border: none;
  background: none;
  box-shadow: none;
  color: #cfe8f2;
  cursor: pointer;
  font-size: .72em;
  font-weight: 700;
  position: relative;
}
.combat-guard-button small {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(210, 240, 255, .3);
  border-radius: 50%;
  background: rgba(8, 14, 20, .9);
  color: #9fb8c2;
  font-size: .68em;
  line-height: 1;
}
.combat-bag-icon,
.combat-action-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  transition: filter .15s, transform .12s;
}
/* 持續發光 ＝「可用/可點」訊號 */
.combat-guard-button .combat-action-icon {
  filter: drop-shadow(0 0 14px rgba(138, 210, 255, .9)) drop-shadow(0 0 5px rgba(178, 228, 255, .65)) drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
}
.combat-bag-button .combat-bag-icon {
  filter: drop-shadow(0 0 9px rgba(248, 190, 100, .62)) drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
}
.combat-guard-button:hover:not(:disabled) .combat-action-icon {
  filter: drop-shadow(0 0 20px rgba(162, 224, 255, .98)) drop-shadow(0 0 7px rgba(196, 234, 255, .72)) drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
  transform: scale(1.08);
}
.combat-bag-button:hover:not(:disabled) .combat-bag-icon {
  filter: drop-shadow(0 0 14px rgba(255, 204, 112, .92)) drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
  transform: scale(1.08);
}
/* 冷卻/不可用 ＝ 不發光、變暗 */
.combat-guard-button:disabled .combat-action-icon,
.combat-guard-button.disabled .combat-action-icon,
.combat-bag-button:disabled .combat-bag-icon,
.combat-bag-button.disabled .combat-bag-icon {
  filter: grayscale(.65) brightness(.62) drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
  transform: none;
}
.combat-action-label {
  line-height: 1;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.combat-guard-button:hover:not(:disabled) {
  color: #f0fbff;
}

.combat-guard-button.active {
  color: #f3fbff;
}
.combat-guard-button.active .combat-action-icon {
  filter: drop-shadow(0 0 11px rgba(120, 210, 255, .85)) drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
}

.combat-guard-button:disabled,
.combat-guard-button.disabled {
  opacity: .46;
  cursor: default;
}
.combat-bag-icon {
  filter: brightness(1.12) saturate(1.08) drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
.combat-bag-button:hover:not(:disabled) {
  color: #ffe9c8;
}
.combat-bag-button:disabled,
.combat-bag-button.disabled {
  opacity: .4;
  cursor: default;
  box-shadow: none;
}
.combat-bag-panel {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .46);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

.combat-bag-dialog {
  width: min(360px, calc(100vw - 24px));
  max-height: min(58dvh, 360px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(201,145,47,.45);
  border-radius: 8px;
  background: rgba(16,14,12,.98);
  box-shadow: 0 16px 42px rgba(0,0,0,.58), 0 0 18px rgba(201,145,47,.1);
}

.combat-bag-header {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px 8px 12px;
  border-bottom: 1px solid rgba(201,145,47,.24);
  color: var(--text-bright);
}

.combat-bag-close {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(201,145,47,.36);
  background: rgba(201,145,47,.08);
  color: var(--text-bright);
  font: inherit;
  font-size: 1.2em;
  line-height: 1;
  cursor: pointer;
}

.combat-bag-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 12px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.combat-bag-item {
  text-align: left;
  border: 1px solid rgba(160,128,96,.28);
  background: rgba(160,128,96,.08);
  color: var(--text);
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
}
.combat-bag-item span {
  display: block;
  color: var(--text-bright);
  font-size: .92em;
  font-weight: 700;
}
.combat-bag-item small {
  display: block;
  margin-top: 3px;
  color: var(--text-dim);
  font-size: .78em;
  line-height: 1.3;
}
.combat-bag-item:hover:not(:disabled) {
  border-color: var(--accent);
}
.combat-bag-item:disabled {
  opacity: .45;
  cursor: default;
}
.combat-bag-empty {
  color: var(--text-dim);
  font-size: .78em;
  line-height: 1.4;
}
.combat-cancel-item {
  align-self: center;
}

.combat-status,
.combat-status-bar {
  color: var(--text-dim);
  font-size: .86em;
  line-height: 1.4;
}

.combat-status-bar {
  grid-column: 1 / -1;
  min-height: 30px;
  margin-top: 0;
  display: grid;
  place-items: center;
  text-align: center;
}

.combat-status.selectable-hint,
.combat-status-bar.selectable-hint {
  color: var(--accent);
  font-size: .9em;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 5px 10px;
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  background: rgba(200,137,10,.08);
  animation: pulse-hint .8s ease-in-out infinite alternate;
}
@keyframes pulse-hint {
  from { opacity: .7; }
  to   { opacity: 1; }
}

.combat-unit {
  position: relative;
  min-height: 0;
  padding: 6px 7px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: visible;
}

.combat-character-art {
  position: absolute;
  inset: 1px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  transition: opacity .18s ease, filter .18s ease;
}

.combat-character-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.38) saturate(1.08) contrast(1.03);
}

.combat-unit.ally:not(.active) .combat-character-art {
  opacity: .58;
  filter: brightness(.78) saturate(.78);
}

.combat-unit.ally.active .combat-character-art {
  opacity: 1;
  filter: brightness(1.08) saturate(1.1);
}

.combat-unit.ally.active .combat-character-art img {
  filter: brightness(1.48) saturate(1.14) contrast(1.04);
}

.combat-character-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top right, rgba(10, 10, 10, .46) 0%, rgba(10, 10, 10, .20) 42%, transparent 76%),
    linear-gradient(90deg, rgba(10, 10, 10, .24) 0%, rgba(10, 10, 10, .08) 38%, transparent 70%),
    linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, .10) 100%);
}

.combat-unit > :not(.combat-character-art):not(.combat-blood-splatter):not(.combat-card-dice):not(.combat-followup-badge):not(.combat-block-up-burst) {
  position: relative;
  z-index: 1;
}

.combat-enemy-card.enemy-abyss_warden .combat-hp-row,
.combat-enemy-card[class*="enemy-dark_monster_"] .combat-hp-row {
  position: relative;
  z-index: 3;
}

.combat-unit > .combat-blood-splatter {
  position: absolute;
}

.combat-unit > .combat-card-dice {
  position: absolute;
  z-index: 6;
}

.combat-unit > .combat-followup-badge {
  position: absolute;
}

.combat-unit.anim-iron-scabbard-empower {
  animation: anim-iron-scabbard-empower .72s ease-out forwards;
}

.combat-unit.anim-iron-scabbard-empower::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 10%, rgba(255, 236, 164, .5) 48%, rgba(255, 120, 32, .24) 56%, transparent 72%);
  mix-blend-mode: screen;
  animation: anim-iron-scabbard-empower-sweep .58s ease-out forwards;
}

.combat-unit .combat-sprite {
  display: none;
}

.combat-unit .combat-stat-line {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 8px rgba(255, 255, 255, .22);
}

.combat-unit .combat-threat-meter {
  position: relative;
  z-index: 2;
  background: rgba(12, 8, 16, .72);
  border-color: rgba(190, 116, 218, .38);
  box-shadow: 0 0 8px rgba(154, 90, 170, .24);
}

.combat-unit.active {
  border-color: var(--accent);
  background: rgba(200,137,10,.1);
  box-shadow: inset 0 0 0 1px rgba(230, 167, 57, .24), 0 0 14px rgba(230, 167, 57, .16);
}

.combat-unit.intent-targeted {
  border-color: rgba(231, 64, 48, .76);
  box-shadow: 0 0 0 1px rgba(231, 64, 48, .22), 0 0 14px rgba(231, 64, 48, .18);
}

.combat-tutorial-highlight {
  position: relative;
  z-index: 36;
  outline: 2px solid rgba(255, 218, 112, .95);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(255, 218, 112, .18), 0 0 22px rgba(255, 188, 64, .42) !important;
  animation: combat-tutorial-highlight-pulse 1s ease-in-out infinite alternate;
}

.combat-tutorial-card {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 40;
  width: min(430px, calc(100% - 28px));
  padding: 13px 15px 14px;
  border: 2px solid rgba(255, 220, 142, .86);
  border-radius: 6px;
  color: #f7ead2;
  background:
    linear-gradient(180deg, rgba(42, 29, 13, .96), rgba(10, 8, 6, .96));
  box-shadow:
    0 14px 42px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(255, 190, 88, .18),
    0 0 24px rgba(255, 178, 64, .18),
    inset 0 0 20px rgba(255, 198, 91, .08);
  pointer-events: auto;
}

.combat-tutorial-card.target-guard {
  top: 18px;
  bottom: auto;
}

.combat-tutorial-card.target-popover_close {
  top: 18px;
  bottom: auto;
}

.combat-tutorial-card.target-bag,
.combat-tutorial-card.target-bag_item {
  top: 18px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  width: min(390px, calc(50% - 48px));
}

.combat-tutorial-card.target-ally {
  left: 32px;
  right: auto;
  bottom: 18px;
  transform: none;
  width: min(390px, calc(50% - 48px));
}

.combat-tutorial-card[data-step="attack_role"] {
  left: auto;
  right: 32px;
  width: min(390px, calc(50% - 48px));
}

.combat-tutorial-card.target-banner {
  left: auto;
  right: 32px;
  bottom: 18px;
  transform: none;
  width: min(390px, calc(50% - 48px));
}

.combat-tutorial-step {
  color: #f0b85b;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 0;
}

.combat-tutorial-title {
  margin-top: 3px;
  font-size: .98rem;
  font-weight: 900;
}

.combat-tutorial-body {
  margin-top: 6px;
  color: rgba(247, 234, 210, .86);
  font-size: .82rem;
  line-height: 1.55;
}

.combat-tutorial-cta {
  margin-top: 8px;
  color: #ffd875;
  font-size: .78rem;
  font-weight: 800;
}

.combat-tutorial-next {
  margin-top: 10px;
  min-height: 32px;
  padding: 5px 14px;
  border: 1px solid rgba(255, 222, 143, .82);
  border-radius: 4px;
  color: #140d05;
  background: linear-gradient(180deg, #ffe3a0, #d99a38);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(255, 194, 82, .2);
}

.combat-tutorial-dismiss {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.combat-tutorial-dismiss button {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 222, 143, .62);
  border-radius: 4px;
  background: rgba(20, 15, 10, .72);
  color: #f7ead2;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.combat-tutorial-dismiss button:hover,
.combat-tutorial-dismiss button:focus-visible {
  border-color: #ffd77a;
  color: #fff4c8;
}

@keyframes combat-tutorial-highlight-pulse {
  from { outline-color: rgba(255, 218, 112, .72); }
  to { outline-color: rgba(255, 245, 184, 1); }
}

.combat-unit.intimidated {
  border-color: rgba(135, 86, 166, .68);
  box-shadow: inset 0 0 0 1px rgba(111, 72, 145, .24), 0 0 14px rgba(92, 42, 122, .22);
}

.combat-unit.intimidated .combat-character-art,
.combat-unit.intimidated > :not(.combat-character-art):not(.combat-blood-splatter) {
  opacity: .48;
  filter: grayscale(.75) brightness(.52) saturate(.72);
}

.combat-unit.down {
  opacity: 1;
}

.combat-unit.down .combat-character-art,
.combat-unit.down > :not(.combat-character-art):not(.combat-blood-splatter) {
  opacity: .45;
  filter: grayscale(.62) brightness(.72);
}

.combat-unit.empty-slot {
  opacity: .34;
  border-style: dashed;
  background: rgba(255,255,255,.012);
  pointer-events: none;
}

.combat-unit.empty-slot .combat-sprite,
.combat-unit.empty-slot .combat-name,
.combat-unit.empty-slot .combat-stat-line,
.combat-unit.empty-slot .combat-hp-row {
  color: var(--text-dim);
}

.combat-unit.selectable {
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  /* 持續的「點我」訊號：手機也看得到，不靠 hover */
  border-color: rgba(255, 212, 116, .98);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 206, 98, .2), transparent 62%),
    rgba(200, 137, 10, .1);
  animation: combat-selectable-pulse 1.15s ease-in-out infinite;
}
.combat-unit.selectable:hover,
.combat-unit.selectable:active {
  border-color: rgba(255, 230, 150, 1);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 214, 112, .32), transparent 58%),
    rgba(200, 137, 10, .18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 168, .6),
    0 0 24px rgba(255, 178, 54, .54),
    0 0 44px rgba(255, 120, 40, .24);
  animation: none;
}
@keyframes combat-selectable-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 228, 144, .38),
      0 0 13px rgba(255, 178, 54, .3);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 234, 156, .66),
      0 0 26px rgba(255, 184, 62, .58),
      0 0 44px rgba(255, 120, 40, .22);
  }
}

.combat-unit.followup-ready {
  border-color: rgba(255, 202, 82, .96);
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 207, 89, .28), transparent 54%),
    rgba(200, 137, 10, .12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 229, 144, .32),
    0 0 18px rgba(255, 176, 50, .34),
    0 0 34px rgba(255, 116, 38, .12);
  animation: combat-followup-pulse 1.25s ease-in-out infinite;
}

.combat-unit.followup-ready:hover {
  border-color: rgba(255, 232, 142, 1);
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 227, 119, .36), transparent 56%),
    rgba(220, 151, 24, .16);
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 168, .42),
    0 0 24px rgba(255, 193, 68, .48),
    0 0 42px rgba(255, 116, 38, .2);
}

.combat-followup-badge {
  position: absolute;
  left: auto;
  right: 39px;
  top: 6px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  transform: none;
  max-width: min(96px, calc(100% - 64px));
  min-height: 26px;
  padding: 4px 11px;
  color: #fff4c4;
  border: 1px solid rgba(255, 217, 112, .78);
  background:
    linear-gradient(180deg, rgba(92, 58, 13, .98), rgba(31, 17, 5, .98));
  box-shadow: 0 0 14px rgba(255, 170, 48, .5), inset 0 1px 0 rgba(255, 239, 180, .18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.combat-followup-badge strong {
  font-family: var(--font-serif);
  font-size: .98em;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combat-followup-badge span {
  display: none;
}

@keyframes combat-followup-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.16); }
}

.combat-unit.item-target {
  border-color: #4a8a4a;
  box-shadow: 0 0 0 1px rgba(74,138,74,.25);
}
.combat-unit.item-target:hover {
  border-color: #6fbd6f;
  background: rgba(74,138,74,.12);
}
.combat-scene.combat-anim-locked-scene button,
.combat-unit.combat-anim-locked {
  pointer-events: none;
}
.combat-unit.combat-anim-locked {
  cursor: default;
}
.combat-unit.selectable:active {
  background: rgba(200,137,10,.18);
}

/* 浮動角色詳情 tooltip */
#combat-float-tip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  display: none;
  max-width: 260px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: .83em;
  line-height: 1.6;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
#combat-float-tip.visible { display: block; }
.cct-name {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-bright);
  font-weight: 600;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.cct-row {
  color: var(--text-dim);
  margin-bottom: 4px;
}
.cct-label {
  color: var(--accent-dim);
  margin-right: 5px;
  font-size: .82em;
}
.cct-passive-list {
  display: grid;
  gap: 4px;
}
.cct-passive-section {
  color: var(--text-dim);
  line-height: 1.45;
}

.combat-unit-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin-bottom: 5px;
  flex-wrap: nowrap;
  row-gap: 2px;
  overflow: visible;
}

.combat-status-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 28px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #ffd4c8;
  background: transparent;
  box-shadow: none;
  font-size: .68em;
  font-family: var(--font-sans);
  line-height: 1;
  white-space: nowrap;
  appearance: none;
  cursor: pointer;
}

.combat-status-badge:hover img,
.combat-status-badge:focus-visible img {
  transform: translateY(-1px) scale(1.06);
}

.combat-status-badge:focus-visible {
  outline: 1px solid rgba(255, 210, 160, .58);
  outline-offset: 2px;
}

.combat-status-badge img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(255, 52, 36, .42));
  transition: transform .12s ease;
}

.combat-status-badge strong {
  font-weight: 800;
  letter-spacing: 0;
  margin-top: -2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 5px rgba(255, 65, 45, .35);
}

.combat-status-badge.remorse {
  color: #ffd0e4;
}

.combat-status-badge.remorse img {
  filter: drop-shadow(0 0 5px rgba(255, 76, 166, .42));
}

.combat-status-badge.remorse strong {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 5px rgba(255, 76, 166, .35);
}

.combat-status-badge.dice-pollution {
  color: #a7ffcf;
}

.combat-status-badge.dice-pollution img {
  filter: drop-shadow(0 0 5px rgba(48, 255, 138, .44));
}

.combat-status-badge.dice-pollution strong {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 5px rgba(48, 255, 138, .35);
}

.combat-status-badge.evasion {
  color: #cdeeff;
  flex: 0 0 28px;
  order: 0;
}

.combat-status-badge.evasion span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(132, 210, 235, .58);
  border-radius: 50%;
  color: #e5fbff;
  background: rgba(32, 82, 90, .32);
  box-shadow: 0 0 8px rgba(82, 196, 226, .26);
  font-weight: 800;
  line-height: 1;
}

.combat-status-badge.evasion strong {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 5px rgba(82, 196, 226, .35);
}

.combat-status-badge.intimidated {
  color: #f7d3ff;
}

.combat-status-badge.intimidated span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(206, 126, 255, .6);
  border-radius: 50%;
  color: #fdeaff;
  background: rgba(83, 35, 108, .38);
  box-shadow: 0 0 8px rgba(185, 92, 255, .28);
  font-weight: 900;
  line-height: 1;
}

.combat-status-badge.intimidated strong {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 5px rgba(185, 92, 255, .35);
}

.combat-status-badge.item-effect {
  min-width: 30px;
  min-height: 34px;
  position: relative;
}

.combat-status-badge.item-effect img,
.combat-status-badge.item-effect .combat-item-badge-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 6px;
  background: radial-gradient(circle, rgba(255, 220, 130, .18), rgba(20, 12, 6, .46));
  filter: drop-shadow(0 0 6px rgba(246, 181, 72, .55));
}

.combat-status-badge.item-effect::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f4bd52;
  box-shadow: 0 0 7px rgba(244, 189, 82, .75);
}

.combat-status-badge.item-effect.instant img,
.combat-status-badge.item-effect.instant .combat-item-badge-icon {
  animation: combatItemPulse .85s ease-out both;
}

@keyframes combatItemPulse {
  0% { transform: scale(.82); opacity: .55; }
  35% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: .92; }
}

.combat-wound-badge,
.combat-native-weakness-badge,
.combat-temp-weakness-badge,
.combat-block-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffd1c8;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.combat-wound-badge.ally {
  cursor: pointer;
}

.combat-native-weakness-badge {
  color: #ffd8bd;
}

.combat-native-weakness-badge.ally {
  cursor: default;
}

.combat-unit-main .combat-native-weakness-badge.ally {
  flex-direction: row;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
  transform: none;
  min-width: 0;
  height: 18px;
}

.combat-unit-main .combat-native-weakness-badge.ally .combat-native-weakness-main {
  width: 18px;
  height: 18px;
}

.combat-unit-main .combat-native-weakness-badge.ally .combat-native-weakness-main img {
  width: 18px;
  height: 18px;
}

.combat-unit-main .combat-native-weakness-badge.ally .combat-native-weakness-label {
  display: none;
}

.combat-unit-main .combat-wound-badge.ally {
  flex-direction: row;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  min-width: 0;
  height: 24px;
}

.combat-unit-main .combat-wound-badge.ally .combat-wound-main {
  width: 24px;
  height: 24px;
}

.combat-unit-main .combat-wound-badge.ally .combat-wound-main img {
  width: 24px;
  height: 24px;
}

.combat-unit-main .combat-wound-badge.ally .combat-wound-main strong {
  right: -2px;
  bottom: -2px;
  min-width: 14px;
  font-size: .72em;
}

.combat-unit-main .combat-wound-badge.ally .combat-wound-bonus {
  margin-top: 0;
  font-size: .72em;
  line-height: 1;
  white-space: nowrap;
}

.ally-native-weakness-value {
  color: #ffe6d0;
  font-size: .72em;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .96), 0 0 6px rgba(255, 42, 24, .55);
}

.combat-native-weakness-badge.extra {
  color: #ffe3b2;
}

.combat-temp-weakness-badge {
  color: #ffd88b;
}

.combat-temp-weakness-badge.eagle {
  color: #ffe7b0;
}

.combat-temp-weakness-badge.gambler {
  color: #ffca8e;
}

.combat-block-badge {
  color: #dcecff;
}

.combat-enemy-stance-column {
  position: absolute;
  left: 0;
  top: 50%;
  width: 88px;
  height: 124px;
  transform: translate(-10px, -46%);
}

.combat-enemy-intent-panel,
.combat-enemy-block-panel {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 48px;
  margin: 0;
  padding: 5px 9px;
  border: 1px solid rgba(130, 178, 255, .72);
  border-radius: 6px;
  background:
    radial-gradient(circle at 18% 40%, rgba(168, 208, 255, .22), transparent 32px),
    linear-gradient(180deg, rgba(27, 42, 64, .94), rgba(12, 18, 29, .96));
  color: #e4f0ff;
  box-shadow:
    0 0 16px rgba(92, 143, 232, .28),
    inset 0 0 14px rgba(141, 187, 255, .14);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.combat-enemy-intent-panel {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  min-height: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ffe2dc;
  cursor: pointer;
  min-width: 84px;
}

.combat-enemy-intent-panel.empty {
  visibility: hidden;
  pointer-events: none;
}

.combat-enemy-attack-panel {
  position: absolute;
  left: 50%;
  top: 102px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.04em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .98),
    0 0 9px rgba(255, 255, 255, .48),
    0 0 14px rgba(255, 72, 54, .34);
  justify-self: center;
  white-space: nowrap;
}

.combat-enemy-damage-die-panel {
  position: absolute;
  left: 36px;
  top: 5px;
  transform: none;
  z-index: 32;
  color: #ffd4c5;
  font-size: .86em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .98),
    0 0 7px rgba(255, 96, 64, .46);
}

.combat-enemy-stance-divider {
  position: absolute;
  left: 50%;
  top: 48px;
  transform: translateX(-50%);
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(145, 190, 255, .68), transparent);
  align-self: center;
}

.combat-enemy-intent-panel.block,
.combat-enemy-intent-panel.banner_switch {
  color: #dfffe7;
}

.combat-enemy-block-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 6px rgba(150, 196, 255, .78))
    drop-shadow(0 0 12px rgba(85, 137, 222, .48));
}

.combat-enemy-intent-panel img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 6px rgba(255, 72, 54, .72))
    drop-shadow(0 0 12px rgba(216, 42, 32, .42));
}

.combat-enemy-intent-panel.block img,
.combat-enemy-intent-panel.banner_switch img {
  filter:
    drop-shadow(0 0 6px rgba(98, 255, 130, .82))
    drop-shadow(0 0 12px rgba(41, 202, 79, .5));
}

.combat-enemy-block-value {
  color: #ffffff;
  font-size: 1.18em;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 8px rgba(116, 178, 255, .78);
}

.combat-enemy-intent-panel strong {
  color: #fff4f1;
  font-size: 1.05em;
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 8px rgba(255, 75, 58, .68);
}

.combat-enemy-intent-panel.block strong,
.combat-enemy-intent-panel.banner_switch strong {
  color: #f1fff4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 8px rgba(93, 255, 128, .76);
}

.combat-enemy-intent-panel:hover,
.combat-enemy-intent-panel:focus-visible,
.combat-enemy-block-panel:hover,
.combat-enemy-block-panel:focus-visible {
  border-color: rgba(190, 220, 255, .92);
  box-shadow:
    0 0 20px rgba(116, 176, 255, .38),
    inset 0 0 16px rgba(154, 200, 255, .18);
}

.combat-enemy-intent-panel:hover,
.combat-enemy-intent-panel:focus-visible {
  border-color: transparent;
  box-shadow: none;
}

.combat-enemy-intent-panel.block:hover,
.combat-enemy-intent-panel.block:focus-visible,
.combat-enemy-intent-panel.banner_switch:hover,
.combat-enemy-intent-panel.banner_switch:focus-visible {
  border-color: transparent;
  box-shadow: none;
}

.combat-enemy-intent-panel:focus-visible,
.combat-enemy-block-panel:focus-visible {
  outline: 1px solid rgba(190, 220, 255, .72);
  outline-offset: 2px;
}

.combat-enemy-block-panel {
  position: absolute;
  left: 50%;
  top: 57px;
  transform: translateX(-50%);
  min-height: 34px;
  height: 34px;
  min-width: 64px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.combat-enemy-block-panel.empty {
  visibility: hidden;
  pointer-events: none;
}

.combat-enemy-block-panel:hover,
.combat-enemy-block-panel:focus-visible {
  border-color: transparent;
  box-shadow: none;
}

.combat-unit-main .combat-block-badge.ally {
  flex-direction: row;
  align-items: center;
  margin-left: 4px;
  min-width: 0;
  height: 24px;
}

.combat-block-main {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 36px;
}

.combat-unit-main .combat-block-badge.ally .combat-block-main {
  width: 28px;
  height: 24px;
}

.combat-block-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 5px rgba(118, 173, 255, .55))
    drop-shadow(0 0 10px rgba(69, 112, 196, .35));
  transition: transform .12s ease, filter .12s ease;
}

.combat-unit-main .combat-block-badge.ally .combat-block-icon {
  width: 24px;
  height: 24px;
  font-size: 1.22em;
}

.combat-block-main strong {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 15px;
  color: #f4f8ff;
  font-size: .82em;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .96), 0 0 7px rgba(116, 178, 255, .7);
}

.combat-unit-main .combat-block-badge.ally .combat-block-main strong {
  right: -2px;
  bottom: -2px;
  min-width: 14px;
  font-size: .72em;
}

.combat-native-weakness-main,
.combat-temp-weakness-main {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 32px;
}

.combat-temp-weakness-main {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 198, 46, .3), rgba(255, 158, 24, .11) 42%, transparent 68%);
  filter: drop-shadow(0 0 7px rgba(255, 174, 18, .25));
}

.combat-temp-weakness-main::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 205, 63, .12);
  box-shadow: 0 0 12px rgba(255, 178, 24, .36);
}

.combat-temp-weakness-main img {
  filter: drop-shadow(0 0 5px rgba(255, 178, 24, .5));
}

.combat-temp-weakness-main strong {
  color: #fff4c7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .96), 0 0 7px rgba(255, 178, 24, .52);
}

.combat-temp-weakness-label {
  color: #ffd56a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(255, 178, 24, .32);
}

.combat-temp-weakness-badge.eagle .combat-temp-weakness-label {
  color: #ffe7a8;
}

.combat-temp-weakness-badge.gambler .combat-temp-weakness-label {
  color: #ffc36d;
}

.combat-native-weakness-main img,
.combat-temp-weakness-main img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: transform .12s ease;
}

.combat-native-weakness-main img {
  filter:
    drop-shadow(0 0 6px rgba(255, 38, 24, .64))
    drop-shadow(0 0 11px rgba(190, 24, 18, .34));
}

.combat-native-weakness-main strong {
  position: absolute;
  right: 3px;
  bottom: 1px;
  min-width: 15px;
  color: #ffe6d0;
  font-size: .82em;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .96), 0 0 8px rgba(255, 42, 24, .74);
}

.combat-temp-weakness-main strong {
  position: absolute;
  right: 3px;
  bottom: 1px;
  min-width: 15px;
  font-size: .82em;
  font-weight: 900;
  text-align: center;
}

.combat-native-weakness-label,
.combat-temp-weakness-label {
  margin-top: -2px;
  font-size: .68em;
  font-weight: 900;
}

.combat-wound-main {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 38px;
}

.combat-wound-main img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 26, 22, .48));
  transition: transform .12s ease;
}

.combat-wound-main strong {
  position: absolute;
  right: 0;
  bottom: 1px;
  min-width: 15px;
  color: #ffe1d8;
  font-size: .82em;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(255, 26, 22, .55);
}

.combat-wound-bonus {
  margin-top: -2px;
  color: #ffb0a0;
  font-size: .74em;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 6px rgba(255, 26, 22, .35);
}

.combat-wound-badge:hover img,
.combat-wound-badge:focus-visible img,
.combat-native-weakness-badge:hover img,
.combat-native-weakness-badge:focus-visible img,
.combat-temp-weakness-badge:hover img,
.combat-temp-weakness-badge:focus-visible img {
  transform: translateY(-1px) scale(1.06);
}

.combat-block-badge:hover .combat-block-icon,
.combat-block-badge:focus-visible .combat-block-icon {
  filter:
    drop-shadow(0 0 6px rgba(150, 196, 255, .72))
    drop-shadow(0 0 12px rgba(85, 137, 222, .48));
  transform: translateY(-1px) scale(1.06);
}

.combat-wound-badge:focus-visible,
.combat-native-weakness-badge:focus-visible,
.combat-temp-weakness-badge:focus-visible,
.combat-block-badge:focus-visible {
  outline: 1px solid rgba(255, 190, 160, .58);
  outline-offset: 2px;
}

.combat-sprite {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.combat-sprite .class-tooltip-icon {
  width: 24px;
  height: 24px;
}

.combat-name {
  color: var(--text-bright);
  font-size: .9em;
  min-width: 0;
}

.combat-wager-toggle {
  margin-left: 2px;
  min-width: 48px;
  min-height: 24px;
  padding: 3px 6px;
  border: 1px solid rgba(201,145,47,.45);
  border-radius: 5px;
  background: rgba(22, 18, 14, .92);
  color: var(--text-bright);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: .9em;
  line-height: 1;
}

.combat-wager-toggle .wager-icon,
.combat-wager-toggle .wager-state,
.combat-wager-toggle small {
  display: inline;
}

.combat-wager-toggle .wager-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.combat-wager-toggle .wager-icon img,
.combat-banner-badge .banner-icon img,
.class-tooltip-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: -3px;
}

.class-tooltip-icon {
  border-radius: 50%;
}

.combat-wager-toggle .wager-state {
  margin-left: 3px;
  color: var(--text-dim);
  font-size: .86em;
}

.combat-wager-toggle small {
  display: inline;
  margin-left: 4px;
  margin-top: 0;
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-size: .82em;
  font-weight: 700;
}

.combat-wager-toggle.active {
  border-color: var(--accent);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,218,122,.24), transparent 20px),
    linear-gradient(180deg, rgba(66, 44, 13, .98), rgba(25, 18, 9, .98));
  box-shadow: 0 0 16px rgba(201,145,47,.34), inset 0 0 12px rgba(201,145,47,.18);
}

.combat-wager-toggle.active .wager-state {
  color: #ffd77a;
  font-weight: 700;
}

.combat-wager-toggle:hover {
  border-color: var(--accent);
  color: #ffe0a0;
}

.combat-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  max-width: 96px;
  padding: 3px 6px;
  border: 1px solid rgba(141, 170, 121, .55);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(28, 38, 25, .96), rgba(14, 20, 13, .96));
  color: #d8edc2;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: .78em;
  line-height: 1;
  box-shadow: inset 0 0 10px rgba(141, 170, 121, .12);
}

.combat-banner-badge span:not(.banner-icon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combat-banner-badge strong {
  flex: 0 0 auto;
  color: #f5d27b;
  font-size: .9em;
  font-weight: 700;
}

.combat-banner-badge:hover {
  border-color: #c7d99a;
  color: #f1ffd8;
}

.combat-banner-popover {
  position: fixed;
  z-index: 10000;
  display: none;
  width: min(280px, calc(100vw - 16px));
  padding: 10px 12px;
  border: 1px solid rgba(141, 170, 121, .62);
  border-radius: 6px;
  background: rgba(15, 18, 14, .98);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0,0,0,.52), inset 0 0 14px rgba(141, 170, 121, .1);
}

.combat-banner-popover.visible {
  display: block;
}

.combat-banner-popover-title {
  color: #f5d27b;
  font-weight: 700;
  margin-bottom: 6px;
}

.combat-banner-popover-desc {
  color: var(--text-dim);
  font-size: .86em;
  line-height: 1.55;
  white-space: pre-line;
}

.combat-banner-popover-close {
  margin-top: 8px;
  padding: 4px 8px;
  border: 1px solid rgba(201,145,47,.45);
  border-radius: 5px;
  background: rgba(22, 18, 14, .94);
  color: var(--text-bright);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: .82em;
}

.combat-banner-popover-close:hover {
  border-color: var(--accent);
  color: #ffe0a0;
}

.combat-hp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 17px;
  color: var(--text-dim);
  font-size: .78em;
}

.combat-hp-bar {
  flex: 1;
  height: 7px;
  min-width: 42px;
  background: #151515;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}

.combat-hp-fill {
  height: 100%;
  background: #3a7a3a;
  position: relative;
  z-index: 1;
}

.combat-hp-fill.low {
  background: #8a6418;
}

.combat-hp-fill.critical {
  background: #8a2020;
}

.combat-stat-line,
.combat-weakness {
  color: var(--text-dim);
  font-size: .8em;
  line-height: 18px;
  min-height: 18px;
  margin-top: 5px;
}
.combat-threat-meter {
  height: 4px;
  margin: 3px 0 5px;
  border: 1px solid rgba(154, 90, 170, .28);
  background: rgba(154, 90, 170, .08);
  overflow: hidden;
}
.combat-threat-meter.empty {
  visibility: hidden;
}
.combat-threat-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7e4aa0, #d08be4);
  box-shadow: 0 0 8px rgba(208, 139, 228, .35);
}
.combat-weakness-effect {
  margin-top: 4px;
  font-size: .78em;
  color: #e8c84a;
  line-height: 18px;
  min-height: 18px;
}
.fate-board-effect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: help;
}
.fate-board-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.fate-board-faces {
  min-width: 34px;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .82);
  white-space: nowrap;
}
.fate-board-faces.lucky {
  color: #ffd15d;
}
.fate-board-faces.unlucky {
  color: #ff5c4b;
}
.combat-weakness-effect.empty {
  visibility: hidden;
}

.combat-log-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 98px;
  min-height: 34px;
  padding: 0 12px;
  color: #d8c28e;
  border: 1px solid rgba(201, 145, 47, .34);
  background: rgba(20, 16, 10, .72);
  font-size: .9em;
  font-weight: 700;
  cursor: pointer;
}
.modal-content.combat-modal .combat-log-open {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 260;
  max-width: 108px;
  white-space: nowrap;
  pointer-events: auto;
}
.combat-log-open:hover {
  color: #ffe0a0;
  border-color: rgba(201, 145, 47, .64);
  background: rgba(50, 34, 12, .78);
}
.combat-log-modal {
  display: grid;
  gap: 12px;
  white-space: normal;
}

.combat-log-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .68);
  opacity: 0;
  transition: opacity .12s ease-out;
}

.combat-log-overlay.visible {
  opacity: 1;
}

.combat-log-panel {
  width: min(760px, 94vw);
  max-height: min(720px, 86vh);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid rgba(201, 145, 47, .46);
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 145, 47, .16), transparent 44%),
    linear-gradient(180deg, rgba(30, 26, 20, .98), rgba(8, 8, 7, .98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .72), inset 0 0 30px rgba(0, 0, 0, .52);
}

.combat-log-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(201, 145, 47, .28);
  padding-bottom: 10px;
}

.combat-log-panel-head h2 {
  margin: 0;
  color: var(--accent);
  font-size: 1.26em;
}

.combat-log-panel-close {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  color: #f0d28f;
  border: 1px solid rgba(201, 145, 47, .5);
  background: rgba(34, 23, 10, .82);
  cursor: pointer;
  font-weight: 800;
}

.combat-log-panel-close:hover {
  color: #ffe9b2;
  border-color: rgba(232, 174, 70, .82);
  background: rgba(58, 36, 12, .9);
}

.combat-log-panel .combat-log-modal {
  overflow-y: auto;
  padding-right: 6px;
}

.combat-log-section {
  border: 1px solid rgba(201, 145, 47, .18);
  background: rgba(255, 255, 255, .025);
  padding: 9px 10px;
}
.combat-log-section h3 {
  margin: 0 0 6px;
  color: #e4bd6c;
  font-size: .98em;
  font-family: var(--font-serif);
}
.combat-log-empty {
  color: var(--text-dim);
}
.combat-log-lines {
  line-height: 1.6;
  color: #bbb;
}
.combat-log-lines div { border-bottom: 1px solid rgba(255,255,255,.06); padding: 2px 0; }

.combat-result-pending {
  color: #ffd47a;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 0 10px rgba(255, 185, 74, .3);
}

.combat-intent-line {
  margin-top: 8px;
  padding: 4px 8px;
  background: rgba(255,200,50,.1);
  border: 1px solid rgba(255,200,50,.3);
  border-radius: 4px;
  font-size: .82em;
  color: var(--accent);
  line-height: 1.4;
}

/* ── 戰鬥動畫 ───────────────────────────────────────────── */
@keyframes anim-lunge {
  0%   { transform: translateX(0)    scale(1); }
  35%  { transform: translateX(22px) scale(1.07); }
  100% { transform: translateX(0)    scale(1); }
}
@keyframes anim-shake-hit {
  0%,100% { transform: translateX(0); }
  15%,55% { transform: translateX(-7px); }
  35%,75% { transform: translateX(7px); }
}
@keyframes anim-heavy-relic-hit {
  0%,100% { transform: translate(0, 0) scale(1); filter: drop-shadow(0 0 16px rgba(140, 40, 40, .35)); }
  12% { transform: translate(-11px, 4px) scale(.98); filter: drop-shadow(0 0 21px rgba(255, 70, 36, .7)); }
  28% { transform: translate(8px, -3px) scale(1.035); filter: drop-shadow(0 0 24px rgba(255, 148, 48, .6)); }
  46% { transform: translate(-5px, 2px) scale(1.01); filter: drop-shadow(0 0 19px rgba(255, 48, 36, .5)); }
  66% { transform: translate(3px, 0) scale(1); filter: drop-shadow(0 0 15px rgba(210, 50, 36, .38)); }
}
@keyframes combat-damage-body-light {
  0%,100% { transform: translate(0, 0) scale(1); filter: none; }
  38% { transform: translate(-3px, 1px) scale(1.015); filter: brightness(1.04); }
  72% { transform: translate(2px, 0) scale(1); }
}
@keyframes combat-damage-card-solid {
  0%,100% { transform: translate(0, 0) scale(1); filter: none; box-shadow: var(--combat-react-shadow, none); }
  24% { transform: translate(-4px, 1px) scale(1.01); filter: brightness(1.06); box-shadow: 0 0 18px rgba(255, 218, 126, .18); }
  58% { transform: translate(3px, -1px) scale(1); }
}
@keyframes combat-damage-card-heavy {
  0%,100% { transform: translate(0, 0) scale(1); filter: none; }
  16% { transform: translate(-7px, 3px) scale(.995); filter: brightness(1.12) saturate(1.1); box-shadow: 0 0 22px rgba(255, 76, 44, .24); }
  36% { transform: translate(6px, -2px) scale(1.018); }
  62% { transform: translate(-3px, 1px) scale(1); filter: brightness(1.04); }
}
@keyframes combat-damage-card-burst {
  0%,100% { transform: translate(0, 0) scale(1); filter: none; }
  12% { transform: translate(-10px, 4px) scale(.988); filter: brightness(1.18) contrast(1.08) saturate(1.12); box-shadow: 0 0 28px rgba(255, 65, 46, .32); }
  28% { transform: translate(8px, -4px) scale(1.03); filter: grayscale(.12) brightness(1.08); }
  48% { transform: translate(-5px, 2px) scale(1.012); }
  70% { transform: translate(3px, 0) scale(1); filter: brightness(1.03); }
}
@keyframes combat-damage-card-surge {
  0%,100% { transform: translate(0, 0) scale(1); filter: none; }
  10% { transform: translate(-13px, 5px) scale(.982); filter: brightness(1.24) contrast(1.12) saturate(1.16); box-shadow: 0 0 34px rgba(255, 60, 42, .42); }
  24% { transform: translate(11px, -5px) scale(1.042); filter: grayscale(.22) brightness(1.1); }
  42% { transform: translate(-8px, -3px) scale(1.018); }
  62% { transform: translate(5px, 2px) scale(1.006); filter: brightness(1.05); }
  80% { transform: translate(-2px, 0) scale(1); }
}
@keyframes combat-damage-card-finisher {
  0%,100% { transform: translate(0, 0) scale(1); filter: none; }
  8% { transform: translate(-17px, 7px) scale(.972); filter: grayscale(.45) brightness(1.34) contrast(1.18); box-shadow: 0 0 42px rgba(255, 255, 238, .28), 0 0 44px rgba(255, 32, 24, .48); }
  20% { transform: translate(15px, -7px) scale(1.055); }
  34% { transform: translate(-12px, -5px) scale(1.026); filter: brightness(1.18) saturate(1.18); }
  52% { transform: translate(8px, 4px) scale(1.014); }
  70% { transform: translate(-4px, 1px) scale(1.004); filter: brightness(1.06); }
}
@keyframes anim-iron-scabbard-empower {
  0%,100% {
    border-color: var(--border);
    box-shadow: none;
    filter: none;
  }
  18% {
    border-color: rgba(255, 202, 96, .95);
    box-shadow:
      inset 0 0 18px rgba(255, 154, 42, .18),
      0 0 20px rgba(255, 124, 28, .32);
    filter: brightness(1.06) saturate(1.1);
  }
  56% {
    border-color: rgba(255, 227, 142, .72);
    box-shadow:
      inset 0 0 22px rgba(255, 210, 116, .14),
      0 0 26px rgba(255, 180, 70, .26);
    filter: brightness(1.03) saturate(1.06);
  }
}
@keyframes anim-iron-scabbard-empower-sweep {
  0%   { opacity: 0; transform: translateX(-140%) skewX(-18deg); }
  18%  { opacity: .85; }
  62%  { opacity: .55; }
  100% { opacity: 0; transform: translateX(140%) skewX(-18deg); }
}
@keyframes anim-flash-red {
  0%,100% { background: transparent; }
  30%,70% { background: rgba(220, 50, 50, .38); border-color: rgba(220,80,80,.7); }
}
@keyframes anim-flash-blue {
  0%,100% { background: transparent; }
  30%,70% { background: rgba(80,160,255,.35); border-color: rgba(100,180,255,.7); }
}
@keyframes anim-block-up {
  0%,100% { transform: scale(1);    box-shadow: none; }
  40%      { transform: scale(1.05); box-shadow: 0 0 18px rgba(80,160,255,.65); }
}
@keyframes anim-guard-up {
  0%   { box-shadow: inset 0 0 0 rgba(98, 178, 255, 0), 0 0 0 rgba(98, 178, 255, 0); }
  35%  { box-shadow: inset 0 0 26px rgba(98, 178, 255, .22), 0 0 22px rgba(98, 178, 255, .46); }
  100% { box-shadow: inset 0 0 0 rgba(98, 178, 255, 0), 0 0 0 rgba(98, 178, 255, 0); }
}
@keyframes anim-guard-badge {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.18); filter: drop-shadow(0 0 10px rgba(128, 208, 255, .76)); }
  100% { transform: scale(1); }
}
@keyframes anim-evasion-up {
  0%   { box-shadow: inset 0 0 0 rgba(112, 231, 255, 0), 0 0 0 rgba(112, 231, 255, 0); }
  38%  { box-shadow: inset 0 0 24px rgba(112, 231, 255, .18), 0 0 20px rgba(112, 231, 255, .34); }
  100% { box-shadow: inset 0 0 0 rgba(112, 231, 255, 0), 0 0 0 rgba(112, 231, 255, 0); }
}
@keyframes anim-evasion-badge {
  0%   { transform: translateY(0) scale(1); }
  36%  { transform: translateY(-2px) scale(1.2); filter: drop-shadow(0 0 10px rgba(112, 231, 255, .76)); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes combat-block-up-burst {
  0%   { transform: translate(-50%, -50%) scale(.58); opacity: 0; filter: drop-shadow(0 0 0 rgba(128, 208, 255, 0)); }
  18%  { transform: translate(-50%, -50%) scale(1.16); opacity: .95; filter: drop-shadow(0 0 14px rgba(128, 208, 255, .9)); }
  58%  { transform: translate(-50%, -60%) scale(1); opacity: .72; }
  100% { transform: translate(-50%, -86%) scale(.84); opacity: 0; filter: drop-shadow(0 0 4px rgba(128, 208, 255, 0)); }
}
@keyframes combat-block-up-ring {
  0%   { transform: translate(-50%, -50%) scale(.58); opacity: 0; }
  24%  { opacity: .64; }
  100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}
@keyframes anim-guard-break {
  0%   { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 8px rgba(128, 208, 255, .72)); }
  100% { transform: scale(.72); opacity: 0; filter: drop-shadow(0 0 0 rgba(128, 208, 255, 0)); }
}
@keyframes anim-heal-pulse {
  0%   { box-shadow: inset 0 0 0 rgba(113, 236, 151, 0), 0 0 0 rgba(113, 236, 151, 0); }
  34%  { box-shadow: inset 0 0 28px rgba(113, 236, 151, .22), 0 0 22px rgba(113, 236, 151, .5); }
  100% { box-shadow: inset 0 0 0 rgba(113, 236, 151, 0), 0 0 0 rgba(113, 236, 151, 0); }
}
@keyframes anim-pulse-left {
  0%,100% { transform: translateX(0)     scale(1); }
  40%      { transform: translateX(-16px) scale(1.05); }
}

.anim-lunge        { animation: anim-lunge      .42s ease-in-out forwards; }
.anim-hit          { animation: anim-shake-hit .38s ease-in-out,
                                anim-flash-red  .38s ease; }
.anim-hit-blocked  { animation: anim-shake-hit .38s ease-in-out,
                                anim-flash-blue .38s ease; }
.combat-enemy-card.combat-damage-react-light .combat-enemy-sprite,
.combat-enemy-card.combat-damage-react-light.has-card-bg .combat-enemy-figure {
  animation: combat-damage-body-light .34s ease-out forwards;
}
.combat-unit.combat-damage-react-light {
  animation: combat-damage-body-light .34s ease-out forwards;
}
.combat-damage-react-solid {
  animation: combat-damage-card-solid .36s ease-out forwards;
}
.combat-damage-react-heavy {
  animation: combat-damage-card-heavy .42s cubic-bezier(.14, .74, .18, 1) forwards;
}
.combat-damage-react-burst {
  animation: combat-damage-card-burst .48s cubic-bezier(.12, .74, .16, 1) forwards;
}
.combat-damage-react-surge {
  animation: combat-damage-card-surge .54s cubic-bezier(.1, .76, .14, 1) forwards;
}
.combat-damage-react-finisher {
  animation: combat-damage-card-finisher .62s cubic-bezier(.08, .78, .12, 1) forwards;
}
.combat-enemy-card.anim-heavy-relic-hit .combat-enemy-sprite,
.combat-enemy-card.anim-heavy-relic-hit.has-card-bg .combat-enemy-figure {
  animation: anim-heavy-relic-hit .44s cubic-bezier(.12, .72, .18, 1) forwards;
}
.anim-block-up     { animation: anim-block-up   .4s ease; }
.anim-guard-up     { animation: anim-guard-up   .52s ease; }
.anim-guard-badge  { animation: anim-guard-badge .52s ease; }
.anim-evasion-up   { animation: anim-evasion-up .52s ease; }
.anim-evasion-badge { animation: anim-evasion-badge .52s ease; }
.anim-guard-break  { animation: anim-guard-break .18s ease forwards; }
.anim-heal         { animation: anim-heal-pulse .52s ease; }
.anim-pulse-left   { animation: anim-pulse-left .36s ease-in-out forwards; }

.combat-block-up-burst {
  position: absolute;
  left: 50%;
  top: 38%;
  z-index: 24;
  width: 42px;
  height: 42px;
  pointer-events: none;
  animation: combat-block-up-burst .62s ease-out forwards;
}
.combat-unit > .combat-block-up-burst,
.combat-enemy-card > .combat-block-up-burst {
  position: absolute;
  z-index: 24;
}
.combat-block-up-burst::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(134, 211, 255, .72);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(86, 170, 255, .34), inset 0 0 14px rgba(134, 211, 255, .18);
  animation: combat-block-up-ring .62s ease-out forwards;
}
.combat-block-up-burst img {
  position: absolute;
  inset: 7px;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.combat-damage-pop {
  position: absolute;
  z-index: 18;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1px, .25vw, 4px);
  min-width: 56px;
  height: 1em;
  --damage-number-scale: 1;
  font-size: calc(clamp(30px, 3.4vw, 46px) * var(--damage-number-scale));
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .82)) drop-shadow(0 0 13px rgba(255, 121, 21, .46));
  animation: combat-damage-pop 1.18s cubic-bezier(.16, .82, .22, 1) forwards;
}

.combat-damage-pop.ally {
  font-size: calc(clamp(22px, 2.5vw, 32px) * var(--damage-number-scale));
  animation-name: combat-ally-damage-pop;
}

.combat-damage-pop.damage-tier-light {
  --damage-number-scale: .9;
}

.combat-damage-pop.damage-tier-solid {
  --damage-number-scale: 1;
}

.combat-damage-pop.damage-tier-heavy {
  --damage-number-scale: 1.15;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .84)) drop-shadow(0 0 16px rgba(255, 104, 28, .56));
}

.combat-damage-pop.damage-tier-burst {
  --damage-number-scale: 1.3;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .86)) drop-shadow(0 0 20px rgba(255, 65, 36, .68));
}

.combat-damage-pop.damage-tier-surge {
  --damage-number-scale: 1.45;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .88)) drop-shadow(0 0 24px rgba(255, 48, 34, .76)) drop-shadow(0 0 16px rgba(255, 244, 190, .34));
}

.combat-damage-pop.damage-tier-finisher {
  --damage-number-scale: 1.65;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .9)) drop-shadow(0 0 30px rgba(255, 38, 28, .86)) drop-shadow(0 0 22px rgba(255, 250, 224, .58));
}

.combat-damage-pop.critical::after {
  content: "爆擊";
  position: absolute;
  right: -1.8em;
  top: -.48em;
  color: #fff0b8;
  font: 900 .34em/1 var(--font-sans);
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgba(92, 16, 10, .96),
    0 0 10px rgba(255, 42, 26, .88),
    0 0 18px rgba(255, 230, 130, .72);
  white-space: nowrap;
}

.combat-damage-pop.heal {
  min-width: 38px;
  color: #a9f0b0;
  font: 900 clamp(22px, 2.5vw, 32px)/1 var(--font-sans);
  letter-spacing: 0;
  text-shadow:
    0 2px 0 rgba(17, 42, 22, .86),
    0 0 12px rgba(96, 239, 134, .58),
    0 0 22px rgba(210, 255, 203, .32);
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .76));
}

.combat-damage-pop.heal::before {
  content: "+";
  margin-right: 1px;
}

.combat-damage-digit {
  display: block;
  height: 1em;
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

.combat-hit-effect {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 17;
  width: 150px;
  height: 150px;
  pointer-events: none;
  --combat-fx-mobile-scale: 1;
  --combat-fx-tier-scale: 1;
  transform: translate(-50%, -50%) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
}

.combat-attack-trail {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 16;
  pointer-events: none;
  --combat-fx-mobile-scale: 1;
  --combat-fx-tier-scale: 1;
  transform: rotate(var(--trail-angle, 0deg)) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 0 50%;
}

.combat-attack-trail.fx-tier-light,
.combat-hit-effect.fx-tier-light {
  --combat-fx-tier-scale: .88;
}

.combat-attack-trail.fx-tier-solid,
.combat-hit-effect.fx-tier-solid {
  --combat-fx-tier-scale: 1;
}

.combat-attack-trail.fx-tier-heavy,
.combat-hit-effect.fx-tier-heavy {
  --combat-fx-tier-scale: 1.18;
}

.combat-attack-trail.fx-tier-burst,
.combat-hit-effect.fx-tier-burst {
  --combat-fx-tier-scale: 1.3;
}

.combat-attack-trail.fx-tier-surge,
.combat-hit-effect.fx-tier-surge {
  --combat-fx-tier-scale: 1.45;
}

.combat-attack-trail.fx-tier-finisher,
.combat-hit-effect.fx-tier-finisher {
  --combat-fx-tier-scale: 1.58;
}

.combat-attack-trail::before,
.combat-attack-trail::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  pointer-events: none;
}

.combat-attack-trail.trail-pierce::before {
  width: 280px;
  height: 140px;
  border-radius: 0;
  background: url("assets/effects/bow-arrow-sprite-mask.png") 100% 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 8px rgba(255, 231, 132, .76))
    drop-shadow(0 0 16px rgba(255, 85, 24, .42));
  clip-path: inset(12px 12px);
  animation:
    bow-arrow-travel .5s cubic-bezier(.12, .76, .18, 1) forwards,
    bow-arrow-frames .5s steps(1, end) forwards;
}

.combat-attack-trail.trail-slash,
.combat-attack-trail.trail-strike {
  width: 180px;
  height: 120px;
  transform: translate(-50%, -50%) rotate(var(--trail-angle, -32deg)) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 50% 50%;
}

.combat-attack-trail.trail-slash::before,
.combat-attack-trail.trail-slash::after,
.combat-attack-trail.trail-strike::before {
  left: 50%;
}

.combat-attack-trail.trail-pierce::after {
  display: none;
}

.combat-attack-trail.trail-silver-bee-pin::before {
  width: 240px;
  height: 120px;
  border-radius: 0;
  background: url("assets/effects/silver-bee-pin-sprite-grid.png") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 8px rgba(255, 232, 138, .82))
    drop-shadow(0 0 16px rgba(255, 90, 26, .42));
  clip-path: inset(10px 12px);
  animation:
    silver-bee-travel .48s cubic-bezier(.12, .76, .18, 1) forwards,
    silver-bee-frames .48s steps(1, end) forwards;
}

.combat-attack-trail.trail-silver-bee-pin.combo-speed-2::before {
  filter: sepia(.14) brightness(1.14) saturate(1.45) hue-rotate(-14deg)
    drop-shadow(0 0 8px rgba(255, 175, 92, .72))
    drop-shadow(0 0 13px rgba(255, 54, 34, .46));
  animation-duration: .4s, .4s;
}

.combat-attack-trail.trail-silver-bee-pin.combo-speed-3::before {
  filter: sepia(.3) brightness(1.2) saturate(1.85) hue-rotate(-24deg)
    drop-shadow(0 0 8px rgba(255, 112, 78, .8))
    drop-shadow(0 0 15px rgba(255, 30, 28, .58));
  animation-duration: .32s, .32s;
}

.combat-attack-trail.trail-silver-bee-pin.combo-speed-4::before {
  filter: sepia(.42) brightness(1.25) saturate(2.1) hue-rotate(-32deg)
    drop-shadow(0 0 9px rgba(255, 82, 72, .86))
    drop-shadow(0 0 17px rgba(255, 12, 20, .68));
  animation-duration: .24s, .24s;
}

.combat-attack-trail.trail-silver-bee-pin::after {
  display: none;
}

.combat-attack-trail.trail-slash::before {
  width: 148px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 245, 212, .18) 8%, #fff9df 42%, rgba(255, 156, 76, .72) 70%, transparent 100%);
  box-shadow: 0 0 12px rgba(255, 238, 182, .78), 0 0 22px rgba(255, 86, 52, .28);
  filter: drop-shadow(0 0 8px rgba(255, 246, 206, .6));
  animation: combat-trail-slash .46s cubic-bezier(.18, .82, .2, 1) forwards;
}

.combat-attack-trail.trail-slash::after {
  width: 96px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 236, .92);
  box-shadow: 0 0 8px rgba(255, 255, 220, .64);
  animation: combat-trail-slash-edge .46s cubic-bezier(.18, .82, .2, 1) forwards;
}

.combat-attack-trail.trail-slash.trail-sword-slash {
  width: 210px;
  height: 184px;
  transform: translate(-50%, -50%) rotate(var(--trail-angle, 0deg)) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 50% 50%;
}

.combat-attack-trail.trail-slash.trail-sword-slash::before {
  left: 50%;
  top: 50%;
  width: 210px;
  height: 184px;
  border-radius: 0;
  background: url("assets/effects/sword-slash-sprite-grid.png") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 11px rgba(255, 226, 150, .7))
    drop-shadow(0 0 20px rgba(255, 98, 32, .38));
  animation:
    sword-slash-impact .58s cubic-bezier(.12, .74, .2, 1) forwards,
    sword-slash-frames .58s steps(1, end) forwards;
}

.combat-attack-trail.trail-slash.trail-sword-slash::after {
  display: none;
}

.combat-attack-trail.trail-slash.trail-dagger-slash {
  width: 260px;
  height: 260px;
  transform: translate(-50%, -50%) rotate(var(--trail-angle, 0deg)) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 50% 50%;
}

.combat-attack-trail.trail-slash.trail-dagger-slash::before {
  left: 50%;
  top: 50%;
  width: 260px;
  height: 260px;
  border-radius: 0;
  background: url("assets/effects/dagger-slash-sprite.png") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 0 10px rgba(255, 219, 122, .72))
    drop-shadow(0 0 18px rgba(255, 94, 30, .42));
  animation:
    dagger-slash-impact .52s cubic-bezier(.12, .74, .2, 1) forwards,
    dagger-slash-frames .52s steps(1, end) forwards;
}

.combat-attack-trail.trail-slash.trail-dagger-slash::after {
  display: none;
}

.combat-attack-trail.trail-iron-scabbard {
  width: 320px;
  height: 260px;
  transform: translate(-50%, -50%) rotate(var(--trail-angle, 0deg)) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 50% 50%;
}

.combat-attack-trail.trail-iron-scabbard::before {
  left: 50%;
  top: 50%;
  width: 320px;
  height: 260px;
  border-radius: 0;
  background: url("assets/effects/iron-scabbard-sprite-grid.png") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: brightness(1.12) contrast(1.1)
    drop-shadow(0 0 16px rgba(255, 227, 116, .86))
    drop-shadow(0 0 30px rgba(255, 74, 12, .62));
  animation:
    iron-scabbard-impact .66s cubic-bezier(.12, .72, .2, 1) forwards,
    iron-scabbard-frames .66s steps(1, end) forwards;
}

.combat-attack-trail.trail-iron-scabbard::after {
  display: none;
}

.combat-attack-trail.trail-star-hunter-eye {
  width: 185px;
  height: 185px;
  transform: translate(-50%, -50%) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 50% 50%;
}

.combat-attack-trail.trail-star-hunter-eye::before {
  left: 50%;
  top: 50%;
  width: 185px;
  height: 185px;
  border-radius: 0;
  background: url("assets/effects/star-hunter-eye-sprite.png?v=2") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: brightness(1.18) saturate(1.14)
    drop-shadow(0 0 7px rgba(170, 205, 255, .62))
    drop-shadow(0 0 14px rgba(78, 126, 255, .34));
  animation:
    star-hunter-eye-impact .4s cubic-bezier(.12, .76, .2, 1) forwards,
    star-hunter-eye-frames .4s steps(1, end) forwards;
}

.combat-attack-trail.trail-star-hunter-eye::after {
  display: none;
}

.combat-attack-trail.trail-star-breaker {
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 50% 50%;
}

.combat-attack-trail.trail-star-breaker::before {
  left: 50%;
  top: 50%;
  width: 230px;
  height: 230px;
  border-radius: 0;
  background: url("assets/effects/star-breaker-sprite.png") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: brightness(1.18) saturate(1.22) contrast(1.08)
    drop-shadow(0 0 13px rgba(255, 64, 42, .78))
    drop-shadow(0 0 26px rgba(190, 0, 0, .52));
  animation:
    star-breaker-impact .48s cubic-bezier(.1, .72, .16, 1) forwards,
    star-breaker-frames .48s steps(1, end) forwards;
}

.combat-attack-trail.trail-star-breaker::after {
  display: none;
}

.combat-attack-trail.trail-fate-d12-weakness {
  width: 272px;
  height: 153px;
  transform: translate(-50%, -50%) rotate(var(--trail-angle, 0deg)) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 50% 50%;
}

.combat-attack-trail.trail-fate-d12-weakness::before {
  left: 50%;
  top: 50%;
  width: 272px;
  height: 153px;
  border-radius: 0;
  background: url("assets/effects/fate-d12-weakness-sprite.png") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: brightness(1.2) saturate(1.24) contrast(1.08)
    drop-shadow(0 0 14px rgba(246, 72, 255, .82))
    drop-shadow(0 0 26px rgba(126, 30, 255, .6));
  mix-blend-mode: screen;
  animation:
    fate-d12-weakness-impact .58s cubic-bezier(.1, .72, .16, 1) forwards,
    fate-d12-weakness-frames .58s steps(1, end) forwards;
}

.combat-attack-trail.trail-fate-d12-weakness::after {
  display: none;
}

.combat-attack-trail.trail-fate-d12-burst {
  width: 332px;
  height: 194px;
  transform: translate(-50%, -50%) rotate(var(--trail-angle, 0deg)) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 50% 50%;
}

.combat-attack-trail.trail-fate-d12-burst::before {
  left: 50%;
  top: 50%;
  width: 332px;
  height: 194px;
  border-radius: 0;
  background: url("assets/effects/fate-d12-burst-sprite.png") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: brightness(1.28) saturate(1.34) contrast(1.12)
    drop-shadow(0 0 18px rgba(255, 80, 255, .9))
    drop-shadow(0 0 34px rgba(122, 32, 255, .72))
    drop-shadow(0 0 46px rgba(255, 226, 146, .34));
  mix-blend-mode: screen;
  animation:
    fate-d12-burst-impact .72s cubic-bezier(.08, .72, .14, 1) forwards,
    fate-d12-burst-frames .72s steps(1, end) forwards;
}

.combat-attack-trail.trail-fate-d12-burst::after {
  display: none;
}

.combat-attack-trail.trail-lucky-d12-weakness {
  width: 280px;
  height: 160px;
  transform: translate(-50%, -50%) rotate(var(--trail-angle, 0deg)) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 50% 50%;
}

.combat-attack-trail.trail-lucky-d12-weakness::before {
  left: 50%;
  top: 50%;
  width: 280px;
  height: 160px;
  border-radius: 0;
  background: url("assets/effects/lucky-d12-weakness-sprite.png") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: brightness(1.22) saturate(1.2) contrast(1.08)
    drop-shadow(0 0 14px rgba(255, 214, 72, .82))
    drop-shadow(0 0 26px rgba(255, 142, 20, .58));
  mix-blend-mode: screen;
  animation:
    fate-d12-weakness-impact .58s cubic-bezier(.1, .72, .16, 1) forwards,
    fate-d12-weakness-frames .58s steps(1, end) forwards;
}

.combat-attack-trail.trail-lucky-d12-weakness::after {
  display: none;
}

.combat-attack-trail.trail-lucky-d12-burst {
  width: 352px;
  height: 206px;
  transform: translate(-50%, -50%) rotate(var(--trail-angle, 0deg)) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 50% 50%;
}

.combat-attack-trail.trail-lucky-d12-burst::before {
  left: 50%;
  top: 50%;
  width: 352px;
  height: 206px;
  border-radius: 0;
  background: url("assets/effects/lucky-d12-burst-sprite.png") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: brightness(1.3) saturate(1.32) contrast(1.12)
    drop-shadow(0 0 18px rgba(255, 226, 90, .9))
    drop-shadow(0 0 34px rgba(255, 148, 24, .72))
    drop-shadow(0 0 46px rgba(255, 244, 184, .34));
  mix-blend-mode: screen;
  animation:
    fate-d12-burst-impact .72s cubic-bezier(.08, .72, .14, 1) forwards,
    fate-d12-burst-frames .72s steps(1, end) forwards;
}

.combat-attack-trail.trail-lucky-d12-burst::after {
  display: none;
}

.combat-attack-trail.trail-slash.trail-dagger-slash.palette-fate-d12::before {
  filter: hue-rotate(255deg) saturate(2.55) brightness(1.16) contrast(1.12)
    drop-shadow(0 0 11px rgba(236, 64, 255, .82))
    drop-shadow(0 0 20px rgba(132, 42, 255, .58));
  mix-blend-mode: screen;
}

.combat-attack-trail.trail-shell-impact {
  width: 250px;
  height: 184px;
  transform: translate(-50%, -50%) rotate(var(--trail-angle, 0deg)) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 50% 50%;
}

.combat-attack-trail.trail-shell-impact::before {
  left: 50%;
  top: 50%;
  width: 250px;
  height: 184px;
  border-radius: 0;
  background: url("assets/effects/rot-crawler-shell-impact-sprite.png") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: brightness(1.16) contrast(1.1)
    drop-shadow(0 0 10px rgba(255, 245, 226, .62))
    drop-shadow(0 0 18px rgba(198, 42, 30, .34));
  mix-blend-mode: screen;
  animation:
    shell-impact-pop .62s cubic-bezier(.12, .72, .2, 1) forwards,
    shell-impact-frames .62s steps(1, end) forwards;
}

.combat-attack-trail.trail-shell-impact::after {
  display: none;
}

.combat-attack-trail.trail-jaw-bite {
  width: 250px;
  height: 118px;
  transform: translate(-50%, -50%) rotate(var(--trail-angle, 0deg)) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 50% 50%;
}

.combat-attack-trail.trail-jaw-bite::before {
  left: 50%;
  top: 50%;
  width: 250px;
  height: 118px;
  border-radius: 0;
  background: url("assets/effects/enemy-jaw-bite-sprite.png") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: brightness(1.12) contrast(1.08)
    drop-shadow(0 0 9px rgba(255, 248, 232, .58))
    drop-shadow(0 0 16px rgba(154, 20, 22, .3));
  mix-blend-mode: screen;
  animation:
    jaw-bite-pop .58s cubic-bezier(.12, .72, .2, 1) forwards,
    jaw-bite-frames .58s steps(1, end) forwards;
}

.combat-attack-trail.trail-jaw-bite::after {
  display: none;
}

.combat-attack-trail.trail-poison-cloud {
  width: 300px;
  height: 140px;
  transform: translate(-50%, -50%) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale));
  transform-origin: 50% 50%;
}

.combat-attack-trail.trail-poison-cloud::before {
  left: 50%;
  top: 50%;
  width: 300px;
  height: 140px;
  border-radius: 0;
  background: url("assets/effects/plague-moth-poison-cloud-sprite.png") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: brightness(1.12) saturate(1.16) contrast(1.06)
    drop-shadow(0 0 10px rgba(212, 255, 18, .48))
    drop-shadow(0 0 18px rgba(95, 205, 35, .32));
  mix-blend-mode: screen;
  animation:
    poison-cloud-bloom .66s ease-out forwards,
    poison-cloud-frames .66s steps(1, end) forwards;
}

.combat-attack-trail.trail-poison-cloud::after {
  display: none;
}

.combat-attack-trail.trail-dark-avatar {
  height: 0;
  transform-origin: 0 50%;
}

.combat-attack-trail.trail-dark-avatar::after {
  left: 0;
  top: 0;
  width: 210px;
  height: 150px;
  border-radius: 0;
  background: url("assets/effects/dark-avatar-skill-sprite.png") 0 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: brightness(1.12) saturate(1.18) contrast(1.08)
    drop-shadow(0 0 14px rgba(70, 206, 255, .58))
    drop-shadow(0 0 24px rgba(116, 42, 255, .55));
  mix-blend-mode: screen;
  animation:
    dark-avatar-shot-travel .58s cubic-bezier(.1, .72, .14, 1) forwards,
    dark-avatar-launch-frames .58s steps(1, end) forwards;
}

.combat-attack-trail.trail-dark-avatar::before {
  left: 100%;
  top: 0;
  width: 270px;
  height: 190px;
  border-radius: 0;
  background: url("assets/effects/dark-avatar-skill-sprite.png") 100% 0 / 400% 200% no-repeat;
  box-shadow: none;
  filter: brightness(1.18) saturate(1.24) contrast(1.12)
    drop-shadow(0 0 16px rgba(96, 214, 255, .72))
    drop-shadow(0 0 28px rgba(132, 46, 255, .62));
  mix-blend-mode: screen;
  animation:
    dark-avatar-impact-pop .58s cubic-bezier(.08, .72, .16, 1) .34s forwards,
    dark-avatar-impact-frames .58s steps(1, end) .34s forwards;
  opacity: 0;
}

.combat-attack-trail.trail-strike::before {
  width: 112px;
  height: 112px;
  border: 3px solid rgba(255, 226, 146, .76);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 178, .4), transparent 62%);
  box-shadow: 0 0 18px rgba(255, 205, 111, .68), inset 0 0 16px rgba(255, 251, 216, .28);
  animation: combat-trail-strike .42s ease-out forwards;
}

.combat-hit-effect::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 238, .86), rgba(255, 198, 78, .32) 38%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: hit-core-flash .34s ease-out forwards;
}

.combat-hit-effect.hit-pierce::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 250, 192, .96) 42%, #ffffff 50%, rgba(255, 173, 74, .78) 62%, transparent 100%);
  box-shadow: 0 0 18px rgba(255, 239, 162, .96), 0 0 34px rgba(255, 103, 42, .58);
  animation: hit-pierce .58s ease-out forwards;
  transform-origin: 50% 50%;
}

.combat-hit-effect.hit-slash::before,
.combat-hit-effect.hit-strike::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 178px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 238, 184, .88) 40%, #fff8dc 54%, rgba(255, 124, 52, .62) 68%, transparent 100%);
  box-shadow: 0 0 20px rgba(255, 207, 96, .88), 0 0 30px rgba(255, 92, 48, .38);
  animation: hit-slash .58s ease-out forwards;
  transform-origin: 50% 50%;
}

.combat-hit-effect.hit-eagle-mark {
  border: 3px solid rgba(255, 230, 112, .98);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 229, 120, .88), 0 0 34px rgba(255, 168, 44, .46), inset 0 0 18px rgba(255, 209, 86, .28);
  animation: hit-eagle-mark .62s ease-out forwards;
}

.combat-hit-effect.hit-eagle-mark::before,
.combat-hit-effect.hit-eagle-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 242, 158, 1);
  box-shadow: 0 0 10px rgba(255, 218, 108, .65);
  transform: translate(-50%, -50%);
  animation: none;
}

.combat-hit-effect.hit-eagle-mark::after {
  border-radius: 0;
}

.combat-hit-effect.hit-eagle-mark::before {
  width: 120px;
  height: 2px;
}

.combat-hit-effect.hit-eagle-mark::after {
  width: 2px;
  height: 120px;
}

.combat-hit-effect.hit-weak-flash {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 252, 218, .9) 0%, rgba(255, 209, 88, .58) 26%, transparent 66%);
  filter: drop-shadow(0 0 14px rgba(255, 220, 116, .72));
  animation: hit-weak-flash .42s ease-out forwards;
}

.combat-hit-effect.hit-weak-flash::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 244, 180, .92);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(255, 220, 112, .72);
}

.combat-hit-effect.hit-weak-flash::after {
  display: none;
}

.combat-hit-effect.hit-weakpoint-hit {
  top: 68%;
  width: 56px;
  height: 56px;
  background: url("assets/effects/weakpoint-hit-8frames.png?v=weakpoint-hit-align1") 0 0 / 400% 200% no-repeat;
  filter:
    drop-shadow(0 0 10px rgba(255, 56, 42, .58))
    drop-shadow(0 0 18px rgba(255, 198, 118, .28));
  animation:
    weakpoint-hit-frames .58s steps(1, end) forwards,
    weakpoint-hit-impact .58s cubic-bezier(.12, .72, .18, 1) forwards;
}

.combat-hit-effect.hit-weakpoint-hit::before,
.combat-hit-effect.hit-weakpoint-hit::after {
  display: none;
}

.combat-hit-effect.hit-wound-burst {
  width: 260px;
  height: 260px;
  background: none;
  filter: brightness(1.08) saturate(1.12)
    drop-shadow(0 0 14px rgba(255, 45, 38, .64))
    drop-shadow(0 0 24px rgba(104, 0, 0, .38));
  animation: hit-wound-burst .58s ease-out forwards;
}

.combat-hit-effect.hit-wound-burst::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 260px;
  background: url("assets/effects/pain-wound-burst-sprite.png") 0 0 / 400% 200% no-repeat;
  transform: translate(-50%, -50%);
  animation: wound-burst-frames .58s steps(1, end) forwards;
}

.combat-hit-effect.hit-wound-burst::after {
  display: none;
}

.combat-hit-effect.hit-shadow-break {
  background:
    radial-gradient(circle, rgba(229, 194, 255, .95), rgba(148, 64, 255, .72) 34%, rgba(34, 9, 61, .46) 56%, transparent 72%);
  filter: drop-shadow(0 0 22px rgba(174, 103, 255, .9));
  animation: hit-shadow-break .66s ease-out forwards;
}

@keyframes hit-pierce {
  0%   { opacity: 0; transform: translate(-78%, -50%) rotate(var(--hit-angle, -8deg)) scaleX(.16); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-22%, -50%) rotate(var(--hit-angle, -8deg)) scaleX(1); }
}

@keyframes bow-arrow-travel {
  0%   { left: 0; opacity: 0; transform: translate(-20%, -50%) scale(.46); }
  16%  { opacity: 1; }
  72%  { left: 100%; opacity: 1; transform: translate(-92%, -50%) scale(.94); }
  100% { left: 100%; opacity: 0; transform: translate(-96%, -50%) scale(1.02); }
}

@keyframes bow-arrow-frames {
  0%   { background-position: 100% 0; }
  26%  { background-position: 66.666% 0; }
  52%  { background-position: 33.333% 0; }
  78%,
  100% { background-position: 0 0; }
}

@keyframes silver-bee-travel {
  0%   { left: 0; opacity: 0; transform: translate(-20%, -50%) scale(.36) scaleY(-1); }
  16%  { opacity: 1; }
  72%  { left: 100%; opacity: 1; transform: translate(-54%, -50%) scale(.9) scaleY(-1); }
  100% { left: 100%; opacity: 0; transform: translate(-44%, -50%) scale(.98) scaleY(-1); }
}

@keyframes silver-bee-frames {
  0%   { background-position: 0 0; }
  18%  { background-position: 33.333% 0; }
  36%  { background-position: 66.666% 0; }
  54%  { background-position: 100% 0; }
  72%  { background-position: 0 100%; }
  88%,
  100% { background-position: 33.333% 100%; }
}

@keyframes combat-trail-slash {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scaleX(.18); clip-path: inset(0 100% 0 0); }
  18%  { opacity: 1; }
  54%  { opacity: .95; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scaleX(1); clip-path: inset(0 0 0 0); }
}

@keyframes combat-trail-slash-edge {
  0%   { opacity: 0; transform: translate(-34%, -310%) rotate(-12deg) scaleX(.18); clip-path: inset(0 100% 0 0); }
  22%  { opacity: .9; }
  58%  { clip-path: inset(0 0 0 0); }
  100% { opacity: 0; transform: translate(-34%, -310%) rotate(-12deg) scaleX(1); clip-path: inset(0 0 0 0); }
}

@keyframes sword-slash-impact {
  0%   { opacity: 0; transform: translate(-58%, -44%) rotate(-7deg) scaleX(-.42) scaleY(.42); }
  14%  { opacity: .86; }
  56%  { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scaleX(-.98) scaleY(.98); }
  100% { opacity: 0; transform: translate(-43%, -57%) rotate(-7deg) scaleX(-1.08) scaleY(1.08); }
}

@keyframes sword-slash-frames {
  0%   { background-position: 0 100%; }
  16%  { background-position: 33.333% 100%; }
  32%  { background-position: 66.666% 100%; }
  48%  { background-position: 100% 100%; }
  64%  { background-position: 66.666% 100%; }
  80%  { background-position: 33.333% 100%; }
  100% { background-position: 0 100%; }
}

@keyframes dagger-slash-impact {
  0%   { opacity: 0; transform: translate(-62%, -42%) rotate(-11deg) scale(.46); }
  14%  { opacity: 1; }
  52%  { opacity: 1; transform: translate(-50%, -50%) rotate(-11deg) scale(.98); }
  100% { opacity: 0; transform: translate(-44%, -56%) rotate(-11deg) scale(1.06); }
}

@keyframes dagger-slash-frames {
  0%   { background-position: 33.333% 0; }
  34%  { background-position: 66.666% 0; }
  68%,
  100% { background-position: 100% 0; }
}

@keyframes iron-scabbard-impact {
  0%   { opacity: 0; transform: translate(-58%, -44%) rotate(-7deg) scaleX(.32) scaleY(-.34); }
  10%  { opacity: 1; }
  48%  { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scaleX(1) scaleY(-1); }
  72%  { opacity: .82; transform: translate(-45%, -57%) rotate(-7deg) scaleX(1.06) scaleY(-1.05); }
  100% { opacity: 0; transform: translate(-41%, -60%) rotate(-7deg) scaleX(1.1) scaleY(-1.08); }
}

@keyframes iron-scabbard-frames {
  0%   { background-position: 0 0; }
  14%  { background-position: 33.333% 0; }
  28%  { background-position: 66.666% 0; }
  42%  { background-position: 100% 0; }
  58%  { background-position: 0 100%; }
  76%,
  100% { background-position: 33.333% 100%; }
}

@keyframes star-hunter-eye-impact {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.58); }
  18%  { opacity: .86; }
  68%  { opacity: .9; transform: translate(-50%, -50%) scale(.94); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
}

@keyframes star-hunter-eye-frames {
  0%    { background-position: 0% 0%; }
  12.5% { background-position: 33.333% 0%; }
  25%   { background-position: 66.666% 0%; }
  37.5% { background-position: 100% 0%; }
  50%   { background-position: 0% 100%; }
  62.5% { background-position: 33.333% 100%; }
  75%   { background-position: 66.666% 100%; }
  87.5%,
  100%  { background-position: 100% 100%; }
}

@keyframes star-breaker-impact {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.44) rotate(-6deg); }
  10%  { opacity: 1; }
  44%  { opacity: 1; transform: translate(-50%, -50%) scale(.98) rotate(2deg); }
  70%  { opacity: .86; transform: translate(-50%, -50%) scale(1.04) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); }
}

@keyframes star-breaker-frames {
  0%   { background-position: 0 0; }
  14%  { background-position: 33.333% 0; }
  28%  { background-position: 66.666% 0; }
  42%  { background-position: 100% 0; }
  58%  { background-position: 0 100%; }
  74%  { background-position: 33.333% 100%; }
  90%,
  100% { background-position: 66.666% 100%; }
}

@keyframes fate-d12-weakness-impact {
  0%   { opacity: 0; transform: translate(-62%, -45%) rotate(-8deg) scale(.36); }
  10%  { opacity: .92; }
  44%  { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(.98); }
  70%  { opacity: .9; transform: translate(-46%, -54%) rotate(-8deg) scale(1.05); }
  100% { opacity: 0; transform: translate(-42%, -58%) rotate(-8deg) scale(1.12); }
}

@keyframes fate-d12-weakness-frames {
  0%   { background-position: 0 0; }
  14%  { background-position: 33.333% 0; }
  28%  { background-position: 66.666% 0; }
  42%  { background-position: 100% 0; }
  58%  { background-position: 0 100%; }
  74%  { background-position: 33.333% 100%; }
  90%,
  100% { background-position: 66.666% 100%; }
}

@keyframes fate-d12-burst-impact {
  0%   { opacity: 0; transform: translate(-64%, -44%) rotate(-8deg) scale(.34); }
  8%   { opacity: .96; }
  36%  { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1.04); }
  62%  { opacity: .98; transform: translate(-47%, -54%) rotate(-8deg) scale(1.16); }
  82%  { opacity: .72; transform: translate(-44%, -57%) rotate(-8deg) scale(1.24); }
  100% { opacity: 0; transform: translate(-40%, -60%) rotate(-8deg) scale(1.32); }
}

@keyframes fate-d12-burst-frames {
  0%   { background-position: 0 0; }
  12%  { background-position: 33.333% 0; }
  24%  { background-position: 66.666% 0; }
  36%  { background-position: 100% 0; }
  50%  { background-position: 0 100%; }
  66%  { background-position: 33.333% 100%; }
  82%,
  100% { background-position: 66.666% 100%; }
}

@keyframes shell-impact-pop {
  0%   { opacity: 0; transform: translate(-62%, -46%) rotate(-4deg) scale(.44); }
  12%  { opacity: 1; }
  56%  { opacity: .95; transform: translate(-50%, -50%) rotate(-4deg) scale(.96); }
  100% { opacity: 0; transform: translate(-45%, -55%) rotate(-4deg) scale(1.08); }
}

@keyframes shell-impact-frames {
  0%   { background-position: 0 0; }
  14%  { background-position: 33.333% 0; }
  28%  { background-position: 66.666% 0; }
  42%  { background-position: 100% 0; }
  58%  { background-position: 0 100%; }
  74%  { background-position: 33.333% 100%; }
  90%,
  100% { background-position: 66.666% 100%; }
}

@keyframes jaw-bite-pop {
  0%   { opacity: 0; transform: translate(-50%, -54%) scale(.62); }
  12%  { opacity: .95; }
  46%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -48%) scale(1.04); }
}

@keyframes jaw-bite-frames {
  0%   { background-position: 0 0; }
  14%  { background-position: 33.333% 0; }
  28%  { background-position: 66.666% 0; }
  42%  { background-position: 100% 0; }
  58%  { background-position: 0 100%; }
  74%  { background-position: 33.333% 100%; }
  90%,
  100% { background-position: 66.666% 100%; }
}

@keyframes poison-cloud-bloom {
  0%   { opacity: 0; transform: translate(-56%, -50%) scale(.42); }
  12%  { opacity: .88; }
  54%  { opacity: .9; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-45%, -50%) scale(1.06); }
}

@keyframes poison-cloud-frames {
  0%   { background-position: 0 0; }
  14%  { background-position: 33.333% 0; }
  28%  { background-position: 66.666% 0; }
  42%  { background-position: 100% 0; }
  58%  { background-position: 0 100%; }
  74%  { background-position: 33.333% 100%; }
  90%,
  100% { background-position: 66.666% 100%; }
}

@keyframes dark-avatar-shot-travel {
  0%   { left: 0; opacity: 0; transform: translate(-28%, -50%) scale(.42) rotate(-2deg); }
  14%  { opacity: .92; }
  58%  { left: 72%; opacity: 1; transform: translate(-82%, -50%) scale(.86) rotate(0deg); }
  100% { left: 100%; opacity: 0; transform: translate(-94%, -50%) scale(.98) rotate(2deg); }
}

@keyframes dark-avatar-launch-frames {
  0%   { background-position: 0 0; }
  34%  { background-position: 33.333% 0; }
  68%,
  100% { background-position: 66.666% 0; }
}

@keyframes dark-avatar-impact-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.42) rotate(-2deg); }
  16%  { opacity: 1; }
  58%  { opacity: .98; transform: translate(-50%, -50%) scale(.98) rotate(1deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); }
}

@keyframes dark-avatar-impact-frames {
  0%   { background-position: 100% 0; }
  18%  { background-position: 0 100%; }
  36%  { background-position: 33.333% 100%; }
  58%  { background-position: 66.666% 100%; }
  78%,
  100% { background-position: 100% 100%; }
}

@keyframes combat-trail-strike {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  26%  { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes hit-core-flash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
  28%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes hit-slash {
  0%   { opacity: 0; transform: translate(-62%, -72%) rotate(calc(var(--hit-angle, 0deg) - 28deg)) scaleX(.18); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-38%, -34%) rotate(calc(var(--hit-angle, 0deg) - 28deg)) scaleX(1); }
}

@keyframes hit-eagle-mark {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.52) rotate(-16deg); }
  28%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18) rotate(0deg); }
}

@keyframes hit-weak-flash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  26%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes weakpoint-hit-frames {
  0% { background-position: 0% 0%; }
  12.5% { background-position: 33.333% 0%; }
  25% { background-position: 66.666% 0%; }
  37.5% { background-position: 100% 0%; }
  50% { background-position: 0% 100%; }
  62.5% { background-position: 33.333% 100%; }
  75% { background-position: 66.666% 100%; }
  87.5%,
  100% { background-position: 100% 100%; }
}

@keyframes weakpoint-hit-impact {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale)) scale(.72);
  }
  18% {
    opacity: .92;
    transform: translate(-50%, -50%) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale)) scale(.98);
  }
  48% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale)) scale(1.12);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--combat-fx-mobile-scale)) scale(var(--combat-fx-tier-scale)) scale(1.2);
  }
}

@keyframes hit-wound-burst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  18%  { opacity: 1; }
  76%  { opacity: .95; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes wound-burst-frames {
  0%   { background-position: 0 0; }
  12%  { background-position: 33.333% 0; }
  24%  { background-position: 66.666% 0; }
  36%  { background-position: 100% 0; }
  50%  { background-position: 0 100%; }
  66%  { background-position: 33.333% 100%; }
  82%  { background-position: 66.666% 100%; }
  100% { background-position: 100% 100%; }
}

@keyframes hit-shadow-break {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.45); filter: blur(4px) drop-shadow(0 0 18px rgba(146, 74, 255, .62)); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.24); filter: blur(0) drop-shadow(0 0 18px rgba(146, 74, 255, .62)); }
}

@keyframes combat-damage-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -28%) scale(.72);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -58%) scale(1.16);
  }
  48% {
    opacity: 1;
    transform: translate(-50%, -78%) scale(1);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(.96);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120%) scale(.82);
  }
}

@keyframes combat-ally-damage-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(.72);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -4px) scale(1.12);
  }
  52% {
    opacity: 1;
    transform: translate(-50%, -14px) scale(1);
  }
  76% {
    opacity: 1;
    transform: translate(-50%, -20px) scale(.96);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -28px) scale(.82);
  }
}

.dice-preview-inject {
  animation: fadein .18s ease;
}
@keyframes dice-pip-settle {
  0%   { transform: scale(1.55); box-shadow: 0 0 0 2px rgba(255, 214, 96, .5), 0 0 18px rgba(201,145,47,.85); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1);   box-shadow: 0 5px 14px rgba(0,0,0,.52); }
}
@keyframes class-dice-roll {
  0%   { transform: rotate(0deg) scale(1); filter: blur(0) brightness(1); }
  18%  { transform: rotate(42deg) scale(1.2); filter: blur(.8px) brightness(1.22); }
  38%  { transform: rotate(-55deg) scale(.9); filter: blur(1.2px) brightness(.9); }
  58%  { transform: rotate(76deg) scale(1.14); filter: blur(.9px) brightness(1.18); }
  78%  { transform: rotate(-24deg) scale(.96); filter: blur(.4px) brightness(1.05); }
  100% { transform: rotate(0deg) scale(1); filter: blur(0) brightness(1); }
}
.combat-card-dice.dice-pip-settled {
  animation: dice-pip-settle .22s ease forwards;
}
.combat-card-dice.dice-rolling,
.dice-result.dice-rolling .dice-face {
  animation: class-dice-roll .72s cubic-bezier(.22,.75,.26,1) infinite;
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dice-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.dice-row.hidden { display: none; }
.dice-row .dice-result {
  flex: 1;
  float: none;
  width: auto;
}

.dice-result {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 14px 16px;
  background: radial-gradient(circle at 50% 30%, rgba(200,137,10,.18), rgba(0,0,0,.18) 65%);
  border: 1px solid var(--accent-dim);
}

#event-modal .dice-row {
  margin: 8px 0 10px;
}

#event-modal .dice-row .dice-result:not(.dice-compact) {
  min-height: 78px;
  padding: 9px 14px;
  grid-template-columns: minmax(160px, 1fr) auto minmax(90px, 1fr);
  grid-template-rows: auto;
  align-items: center;
  justify-items: center;
  column-gap: 18px;
}

#event-modal .dice-row .dice-result:not(.dice-compact) .dice-label {
  justify-self: end;
  text-align: right;
}

#event-modal .dice-row .dice-result:not(.dice-compact) .dice-value {
  justify-self: start;
}

#event-modal .dice-row .dice-result:not(.dice-compact) .dice-face {
  font-size: 2.6em;
}

#event-modal .dice-row .dice-result:not(.dice-compact) .dice-face-role {
  min-height: 52px;
  width: 58px;
}

#event-modal .dice-row .dice-result:not(.dice-compact) .combat-card-dice.modal {
  width: 42px;
  height: 42px;
}

#event-modal .dice-row .dice-result:not(.dice-compact) .combat-card-dice.modal span.on {
  width: 5px;
  height: 5px;
}

.combat-modal.has-dice #modal-desc {
  min-height: 92px;
}

.dice-result.dice-compact {
  float: right;
  width: 160px;
  margin: 0 0 8px 14px;
  padding: 7px 10px;
}

.dice-face-role {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 68px;
  width: 76px;
  overflow: visible;
  transform: none !important;
  animation: none !important;
}

.combat-card-dice.modal {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  inset: auto;
  transform-origin: 50% 50%;
}

.combat-card-dice.modal span.on {
  width: 6px;
  height: 6px;
}

.combat-card-dice.modal.dice-rolling {
  animation: modal-class-dice-roll .72s cubic-bezier(.22,.75,.26,1) infinite;
}

@keyframes modal-class-dice-roll {
  0%   { transform: rotate(0deg) scale(1); filter: blur(0) brightness(1); }
  34%  { transform: rotate(-18deg) scale(.96); filter: blur(.35px) brightness(.96); }
  67%  { transform: rotate(22deg) scale(1.04); filter: blur(.25px) brightness(1.08); }
  100% { transform: rotate(0deg) scale(1); filter: blur(0) brightness(1); }
}

.dice-compact .dice-label {
  font-size: .72em;
}

.dice-compact .dice-face {
  font-size: 2.2em;
}

.dice-compact .dice-value {
  font-size: .88em;
}

.dice-compact .dice-note {
  font-size: .72em;
  text-align: center;
}

.dice-label {
  color: var(--text-dim);
  font-size: .9em;
}

.dice-face {
  color: var(--text-bright);
  font-size: 4.2em;
  line-height: 1;
  text-shadow: 0 0 18px rgba(200,137,10,.35);
}

.dice-value {
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 1.1em;
  letter-spacing: .08em;
}

.dice-note {
  color: #5a9a5a;
  font-size: .9em;
}

.dice-combat {
  border-color: #6a2a1a;
  background: radial-gradient(circle at 50% 30%, rgba(160,70,30,.22), rgba(0,0,0,.2) 65%);
}

@media (max-width: 720px) {
  #modal-choices {
    align-items: stretch;
  }

  .choice-btn {
    flex-basis: 100%;
    height: 64px;
    min-height: 64px;
  }

  .choice-btn.has-choice-hint {
    height: 78px;
    min-height: 78px;
  }

  .choice-label {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .combat-scene {
    grid-template-columns: 1fr;
  }

  .combat-center {
    order: -1;
  }

  .combat-vs {
    width: 76px;
    height: 76px;
  }

  .dice-result.dice-compact {
    float: none;
    width: auto;
    margin: 10px 0 12px;
  }

  .combat-modal.has-dice #modal-desc {
    min-height: 0;
  }
}

#modal-choices {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-height: 34vh;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-left: 8px;
  padding-right: 8px;
}

.choice-btn {
  position: relative;
  flex: 1 1 180px;
  min-width: 148px;
  max-width: min(320px, 100%);
  height: auto;
  min-height: 62px;
  background:
    url("assets/ui/choice-button-frame.png") center / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(39, 34, 27, .95), rgba(13, 13, 12, .95));
  color: var(--text);
  border: 0;
  padding: 13px 30px;
  text-align: center;
  cursor: pointer;
  font-size: 1.02em;
  font-family: var(--font-serif);
  font-weight: 700;
  transition: color .12s, filter .12s, transform .12s;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: none;
}
.choice-label {
  display: block;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .78);
}
.choice-btn.has-choice-hint {
  flex-basis: 260px;
  height: 74px;
  min-height: 74px;
  flex-direction: column;
  gap: 4px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.choice-hint {
  font-family: var(--font-sans);
  font-weight: 500;
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-dim);
  font-size: .78em;
  font-weight: 500;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.choice-btn.danger-choice .choice-hint {
  color: #d5a98a;
}
.choice-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(100% + 8px);
  z-index: 5;
  padding: 8px 10px;
  color: var(--text-bright);
  font-size: .86em;
  line-height: 1.45;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  border: 1px solid rgba(201,145,47,.42);
  border-radius: 6px;
  background:
    radial-gradient(circle at 18px 8px, rgba(201,145,47,.18), transparent 36px),
    linear-gradient(180deg, rgba(32, 28, 22, .98), rgba(10, 10, 9, .98));
  box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 12px rgba(201,145,47,.12);
  transition: opacity .12s, transform .12s;
}
.choice-btn[data-tooltip]::before {
  content: "";
  position: absolute;
  left: 28px;
  bottom: calc(100% + 3px);
  z-index: 6;
  width: 10px;
  height: 10px;
  pointer-events: none;
  opacity: 0;
  transform: rotate(45deg) translateY(4px);
  background: rgba(18, 16, 13, .98);
  border-right: 1px solid rgba(201,145,47,.42);
  border-bottom: 1px solid rgba(201,145,47,.42);
  transition: opacity .12s, transform .12s;
}
.choice-btn[data-tooltip]:hover::after,
.choice-btn[data-tooltip]:focus-visible::after,
.choice-btn[data-tooltip]:hover::before,
.choice-btn[data-tooltip]:focus-visible::before {
  opacity: 1;
  transform: translateY(0);
}
.choice-btn[data-tooltip]:hover::before,
.choice-btn[data-tooltip]:focus-visible::before {
  transform: rotate(45deg) translateY(0);
}
.choice-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text-bright); }
.choice-btn:disabled { opacity: .5; cursor: default; }
.choice-btn.danger-choice {
  color: #e7c7a4;
  border-color: rgba(184, 111, 45, .76);
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 137, 10, .18), transparent 58%),
    linear-gradient(180deg, rgba(78, 20, 18, .96), rgba(28, 8, 8, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 130, .1),
    inset 0 0 16px rgba(20, 0, 0, .68),
    0 0 0 1px rgba(201, 137, 10, .08),
    0 0 18px rgba(90, 20, 14, .32);
  font-weight: 700;
}
.choice-btn.danger-choice:hover:not(:disabled) {
  color: #ffe5bd;
  border-color: rgba(220, 145, 58, .95);
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 155, 34, .28), transparent 60%),
    linear-gradient(180deg, rgba(96, 24, 20, .98), rgba(36, 8, 8, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 218, 150, .14),
    inset 0 0 16px rgba(20, 0, 0, .64),
    0 0 0 1px rgba(201, 137, 10, .12),
    0 0 22px rgba(143, 50, 30, .42);
}

.relic-reward-panel {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(201, 145, 47, .32);
  background:
    radial-gradient(circle at 64px 36px, rgba(201, 145, 47, .18), transparent 78px),
    linear-gradient(180deg, rgba(35, 28, 18, .74), rgba(10, 10, 9, .68));
}

.relic-reward-display {
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  padding: 0 4px 4px;
  border: 0;
  background: transparent;
}

.relic-assign-panel {
  display: grid;
  gap: 14px;
}

.relic-reward-visual {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 145, 47, .24);
  background: radial-gradient(circle, rgba(255, 220, 130, .1), rgba(0, 0, 0, .34) 72%);
}

.relic-reward-img {
  max-width: 98px;
  max-height: 98px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(201, 145, 47, .32));
}

.relic-reward-emoji {
  font-size: 3.1em;
  line-height: 1;
}

.relic-reward-kicker {
  color: #d6a957;
  font-size: .78em;
  font-weight: 800;
  letter-spacing: 0;
}

.relic-reward-name {
  margin-top: 0;
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 1.42em;
  font-weight: 900;
}

.relic-reward-desc {
  margin-top: 0;
  color: var(--text);
  line-height: 1.42;
}

.relic-reward-lore {
  margin-top: 8px;
  color: var(--text-dim);
  line-height: 1.42;
}

.relic-reward-display .relic-reward-lore {
  margin-top: 8px;
}

.relic-assign-instruction {
  color: var(--text);
  font-size: 1.04em;
  font-weight: 800;
  line-height: 1.5;
}

.relic-assign-target-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.relic-assign-target-card {
  position: relative;
  min-height: 128px;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: 12px 14px;
  overflow: hidden;
  color: inherit;
  text-align: left;
  border: 1px solid rgba(201, 145, 47, .3);
  background:
    linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .28) 58%, rgba(0, 0, 0, .1)),
    rgba(255, 255, 255, .025);
  cursor: pointer;
  font: inherit;
  transition: border-color .14s, filter .14s, transform .14s;
}

.relic-assign-target-card:hover {
  border-color: rgba(232, 174, 70, .78);
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 138, .24),
    0 0 18px rgba(255, 185, 70, .34),
    0 0 34px rgba(255, 130, 42, .14);
}

.relic-assign-target-card.recommended {
  border-color: rgba(255, 218, 110, .88);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 156, .28),
    0 0 22px rgba(255, 190, 66, .34),
    0 0 44px rgba(255, 122, 42, .18);
}

.relic-assign-target-card.recommended .relic-assign-art img {
  filter: brightness(1.14) saturate(1.06) contrast(1.04);
}

.relic-assign-target-card.replace {
  border-color: rgba(201, 145, 47, .22);
}

.relic-assign-target-card.recommended.replace {
  border-color: rgba(255, 218, 110, .78);
}

.relic-assign-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .66;
  pointer-events: none;
}

.relic-assign-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.9) saturate(.82);
  transition: filter .14s;
}

.relic-assign-target-card:hover .relic-assign-art img {
  filter: brightness(1.18) saturate(1.05) contrast(1.04);
}

.relic-assign-target-card > :not(.relic-assign-art) {
  position: relative;
  z-index: 1;
}

.relic-assign-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.relic-assign-class {
  font-size: 1.15em;
}

.relic-assign-name {
  color: var(--text-bright);
  font-family: var(--font-serif);
  font-size: 1.08em;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relic-assign-action {
  color: #ffd98a;
  border: 1px solid rgba(201, 145, 47, .34);
  padding: 2px 6px;
  font-size: .78em;
  background: rgba(201, 145, 47, .12);
}

.relic-assign-meta,
.relic-assign-current {
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: .83em;
  font-weight: 600;
}

.relic-assign-current.empty {
  color: #9fd48e;
}

.relic-assign-empty {
  color: var(--text-dim);
  border: 1px dashed rgba(201, 145, 47, .24);
  padding: 14px;
}

.choice-btn.relic-abandon-choice {
  flex: 0 1 150px;
  min-width: 128px;
  max-width: 170px;
  opacity: .76;
}

.event-relic-choice-intro {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  color: var(--text);
  line-height: 1.58;
}

.event-relic-choice-intro p {
  margin: 0;
}

.event-relic-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.event-relic-choice {
  display: grid;
  grid-template-rows: 104px minmax(0, 1fr);
  gap: 10px;
  min-height: 236px;
  padding: 14px;
  color: inherit;
  text-align: left;
  border: 1px solid rgba(201, 145, 47, .26);
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 145, 47, .16), transparent 58%),
    linear-gradient(180deg, rgba(32, 27, 20, .72), rgba(9, 9, 8, .68));
  cursor: pointer;
  font: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .035);
  transition: filter .12s, transform .12s, border-color .12s, box-shadow .12s;
}

.event-relic-choice:hover {
  border-color: rgba(232, 174, 70, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .08), 0 0 18px rgba(201, 145, 47, .18);
  filter: brightness(1.12);
  transform: translateY(-2px);
}

.event-relic-choice.locked,
.event-relic-choice:disabled {
  cursor: not-allowed;
  opacity: .58;
  filter: grayscale(.32) brightness(.82);
}

.event-relic-choice.locked:hover,
.event-relic-choice:disabled:hover {
  border-color: rgba(201, 145, 47, .26);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 150, .035);
  transform: none;
}

.event-relic-choice-visual {
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 145, 47, .26);
  background:
    radial-gradient(circle, rgba(255, 232, 168, .28) 0%, rgba(201, 145, 47, .14) 38%, transparent 72%),
    rgba(0, 0, 0, .16);
}

.event-relic-choice-img {
  max-width: 96px;
  max-height: 96px;
  object-fit: contain;
  filter: brightness(1.18) contrast(1.08) drop-shadow(0 0 10px rgba(255, 232, 180, .26)) drop-shadow(0 0 16px rgba(201, 145, 47, .28));
}

.event-relic-choice-emoji {
  font-size: 2.8em;
  line-height: 1;
}

.event-relic-choice-body {
  display: grid;
  gap: 5px;
}

.event-relic-choice-kicker {
  color: #d6a957;
  font-family: var(--font-sans);
  font-size: .74em;
  font-weight: 800;
}

.event-relic-choice-name {
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 1.18em;
  font-weight: 900;
}

.event-relic-choice-desc {
  color: var(--text);
  font-family: var(--font-sans);
  font-size: .86em;
  font-weight: 600;
  line-height: 1.42;
}

.event-relic-choice-lock {
  color: #ffcf78;
  font-family: var(--font-sans);
  font-size: .8em;
  font-weight: 900;
  line-height: 1.35;
}

.event-relic-choice-lore {
  color: var(--text-dim);
  font-family: var(--font-sans);
  font-size: .78em;
  font-weight: 500;
  line-height: 1.35;
}

.modal-content.combat-modal #modal-choices {
  display: none;
}

.modal-content.combat-modal #modal-choices:not(.modal-choices-empty) {
  display: flex;
}

.combat-actions .choice-btn {
  flex: 0 0 auto;
  min-height: 34px;
  height: auto;
  min-width: 98px;
  max-width: 118px;
  text-align: center;
  padding: 6px 10px;
  line-height: 1.18;
  white-space: normal;
  overflow-wrap: anywhere;
  background: rgba(20,20,20,.92);
}

.combat-actions .choice-btn.combat-continue-choice {
  min-width: 98px;
  max-width: 118px;
  min-height: 34px;
  padding: 6px 10px;
  color: #fff2c8;
  font-size: .98em;
  font-weight: 900;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 211, 104, .24), transparent 58%),
    linear-gradient(180deg, rgba(92, 55, 22, .96), rgba(28, 19, 13, .98));
  border: 1px solid rgba(226, 160, 61, .66);
  filter: drop-shadow(0 0 6px rgba(226, 150, 48, .28));
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 171, .14),
    0 0 10px rgba(226, 150, 48, .18);
}

.combat-actions .choice-btn.combat-continue-choice:hover:not(:disabled),
.combat-actions .choice-btn.combat-continue-choice:focus-visible {
  color: #fff9e7;
  border-color: rgba(255, 205, 98, .9);
  filter: drop-shadow(0 0 10px rgba(255, 178, 64, .42));
}

.combat-actions .choice-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.combat-actions .choice-btn.danger-choice {
  color: #e7c7a4;
  border-color: rgba(184, 111, 45, .76);
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 137, 10, .18), transparent 58%),
    linear-gradient(180deg, rgba(78, 20, 18, .96), rgba(28, 8, 8, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 130, .1),
    inset 0 0 16px rgba(20, 0, 0, .68),
    0 0 0 1px rgba(201, 137, 10, .08),
    0 0 18px rgba(90, 20, 14, .32);
  font-weight: 700;
}

.combat-actions .choice-btn.danger-choice:hover:not(:disabled) {
  color: #ffe5bd;
  border-color: rgba(220, 145, 58, .95);
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 155, 34, .28), transparent 60%),
    linear-gradient(180deg, rgba(96, 24, 20, .98), rgba(36, 8, 8, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 218, 150, .14),
    inset 0 0 16px rgba(20, 0, 0, .64),
    0 0 0 1px rgba(201, 137, 10, .12),
    0 0 22px rgba(143, 50, 30, .42);
}

.combat-actions .choice-btn.bow-followup-choice {
  min-width: 132px;
  max-width: 168px;
  color: #fff3c0;
  border: 1px solid rgba(245, 190, 80, .78);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 213, 104, .34), transparent 62%),
    linear-gradient(180deg, rgba(88, 55, 16, .98), rgba(35, 19, 7, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 165, .18),
    0 0 0 1px rgba(255, 184, 65, .14),
    0 0 18px rgba(255, 158, 50, .34);
  transform: translateY(-1px);
}

.combat-actions .choice-btn.bow-followup-choice::after {
  content: "";
  position: absolute;
  inset: 4px 8px;
  border: 1px solid rgba(255, 230, 150, .32);
  pointer-events: none;
}

.combat-actions .choice-btn.bow-followup-choice:hover:not(:disabled) {
  color: #fffbe4;
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 184, .22),
    0 0 0 1px rgba(255, 201, 85, .22),
    0 0 24px rgba(255, 173, 58, .48);
}

.modal-content.combat-modal .combat-scene {
  order: initial;
}

.modal-content.combat-modal #modal-desc {
  order: initial;
}

.combat-banner-choice-toggle {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 24px;
  padding: 2px;
  border: 1px solid rgba(201, 145, 47, .38);
  border-radius: 5px;
  background: rgba(22, 18, 14, .92);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}

.combat-banner-choice-toggle.planned,
.combat-banner-badge.planned {
  border-color: var(--accent);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,218,122,.22), transparent 18px),
    linear-gradient(180deg, rgba(66, 44, 13, .98), rgba(25, 18, 9, .98));
  box-shadow: 0 0 12px rgba(201,145,47,.26), inset 0 0 10px rgba(201,145,47,.16);
}

.combat-banner-choice-toggle img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.combat-banner-choice-toggle span {
  color: #f4d183;
  font-size: .82em;
  font-weight: 700;
}

.combat-banner-choice-toggle:hover,
.combat-banner-choice-toggle:focus-visible {
  border-color: var(--accent);
  color: var(--text-bright);
}

.combat-banner-badge.changeable:hover,
.combat-banner-badge.changeable:focus-visible {
  border-color: var(--accent);
  color: #ffe0a0;
  box-shadow: 0 0 12px rgba(201,145,47,.22), inset 0 0 10px rgba(201,145,47,.12);
}

.wager-dice-panel {
  display: grid;
  gap: 12px;
  max-width: 520px;
}
.wager-dice-panel p {
  margin: 0;
}
.wager-face-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  gap: 8px;
}
.wager-face-btn {
  min-height: 40px;
  border: 1px solid rgba(201,145,47,.32);
  background: rgba(15, 13, 10, .86);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s, box-shadow .12s;
}
.wager-face-btn:hover {
  border-color: var(--accent);
  color: var(--text-bright);
}
.wager-face-btn.selected {
  border-color: var(--accent);
  color: var(--text-bright);
  background: rgba(201,145,47,.18);
  box-shadow: inset 0 0 0 1px rgba(201,145,47,.28), 0 0 12px rgba(201,145,47,.12);
}
.wager-dice-hint {
  color: var(--muted);
  font-size: .95em;
}

.modal-content.wager-modal-content {
  width: min(480px, calc(100vw - 36px));
  height: auto;
  min-height: 0;
  max-height: min(620px, calc(100vh - 44px));
  padding: 18px 20px;
}
.modal-content.wager-modal-content #modal-desc {
  flex: 0 1 auto;
  min-height: 0;
  overflow: visible;
  margin-bottom: 12px;
  white-space: normal;
}
.modal-content.wager-modal-content #modal-choices {
  flex: 0 0 auto;
  border-top: 1px solid rgba(201,145,47,.22);
  padding-top: 10px;
}
.modal-content.wager-modal-content .choice-btn {
  text-align: center;
}

/* ── Squad Select ────────────────────────── */
#squad-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.class-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 198px;
  font: inherit;
  background:
    linear-gradient(180deg, rgba(2, 2, 2, .18), rgba(2, 2, 2, .66) 78%, rgba(2, 2, 2, .82)),
    linear-gradient(90deg, rgba(4, 4, 4, .82), rgba(12, 10, 8, .48)),
    var(--class-battle-art, none) center / cover no-repeat,
    var(--surface2);
  color: inherit;
  border: 2px solid var(--border);
  padding: 16px 14px 20px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
  border-radius: 1px;
  overflow: hidden;
}
.class-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 210, 120, .09), transparent 32%, rgba(0, 0, 0, .58) 100%),
    radial-gradient(circle at 50% 20%, rgba(201, 145, 47, .13), transparent 48%);
  opacity: .72;
}
.class-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
.class-card.selected {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(32, 18, 6, .12), rgba(2, 2, 2, .58) 74%, rgba(2, 2, 2, .78)),
    linear-gradient(90deg, rgba(21, 13, 4, .68), rgba(6, 12, 8, .48)),
    var(--class-battle-art, none) center / cover no-repeat,
    #1c1308;
  box-shadow:
    0 0 0 1px rgba(201, 145, 47, .2),
    inset 0 0 24px rgba(201, 145, 47, .1);
}
.class-card .class-card-icon.class-avatar {
  box-shadow:
    inset 0 0 12px rgba(0,0,0,.5),
    0 0 12px rgba(201,145,47,.12),
    0 8px 18px rgba(0,0,0,.32);
}
.class-card > * {
  position: relative;
  z-index: 1;
}
.class-card-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 4px;
}
.class-card.class-warrior {
  background-size: auto, auto, cover, auto;
  background-position: center, center, 54% 36%, center;
}
.class-card.class-explorer {
  background-size: auto, auto, cover, auto;
  background-position: center, center, 58% 34%, center;
}
.class-card.class-scholar {
  background-size: auto, auto, cover, auto;
  background-position: center, center, 56% 34%, center;
}
.class-card.class-support {
  background-size: auto, auto, cover, auto;
  background-position: center, center, 56% 34%, center;
}
.class-card-icon { font-size: 1.8em; margin-bottom: 5px; }
.class-card-icon.class-avatar {
  display: block;
  width: 66px;
  height: 66px;
  margin: 0 auto 10px;
  border: 1px solid rgba(201,145,47,.42);
  border-radius: 10px;
  overflow: hidden;
  background: #080808;
  box-shadow: inset 0 0 12px rgba(0,0,0,.5), 0 0 12px rgba(201,145,47,.12);
}
.class-card-icon.class-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.class-card-name {
  font-size: 1em;
  color: #fff4d5;
  margin-bottom: 4px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .86);
}
.class-card-desc {
  font-size: .88em;
  color: rgba(226, 215, 188, .86);
  line-height: 1.5;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .82);
}
.class-card-stat {
  margin-top: 8px;
  font-size: .85em;
  color: #88ad77;
  font-weight: 650;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .82);
}

.library-pick-section {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.library-pick-section h3 {
  font-size: 1em;
  color: var(--accent);
  margin-bottom: 4px;
}
.library-pick-section p {
  color: var(--text-dim);
  font-size: .88em;
  margin-bottom: 8px;
}
.library-pick-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.library-pick-card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
}
.library-pick-card:hover,
.library-pick-card.selected {
  border-color: var(--accent);
}
.library-pick-card span,
.library-pick-card small {
  display: block;
}
.library-carrier-avatar {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: 0 6px 0 0;
  vertical-align: middle;
  border: 1px solid rgba(201,145,47,.35);
  border-radius: 6px;
  overflow: hidden;
  background: #080808;
}
.library-carrier-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.library-pick-card small {
  color: var(--text-dim);
  font-size: .85em;
  line-height: 1.4;
  margin-top: 3px;
}

.library-start-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 9px 10px;
  color: var(--text);
  border: 1px solid rgba(112,178,166,.32);
  background: rgba(112,178,166,.08);
  font-size: .9em;
}

.library-start-summary.hidden {
  display: none;
}

.library-start-summary span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.library-start-summary .warning {
  color: #e0a020;
}

.library-start-button {
  width: min(260px, 100%);
  margin-top: 10px;
}

.modal-content.library-select-modal-content {
  width: min(920px, calc(100vw - 28px));
  max-width: 920px;
  max-height: min(780px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
}

.library-select-modal-content h2 {
  margin-bottom: 14px;
}

#library-select-content {
  min-height: 0;
  overflow: hidden;
}

.library-select-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: 14px;
  min-height: 0;
}

.library-select-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(201,145,47,.24);
  background: rgba(0,0,0,.18);
}

.library-select-heading {
  flex: 0 0 auto;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(201,145,47,.18);
}

.library-select-heading h3 {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 1em;
}

.library-select-heading p {
  margin: 0;
  color: var(--text-dim);
  font-size: .88em;
  line-height: 1.45;
}

.library-select-relic-list,
.library-select-carrier-list {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding: 12px;
}

.library-select-relic-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.library-select-relic-card,
.library-select-carrier-card {
  width: 100%;
  min-width: 0;
  color: var(--text);
  border: 1px solid rgba(201,145,47,.22);
  background:
    linear-gradient(180deg, rgba(39, 34, 27, .88), rgba(13, 13, 12, .94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}

.library-select-relic-card {
  display: grid;
  gap: 6px;
  padding: 10px 11px;
}

.library-select-relic-card:hover,
.library-select-relic-card.selected,
.library-select-carrier-card:hover,
.library-select-carrier-card.selected {
  color: var(--text-bright);
  border-color: rgba(226, 167, 62, .85);
  background:
    radial-gradient(circle at 50% 0%, rgba(201,145,47,.18), transparent 52%),
    linear-gradient(180deg, rgba(48, 41, 31, .98), rgba(18, 17, 15, .98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 14px rgba(201,145,47,.15);
}

.library-select-relic-card.selected,
.library-select-carrier-card.selected {
  border-color: rgba(112,178,166,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 16px rgba(112,178,166,.22);
}

.library-select-relic-name {
  color: var(--text-bright);
  font-weight: 800;
}

.library-select-relic-desc {
  color: var(--text-dim);
  font-size: .84em;
  line-height: 1.42;
}

.library-selected-relic {
  display: grid;
  gap: 6px;
  margin: 12px 12px 0;
  padding: 10px 11px;
  color: var(--text);
  border: 1px solid rgba(112,178,166,.3);
  background: rgba(112,178,166,.08);
}

.library-selected-relic strong {
  color: var(--text-bright);
}

.library-selected-relic span {
  color: var(--text-dim);
  font-size: .86em;
  line-height: 1.42;
}

.library-select-carrier-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
}

.library-select-carrier-card strong,
.library-select-carrier-card small {
  display: block;
}

.library-select-carrier-card strong {
  color: var(--text-bright);
}

.library-select-carrier-card small {
  color: var(--text-dim);
  font-size: .83em;
  margin-top: 2px;
}

.library-select-empty {
  color: var(--text-dim);
  border: 1px dashed rgba(201,145,47,.24);
  padding: 14px;
  line-height: 1.5;
}

.library-select-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* ── Notes Modal ─────────────────────────── */
#notes-content {
  max-height: 60vh;
  overflow-y: auto;
  font-size: 1.06em;
}

#notes-modal .modal-content.wide {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.70) 50%, rgba(0,0,0,.44) 100%),
    radial-gradient(circle at 58% 42%, rgba(201,145,47,.16), transparent 46%),
    url("assets/ui/guide-notes-book.png") 62% 44% / cover no-repeat,
    rgba(0,0,0,.38);
}

#notes-modal .modal-content.wide::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.72)),
    radial-gradient(circle at 72% 38%, rgba(255,189,76,.10), transparent 44%);
}

#notes-modal .modal-content.wide > * {
  position: relative;
  z-index: 1;
}

.note-entry {
  margin-bottom: 14px;
  padding: 10px 12px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.64), rgba(0,0,0,.38)),
    rgba(14, 13, 10, .34);
  border: 1px solid rgba(201,145,47,.16);
  border-left: 2px solid var(--accent-dim);
  box-shadow: inset 0 0 18px rgba(0,0,0,.24);
}
.note-title { color: #4a9a9a; font-size: 1.08em; margin-bottom: 6px; font-weight: 600; }
.note-text  { font-size: 1em; color: var(--text-dim); line-height: 1.7; font-style: italic; }
.note-hint  { margin-top: 5px; font-size: .94em; color: #6a4a1a; }

/* 分頁 */
.notes-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.notes-tab {
  flex: 1; padding: 7px 11px; font-size: .95em;
  background: rgba(14, 13, 10, .48); border: 1px solid rgba(201,145,47,.16);
  border-radius: 5px; color: var(--text-dim); cursor: pointer;
}
.notes-tab.active { background: rgba(200,137,10,.18); border-color: var(--accent-dim); color: var(--accent); }
.notes-tab:hover:not(.active) { border-color: #555; color: var(--text); }
.notes-area { min-height: 60px; }

.notes-empty { font-size: .98em; color: var(--text-dim); margin: 8px 0; }
.notes-back-btn { margin-bottom: 10px; font-size: .92em; padding: 5px 11px; }

/* 遊玩指南 */
.tutorial-page {
  position: relative;
  min-height: 0;
}

.tutorial-top-spacer {
  height: 24px;
}

.tutorial-progress {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 0 6px;
}

.tutorial-progress span {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: rgba(201, 145, 47, .2);
}

.tutorial-progress span.active {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(201,145,47,.28);
}

.tutorial-layout {
  display: grid;
  grid-template-columns: minmax(92px, 132px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.tutorial-art {
  min-height: 118px;
  align-self: start;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201,145,47,.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 45%, rgba(201,145,47,.12), transparent 56%),
    rgba(0,0,0,.22);
  box-shadow: inset 0 0 22px rgba(0,0,0,.36);
}

.tutorial-art-icon {
  font-size: 3.1rem;
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(201,145,47,.26));
}

.tutorial-art-image {
  width: min(88px, 76%);
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(201,145,47,.28);
  box-shadow: 0 0 18px rgba(0,0,0,.34);
}

.tutorial-art-image-explore {
  width: min(112px, 88%);
  object-fit: contain;
  background: rgba(0, 0, 0, .18);
}

.tutorial-copy {
  color: #dccfb7;
  display: grid;
  align-content: start;
  gap: 6px;
}

.tutorial-kicker {
  margin-bottom: 0;
  color: var(--accent);
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: .06em;
}

.tutorial-copy p,
.guide-note-body {
  margin: 0;
  line-height: 1.46;
}

.tutorial-points,
.guide-note-points {
  display: grid;
  gap: 5px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.tutorial-points li,
.guide-note-points li {
  position: relative;
  padding-left: 18px;
  color: #c9b997;
  line-height: 1.3;
}

.tutorial-points li::before,
.guide-note-points li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: .05em;
  color: var(--accent);
  font-size: .72em;
}

.tutorial-dark-grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 9px;
  margin: 0;
}

.tutorial-art:has(.tutorial-dark-grid) {
  min-height: 156px;
  padding: 12px 0;
}

.guide-dark-grid {
  display: grid;
  grid-template-columns: repeat(3, 42px);
  justify-content: start;
  gap: 12px;
  width: max-content;
  margin: 10px 0 12px;
}

.guide-dark-grid .tutorial-dark-token {
  width: 42px;
  height: 42px;
}

.guide-dark-grid .tutorial-dark-token img {
  width: 34px;
  height: 34px;
}

.guide-dark-grid .tutorial-dark-token span {
  top: -3px;
  right: -7px;
}

.tutorial-dark-token {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin: auto;
  --monster-glow-a: rgba(95, 191, 106, .8);
  --monster-glow-b: rgba(95, 191, 106, .42);
  filter:
    drop-shadow(0 0 5px var(--monster-glow-a))
    drop-shadow(0 0 12px var(--monster-glow-b));
}

.tutorial-dark-token img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.tutorial-dark-token span {
  position: absolute;
  top: -1px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #fff4dd;
  background: rgba(0,0,0,.78);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .78rem;
  font-weight: 800;
}

@media (max-width: 680px) {
  .tutorial-layout {
    grid-template-columns: 1fr;
  }

  .modal-content.tutorial-backdrop-modal.event-backdrop-modal::after {
    background:
      linear-gradient(180deg, rgba(4, 3, 2, .40) 0%, rgba(4, 3, 2, .56) 38%, rgba(4, 3, 2, .92) 100%);
  }

  .modal-content.tutorial-backdrop-modal.event-backdrop-modal:has(.tutorial-backdrop-dark-avatar)::after {
    background:
      linear-gradient(180deg, rgba(4, 3, 2, .20) 0%, rgba(4, 3, 2, .38) 42%, rgba(4, 3, 2, .94) 100%);
  }

  .modal-content.tutorial-backdrop-modal .event-backdrop-img.tutorial-backdrop-explore {
    background-position: 56% 28%;
  }

  .modal-content.tutorial-backdrop-modal .event-backdrop-img.tutorial-backdrop-relics {
    background-position: 54% 28%;
  }

  .modal-content.tutorial-backdrop-modal .event-backdrop-img.tutorial-backdrop-equipment {
    background-position: 52% 24%;
  }

  .modal-content.tutorial-backdrop-modal .event-backdrop-img.tutorial-backdrop-dark-avatar {
    background-position: 15% 20%;
  }

  .modal-content.tutorial-backdrop-modal .event-backdrop-img.tutorial-backdrop-notes {
    background-position: 50% 24%;
  }

  .modal-content.event-backdrop-modal:has(.dark-avatar-chase-backdrop) {
    min-height: min(620px, calc(100dvh - 28px));
  }

  .modal-content.event-backdrop-modal .event-backdrop-img.dark-avatar-chase-backdrop {
    background-position: 50% 20%;
  }

  .modal-content.event-backdrop-modal:has(.dark-avatar-chase-backdrop)::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .34) 34%, rgba(0, 0, 0, .9) 100%),
      radial-gradient(circle at 50% 22%, rgba(0, 0, 0, .02), rgba(0, 0, 0, .42) 58%, rgba(0, 0, 0, .78) 100%);
  }

  .modal-content.event-backdrop-modal:has(.dark-avatar-chase-backdrop) #modal-desc {
    max-width: none;
    margin-top: auto;
  }

  .tutorial-page-event .tutorial-layout {
    min-height: 340px;
    align-items: end;
  }

  .tutorial-page-event .tutorial-copy {
    width: 100%;
    padding: 0 2px 10px;
  }

  .tutorial-page-dark-avatar .tutorial-layout {
    min-height: 372px;
  }

  .tutorial-page-dark-avatar .tutorial-copy {
    justify-self: stretch;
    width: 100%;
    padding-top: 42px;
    padding-bottom: 4px;
  }

  .tutorial-page-dark-avatar .tutorial-art {
    left: 148px;
    top: 70px;
    transform: none;
    width: auto;
  }

  .tutorial-page-dark-avatar .tutorial-dark-grid {
    grid-template-columns: repeat(3, 38px);
    gap: 8px;
  }

  .tutorial-page-dark-avatar .tutorial-dark-token {
    width: 38px;
    height: 38px;
  }

  .tutorial-page-dark-avatar .tutorial-dark-token img {
    width: 31px;
    height: 31px;
  }

  .tutorial-page-dark-avatar .tutorial-dark-token span {
    top: -4px;
    right: -8px;
    width: 19px;
    height: 19px;
    font-size: .78rem;
  }

  .tutorial-art {
    min-height: 86px;
  }

  .tutorial-art-image-explore {
    width: min(132px, 72%);
  }

  .tutorial-dark-grid {
    grid-template-columns: repeat(3, 42px);
    justify-content: center;
    gap: 14px;
  }

  .tutorial-art:has(.tutorial-dark-grid) {
    min-height: 74px;
    padding: 9px 0;
  }

  .guide-dark-grid {
    grid-template-columns: repeat(3, 42px);
  }
}

.tutorial-dark-token.timer-yellow {
  --monster-glow-a: rgba(237, 190, 80, .9);
  --monster-glow-b: rgba(237, 190, 80, .52);
  width: 44px;
  height: 44px;
}

.tutorial-dark-token.timer-yellow img {
  width: 35px;
  height: 35px;
}

.tutorial-dark-token.timer-red,
.tutorial-dark-token.timer-danger {
  --monster-glow-a: rgba(255, 80, 96, .96);
  --monster-glow-b: rgba(255, 80, 96, .6);
  width: 52px;
  height: 52px;
  animation: darkMonsterGuideAlert .95s ease-in-out infinite;
}

.tutorial-dark-token.timer-red img,
.tutorial-dark-token.timer-danger img {
  width: 43px;
  height: 43px;
  filter: saturate(1.8) hue-rotate(-10deg) brightness(1.18) contrast(1.06);
}

.modal-content.dark-avatar-intro-modal {
  width: min(900px, calc(100vw - 32px));
  max-width: 900px;
  align-items: stretch;
}

.modal-content.dark-avatar-intro-modal #modal-desc {
  display: block;
  align-self: stretch;
  flex: 1 1 auto;
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 0;
  overflow-y: auto;
}

.modal-content.dark-avatar-intro-modal .event-illustration-img.dark-avatar-intro-art {
  right: 56px;
  bottom: 88px;
  width: min(46%, 380px);
  max-height: 280px;
  opacity: .96;
  filter:
    drop-shadow(0 18px 24px rgba(0, 0, 0, .62))
    drop-shadow(0 0 28px rgba(125, 68, 210, .34));
}

.modal-content.dark-avatar-intro-modal .event-illustration-img.dark-avatar-intro-art-hunt {
  right: 42px;
  bottom: 76px;
  width: min(50%, 420px);
  max-height: 310px;
}

.dark-avatar-guide {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  width: 100%;
  inline-size: 100%;
  min-width: 0;
  min-height: 0;
  white-space: normal;
  box-sizing: border-box;
}

.dark-avatar-guide-page-combat,
.dark-avatar-guide-page-hunt {
  display: block;
  min-height: 0;
  padding-top: 0;
  padding-right: min(42%, 340px);
}

.dark-avatar-guide-page {
  position: absolute;
  top: 0;
  right: 2px;
  color: rgba(232, 212, 171, .66);
  font-size: .84rem;
  letter-spacing: 0;
}

.dark-avatar-guide-visual {
  min-height: 92px;
  display: grid;
  place-items: center;
  width: 100%;
}

.dark-avatar-guide-page-combat .dark-avatar-guide-visual,
.dark-avatar-guide-page-hunt .dark-avatar-guide-visual {
  display: none;
}

.dark-avatar-guide-copy {
  grid-column: 1 / -1;
  justify-self: stretch;
  display: grid;
  gap: 10px;
  padding-right: 8px;
  width: 100%;
  inline-size: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

.dark-avatar-guide-copy p {
  display: block;
  width: 100%;
  margin: 0;
  color: #efe2c8;
  line-height: 1.62;
  word-break: normal;
  overflow-wrap: break-word;
}

.dark-avatar-guide-page-tokens .dark-avatar-guide-copy p {
  min-width: min(620px, 100%);
}

.dark-avatar-guide-page-combat .dark-avatar-guide-copy,
.dark-avatar-guide-page-hunt .dark-avatar-guide-copy {
  max-width: 560px;
}

.dark-avatar-guide-tokens {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding-top: 12px;
}

.dark-avatar-guide-token {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #dcc493;
  font-size: .86rem;
  text-align: center;
  line-height: 1.25;
}

.dark-avatar-guide-token .tutorial-dark-token {
  width: 52px;
  height: 52px;
}

.dark-avatar-guide-token .tutorial-dark-token img {
  width: 42px;
  height: 42px;
}

.dark-avatar-guide-token .tutorial-dark-token span {
  top: -4px;
  right: -7px;
}

.dark-avatar-guide-art {
  position: relative;
  width: 100%;
  min-height: 216px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.dark-avatar-guide-art::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112, 48, 180, .26), transparent 68%);
  filter: blur(8px);
}

.dark-avatar-guide-art img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 235px;
  object-fit: contain;
  filter:
    drop-shadow(0 16px 22px rgba(0, 0, 0, .62))
    drop-shadow(0 0 24px rgba(145, 70, 220, .3));
}

.dark-avatar-guide-art.combat img {
  max-height: 245px;
}

.dark-avatar-guide-art.hunt img {
  max-width: 112%;
  max-height: 255px;
}

@media (max-width: 680px) {
  .modal-content.dark-avatar-intro-modal {
    width: 100%;
    max-width: none;
  }

  .modal-content.dark-avatar-intro-modal .event-illustration-img.dark-avatar-intro-art,
  .modal-content.dark-avatar-intro-modal .event-illustration-img.dark-avatar-intro-art-hunt {
    position: absolute;
    top: 68px;
    right: 50%;
    bottom: auto;
    transform: translateX(50%);
    width: min(78%, 280px);
    max-height: 148px;
    margin: 0;
    z-index: 0;
  }

  .dark-avatar-guide-page-tokens .dark-avatar-guide-copy p {
    min-width: 0;
  }

  .dark-avatar-guide {
    grid-template-columns: 1fr;
    gap: 10px;
    align-content: start;
    min-height: 0;
  }

  .dark-avatar-guide-page-combat,
  .dark-avatar-guide-page-hunt {
    display: grid;
    padding-top: 132px;
    padding-right: 0;
    min-height: 0;
  }

  .dark-avatar-guide-page {
    position: static;
    justify-self: end;
    margin-bottom: -4px;
  }

  .dark-avatar-guide-visual {
    min-height: 116px;
  }

  .dark-avatar-guide-tokens {
    grid-template-columns: repeat(3, minmax(54px, 1fr));
    gap: 8px;
  }

  .dark-avatar-guide-token {
    gap: 5px;
    font-size: .78rem;
  }

  .dark-avatar-guide-token .tutorial-dark-token {
    width: 44px;
    height: 44px;
  }

  .dark-avatar-guide-token .tutorial-dark-token img {
    width: 36px;
    height: 36px;
  }

  .dark-avatar-guide-art {
    min-height: 126px;
  }

  .dark-avatar-guide-art img,
  .dark-avatar-guide-art.combat img,
  .dark-avatar-guide-art.hunt img {
    max-height: 156px;
  }

  .dark-avatar-guide-copy {
    gap: 8px;
    padding-right: 0;
  }

  .dark-avatar-guide-copy p {
    line-height: 1.52;
  }
}

.guide-note-list {
  display: grid;
  gap: 12px;
}

.guide-note-entry {
  position: relative;
  overflow: hidden;
  min-height: 168px;
  padding: 18px 20px 16px;
  border: 1px solid rgba(201,145,47,.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(201,145,47,.08), rgba(0,0,0,0) 30%),
    rgba(0,0,0,.24);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .24);
}

.guide-note-entry.guide-note-has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--guide-note-bg) var(--guide-note-card-pos, 50% 42%) / cover no-repeat;
  opacity: .42;
  filter: saturate(1.08) contrast(1.05) brightness(.86);
  transform: scale(1.02);
}

.guide-note-entry.guide-note-has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.74) 46%, rgba(0,0,0,.34) 78%, rgba(0,0,0,.62) 100%),
    radial-gradient(circle at 70% 40%, rgba(201,145,47,.16), rgba(0,0,0,0) 48%);
}

.guide-note-entry > * {
  position: relative;
  z-index: 1;
}

.guide-note-head {
  display: block;
  margin-bottom: 13px;
}

.guide-note-title-block {
  min-width: 0;
  max-width: 620px;
  padding: 4px 0 6px 12px;
  border-left: 2px solid rgba(201,145,47,.62);
  background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,0));
  border-radius: 6px;
}

.guide-note-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201,145,47,.24);
  border-radius: 8px;
  background: rgba(0,0,0,.24);
  font-size: 1.35em;
}

.guide-note-head h4 {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-serif);
  text-shadow: 0 2px 8px rgba(0,0,0,.84);
}

.guide-note-head p {
  margin: 2px 0 0;
  color: var(--text-dim);
  font-size: .9em;
  text-shadow: 0 2px 7px rgba(0,0,0,.8);
}

.guide-note-tutorial-backdrop-explore {
  --guide-note-card-pos: 70% 42%;
}

.guide-note-tutorial-backdrop-relics {
  --guide-note-card-pos: 68% 42%;
}

.guide-note-tutorial-backdrop-equipment {
  --guide-note-card-pos: 68% 40%;
}

.guide-note-tutorial-backdrop-dark-avatar {
  --guide-note-card-pos: 28% 36%;
}

.guide-note-tutorial-backdrop-notes {
  --guide-note-card-pos: 70% 44%;
}

@media (max-width: 680px) {
  #notes-modal .modal-content.wide {
    background:
      linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.74) 60%, rgba(0,0,0,.50) 100%),
      radial-gradient(circle at 66% 38%, rgba(201,145,47,.12), transparent 42%),
      url("assets/ui/guide-notes-book.png") 58% 38% / cover no-repeat,
      rgba(0,0,0,.38);
  }

  .guide-note-entry {
    min-height: 0;
    padding: 14px 14px 13px;
  }

  .guide-note-entry.guide-note-has-bg::before {
    opacity: .34;
  }

  .guide-note-entry.guide-note-has-bg::after {
    background:
      linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 58%, rgba(0,0,0,.54) 100%),
      radial-gradient(circle at 78% 36%, rgba(201,145,47,.12), rgba(0,0,0,0) 48%);
  }

  .guide-note-head {
    margin-bottom: 10px;
  }

  .guide-note-title-block {
    padding-left: 10px;
  }

  .resonance-note-icon {
    min-height: 116px;
    padding: 14px 8px 12px;
  }

  .resonance-note-img {
    width: 50px;
    height: 50px;
  }
}

/* 聖物筆記格子 */
.relic-note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.relic-note-icon {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 8px 4px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.26)),
    rgba(18, 14, 8, .22);
  border: 1px solid rgba(201,145,47,.18);
  border-radius: 7px; cursor: pointer; text-align: center;
  box-shadow: inset 0 0 14px rgba(0,0,0,.18);
}
.relic-note-icon:hover {
  border-color: var(--accent-dim);
  background:
    linear-gradient(180deg, rgba(200,137,10,.12), rgba(0,0,0,.28)),
    rgba(18, 14, 8, .26);
}
.relic-note-icon.locked {
  opacity: .55;
  filter: grayscale(.35);
}
.relic-note-icon.locked:hover {
  border-color: rgba(201,145,47,.18);
  background:
    linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.26)),
    rgba(18, 14, 8, .22);
}
.relic-note-emoji { font-size: 1.5em; line-height: 1; }
.relic-note-emoji .equipment-inline-icon {
  width: 2.2em;
  height: 2.2em;
}
.resonance-note-icon .relic-note-emoji .equipment-inline-icon {
  width: 1.55em;
  height: 1.55em;
}

.resonance-note-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 0 5px var(--res-primary, rgba(230, 54, 42, .42)))
    drop-shadow(0 0 10px var(--res-shadow, rgba(130, 0, 0, .28)));
}

.relic-note-name  { font-size: .82em; color: var(--text); line-height: 1.25; }
.relic-note-count { font-size: .76em; color: var(--text-dim); }
.relic-resonance-section {
  margin-top: 16px;
  font-size: 1.14em;
}
.resonance-note-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.resonance-note-icon {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  padding: 16px 10px 14px;
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  align-content: center;
  gap: 7px;
  font-family: var(--font-sans);
  color: inherit;
}
.resonance-note-icon.has-resonance-img::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 74px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 44%,
      var(--res-primary, rgba(230, 54, 42, .42)) 0%,
      var(--res-secondary, rgba(255, 178, 112, .28)) 38%,
      rgba(0, 0, 0, 0) 74%);
  filter: blur(7px);
  opacity: .52;
  pointer-events: none;
}
.resonance-note-icon .relic-note-emoji {
  position: relative;
  z-index: 1;
  font-size: 1.65em;
  display: grid;
  place-items: center;
  min-height: 56px;
}
.resonance-note-icon .relic-note-name {
  position: relative;
  z-index: 1;
}

.resonance-note-icon .relic-note-emoji:has(.resonance-note-img) {
  min-height: 58px;
}

.resonance-detail-title-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 54px;
  flex: 0 0 auto;
  isolation: isolate;
}
.resonance-detail-title-icon::before {
  content: "";
  position: absolute;
  inset: 3px 2px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 48%,
      var(--res-primary, rgba(230, 54, 42, .42)) 0%,
      var(--res-secondary, rgba(255, 178, 112, .26)) 42%,
      rgba(0, 0, 0, 0) 76%);
  filter: blur(7px);
  opacity: .68;
  z-index: 0;
}
.resonance-detail-title-img {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 4px var(--res-primary, rgba(230, 54, 42, .28)))
    drop-shadow(0 0 8px var(--res-shadow, rgba(130, 0, 0, .18)));
}

.relic-lore-title.has-resonance-img {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 6px 0 8px;
}

.resonance-note-icon .relic-note-name {
  font-size: 1em;
  line-height: 1.35;
  font-weight: 700;
  width: 100%;
  max-width: 10em;
  text-align: center;
}
.resonance-detail-card {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 16px 18px;
  border: 1px solid rgba(112,178,166,.35);
  border-radius: 6px;
  background: rgba(112,178,166,.08);
}
.resonance-detail-kicker {
  color: var(--accent);
  font-size: 1.08em;
  line-height: 1.45;
}
.resonance-detail-effect {
  color: var(--text);
  font-size: 1.18em;
  line-height: 1.6;
}
.resonance-detail-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-dim);
  font-size: 1.08em;
  line-height: 1.55;
}
.resonance-subtitle {
  margin: 15px 0 8px;
  color: #70b2a6;
  font-weight: 600;
  font-size: 1.18em;
}
.resonance-relic-pair,
.resonance-related-rules {
  display: grid;
  gap: 10px;
}
.resonance-relic-pair {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.resonance-relic-card,
.resonance-rule-card {
  padding: 15px 17px;
  border: 1px solid rgba(200,137,10,.24);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
}
.resonance-relic-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.resonance-relic-card .equipment-note-icon {
  font-size: 1.45em;
}
.resonance-relic-card .equipment-note-name {
  font-size: 1.16em;
}
.resonance-relic-card .equipment-note-tag {
  font-size: .9em;
}
.resonance-relic-card .equipment-note-desc {
  font-size: 1.08em;
  line-height: 1.6;
}
.resonance-rule-card {
  display: grid;
  gap: 4px;
}
.resonance-rule-card strong {
  color: var(--accent);
  font-size: 1.12em;
}
.resonance-rule-card span {
  color: var(--text-dim);
  font-size: 1.06em;
  line-height: 1.6;
}

/* 聖物詳情 */
.relic-lore-title { font-size: 1.05em; font-weight: 600; color: #70b2a6; margin-bottom: 10px; }
.relic-note-effect {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(112,178,166,.35);
  background: rgba(112,178,166,.08);
  border-radius: 6px;
  color: var(--text);
  line-height: 1.55;
}
.relic-note-effect strong { color: #70b2a6; font-size: .96em; }
.relic-note-effect span { color: var(--text-dim); font-size: 1em; }
.relic-note-fused-effect {
  display: grid;
  gap: 3px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(112,178,166,.22);
}
.relic-note-fused-effect b {
  color: var(--accent);
  font-size: .94em;
}
.equipment-note-group {
  margin-bottom: 12px;
}
.equipment-note-title {
  margin: 14px 0 9px;
  padding: 9px 11px;
  border: 1px solid rgba(112,178,166,.28);
  border-left: 3px solid #70b2a6;
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(18, 50, 45, .54), rgba(200,137,10,.08)),
    rgba(0,0,0,.24);
  color: #70b2a6;
  font-size: 1.08em;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.equipment-note-title::-webkit-details-marker { display: none; }
.equipment-note-title::before {
  content: '▾';
  color: var(--accent);
  font-size: .95em;
}
.equipment-note-group:not([open]) .equipment-note-title::before {
  content: '▸';
}
.equipment-note-title-text {
  letter-spacing: .03em;
}
.equipment-note-title-text em {
  margin-left: 3px;
  color: var(--text-dim);
  font-size: .86em;
  font-weight: 400;
  font-style: normal;
}
.equipment-note-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.equipment-note-entry {
  padding: 10px 12px;
  border: 1px solid rgba(200,137,10,.24);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.30)),
    rgba(18, 14, 8, .22);
  box-shadow: inset 0 0 18px rgba(0,0,0,.20);
}
.equipment-note-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.equipment-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65em;
  font-size: 1.25em;
  line-height: 1;
}
.equipment-note-img {
  width: 2.15em;
  height: 2.15em;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
.equipment-note-name { color: var(--text); font-weight: 600; font-size: 1.03em; }
.equipment-note-tag {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid rgba(112,178,166,.35);
  border-radius: 999px;
  color: #70b2a6;
  font-size: .82em;
}
.equipment-note-desc {
  color: var(--text-dim);
  font-size: 1em;
  line-height: 1.55;
}
.relic-lore-list  { display: flex; flex-direction: column; gap: 7px; }
.relic-lore-entry { display: flex; gap: 8px; align-items: flex-start; }
.relic-lore-num   { flex-shrink: 0; font-size: .88em; color: var(--accent); font-weight: 600; padding-top: 2px; min-width: 16px; }
.relic-lore-text  { font-size: 1em; color: var(--text-dim); line-height: 1.6; font-style: italic; }
.relic-lore-text.unknown { color: #444; font-style: normal; letter-spacing: .1em; }
.relic-resonance-detail {
  margin-top: 6px;
  font-style: normal;
}
.relic-resonance-detail summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 1em;
  user-select: none;
}
.relic-resonance-detail summary:hover {
  color: var(--text-bright);
}
.relic-resonance-detail ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--text-dim);
  line-height: 1.5;
}
.relic-resonance-detail li {
  margin: 2px 0;
}

/* 地形情報 */
.terrain-note-entry {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 10px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.34)),
    rgba(12, 18, 12, .24);
  border: 1px solid rgba(90, 140, 90, .18);
  border-left: 2px solid rgba(90, 140, 90, .62);
  border-radius: 0 6px 6px 0;
  box-shadow: inset 0 0 18px rgba(0,0,0,.20);
}
.terrain-note-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.terrain-note-image {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 10px rgba(62, 126, 78, .34));
}
.terrain-note-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  font-size: 2.3em;
  line-height: 1;
}

.terrain-note-plain .terrain-note-icon {
  position: relative;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(236, 219, 180, .32);
  border-radius: 50%;
  color: rgba(236, 219, 180, .92);
  background:
    radial-gradient(circle at 50% 50%, rgba(236,219,180,.14), transparent 46%),
    linear-gradient(135deg, rgba(0,0,0,.42), rgba(255,255,255,.035));
  box-shadow:
    inset 0 0 16px rgba(0,0,0,.32),
    0 0 14px rgba(236,219,180,.10);
  font-size: 1.9em;
}

.terrain-note-plain .terrain-note-icon::before,
.terrain-note-plain .terrain-note-icon::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(236, 219, 180, .32);
  transform: rotate(45deg);
}

.terrain-note-plain .terrain-note-icon::after {
  inset: 21px;
  border-color: rgba(236, 219, 180, .22);
}
.terrain-note-name {
  color: var(--text-bright);
  font-size: 1em;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.terrain-note-body { min-width: 0; }
.terrain-note-desc   { font-size: .96em; color: var(--text-dim); line-height: 1.55; margin-bottom: 7px; }
.terrain-note-tags   { display: flex; flex-wrap: wrap; gap: 4px; }
.terrain-tag {
  font-size: .8em; padding: 2px 7px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; color: #aaa;
}

#library-section {
  margin-top: 16px;
  padding: 10px 12px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.34)),
    rgba(22, 10, 28, .22);
  border: 1px solid rgba(140, 82, 165, .18);
  border-left: 2px solid #4a1a5a;
}
.library-relic {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: .92em;
  border-bottom: 1px solid var(--border);
}
.library-relic:last-child { border-bottom: none; }

/* ── Game Over Screen ────────────────────── */
#gameover-screen {
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at 50% 40%, #0f080f 0%, #0d0d0d 65%);
}
#gameover-title  { font-family: var(--font-serif); font-size: 2em; color: var(--text-bright); margin-bottom: 12px; }
#gameover-desc   { color: var(--text-dim); margin-bottom: 20px; font-size: 1em; line-height: 1.8; white-space: pre-wrap; text-align: center; max-width: 460px; }
#gameover-results { margin-bottom: 24px; font-size: .95em; color: var(--text); line-height: 2.2; text-align: center; }

.gameover-result-line {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

#gameover-screen.gameover-failure {
  justify-content: center;
  align-items: center;
  padding: 0 18px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.08) 48%, rgba(0,0,0,.78) 100%),
    url("assets/game-over-bg.png") center / cover no-repeat,
    #020102;
}

#gameover-screen.gameover-failure .title-card {
  width: min(720px, calc(100vw - 28px));
  margin-top: clamp(290px, 50vh, 520px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

#gameover-screen.gameover-failure #gameover-title {
  margin-bottom: 4px;
  color: #ffd0c4;
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  text-shadow: 0 0 18px rgba(255, 66, 58, .6), 0 2px 8px rgba(0,0,0,.9);
}

#gameover-screen.gameover-failure #gameover-desc {
  max-width: none;
  margin: 0 auto 8px;
  color: #e7beb6;
  text-shadow: 0 2px 8px rgba(0,0,0,.95);
}

#gameover-screen.gameover-failure #gameover-results {
  margin: 0 auto 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #d8c4bd;
  text-shadow: 0 2px 8px rgba(0,0,0,.95);
}

#gameover-screen.gameover-failure .gameover-result-line {
  gap: 28px;
}

#gameover-screen.gameover-failure #btn-restart {
  box-shadow: 0 0 18px rgba(180, 44, 36, .42), inset 0 0 14px rgba(255, 92, 74, .12);
}

.gameover-intro {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #020102;
  pointer-events: none;
}

.gameover-intro.active {
  display: flex;
  animation: gameover-red-flash 1.05s steps(2, end) 1;
}

.gameover-intro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035);
  filter: brightness(.7) saturate(1.15);
  animation: gameover-image-in 1.2s ease-out forwards;
}

.gameover-intro.fade-image img {
  animation: gameover-image-out 1.35s ease-in forwards;
}

.gameover-intro-red {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 38, 38, .5), transparent 34%),
    rgba(120, 0, 0, .35);
  mix-blend-mode: screen;
  opacity: 0;
  animation: gameover-red-pulse 1.05s ease-out forwards;
}

@keyframes gameover-red-flash {
  0%, 18%, 42%, 68% { background: #2a0303; }
  9%, 30%, 55%, 100% { background: #020102; }
}

@keyframes gameover-red-pulse {
  0% { opacity: 0; }
  12% { opacity: 1; }
  28% { opacity: .2; }
  46% { opacity: .92; }
  72% { opacity: .32; }
  100% { opacity: 0; }
}

@keyframes gameover-image-in {
  0% { opacity: 0; transform: scale(1.08); filter: brightness(.45) saturate(1.4); }
  36% { opacity: .96; filter: brightness(.9) saturate(1.2); }
  100% { opacity: 1; transform: scale(1); filter: brightness(.78) saturate(1.14); }
}

@keyframes gameover-image-out {
  0% { opacity: 1; transform: scale(1); filter: brightness(.78) saturate(1.14); }
  100% { opacity: 0; transform: scale(1.045); filter: brightness(.25) saturate(.9); }
}

/* ── Day Transition Overlay ──────────────── */
.day-transition-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 45%, rgba(92, 38, 46, .2), transparent 29%),
    radial-gradient(ellipse at 50% 56%, rgba(16, 10, 24, .42), transparent 58%),
    linear-gradient(180deg, rgba(5, 4, 4, .92), rgba(13, 10, 9, .9) 46%, rgba(4, 3, 3, .94));
  z-index: 2400;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(2px) brightness(.45) saturate(.82);
  -webkit-backdrop-filter: blur(2px) brightness(.45) saturate(.82);
}

.day-transition-overlay::before,
.day-transition-overlay::after {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
}

.day-transition-overlay::before {
  background:
    radial-gradient(ellipse at 34% 48%, rgba(38, 20, 55, .38), transparent 42%),
    radial-gradient(ellipse at 66% 52%, rgba(74, 24, 28, .26), transparent 38%),
    linear-gradient(95deg, transparent 18%, rgba(255, 212, 126, .11) 44%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 92px);
  filter: blur(10px);
  opacity: 0;
  transform: translateX(-5%);
}

.day-transition-overlay::after {
  background: radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0, 0, 0, .58) 72%);
  opacity: 0;
}

.day-transition-overlay.active {
  pointer-events: auto;
  animation: day-transition-screen 2.45s ease-in-out forwards;
}

.day-transition-overlay.active::before {
  animation: day-transition-light 2.45s ease-in-out forwards;
}

.day-transition-overlay.active::after {
  animation: day-transition-vignette 2.45s ease-in-out forwards;
}

.day-transition-overlay.night,
.day-transition-overlay.nightfall {
  background:
    linear-gradient(180deg, rgba(3, 3, 8, .98), rgba(15, 12, 28, .96) 48%, rgba(1, 1, 4, .98)),
    radial-gradient(ellipse at 50% 50%, rgba(88, 78, 155, .16), transparent 58%);
}

.day-transition-overlay.dawn {
  background:
    linear-gradient(180deg, rgba(10, 7, 6, .98), rgba(36, 24, 18, .94) 48%, rgba(11, 9, 7, .98)),
    radial-gradient(ellipse at 50% 48%, rgba(238, 198, 120, .2), transparent 60%);
}

.day-transition-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  text-align: center;
  color: #f4dfb8;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .72);
  transform: translateY(16px) scale(.98);
  opacity: 0;
}

.day-transition-kicker {
  margin-bottom: 12px;
  color: rgba(238, 208, 154, .5);
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.day-transition-title {
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.05;
}

.day-transition-darkness {
  margin-top: 18px;
  color: #e0a020;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
}

.day-transition-pulse {
  width: min(280px, 56vw);
  height: 1px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, rgba(224, 160, 32, .78), rgba(64, 22, 35, .78), transparent);
  box-shadow: 0 0 18px rgba(143, 49, 62, .45);
  opacity: 0;
  transform: scaleX(.28);
}

.day-transition-next {
  margin-top: 16px;
  color: rgba(244, 223, 184, .84);
  font-size: 1.1rem;
}

.day-transition-overlay.night .day-transition-darkness,
.day-transition-overlay.nightfall .day-transition-darkness {
  color: #b8a5ff;
}

.day-transition-overlay.heavy-darkness .day-transition-darkness {
  color: #ff5a6d;
}

.day-transition-overlay.night .day-transition-pulse,
.day-transition-overlay.nightfall .day-transition-pulse {
  background: linear-gradient(90deg, transparent, rgba(184, 165, 255, .76), rgba(64, 22, 35, .84), transparent);
}

.day-transition-overlay.heavy-darkness .day-transition-pulse {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 82, 103, .9), rgba(92, 20, 42, .92), rgba(255, 82, 103, .72), transparent);
  box-shadow: 0 0 24px rgba(255, 54, 76, .48), 0 0 42px rgba(92, 20, 42, .34);
}

.day-transition-overlay.dawn .day-transition-darkness {
  color: #f0bd52;
}

.day-transition-overlay.active .day-transition-panel {
  animation: day-transition-panel 2.45s ease-in-out forwards;
}

.day-transition-kicker,
.day-transition-title,
.day-transition-darkness,
.day-transition-pulse,
.day-transition-next {
  opacity: 0;
}

.day-transition-overlay.active .day-transition-kicker {
  animation: day-transition-line-in 2.1s ease-in-out .08s forwards;
}

.day-transition-overlay.active .day-transition-title {
  animation: day-transition-title-in 2.04s ease-in-out .18s forwards;
}

.day-transition-overlay.active .day-transition-darkness {
  animation: day-transition-darkness-pop 1.7s ease-in-out .62s forwards;
}

.day-transition-overlay.active.heavy-darkness .day-transition-darkness {
  animation: day-transition-darkness-heavy 1.7s ease-in-out .62s forwards;
}

.day-transition-overlay.active .day-transition-pulse {
  animation: day-transition-pulse 1.48s ease-in-out .72s forwards;
}

.day-transition-overlay.active .day-transition-next {
  animation: day-transition-line-in 1.42s ease-in-out 1.05s forwards;
}

@keyframes day-transition-screen {
  0%   { opacity: 0; filter: brightness(.8); }
  16%  { opacity: 1; filter: brightness(1); }
  74%  { opacity: 1; filter: brightness(.94); }
  100% { opacity: 0; filter: brightness(.7); }
}

@keyframes day-transition-light {
  0%   { opacity: 0; transform: translateX(-5%) scale(1.04); }
  28%  { opacity: .86; }
  70%  { opacity: .54; transform: translateX(3%) scale(1); }
  100% { opacity: 0; transform: translateX(8%) scale(1.03); }
}

@keyframes day-transition-vignette {
  0%   { opacity: 0; transform: scale(1.05); }
  24%  { opacity: .82; }
  78%  { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(.98); }
}

@keyframes day-transition-panel {
  0%   { opacity: 0; transform: translateY(18px) scale(.98); }
  16%  { opacity: 1; transform: translateY(0) scale(1); }
  76%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-12px) scale(1.01); }
}

@keyframes day-transition-line-in {
  0%   { opacity: 0; transform: translateY(8px); }
  18%  { opacity: 1; transform: translateY(0); }
  76%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes day-transition-title-in {
  0%   { opacity: 0; transform: translateY(12px) scale(.985); }
  18%  { opacity: 1; transform: translateY(0) scale(1); }
  76%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(1.01); }
}

@keyframes day-transition-darkness-pop {
  0%   { opacity: 0; transform: translateY(10px) scale(.96); text-shadow: 0 2px 12px rgba(0, 0, 0, .72); }
  20%  { opacity: 1; transform: translateY(0) scale(1.06); text-shadow: 0 0 18px rgba(224, 160, 32, .62), 0 2px 12px rgba(0, 0, 0, .72); }
  38%  { opacity: 1; transform: translateY(0) scale(1); }
  78%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-6px) scale(1.01); }
}

@keyframes day-transition-darkness-heavy {
  0%   { opacity: 0; transform: translateY(10px) scale(.94); text-shadow: 0 2px 12px rgba(0, 0, 0, .72); }
  16%  { opacity: 1; transform: translate(-2px, 0) scale(1.12); text-shadow: 0 0 22px rgba(255, 54, 76, .78), 0 2px 12px rgba(0, 0, 0, .82); }
  22%  { transform: translate(3px, -1px) scale(1.1); }
  28%  { transform: translate(-3px, 1px) scale(1.08); }
  34%  { transform: translate(2px, 0) scale(1.04); }
  42%  { opacity: 1; transform: translate(0, 0) scale(1); }
  78%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translateY(-6px) scale(1.01); }
}

@keyframes day-transition-pulse {
  0%   { opacity: 0; transform: scaleX(.22); filter: brightness(.75); }
  22%  { opacity: 1; transform: scaleX(1); filter: brightness(1.45); }
  58%  { opacity: .74; transform: scaleX(.86); filter: brightness(.95); }
  100% { opacity: 0; transform: scaleX(.38); filter: brightness(.7); }
}

/* ── Night Overlay Transition ────────────── */
#night-overlay {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(66, 54, 128, .28), transparent 34%),
    radial-gradient(circle at 50% 8%, rgba(0, 0, 0, .96), transparent 64%),
    linear-gradient(180deg, rgba(0, 0, 0, .98), rgba(8, 8, 28, .9) 48%, rgba(0, 0, 0, .94));
  z-index: 500;
  pointer-events: none;
  opacity: 0;
}

#night-overlay::before,
#night-overlay::after {
  content: "";
  position: absolute;
  inset: -14%;
  pointer-events: none;
}

#night-overlay::before {
  background:
    radial-gradient(ellipse at 18% 52%, rgba(45, 37, 92, .42), transparent 34%),
    radial-gradient(ellipse at 76% 42%, rgba(28, 42, 86, .34), transparent 30%),
    linear-gradient(110deg, transparent 18%, rgba(0, 0, 0, .72) 42%, transparent 66%);
  filter: blur(18px);
  opacity: 0;
}

#night-overlay::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, transparent 30%, rgba(0, 0, 0, .68) 100%),
    radial-gradient(circle at 50% 50%, transparent 0%, rgba(0, 0, 0, .78) 72%);
  opacity: 0;
}

#night-overlay.night-overlay-active {
  animation: night-overlay-descend 2.35s ease-in-out forwards;
}

#night-overlay.night-overlay-active::before {
  animation: night-overlay-fog 2.35s ease-in-out forwards;
}

#night-overlay.night-overlay-active::after {
  animation: night-overlay-vignette 2.35s ease-in-out forwards;
}

@keyframes night-overlay-descend {
  0%   { opacity: 0; filter: brightness(1); }
  18%  { opacity: .98; filter: brightness(.86); }
  58%  { opacity: .92; filter: brightness(.72); }
  100% { opacity: 0; filter: brightness(.55); }
}

@keyframes night-overlay-fog {
  0%   { opacity: 0; transform: translateY(-6%) scale(1.04); }
  24%  { opacity: .9; }
  70%  { opacity: .74; transform: translateY(2%) scale(1); }
  100% { opacity: 0; transform: translateY(7%) scale(1.03); }
}

@keyframes night-overlay-vignette {
  0%   { opacity: 0; transform: scale(1.04); }
  22%  { opacity: .85; }
  72%  { opacity: .72; transform: scale(1); }
  100% { opacity: 0; transform: scale(.98); }
}

/* ── Scrollbar ───────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #444; }

/* ════════════════════════════════════════════
   Dark fantasy visual polish
   只覆蓋 UI/CSS，不改遊戲邏輯
   ════════════════════════════════════════════ */

:root {
  --bg: #070707;
  --surface: rgba(17, 17, 16, .94);
  --surface2: rgba(24, 23, 21, .96);
  --panel: rgba(14, 14, 13, .9);
  --panel-hi: rgba(30, 27, 22, .92);
  --border: rgba(180, 122, 36, .28);
  --border-soft: rgba(180, 122, 36, .16);
  --text: #d7c8ab;
  --text-dim: #8c7c62;
  --text-bright: #f1e3c5;
  --accent: #c9912f;
  --accent-dim: #7d5317;
  --accent-glow: rgba(214, 151, 42, .35);
  --ember: rgba(188, 75, 22, .24);
  --map-cell-size: clamp(30px, min(4.8vw, 6.2vh), 60px);

  --c-fog: #030303;
  --c-empty: #171714;
  --c-forest: #131a11;
  --c-ruins: #090908;
  --c-cave: #11131a;
  --c-altar: #221126;
  --c-rest: #261807;
  --c-enemy: #240909;
  --c-relic: #071d1f;
}

html,
body {
  background:
    radial-gradient(circle at 50% 10%, rgba(129, 80, 20, .12), transparent 34%),
    radial-gradient(circle at 10% 90%, rgba(90, 24, 12, .12), transparent 30%),
    linear-gradient(145deg, #11100e 0%, #070707 45%, #020202 100%);
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.48) 100%),
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 18%, transparent 82%, rgba(0,0,0,.32));
}

#app {
  position: relative;
  z-index: 1;
  background: transparent;
}

#game-screen {
  background:
    radial-gradient(circle at 52% 38%, rgba(154, 92, 24, .08), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(0,0,0,.18));
  padding: 10px;
  gap: 10px;
}

/* 三層框格：華麗只屬於主角（地圖/標題卡/結算），其餘退成靜默容器 */
#map-panel,
.title-card,
#gameover-results {
  background:
    linear-gradient(180deg, rgba(32, 30, 26, .94), rgba(12, 12, 11, .96));
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255, 222, 150, .06),
    inset 0 0 24px rgba(0,0,0,.55),
    0 10px 32px rgba(0,0,0,.35);
}

#top-bar,
#right-panel,
#log-panel,
#effects-panel,
#notes-shortcut,
#squad-panel {
  background: linear-gradient(180deg, rgba(20, 19, 17, .92), rgba(10, 10, 9, .94));
  border: 1px solid var(--border-soft);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .4);
}

/* 兩側欄微退；滑入/聚焦回亮 */
#log-panel,
#right-panel {
  filter: saturate(.9) brightness(.95);
  transition: filter .2s;
}
#log-panel:hover,
#log-panel:focus-within,
#right-panel:hover,
#right-panel:focus-within {
  filter: none;
}

#top-bar {
  border-radius: 8px;
  padding: 10px 16px;
}

#day-label {
  color: var(--text-bright);
  font-family: var(--font-serif);
  letter-spacing: .05em;
}

#actions-display,
.phase-day,
.phase-night,
.phase-dawn {
  text-shadow: 0 0 10px rgba(201,145,47,.18);
}

#darkness-display {
  min-width: 180px;
  font-size: .9em;
  color: #d9cff5;
  text-shadow: 0 0 12px rgba(142, 102, 255, .22);
}

#darkness-label {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: .08em;
}

#light-charges-display {
  display: none;
}

#darkness-num {
  display: inline-block;
  margin-left: 8px;
  color: #f0eaff;
  font-size: .92em;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow:
    0 0 10px rgba(181, 151, 255, .36),
    0 0 18px rgba(95, 54, 205, .24);
}

.darkness-bar {
  position: relative;
  margin-top: 7px;
  height: 10px;
  border: 1px solid rgba(142, 102, 255, .36);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 50%, rgba(96, 63, 174, .28), transparent 34%),
    linear-gradient(180deg, rgba(7, 5, 14, .96), rgba(18, 10, 32, .98));
  overflow: hidden;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .05),
    inset 0 0 10px rgba(0, 0, 0, .78),
    0 0 16px rgba(86, 52, 172, .18);
}

/* 黑暗門檻刻度：5 化身甦醒 / 7 侵蝕加劇 / 12 深污（位置 = 門檻/20） */
.darkness-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent calc(25% - 1px), rgba(238, 226, 255, .55) calc(25% - 1px), rgba(238, 226, 255, .55) calc(25% + 1px), transparent calc(25% + 1px),
    transparent calc(35% - 1px), rgba(238, 226, 255, .45) calc(35% - 1px), rgba(238, 226, 255, .45) calc(35% + 1px), transparent calc(35% + 1px),
    transparent calc(60% - 1px), rgba(255, 150, 208, .55) calc(60% - 1px), rgba(255, 150, 208, .55) calc(60% + 1px), transparent calc(60% + 1px));
}

#darkness-next {
  display: inline-block;
  margin-left: 8px;
  font-size: .8em;
  color: rgba(217, 207, 245, .72);
  letter-spacing: .02em;
}

.darkness-bar::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(203, 185, 255, .18), transparent);
  opacity: .58;
  pointer-events: none;
}

#darkness-bar-fill {
  position: relative;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #31205f 0%, #6f43cc 46%, #b78cff 100%);
  box-shadow:
    0 0 10px rgba(151, 102, 255, .48),
    0 0 22px rgba(94, 52, 182, .34);
  transition: width .26s ease;
  overflow: hidden;
}

#darkness-bar-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 160%;
  background:
    linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .22) 18%, transparent 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 14px);
  mix-blend-mode: screen;
  opacity: .66;
  animation: darkness-flow 2.4s linear infinite;
}

#darkness-display.alert #darkness-bar-fill {
  background: linear-gradient(90deg, #3d236b 0%, #8a4ff0 45%, #df8dff 100%);
  box-shadow:
    0 0 14px rgba(177, 112, 255, .58),
    0 0 30px rgba(118, 56, 214, .42);
}

#darkness-display.critical #darkness-bar-fill {
  background: linear-gradient(90deg, #4b174f 0%, #a348ff 42%, #ff63c8 100%);
  box-shadow:
    0 0 16px rgba(255, 99, 200, .62),
    0 0 36px rgba(147, 54, 255, .46);
}

#darkness-display.light #darkness-bar-fill {
  background: linear-gradient(90deg, #4f83b7, #cfe8ff);
  box-shadow: 0 0 10px rgba(117,174,224,.35);
}

@keyframes darkness-flow {
  0%   { transform: translateX(-46%); }
  100% { transform: translateX(12%); }
}

.btn-primary,
.btn-secondary,
.btn-small,
.btn-tiny,
.library-pick-card {
  background:
    linear-gradient(180deg, rgba(39, 34, 27, .95), rgba(13, 13, 12, .95));
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.btn-primary {
  color: var(--accent);
  border-color: rgba(201,145,47,.65);
}

.btn-primary:hover:not(:disabled),
.btn-secondary:hover,
.btn-small:hover,
.btn-tiny:hover,
.library-pick-card:hover,
.library-pick-card.selected {
  color: var(--text-bright);
  border-color: rgba(226, 167, 62, .85);
  background:
    radial-gradient(circle at 50% 0%, rgba(201,145,47,.18), transparent 52%),
    linear-gradient(180deg, rgba(48, 41, 31, .98), rgba(18, 17, 15, .98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 14px rgba(201,145,47,.15);
}

#btn-field-rest {
  color: #eaffdf;
  border-color: rgba(91, 190, 103, .78);
  background:
    radial-gradient(circle at 50% 0%, rgba(119, 228, 123, .22), transparent 54%),
    linear-gradient(180deg, rgba(43, 118, 55, .98), rgba(17, 68, 35, .98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 12px rgba(84, 181, 88, .18);
  font-weight: 700;
}

#btn-field-rest:hover:not(:disabled) {
  color: #f6fff0;
  border-color: rgba(134, 239, 137, .95);
  background:
    radial-gradient(circle at 50% 0%, rgba(153, 244, 141, .3), transparent 56%),
    linear-gradient(180deg, rgba(54, 143, 66, .98), rgba(21, 83, 43, .98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 18px rgba(95, 208, 99, .28);
}

#btn-field-rest:disabled {
  filter: saturate(.72);
}

#btn-field-rest.field-rest-alert:not(:disabled) {
  animation: field-rest-glow 1.05s ease-in-out infinite alternate;
}

@keyframes field-rest-glow {
  from {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 0 12px rgba(84, 181, 88, .26);
  }
  to {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 0 8px rgba(128, 230, 104, .42),
      0 0 24px rgba(128, 230, 104, .34);
  }
}

.choice-btn:hover:not(:disabled) {
  color: var(--text-bright);
  filter: brightness(1.12);
}

#main-content {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr) clamp(272px, 25vw, 380px);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas:
    "log map side";
  gap: 10px;
  min-height: 0;
}

#map-panel {
  grid-area: map;
  min-width: 0;
  border-radius: 10px;
  border-color: rgba(201,145,47,.55);
  padding: clamp(22px, 4.2vh, 48px) clamp(18px, 3.2vw, 48px);
  min-height: 0;
  overflow: auto;
  justify-content: center;
  justify-content: safe center; /* 內容溢出時不要裁掉上緣 */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .18)),
    url("assets/ui/map-panel-bg.png") center / 100% 100% no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 222, 150, .07),
    inset 0 0 32px rgba(0, 0, 0, .5),
    0 0 0 3px rgba(0, 0, 0, .85),
    0 0 0 4px rgba(201, 145, 47, .22),
    0 10px 36px rgba(0, 0, 0, .4),
    0 0 34px rgba(201, 145, 47, .1);
}

#game-screen.night-mode #map-panel {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .28)),
    url("assets/ui/map-panel-bg.png") center / 100% 100% no-repeat;
}

#game-screen.night-mode #log-panel {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .26)),
    url("assets/ui/log-panel-bg.png") center / 100% 100% no-repeat;
}

#right-panel {
  grid-area: side;
  min-width: 300px;
  border-radius: 10px;
  border: 0;
  padding: 24px 16px 18px;
  gap: 12px;
  min-height: 0;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .2)),
    url("assets/ui/squad-panel-bg.png") center / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(32, 30, 26, .94), rgba(12, 12, 11, .96));
}

#squad-panel,
#effects-panel,
#resonance-panel,
#notes-shortcut {
  border-radius: 8px;
  padding: 10px;
}

#squad-panel {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

#right-panel h3,
.log-panel-title {
  color: var(--accent);
  border-bottom: 1px solid var(--border-soft);
  text-shadow: 0 0 12px rgba(201,145,47,.14);
}

#map-grid {
  gap: 1px;
  padding: 6px;
  grid-template-columns: repeat(12, var(--map-cell-size));
  grid-template-rows: repeat(12, var(--map-cell-size));
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#map-viewport {
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(20, 14, 7, .52), rgba(4, 3, 2, .72));
}

#map-viewport::before,
#map-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#map-viewport::before {
  z-index: 0;
  background: url("assets/ui/guide-explore-map.png") 50% 54% / cover no-repeat;
  opacity: .52;
  filter: brightness(.96) saturate(.9) contrast(1.06);
  transform: scale(1.02);
}

#map-viewport::after {
  z-index: 0;
  background:
    radial-gradient(circle at 52% 52%, rgba(255, 184, 70, .06) 0 26%, rgba(0, 0, 0, .08) 58%, rgba(0, 0, 0, .46) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .22));
  mix-blend-mode: multiply;
}

.map-cell {
  width: var(--map-cell-size);
  height: var(--map-cell-size);
  border: 1px solid rgba(201,145,47,.09);
  background-color: rgba(10, 9, 7, .28);
  box-shadow: inset 0 0 10px rgba(0,0,0,.28);
  transition: filter .12s, border-color .12s, box-shadow .12s, transform .12s;
}

.map-cell.fog {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.012), transparent 46%),
    linear-gradient(180deg, rgba(2, 2, 2, .82), rgba(0, 0, 0, .94));
  border-color: rgba(255,255,255,.018);
  filter: brightness(.58);
}

.map-cell.type-empty:not(.fog) {
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 145, 47, .12), transparent 56%),
    linear-gradient(180deg, rgba(38, 29, 15, .34), rgba(5, 5, 4, .44));
  border-color: rgba(201,145,47,.1);
}

.map-cell:not(.fog) {
  filter: brightness(1.06) saturate(.97);
}

.map-cell:hover:not(.fog) {
  filter: brightness(1.32) saturate(1.12);
}

.map-cell.adjacent-highlight {
  --move-cross-line: rgba(255, 224, 150, .92);
  --move-cross-soft: rgba(255, 224, 150, .26);
  border-color: var(--move-cross-line);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 200, .16),
    inset 0 0 14px rgba(224, 176, 70, .16),
    0 0 12px rgba(224, 176, 70, .28);
}

.map-cell.adjacent-highlight::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border: 1px solid var(--move-cross-soft);
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 224, 150, .14), rgba(255, 224, 150, .05) 48%, transparent 76%),
    rgba(0, 0, 0, .28);
  pointer-events: none;
}

.map-cell.adjacent-highlight > * {
  position: relative;
  z-index: 2;
}

/* 引導徽章維持絕對定位，不被相鄰高亮的子元素規則拉回文流 */
.map-cell.adjacent-highlight > .guide-quest-badge {
  position: absolute;
  z-index: 5;
}

.map-cell.type-empty.adjacent-highlight:not(.fog) {
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 145, 47, .08), transparent 56%),
    linear-gradient(180deg, rgba(28, 23, 14, .34), rgba(5, 5, 4, .42));
}

.map-cell.adjacent-highlight.move-cross-north { border-bottom-color: transparent; }
.map-cell.adjacent-highlight.move-cross-south { border-top-color: transparent; }
.map-cell.adjacent-highlight.move-cross-west { border-right-color: transparent; }
.map-cell.adjacent-highlight.move-cross-east { border-left-color: transparent; }

.map-cell.has-player {
  border-color: rgba(201,145,47,.08) !important;
  box-shadow: inset 0 0 12px rgba(0,0,0,.46);
}

.map-cell.has-player.move-cross-center {
  border-color: rgba(201,145,47,.08) !important;
  box-shadow: inset 0 0 12px rgba(0,0,0,.46);
}

.map-cell.has-player.move-cross-center > * {
  position: relative;
  z-index: 2;
}

.map-cell.move-locked {
  pointer-events: none;
}

.map-cell.move-origin.has-player .cell-icon,
.map-cell.move-origin.has-player .cell-label {
  opacity: .28;
}

.map-cell.move-destination {
  border-color: rgba(142, 246, 230, .86) !important;
  box-shadow:
    inset 0 0 16px rgba(62, 217, 199, .18),
    0 0 14px rgba(62, 217, 199, .38);
}

.map-player-runner {
  position: fixed;
  z-index: 1200;
  transform: translate(-50%, -50%) scale(.96);
  transition: transform .26s cubic-bezier(.22,.76,.24,1);
  pointer-events: none;
  padding: 3px 5px;
  border: 1px solid rgba(247,190,76,.7);
  border-radius: 999px;
  background: rgba(25, 18, 8, .95);
  color: #ffe1a0;
  font-size: .92em;
  line-height: 1;
  letter-spacing: 0;
  box-shadow:
    0 0 12px rgba(230,167,57,.42),
    inset 0 0 10px rgba(255,206,96,.12);
}

.map-cell.rescue-target:not(.cleared) {
  border-color: rgba(247, 190, 76, .95);
  background:
    radial-gradient(circle at 50% 44%, rgba(247,190,76,.32), rgba(42,14,8,.92) 64%);
  box-shadow:
    inset 0 0 18px rgba(255,205,86,.24),
    0 0 18px rgba(230,167,57,.5);
}

.map-cell.echo-site-target:not(.cleared) {
  border-color: rgba(144, 235, 218, .98);
  background:
    radial-gradient(circle at 50% 42%, rgba(178, 255, 232, .36), rgba(15, 46, 44, .86) 58%, rgba(7, 14, 18, .96) 100%);
  box-shadow:
    inset 0 0 18px rgba(144, 235, 218, .24),
    0 0 0 1px rgba(255, 219, 128, .24),
    0 0 22px rgba(80, 216, 190, .42);
}

#map-hint {
  max-width: min(100%, 520px);
  padding: 5px 12px;
  border: 1px solid rgba(226, 167, 62, .22);
  border-radius: 999px;
  color: #d9c38f;
  background: rgba(0, 0, 0, .34);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .34);
}

.map-cell.unique-strong-target:not(.cleared) {
  border-color: rgba(205, 64, 92, .95);
  background:
    radial-gradient(circle at 50% 44%, rgba(173,38,70,.34), rgba(28,6,12,.94) 66%);
  box-shadow:
    inset 0 0 18px rgba(210,62,92,.22),
    0 0 22px rgba(205,64,92,.42);
}

.map-cell.corrupted:not(.fog):not(.has-player) {
  background:
    radial-gradient(circle at 50% 40%, rgba(116, 72, 137, .24), rgba(18, 14, 24, .92) 68%);
  border-color: rgba(144, 98, 170, .45);
}

.map-cell.rescue-target:not(.cleared) .cell-icon,
.map-cell.rescue-target:not(.cleared) .cell-label,
.map-cell.echo-site-target:not(.cleared) .cell-label,
.map-cell.unique-strong-target:not(.cleared) .cell-icon,
.map-cell.unique-strong-target:not(.cleared) .cell-label {
  color: #ffd98a;
  text-shadow: 0 0 12px rgba(247,190,76,.5);
}

.map-cell.echo-site-target:not(.cleared) .cell-label {
  color: #f6e2a6;
  font-weight: 900;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .86),
    0 0 10px rgba(120, 235, 214, .44);
}

.map-cell.echo-site-resonance-match:not(.fog):not(.cleared):not(.has-player) {
  z-index: 12;
  border-color: rgba(255, 224, 118, .98);
  box-shadow:
    inset 0 0 12px rgba(255, 235, 128, .30),
    inset 0 0 28px rgba(255, 164, 40, .18),
    0 0 0 2px rgba(255, 226, 104, .78),
    0 0 18px rgba(255, 186, 58, .62),
    0 0 30px rgba(255, 226, 104, .30);
}

.map-cell.echo-site-resonance-match:not(.fog):not(.cleared):not(.has-player)::before,
.map-cell.echo-site-resonance-match:not(.fog):not(.cleared):not(.has-player)::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 1;
  border: 2px solid rgba(255, 226, 104, .88);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: echo-site-resonance-wave 1.35s ease-out infinite;
}

.map-cell.echo-site-resonance-match:not(.fog):not(.cleared):not(.has-player)::after {
  inset: 6px;
  border: 1px solid rgba(255, 247, 178, .88);
  border-radius: 4px;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255, 245, 166, .14) 42%, rgba(255, 245, 166, .50) 50%, rgba(255, 245, 166, .14) 58%, transparent 100%);
  animation: echo-site-resonance-sweep 1.55s ease-in-out infinite;
}

.map-cell.echo-site-resonance-match:not(.fog):not(.cleared):not(.has-player) .echo-site-marker {
  z-index: 3;
  animation: echo-site-resonance-glow 1.1s ease-in-out infinite alternate;
}

.map-cell.echo-site-resonance-match:not(.fog):not(.cleared):not(.has-player) .cell-label {
  position: relative;
  z-index: 3;
}

.echo-site-marker {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #f7e6b2;
  filter:
    drop-shadow(0 0 7px rgba(122, 238, 218, .64))
    drop-shadow(0 2px 5px rgba(0, 0, 0, .72));
}

.echo-site-marker-diamond {
  position: absolute;
  inset: 3px;
  border: 1px solid var(--echo-site-color, rgba(122, 238, 218, .86));
  background:
    linear-gradient(135deg, rgba(255, 231, 164, .18), transparent 46%),
    radial-gradient(circle, var(--echo-site-glow, rgba(122, 238, 218, .34)), rgba(4, 12, 14, .84) 70%);
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, .06),
    0 0 12px var(--echo-site-glow, rgba(122, 238, 218, .42));
  transform: rotate(45deg);
}

.echo-site-marker-text {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .96), 0 0 8px rgba(255, 232, 168, .42);
  transform: translateY(.5px);
}

.echo-site-marker-wound {
  --echo-site-color: rgba(238, 108, 120, .94);
  --echo-site-glow: rgba(220, 64, 92, .46);
}

.echo-site-marker-eagle {
  --echo-site-color: rgba(126, 226, 255, .94);
  --echo-site-glow: rgba(82, 178, 230, .46);
}

.echo-site-marker-fate {
  --echo-site-color: rgba(214, 164, 255, .94);
  --echo-site-glow: rgba(160, 86, 230, .48);
}

.echo-site-marker-banner {
  --echo-site-color: rgba(255, 210, 112, .96);
  --echo-site-glow: rgba(230, 156, 60, .48);
}

.map-cell.echo-site-system-wound {
  --echo-site-color: rgba(238, 108, 120, .94);
  --echo-site-glow: rgba(220, 64, 92, .46);
}

.map-cell.echo-site-system-eagle {
  --echo-site-color: rgba(126, 226, 255, .94);
  --echo-site-glow: rgba(82, 178, 230, .46);
}

.map-cell.echo-site-system-fate {
  --echo-site-color: rgba(214, 164, 255, .94);
  --echo-site-glow: rgba(160, 86, 230, .48);
}

.map-cell.echo-site-system-banner {
  --echo-site-color: rgba(255, 210, 112, .96);
  --echo-site-glow: rgba(230, 156, 60, .48);
}

@keyframes echo-site-resonance-wave {
  0% {
    opacity: .92;
    transform: scale(.66);
    box-shadow: 0 0 8px rgba(255, 226, 104, .78);
  }
  70% {
    opacity: .22;
  }
  100% {
    opacity: 0;
    transform: scale(1.66);
    box-shadow: 0 0 24px rgba(255, 186, 58, .18);
  }
}

@keyframes echo-site-resonance-sweep {
  0% {
    opacity: 0;
    transform: translateX(-28%) skewX(-14deg);
  }
  30% {
    opacity: .72;
  }
  62% {
    opacity: .48;
  }
  100% {
    opacity: 0;
    transform: translateX(28%) skewX(-14deg);
  }
}

@keyframes echo-site-resonance-glow {
  from {
    filter:
      drop-shadow(0 0 7px rgba(255, 226, 104, .72))
      drop-shadow(0 0 5px var(--echo-site-glow, rgba(122, 238, 218, .64)))
      drop-shadow(0 2px 5px rgba(0, 0, 0, .72));
  }
  to {
    filter:
      drop-shadow(0 0 14px rgba(255, 226, 104, .98))
      drop-shadow(0 0 10px rgba(255, 150, 34, .62))
      drop-shadow(0 0 7px var(--echo-site-color, rgba(122, 238, 218, .62)))
      drop-shadow(0 2px 5px rgba(0, 0, 0, .72));
  }
}

.cell-icon {
  color: var(--text-bright);
  text-shadow: 0 0 10px rgba(201,145,47,.14);
}

.map-player-marker {
  position: relative;
  display: block;
  width: 46px;
  height: 30px;
  filter: drop-shadow(0 0 8px rgba(230, 167, 57, .5));
}

.map-player-avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  display: block;
  border: 1px solid rgba(255, 220, 142, .78);
  border-radius: 50%;
  overflow: hidden;
  background: rgba(16, 12, 8, .92);
  box-shadow: 0 0 7px rgba(230, 167, 57, .32);
  transform: translate(-50%, -50%);
}

.map-player-count-1 .map-player-avatar:nth-child(1) {
  transform: translate(-50%, -50%);
  z-index: 1;
}

.map-player-count-2 .map-player-avatar:nth-child(1) {
  transform: translate(calc(-50% - 6px), -50%);
  z-index: 2;
}

.map-player-count-2 .map-player-avatar:nth-child(2) {
  transform: translate(calc(-50% + 6px), -50%);
  z-index: 1;
}

.map-player-count-3 .map-player-avatar:nth-child(1) {
  transform: translate(calc(-50% - 10px), -50%);
  z-index: 3;
}

.map-player-count-3 .map-player-avatar:nth-child(2) {
  transform: translate(-50%, -50%);
  z-index: 2;
}

.map-player-count-3 .map-player-avatar:nth-child(3) {
  transform: translate(calc(-50% + 10px), -50%);
  z-index: 1;
}

.map-player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-player-avatar.fallback {
  background:
    radial-gradient(circle, rgba(255, 224, 150, .42), rgba(26, 18, 10, .94) 70%);
}

.cell-label {
  color: #a99570;
  max-width: calc(var(--map-cell-size) - 6px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dark-monster {
  position: absolute;
  --monster-size: 28px;
  --monster-half-size: 14px;
  --monster-icon-size: 27px;
  top: calc(50% - var(--monster-half-size));
  left: calc(50% - var(--monster-half-size));
  right: auto;
  z-index: 4;
  width: var(--monster-size);
  height: var(--monster-size);
  display: block;
  --monster-breathe-scale: 1.05;
  --monster-breathe-speed: 2.2s;
  --monster-glow-a: rgba(95, 191, 106, .8);
  --monster-glow-b: rgba(95, 191, 106, .42);
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 5px rgba(0, 0, 0, .85);
  animation: darkMonsterBreathe var(--monster-breathe-speed) ease-in-out infinite;
  transform-origin: 50% 50%;
  filter:
    drop-shadow(0 0 4px var(--monster-glow-a))
    drop-shadow(0 0 9px var(--monster-glow-b));
}

.dark-monster-icon {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dark-monster-icon img {
  width: var(--monster-icon-size);
  height: var(--monster-icon-size);
  object-fit: contain;
  display: block;
  margin: auto;
  transform: none;
  transform-origin: 50% 50%;
}

.dark-monster-level {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 11px;
  height: 11px;
  padding: 0 2px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 9px;
  line-height: 11px;
  text-align: center;
}

.dark-monster-count {
  position: absolute;
  right: -4px;
  bottom: -2px;
  color: #ffffff;
  font-size: 8px;
  line-height: 1;
}

.dark-monster.timer-green {
  --monster-size: 26px;
  --monster-half-size: 13px;
  --monster-icon-size: 25px;
  --monster-breathe-scale: 1.04;
  --monster-breathe-speed: 2.4s;
  --monster-glow-a: rgba(95, 191, 106, .8);
  --monster-glow-b: rgba(95, 191, 106, .42);
}

.dark-monster.timer-yellow {
  --monster-size: 33px;
  --monster-half-size: 16.5px;
  --monster-icon-size: 32px;
  --monster-breathe-scale: 1.12;
  --monster-breathe-speed: 1.45s;
  --monster-glow-a: rgba(237, 190, 80, .9);
  --monster-glow-b: rgba(237, 190, 80, .52);
}

.dark-monster.timer-red {
  --monster-size: 40px;
  --monster-half-size: 20px;
  --monster-icon-size: 39px;
  --monster-breathe-scale: 1.18;
  --monster-breathe-speed: .72s;
  --monster-glow-a: rgba(255, 80, 96, .96);
  --monster-glow-b: rgba(255, 80, 96, .6);
  animation: darkMonsterAlert var(--monster-breathe-speed) ease-in-out infinite;
  z-index: 8;
}

.dark-monster.timer-red .dark-monster-icon img {
  filter: saturate(1.6) hue-rotate(-8deg) brightness(1.12);
}

.dark-monster.timer-red .dark-monster-level,
.dark-monster.timer-danger .dark-monster-level {
  background: rgba(178, 22, 43, .86);
  box-shadow: 0 0 8px rgba(255, 54, 76, .72);
}

.dark-monster.timer-danger {
  --monster-size: 44px;
  --monster-half-size: 22px;
  --monster-icon-size: 43px;
  --monster-breathe-scale: 1.24;
  --monster-breathe-speed: .5s;
  --monster-glow-a: rgba(255, 54, 76, 1);
  --monster-glow-b: rgba(255, 54, 76, .72);
  animation: darkMonsterAlert var(--monster-breathe-speed) ease-in-out infinite;
  z-index: 9;
}

.dark-monster.timer-danger .dark-monster-icon img {
  filter: saturate(1.9) hue-rotate(-12deg) brightness(1.25) contrast(1.08);
}

@keyframes darkMonsterBreathe {
  0%, 100% {
    transform: scale(1);
    filter:
      brightness(1)
      drop-shadow(0 0 4px var(--monster-glow-a))
      drop-shadow(0 0 9px var(--monster-glow-b));
  }
  50% {
    transform: scale(var(--monster-breathe-scale));
    filter:
      brightness(1.18)
      drop-shadow(0 0 6px var(--monster-glow-a))
      drop-shadow(0 0 15px var(--monster-glow-b));
  }
}

@keyframes darkMonsterAlert {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    filter:
      brightness(1.05)
      drop-shadow(0 0 5px var(--monster-glow-a))
      drop-shadow(0 0 12px var(--monster-glow-b));
  }
  18% {
    transform: translate(-1px, 0) scale(var(--monster-breathe-scale));
  }
  32% {
    transform: translate(1px, -1px) scale(calc(var(--monster-breathe-scale) + .03));
    filter:
      brightness(1.32)
      drop-shadow(0 0 8px var(--monster-glow-a))
      drop-shadow(0 0 20px var(--monster-glow-b));
  }
  48% {
    transform: translate(-1px, 1px) scale(var(--monster-breathe-scale));
  }
  64% {
    transform: translate(1px, 0) scale(1.06);
  }
}

@keyframes darkMonsterGuideAlert {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    filter:
      drop-shadow(0 0 6px var(--monster-glow-a))
      drop-shadow(0 0 14px var(--monster-glow-b));
  }
  22% {
    transform: translate(-1px, 0) scale(1.08);
  }
  38% {
    transform: translate(1px, -1px) scale(1.15);
    filter:
      drop-shadow(0 0 9px var(--monster-glow-a))
      drop-shadow(0 0 22px var(--monster-glow-b));
  }
  58% {
    transform: translate(-1px, 1px) scale(1.08);
  }
}

#map-hint {
  color: var(--text-dim);
  letter-spacing: .04em;
}

.char-card {
  position: relative;
  cursor: pointer;
  border-color: var(--border-soft);
  border-radius: 9px;
  margin: 0 5px 16px;
  padding: 12px 16px 12px;
  min-height: 136px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .52)),
    url("assets/ui/squad-card-bg.png") center / cover no-repeat,
    linear-gradient(180deg, rgba(35, 33, 29, .94), rgba(14, 14, 13, .98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 18px rgba(0,0,0,.46);
}

.char-card > * {
  position: relative;
  z-index: 1;
}

.char-card.cls-warrior::before {
  content: "";
  position: absolute;
  inset: 14px 0 10px;
  z-index: 0;
  pointer-events: none;
  background: url("assets/ui/squad-card-warrior-emblem.png") center / auto 104% no-repeat;
  opacity: .72;
  filter: brightness(1.34) saturate(1.1);
}

.char-card.cls-explorer::before {
  content: "";
  position: absolute;
  inset: 14px 0 10px;
  z-index: 0;
  pointer-events: none;
  background: url("assets/ui/squad-card-explorer-emblem.png") center / auto 90% no-repeat;
  opacity: .72;
  filter: brightness(1.38) saturate(1.08);
}

.char-card.cls-scholar::before {
  content: "";
  position: absolute;
  inset: 14px 0 10px;
  z-index: 0;
  pointer-events: none;
  background: url("assets/ui/squad-card-scholar-emblem.png") center / auto 86% no-repeat;
  opacity: .72;
  filter: brightness(1.38) saturate(1.08);
}

.char-card.cls-support::before {
  content: "";
  position: absolute;
  inset: 14px 0 10px;
  z-index: 0;
  pointer-events: none;
  background: url("assets/ui/squad-card-support-emblem.png") center / auto 84% no-repeat;
  opacity: .72;
  filter: brightness(1.38) saturate(1.08);
}

.char-card::after {
  content: "";
  position: absolute;
  inset: -24px -30px -27px;
  z-index: 2;
  pointer-events: none;
  border: 36px solid transparent;
  border-image: url("assets/ui/squad-card-frame-test.png") 110 110 fill / 36px stretch;
  opacity: .66;
  filter: brightness(.62) saturate(.78);
}

.char-card.cls-warrior {
  border-color: transparent;
  border-radius: 4px;
}

.char-card.dead {
  filter: grayscale(.75);
  border-color: rgba(122, 32, 32, .42);
  background:
    linear-gradient(180deg, rgba(28, 22, 22, .94), rgba(9, 8, 8, .98));
}

.char-card.dead .card-icon,
.char-card.dead .card-name {
  opacity: .72;
}

.status-dead {
  color: #c74837;
}

.card-title-row {
  gap: 8px;
  margin-top: 5px;
  margin-bottom: 8px;
}

.card-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(201,145,47,.48);
  background:
    radial-gradient(circle at 50% 38%, rgba(201,145,47,.2), rgba(0,0,0,.35));
  box-shadow:
    inset 0 0 10px rgba(0,0,0,.45),
    0 0 12px rgba(201,145,47,.12);
}

.char-portrait.card {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: 1px solid rgba(201,145,47,.48);
  border-radius: 8px;
  overflow: hidden;
  background: #080808;
  box-shadow:
    inset 0 0 10px rgba(0,0,0,.45),
    0 0 12px rgba(201,145,47,.12);
}

.char-portrait.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.char-card:hover {
  border-color: rgba(201,145,47,.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 0 18px rgba(0,0,0,.46),
    0 0 0 1px rgba(201,145,47,.08);
}

.card-name {
  color: var(--text-bright);
  letter-spacing: .03em;
}

.card-cls,
.card-label,
.hp-text {
  color: var(--text-dim);
}

.hp-bar {
  width: 76px;
  height: 9px;
  border: 1px solid rgba(201,145,47,.2);
  border-radius: 999px;
  background: #060706;
  box-shadow: inset 0 0 8px rgba(0,0,0,.8);
}

.hp-fill {
  border-radius: 999px;
  background: linear-gradient(90deg, #2f7f3e, #74b35e);
  box-shadow: 0 0 8px rgba(87, 172, 88, .25);
}

.hp-fill.low {
  background: linear-gradient(90deg, #8b5b20, #c08a32);
  box-shadow: 0 0 8px rgba(192, 138, 50, .22);
}

.hp-fill.critical {
  background: linear-gradient(90deg, #7e1d1d, #c74837);
  box-shadow: 0 0 8px rgba(199, 72, 55, .22);
}

.card-row {
  color: var(--text);
}

.equip-tag,
.relic-item,
.effect-tag,
.resonance-item,
.note-entry,
.library-relic {
  background: rgba(9, 9, 8, .32);
  border-color: var(--border-soft);
  border-radius: 6px;
}

.card-relic-name,
.relic-name,
.note-title {
  color: #70b2a6;
}

.card-relic-name.fused {
  color: #9fe3d6;
}

.char-slot-empty {
  position: relative;
  min-height: 98px;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .14)),
    url("assets/ui/empty-squad-slot-bg.png") center / 100% 100% no-repeat;
  color: var(--text-dim);
  display: grid;
  place-items: end center;
  padding: 0 18px 14px;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .86);
}

.char-slot-empty::before {
  content: none;
}

#notes-shortcut {
  color: var(--text);
}

#notes-shortcut .panel-small-text {
  color: var(--text-dim);
}

#log-panel {
  grid-area: log;
  width: auto;
  flex: none;
  min-height: 0;
  border-radius: 10px;
  padding: 18px 22px 18px;
  position: relative;
  overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .18)),
    url("assets/ui/log-panel-bg.png") center / 100% 100% no-repeat;
}

#log-panel::before {
  content: none;
}

.log-panel-title {
  font-size: 1.02em;
  min-height: clamp(32px, 5.8vh, 64px);
  margin-bottom: clamp(12px, 2.2vh, 24px);
  transform: translateY(-4px);
  padding-left: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  place-items: center;
  border-bottom: 0;
  color: #dca54b;
  text-shadow: 0 0 12px rgba(221, 121, 28, .42);
}

#log-messages {
  gap: 3px;
  padding: 0 2px;
  flex: 1 1 auto;
  min-height: 0;
}

.log-msg {
  font-size: .96em;
  line-height: 1.55;
  color: #b9aa8e;
  word-break: normal;
}

.log-msg.important { color: var(--text-bright); }
.log-msg.reward    { color: #80b36b; }
.log-msg.danger    { color: #d56555; }
.log-msg.combat    { color: #d39a48; }
.log-msg.night     { color: #8ea9e8; }

.modal {
  background:
    radial-gradient(circle at 50% 45%, rgba(137, 76, 17, .12), transparent 34%),
    rgba(0,0,0,.86);
}

.modal-content {
  border-color: rgba(201,145,47,.45);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 32px rgba(0,0,0,.62),
    0 18px 60px rgba(0,0,0,.62),
    0 0 28px rgba(201,145,47,.1);
}

.modal-content h2 {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(201,145,47,.2);
}

#modal-desc {
  color: #dccfb7;
}

.combat-scene,
.dice-result {
  border-color: rgba(201,145,47,.34);
  border-radius: 9px;
}

.modal-content.character-detail-content {
  max-width: 720px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 22px;
}

.modal-content.character-detail-content h2 {
  margin-bottom: 10px;
}

.modal-content.character-detail-content #modal-desc {
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 10px;
  white-space: normal;
}

.modal-content.character-detail-content #modal-choices {
  flex: 0 0 auto;
  padding-top: 10px;
  border-top: 1px solid rgba(201,145,47,.22);
}

.character-detail-modal {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  text-align: left;
}

.character-detail-side {
  display: grid;
  gap: 8px;
}

.character-detail-side-info {
  display: grid;
  gap: 6px;
}
.character-detail-side-info div {
  padding: 7px 8px;
  border: 1px solid rgba(201,145,47,.16);
  border-radius: 6px;
  background: rgba(255,255,255,.022);
}
.character-detail-side-info span {
  display: block;
  color: var(--accent);
  font-size: .76em;
  margin-bottom: 3px;
}
.character-detail-side-info b {
  display: block;
  color: var(--text);
  font-size: .88em;
  line-height: 1.35;
  font-weight: 500;
}

.character-detail-portrait {
  height: 238px;
  border: 1px solid rgba(201,145,47,.28);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(201,145,47,.12), transparent 52%),
    #080808;
  box-shadow: inset 0 0 18px rgba(0,0,0,.58);
}

.character-detail-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.character-detail-portrait.fallback {
  display: grid;
  place-items: center;
  font-size: 4rem;
}

.character-detail-info {
  display: grid;
  gap: 8px;
}

.character-detail-flavor {
  padding: 8px 10px;
  border: 1px solid rgba(201,145,47,.16);
  border-radius: 6px;
  background: rgba(255,255,255,.022);
  color: var(--text-dim);
  line-height: 1.45;
  font-size: .9em;
}

.character-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.character-detail-grid div,
.character-detail-block {
  padding: 8px 9px;
  border: 1px solid rgba(201,145,47,.18);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
}

.character-detail-grid div {
  min-height: 52px;
}

.character-detail-stack {
  display: grid;
  gap: 7px;
}

.character-detail-grid span,
.character-detail-block strong {
  display: block;
  color: var(--accent);
  font-size: .78em;
  margin-bottom: 4px;
}

.character-detail-grid b {
  color: var(--text-bright);
  font-weight: 600;
  font-size: 1.02em;
}

.character-detail-block p {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.48;
  font-size: .92em;
}

.character-detail-block .passive-section-list {
  gap: 7px;
}

.character-detail-block p .equipment-inline-icon,
.cct-row .equipment-inline-icon {
  width: 1.6em;
  height: 1.6em;
  margin-right: 4px;
}

.character-detail-resonance {
  border-color: rgba(154,90,170,.32);
  background:
    radial-gradient(circle at 18px 18px, rgba(154,90,170,.16), transparent 46px),
    rgba(255,255,255,.025);
}
.character-detail-resonance-item {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(154,90,170,.18);
}
.character-detail-resonance-item:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.character-detail-resonance-item b {
  display: block;
  color: #c798d4;
  margin-bottom: 4px;
}
.character-detail-resonance-item small {
  display: block;
  margin-top: 5px;
  color: var(--text-dim);
  font-size: .78em;
}

@media (max-width: 820px) {
  .combat-attack-trail.trail-pierce,
  .combat-attack-trail.trail-silver-bee-pin,
  .combat-attack-trail.trail-dark-avatar {
    --combat-fx-mobile-scale: .86;
  }

  .combat-attack-trail.trail-slash,
  .combat-attack-trail.trail-strike {
    --combat-fx-mobile-scale: .86;
  }

  .combat-attack-trail.trail-slash.trail-sword-slash,
  .combat-attack-trail.trail-slash.trail-dagger-slash,
  .combat-attack-trail.trail-shell-impact,
  .combat-attack-trail.trail-jaw-bite {
    --combat-fx-mobile-scale: .84;
  }

  .combat-attack-trail.trail-iron-scabbard {
    --combat-fx-mobile-scale: .78;
  }

  .combat-attack-trail.trail-star-hunter-eye,
  .combat-attack-trail.trail-star-breaker,
  .combat-attack-trail.trail-fate-d12-weakness,
  .combat-attack-trail.trail-fate-d12-burst,
  .combat-attack-trail.trail-lucky-d12-weakness,
  .combat-attack-trail.trail-lucky-d12-burst,
  .combat-attack-trail.trail-poison-cloud {
    --combat-fx-mobile-scale: .82;
  }

  #top-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "day tools"
      "dark tools"
      "actions actions";
    align-items: start;
    gap: 8px;
  }

  #day-display {
    grid-area: day;
    min-width: 0;
  }

  #darkness-display {
    grid-area: dark;
    width: 100%;
    min-width: 0;
  }

  #actions-display {
    grid-area: actions;
    width: 100%;
    min-width: 0;
  }

  #actions-display {
    justify-content: space-between;
  }

  #top-controls {
    grid-area: tools;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: start;
    gap: 6px;
    width: min(186px, 44vw);
  }

  #top-controls .btn-small {
    min-width: 52px;
    min-height: 32px;
    margin: 0;
    padding: 6px 10px;
    font-size: .84em;
    line-height: 1.15;
    white-space: nowrap;
  }

  #btn-open-log {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .modal-content.squad-select-layout {
    display: block;
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .squad-select-detail {
    display: none;
  }

  .squad-select-center {
    padding: 18px;
    overflow: visible;
  }

  #squad-select {
    grid-template-columns: 1fr;
    overflow: visible;
    padding-right: 0;
  }

  .class-card {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    min-height: 118px;
    padding: 12px 13px;
    text-align: left;
    gap: 13px;
    background:
      linear-gradient(90deg, rgba(5, 5, 5, .16), rgba(5, 5, 5, .68) 35%, rgba(10, 8, 6, .9)),
      var(--class-battle-art, none) center / cover no-repeat,
      var(--surface2);
  }

  .class-card.selected {
    background:
      linear-gradient(90deg, rgba(25, 15, 5, .2), rgba(6, 12, 8, .7) 38%, rgba(8, 8, 6, .9)),
      var(--class-battle-art, none) center / cover no-repeat,
      #1c1308;
  }

  .class-card.class-warrior { background-position: center, 34% 34%, center; }
  .class-card.class-explorer { background-position: center, 32% 34%, center; }
  .class-card.class-scholar { background-position: center, 34% 34%, center; }
  .class-card.class-support { background-position: center, 34% 34%, center; }

  .class-card-icon.class-avatar {
    width: 68px;
    height: 68px;
    margin: 0;
    border-radius: 8px;
  }

  .class-card-body {
    min-width: 0;
  }

  .class-card-name {
    margin-bottom: 2px;
    font-size: 1.06em;
  }

  .class-card-desc {
    font-size: .88em;
    line-height: 1.38;
    color: rgba(232, 222, 198, .9);
  }

  .class-card-stat {
    margin-top: 5px;
    font-size: .86em;
    color: #8fba7f;
  }

  .character-detail-modal {
    grid-template-columns: 1fr;
  }

  .character-detail-portrait {
    height: 220px;
  }

  .start-shell {
    width: min(100% - 28px, 560px);
    grid-template-columns: 1fr;
    align-content: center;
    gap: 28px;
    padding: 34px 0;
  }

  #start-screen .title-card {
    text-align: center;
  }

  .game-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .start-actions {
    justify-content: center;
  }

  .start-brief {
    align-self: stretch;
    margin-bottom: 0;
  }

  #main-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "log"
      "map"
      "side";
  }

  #right-panel {
    min-width: 0;
  }

  #log-panel {
    max-height: 180px;
  }
}

@media (max-width: 560px) {
  .day-transition-overlay {
    padding: 18px;
  }

  .day-transition-title {
    font-size: 2.65rem;
  }

  .day-transition-darkness {
    font-size: 1.2rem;
  }

  .day-transition-next {
    font-size: 1rem;
  }

  #top-bar {
    padding: 10px;
  }

  #top-controls {
    width: min(178px, 47vw);
  }

  #top-controls .btn-small {
    flex: 0 0 auto;
    padding-left: 9px;
    padding-right: 9px;
  }

  .actions-hint {
    margin-left: auto;
  }

  .turn-end-float {
    width: max-content;
    max-width: calc(100% - 24px);
    white-space: normal;
  }
}

@media (max-width: 760px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    font-size: 15px;
  }

  #app {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .screen.active {
    min-height: 100dvh;
  }

  #game-screen {
    min-height: 100dvh;
    padding: 8px;
    overflow: visible;
  }

  #main-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "map"
      "side";
    gap: 8px;
    min-height: 0;
    overflow: visible;
  }

  #map-panel {
    padding: 12px 8px 14px;
    min-height: min(58vh, 430px);
    overflow: hidden;
    align-items: flex-start;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }

  #map-viewport {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    align-self: stretch;
    min-height: min(50vh, 360px);
    touch-action: pan-y;
    cursor: grab;
  }

  #map-viewport:active {
    cursor: grabbing;
  }

  #map-grid {
    margin: 0;
    touch-action: pan-y;
  }

  @media (pointer: fine) {
    #map-viewport {
      width: max-content;
      max-width: 100%;
      flex: 0 0 auto;
      align-self: center;
      min-height: auto;
      touch-action: auto;
      cursor: default;
    }

    #map-viewport:active {
      cursor: default;
    }

    #map-grid {
      touch-action: auto;
    }
  }

  #right-panel {
    min-width: 0;
    max-height: none;
    overflow: visible;
    padding: 14px 10px;
  }

  #squad-panel,
  #effects-panel,
  #resonance-panel,
  #notes-shortcut {
    padding: 8px;
  }

  .char-card {
    margin: 0 0 10px;
    min-height: 112px;
    padding: 10px 12px;
  }

  .char-card::after {
    inset: -20px -24px -22px;
  }

  #log-panel {
    display: none;
  }

  body.mobile-log-open #log-panel {
    position: fixed;
    inset: 8px;
    z-index: 11000;
    display: flex;
    width: auto;
    max-height: none;
    padding: 14px;
    border: 1px solid rgba(201, 145, 47, .46);
    border-radius: 10px;
    background-image:
      radial-gradient(circle at 50% 0%, rgba(201, 145, 47, .16), transparent 44%),
      linear-gradient(180deg, rgba(30, 26, 20, .98), rgba(8, 8, 7, .98));
    background-color: #0d0c0a;
    background-size: auto, auto;
    background-position: center, center;
    background-repeat: no-repeat;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .72), inset 0 0 30px rgba(0, 0, 0, .52);
  }

  body.mobile-log-open #log-panel::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, .66);
  }

  body.mobile-log-open .log-panel-title {
    min-height: 38px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    transform: none;
    border-bottom: 1px solid rgba(201, 145, 47, .28);
    place-items: center start;
  }

  body.mobile-log-open #log-messages {
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
  }

  .log-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    color: #f0d28f;
    border: 1px solid rgba(201, 145, 47, .5);
    background: rgba(34, 23, 10, .82);
    cursor: pointer;
    font: inherit;
    font-size: .82em;
    font-weight: 800;
  }

  .modal {
    align-items: stretch;
    padding: 8px;
  }

  .modal-content,
  .modal-content.wide,
  .modal-content.narrative-modal {
    width: 100%;
    max-width: none;
    height: auto;
    max-height: calc(100dvh - 16px);
    padding: 22px 18px 18px;
  }

  .modal-content.combat-modal {
    width: 100%;
    max-width: none;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 16px 12px 12px;
    overflow-y: auto;
  }

  .modal-content h2 {
    margin-bottom: 8px;
    font-size: 1.12em;
  }

  .modal-content.tutorial-modal {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    overflow: hidden;
  }

  #modal-desc {
    padding-right: 4px;
    padding-bottom: 14px;
    font-size: .96em;
  }

  .modal-content.tutorial-modal #modal-desc {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-top: 8px;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
  }

  #event-modal .modal-content:not(.combat-modal):not(.tutorial-modal):not(.character-detail-content):not(.wager-modal-content) h2 {
    order: 0;
  }

  #event-modal .modal-content:not(.combat-modal):not(.tutorial-modal):not(.character-detail-content):not(.wager-modal-content) #modal-desc {
    order: 2;
  }

  #event-modal .modal-content:not(.combat-modal):not(.tutorial-modal):not(.character-detail-content):not(.wager-modal-content):not(.event-backdrop-modal) {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    overflow: hidden;
  }

  #event-modal .modal-content:not(.combat-modal):not(.tutorial-modal):not(.character-detail-content):not(.wager-modal-content):not(.event-backdrop-modal) #modal-desc {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #event-modal .modal-content:not(.combat-modal):not(.tutorial-modal):not(.character-detail-content):not(.wager-modal-content) .dice-row {
    order: 3;
  }

  #event-modal .modal-content:not(.combat-modal):not(.tutorial-modal):not(.character-detail-content):not(.wager-modal-content) #modal-choices {
    order: 4;
  }

  .event-illustration-img {
    position: relative;
    order: 1;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    max-height: min(24dvh, 170px);
    margin: 2px auto 12px;
    transform: none;
    align-self: center;
    z-index: 1;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .42));
  }

  #modal-choices {
    gap: 8px;
  }

  .modal-content.tutorial-modal #modal-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    gap: 8px;
  }

  .modal-content.tutorial-modal .choice-btn {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 8px 6px;
  }

  .choice-btn,
  .choice-btn.has-choice-hint {
    flex: 1 1 100%;
    width: 100%;
    min-height: 52px;
    height: auto;
    padding: 10px 12px;
  }

  .modal-content.squad-select-layout {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    padding: 0 0 calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .modal-content.squad-select-layout h2 {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 -18px 10px;
    padding: 14px 18px 10px;
    background:
      linear-gradient(180deg, rgba(20, 18, 15, .98), rgba(14, 13, 12, .94));
    border-bottom: 1px solid rgba(201, 145, 47, .22);
  }

  .modal-content.squad-select-layout .squad-select-center {
    padding: 0 18px 22px;
    overflow: visible;
  }

  .modal-content.squad-select-layout .squad-actions {
    position: fixed;
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
    gap: 8px;
    margin: 0;
    padding: 10px;
    width: auto;
    max-height: none;
    overflow: visible;
    background:
      linear-gradient(180deg, rgba(20, 18, 15, .12), rgba(14, 13, 12, .94) 38%, rgba(14, 13, 12, .98));
    box-shadow: 0 -14px 24px rgba(0, 0, 0, .34);
  }

  .modal-content.squad-select-layout .squad-actions button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 9px 8px;
  }

  .modal-content.library-select-modal-content {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - 16px);
  }

  .library-select-layout {
    grid-template-columns: 1fr;
    overflow-y: auto;
    max-height: calc(100dvh - 180px);
  }

  .library-select-relic-list {
    grid-template-columns: 1fr;
  }

  .event-relic-choice-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .event-relic-choice {
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-rows: auto;
    min-height: 150px;
    padding: 12px;
  }

  .event-relic-choice-visual {
    min-height: 112px;
  }

  .event-relic-choice-img {
    max-width: 76px;
    max-height: 96px;
  }

  .combat-scene {
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 8px;
    min-height: 0;
    padding: 10px 10px 12px;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
  }

  .combat-enemy-card,
  .combat-squad-card {
    height: auto;
    min-height: 0;
    padding: 8px;
  }

  .combat-enemy-card {
    order: 1;
    min-height: 214px;
  }

  .combat-floating-enemy-dice {
    top: 5px;
    left: 5px;
    transform: none;
    z-index: 30;
  }

  .combat-enemy-damage-die-panel {
    top: 10px;
    left: 44px;
    transform: none;
    z-index: 32;
  }

  .combat-center {
    order: 2;
    min-height: auto;
    padding: 0;
    margin: 0;
  }

  .combat-tutorial-card,
  .combat-tutorial-card.target-guard,
  .combat-tutorial-card.target-bag,
  .combat-tutorial-card.target-bag_item,
  .combat-tutorial-card.target-banner,
  .combat-tutorial-card.target-ally,
  .combat-tutorial-card[data-step="attack_role"] {
    position: relative;
    order: 3;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px 13px;
    border-width: 2px;
  }

  .combat-squad-card {
    order: 4;
  }

  .combat-status-bar {
    order: 5;
    min-height: 30px;
    padding: 6px 8px;
    line-height: 1.35;
    text-align: center;
    font-size: .86em;
    position: relative;
    z-index: 2;
  }

  .combat-enemy-card.has-card-bg::before,
  .combat-enemy-card.has-card-bg::after {
    height: 148px;
  }

  .combat-enemy-card.has-card-bg {
    background:
      linear-gradient(180deg, rgba(10, 10, 10, .08) 0, rgba(10, 10, 10, .16) 148px, rgba(10, 10, 10, .66) 148px, rgba(10, 10, 10, .72) 100%);
  }

  .combat-enemy-card.has-card-bg .combat-enemy-figure {
    height: 84px;
    min-height: 84px;
    margin-bottom: 0;
  }

  .combat-enemy-img {
    width: 88px;
    height: 88px;
  }

  .combat-enemy-img.large {
    width: 124px;
    height: 124px;
    margin: -20px -16px -18px;
  }

  .combat-enemy-name {
    height: auto;
    margin-bottom: 3px;
    font-size: .98em;
  }

  .combat-enemy-divider {
    margin-top: 7px;
  }

  .combat-enemy-info-panel {
    margin-top: 7px;
    padding-top: 0;
    min-height: 42px;
    overflow: visible;
  }

  .combat-enemy-card.has-card-bg .combat-enemy-info-panel {
    margin: 8px -8px -8px;
    padding: 5px 8px 6px;
  }

  .combat-enemy-info-panel .combat-weakness-icon-row {
    min-height: 34px;
    margin: 0 0 2px;
    align-items: center;
  }

  .combat-enemy-intent-panel,
  .combat-enemy-block-panel {
    transform-origin: center;
  }

  .combat-enemy-intent-panel {
    transform: translateX(-50%) scale(.84);
  }

  .combat-enemy-block-panel {
    transform: translateX(-50%) scale(.84);
  }

  .combat-enemy-attack-panel {
    top: 96px;
    transform: translateX(-50%) scale(.9);
  }

  .combat-enemy-stance-divider {
    margin: -2px 0;
  }

  .combat-tools {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border: 1px solid rgba(201, 145, 47, .22);
    background: rgba(8, 7, 6, .58);
  }

  .combat-actions,
  .combat-bottom-tools {
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .combat-actions {
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .combat-bottom-tools {
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  .combat-vs {
    display: none;
  }

  .combat-tools .combat-guard-button,
  .combat-tools .combat-bag-button {
    width: 56px;
    min-width: 56px;
    min-height: 54px;
    padding: 4px;
    font-size: .74em;
  }

  .combat-bag-panel {
    position: fixed;
    inset: 0;
    transform: none;
    width: auto;
    max-height: none;
    z-index: 260;
  }

  .combat-bag-dialog {
    width: min(360px, calc(100vw - 20px));
    max-height: min(58dvh, 330px);
  }

  .combat-squad-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 7px;
    overflow: hidden;
  }

  .combat-squad-card .combat-side-label {
    grid-column: 1 / -1;
    height: auto;
    min-height: 0;
    margin: 0;
    line-height: 1.2;
  }

  .combat-unit {
    min-height: 98px;
    padding: 8px 9px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    align-content: start;
    column-gap: 7px;
    overflow: hidden;
  }

  .combat-unit-main {
    grid-column: 1 / -1;
    height: auto;
    min-height: 26px;
    margin-bottom: 2px;
    gap: 4px;
  }

  .combat-unit .combat-stat-line {
    grid-column: 1;
    font-size: .82em;
    line-height: 1.25;
  }

  .combat-unit .combat-threat-meter {
    grid-column: 1;
    height: 5px;
    margin-top: 3px;
  }

  .combat-unit .combat-hp-row {
    grid-column: 1 / -1;
    align-self: start;
    min-height: 18px;
    margin-top: 3px;
    padding-right: 2px;
    overflow: visible;
  }

  .combat-unit > .combat-card-dice {
    right: 5px;
    top: 5px;
    width: 26px;
    height: 26px;
    padding: 3px;
  }

  .combat-name {
    font-size: .95em;
    line-height: 1.2;
  }

  .combat-hp-row {
    font-size: .78em;
  }

  .combat-hp-bar {
    height: 7px;
    min-width: 54px;
  }

  .combat-ally-hp-text,
  .combat-enemy-hp-text {
    flex: 0 0 auto;
    min-width: 42px;
    text-align: right;
    white-space: nowrap;
  }

  .combat-unit.intent-targeted {
    border-color: rgba(255, 88, 70, .96);
    background:
      radial-gradient(circle at 18% 50%, rgba(255, 72, 54, .22), transparent 54%),
      rgba(80, 14, 12, .22);
    box-shadow:
      inset 0 0 0 1px rgba(255, 118, 86, .38),
      0 0 18px rgba(255, 62, 46, .36);
  }

  .combat-unit.intent-targeted::after {
    content: "目標";
    position: absolute;
    right: 38px;
    top: 7px;
    z-index: 7;
    padding: 2px 7px;
    color: #ffe5df;
    border: 1px solid rgba(255, 118, 86, .74);
    background: rgba(82, 13, 10, .9);
    font-size: .72em;
    font-weight: 900;
    line-height: 1.25;
  }

  .combat-intent-arrow {
    display: none;
  }

  .combat-followup-badge {
    left: auto;
    right: 38px;
    top: 6px;
    transform: none;
    max-width: min(76px, calc(100% - 58px));
    min-height: 24px;
    padding: 3px 8px;
  }

  .modal-content.combat-modal #modal-desc {
    min-height: 58px;
    max-height: 82px;
    overflow-y: auto;
    margin-bottom: 6px;
    font-size: .9em;
  }

  .modal-content.combat-modal .combat-log-open {
    right: 12px;
    bottom: 10px;
    min-height: 32px;
    max-width: 96px;
    font-size: .82em;
  }

  .combat-log-overlay {
    padding: 8px;
  }

  .combat-log-panel {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 14px;
  }

  .combat-log-panel-head h2 {
    font-size: 1.08em;
  }
}

@media (max-width: 430px) {
  :root {
    --map-cell-size: clamp(28px, 7.35vw, 34px);
  }

  #game-screen {
    padding: 6px;
  }

  #top-bar {
    gap: 4px 6px;
  }

  #top-controls {
    width: min(168px, 48vw);
  }

  #top-controls .btn-small {
    min-width: 50px;
    min-height: 44px;
    padding: 7px 9px;
  }

  /* top-bar 減肥＋觸控目標（手機） */
  .actions-hint {
    display: none;
  }

  #actions-display {
    flex-wrap: nowrap;
    gap: 6px;
  }

  #actions-display .btn-small {
    min-height: 40px;
  }

  .darkness-bar {
    margin-top: 2px;
  }

  #darkness-next {
    display: none;
  }

  .combat-bag-close {
    width: 40px;
    height: 40px;
  }

  #map-panel {
    padding-left: 6px;
    padding-right: 6px;
    min-height: 56vh;
  }

  #map-viewport {
    min-height: 48vh;
  }

  .modal-content.tutorial-modal #modal-choices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .modal-content.tutorial-modal .choice-btn {
    min-height: 42px;
    padding-left: 4px;
    padding-right: 4px;
    font-size: .9em;
  }

  .map-cell {
    border-width: 1px;
  }

  .cell-icon {
    font-size: .98em;
  }

  .cell-label {
    font-size: .58em;
  }

  .modal-content,
  .modal-content.wide,
  .modal-content.narrative-modal {
    padding: 18px 14px 14px;
  }

  .event-illustration-img {
    width: 100%;
    max-height: min(22dvh, 150px);
  }

  .event-relic-choice {
    grid-template-columns: 70px minmax(0, 1fr);
    min-height: 136px;
    gap: 9px;
  }

  .event-relic-choice-visual {
    min-height: 98px;
  }

  .event-relic-choice-name {
    font-size: 1.04em;
  }

  .event-relic-choice-desc {
    font-size: .82em;
  }

  .combat-scene {
    grid-template-rows: auto auto auto auto;
    gap: 6px;
    padding: 10px 7px 10px;
  }

  .combat-enemy-card {
    min-height: 202px;
  }

  .combat-enemy-card.has-card-bg::before,
  .combat-enemy-card.has-card-bg::after {
    height: 138px;
  }

  .combat-enemy-card.has-card-bg {
    background:
      linear-gradient(180deg, rgba(10, 10, 10, .08) 0, rgba(10, 10, 10, .16) 138px, rgba(10, 10, 10, .66) 138px, rgba(10, 10, 10, .72) 100%);
  }

  .combat-enemy-card.has-card-bg .combat-enemy-figure {
    height: 78px;
    min-height: 78px;
  }

  .combat-enemy-img {
    width: 82px;
    height: 82px;
  }

  .combat-enemy-img.large {
    width: 116px;
    height: 116px;
  }

  .combat-tools {
    align-items: stretch;
  }

  .combat-actions .choice-btn {
    min-width: 82px;
    max-width: 104px;
    min-height: 32px;
    padding: 5px 7px;
    font-size: .86em;
  }

  .combat-tools .combat-guard-button,
  .combat-tools .combat-bag-button {
    min-width: 58px;
    font-size: .82em;
  }

  .combat-squad-card {
    gap: 6px;
  }

  .combat-unit {
    min-height: 94px;
    padding: 7px 8px 9px;
  }

  .combat-floating-enemy-dice .combat-card-dice.enemy {
    width: 32px;
    height: 32px;
  }

  .combat-unit > .combat-card-dice {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 760px) {
  .combat-tutorial-card.target-enemy,
  .combat-tutorial-card.target-popover_close {
    display: none;
  }

  .combat-status-popover {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 14px !important;
    transform: translateX(-50%);
    width: min(352px, calc(100vw - 28px));
    max-height: min(52vh, 360px);
    overflow-y: auto;
    border-color: rgba(201, 145, 47, .5);
    background:
      linear-gradient(180deg, rgba(18, 15, 12, .98), rgba(6, 8, 7, .98));
    box-shadow:
      0 16px 38px rgba(0, 0, 0, .64),
      inset 0 0 18px rgba(201, 145, 47, .08);
  }

  .combat-enemy-card.enemy-cage_warden.has-card-bg,
  .combat-enemy-card.enemy-dice_corruptor.has-card-bg,
  .combat-enemy-card.enemy-echo_guardian_wound.has-card-bg,
  .combat-enemy-card.enemy-echo_guardian_eagle.has-card-bg,
  .combat-enemy-card.enemy-echo_guardian_fate.has-card-bg,
  .combat-enemy-card.enemy-echo_guardian_banner.has-card-bg,
  .combat-enemy-card.enemy-echo_guardian_sword.has-card-bg,
  .combat-enemy-card.enemy-night_heart.has-card-bg {
    background: rgba(10, 10, 10, .18);
  }

  .combat-enemy-card.enemy-cage_warden.has-card-bg::before,
  .combat-enemy-card.enemy-dice_corruptor.has-card-bg::before,
  .combat-enemy-card.enemy-echo_guardian_wound.has-card-bg::before,
  .combat-enemy-card.enemy-echo_guardian_eagle.has-card-bg::before,
  .combat-enemy-card.enemy-echo_guardian_fate.has-card-bg::before,
  .combat-enemy-card.enemy-echo_guardian_banner.has-card-bg::before,
  .combat-enemy-card.enemy-echo_guardian_sword.has-card-bg::before,
  .combat-enemy-card.enemy-night_heart.has-card-bg::before,
  .combat-enemy-card.enemy-cage_warden.has-card-bg::after,
  .combat-enemy-card.enemy-dice_corruptor.has-card-bg::after,
  .combat-enemy-card.enemy-echo_guardian_wound.has-card-bg::after,
  .combat-enemy-card.enemy-echo_guardian_eagle.has-card-bg::after,
  .combat-enemy-card.enemy-echo_guardian_fate.has-card-bg::after,
  .combat-enemy-card.enemy-echo_guardian_banner.has-card-bg::after,
  .combat-enemy-card.enemy-echo_guardian_sword.has-card-bg::after,
  .combat-enemy-card.enemy-night_heart.has-card-bg::after {
    height: 100%;
  }

  .combat-enemy-card.enemy-cage_warden.has-card-bg::after,
  .combat-enemy-card.enemy-dice_corruptor.has-card-bg::after,
  .combat-enemy-card.enemy-echo_guardian_wound.has-card-bg::after,
  .combat-enemy-card.enemy-echo_guardian_eagle.has-card-bg::after,
  .combat-enemy-card.enemy-echo_guardian_fate.has-card-bg::after,
  .combat-enemy-card.enemy-echo_guardian_banner.has-card-bg::after,
  .combat-enemy-card.enemy-night_heart.has-card-bg::after {
    background:
      linear-gradient(180deg, transparent 0, transparent 56%, rgba(3, 1, 6, .28) 76%, rgba(2, 1, 5, .54) 100%),
      var(--enemy-card-bg) center top / 100% auto no-repeat;
  }

  .combat-enemy-card.enemy-cage_warden.has-card-bg::after {
    background:
      linear-gradient(180deg, transparent 0, transparent 56%, rgba(3, 1, 6, .28) 76%, rgba(2, 1, 5, .54) 100%),
      var(--enemy-card-bg) center top / 86% auto no-repeat;
  }

  .combat-enemy-card.enemy-echo_guardian_sword.has-card-bg::after {
    background:
      linear-gradient(180deg, transparent 0, transparent 56%, rgba(3, 1, 6, .28) 76%, rgba(2, 1, 5, .54) 100%),
      var(--enemy-card-bg) center 8px / auto 92% no-repeat;
  }
}

@media (max-width: 680px) {
  .modal-content.event-backdrop-modal:not(.tutorial-backdrop-modal):not(:has(.dark-avatar-chase-backdrop)):not(.resonance-awaken) {
    width: 100%;
    max-width: none;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 18px 14px 14px;
  }

  .modal-content.event-backdrop-modal:not(.tutorial-backdrop-modal):not(:has(.dark-avatar-chase-backdrop)):not(.resonance-awaken) .event-backdrop-img {
    inset: 8px;
    background-position: var(--event-mobile-bg-pos, 50% 36%);
    background-size: cover;
    filter: brightness(.96) saturate(1.06);
  }

  .modal-content.event-backdrop-modal:not(.tutorial-backdrop-modal):not(:has(.dark-avatar-chase-backdrop)):not(.resonance-awaken)::after {
    inset: 8px;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .18) 24%, rgba(0, 0, 0, .64) 66%, rgba(0, 0, 0, .92) 100%),
      radial-gradient(ellipse at 50% 28%, rgba(255, 196, 98, .08), rgba(0, 0, 0, .42) 72%);
  }

  .modal-content.event-backdrop-modal:not(.tutorial-backdrop-modal):not(:has(.dark-avatar-chase-backdrop)):not(.resonance-awaken) #modal-desc {
    margin-top: auto;
    max-height: min(43dvh, 360px);
    padding: 11px 12px;
    border: 1px solid rgba(201, 145, 47, .26);
    border-radius: 8px;
    overflow-y: auto;
    background:
      linear-gradient(180deg, rgba(10, 7, 4, .62), rgba(5, 4, 3, .86));
    box-shadow: inset 0 1px 0 rgba(255, 232, 172, .08), 0 12px 28px rgba(0, 0, 0, .36);
  }

  .modal-content.event-backdrop-modal:not(.tutorial-backdrop-modal):not(:has(.dark-avatar-chase-backdrop)):not(.resonance-awaken) #modal-choices {
    position: relative;
    z-index: 2;
    background:
      linear-gradient(180deg, rgba(5, 4, 3, 0), rgba(5, 4, 3, .72));
  }

  .event-backdrop-fate-gambling-table,
  .event-backdrop-fate-table-blood-wager,
  .event-backdrop-fate-table-night-wager,
  .event-backdrop-fate-table-life-wager {
    --event-mobile-bg-pos: 50% 40%;
  }

  .event-backdrop-fate-table-blood-fail,
  .event-backdrop-fate-table-night-fail,
  .event-backdrop-fate-table-life-fail {
    --event-mobile-bg-pos: 50% 38%;
  }

  .event-backdrop-echo-site-wound,
  .event-backdrop-echo-site-eagle,
  .event-backdrop-echo-site-fate,
  .event-backdrop-echo-site-banner {
    --event-mobile-bg-pos: 50% 32%;
  }

  .event-backdrop-forest-footprints,
  .event-backdrop-forest-ancestral-pyre,
  .event-backdrop-forest-inscription,
  .event-backdrop-forest-dark-growth {
    --event-mobile-bg-pos: 50% 34%;
  }

  .event-backdrop-forest-supply-pack,
  .event-backdrop-forest-snare-trap,
  .event-backdrop-swallowing-mud {
    --event-mobile-bg-pos: 50% 42%;
  }

  .event-backdrop-ruins-enemy,
  .event-backdrop-ruins-falling-debris,
  .event-backdrop-ruins-old-shrine {
    --event-mobile-bg-pos: 50% 34%;
  }

  .event-backdrop-ruins-inscription,
  .event-backdrop-ruins-unstable-floor,
  .event-backdrop-ruins-supply-cache,
  .event-backdrop-ruins-wall-marks {
    --event-mobile-bg-pos: 50% 42%;
  }

  .event-backdrop-cave-eyes,
  .event-backdrop-cave-dripping-water,
  .event-backdrop-cave-starlight-shard,
  .event-backdrop-cave-lost-voice {
    --event-mobile-bg-pos: 50% 32%;
  }

  .event-backdrop-cave-dark-trap,
  .event-backdrop-cave-razor-stone,
  .event-backdrop-cave-inscription {
    --event-mobile-bg-pos: 50% 42%;
  }

  .event-backdrop-empty-shadow-passage,
  .event-backdrop-empty-darkness-seep,
  .event-backdrop-empty-dark-whisper {
    --event-mobile-bg-pos: 50% 34%;
  }

  .event-backdrop-empty-supply,
  .event-backdrop-empty-survivor-clue,
  .event-backdrop-empty-old-camp,
  .event-backdrop-empty-treasure-map {
    --event-mobile-bg-pos: 50% 42%;
  }

  .modal-content.resonance-awaken {
    width: 100%;
    max-width: none;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 18px 14px 14px;
    background:
      linear-gradient(180deg, rgba(8, 5, 3, .22), rgba(8, 5, 3, .64)),
      url("assets/ui/modal-panel-frame.png") center / 100% 100% no-repeat,
      var(--surface2);
  }

  .modal-content.resonance-awaken::before {
    inset: 8px;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .2) 28%, rgba(0, 0, 0, .62) 62%, rgba(0, 0, 0, .9) 100%),
      radial-gradient(ellipse at 50% 30%, rgba(255, 184, 82, .08), rgba(0, 0, 0, .48) 68%);
  }

  .modal-content.resonance-awaken::after {
    inset: 8px;
    background-position: 50% 35%;
    filter: brightness(.9) saturate(1.08);
  }

  .resonance-awaken-icon-scene {
    height: clamp(150px, 28dvh, 210px);
    margin-top: 0;
    margin-bottom: 8px;
  }

  .resonance-awaken-copy.compact {
    gap: 6px;
    padding: 9px 10px;
  }

  .resonance-awaken-lead {
    font-size: .94em;
  }

  .resonance-awaken-entry {
    padding-left: 8px;
  }

  .resonance-awaken-entry p {
    font-size: .9em;
    line-height: 1.43;
  }
}

/* ── QA polish：日誌面板外框不捲動，僅訊息列表捲動（標題釘頂、指引任務卡釘底） ── */
#log-panel { overflow-y: hidden; }
#log-messages {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}