:root {
  --night: #07111a;
  --ink: #0b1721;
  --panel: rgba(8, 21, 30, .93);
  --panel-soft: rgba(17, 38, 48, .88);
  --line: rgba(130, 183, 195, .28);
  --line-hot: rgba(130, 231, 221, .72);
  --text: #edf7f5;
  --muted: #91aaa9;
  --aqua: #83ead2;
  --cyan: #79d9f7;
  --gold: #f3ce78;
  --purple: #d0a3ff;
  --danger: #ff8178;
  --shadow: 0 18px 45px rgba(0, 0, 0, .42);
  font-family: Inter, "Segoe UI", "Microsoft YaHei UI", sans-serif;
  color: var(--text);
  background: var(--night);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100%; }
body { margin: 0; min-width: 980px; overflow: hidden; background: var(--night); }
button, input, select { font: inherit; }
button { color: inherit; }
h1, h2, p { margin: 0; }

.app-shell {
  width: 100vw;
  height: 100dvh;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(55, 125, 137, .22), transparent 36%),
    linear-gradient(180deg, #08141d, #04090e);
}

.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(146, 210, 214, .22);
  background: linear-gradient(180deg, rgba(10, 25, 35, .98), rgba(5, 15, 23, .95));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .33);
}

.topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent 10%, rgba(103, 211, 214, .66), transparent 90%);
}

.brand-block { display: flex; align-items: center; gap: 10px; min-width: 232px; }
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #65cdbb;
  border-radius: 50%;
  color: #dffbf3;
  background:
    radial-gradient(circle at 37% 33%, #397f78, #153b3d 58%, #07171f 60%),
    #153b3d;
  box-shadow: inset 0 0 0 3px rgba(5, 18, 25, .7), 0 0 18px rgba(103, 221, 203, .22);
  font-weight: 850;
  letter-spacing: -.05em;
}
.brand-block h1 { font-size: 17px; font-weight: 720; letter-spacing: .05em; }
.brand-block p { margin-top: 2px; color: var(--muted); font-size: 10px; }

