:root {
  --bg: #100f14;
  --bg-deep: #08080c;
  --paper: #efe1c8;
  --paper-soft: rgba(239, 225, 200, .08);
  --paper-line: rgba(239, 225, 200, .18);
  --paper-strong: rgba(239, 225, 200, .34);
  --ink: #f7ead3;
  --muted: #b9aa93;
  --faint: rgba(247, 234, 211, .46);
  --gold: #d6b36a;
  --wine: #8d3544;
  --wine-soft: rgba(141, 53, 68, .22);
  --blue: #526f9f;
  --blue-soft: rgba(82, 111, 159, .22);
  --green: #8fc28a;
  --shadow: 0 26px 80px rgba(0, 0, 0, .45);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 8% 10%, rgba(141, 53, 68, .22), transparent 25rem),
    radial-gradient(circle at 92% 5%, rgba(82, 111, 159, .28), transparent 27rem),
    linear-gradient(135deg, #17141b 0%, #0a0a10 54%, #120d10 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at top, black 0 30%, transparent 78%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 0 52%, rgba(0,0,0,.36) 100%);
}

button {
  appearance: none;
  border: 1px solid var(--paper-line);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  border-radius: 999px;
  font-weight: 850;
  letter-spacing: -.02em;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
button:hover { transform: translateY(-1px); border-color: var(--paper-strong); background: rgba(255,255,255,.095); }
button:active { transform: translateY(0); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.app {
  width: min(1500px, calc(100% - 28px));
  margin: 0 auto;
  padding: 18px 0 34px;
  position: relative;
  z-index: 1;
}

.glass {
  border: 1px solid var(--paper-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
    rgba(14, 13, 18, .72);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  position: sticky;
  top: 10px;
  z-index: 20;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  padding: 10px 12px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: rgba(10, 10, 14, .78);
  backdrop-filter: blur(18px);
}
.logo-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--paper), var(--gold) 58%, #6f4726);
  color: #1b120a;
  font-weight: 1000;
  letter-spacing: -.08em;
}
.logo strong { display: block; font-size: 15px; line-height: 1.1; }
.logo small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.topnav {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  border: 1px solid var(--paper-line);
  background: rgba(10, 10, 14, .74);
  backdrop-filter: blur(18px);
}
.nav-button { padding: 9px 13px; font-size: 13px; }

.layout {
  display: grid;
  grid-template-columns: 292px minmax(580px, 1fr) 348px;
  gap: 16px;
  align-items: start;
}
.left-column, .right-column, .center-column { display: grid; gap: 16px; }
.left-column, .right-column { position: sticky; top: 88px; }

.status-card, .panel, .battlefield, .bench-panel {
  border-radius: var(--radius-xl);
  padding: 16px;
}
.round-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--wine-soft);
  color: #ffdfe4;
  font-weight: 900;
  margin-bottom: 12px;
}
.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.status-grid div {
  min-height: 82px;
  border-radius: 18px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.055);
}