.controls { display: flex; align-items: end; justify-content: flex-end; gap: 7px; min-width: 0; }
.controls label { display: grid; gap: 3px; }
.controls label span { color: #88a3a5; font-size: 8px; letter-spacing: .08em; }
input, select {
  height: 34px;
  border: 1px solid rgba(121, 178, 188, .34);
  border-radius: 5px;
  padding: 0 9px;
  color: var(--text);
  background: rgba(9, 24, 32, .88);
  outline: none;
}
input { width: 74px; }
select { min-width: 112px; }
input:focus, select:focus { border-color: var(--aqua); box-shadow: 0 0 0 2px rgba(131, 234, 210, .12); }

.button {
  height: 34px;
  border: 1px solid rgba(119, 180, 189, .48);
  border-radius: 5px;
  padding: 0 12px;
  color: #dfeeed;
  background: linear-gradient(180deg, rgba(33, 61, 71, .94), rgba(15, 38, 47, .94));
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
  cursor: pointer;
  transition: border-color .15s ease, filter .15s ease, transform .15s ease;
}
.button:hover:not(:disabled) { border-color: var(--aqua); filter: brightness(1.12); transform: translateY(-1px); }
.button:disabled { opacity: .42; cursor: not-allowed; }
.button-primary { border-color: #62bda9; background: linear-gradient(180deg, #286a5d, #17493f); color: #f2fffb; }
.button.is-active { border-color: var(--purple); background: linear-gradient(180deg, #60456d, #352a47); }
.icon-button { min-width: 50px; }
.multiplayer-button { border-color: rgba(116, 216, 202, .55); color: #dffdf6; }
.multiplayer-connection {
  align-self: center;
  max-width: 150px;
  padding: 5px 9px;
  border: 1px solid rgba(88, 199, 171, .4);
  border-radius: 999px;
  background: rgba(20, 72, 61, .72);
  color: #a9f0dc;
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.multiplayer-connection.reconnecting { border-color: #c28c58; background: rgba(89, 54, 25, .78); color: #ffd39d; }
body.remote-match #battle-controls > label,
body.remote-match #new-game-button,
body.remote-match #step-button,
body.remote-match #autoplay-button,
body.multiplayer-only #battle-controls > label,
body.multiplayer-only #new-game-button,
body.multiplayer-only #step-button,
body.multiplayer-only #autoplay-button { display: none; }
body.remote-match .replay-toolbar { display: none !important; }

.main-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(650px, 1fr) 310px;
  gap: 10px;
  overflow: hidden;
  padding: 10px;
}

.battle-column {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr) 28px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(111, 172, 183, .3);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(4, 12, 18, .64), transparent 19%, transparent 81%, rgba(4, 12, 18, .64)),
    radial-gradient(ellipse at 50% 50%, rgba(72, 133, 140, .18), transparent 58%),
    linear-gradient(180deg, #0a1a23 0%, #112d36 48%, #0b222b 52%, #07151d 100%);
  box-shadow: var(--shadow), inset 0 0 70px rgba(0, 0, 0, .36);
}

.battle-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .48;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 19%, rgba(111, 201, 195, .16) 19.3% 19.6%, transparent 20%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 78px, rgba(116, 177, 177, .045) 80px, transparent 82px),
    linear-gradient(115deg, transparent 46%, rgba(150, 222, 217, .035) 47%, transparent 48%);
}

.status-strip {
  position: relative;
  z-index: 6;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 12px;
  overflow: hidden;
  border-bottom: 1px solid rgba(118, 181, 188, .18);
  background: rgba(5, 16, 23, .74);
  color: #cee1df;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.status-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 10px var(--aqua); }
.status-warning { color: var(--gold); }

.player-zone {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 84px;
  grid-template-rows: 104px minmax(0, 1fr);
  grid-template-areas:
    "summary hand counters"
    "summary board counters";
  gap: 4px 10px;
  padding: 6px 10px;
}
.self-zone {
  grid-template-rows: minmax(0, 1fr) 118px;
  grid-template-areas:
    "summary board counters"
    "summary hand counters";
}
.player-zone.is-active::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 1px solid rgba(131, 234, 210, .18);
  border-radius: 8px;
  box-shadow: inset 0 0 25px rgba(79, 187, 167, .06);
  pointer-events: none;
}

.player-summary {
  grid-area: summary;
  position: relative;
  align-self: center;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(116, 176, 187, .25);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(11, 28, 38, .93), rgba(6, 17, 25, .86));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}
.player-summary.royal { --class-accent: #78b9ff; }
.player-summary.dragon { --class-accent: #ff9f72; }
.player-summary.targetable { border-color: var(--danger); cursor: crosshair; animation: leader-target 1s ease-in-out infinite alternate; }
@keyframes leader-target { to { box-shadow: 0 0 25px rgba(255, 106, 91, .62), inset 0 0 20px rgba(255, 106, 91, .15); } }

.player-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; }
.player-index { display: block; color: var(--muted); font-size: 7px; letter-spacing: .1em; }
.deck-name { max-width: 96px; margin-top: 2px; overflow: hidden; color: #eef9f7; font-size: 10px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.turn-chip { flex: none; padding: 2px 5px; border: 1px solid rgba(117, 179, 188, .3); border-radius: 999px; color: var(--muted); font-size: 7px; }
.is-active .turn-chip { border-color: #58a794; color: var(--aqua); background: rgba(35, 101, 86, .3); }

.leader-core { position: relative; width: 92px; height: 82px; margin: 0 auto; }
.leader-portrait {
  position: absolute;
  inset: 1px 8px 5px 5px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--class-accent) 65%, #dceeed);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 35%, color-mix(in srgb, var(--class-accent) 38%, #1c3442), #0a1822 67%),
    #0a1822;
  box-shadow: inset 0 0 0 4px rgba(4, 13, 20, .8), 0 0 16px color-mix(in srgb, var(--class-accent) 26%, transparent);
}
.leader-portrait span { color: color-mix(in srgb, var(--class-accent) 78%, white); font-family: Georgia, serif; font-size: 32px; text-shadow: 0 2px 8px #000; }
.leader-health {
  position: absolute;
  right: -2px;
  bottom: 0;
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border: 2px solid #f4cbb0;
  border-radius: 50% 50% 55% 55%;
  background: radial-gradient(circle at 35% 30%, #da5d54, #781d26 68%, #300a12);
  box-shadow: inset 0 0 0 2px rgba(47, 5, 10, .65), 0 3px 8px #000;
}
.leader-health strong { font-size: 17px; line-height: 1; text-shadow: 0 2px 3px #270308; }
.leader-health span { display: none; }
.leader-health.low { border-color: #ffdf7d; animation: low-health .8s ease-in-out infinite alternate; }
@keyframes low-health { to { filter: brightness(1.35); box-shadow: 0 0 14px rgba(255, 102, 86, .68); } }
.leader-shield { margin: -4px auto 0; padding: 1px 5px; border: 1px solid var(--purple); border-radius: 999px; color: #e4ccff; font-size: 7px; }

.resource-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.resource { min-width: 0; padding: 4px 2px; border: 1px solid rgba(112, 173, 182, .2); border-radius: 4px; background: rgba(21, 48, 58, .65); text-align: center; }
.resource span { display: block; color: var(--muted); font-size: 6px; }
.resource strong { display: block; margin-top: 1px; font-size: 10px; }
.resource strong small { font-size: 7px; opacity: .7; }
.resource.pp strong { color: var(--gold); }
.resource.extra strong { color: var(--aqua); }
.resource.ep strong { color: var(--cyan); }
.resource.sep strong { color: var(--purple); }

.leader-area { min-height: 0; display: grid; gap: 2px; overflow: hidden; }
.leader-area-title { color: var(--muted); font-size: 7px; }
.leader-effects { min-height: 0; display: flex; flex-wrap: wrap; gap: 2px; overflow: hidden; }
.leader-effect { max-width: 100%; display: grid; gap: 1px; padding: 2px 4px; border: 1px solid rgba(210, 172, 91, .45); border-radius: 3px; background: rgba(67, 50, 22, .74); }
.leader-effect.faith { border-color: rgba(142, 155, 234, .48); background: rgba(41, 42, 80, .72); }
.leader-effect strong { overflow: hidden; color: #f5daa0; font-size: 6px; white-space: nowrap; text-overflow: ellipsis; }
.leader-effect.faith strong { color: #d2d7ff; }
.leader-effect small { color: #bdc9c8; font-size: 5px; }
.leader-effect-empty { color: #527079; font-size: 6px; }

.hand-row {
  grid-area: hand;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 2px 24px;
}
.self-zone .hand-row { align-items: flex-end; }
.opponent-zone .hand-row { align-items: flex-start; }

.board-row {
  grid-area: board;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(74px, 126px));
  justify-content: center;
  align-items: center;
  gap: clamp(3px, .6vw, 10px);
  padding: 3px 8px;
}

.card {
  --card-scale: 1;
  position: relative;
  width: clamp(78px, 7vw, 126px);
  aspect-ratio: 530 / 687;
  flex: 0 1 clamp(78px, 7vw, 126px);
  min-width: 0;
  display: block;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 8% / 6%;
  outline: none;
  background: transparent;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .36);
  cursor: default;
  transform-origin: center;
  transition: transform .16s ease, filter .16s ease;
}
.card-art { width: 100%; height: 100%; display: block; object-fit: contain; user-select: none; pointer-events: none; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .3)); }
.hand-row .card { width: clamp(74px, 6.5vw, 112px); flex-basis: clamp(74px, 6.5vw, 112px); margin-left: clamp(-20px, -1vw, -9px); }
.hand-row .card:first-child { margin-left: 0; }
.opponent-zone .hand-row .card { width: clamp(62px, 5vw, 88px); flex-basis: clamp(62px, 5vw, 88px); }
.card:hover:not(:disabled) { z-index: 20; transform: translateY(-7px) scale(1.08); }
.self-zone .hand-row .card:hover:not(:disabled) { transform: translateY(-24px) scale(1.22); }
.card:disabled { filter: saturate(.7) brightness(.82); }
.card::before, .card::after {
  content: "";
  position: absolute;
  inset: 1%;
  z-index: 2;
  border-radius: 7% / 5%;
  opacity: 0;
  pointer-events: none;
}
.card.action-source { cursor: pointer; }
.card.action-source::before { opacity: 1; border: 2px solid var(--aqua); box-shadow: 0 0 9px var(--aqua), inset 0 0 12px rgba(63, 236, 202, .34); animation: source-glow .95s ease-in-out infinite alternate; }
.card.targetable { cursor: crosshair; }
.card.targetable::after { inset: -3%; opacity: 1; border: 3px solid #ff7d69; box-shadow: 0 0 14px #ff6b57; animation: target-glow .68s ease-in-out infinite alternate; }
.card.selected-source { z-index: 12; transform: translateY(-9px) scale(1.07); }
.card.selected-source::before { opacity: 1; border: 3px solid var(--gold); box-shadow: 0 0 18px rgba(255, 215, 111, .9), inset 0 0 14px rgba(255, 207, 84, .32); }
.card.evolved .card-art { filter: drop-shadow(0 0 8px rgba(255, 213, 108, .6)); }
.card.super-evolved .card-art { filter: drop-shadow(0 0 10px rgba(205, 133, 255, .72)); }
@keyframes source-glow { to { filter: brightness(1.22); box-shadow: 0 0 15px rgba(111, 246, 217, .85), inset 0 0 18px rgba(63, 236, 202, .25); } }
@keyframes target-glow { to { filter: brightness(1.2); box-shadow: 0 0 24px rgba(255, 96, 76, .82); } }

.fallback-card { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 7px; border: 2px solid #aeb9c0; border-radius: 8px; background: linear-gradient(160deg, #31515f, #101d27); }
.fallback-card b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #246d4e; }
.fallback-card strong { padding: 6px; background: rgba(18, 25, 31, .82); font-size: 10px; }

.dynamic-cost, .dynamic-stats span {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  border: 2px solid rgba(245, 242, 220, .88);
  color: white;
  font-weight: 850;
  text-shadow: 0 2px 3px #000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .65);
}
.dynamic-cost { top: 1%; left: 0; width: 25%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4ca979, #14603f 72%); font-size: clamp(10px, 1vw, 17px); }
.dynamic-stats { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.dynamic-stats span { bottom: 0; width: 25%; aspect-ratio: 1; font-size: clamp(10px, 1vw, 17px); }
.dynamic-stats .attack { left: 0; transform: rotate(45deg); border-radius: 6px; background: radial-gradient(circle, #2678c0, #133965); }
.dynamic-stats .attack::first-letter { transform: rotate(-45deg); }
.dynamic-stats .defense { right: 0; border-radius: 48% 48% 55% 55%; background: radial-gradient(circle, #c54e48, #641b24); }
.card-state-badges { position: absolute; z-index: 5; top: 26%; right: -3px; display: grid; justify-items: end; gap: 2px; pointer-events: none; }
.card-state-badge { padding: 2px 4px; border: 1px solid #c99d48; border-radius: 3px; background: rgba(68, 48, 16, .92); color: #ffe2a1; font-size: 6px; box-shadow: 0 2px 4px #000; }
.ougi-tag { border-color: #9c6bc4; background: rgba(54, 28, 72, .92); color: #e0c5ff; }
.selection-label { position: absolute; z-index: 5; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 2px 7px; border: 1px solid var(--gold); border-radius: 999px; background: #30230c; color: #ffe5a1; font-size: 7px; white-space: nowrap; }

.card.mulligan-selectable { cursor: pointer; }
.card.mulligan-selected { transform: translateY(-13px); }
.card.mulligan-selected::after { inset: -3%; opacity: 1; border: 3px solid var(--gold); box-shadow: 0 0 20px rgba(247, 204, 104, .86); }
.card.mulligan-selected .selection-label { display: none; }

.board-slot {
  width: clamp(74px, 7vw, 126px);
  aspect-ratio: 530 / 687;
  display: grid;
  place-items: center;
  opacity: .43;
}
.board-slot span { width: 78%; aspect-ratio: 1; border: 1px solid rgba(124, 188, 194, .24); border-radius: 50%; box-shadow: inset 0 0 18px rgba(78, 151, 158, .12); }

.card-back {
  position: relative;
  width: clamp(48px, 4vw, 68px);
  aspect-ratio: 530 / 687;
  flex: 0 0 clamp(48px, 4vw, 68px);
  margin-left: -13px;
  display: grid;
  place-items: center;
  border: 2px solid #587f92;
  border-radius: 7px;
  background:
    radial-gradient(circle, transparent 0 21%, #31596b 22% 24%, transparent 25% 35%, #284a5a 36% 38%, transparent 39%),
    conic-gradient(from 45deg, #0e2937, #234d5c, #0c2230, #2d5b6a, #0e2937);
  box-shadow: inset 0 0 0 4px #091b27, 0 5px 10px rgba(0, 0, 0, .4);
  color: #8ecbd1;
  font-family: Georgia, serif;
  font-size: 9px;
  font-weight: 800;
}
.card-back:first-child { margin-left: 0; }
.empty-copy { align-self: center; color: #68858a; font-size: 10px; }

.zone-counters {
  grid-area: counters;
  align-self: center;
  display: grid;
  gap: 6px;
}
.zone-counters span {
  width: 60px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid rgba(112, 175, 186, .28);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(20, 48, 60, .82), rgba(7, 20, 29, .86));
  box-shadow: 0 5px 11px rgba(0, 0, 0, .22);
}
.zone-counters b { font-size: 15px; color: #e9f5f3; }
.zone-counters small { color: #829ea0; font-size: 6px; letter-spacing: .08em; }
.zone-counters .deck-counter { border-color: rgba(106, 164, 211, .42); background: linear-gradient(145deg, rgba(22, 54, 75, .92), rgba(8, 25, 40, .92)); }

.battle-divider { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 0 18px; }
.battle-divider > span { height: 1px; background: linear-gradient(90deg, transparent, rgba(137, 210, 207, .42)); }
.battle-divider > span:last-child { transform: scaleX(-1); }
.turn-medallion { min-width: 154px; padding: 5px 12px; border: 1px solid rgba(117, 198, 192, .5); border-radius: 999px; background: rgba(7, 22, 29, .84); color: var(--aqua); box-shadow: 0 0 18px rgba(74, 185, 171, .14); text-align: center; font-size: 9px; letter-spacing: .04em; }
.engine-note { display: none; }

.side-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); gap: 10px; overflow: hidden; }
body.show-debug .side-panel { grid-template-rows: minmax(210px, 42fr) minmax(250px, 58fr); }
.panel-section { min-height: 0; display: flex; flex-direction: column; padding: 14px; overflow: hidden; border: 1px solid rgba(119, 181, 190, .28); border-radius: 8px; background: linear-gradient(145deg, rgba(13, 31, 41, .94), rgba(6, 17, 24, .94)); box-shadow: var(--shadow); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-heading h2 { margin-top: 2px; font-size: 15px; font-weight: 650; }
.eyebrow { color: var(--aqua); font-size: 7px; letter-spacing: .17em; }
.count-pill { min-width: 27px; padding: 3px 7px; border: 1px solid rgba(111, 176, 184, .24); border-radius: 999px; background: rgba(27, 56, 66, .72); color: #a9c0bf; text-align: center; font-size: 9px; }
.section-help { margin: 9px 0 11px; color: var(--muted); font-size: 9px; line-height: 1.5; }

.action-list { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-right: 3px; }
.action-button { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(105, 163, 173, .3); border-radius: 5px; background: linear-gradient(180deg, rgba(30, 59, 69, .8), rgba(15, 37, 46, .8)); cursor: pointer; text-align: left; font-size: 10px; }
.action-button:hover { border-color: var(--aqua); filter: brightness(1.15); }
.action-kind { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px currentColor; }
.action-button[data-category="attack"] .action-kind { background: var(--danger); }
.action-button[data-category="evolve"] .action-kind { background: var(--gold); }
.action-button[data-category="super_evolve"] .action-kind { background: var(--purple); }
.action-button[data-category="resource"] .action-kind { background: var(--aqua); }
.action-button[data-category="fusion"] .action-kind { background: #ff71ca; }
.action-button[data-category="turn"] { margin-top: 3px; border-color: rgba(181, 192, 194, .36); }
.action-button[data-category="turn"] .action-kind { background: #bac6c7; }
.cancel-selection { border-color: rgba(240, 197, 104, .5); background: rgba(64, 47, 20, .78); }
.cancel-selection .action-kind { background: var(--gold); }
.mulligan-summary { padding: 11px; border: 1px solid rgba(112, 171, 180, .3); border-radius: 5px; background: rgba(20, 45, 54, .72); color: var(--muted); font-size: 10px; }
.mulligan-summary strong { color: var(--gold); font-size: 15px; }
.mulligan-submit { border-color: rgba(220, 176, 84, .6); background: rgba(62, 47, 17, .85); }
.mulligan-submit .action-kind { background: var(--gold); }

.debug-only { display: none !important; }
body.show-debug .log-section { display: flex !important; }
body.show-debug .replay-toolbar { display: flex !important; }
.text-button { border: 0; padding: 4px; background: transparent; color: var(--aqua); cursor: pointer; font-size: 9px; }
.event-log { flex: 1 1 0; min-height: 0; margin: 10px 0 0; padding: 0 3px 0 0; overflow-y: auto; list-style: none; }
.event-log li { position: relative; padding: 7px 6px 7px 33px; border-top: 1px solid rgba(105, 158, 165, .15); color: #bccdcb; font-size: 9px; line-height: 1.4; }
.event-log li::before { content: attr(data-sequence); position: absolute; left: 3px; top: 7px; color: #55767a; font-variant-numeric: tabular-nums; }
.event-log li:last-child { color: white; background: rgba(23, 52, 60, .56); }

.replay-toolbar {
  position: fixed;
  z-index: 40;
  right: 12px;
  bottom: 12px;
  left: 12px;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(119, 181, 190, .38);
  border-radius: 7px;
  background: rgba(5, 16, 23, .96);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .56);
}
.replay-heading { min-width: 120px; display: grid; gap: 1px; }
.replay-heading strong { font-size: 9px; }
.replay-button { height: 30px; padding: 0 10px; font-size: 9px; }
.replay-range { width: min(31vw, 410px); height: 22px; padding: 0; border: 0; accent-color: var(--aqua); background: transparent; box-shadow: none; }
.replay-position { min-width: 50px; color: var(--muted); font-size: 9px; text-align: center; font-variant-numeric: tabular-nums; }
.toolbar-spacer { flex: 1; }

.toast { position: fixed; z-index: 80; left: 50%; bottom: 22px; max-width: 560px; padding: 10px 15px; border: 1px solid var(--danger); border-radius: 6px; background: rgba(57, 23, 29, .97); color: #ffdada; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity .18s ease, transform .18s ease; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.success { border-color: var(--aqua); background: rgba(21, 57, 48, .97); color: #ddfff3; }

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { border-radius: 7px; background: #2d505a; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1220px) {
  .brand-block { min-width: 188px; }
  .brand-block p { display: none; }
  .main-layout { grid-template-columns: minmax(610px, 1fr) 270px; }
  .player-zone { grid-template-columns: 132px minmax(0, 1fr) 66px; padding-inline: 7px; }
  .zone-counters span { width: 52px; }
  .controls { gap: 5px; }
  .button { padding-inline: 9px; }
  select { min-width: 101px; }
}

@media (max-height: 790px) {
  .app-shell { grid-template-rows: 56px minmax(0, 1fr); }
  .topbar { padding-block: 6px; }
  .brand-mark { width: 36px; height: 36px; }
  .player-zone { grid-template-rows: 84px minmax(0, 1fr); }
  .self-zone { grid-template-rows: minmax(0, 1fr) 98px; }
  .leader-core { width: 74px; height: 63px; }
  .leader-health { width: 31px; height: 31px; }
  .leader-health strong { font-size: 14px; }
  .resource-grid { gap: 2px; }
  .leader-area { display: grid; }
  .card { width: clamp(68px, 6.4vw, 108px); flex-basis: clamp(68px, 6.4vw, 108px); }
  .hand-row .card { width: clamp(62px, 5.4vw, 92px); flex-basis: clamp(62px, 5.4vw, 92px); }
  .board-row { grid-template-columns: repeat(5, minmax(64px, 108px)); }
  .board-slot { width: clamp(68px, 6.4vw, 108px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 0.4 battle presentation: align the visual hierarchy with the official battle screen. */
.main-layout {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}

.battle-column {
  border: 0;
  border-radius: 0;
  background-color: #222d30;
  background-image:
    linear-gradient(90deg, rgba(4, 11, 14, .65), transparent 18%, transparent 82%, rgba(4, 11, 14, .65)),
    radial-gradient(circle at 12px 12px, rgba(165, 174, 171, .1) 0 2px, transparent 2.5px),
    radial-gradient(ellipse at center, rgba(70, 108, 109, .2), rgba(8, 19, 24, .72) 64%),
    repeating-linear-gradient(36deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 24px);
  background-size: auto, 24px 24px, auto, auto;
}

.battle-atmosphere {
  opacity: .72;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(133, 192, 184, .13) 18.3% 18.6%, transparent 19%),
    repeating-radial-gradient(ellipse at center, transparent 0 68px, rgba(154, 190, 183, .035) 69px, transparent 72px),
    linear-gradient(118deg, transparent 45%, rgba(200, 225, 218, .025) 46%, transparent 47%);
}

.status-strip {
  width: min(520px, 48vw);
  justify-self: center;
  border: 1px solid rgba(127, 192, 192, .18);
  border-top: 0;
  border-radius: 0 0 999px 999px;
  background: rgba(5, 15, 21, .68);
}

.player-zone {
  display: block;
  padding: 0 124px 0 84px;
  overflow: visible;
}

.player-zone.is-active::after {
  inset: 0;
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 62%, rgba(101, 222, 199, .075), transparent 50%);
  box-shadow: none;
}

.player-summary {
  position: absolute;
  left: 50%;
  z-index: 7;
  width: 228px;
  height: 126px;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%);
}
.opponent-zone .player-summary { top: -7px; }
.self-zone .player-summary { bottom: -20px; }

.player-heading {
  position: absolute;
  left: 50%;
  z-index: 4;
  width: 168px;
  display: block;
  text-align: center;
  transform: translateX(-50%);
  display: none;
}
.opponent-zone .player-heading { top: 3px; }
.self-zone .player-heading { bottom: 2px; }
.player-index { font-size: 6px; text-shadow: 0 1px 3px #000; }
.deck-name { max-width: none; color: #f6fbf9; font-size: 9px; text-shadow: 0 2px 4px #000; }
.turn-chip { position: absolute; right: -3px; top: 0; background: rgba(4, 15, 21, .82); }

.leader-core {
  position: absolute;
  left: 50%;
  width: 176px;
  height: 118px;
  margin: 0;
  transform: translateX(-50%);
}
.opponent-zone .leader-core { top: 17px; }
.self-zone .leader-core { bottom: 16px; }
.leader-portrait {
  position: absolute;
  inset: 0 31px 0;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--class-accent) 65%, #dceeed);
  border-radius: 50% 50% 28% 28%;
  background:
    radial-gradient(ellipse at 50% 76%, color-mix(in srgb, var(--class-accent) 24%, #172932), #08131a 68%);
  box-shadow:
    inset 0 0 0 3px rgba(4, 13, 20, .76),
    0 0 0 2px rgba(220, 221, 185, .26),
    0 6px 16px rgba(0, 0, 0, .55);
  clip-path: polygon(18% 0, 82% 0, 100% 18%, 93% 82%, 50% 100%, 7% 82%, 0 18%);
}
.leader-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
}
.player-summary.royal .leader-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  transform: scale(1.85);
  transform-origin: 50% 25%;
}
.player-summary.dragon .leader-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 23%;
  transform: scale(2.35);
  transform-origin: 50% 23%;
}
.leader-health {
  left: 50%;
  right: auto;
  bottom: -4px;
  z-index: 6;
  width: 40px;
  height: 44px;
  border-radius: 45% 45% 54% 54%;
  transform: translateX(-50%);
}
.leader-health strong { font-size: 19px; }

.evolution-orbs {
  position: absolute;
  z-index: 3;
  bottom: 11px;
  display: flex;
  gap: 3px;
  padding: 4px 8px;
  border-radius: 50%;
  background: rgba(7, 16, 23, .78);
  box-shadow: 0 3px 7px #000;
}
.ep-orbs { left: 0; }
.sep-orbs { right: 0; }
.evolution-orbs span { width: 17px; height: 23px; border: 2px solid rgba(233, 230, 207, .82); transform: rotate(45deg); }
.ep-orb { border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 35% 30%, #ffc95a, #a85e10 72%); }
.sep-orb { background: radial-gradient(circle at 35% 30%, #ca8cff, #693c9d 72%); }
.evolution-orbs .spent { filter: grayscale(1) brightness(.34); }

.resource-grid { display: none; }
.leader-shield { position: absolute; z-index: 8; left: 50%; bottom: 8px; transform: translateX(-50%); }
.leader-area {
  position: absolute;
  z-index: 8;
  top: 139px;
  left: 50%;
  width: min(320px, 32vw);
  max-height: 78px;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid rgba(141, 207, 205, .46);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(7, 25, 32, .94), rgba(5, 15, 22, .92));
  box-shadow: 0 5px 14px rgba(0, 0, 0, .4), inset 0 0 16px rgba(77, 158, 158, .1);
  transform: translateX(-50%);
}
.self-zone .leader-area { top: auto; bottom: 138px; left: 50%; }
.leader-area-title {
  display: block;
  margin-bottom: 4px;
  color: #abd0cf;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
}
.leader-effects {
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.leader-effect {
  flex: 0 0 min(158px, 23vw);
  max-width: none;
  gap: 2px;
  padding: 5px 7px;
  border-radius: 5px;
}
.leader-effect strong { font-size: 10px; }
.leader-effect small { font-size: 9px; }
.leader-effect-empty { font-size: 10px; }

.hand-row {
  position: absolute;
  z-index: 9;
  width: 44%;
  height: 104px;
  justify-content: flex-start;
  padding: 0 15px;
  overflow: visible;
}
.opponent-zone .hand-row { top: -5px; left: 12px; align-items: flex-start; }
.self-zone .hand-row { right: 84px; bottom: -11px; justify-content: flex-end; align-items: flex-end; }
.hand-row .card { width: clamp(62px, 5.7vw, 103px); flex-basis: clamp(62px, 5.7vw, 103px); margin-left: clamp(-23px, -1.15vw, -10px); }
.opponent-zone .hand-row .card { width: clamp(54px, 4.5vw, 78px); flex-basis: clamp(54px, 4.5vw, 78px); }
.self-zone .hand-row .card:hover:not(:disabled) { transform: translateY(-38px) scale(1.35); }

.board-row {
  position: absolute;
  left: 50%;
  width: min(58vw, 760px);
  height: 148px;
  display: flex;
  justify-content: center;
  gap: clamp(7px, 1.2vw, 18px);
  padding: 5px;
  transform: translateX(-50%);
}
.opponent-zone .board-row { bottom: 1px; align-items: end; }
.self-zone .board-row { top: 1px; align-items: start; }

.board-row .card {
  width: clamp(70px, 6.7vw, 112px);
  height: clamp(90px, 8.4vw, 137px);
  aspect-ratio: auto;
  border-radius: 48% 48% 36% 36%;
  background: conic-gradient(from 25deg, #6f8791, #e3d6a7, #496773, #d6ca9e, #6f8791);
  box-shadow: 0 7px 11px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(8, 22, 29, .68);
}
.board-art-mask {
  position: absolute;
  z-index: 1;
  inset: 5px;
  overflow: hidden;
  border-radius: 48% 48% 34% 34%;
  background: #0d222b;
  clip-path: polygon(13% 0, 87% 0, 100% 18%, 94% 79%, 50% 100%, 6% 79%, 0 18%);
}
.board-art-mask .card-art {
  position: absolute;
  top: -32%;
  left: -32%;
  width: 164%;
  height: 164%;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(1.06) contrast(1.03);
}
.board-row .card.super-evolved {
  width: clamp(82px, 7.45vw, 124px);
  height: clamp(86px, 7.55vw, 126px);
  flex-basis: clamp(82px, 7.45vw, 124px);
  flex-shrink: 1;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 9px 14px rgba(0, 0, 0, .62);
  isolation: isolate;
}
.board-row .card.super-evolved .board-art-mask {
  inset: 8% 9% 9%;
  border-radius: 0;
  clip-path: polygon(17% 7%, 34% 2%, 50% 6%, 66% 2%, 83% 7%, 96% 23%, 93% 68%, 82% 88%, 50% 98%, 18% 88%, 7% 68%, 4% 23%);
  box-shadow: inset 0 0 12px rgba(210, 203, 246, .5);
}
.board-row .card.super-evolved .board-art-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(119deg, transparent 27%, rgba(255, 255, 255, .38) 40%, transparent 51%),
    radial-gradient(circle at 50% 82%, rgba(207, 196, 255, .2), transparent 43%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.card.super-evolved .super-evolution-crystal {
  position: absolute;
  z-index: 0;
  inset: -3% -4% -5%;
  pointer-events: none;
  clip-path: polygon(8% 13%, 18% 4%, 34% 7%, 43% 1%, 50% 5%, 58% 1%, 67% 7%, 83% 4%, 93% 14%, 100% 29%, 95% 48%, 100% 66%, 91% 84%, 73% 91%, 50% 100%, 27% 91%, 9% 84%, 0 66%, 5% 48%, 0 29%);
  background:
    conic-gradient(from 12deg at 50% 48%, rgba(255,255,255,.96), rgba(164,185,225,.72) 9%, rgba(242,228,255,.92) 19%, rgba(111,122,172,.7) 30%, rgba(255,255,255,.96) 43%, rgba(170,143,205,.72) 58%, rgba(225,238,255,.92) 73%, rgba(121,141,184,.76) 87%, rgba(255,255,255,.96));
  filter: drop-shadow(0 0 4px rgba(235, 229, 255, .9)) drop-shadow(0 5px 5px rgba(0, 0, 0, .62));
}
.card.super-evolved .super-evolution-crystal::before {
  content: "";
  position: absolute;
  inset: 6% 7% 7%;
  clip-path: polygon(13% 10%, 35% 4%, 50% 8%, 65% 4%, 87% 10%, 96% 27%, 92% 69%, 79% 87%, 50% 96%, 21% 87%, 8% 69%, 4% 27%);
  background: rgba(25, 28, 47, .92);
}
.card.super-evolved .super-evolution-crystal::after {
  content: "";
  position: absolute;
  inset: 1%;
  clip-path: polygon(8% 13%, 18% 4%, 34% 7%, 43% 1%, 50% 5%, 58% 1%, 67% 7%, 83% 4%, 93% 14%, 100% 29%, 95% 48%, 100% 66%, 91% 84%, 73% 91%, 50% 100%, 27% 91%, 9% 84%, 0 66%, 5% 48%, 0 29%);
  background:
    linear-gradient(68deg, transparent 15%, rgba(255,255,255,.58) 16% 17%, transparent 18% 82%, rgba(255,255,255,.42) 83% 84%, transparent 85%),
    linear-gradient(112deg, transparent 22%, rgba(186,165,229,.44) 23% 25%, transparent 26% 74%, rgba(216,235,255,.5) 75% 77%, transparent 78%);
  mix-blend-mode: screen;
  opacity: .88;
}
.crystal-facet {
  position: absolute;
  z-index: 2;
  opacity: .72;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(151,166,217,.28));
  mix-blend-mode: screen;
}
.crystal-facet.facet-top-left { top: 2%; left: 11%; width: 34%; height: 22%; clip-path: polygon(0 54%, 26% 0, 100% 22%, 67% 100%); }
.crystal-facet.facet-top { top: 0; left: 39%; width: 23%; height: 20%; clip-path: polygon(17% 0, 50% 27%, 83% 0, 100% 72%, 50% 100%, 0 72%); }
.crystal-facet.facet-top-right { top: 2%; right: 11%; width: 34%; height: 22%; clip-path: polygon(0 22%, 74% 0, 100% 54%, 33% 100%); }
.crystal-facet.facet-left { top: 19%; left: 0; width: 18%; height: 66%; clip-path: polygon(45% 0, 100% 17%, 72% 48%, 100% 78%, 48% 100%, 0 72%, 28% 49%, 0 24%); }
.crystal-facet.facet-right { top: 19%; right: 0; width: 18%; height: 66%; clip-path: polygon(55% 0, 100% 24%, 72% 49%, 100% 72%, 52% 100%, 0 78%, 28% 48%, 0 17%); }
.board-row .card.super-evolved .dynamic-stats span {
  bottom: -2px;
  width: 29%;
  font-size: clamp(14px, 1.45vw, 22px);
  border-width: 2px;
  box-shadow: 0 0 5px rgba(225, 231, 255, .55), 0 3px 7px rgba(0, 0, 0, .78);
}
.board-row .card.super-evolved .dynamic-stats .attack { left: -3px; }
.board-row .card.super-evolved .dynamic-stats .defense { right: -3px; }
.board-row .card::before, .board-row .card::after { inset: -4px; border-radius: 48% 48% 36% 36%; }
.board-row .card.super-evolved::before,
.board-row .card.super-evolved::after { inset: -7px; border-radius: 18%; }
.board-row .card.action-source::before { border-width: 3px; }
.board-row .card.entering { animation: board-enter .42s cubic-bezier(.2, .9, .25, 1.28); }
@keyframes board-enter { from { opacity: 0; transform: translateY(-36px) scale(1.35) rotate(-4deg); filter: brightness(2); } }
.hand-row .card.drawn { animation: hand-draw .46s cubic-bezier(.18, .85, .25, 1.16); }
@keyframes hand-draw { from { opacity: 0; transform: translate(55px, 30px) rotate(9deg) scale(.75); filter: brightness(1.8); } }
.board-row .card.is-dragging { opacity: .45; transform: scale(.93); }
.card.attacking-source { opacity: 0 !important; }
.card.evolving-source { opacity: 0 !important; }
.card.attack-ghost {
  position: absolute;
  z-index: 58;
  margin: 0;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, filter;
  filter: drop-shadow(0 13px 14px rgba(0, 0, 0, .72));
}

.evolution-cinematic {
  --evolution-main: #ffd66f;
  --evolution-bright: #fffbd8;
  --evolution-deep: #d67c1e;
  position: absolute;
  z-index: 62;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
.evolution-cinematic.super {
  --evolution-main: #c888ff;
  --evolution-bright: #fff1ff;
  --evolution-deep: #6833d4;
}
.evolution-backdrop,
.evolution-rays,
.evolution-ring,
.evolution-sigil,
.evolution-particles,
.evolution-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
}
.evolution-backdrop {
  z-index: 0;
  width: 150%;
  height: 150%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .1) 0 12%, color-mix(in srgb, var(--evolution-main) 23%, transparent) 25%, transparent 52%),
    rgba(0, 5, 10, .52);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: evolution-backdrop-in .42s ease-out forwards;
  backdrop-filter: blur(1.5px) saturate(.78);
}
.evolution-rays {
  z-index: 1;
  width: min(68vw, 660px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 4deg,
    transparent 0 8deg,
    color-mix(in srgb, var(--evolution-main) 34%, transparent) 9deg 10deg,
    transparent 11deg 20deg
  );
  opacity: .54;
  mask-image: radial-gradient(circle, transparent 0 15%, #000 28%, transparent 69%);
  transform: translate(-50%, -50%);
  animation: evolution-rays-spin 4s linear infinite, evolution-rays-breathe .72s ease-in-out infinite alternate;
}
.evolution-ring {
  z-index: 2;
  border: 2px solid var(--evolution-main);
  border-radius: 50%;
  box-shadow:
    0 0 9px var(--evolution-main),
    0 0 30px color-mix(in srgb, var(--evolution-main) 58%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--evolution-main) 52%, transparent);
}
.evolution-ring::before,
.evolution-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.evolution-ring::before {
  inset: 8%;
  border: 1px dashed color-mix(in srgb, var(--evolution-bright) 80%, transparent);
}
.evolution-ring::after {
  inset: -7%;
  border: 1px solid color-mix(in srgb, var(--evolution-main) 36%, transparent);
  clip-path: polygon(0 0, 42% 0, 42% 100%, 0 100%);
}
.ring-outer {
  width: min(39vw, 390px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.25) rotate(-24deg);
  animation: evolution-ring-outer 1.1s cubic-bezier(.16,.82,.2,1) forwards;
}
.ring-inner {
  width: min(27vw, 270px);
  aspect-ratio: 1;
  border-width: 1px;
  transform: translate(-50%, -50%) scale(.18) rotate(28deg);
  animation: evolution-ring-inner .92s cubic-bezier(.16,.82,.2,1) .08s forwards;
}
.evolution-sigil {
  z-index: 2;
  width: min(22vw, 218px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--evolution-bright) 76%, transparent);
  clip-path: polygon(50% 0, 61% 34%, 96% 20%, 70% 50%, 100% 67%, 62% 65%, 50% 100%, 38% 65%, 0 67%, 30% 50%, 4% 20%, 39% 34%);
  background: radial-gradient(circle, transparent 35%, color-mix(in srgb, var(--evolution-main) 38%, transparent) 36% 38%, transparent 39%);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-20deg) scale(.5);
}
.evolution-cinematic.charging .evolution-sigil {
  animation: evolution-sigil-charge .76s ease-out forwards;
}
.evolution-particles {
  z-index: 5;
  width: 1px;
  height: 1px;
}
.evolution-particles i {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--evolution-bright), var(--evolution-main), transparent);
  box-shadow: 0 0 8px var(--evolution-main);
  opacity: 0;
  transform: rotate(var(--particle-angle)) translateY(-32px) scaleY(.2);
  transform-origin: 50% 0;
}
.evolution-cinematic.charging .evolution-particles i {
  animation: evolution-particle-fly .76s cubic-bezier(.18,.7,.3,1) var(--particle-delay) both;
}
.evolution-burst {
  z-index: 6;
  width: min(55vw, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, white 0 4%, var(--evolution-bright) 5% 8%, color-mix(in srgb, var(--evolution-main) 74%, transparent) 15%, transparent 47%),
    repeating-conic-gradient(from 5deg, transparent 0 11deg, color-mix(in srgb, var(--evolution-bright) 80%, transparent) 12deg 13deg, transparent 14deg 27deg);
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(.1);
}
.evolution-cinematic.revealed .evolution-burst {
  animation: evolution-burst .68s ease-out both;
}
.evolution-title {
  position: absolute;
  z-index: 8;
  top: calc(50% - min(17vw, 170px));
  left: 50%;
  display: grid;
  justify-items: center;
  color: var(--evolution-bright);
  opacity: 0;
  text-align: center;
  text-shadow: 0 0 9px var(--evolution-main), 0 3px 8px #000;
  transform: translate(-50%, 12px) scale(.85);
}
.evolution-title small {
  color: var(--evolution-main);
  font-family: Georgia, serif;
  font-size: clamp(8px, .85vw, 13px);
  letter-spacing: .34em;
}
.evolution-title strong {
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: clamp(23px, 3vw, 43px);
  font-weight: 500;
  letter-spacing: .18em;
}
.evolution-cinematic.revealed .evolution-title {
  animation: evolution-title-in .8s cubic-bezier(.18,.82,.2,1) both;
}
.card.evolution-card-ghost {
  position: absolute;
  z-index: 7;
  margin: 0;
  overflow: visible;
  border-radius: 8% / 6%;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transform-origin: center;
  will-change: transform, filter, opacity;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .82));
}
.evolution-card-ghost > .card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 9px var(--evolution-main));
}
.evolution-card-ghost.evolution-revealed::before {
  inset: -4%;
  border: 2px solid var(--evolution-bright);
  border-radius: 9% / 7%;
  box-shadow: 0 0 14px var(--evolution-bright), 0 0 35px var(--evolution-main), inset 0 0 18px var(--evolution-main);
  opacity: 1;
  animation: evolution-card-aura .58s ease-in-out infinite alternate;
}
.evolution-cinematic.super .evolution-card-ghost.evolution-revealed::after {
  inset: -9%;
  border: 2px solid rgba(255, 220, 119, .76);
  border-radius: 50%;
  box-shadow: 0 0 20px #b26dff;
  opacity: .82;
  animation: evolution-super-halo 1s linear infinite;
}
.evolution-cinematic.returning {
  animation: evolution-layer-out .36s ease-in forwards;
}
.evolution-cinematic.super.revealed {
  animation: evolution-super-shock .34s ease-out;
}
@keyframes evolution-backdrop-in { to { opacity: 1; } }
@keyframes evolution-rays-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes evolution-rays-breathe { to { opacity: .82; filter: brightness(1.45); } }
@keyframes evolution-ring-outer {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(-24deg); }
  28% { opacity: 1; }
  100% { opacity: .92; transform: translate(-50%, -50%) scale(1) rotate(105deg); }
}
@keyframes evolution-ring-inner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18) rotate(28deg); }
  35% { opacity: 1; }
  100% { opacity: .88; transform: translate(-50%, -50%) scale(1) rotate(-124deg); }
}
@keyframes evolution-sigil-charge {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-20deg) scale(.5); }
  68% { opacity: .9; }
  100% { opacity: .28; transform: translate(-50%, -50%) rotate(35deg) scale(1.35); }
}
@keyframes evolution-particle-fly {
  0% { opacity: 0; transform: rotate(var(--particle-angle)) translateY(-28px) scaleY(.15); }
  22% { opacity: 1; }
  76% { opacity: .88; }
  100% { opacity: 0; transform: rotate(var(--particle-angle)) translateY(var(--particle-distance)) scaleY(1.25); }
}
@keyframes evolution-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.08) rotate(-10deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.28) rotate(12deg); }
}
@keyframes evolution-title-in {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.85); }
  28%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -7px) scale(1.04); }
}
@keyframes evolution-card-aura { to { filter: brightness(1.35); box-shadow: 0 0 24px var(--evolution-bright), 0 0 48px var(--evolution-main), inset 0 0 25px var(--evolution-main); } }
@keyframes evolution-super-halo { to { transform: rotate(360deg) scale(1.05); } }
@keyframes evolution-layer-out { to { opacity: 0; } }
@keyframes evolution-super-shock {
  0%, 100% { transform: translate(0, 0); }
  24% { transform: translate(-3px, 2px); }
  48% { transform: translate(4px, -2px); }
  72% { transform: translate(-2px, -1px); }
}
.attack-trail {
  position: absolute;
  z-index: 57;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(129, 244, 255, .68) 13%, white 72%, #ffd57a 90%, transparent);
  box-shadow: 0 0 7px #68e9ff, 0 0 18px rgba(111, 230, 255, .82);
  opacity: 0;
  pointer-events: none;
  transform: rotate(var(--trail-angle)) scaleX(0);
  transform-origin: left center;
  animation-name: attack-trail;
  animation-timing-function: cubic-bezier(.2,.72,.18,1);
  animation-fill-mode: both;
}
.attack-trail::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -13px;
  width: 29px;
  height: 29px;
  border: 3px solid rgba(255, 246, 184, .9);
  border-radius: 50%;
  box-shadow: 0 0 13px #fff4ae;
  transform: translateY(-50%);
}
.attack-impact {
  position: absolute;
  z-index: 59;
  width: 118px;
  height: 118px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: attack-impact .33s ease-out both;
}
.attack-impact::before,
.attack-impact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 7deg, transparent 0 7%, #fffbd7 8% 10%, transparent 11% 20%, #ffb657 21% 24%, transparent 25% 37%, #fff 38% 40%, transparent 41% 57%, #ff794d 58% 62%, transparent 63% 78%, #fff5bd 79% 82%, transparent 83%);
  clip-path: polygon(50% 0, 57% 38%, 84% 13%, 66% 43%, 100% 50%, 65% 57%, 87% 88%, 57% 64%, 50% 100%, 43% 64%, 13% 88%, 35% 57%, 0 50%, 35% 43%, 16% 13%, 43% 38%);
}
.attack-impact::after { inset: 28%; background: radial-gradient(circle, white, #ffd45d 30%, #ff643e 55%, transparent 72%); filter: blur(2px); }
.hit-target { animation: hit-target .31s ease-out !important; }
@keyframes attack-impact { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.18) rotate(-22deg); } 34% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45) rotate(13deg); } }
@keyframes attack-trail { 0%, 13% { opacity: 0; transform: rotate(var(--trail-angle)) scaleX(0); } 42%, 58% { opacity: 1; transform: rotate(var(--trail-angle)) scaleX(1); } 100% { opacity: 0; transform: rotate(var(--trail-angle)) scaleX(.2); } }
@keyframes hit-target { 0%, 100% { transform: translate(0, 0); filter: brightness(1); } 20% { transform: translate(-7px, 3px); filter: brightness(2.2); } 42% { transform: translate(6px, -2px); filter: brightness(1.25); } 65% { transform: translate(-3px, 1px); } }

.floating-value {
  position: absolute;
  z-index: 67;
  min-width: 44px;
  padding: 2px 8px;
  border-radius: 999px;
  color: white;
  font-family: Georgia, "Microsoft YaHei UI", serif;
  font-size: clamp(22px, 2.7vw, 38px);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%);
  animation: floating-value-rise .42s cubic-bezier(.15,.76,.24,1) both;
}
.floating-value.damage {
  border: 1px solid rgba(255, 218, 185, .72);
  background: radial-gradient(circle, rgba(132, 16, 17, .78), rgba(50, 2, 8, .1) 72%);
  color: #fff0db;
  text-shadow: 0 2px 0 #6e0808, 0 0 8px #ff4d39, 0 0 18px #ff2b27;
}
.floating-value.heal,
.floating-value.buff {
  color: #eaffc8;
  text-shadow: 0 2px 0 #14591c, 0 0 9px #78ff75, 0 0 18px #44d87c;
}
.floating-value.buff { color: #fff5b5; text-shadow: 0 2px 0 #745417, 0 0 9px #ffe274; }
@keyframes floating-value-rise {
  0% { opacity: 0; transform: translate(-50%, 15%) scale(.55); }
  24% { opacity: 1; transform: translate(-50%, -35%) scale(1.18); }
  72% { opacity: 1; transform: translate(-50%, -82%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -135%) scale(.92); }
}

.dynamic-stats .defense.lethal-stat {
  color: #fff1d9;
  background: radial-gradient(circle, #ef4b3d, #771019 72%);
  box-shadow: 0 0 13px #ff392b, inset 0 0 5px rgba(255,255,255,.32);
}
.leader-taking-damage .leader-health {
  color: #fff0d8;
  box-shadow: inset 0 0 0 2px rgba(47, 5, 10, .65), 0 0 18px #ff3a30;
}
.leader-healing .leader-health { box-shadow: inset 0 0 0 2px rgba(9, 58, 21, .6), 0 0 18px #61f48c; }
.receiving-buff { animation: receiving-buff .35s ease-out !important; }
@keyframes receiving-buff {
  35% { filter: brightness(1.65) drop-shadow(0 0 14px rgba(255, 229, 104, .85)); transform: translateY(-4px) scale(1.06); }
}

.departure-effect {
  position: absolute;
  z-index: 66;
  width: 116px;
  height: 116px;
  border: 2px solid rgba(255, 207, 141, .74);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.92) 0 4%, rgba(255,151,79,.58) 5% 16%, rgba(80,18,25,.32) 34%, transparent 68%);
  box-shadow: 0 0 14px rgba(255, 112, 72, .82), inset 0 0 19px rgba(255, 223, 161, .68);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: departure-ring .52s ease-out both;
}
.departure-effect.banish {
  border-color: rgba(155, 231, 255, .82);
  background: radial-gradient(circle, white 0 4%, rgba(95,205,255,.58) 5% 16%, rgba(38,42,112,.3) 34%, transparent 68%);
  box-shadow: 0 0 17px rgba(89, 208, 255, .84), inset 0 0 21px rgba(184, 239, 255, .65);
}
.departure-effect strong {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff3d7;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 13px;
  letter-spacing: .28em;
  text-shadow: 0 2px 5px #3e0909, 0 0 10px #ff6b45;
  transform: translate(-46%, -50%);
}
.departure-effect i {
  --departure-x: 44px;
  --departure-y: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 7px;
  clip-path: polygon(0 38%, 78% 0, 100% 58%, 28% 100%);
  background: linear-gradient(90deg, #fff7cf, #ff7f50 65%, transparent);
  filter: drop-shadow(0 0 4px #ff6045);
  animation: departure-shard .52s ease-out both;
}
.departure-effect.banish i { background: linear-gradient(90deg, white, #67d9ff 65%, transparent); filter: drop-shadow(0 0 4px #5bd2ff); }
.departure-effect i:nth-child(2) { --departure-x: 22px; --departure-y: 40px; transform: rotate(60deg); }
.departure-effect i:nth-child(3) { --departure-x: -24px; --departure-y: 38px; transform: rotate(120deg); }
.departure-effect i:nth-child(4) { --departure-x: -46px; --departure-y: -2px; transform: rotate(180deg); }
.departure-effect i:nth-child(5) { --departure-x: -22px; --departure-y: -40px; transform: rotate(240deg); }
.departure-effect i:nth-child(6) { --departure-x: 24px; --departure-y: -38px; transform: rotate(300deg); }
@keyframes departure-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-10deg); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(.72) rotate(3deg); }
  68% { opacity: .9; transform: translate(-50%, -50%) scale(1.12) rotate(8deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45) rotate(14deg); }
}
@keyframes departure-shard {
  0% { opacity: 0; margin: 0; }
  28% { opacity: 1; }
  100% { opacity: 0; margin-left: var(--departure-x); margin-top: var(--departure-y); }
}
.card.drag-target::after, .player-summary.drag-target::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 12;
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
  border: 3px solid #ff8a67;
  box-shadow: 0 0 22px #ff6d49, inset 0 0 15px rgba(255, 99, 68, .38);
  animation: target-glow .55s ease-in-out infinite alternate;
}
.board-row.drag-target { border-radius: 50%; background: radial-gradient(ellipse, rgba(90, 239, 205, .16), transparent 70%); }

.hand-row .card.action-source {
  touch-action: none;
  user-select: none;
}
.hand-row .card.hand-gesture-armed { cursor: grabbing; }
body.hand-card-dragging .hand-row .card.hand-dragging,
body.hand-card-dragging .hand-row .card.hand-dragging:hover:not(:disabled) {
  z-index: 46;
  transform: translate3d(var(--play-drag-x, 0), var(--play-drag-y, 0), 0)
    scale(calc(1.08 + var(--play-drag-progress, 0) * .07));
  transform-origin: 50% 82%;
  transition: none;
  filter: brightness(calc(1 + var(--play-drag-progress, 0) * .18))
    drop-shadow(0 18px 18px rgba(0, 0, 0, .68));
  cursor: grabbing;
  will-change: transform, filter;
}
body.hand-card-dragging .hand-row .card.hand-dragging.play-gesture-ready,
body.hand-card-dragging .hand-row .card.hand-dragging.play-gesture-ready:hover:not(:disabled) {
  filter: brightness(1.22) drop-shadow(0 0 13px rgba(112, 243, 222, .88))
    drop-shadow(0 20px 20px rgba(0, 0, 0, .7));
}
.board-row.play-gesture-zone {
  isolation: isolate;
}
.board-row.play-gesture-zone::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 4% -5%;
  border: 2px solid rgba(99, 220, 202, calc(.16 + var(--play-progress, 0) * .54));
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(75, 219, 196, calc(.05 + var(--play-progress, 0) * .16)), transparent 68%);
  box-shadow: 0 0 calc(8px + var(--play-progress, 0) * 18px) rgba(78, 231, 205, .3);
  pointer-events: none;
}
.board-row.play-gesture-zone::after {
  content: "向上拖动";
  position: absolute;
  z-index: 31;
  left: 50%;
  top: 50%;
  min-width: 92px;
  padding: 5px 13px;
  border: 1px solid rgba(128, 229, 215, .54);
  border-radius: 999px;
  background: rgba(5, 24, 29, .82);
  color: rgba(201, 247, 239, calc(.58 + var(--play-progress, 0) * .42));
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
  text-align: center;
  text-shadow: 0 1px 4px #00100d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .34);
  opacity: calc(.46 + var(--play-progress, 0) * .54);
  transform: translate(-50%, -50%) scale(calc(.94 + var(--play-progress, 0) * .06));
  pointer-events: none;
}
.board-row.play-gesture-zone.play-ready::before {
  border-color: rgba(141, 255, 231, .9);
  background: radial-gradient(ellipse, rgba(85, 241, 207, .2), transparent 69%);
}
.board-row.play-gesture-zone.play-ready::after {
  content: "松手打出";
  border-color: #9affe8;
  color: #eafff9;
  box-shadow: 0 0 16px rgba(88, 247, 216, .62), 0 4px 12px rgba(0, 0, 0, .36);
}

.dynamic-stats span { bottom: -3px; width: 31%; font-size: clamp(12px, 1.25vw, 19px); }
.dynamic-stats .attack { left: -4px; transform: rotate(45deg); }
.dynamic-stats .attack { text-shadow: 0 2px 3px #000; }
.dynamic-stats .defense { right: -4px; }
.dynamic-stats .attack {
  border-radius: 1px;
  transform: none;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.board-row .card-state-badges { top: 48%; right: -8px; }
.board-row .selection-label { bottom: -15px; }

.board-slot { display: none; width: clamp(70px, 6.7vw, 112px); height: clamp(90px, 8.4vw, 137px); aspect-ratio: auto; }
.board-slot span { width: 74%; border-color: rgba(161, 190, 190, .16); }

.zone-counters {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
}
.opponent-zone .zone-counters { top: 6px; right: 16px; }
.self-zone .zone-counters { bottom: 8px; left: 18px; }
.zone-counters span {
  width: 58px;
  min-height: 48px;
  padding: 5px;
  border-color: rgba(128, 193, 199, .42);
  background: linear-gradient(145deg, rgba(22, 53, 64, .94), rgba(7, 21, 30, .94));
  box-shadow: 0 5px 13px rgba(0, 0, 0, .38), inset 0 0 12px rgba(100, 190, 188, .06);
}
.zone-counters b { color: #f1fbf8; font-size: 19px; line-height: 1; }
.zone-counters small { color: #a9c3c2; font-size: 9px; font-weight: 650; letter-spacing: .05em; }

.battle-tools { position: absolute; z-index: 20; top: 48%; left: 14px; transform: translateY(-50%); }
.battle-tool-button {
  width: 48px;
  height: 48px;
  border: 2px solid #a6b8a7;
  border-radius: 9px;
  background: linear-gradient(145deg, #445b55, #182b31);
  box-shadow: inset 0 0 0 4px rgba(7, 17, 22, .72), 0 5px 12px #000;
  color: #e8e2c7;
  font-size: 19px;
  cursor: pointer;
}

.turn-control {
  position: absolute;
  z-index: 19;
  top: 50%;
  right: 17px;
  width: 150px;
  display: grid;
  justify-items: center;
  gap: 5px;
  transform: translateY(-50%);
}
.pp-display {
  width: 142px;
  padding: 7px 8px;
  border: 2px solid #3c806f;
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(17, 54, 54, .96), rgba(8, 26, 32, .96));
  box-shadow: inset 0 0 0 2px rgba(200, 211, 174, .18), 0 5px 14px #000;
  text-align: center;
}
.pp-display > span { color: #9ee0a3; font-size: 9px; letter-spacing: .08em; }
.pp-display strong { margin-left: 8px; font-size: 22px; }
.pp-display strong small { margin-left: 2px; color: #bdcbc8; font-size: 11px; }
.pp-pips { margin-top: 4px; display: flex; justify-content: center; gap: 2px; }
.pp-pip { width: 10px; height: 10px; border: 1px solid #4a625e; border-radius: 50%; background: #132726; }
.pp-pip.available { border-color: #72ba79; }
.pp-pip.filled { background: radial-gradient(circle at 35% 30%, #d7ff9c, #45a15f 65%, #145336); box-shadow: 0 0 5px rgba(111, 233, 124, .65); }
.end-turn-button {
  position: relative;
  width: 112px;
  height: 112px;
  display: grid;
  place-content: center;
  border: 5px solid #89794f;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 38%, #18375c, #06182b 66%, #020b12);
  box-shadow: inset 0 0 0 4px #0a1015, inset 0 0 25px rgba(84, 171, 255, .24), 0 0 0 2px #c0af78, 0 8px 18px #000;
  color: #9dadb6;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: .1em;
  cursor: not-allowed;
}
.end-turn-button.ready {
  border-color: #b8d7c5;
  background: radial-gradient(circle at 45% 38%, #21b9ff, #0960bc 52%, #072952 78%);
  box-shadow: inset 0 0 0 4px #05213b, inset 0 0 28px rgba(191, 244, 255, .65), 0 0 0 2px #e5d89e, 0 0 21px rgba(44, 170, 255, .65), 0 8px 18px #000;
  color: white;
  cursor: pointer;
  animation: end-ready 1.2s ease-in-out infinite alternate;
}
@keyframes end-ready { to { filter: brightness(1.16); box-shadow: inset 0 0 0 4px #05213b, inset 0 0 32px rgba(211, 250, 255, .78), 0 0 0 2px #f5e4a6, 0 0 30px rgba(44, 170, 255, .82), 0 8px 18px #000; } }
.extra-pp-button { width: 138px; min-height: 31px; border: 2px solid #f2c184; border-radius: 5px; background: linear-gradient(180deg, #df7f21, #a54210); box-shadow: inset 0 0 0 2px rgba(94, 31, 6, .5), 0 4px 10px #000; color: white; font-size: 11px; cursor: pointer; }
.extra-pp-button:disabled { filter: grayscale(1); opacity: .45; cursor: not-allowed; }

.side-panel {
  position: absolute;
  z-index: 35;
  top: 10px;
  right: 12px;
  bottom: 10px;
  width: 322px;
  display: grid;
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(100% + 22px));
  transition: opacity .18s ease, transform .2s ease;
}
body.show-action-panel .side-panel,
body.show-debug .side-panel { opacity: 1; pointer-events: auto; transform: translateX(0); }
.panel-close { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(146, 190, 195, .35); border-radius: 50%; background: rgba(6, 17, 24, .7); color: #bacdcb; cursor: pointer; }

.effect-banner {
  position: absolute;
  z-index: 60;
  top: 50%;
  left: 50%;
  min-width: 240px;
  max-width: 520px;
  display: grid;
  gap: 2px;
  padding: 10px 18px;
  border: 1px solid rgba(207, 226, 199, .56);
  border-radius: 999px;
  background: rgba(4, 15, 22, .91);
  box-shadow: 0 0 28px rgba(83, 229, 205, .3), 0 7px 18px #000;
  color: #f2fbf7;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -35%) scale(.92);
}
.effect-banner span { font-size: 10px; }
.effect-banner strong { color: #fff0b0; font-size: 13px; font-weight: 650; letter-spacing: .04em; }
.effect-banner.visible { animation: effect-pop 1.5s ease both; }
@keyframes effect-pop { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.88); } 15%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.98); } }

.turn-splash {
  position: absolute;
  z-index: 64;
  top: 50%;
  left: 50%;
  min-width: min(440px, 48vw);
  display: grid;
  justify-items: center;
  padding: 12px 42px;
  border-block: 1px solid rgba(222, 211, 158, .7);
  background: linear-gradient(90deg, transparent, rgba(4, 15, 24, .95) 18% 82%, transparent);
  color: white;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scaleX(.72);
}
.turn-splash span { color: #8de4dc; font-size: 8px; letter-spacing: .34em; }
.turn-splash strong { font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(24px, 3.2vw, 43px); font-weight: 500; letter-spacing: .12em; text-shadow: 0 4px 18px #000; }
.turn-splash.visible { animation: turn-splash .82s ease both; }
@keyframes turn-splash { 0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.72); } 20%, 72% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.06); } }

.battle-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.battle-column.fx-strike .battle-atmosphere::after { animation: fx-strike .56s ease-out; background: linear-gradient(116deg, transparent 37%, rgba(255,255,255,.88) 48%, #ff8a5c 50%, transparent 62%); }
.battle-column.fx-damage .battle-atmosphere::after { animation: fx-flash .55s ease-out; background: radial-gradient(circle, transparent 12%, rgba(201, 31, 28, .42)); }
.battle-column.fx-heal .battle-atmosphere::after { animation: fx-flash .62s ease-out; background: radial-gradient(circle, rgba(171, 255, 176, .34), transparent 58%); }
.battle-column.fx-evolve .battle-atmosphere::after { animation: fx-evolve .62s ease-out; background: conic-gradient(from 0deg, transparent, rgba(222, 145, 255, .35), transparent 35%, rgba(87, 220, 255, .28), transparent 70%); }
.battle-column.fx-destroy .battle-atmosphere::after { animation: fx-destroy .52s ease-out; background: radial-gradient(circle, rgba(255,255,255,.4), rgba(31, 13, 36, .5) 30%, transparent 62%); }
.battle-column.fx-draw .self-zone .hand-row { animation: fx-hand-pulse .52s ease-out; }
.battle-column.fx-turn .turn-medallion { animation: fx-turn-medallion .62s ease-out; }
@keyframes fx-strike { 0% { opacity: 0; transform: translateX(-10%); } 22% { opacity: 1; } 100% { opacity: 0; transform: translateX(12%); } }
@keyframes fx-flash { 0%, 100% { opacity: 0; } 24% { opacity: 1; } }
@keyframes fx-evolve { 0% { opacity: 0; transform: rotate(-14deg) scale(.8); } 38% { opacity: 1; } 100% { opacity: 0; transform: rotate(24deg) scale(1.24); } }
@keyframes fx-destroy { 0% { opacity: 0; transform: scale(.35); } 28% { opacity: 1; } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes fx-hand-pulse { 45% { filter: brightness(1.5) drop-shadow(0 0 16px rgba(128, 235, 255, .7)); } }
@keyframes fx-turn-medallion { 0% { opacity: 0; transform: scale(2); } 60% { opacity: 1; filter: brightness(1.8); } }

.battle-context-actions {
  position: absolute;
  z-index: 28;
  top: 50%;
  right: 176px;
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(8px);
  transition: opacity .15s ease, transform .15s ease;
}
.battle-context-actions.visible { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
body.show-action-panel .battle-context-actions { right: 350px; }
.battle-context-actions.target-selection {
  top: 50%;
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%) scale(.96);
}
.battle-context-actions.target-selection.visible { transform: translate(-50%, -50%) scale(1); }
.target-selection-prompt {
  position: relative;
  min-width: min(390px, 42vw);
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 10px 58px 11px;
  border-block: 1px solid rgba(242, 220, 143, .82);
  background: linear-gradient(90deg, transparent, rgba(5, 19, 27, .96) 14% 86%, transparent);
  color: #f6ffff;
  text-align: center;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .82));
}
.target-selection-prompt::before,
.target-selection-prompt::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e9d37f);
}
.target-selection-prompt::before { right: 100%; }
.target-selection-prompt::after { left: 100%; transform: scaleX(-1); }
.target-selection-eyebrow { color: #8de4dc; font-size: 7px; letter-spacing: .32em; }
.target-selection-prompt strong {
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: clamp(19px, 2.1vw, 29px);
  font-weight: 500;
  letter-spacing: .18em;
  text-shadow: 0 0 14px rgba(105, 235, 229, .52), 0 3px 8px #000;
}
.target-selection-prompt small { color: #c0d5d3; font-size: 9px; }
.target-selection-prompt button {
  position: absolute;
  top: 50%;
  left: calc(100% - 42px);
  min-width: 54px;
  height: 27px;
  border: 1px solid rgba(189, 215, 211, .48);
  border-radius: 999px;
  background: rgba(15, 42, 49, .94);
  color: #d9e9e6;
  font-size: 9px;
  cursor: pointer;
  transform: translateY(-50%);
}
body.target-selection-active .board-row .card:not(.targetable) {
  filter: saturate(.45) brightness(.62);
}
body.target-selection-active .board-row .card.targetable {
  z-index: 31;
  transform: translateY(-5px) scale(1.06);
}
body.target-selection-active .player-summary:not(.targetable) { filter: saturate(.7) brightness(.78); }
body.target-selection-active .card.targetable::after {
  border-color: #ffe083;
  box-shadow: 0 0 15px #ffd765, inset 0 0 13px rgba(255, 223, 105, .28);
  animation: target-select-pulse .62s ease-in-out infinite alternate;
}
@keyframes target-select-pulse {
  to { filter: brightness(1.28); box-shadow: 0 0 29px rgba(255, 219, 102, .95), inset 0 0 18px rgba(255, 241, 160, .38); }
}
.context-action {
  min-width: 64px;
  height: 38px;
  padding: 0 10px;
  border: 2px solid #eadb9c;
  border-radius: 999px;
  background: radial-gradient(circle at 40% 30%, #9d7133, #3d2810 76%);
  box-shadow: inset 0 0 0 2px rgba(22, 12, 4, .52), 0 4px 11px #000;
  color: #fff5d2;
  font-size: 10px;
  cursor: pointer;
}
.context-action.attack { border-color: #ffae91; background: radial-gradient(circle at 40% 30%, #a84734, #44150f 76%); }
.context-action.super_evolve { border-color: #dfb6ff; background: radial-gradient(circle at 40% 30%, #8150ad, #35164f 76%); }
.context-target-hint { padding: 7px 11px; border: 1px solid #ff9477; border-radius: 999px; background: rgba(67, 21, 14, .9); color: #ffd5c8; font-size: 9px; animation: target-glow .7s ease-in-out infinite alternate; }

.mulligan-overlay {
  position: absolute;
  z-index: 27;
  top: 50%;
  left: 50%;
  width: min(460px, 45vw);
  padding: 10px 20px;
  border-block: 1px solid rgba(222, 210, 155, .66);
  background: linear-gradient(90deg, transparent, rgba(4, 15, 22, .94) 13% 87%, transparent);
  color: #eef7f3;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .2s ease, transform .2s ease;
}
.mulligan-overlay.visible { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.mulligan-eyebrow { color: #8ed8d0; font-size: 7px; letter-spacing: .24em; }
.mulligan-overlay h2 { margin: 2px 0 1px; font-family: Georgia, "Noto Serif SC", serif; font-size: 17px; letter-spacing: .06em; }
.mulligan-overlay p { margin: 0; color: #9fb4b2; font-size: 8px; }
.mulligan-controls { margin-top: 7px; display: flex; justify-content: center; align-items: center; gap: 12px; color: #c6d6d2; font-size: 9px; }
.mulligan-controls strong { color: #f4d878; font-size: 14px; }
.mulligan-confirm {
  min-width: 112px;
  height: 31px;
  border: 2px solid #d8ca8c;
  border-radius: 999px;
  background: radial-gradient(circle at 45% 25%, #3eb0bd, #13576e 66%, #082a3b);
  box-shadow: inset 0 0 0 2px rgba(5, 21, 31, .65), 0 0 13px rgba(68, 211, 218, .34);
  color: white;
  font-size: 10px;
  cursor: pointer;
}

.result-overlay {
  position: absolute;
  z-index: 70;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px;
  background: radial-gradient(circle, rgba(11, 41, 50, .72), rgba(1, 7, 12, .92) 62%);
  color: #f3f8f3;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: opacity .35s ease;
}
.result-overlay.visible { opacity: 1; pointer-events: auto; }
.result-overlay::before { content: ""; width: min(560px, 62vw); height: 1px; margin-bottom: 18px; background: linear-gradient(90deg, transparent, #d7c583, transparent); box-shadow: 0 0 15px #d7c583; }
.result-eyebrow { color: #8ed8d0; font-size: 9px; letter-spacing: .35em; }
.result-overlay h2 { margin: 7px 0 2px; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(28px, 4vw, 52px); font-weight: 500; text-shadow: 0 4px 18px #000; }
.result-overlay p { margin: 0 0 22px; color: #bdccca; font-size: 11px; }
.result-actions { display: flex; gap: 12px; }
.result-button { min-width: 134px; height: 39px; border: 1px solid #8aa9a7; border-radius: 999px; background: rgba(18, 42, 49, .92); color: #e7f1ef; cursor: pointer; }
.result-button.primary { border: 2px solid #dfcf91; background: radial-gradient(circle at 45% 20%, #38b4c0, #125670 70%); color: white; box-shadow: 0 0 18px rgba(80, 218, 225, .35); }

body.mulligan-phase .battle-divider { opacity: .44; }
body.mulligan-phase .player-zone:not(.mulligan-active) { filter: brightness(.52) saturate(.7); }
body.mulligan-phase .mulligan-active .hand-row {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(72%, 760px);
  height: 205px;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
}
body.mulligan-phase .mulligan-active .hand-row .card {
  width: clamp(102px, 9vw, 154px);
  flex-basis: clamp(102px, 9vw, 154px);
  margin-inline: -4px;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .56));
  animation: mulligan-deal .32s ease both;
  animation-delay: calc(var(--card-index) * 60ms);
}
body.mulligan-phase .mulligan-active .hand-row .card:hover { transform: translateY(-13px) scale(1.06); }
body.mulligan-phase .mulligan-active .hand-row .card.mulligan-selected { transform: translateY(-20px) scale(1.04); filter: grayscale(.26) brightness(.8) drop-shadow(0 12px 15px rgba(0, 0, 0, .7)); }
@keyframes mulligan-deal { from { opacity: 0; transform: translateY(40px) rotate(calc((var(--card-index) - 1.5) * 3deg)); } }

.fan-disclaimer { position: absolute; z-index: 4; left: 10px; bottom: 2px; max-width: 430px; color: rgba(197, 211, 208, .42); font-size: 5px; pointer-events: none; }

.card-detail-dialog {
  width: min(830px, 78vw);
  padding: 0;
  border: 1px solid rgba(208, 203, 158, .65);
  border-radius: 10px;
  color: var(--text);
  background: rgba(5, 15, 22, .97);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .78), inset 0 0 40px rgba(51, 100, 106, .17);
}
.card-detail-dialog::backdrop { background: rgba(0, 5, 10, .74); backdrop-filter: blur(4px); }
.card-detail-shell { position: relative; min-height: 520px; display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 28px; padding: 27px; }
.card-detail-image { width: 100%; max-height: 510px; object-fit: contain; filter: drop-shadow(0 12px 17px #000); }
.card-detail-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 30px 10px 18px 0; }
.card-detail-copy h2 { margin: 6px 0 13px; font-size: 23px; line-height: 1.25; }
.card-detail-stats { padding: 7px 10px; border-block: 1px solid rgba(129, 183, 188, .28); color: var(--gold); font-size: 12px; }
.card-detail-keywords { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.card-detail-keywords span { padding: 3px 7px; border: 1px solid #5d9eac; border-radius: 999px; background: rgba(26, 68, 79, .7); color: #bcecf3; font-size: 9px; }
.card-detail-skill { width: 100%; margin-top: 17px; flex: 1; overflow-y: auto; color: #d9e5e2; font-size: 12px; line-height: 1.75; white-space: pre-line; }
.card-detail-link { display: grid; place-items: center; text-decoration: none; }
.card-detail-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 32px; height: 32px; border: 1px solid rgba(168, 198, 198, .38); border-radius: 50%; background: #10232c; color: white; font-size: 20px; cursor: pointer; }
.card-detail-battle-actions[hidden], .fusion-overlay[hidden] { display: none !important; }
.card-detail-meta:has(.card-detail-state) { display: flex; flex-wrap: wrap; gap: 7px; width: 100%; }
.card-detail-state {
  display: grid;
  gap: 1px;
  min-width: 92px;
  padding: 6px 9px;
  border: 1px solid rgba(101, 191, 191, .32);
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(23, 66, 72, .72), rgba(9, 30, 39, .78));
}
.card-detail-state small { color: #87b8b6; font-size: 8px; letter-spacing: .08em; }
.card-detail-state strong { color: #e4f8f3; font-size: 11px; font-weight: 650; }
.card-detail-battle-actions { width: 100%; margin: 5px 0 9px; }
.card-detail-fusion {
  width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid #75dad4; border-radius: 5px;
  background:
    linear-gradient(90deg, transparent, rgba(201, 255, 247, .12), transparent),
    linear-gradient(180deg, #1b817d, #10524f 56%, #0a383b);
  color: #f1ffff; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .27), 0 0 18px rgba(73, 221, 207, .14);
}
.card-detail-fusion:hover:not(:disabled) { filter: brightness(1.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 24px rgba(83, 236, 220, .3); }
.card-detail-fusion:disabled { border-color: #49666b; filter: grayscale(.5); cursor: not-allowed; opacity: .54; }
.card-detail-fusion > span:last-child { display: grid; gap: 2px; text-align: left; }
.card-detail-fusion strong { font-family: Georgia, "Microsoft YaHei UI", serif; font-size: 18px; letter-spacing: .22em; }
.card-detail-fusion small { color: #bce3de; font-size: 8px; }
.fusion-button-mark { font-size: 26px; line-height: 1; text-shadow: 0 0 9px #9cfff5; transform: rotate(45deg); }

.fusion-overlay {
  position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 4vh 4vw;
  background:
    radial-gradient(circle at 50% 54%, rgba(44, 143, 136, .2), transparent 40%),
    linear-gradient(rgba(1, 8, 14, .88), rgba(2, 11, 18, .96));
  backdrop-filter: blur(7px);
}
.fusion-scene {
  position: relative; width: min(1160px, 92vw); height: min(720px, 90vh); min-height: 520px;
  display: grid; grid-template-rows: 114px 62px minmax(0, 1fr) 90px;
  overflow: hidden; border: 1px solid rgba(134, 226, 218, .5); border-radius: 12px;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(140, 232, 222, .1) 50%, transparent 50.1%),
    radial-gradient(ellipse at 50% 45%, rgba(34, 112, 112, .28), transparent 58%),
    linear-gradient(180deg, rgba(10, 34, 43, .98), rgba(3, 15, 24, .98));
  box-shadow: 0 30px 90px #000, inset 0 0 80px rgba(22, 102, 105, .18);
  animation: fusion-scene-in .2s ease-out both;
}
.fusion-scene::before, .fusion-scene::after {
  content: ""; position: absolute; left: 7%; right: 7%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(139, 222, 211, .58), transparent);
}
.fusion-scene::before { top: 112px; }
.fusion-scene::after { bottom: 89px; }
.fusion-header { position: relative; display: grid; place-content: center; justify-items: center; text-align: center; }
.fusion-header h2 { margin: 4px 0 5px; font-family: Georgia, "Microsoft YaHei UI", serif; font-size: 25px; font-weight: 500; letter-spacing: .12em; }
.fusion-header p { color: #9ab5b4; font-size: 10px; }
.fusion-close { position: absolute; top: 17px; right: 20px; width: 36px; height: 36px; border: 1px solid rgba(159, 214, 208, .42); border-radius: 50%; background: #102d36; color: white; cursor: pointer; font-size: 22px; }
.fusion-target { display: flex; align-items: center; justify-content: center; gap: 12px; }
.fusion-target img { width: 42px; height: 56px; object-fit: contain; filter: drop-shadow(0 6px 6px #000); }
.fusion-target span { display: grid; gap: 3px; }
.fusion-target small { color: #80aaa9; font-size: 8px; }
.fusion-target strong { color: #f6e7b9; font-size: 13px; }
.fusion-materials {
  min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.4vw, 22px);
  padding: 22px 48px 28px; overflow-x: auto; overflow-y: hidden; scrollbar-color: #4eaaa5 rgba(4, 22, 29, .8);
}
.fusion-material-card {
  position: relative; width: clamp(112px, 11vw, 152px); flex: 0 0 clamp(112px, 11vw, 152px);
  display: grid; gap: 7px; border: 1px solid transparent; border-radius: 10px; padding: 7px 7px 10px;
  background: rgba(4, 17, 25, .54); color: #d9e5e3; cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, filter .16s ease, background .16s ease;
  animation: fusion-card-in .28s calc(var(--fusion-index) * 45ms) ease-out both;
}
.fusion-material-card img { width: 100%; aspect-ratio: .735; display: block; object-fit: contain; border-radius: 5px; filter: brightness(.82) drop-shadow(0 9px 8px rgba(0, 0, 0, .72)); }
.fusion-material-card > strong { min-width: 0; overflow: hidden; padding-inline: 2px; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.fusion-material-card:hover { z-index: 2; border-color: rgba(105, 217, 207, .5); transform: translateY(-9px) scale(1.035); }
.fusion-material-card.is-selected { border-color: #bbfff4; background: rgba(29, 112, 105, .34); transform: translateY(-16px) scale(1.05); filter: drop-shadow(0 0 15px rgba(84, 247, 227, .42)); }
.fusion-material-card.is-selected img { filter: brightness(1.13) drop-shadow(0 10px 9px #000); }
.fusion-material-cost { position: absolute; top: 10px; left: 10px; width: 27px; height: 27px; display: grid; place-items: center; border: 2px solid #a8e6c8; border-radius: 50%; background: #176044; color: white; font-size: 14px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.fusion-material-check { position: absolute; right: 11px; bottom: 34px; width: 31px; height: 31px; display: grid; place-items: center; border: 2px solid #739495; border-radius: 50%; background: rgba(7, 24, 31, .94); color: transparent; font-size: 18px; box-shadow: 0 3px 7px #000; transition: background .14s ease, color .14s ease, border-color .14s ease; }
.fusion-material-card.is-selected .fusion-material-check { border-color: #d6fff8; background: #278f80; color: white; text-shadow: 0 1px 2px #000; }
.fusion-footer { display: flex; align-items: center; justify-content: center; gap: 25px; padding: 13px 24px; }
.fusion-footer > span { width: 100px; color: #9eb7b5; font-size: 10px; text-align: right; }
.fusion-confirm { min-width: 218px; height: 54px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid #9bf2e9; border-radius: 5px; background: linear-gradient(180deg, #258f87, #105b58); color: white; cursor: pointer; box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 0 22px rgba(61, 221, 205, .22); }
.fusion-confirm span { font-size: 24px; transform: rotate(45deg); }
.fusion-confirm strong { font-family: Georgia, "Microsoft YaHei UI", serif; font-size: 18px; letter-spacing: .25em; }
.fusion-confirm:hover:not(:disabled) { filter: brightness(1.16); }
.fusion-confirm:disabled { border-color: #526c70; background: #263d43; cursor: not-allowed; filter: grayscale(.7); opacity: .55; }
body.fusion-selecting .battle-column { filter: saturate(.62) brightness(.68); }
@keyframes fusion-scene-in { from { opacity: 0; transform: scale(.975); } }
@keyframes fusion-card-in { from { opacity: 0; transform: translateY(25px); } }

.discard-overlay {
  background:
    radial-gradient(circle at 50% 54%, rgba(151, 64, 45, .22), transparent 42%),
    linear-gradient(rgba(10, 5, 10, .9), rgba(15, 7, 12, .97));
}
.discard-scene {
  border-color: rgba(232, 159, 119, .55);
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(235, 172, 123, .1) 50%, transparent 50.1%),
    radial-gradient(ellipse at 50% 45%, rgba(126, 54, 48, .3), transparent 58%),
    linear-gradient(180deg, rgba(43, 22, 27, .98), rgba(20, 9, 16, .99));
  box-shadow: 0 30px 90px #000, inset 0 0 80px rgba(145, 57, 42, .18);
}
.discard-scene::before,
.discard-scene::after { background: linear-gradient(90deg, transparent, rgba(232, 171, 119, .62), transparent); }
.discard-header .eyebrow { color: #f0ae7f; }
.discard-header p { color: #c6a99e; }
.discard-close { border-color: rgba(231, 171, 134, .48); background: #3a2025; }
.discard-source small { color: #bd9181; }
.discard-source strong { color: #ffe0b5; }
.discard-choices { scrollbar-color: #a75a49 rgba(31, 13, 18, .84); }
.discard-choice-card { background: rgba(31, 13, 18, .66); color: #eadbd5; }
.discard-choice-card:hover { border-color: rgba(236, 156, 112, .62); }
.discard-choice-card.is-selected {
  border-color: #ffd0a2;
  background: rgba(132, 54, 42, .38);
  filter: drop-shadow(0 0 17px rgba(255, 126, 85, .48));
}
.discard-choice-card .fusion-material-cost { border-color: #efbf89; background: #7c3829; }
.discard-choice-card .fusion-material-check { border-color: #9a7168; background: rgba(37, 17, 23, .96); }
.discard-choice-card.is-selected .fusion-material-check { border-color: #ffe1bd; background: #bc573c; }
.discard-confirm {
  border-color: #f4bf8d;
  background: linear-gradient(180deg, #a94f37, #63291f);
  box-shadow: inset 0 1px rgba(255, 255, 255, .28), 0 0 23px rgba(236, 101, 59, .24);
}
.discard-confirm:disabled { border-color: #6f5954; background: #443336; }
body.discard-selecting .battle-column { filter: saturate(.56) brightness(.58); }

.multiplayer-dialog {
  width: min(650px, 92vw);
  padding: 0;
  border: 1px solid rgba(112, 210, 198, .6);
  border-radius: 12px;
  color: var(--text);
  background: rgba(6, 17, 24, .98);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .82), inset 0 0 55px rgba(55, 137, 132, .12);
}
.multiplayer-dialog::backdrop { background: rgba(0, 5, 10, .8); backdrop-filter: blur(5px); }
.multiplayer-shell { min-height: 430px; padding: 25px 28px 28px; }
.multiplayer-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid rgba(122, 194, 194, .22); }
.multiplayer-header h2 { margin-top: 4px; font-family: Georgia, "Microsoft YaHei UI", serif; font-size: 24px; font-weight: 500; letter-spacing: .07em; }
.multiplayer-entry { max-width: 520px; margin: 25px auto 0; }
.multiplayer-intro { margin-bottom: 20px; color: #a4bab9; font-size: 11px; line-height: 1.7; }
.multiplayer-entry label { display: grid; gap: 6px; color: #9fb4b2; font-size: 9px; }
.multiplayer-entry input, .multiplayer-entry select { width: 100%; }
.multiplayer-entry-actions { display: grid; grid-template-columns: auto 24px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 23px; }
.multiplayer-entry-actions > span { color: #6f8788; text-align: center; font-size: 9px; }
.multiplayer-join-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
#multiplayer-room-code { text-transform: uppercase; letter-spacing: .15em; }
.multiplayer-room { max-width: 540px; margin: 30px auto 0; text-align: center; }
.multiplayer-room-code-block { display: grid; justify-items: center; gap: 7px; }
.multiplayer-room-code-block > span { color: #86a2a2; font-size: 9px; letter-spacing: .15em; }
.multiplayer-room-code-block > strong { color: #f3df9c; font-family: Georgia, monospace; font-size: 33px; letter-spacing: .17em; text-shadow: 0 0 18px rgba(235, 207, 112, .3); }
.multiplayer-room-status { margin: 24px 0 15px; color: #bbd3d0; font-size: 12px; }
.multiplayer-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.multiplayer-seat { display: grid; gap: 5px; min-height: 76px; place-content: center; border: 1px solid rgba(111, 180, 184, .3); border-radius: 8px; background: rgba(18, 42, 49, .68); }
.multiplayer-seat small { color: #779091; font-size: 8px; letter-spacing: .12em; }
.multiplayer-seat strong { font-size: 13px; }
.multiplayer-seat em { color: #79d8bd; font-size: 8px; font-style: normal; }
.multiplayer-seat.empty { border-style: dashed; color: #708686; }
.multiplayer-reconnect-note { margin: 18px 0; color: #6f8888; font-size: 8px; line-height: 1.6; }
.multiplayer-leave { border-color: rgba(205, 104, 104, .48); color: #ffc4c4; }

@media (max-width: 760px) {
  .card-detail-dialog { width: 94vw; }
  .card-detail-shell { grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .fusion-overlay { padding: 2vh 2vw; }
  .fusion-scene { width: 96vw; grid-template-rows: 105px 55px minmax(0, 1fr) 82px; }
  .fusion-materials { justify-content: flex-start; padding-inline: 28px; }
  .multiplayer-shell { padding: 18px; }
  .multiplayer-entry-actions { grid-template-columns: 1fr; }
  .multiplayer-entry-actions > span { display: none; }
  .multiplayer-room-code-block > strong { font-size: 25px; }
}

@media (max-height: 790px) {
  .board-row { height: 123px; grid-template-columns: repeat(5, minmax(58px, 94px)); }
  .board-row .card { width: clamp(62px, 5.8vw, 94px); height: clamp(79px, 7.4vw, 115px); }
  .board-slot { width: clamp(62px, 5.8vw, 94px); height: clamp(79px, 7.4vw, 115px); }
  .player-summary { width: 195px; height: 102px; }
  .leader-core { width: 151px; height: 95px; }
  .leader-health { width: 34px; height: 38px; }
  .evolution-orbs span { width: 14px; height: 18px; }
  .leader-area { top: 116px; width: min(300px, 30vw); max-height: 64px; padding: 5px 8px; }
  .self-zone .leader-area { top: auto; bottom: 115px; }
  .leader-area-title { margin-bottom: 2px; font-size: 11px; }
  .leader-effect { padding: 3px 6px; }
  .leader-effect strong { font-size: 10px; }
  .leader-effect small { font-size: 9px; }
  .turn-control { width: 128px; right: 9px; }
  .pp-display { width: 125px; padding-block: 5px; }
  .end-turn-button { width: 84px; height: 84px; border-width: 4px; font-size: 13px; }
  .extra-pp-button { width: 124px; }
  .hand-row { height: 84px; }
  .hand-row .card { width: clamp(53px, 4.8vw, 82px); flex-basis: clamp(53px, 4.8vw, 82px); }
  .self-zone .hand-row .card:hover:not(:disabled) { transform: translateY(-30px) scale(1.3); }
  body.mulligan-phase .mulligan-active .hand-row { height: 165px; }
  body.mulligan-phase .mulligan-active .hand-row .card { width: clamp(86px, 7.6vw, 123px); flex-basis: clamp(86px, 7.6vw, 123px); }
  body.mulligan-phase .mulligan-active .hand-row .card:hover { transform: translateY(-10px) scale(1.04); }
}

@media (max-width: 1120px) {
  .player-zone { padding-right: 105px; }
  .turn-control { transform: translateY(-50%) scale(.84); transform-origin: right center; }
  .board-row { width: min(62vw, 650px); }
  .zone-counters { display: grid; grid-template-columns: repeat(3, 52px); gap: 4px; }
  .zone-counters span { width: 52px; min-height: 40px; }
  .zone-counters span:nth-child(2), .zone-counters span:nth-child(4) { display: grid; }
  .zone-counters b { font-size: 17px; }
  .zone-counters small { font-size: 8px; }
  .topbar .brand-block p { display: none; }
}

/* Card collection and deck editor. Their dimensions are bounded so changing
   filters or opening long card text never grows the battle viewport. */
.app-page[hidden], #battle-controls[hidden], .replay-toolbar[hidden] { display: none !important; }
.app-nav { display: flex; align-self: stretch; align-items: center; gap: 2px; }
.app-nav-button {
  height: 38px;
  min-width: 58px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #93aaa9;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .08em;
}
.app-nav-button:hover { color: white; }
.app-nav-button.is-active { border-bottom-color: var(--aqua); color: #eafff8; background: linear-gradient(180deg, transparent, rgba(85, 206, 184, .1)); }
.controls label:nth-child(1) select, .controls label:nth-child(2) select { max-width: 150px; }

.workspace-page, .builder-page {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 12%, rgba(56, 139, 137, .15), transparent 32%),
    linear-gradient(145deg, #07151e, #0b2028 54%, #061018);
}
.workspace-page { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 12px; padding: 14px; }
.catalog-filters, .catalog-results, .builder-pool, .deck-editor-panel, .builder-header {
  border: 1px solid rgba(126, 187, 192, .25);
  background: rgba(7, 20, 28, .9);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}
.catalog-filters { min-height: 0; padding: 20px; overflow-y: auto; border-radius: 8px; }
.workspace-title h2 { margin-top: 4px; font-family: Georgia, "Microsoft YaHei UI", serif; font-size: 22px; font-weight: 500; letter-spacing: .08em; }
.workspace-title::after { content: ""; display: block; width: 72px; height: 1px; margin: 12px 0 18px; background: linear-gradient(90deg, var(--gold), transparent); }
.catalog-filters label, .builder-header label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.catalog-filters input, .catalog-filters select, .builder-header input, .builder-header select { width: 100%; min-width: 0; }
.wide-field { margin-bottom: 14px; }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 8px; }
.check-field { display: flex !important; align-items: center; gap: 8px !important; margin: 16px 0; }
.check-field input { width: 16px; height: 16px; accent-color: var(--aqua); }
.catalog-source { margin-top: 18px; color: #688284; font-size: 8px; line-height: 1.7; }
.catalog-results { min-width: 0; min-height: 0; display: grid; grid-template-rows: 50px minmax(0, 1fr); overflow: hidden; border-radius: 8px; }
.workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 14px; border-bottom: 1px solid rgba(127, 184, 190, .19); }
.workspace-toolbar > div:first-child { display: grid; gap: 2px; }
.workspace-toolbar strong { font-size: 13px; }
.workspace-toolbar small, .builder-pager span { color: var(--muted); font-size: 9px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 7px; }
.pager .button { height: 29px; font-size: 9px; }
.catalog-card-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  align-content: start;
  gap: 17px 12px;
  padding: 16px;
  overflow-y: auto;
}
.catalog-card { position: relative; min-width: 0; padding: 5px; border: 1px solid rgba(128, 175, 181, .16); border-radius: 8px; background: linear-gradient(145deg, rgba(21, 44, 53, .82), rgba(7, 18, 25, .9)); transition: border-color .15s ease, transform .15s ease; }
.catalog-card:hover { z-index: 2; border-color: rgba(131, 234, 210, .68); transform: translateY(-3px); }
.catalog-card.rarity-legendary { box-shadow: inset 0 0 16px rgba(213, 170, 91, .08); }
.catalog-art-button { position: relative; width: 100%; display: block; border: 0; padding: 0; aspect-ratio: .735; overflow: hidden; border-radius: 6px; background: #0a171e; cursor: pointer; }
.catalog-art-button img { width: 100%; height: 100%; display: block; object-fit: contain; transition: transform .2s ease; }
.catalog-art-button:hover img { transform: scale(1.035); }
.catalog-cost { position: absolute; top: 3px; left: 3px; width: 27px; height: 27px; display: grid; place-items: center; border: 2px solid #a5e0c4; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4cad79, #13563f 67%, #09261e); color: white; font-size: 15px; font-weight: 800; text-shadow: 0 1px 2px #000; box-shadow: 0 2px 5px #000; }
.catalog-stats { position: absolute; inset: auto 3px 3px; display: flex; justify-content: space-between; pointer-events: none; }
.catalog-stats b { width: 27px; height: 27px; display: grid; place-items: center; border: 2px solid #9ec3df; border-radius: 50%; background: #164775; color: white; font-size: 14px; text-shadow: 0 1px 2px #000; }
.catalog-stats b:last-child { border-color: #e6aca0; background: #85322c; }
.ability-pending { position: absolute; top: 5px; right: 4px; padding: 2px 5px; border: 1px solid #bca55d; border-radius: 999px; background: rgba(50, 40, 13, .92); color: #f5dda0; font-size: 7px; }
.catalog-card-caption { min-width: 0; display: grid; gap: 2px; padding: 7px 3px 5px; }
.catalog-card-caption strong { overflow: hidden; font-size: 10px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.catalog-card-caption small { color: var(--muted); font-size: 7px; }
.catalog-add { width: 100%; height: 27px; border: 1px solid rgba(110, 199, 179, .42); border-radius: 4px; background: rgba(25, 79, 67, .65); color: #cffff1; cursor: pointer; font-size: 8px; }
.catalog-add:hover:not(:disabled) { border-color: var(--aqua); filter: brightness(1.15); }
.catalog-add:disabled { opacity: .36; cursor: not-allowed; }
.catalog-empty { grid-column: 1 / -1; min-height: 180px; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); font-size: 11px; }
.loading-ring { width: 28px; height: 28px; border: 2px solid rgba(120, 208, 196, .2); border-top-color: var(--aqua); border-radius: 50%; animation: catalog-spin .7s linear infinite; }
@keyframes catalog-spin { to { transform: rotate(360deg); } }

.builder-page { display: grid; grid-template-rows: 64px minmax(0, 1fr); gap: 10px; padding: 10px; }
.builder-header { min-width: 0; display: grid; grid-template-columns: 190px minmax(150px, 1fr) 120px 116px 160px auto auto; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; }
.builder-header .workspace-title h2 { font-size: 17px; }
.builder-header .workspace-title::after { display: none; }
.builder-layout { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 10px; overflow: hidden; }
.builder-pool { min-width: 0; min-height: 0; display: grid; grid-template-rows: 48px minmax(0, 1fr) 38px; overflow: hidden; border-radius: 8px; }
.builder-searchbar { display: grid; grid-template-columns: minmax(180px, 1fr) 110px 110px 110px 160px auto; align-items: center; gap: 7px; padding: 7px 10px; border-bottom: 1px solid rgba(127, 184, 190, .19); }
.builder-searchbar input { width: 100%; }
.builder-searchbar select { min-width: 0; width: 100%; }
.builder-searchbar span { color: var(--muted); font-size: 9px; }
.builder-card-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px 9px; padding: 12px; }
.builder-pager { border-top: 1px solid rgba(127, 184, 190, .16); padding: 5px; }
.deck-editor-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto 72px auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 8px; }
.deck-summary { padding: 12px 14px 7px; border-bottom: 1px solid rgba(122, 179, 184, .16); }
.deck-summary > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.deck-summary > div:first-child span { color: var(--gold); font-family: Georgia, serif; }
.deck-summary > div:first-child strong { font-size: 27px; }
.deck-summary > div:first-child small { color: var(--muted); font-size: 12px; }
.deck-type-summary { display: flex; gap: 10px; margin-top: 5px; color: var(--muted); font-size: 8px; }
.deck-summary p { margin-top: 6px; color: var(--danger); font-size: 9px; }
.deck-ready { color: var(--aqua) !important; }
.deck-curve { height: 72px; display: grid; grid-template-columns: repeat(9, 1fr); align-items: end; gap: 4px; padding: 8px 12px 5px; border-bottom: 1px solid rgba(122, 179, 184, .16); }
.deck-curve div { height: 57px; display: grid; grid-template-rows: 1fr 10px 10px; justify-items: center; align-items: end; }
.deck-curve span { width: 70%; min-height: 3px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--aqua), #267c6b); }
.deck-curve b { color: #dceae8; font-size: 7px; }
.deck-curve small { color: var(--muted); font-size: 7px; }
.deck-issues { max-height: 74px; padding: 6px 12px; overflow-y: auto; border-bottom: 1px solid rgba(122, 179, 184, .16); background: rgba(74, 25, 28, .16); }
.deck-issues p { margin: 2px 0; color: #ffaaa3; font-size: 8px; line-height: 1.35; }
.deck-card-list { min-height: 0; overflow-y: auto; padding: 7px; }
.deck-row { min-width: 0; height: 38px; display: grid; grid-template-columns: minmax(0, 1fr) 27px 18px 27px; align-items: center; gap: 4px; margin-bottom: 4px; border: 1px solid rgba(111, 164, 171, .22); border-radius: 5px; overflow: hidden; background: rgba(20, 43, 52, .7); }
.deck-row-card { position: relative; min-width: 0; height: 100%; display: flex; align-items: center; gap: 8px; overflow: hidden; border: 0; padding: 0 7px 0 0; background: linear-gradient(90deg, transparent, rgba(9, 25, 32, .96) 32%); color: white; cursor: pointer; text-align: left; }
.deck-row-card img { width: 68px; height: 92px; flex: none; object-fit: cover; object-position: center 18%; opacity: .48; transform: translateY(3px); }
.deck-row-card strong { min-width: 0; overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.deck-row-cost { position: absolute; left: 3px; top: 7px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #98d6b6; border-radius: 50%; background: #18543f; font-size: 10px; font-weight: 700; }
.deck-row > button { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(121, 181, 187, .3); border-radius: 4px; padding: 0; background: #17343e; color: white; cursor: pointer; }
.deck-row > button:disabled { opacity: .3; cursor: not-allowed; }
.deck-row > b { text-align: center; font-size: 10px; }
.deck-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 8px; border-top: 1px solid rgba(122, 179, 184, .16); }
.deck-actions .button { height: 30px; padding: 0 5px; font-size: 8px; }
.danger-button { border-color: rgba(220, 100, 95, .5); color: #ffc3bf; }

.card-detail-meta { margin-top: 8px; color: var(--muted); font-size: 9px; }
.card-detail-versions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.detail-version { min-height: 25px; border: 1px solid rgba(118, 174, 183, .36); border-radius: 999px; padding: 3px 8px; background: rgba(18, 42, 51, .8); color: #b8cccb; cursor: pointer; font-size: 8px; }
.detail-version.is-active { border-color: var(--gold); color: #ffedbb; }
.card-detail-extra { width: 100%; max-height: 175px; overflow-y: auto; padding-right: 5px; }
.card-detail-extra section { padding: 8px 0; border-top: 1px solid rgba(126, 178, 184, .18); }
.card-detail-extra h3 { margin: 0 0 6px; color: var(--gold); font-size: 10px; }
.card-detail-extra p, .card-detail-extra summary { color: #b9ccca; font-size: 9px; line-height: 1.55; }
.card-detail-extra details p { padding: 6px 8px; background: rgba(25, 50, 58, .55); }
.related-cards { display: flex; flex-wrap: wrap; gap: 5px; }
.related-cards button { border: 1px solid rgba(116, 185, 184, .42); border-radius: 4px; padding: 4px 7px; background: #15333c; color: #cfe8e4; cursor: pointer; font-size: 8px; }
.card-detail-copy .card-detail-skill { min-height: 75px; max-height: 190px; flex: 0 1 auto; }

@media (max-width: 1420px) {
  .brand-block { min-width: 170px; }
  .app-nav-button { min-width: 48px; }
  #battle-controls label:first-child, #battle-controls label:nth-child(2) { display: none; }
  .builder-layout { grid-template-columns: minmax(0, 1fr) 350px; }
  .builder-header { grid-template-columns: 150px minmax(130px, 1fr) 105px 105px 130px auto auto; }
  .builder-searchbar { grid-template-columns: minmax(150px, 1fr) 90px 90px 90px 125px auto; }
}

@media (max-height: 760px) {
  .catalog-card-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px 8px; padding: 10px; }
  .catalog-card-caption { padding-block: 4px; }
  .builder-page { grid-template-rows: 56px minmax(0, 1fr); }
  .builder-header { padding-block: 4px; }
  .card-detail-shell { min-height: 0; max-height: 88vh; }
}