.status-grid div { position: relative; overflow: hidden; }
.status-grid div.player-hp-hit {
  animation: player-hp-hit-shake .42s ease;
  border-color: rgba(255, 91, 121, .66);
  box-shadow: 0 0 0 4px rgba(255, 91, 121, .14), 0 0 28px rgba(255, 91, 121, .22), inset 0 0 28px rgba(126, 24, 38, .28);
}
.player-hp-damage-float {
  position: absolute;
  right: 12px;
  top: 8px;
  z-index: 3;
  color: #ffb3c0;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,.75), 0 0 16px rgba(255,91,121,.4);
  pointer-events: none;
  animation: player-hp-damage-rise .85s ease forwards;
}
@keyframes player-hp-hit-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
@keyframes player-hp-damage-rise {
  0% { opacity: 0; transform: translateY(8px) scale(.9); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-24px) scale(1.08); }
}
.status-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
}
.status-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.04em;
}
.income-strip {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  border-radius: 999px;
  padding: 10px 12px;
  background: rgba(0,0,0,.22);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.income-strip b { color: var(--green); }

.panel-title { margin-bottom: 12px; }
.panel-title.horizontal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.panel-title span, .section-kicker {
  display: block;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10px;
  font-weight: 950;
  margin-bottom: 5px;
}
h1, h2, p { margin-top: 0; }
h1 {
  margin-bottom: 10px;
  font-size: clamp(36px, 5vw, 66px);
  line-height: .9;
  letter-spacing: -.07em;
}
h2 {
  margin-bottom: 0;
  font-size: 22px;
  letter-spacing: -.04em;
}
p { color: var(--muted); line-height: 1.62; }

.small-button, .link-button { padding: 8px 11px; font-size: 12px; }
.secondary-button { padding: 10px 13px; color: var(--muted); }
.primary-button {
  padding: 11px 16px;
  background: linear-gradient(135deg, var(--paper), var(--gold) 52%, #8a5c2e);
  color: #1a1008;
  border-color: rgba(255,255,255,.34);
  box-shadow: 0 12px 34px rgba(214, 179, 106, .17);
}
.link-button { background: transparent; border-color: transparent; color: var(--gold); }
.danger { color: #ffd7dc; border-color: rgba(141, 53, 68, .45); }

.battlefield { overflow: hidden; position: relative; }
.battlefield::after {
  content: "✦";
  position: absolute;
  right: 24px;
  top: 16px;
  font-size: 100px;
  color: rgba(239,225,200,.045);
  line-height: 1;
}
.battlefield-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.battlefield-head p { max-width: 710px; margin-bottom: 0; word-break: keep-all; }
.battle-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; min-width: 300px; }
.board-counter {
  margin: 14px 0 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  color: var(--muted);
  font-weight: 900;
}
.board-counter b { color: var(--gold); }

.special-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}
.special-tiles[hidden] { display: none; }
.special-tile {
  min-height: 96px;
  border-radius: 18px;
  padding: 12px;
  border: 1px solid rgba(239,225,200,.18);
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 36px rgba(255,255,255,.035);
  position: relative;
  overflow: hidden;
}
.special-tile::after {
  content: "";
  position: absolute;
  inset: auto -24px -36px auto;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  opacity: .28;
  filter: blur(8px);
}
.special-tile.blood-cup {
  border-color: rgba(186, 56, 70, .5);
  background: linear-gradient(135deg, rgba(141, 53, 68, .28), rgba(255,255,255,.035));
}
.special-tile.blood-cup::after { background: #ba3846; }
.special-tile.revelation-order {
  border-color: rgba(82, 111, 159, .58);
  background: linear-gradient(135deg, rgba(82, 111, 159, .30), rgba(255,255,255,.035));
}
.special-tile.revelation-order::after { background: #6f9cff; }
.special-tile.overdrive-tile {
  border-color: rgba(214, 179, 106, .6);
  background: linear-gradient(135deg, rgba(214, 179, 106, .26), rgba(255,255,255,.035));
}
.special-tile.overdrive-tile::after { background: #ffd166; }
.special-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: -.03em;
}
.special-value {
  margin-top: 7px;
  font-size: 24px;
  font-weight: 1000;
  letter-spacing: -.06em;
}
.special-detail {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  font-weight: 850;
}
.special-bar {
  height: 7px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.special-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--paper), var(--gold));
  transition: width .25s ease;
}

.board-stage {
  padding: 14px;
  border-radius: 28px;
  border: 1px solid var(--paper-line);
  background:
    radial-gradient(circle at 50% 51%, rgba(214,179,106,.14), transparent 18rem),
    linear-gradient(180deg, rgba(141,53,68,.14), rgba(82,111,159,.14));
}
.field-label {
  display: flex;
  justify-content: space-between;
  margin: 0 4px 7px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 950;
}
.field-label.enemy { color: #e0b4bb; }
.field-label.ally { color: #bdd1ff; }
.divider-line {
  height: 1px;
  margin: 12px 0;
  background: linear-gradient(90deg, transparent, rgba(239,225,200,.45), transparent);
}
.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(70px, 1fr));
  gap: 10px;
}
.slot {
  min-height: 92px;
  border-radius: 17px;
  border: 1px solid rgba(239,225,200,.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.018)),
    rgba(0,0,0,.18);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.slot::before {
  content: attr(data-pos);
  position: absolute;
  left: 9px;
  top: 7px;
  color: rgba(247,234,211,.18);
  font-size: 10px;
  font-weight: 900;
}
.slot:hover { transform: translateY(-1px); border-color: var(--paper-strong); background: rgba(255,255,255,.06); }
.enemy-board .slot { background: linear-gradient(135deg, rgba(141,53,68,.12), rgba(0,0,0,.18)); }
.ally-board .slot { background: linear-gradient(135deg, rgba(82,111,159,.14), rgba(0,0,0,.18)); }
.slot.selected { outline: 2px solid var(--gold); box-shadow: 0 0 0 5px rgba(214,179,106,.12); }

.unit-token {
  width: 100%;
  height: 100%;
  min-height: 90px;
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.16), transparent 2.6rem),
    linear-gradient(145deg, rgba(239,225,200,.13), rgba(255,255,255,.03));
}
.token-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.token-name { font-weight: 950; font-size: 13px; letter-spacing: -.03em; line-height: 1.08; }
.token-badges { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cost-badge, .rarity-badge, .star-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(214,179,106,.2);
  color: #ffe8aa;
  font-weight: 950;
  font-size: 12px;
}
.star-badge {
  min-width: auto;
  padding: 0 7px;
  color: #fff1bd;
  background: rgba(141,53,68,.24);
  border: 1px solid rgba(214,179,106,.25);
  letter-spacing: -.05em;
}
.token-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pill {
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 850;
  color: var(--ink);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.09);
}
.pill.inspiration { background: rgba(214,179,106,.16); color: #ffe4a7; }
.pill.status-pill.negative { background: rgba(126, 24, 38, .42); color: #ffc7d0; border: 1px solid rgba(255, 135, 164, .32); }
.token-stats { display: flex; gap: 6px; color: var(--faint); font-size: 11px; font-weight: 850; }

.bench { display: grid; grid-template-columns: repeat(5, minmax(72px, 1fr)); gap: 10px; }
.bench .slot { min-height: 96px; }

.shop-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}
.shop-meta b { color: var(--gold); }
.shop-list { display: grid; gap: 10px; }
.shop-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(239,225,200,.15);
  background: rgba(255,255,255,.055);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.shop-card:hover { transform: translateY(-1px); border-color: var(--paper-strong); background: rgba(255,255,255,.08); }
.shop-card.disabled { opacity: .45; }
.shop-card.empty-shop { cursor: default; opacity: .58; border-style: dashed; }
.shop-card.empty-shop:hover { transform: none; border-color: rgba(239,225,200,.15); background: rgba(255,255,255,.055); }
.shop-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, var(--paper), var(--gold) 45%, #6f4726);
  color: #241408;
  font-weight: 1000;
  letter-spacing: -.05em;
}
.shop-icon.empty { background: rgba(255,255,255,.08); color: var(--faint); }
.shop-icon.portrait-icon {
  overflow: hidden;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(239,225,200,.22);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.16);
}
.shop-icon.portrait-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-card h3 { margin: 0 0 4px; font-size: 15px; letter-spacing: -.04em; }
.shop-card p { margin: 0; font-size: 12px; line-height: 1.35; }
.shop-price { font-weight: 1000; color: #ffe3a0; }

.synergy-list, .probability-list { display: grid; gap: 8px; }
.synergy-item, .probability-item {
  padding: 10px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.045);
}
.synergy-item.active { border-color: rgba(214,179,106,.4); background: rgba(214,179,106,.1); }
.synergy-row, .probability-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.synergy-name { font-weight: 950; }
.synergy-empty { color: var(--muted); font-size: 12px; line-height: 1.55; padding: 10px 12px; border: 1px dashed rgba(255,255,255,.12); border-radius: 14px; }
.synergy-count { color: var(--gold); font-weight: 1000; }
.synergy-desc { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.pool-note { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.45; }

.log-panel { max-height: 360px; overflow: hidden; }
.log-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 276px;
  overflow: auto;
  padding-right: 4px;
}
.log-entry {
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.065);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.log-entry.win { color: #dfffd8; border-color: rgba(143,194,138,.25); }
.log-entry.lose { color: #ffd5dc; border-color: rgba(141,53,68,.32); }
.log-entry.info { color: #ffe8ba; border-color: rgba(214,179,106,.25); }

.unit-info {
  min-height: 250px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.045);
  padding: 14px;
}
.unit-info.empty { color: var(--muted); display: grid; place-items: center; text-align: center; }
.unit-info h3 { margin: 0; font-size: 24px; letter-spacing: -.055em; }
.unit-sub { color: var(--gold); font-weight: 900; margin: 5px 0 14px; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.info-grid div { border-radius: 13px; background: rgba(0,0,0,.16); padding: 10px; }
.info-grid span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .13em; font-weight: 950; margin-bottom: 4px; }
.info-grid b { font-size: 15px; }
.skill-box { border-radius: 14px; padding: 12px; background: rgba(214,179,106,.09); border: 1px solid rgba(214,179,106,.18); }
.skill-box b { display: block; margin-bottom: 5px; color: #ffe8a7; }
.skill-box p { margin: 0; font-size: 13px; }
.skill-box .skill-note { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.desc { margin: 12px 0 0; font-size: 13px; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(10px);
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(520px, 100%);
  border-radius: 26px;
  border: 1px solid var(--paper-line);
  background: linear-gradient(180deg, #211c25, #111116);
  box-shadow: var(--shadow);
  padding: 24px;
  position: relative;
}
.modal-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 20px;
}
.footer-note {
  margin-top: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1220px) {
  .layout { grid-template-columns: 1fr 330px; grid-template-areas: "center right" "left right"; }
  .center-column { grid-area: center; }
  .left-column { grid-area: left; position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .log-panel { grid-column: 1 / -1; }
  .right-column { grid-area: right; }
}

@media (max-width: 920px) {
  .special-tiles { grid-template-columns: 1fr; }
  .topbar, .battlefield-head { flex-direction: column; align-items: stretch; }
  .topnav { border-radius: 22px; flex-wrap: wrap; }
  .layout { display: block; }
  .left-column, .center-column, .right-column { position: static; margin-bottom: 16px; }
  .left-column { display: grid; grid-template-columns: 1fr; }
  .battle-actions { min-width: 0; justify-content: flex-start; }
  .board { grid-template-columns: repeat(5, minmax(54px, 1fr)); gap: 8px; }
  .slot { min-height: 78px; }
  .bench { grid-template-columns: repeat(5, minmax(54px, 1fr)); }
}

@media (max-width: 560px) {
  .app { width: min(100% - 18px, 1500px); padding-top: 10px; }
  .status-grid, .info-grid { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(5, minmax(44px, 1fr)); }
  .slot { min-height: 70px; }
  .unit-token { min-height: 68px; padding: 9px 7px; }
  .token-name { font-size: 11px; }
  .token-stats, .token-tags { display: none; }
}

/* v0.5 battle animation layer */
.slot.acting {
  border-color: rgba(214, 179, 106, .88);
  box-shadow: 0 0 0 5px rgba(214, 179, 106, .16), 0 0 28px rgba(214, 179, 106, .22);
  transform: translateY(-3px) scale(1.02);
  z-index: 3;
}
.slot.skill-cast {
  border-color: rgba(255, 232, 167, .98);
  box-shadow: 0 0 0 6px rgba(214, 179, 106, .22), 0 0 42px rgba(255, 232, 167, .34);
  animation: skill-pulse .46s ease;
}
.slot.targeted {
  border-color: rgba(141, 53, 68, .92);
  box-shadow: 0 0 0 5px rgba(141, 53, 68, .18), 0 0 28px rgba(141, 53, 68, .24);
  animation: hit-shake .28s ease;
  z-index: 2;
}
.slot.defeated {
  opacity: .34;
  filter: grayscale(.75);
}
.slot.defeated .unit-token {
  background: rgba(0,0,0,.28);
}
.battle-token {
  position: relative;
}
.hp-bar {
  height: 7px;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.08);
}
.hp-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8fc28a, #d6b36a);
  transition: width .28s ease;
}
.passion-row {
  height: 15px;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 5px;
  color: rgba(247,234,211,.62);
  font-size: 9px;
  font-weight: 900;
}
.passion-row b {
  display: block;
  height: 5px;
  max-width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #526f9f, #d6b36a);
  box-shadow: 0 0 14px rgba(214,179,106,.18);
  transition: width .25s ease;
}
.damage-float {
  position: absolute;
  inset: auto 8px 46px auto;
  z-index: 6;
  color: #ffd7dc;
  font-weight: 1000;
  font-size: 18px;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  animation: damage-rise .7s ease forwards;
  pointer-events: none;
}
.damage-float.skill { color: #fff0aa; font-size: 21px; }
.damage-float.critical { color: #ffb3c0; font-size: 21px; letter-spacing: .02em; }
.damage-float.skill.critical { color: #ffe08a; font-size: 22px; text-shadow: 0 0 16px rgba(214,179,106,.55), 0 2px 12px rgba(0,0,0,.75); }
@keyframes damage-rise {
  0% { opacity: 0; transform: translateY(8px) scale(.92); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-28px) scale(1.08); }
}
@keyframes hit-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
@keyframes skill-pulse {
  0% { transform: translateY(-3px) scale(1.02); }
  45% { transform: translateY(-6px) scale(1.06); }
  100% { transform: translateY(-3px) scale(1.02); }
}

body.motion-off .slot.acting {
  transform: none;
}
body.motion-off .slot.targeted,
body.motion-off .slot.skill-cast {
  animation: none;
  transform: none;
}
body.motion-off .unit-token,
body.motion-off .slot {
  transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease, filter .18s ease;
}
.motion-button.active {
  border-color: rgba(143,194,138,.45);
  color: #dff4cb;
  background: rgba(143,194,138,.1);
}

.skip-button {
  border-color: rgba(214,179,106,.38);
  color: #ffe8aa;
  background: rgba(214,179,106,.1);
}
.skip-button:not([hidden]) { display: inline-flex; }

.special-tile.poison-tile {
  border-color: rgba(94, 181, 114, .58);
  background: linear-gradient(135deg, rgba(51, 132, 77, .28), rgba(255,255,255,.035));
}
.special-tile.poison-tile::after { background: #61d083; }
.special-tile.afterglow-tile {
  border-color: rgba(241, 142, 63, .62);
  background: linear-gradient(135deg, rgba(187, 90, 38, .30), rgba(255,255,255,.035));
}
.special-tile.afterglow-tile::after { background: #ff9b4d; }
.cost-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1;
}
.poison-badge {
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 1000;
  color: #082011;
  background: radial-gradient(circle at 30% 25%, #d4ffd7, #69d779 58%, #1d7b3b);
  border: 1px solid rgba(201, 255, 205, .75);
  box-shadow: 0 0 12px rgba(90, 221, 112, .35);
}
.damage-float.poison { color: #b9ffbe; font-size: 20px; }

.speed-button.active {
  border-color: rgba(245, 190, 92, .85);
  color: var(--gold);
  box-shadow: 0 0 0 1px rgba(245, 190, 92, .18), 0 0 18px rgba(245, 190, 92, .12);
}

.shop-card.owned-highlight {
  border-color: rgba(255, 210, 74, .82);
  box-shadow: 0 0 0 1px rgba(255, 210, 74, .34), 0 0 18px rgba(255, 210, 74, .16);
  background: linear-gradient(135deg, rgba(255, 210, 74, .13), rgba(255,255,255,.055));
}
.shop-card.owned-highlight .shop-price { color: #ffd55a; }
.shop-card.merge-ready {
  border-color: rgba(255, 230, 120, .95);
  box-shadow: 0 0 0 2px rgba(255, 230, 120, .28), 0 0 24px rgba(255, 230, 120, .24);
}


/* 코스트별 색상. 인간은 숫자에도 계급을 부여한다. */
.cost-1 { color: #62e982 !important; }
.cost-2 { color: #6fb6ff !important; }
.cost-3 { color: #c58cff !important; }
.cost-4 { color: #ffe36d !important; }
.cost-5 { color: #ff9a3d !important; }
.cost-B { color: #ff5f6d !important; }
.cost-badge.cost-1 { border-color: rgba(98, 233, 130, .45); background: rgba(98, 233, 130, .14); }
.cost-badge.cost-2 { border-color: rgba(111, 182, 255, .45); background: rgba(111, 182, 255, .14); }
.cost-badge.cost-3 { border-color: rgba(197, 140, 255, .45); background: rgba(197, 140, 255, .14); }
.cost-badge.cost-4 { border-color: rgba(255, 227, 109, .45); background: rgba(255, 227, 109, .14); }
.cost-badge.cost-5 { border-color: rgba(255, 154, 61, .45); background: rgba(255, 154, 61, .14); }
.cost-badge.cost-B { border-color: rgba(255, 95, 109, .55); background: rgba(255, 95, 109, .16); }


.synergy-item.family-synergy {
  border-color: rgba(255, 169, 77, .72);
  background: linear-gradient(135deg, rgba(255, 169, 77, .20), rgba(255,255,255,.05));
  box-shadow: 0 0 0 1px rgba(255, 210, 140, .08), 0 10px 24px rgba(255, 146, 58, .08);
}
.synergy-item.family-synergy .synergy-name { color: #ffd28c; }


.will-panel { border-color: rgba(255, 213, 128, .16); }
.selected-wills { display: grid; gap: 8px; }
.will-empty { color: var(--muted); font-size: 13px; }
.selected-will {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
}
.selected-will span { font-size: 12px; letter-spacing: 1px; opacity: .9; }
.selected-will b { font-size: 13px; }
.selected-will.has-image {
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.selected-will-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.selected-will-image {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: contain;
  background: radial-gradient(circle at center, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  padding: 3px;
}
.will-modal { background: rgba(8, 7, 13, .76); backdrop-filter: blur(8px); }
.will-modal-card { width: min(880px, calc(100vw - 32px)); }
.will-options {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.will-card {
  min-height: 210px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255,255,255,.05);
  color: inherit;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.will-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 229, 166, .65);
  background: rgba(255,255,255,.085);
}
.will-card strong {
  display: block;
  margin: 8px 0 10px;
  font-size: 20px;
}
.will-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 14px;
}
.will-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 180px;
  object-fit: contain;
  border-radius: 16px;
  margin-bottom: 12px;
  background: radial-gradient(circle at center, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px;
}
.will-stars {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 2px;
  opacity: .95;
}
.will-star-4 { box-shadow: inset 0 0 0 1px rgba(173, 121, 255, .16); }
.will-star-4 .will-stars, .selected-will.will-star-4 span { color: #cba7ff; }
.will-star-5 { box-shadow: inset 0 0 0 1px rgba(255, 216, 116, .18); }
.will-star-5 .will-stars, .selected-will.will-star-5 span { color: #ffe08a; }
.will-star-6 { box-shadow: inset 0 0 0 1px rgba(255, 155, 88, .22); }
.will-star-6 .will-stars, .selected-will.will-star-6 span { color: #ffb06f; }
@media (max-width: 860px) {
  .will-options { grid-template-columns: 1fr; }
}


.selected-will {
  width: 100%;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.selected-will:hover {
  border-color: rgba(255, 229, 166, .48);
  background: rgba(255,255,255,.075);
  transform: translateY(-1px);
}
.will-detail-info h3 { color: #ffe08a; }
.will-detail-image {
  display: block;
  width: min(100%, 240px);
  margin: 0 auto 12px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 18px;
  background: radial-gradient(circle at center, rgba(255,255,255,.11), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.08);
  padding: 10px;
}


.shop-title-block {
  align-items: flex-start;
}
.shop-action-stack {
  display: grid;
  gap: 8px;
  min-width: 140px;
}
.shop-action-stack .small-button {
  width: 100%;
}
.xp-shop-button {
  border-color: rgba(144, 213, 255, .35);
}

.codex-modal-card {
  width: min(1040px, calc(100vw - 28px));
  max-height: min(84vh, 900px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.codex-lead {
  color: var(--muted);
  margin-top: -4px;
}
.codex-tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0 14px;
}
.codex-tab {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: inherit;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
}
.codex-tab.active {
  border-color: rgba(255, 222, 151, .62);
  background: rgba(255, 222, 151, .14);
  color: #ffe09a;
}
.codex-content {
  overflow: auto;
  padding-right: 6px;
}
.codex-will-group {
  margin-bottom: 22px;
}
.codex-will-group > h3 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #ffe09a;
}
.codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.codex-card {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 16px;
  padding: 14px;
}
.codex-card h4,
.codex-card h3 {
  margin: 6px 0 8px;
}
.codex-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.48;
  font-size: 13px;
}
.codex-will-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 180px;
  object-fit: contain;
  border-radius: 14px;
  margin-bottom: 10px;
  background: radial-gradient(circle at center, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px;
}
.codex-stars {
  letter-spacing: 2px;
  font-size: 12px;
  opacity: .92;
}
.codex-unit-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.codex-portrait {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
  font-weight: 800;
}
.codex-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.codex-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.codex-meta span {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(255,255,255,.035);
}
.codex-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  font-size: 12px;
  color: var(--muted);
}
.codex-stat-row span {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 5px 8px;
  background: rgba(255,255,255,.035);
}
.codex-skill {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 10px;
}
.codex-skill b {
  display: block;
  margin-bottom: 5px;
}
@media (max-width: 760px) {
  .shop-title-block {
    gap: 10px;
  }
  .shop-action-stack {
    width: 100%;
  }
  .codex-grid {
    grid-template-columns: 1fr;
  }
}


.narrow-door-skill {
  color: #ff5e64;
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 0 14px rgba(255, 63, 74, .28);
}
.narrow-door-skill em {
  font-style: italic;
}


.cost-6 {
  color: #ff7b48;
  text-shadow: 0 0 12px rgba(255, 91, 48, .32);
}
.special-rate {
  border-color: rgba(255, 117, 72, .30);
  background: rgba(255, 117, 72, .08);
}


.night-blasphemer-secret {
  color: #ff4c58;
  font-weight: 800;
  letter-spacing: .015em;
  text-shadow: 0 0 16px rgba(255, 55, 70, .34);
}
.night-blasphemer-secret em {
  font-style: italic;
}


.free-reroll-ready {
  border-color: rgba(255, 221, 89, .85) !important;
  background: rgba(255, 221, 89, .20) !important;
  color: #ffe580 !important;
  box-shadow: 0 0 18px rgba(255, 221, 89, .28);
}
.arcana-omen {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(circle, rgba(84, 0, 12, .24), rgba(0, 0, 0, .70));
  animation: arcanaFade 1.35s ease both;
}
.arcana-omen[hidden] {
  display: none;
}
.arcana-omen span,
.arcana-log-text {
  color: #ff253a;
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 0 18px rgba(255, 27, 55, .70), 0 0 40px rgba(255, 27, 55, .35);
}
.arcana-omen span {
  font-size: clamp(26px, 5vw, 64px);
  transform: skew(-4deg);
}
@keyframes arcanaFade {
  0% { opacity: 0; filter: blur(8px); transform: scale(1.04); }
  18% { opacity: 1; filter: blur(0); transform: scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; filter: blur(10px); transform: scale(.98); }
}
.ending-card {
  text-align: center;
  border-color: rgba(255, 59, 79, .32);
  box-shadow: 0 0 40px rgba(255, 59, 79, .16);
}
.ending-card h2 {
  color: #ffdf9a;
}
.ending-card p {
  color: #f5d7d7;
  font-size: 18px;
  line-height: 1.65;
}
.damage-float.arcana {
  color: #ff3048;
  text-shadow: 0 0 12px rgba(255, 48, 72, .75);
}


.unit-token.wonderland-copy {
  outline: 2px solid rgba(159, 116, 255, .58);
  box-shadow: 0 0 18px rgba(159, 116, 255, .22);
}
.unit-token.wonderland-copy .token-name::after {
  content: ' 복제';
  color: #c7b5ff;
  font-size: 10px;
}
.unit-token.sacrifice-token {
  outline: 2px solid rgba(255, 51, 64, .78);
  box-shadow: 0 0 22px rgba(255, 51, 64, .35), inset 0 0 18px rgba(255, 51, 64, .10);
}
.unit-token.sacrifice-token .token-name {
  color: #ff6a73;
  text-shadow: 0 0 10px rgba(255, 51, 64, .40);
}
.unit-token.spotlight-token {
  outline: 2px solid rgba(255, 225, 98, .86);
  box-shadow: 0 0 24px rgba(255, 225, 98, .35), inset 0 0 18px rgba(255, 225, 98, .10);
}
.unit-token.spotlight-token .token-name {
  color: #ffe680;
  text-shadow: 0 0 12px rgba(255, 225, 98, .55);
}
.unit-token.deepest-revived-token {
  outline: 2px solid rgba(93, 225, 255, .62);
  box-shadow: 0 0 18px rgba(93, 225, 255, .25);
}
.damage-float.sacrifice {
  color: #ff4c58;
  text-shadow: 0 0 12px rgba(255, 55, 70, .72);
}
.damage-float.spotlight {
  color: #ffe680;
  text-shadow: 0 0 14px rgba(255, 225, 98, .76);
}
.damage-float.revive {
  color: #8ff0ff;
  text-shadow: 0 0 14px rgba(93, 225, 255, .72);
}

.beryl-overflow-card { position: relative; overflow: hidden; }
.beryl-overflow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
}
.beryl-overflow-card > * { position: relative; }
.beryl-overflow-blue::before { background: radial-gradient(circle at 24% 18%, rgba(88, 184, 255, .95), transparent 48%); }
.beryl-overflow-purple::before { background: radial-gradient(circle at 24% 18%, rgba(179, 115, 255, .95), transparent 48%); }
.beryl-overflow-green::before { background: radial-gradient(circle at 24% 18%, rgba(110, 236, 151, .95), transparent 48%); }
.beryl-skill-name { color: #ffe7a3; font-weight: 800; }
.yangwol-horror-card { position: relative; overflow: hidden; }
.yangwol-horror-card::before {
  content: '';
  position: absolute;
  inset: -40% auto auto -20%;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  opacity: .18;
  pointer-events: none;
}
.yangwol-horror-card > * { position: relative; }
.yangwol-horror-tiger::before { background: radial-gradient(circle at 24% 18%, rgba(255, 176, 80, .95), transparent 50%); }
.yangwol-horror-shadow::before { background: radial-gradient(circle at 24% 18%, rgba(124, 84, 255, .95), transparent 50%); }
.yangwol-horror-plague::before { background: radial-gradient(circle at 24% 18%, rgba(108, 220, 118, .95), transparent 50%); }
.yangwol-skill-name { color: #ffd27a; font-weight: 800; }

.shop-card.special-shop-card {
  border-color: rgba(145, 205, 255, .78);
  background: linear-gradient(135deg, rgba(83, 146, 255, .16), rgba(255,255,255,.06));
  box-shadow: 0 0 0 1px rgba(145, 205, 255, .22), 0 0 18px rgba(83, 146, 255, .13);
}
.shop-card.special-broomTrip {
  border-color: rgba(196, 148, 255, .78);
  background: linear-gradient(135deg, rgba(164, 92, 255, .16), rgba(255,255,255,.06));
  box-shadow: 0 0 0 1px rgba(196, 148, 255, .22), 0 0 18px rgba(164, 92, 255, .13);
}
.shop-icon.special-item-icon {
  background: radial-gradient(circle at 30% 25%, #fff7cc, #9dccff 48%, #334f88);
  color: #151c32;
  font-size: 20px;
}
.special-broomTrip .shop-icon.special-item-icon {
  background: radial-gradient(circle at 30% 25%, #fff2ff, #c99dff 48%, #553285);
}

.slot.dawn-slot {
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(125, 219, 255, 0.95), 0 0 22px rgba(88, 206, 255, 0.42);
  background: linear-gradient(145deg, rgba(74, 170, 221, 0.30), rgba(22, 63, 108, 0.52));
}

.dawn-marker {
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 3;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(153, 235, 255, 0.95);
  background: rgba(27, 91, 124, 0.78);
  color: #e6fbff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}

.slot.neverending-qa-slot {
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(194, 92, 255, 0.85), 0 0 18px rgba(147, 51, 234, 0.35);
  background: linear-gradient(145deg, rgba(97, 29, 132, 0.28), rgba(36, 20, 58, 0.55));
}

.neverending-qa-marker {
  position: absolute;
  top: 4px;
  right: 5px;
  z-index: 3;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid rgba(219, 184, 255, 0.85);
  background: rgba(77, 25, 112, 0.88);
  color: #f0dcff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* Online ranking / board */
.community-modal { background: rgba(8, 7, 13, .76); backdrop-filter: blur(8px); }
.community-card { width: min(900px, calc(100vw - 32px)); max-height: min(86vh, 780px); overflow: auto; }
.community-lead { color: var(--muted); line-height: 1.55; }
.community-submit,
.community-actions,
.post-form { display: grid; gap: 10px; margin: 14px 0; }
.community-submit { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.community-input,
.community-textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: inherit;
  padding: 11px 12px;
  font: inherit;
  outline: none;
}
.community-input:focus,
.community-textarea:focus { border-color: rgba(255, 229, 166, .55); background: rgba(255,255,255,.085); }
.community-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.score-preview {
  border: 1px solid rgba(255, 216, 116, .18);
  background: rgba(255, 216, 116, .07);
  border-radius: 14px;
  padding: 10px 12px;
  color: #ffe8a8;
}

.ranking-season-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.ranking-season-tabs::-webkit-scrollbar { height: 8px; }
.ranking-season-tabs::-webkit-scrollbar-thumb {
  background: rgba(255, 221, 143, .28);
  border-radius: 999px;
}
.ranking-season-tabs::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
.ranking-season-button {
  flex: 0 0 auto;
  min-width: 190px;
  max-width: 230px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.ranking-season-button:hover { border-color: rgba(255, 221, 143, .34); transform: translateY(-1px); }
.ranking-season-button.active {
  border-color: rgba(255, 221, 143, .55);
  background: rgba(255, 221, 143, .12);
  box-shadow: 0 0 0 1px rgba(255, 221, 143, .08) inset;
}
.ranking-season-button b { display: block; font-size: 13px; color: #ffe8a8; }
.ranking-season-button small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.community-list { display: grid; gap: 10px; margin-top: 10px; }
.community-status {
  color: var(--muted);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 12px;
}
.community-status.error { color: #ffb3b3; border-color: rgba(255, 92, 92, .25); background: rgba(255, 92, 92, .08); }
.ranking-row,
.post-item {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 16px;
  padding: 12px;
}
.ranking-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ranking-row.top-rank { border-color: rgba(255, 216, 116, .28); background: rgba(255, 216, 116, .075); }
.rank-number { color: #ffe08a; }
.rank-main { display: grid; gap: 3px; min-width: 0; }
.rank-main span,
.rank-score small,
.post-head span,
.post-author { color: var(--muted); font-size: 12px; }
.rank-score { display: grid; gap: 3px; text-align: right; }
.post-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.post-head strong { color: #ffe8a8; }
.post-author { margin: 4px 0 8px; }
.post-item p { margin: 0; color: var(--muted); line-height: 1.55; word-break: break-word; }
@media (max-width: 720px) {
  .community-submit { grid-template-columns: 1fr; }
  .ranking-row { grid-template-columns: 44px minmax(0, 1fr); }
  .rank-score { grid-column: 2; text-align: left; }
}

.synergy-codex-grid { align-items: stretch; }
.synergy-codex-card h4 { margin: 8px 0 6px; }
.synergy-codex-card p { color: var(--muted); line-height: 1.55; }
.family-synergy-card { border-color: rgba(214,179,106,.42); }

/* Delirium penalties */
.delirium-nav-button {
  color: #ff5b5b;
  border-color: rgba(255, 83, 83, .42);
  background: rgba(112, 18, 28, .18);
  font-weight: 900;
}
.delirium-modal { background: rgba(10, 2, 5, .78); backdrop-filter: blur(8px); }
.delirium-card { width: min(860px, calc(100vw - 32px)); max-height: min(86vh, 780px); overflow: auto; }
.delirium-head {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}
.delirium-orb {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 84, 84, .48);
  background: radial-gradient(circle at 42% 32%, rgba(255, 122, 122, .38), rgba(107, 12, 28, .28) 48%, rgba(16, 4, 9, .92));
  box-shadow: 0 0 28px rgba(255, 57, 57, .22), inset 0 0 24px rgba(255,255,255,.06);
}
.delirium-orb span { font-size: 42px; font-weight: 950; color: #ffd1d1; text-shadow: 0 0 14px rgba(255, 40, 40, .56); }
.delirium-lead { color: var(--muted); line-height: 1.55; }
.delirium-list { display: grid; gap: 10px; }
.delirium-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.045);
}
.delirium-item.active {
  border-color: rgba(255, 92, 92, .38);
  background: rgba(153, 28, 43, .16);
}
.delirium-copy h3 { margin: 0 0 5px; color: #ffd0d0; }
.delirium-copy p { margin: 0; color: var(--muted); line-height: 1.45; font-size: 13px; }
.delirium-toggle.active { color: #ffe4e4; border-color: rgba(255, 92, 92, .45); background: rgba(190, 40, 54, .28); }
.delirium-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.shop-price.inflated-price { color: #ffb4b4; border-color: rgba(255, 92, 92, .28); }
.shop-price.inflated-price small { display: block; color: #ff7777; font-size: 10px; margin-top: 2px; }

@media (max-width: 720px) {
  .delirium-head { grid-template-columns: 1fr; justify-items: start; }
  .delirium-item { grid-template-columns: 1fr; }
  .delirium-toggle { width: 100%; }
}

/* 공용 전투 이펙트 v1 */
.battle-effect {
  position: absolute;
  inset: 6px;
  z-index: 4;
  pointer-events: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  mix-blend-mode: screen;
  animation: common-effect-pop .52s ease-out both;
}
.battle-effect span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-shadow: 0 2px 8px rgba(0,0,0,.75);
  transform: translateY(-2px);
}
.effect-damage {
  background: radial-gradient(circle, rgba(255, 88, 74, .46), transparent 62%);
  box-shadow: inset 0 0 0 2px rgba(255, 119, 92, .28), 0 0 18px rgba(255, 86, 71, .26);
}
.effect-skill-damage {
  background: radial-gradient(circle, rgba(255, 220, 128, .54), rgba(198, 72, 65, .28) 42%, transparent 68%);
  box-shadow: inset 0 0 0 2px rgba(255, 232, 167, .36), 0 0 26px rgba(255, 189, 89, .32);
}
.effect-crit,
.effect-mark-crit {
  background: radial-gradient(circle, rgba(255,255,255,.86), rgba(255, 210, 92, .46) 34%, transparent 70%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.52), 0 0 32px rgba(255, 241, 166, .44);
  animation-name: common-effect-crit;
}
.effect-heal {
  background: radial-gradient(circle, rgba(110, 255, 173, .50), rgba(53, 183, 116, .22) 42%, transparent 70%);
  box-shadow: inset 0 0 0 2px rgba(133, 255, 193, .34), 0 0 24px rgba(75, 255, 161, .28);
}
.effect-buff {
  background: radial-gradient(circle, rgba(112, 198, 255, .45), rgba(72, 114, 255, .22) 42%, transparent 70%);
  box-shadow: inset 0 0 0 2px rgba(157, 219, 255, .32), 0 0 22px rgba(82, 164, 255, .26);
}
.effect-debuff {
  background: radial-gradient(circle, rgba(203, 92, 255, .44), rgba(104, 49, 160, .26) 43%, transparent 70%);
  box-shadow: inset 0 0 0 2px rgba(218, 143, 255, .28), 0 0 24px rgba(184, 89, 255, .24);
}
.effect-poison {
  background: radial-gradient(circle, rgba(92, 255, 130, .40), rgba(115, 54, 197, .24) 42%, transparent 70%);
  box-shadow: inset 0 0 0 2px rgba(127, 255, 161, .24), 0 0 22px rgba(101, 255, 133, .22);
  animation-name: common-effect-poison;
}
@keyframes common-effect-pop {
  0% { opacity: 0; transform: scale(.72) rotate(-2deg); filter: blur(2px); }
  35% { opacity: 1; transform: scale(1.04) rotate(1deg); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.22) rotate(0); filter: blur(3px); }
}
@keyframes common-effect-crit {
  0% { opacity: 0; transform: scale(.55) rotate(0deg); filter: blur(1px); }
  25% { opacity: 1; transform: scale(1.18) rotate(8deg); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.42) rotate(-6deg); filter: blur(4px); }
}
@keyframes common-effect-poison {
  0% { opacity: 0; transform: scale(.82) translateY(4px); filter: blur(2px); }
  40% { opacity: .95; transform: scale(1.02) translateY(-2px); filter: blur(.5px); }
  100% { opacity: 0; transform: scale(1.18) translateY(-10px); filter: blur(5px); }
}
body.motion-off .battle-effect {
  animation: none;
  opacity: .45;
}


.third-trust-card { position: relative; overflow: hidden; }
.third-trust-card::before { content: ''; position: absolute; inset: 0; opacity: .2; pointer-events: none; }
.third-trust-card > * { position: relative; }
.third-trust-orange::before { background: radial-gradient(circle at 24% 18%, rgba(255, 170, 70, .96), transparent 50%); }
.third-trust-red::before { background: radial-gradient(circle at 24% 18%, rgba(255, 86, 86, .96), transparent 50%); }
.third-trust-black::before { background: radial-gradient(circle at 24% 18%, rgba(35, 35, 52, .98), transparent 55%); }
.third-trust-subtitle { color: #ffdba2; font-weight: 700; letter-spacing: .4px; }


.third-trust-summary-box {
  border-color: rgba(255, 178, 101, .38);
  background: linear-gradient(135deg, rgba(255, 166, 70, .12), rgba(90, 45, 30, .10));
}
.third-trust-summary-grid {
  margin-top: 10px;
}
.third-trust-summary-grid div {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 218, 170, .14);
}
.third-trust-summary-grid b {
  color: #ffd89b;
}


.rank-comp {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.rank-comp.empty {
  color: var(--muted);
  font-size: 12px;
}
.rank-unit {
  width: 34px;
  height: 34px;
  position: relative;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.07);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #ffe8a8;
}
.rank-unit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rank-unit b {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 1px;
  font-size: 8px;
  line-height: 1;
  color: #ffe08a;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
  letter-spacing: -1px;
}
.ranking-analytics {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 12px;
}
.analytics-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}
.analytics-head strong { color: #ffe8a8; }
.analytics-head span,
.analytics-row small,
.analytics-empty { color: var(--muted); font-size: 12px; }
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.analytics-section {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 10px;
}
.analytics-section h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #ffdca3;
}
.analytics-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.analytics-row:first-of-type { border-top: 0; }
.analytics-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-row b { color: #ffe08a; }
.analytics-row small { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .ranking-season-button { min-width: 180px; }
  .analytics-grid { grid-template-columns: 1fr; }
}

.rank-schema-help code { display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.24); color: #ffe3a6; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }


.item-panel { display: grid; gap: 10px; }
.item-section-title { color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: -.02em; }
.item-components, .completed-items { display: grid; gap: 8px; }
.item-chip, .item-card, .equipped-item {
  width: 100%;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
  color: var(--paper);
  border-radius: 14px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}
.item-chip:hover, .item-card:hover, .equipped-item:hover { border-color: rgba(214,179,106,.45); background: rgba(214,179,106,.10); }
.item-chip:disabled { opacity: .4; cursor: not-allowed; }
.item-chip.selected { border-color: rgba(255,227,160,.85); box-shadow: 0 0 0 2px rgba(255,227,160,.12) inset; }
.item-chip span, .item-card span, .equipped-item span { font-size: 18px; }
.item-chip b, .item-card b, .equipped-item b { font-size: 12px; }
.item-chip em, .item-card em, .equipped-item em { font-style: normal; color: var(--muted); font-size: 11px; line-height: 1.25; }
.item-card, .equipped-item { grid-template-columns: auto 1fr; }
.item-card em, .equipped-item em { grid-column: 2; }
.item-empty { color: var(--muted); font-size: 12px; line-height: 1.45; padding: 10px; border: 1px dashed rgba(255,255,255,.12); border-radius: 14px; }
.item-empty.inline { border: 0; padding: 0; }
.token-items { display: flex; gap: 4px; margin-top: 5px; }
.token-items span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: rgba(214,179,106,.16); border: 1px solid rgba(214,179,106,.28); font-size: 11px; }
.unit-items-box { margin: 10px 0; padding: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); }
.unit-items-box > b { display: block; margin-bottom: 8px; color: var(--gold); font-size: 13px; }
.unit-items-box > div { display: grid; gap: 6px; }

.item-components.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.item-icon-button {
  width: 42px;
  height: 42px;
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  color: var(--paper);
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.item-icon-button:hover { border-color: rgba(214,179,106,.5); background: rgba(214,179,106,.12); }
.item-icon-button.selected { border-color: rgba(255,227,160,.85); box-shadow: 0 0 0 2px rgba(255,227,160,.14) inset; }
.item-icon-button span { font-size: 20px; line-height: 1; }
.item-icon-button em {
  position: absolute;
  right: -5px;
  bottom: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(20,18,24,.95);
  border: 1px solid rgba(214,179,106,.38);
  color: #ffe3a6;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.unit-info-item-icon, .codex-item-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  margin-right: 8px;
  border-radius: 10px;
  border: 1px solid rgba(214,179,106,.28);
  background: rgba(214,179,106,.12);
  vertical-align: middle;
}
.codex-item-icon { width: 44px; height: 44px; font-size: 23px; margin: 0 0 10px; }
.codex-item-icon.completed { border-color: rgba(255,227,160,.38); background: rgba(255,227,160,.14); }
.item-recipe-list, .item-recipe-box > div { display: grid; gap: 7px; margin-top: 8px; }
.item-recipe-list div, .item-recipe-row {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255,255,255,.035);
  display: grid;
  gap: 4px;
}
.item-recipe-list span, .item-recipe-row span { color: var(--muted); font-size: 12px; }
.item-recipe-list b, .item-recipe-row b { color: #ffe3a6; font-size: 12px; }
.item-recipe-row em { color: var(--muted); font-style: normal; font-size: 11px; line-height: 1.35; }
.item-codex-section { margin-bottom: 18px; }
.item-codex-card .codex-stars { line-height: 1.35; }

.equipped-item.component-equipped {
  border-color: rgba(126, 210, 255, .28);
  background: rgba(126, 210, 255, .07);
}
.item-reward-modal { background: rgba(8, 7, 13, .72); backdrop-filter: blur(8px); }
.item-reward-card { width: min(560px, calc(100vw - 32px)); }
.item-reward-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.item-reward-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(214,179,106,.38);
  background: rgba(214,179,106,.13);
  font-size: 34px;
}
.item-reward-body { display: grid; gap: 10px; color: var(--paper); }
.item-reward-body p { margin: 0; color: var(--muted); line-height: 1.55; }
.item-reward-body b { color: #ffe3a6; }
.item-reward-recipes { display: grid; gap: 7px; margin: 4px 0; }
.item-reward-recipes div {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255,255,255,.035);
  display: grid;
  gap: 4px;
}
.item-reward-recipes span { color: var(--muted); font-size: 12px; }
.item-reward-recipes b { color: #ffe3a6; font-size: 12px; }

.item-icon-button img,
.item-card > img,
.equipped-item > img,
.unit-info-item-icon img,
.codex-item-icon img,
.item-reward-icon img,
.item-inline-icon img,
.token-items img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.item-icon-button img { width: 34px; height: 34px; }
.item-card > img, .equipped-item > img { width: 30px; height: 30px; }
.unit-info-item-icon img { width: 30px; height: 30px; }
.codex-item-icon img { width: 38px; height: 38px; }
.item-reward-icon img { width: 56px; height: 56px; }
.item-inline-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 3px;
  vertical-align: -4px;
}
.item-inline-icon img { width: 18px; height: 18px; }
.token-items span img { width: 15px; height: 15px; }


.patch-modal-card {
  width: min(720px, calc(100vw - 32px));
  max-height: min(84vh, 900px);
  overflow: hidden;
}
.patch-modal-head span {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.patch-modal-head h2 { margin-bottom: 6px; }
.patch-modal-head p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.patch-list {
  display: grid;
  gap: 10px;
  max-height: min(58vh, 560px);
  overflow: auto;
  padding-right: 6px;
}
.patch-entry {
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(239,225,200,.14);
  background: rgba(255,255,255,.052);
  color: inherit;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.patch-entry:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 222, 151, .42);
  background: rgba(255,255,255,.085);
}
.patch-version {
  min-width: 58px;
  border-radius: 999px;
  padding: 7px 10px;
  color: #241408;
  background: linear-gradient(135deg, #ffe0a0, #b88945);
  font-weight: 1000;
  text-align: center;
  letter-spacing: -.03em;
}
.patch-summary strong {
  display: block;
  margin-bottom: 4px;
  color: #fff1c8;
  font-size: 15px;
}
.patch-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.patch-arrow {
  color: var(--gold);
  font-weight: 1000;
  font-size: 20px;
}
.patch-detail-card {
  width: min(780px, calc(100vw - 32px));
  max-height: min(84vh, 900px);
  overflow: hidden;
}
.patch-detail-content {
  max-height: min(70vh, 720px);
  overflow: auto;
  padding-right: 6px;
}
.patch-detail-kicker {
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.patch-detail-content h2 { margin: 6px 42px 8px 0; }
.patch-detail-date {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
}
.patch-note-section {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.045);
}
.patch-note-section h3 {
  margin: 0 0 8px;
  color: #ffe7a8;
  font-size: 15px;
}
.patch-note-section ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.patch-note-section li + li { margin-top: 4px; }


.synergy-codex-card.clickable { cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.synergy-codex-card.clickable:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.28); box-shadow: 0 14px 32px rgba(0,0,0,.24); }
.codex-synergy-units-button { margin-top: 10px; width: 100%; }
.codex-synergy-units-card { width: min(980px, calc(100vw - 28px)); max-height: min(86vh, 900px); overflow: auto; }
.codex-synergy-detail-head { margin-bottom: 14px; }
.codex-synergy-detail-head h2 { margin: 8px 0 6px; }
.codex-synergy-detail-head p { color: var(--muted); line-height: 1.55; margin: 0; }
.codex-synergy-unit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.codex-synergy-unit-card .codex-portrait { width: 58px; height: 58px; flex: 0 0 58px; }
.codex-empty { color: var(--muted); padding: 18px; border: 1px dashed rgba(255,255,255,.18); border-radius: 14px; }


/* 열정의 노래 · 로큰롤! */
.slot.rocknroll-active:not(.defeated) {
  box-shadow: inset 0 0 0 2px rgba(75, 165, 255, .95), 0 0 16px rgba(55, 145, 255, .75);
  background: radial-gradient(circle at 50% 45%, rgba(61, 150, 255, .28), rgba(20, 65, 145, .12));
}
.slot.rocknroll-active:not(.defeated)::after {
  content: 'ROCK!';
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 8;
  padding: 1px 4px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 900;
  color: #dff3ff;
  background: rgba(20, 85, 175, .86);
  border: 1px solid rgba(135, 210, 255, .9);
}