:root {
  --ink: #183b35;
  --muted: #6e8179;
  --cream: #f8f2e7;
  --paper: #fffdf8;
  --moss: #1f6658;
  --moss-dark: #164d44;
  --lime: #c8dc75;
  --gold: #e8b856;
  --coral: #df795d;
  --blue: #72aab0;
  --line: rgba(24, 59, 53, 0.12);
  --shadow: 0 22px 60px rgba(34, 61, 52, 0.13);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 2%, rgba(210, 224, 150, 0.43), transparent 26rem),
    radial-gradient(circle at 92% 28%, rgba(133, 188, 177, 0.25), transparent 27rem),
    #f4eee3;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow-x: hidden;
}

button, a { font: inherit; }
button { color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(232, 184, 86, 0.78);
  outline-offset: 3px;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 22rem;
  height: 22rem;
  border: 1px solid rgba(31, 102, 88, 0.08);
  border-radius: 45% 55% 62% 38%;
  transform: rotate(24deg);
  pointer-events: none;
}
.ambient::before, .ambient::after {
  content: "";
  position: absolute;
  border: inherit;
  border-radius: inherit;
  inset: 2.2rem;
}
.ambient::after { inset: 4.4rem; }
.ambient-one { left: -9rem; bottom: -7rem; }
.ambient-two { right: -11rem; top: 13rem; transform: rotate(205deg); }

.topbar {
  width: min(1180px, calc(100% - 40px));
  height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  color: #fff; background: var(--moss); border-radius: 13px 13px 13px 3px;
  font-weight: 900; box-shadow: 0 7px 18px rgba(31, 102, 88, .19);
}
.brand strong, .brand small { display: block; }
.brand strong { font-family: Georgia, "Songti SC", serif; font-size: 19px; letter-spacing: .08em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 8px; letter-spacing: .22em; }

.topbar-actions { display: flex; align-items: center; gap: 12px; }
.text-button, .pill-button, .modal-close, .secondary-button {
  border: 0; background: transparent; cursor: pointer;
}
.text-button { padding: 10px 14px; color: var(--muted); font-size: 13px; }
.text-button:hover { color: var(--ink); }
.pill-button {
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.55); cursor: pointer; font-size: 13px; font-weight: 700;
}
.pill-button:hover { border-color: rgba(31, 102, 88, .34); background: var(--paper); }

.game-shell { width: min(1040px, calc(100% - 32px)); margin: 34px auto 60px; }
.game-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 8px 18px; }
.eyebrow { margin: 0 0 7px; color: var(--moss); font-size: 10px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: Georgia, "Songti SC", serif; font-weight: 700; }
h1 { font-size: clamp(23px, 3vw, 35px); letter-spacing: -.02em; }
.round-card { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 8px; text-align: right; }
.round-card span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.round-card strong { font-family: Georgia, serif; font-size: 28px; }
.round-card small { grid-column: 1 / -1; color: var(--moss); font-size: 11px; font-weight: 700; }

.battle-panel {
  position: relative; overflow: hidden; background: rgba(255,253,248,.87); border: 1px solid rgba(255,255,255,.7);
  border-radius: 30px; box-shadow: var(--shadow); backdrop-filter: blur(12px);
}
.battle-panel.camera-shake { animation: camera-shake .22s linear; }
.battle-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(24,59,53,.035) 1px, transparent 1px);
  background-size: 13px 13px;
}

.player-row { position: relative; z-index: 2; min-height: 90px; display: flex; align-items: center; padding: 16px 28px; gap: 14px; }
.enemy-row { background: rgba(240, 232, 216, .52); border-bottom: 1px solid var(--line); }
.hero-row { background: rgba(255, 255, 255, .42); border-top: 1px solid var(--line); }
.portrait {
  position: relative; flex: 0 0 auto; width: 55px; height: 55px; display: grid; place-items: center;
  border: 3px solid var(--paper); border-radius: 50%; font-size: 28px; box-shadow: 0 5px 15px rgba(31, 63, 54, .12);
}
.enemy-portrait { background: #d6bf96; }
.hero-portrait { background: #d4df9e; }
.portrait::after { content: ""; position: absolute; inset: -6px; border: 1px solid rgba(31,102,88,.16); border-radius: 50%; }
.player-meta { width: min(330px, calc(100% - 130px)); }
.name-line { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.name-line strong { font-family: Georgia, "Songti SC", serif; font-size: 15px; }
.difficulty, .you-badge { padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.difficulty { color: #79583d; background: #eee0c4; }
.you-badge { color: var(--moss); background: #dfe9b8; }
.character-line { margin: -4px 0 7px; color: #7a6b59; font-family: Georgia, "Songti SC", serif; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.health-track { position: relative; width: 100%; height: 19px; overflow: hidden; border-radius: 999px; background: #e5ded2; }
.health-fill { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; transition: width .45s ease; }
.enemy-health { background: linear-gradient(90deg, #ca694f, #e89269); }
.hero-health { background: linear-gradient(90deg, #3c8674, #65ab8b); }
.health-track span { position: relative; z-index: 1; display: block; padding: 2px 9px; color: #fff; font-size: 10px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.deck-stack { margin-left: auto; position: relative; width: 50px; height: 54px; }
.mini-card { position: absolute; width: 34px; height: 46px; right: 4px; top: 3px; border: 2px solid #fff; border-radius: 7px; background: repeating-linear-gradient(45deg, #326f61 0 5px, #2a6256 5px 10px); box-shadow: 0 3px 7px rgba(0,0,0,.12); }
.mini-card:first-child { transform: rotate(-8deg); right: 12px; }
.deck-stack strong { position: absolute; z-index: 2; right: -3px; bottom: -3px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #fff; font-size: 11px; border: 2px solid var(--paper); }
.hero-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.energy-box { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(57,134,140,.18); border-radius: 14px; background: #edf5ef; }
.drop { color: #4c9aa0; font-size: 22px; transform: rotate(45deg); }
.energy-box div { display: flex; flex-direction: column; }
.energy-box strong { font-family: Georgia, serif; font-size: 20px; line-height: 1; }
.energy-box small { color: var(--muted); font-size: 9px; }
.camp-power {
  min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 6px 11px;
  border: 1px solid rgba(213,139,67,.24); border-radius: 14px; background: linear-gradient(135deg, #fff1d7, #f7e4c3);
  cursor: pointer; box-shadow: 0 5px 14px rgba(126,84,43,.09); text-align: left; transition: .2s ease;
}
.camp-power > span:first-child { font-size: 21px; filter: drop-shadow(0 2px 3px rgba(163,83,35,.2)); }
.camp-power strong, .camp-power small { display: block; white-space: nowrap; }
.camp-power strong { color: #815129; font-size: 10px; }
.camp-power small { margin-top: 2px; color: #a47b57; font-size: 7px; }
.camp-power:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(213,139,67,.48); }
.camp-power:disabled { opacity: .43; filter: grayscale(.55); cursor: not-allowed; }

.board-wrap { position: relative; z-index: 2; padding: 16px 28px 12px; background: linear-gradient(180deg, rgba(230,238,214,.47), rgba(255,253,248,.2)); }
.event-banner {
  position: relative; z-index: 2; width: min(520px, 92%); min-height: 48px; margin: 0 auto 12px; padding: 7px 13px;
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.85); border-radius: 15px; background: linear-gradient(100deg, rgba(255,249,221,.92), rgba(227,241,218,.88));
  box-shadow: 0 6px 18px rgba(58,86,64,.09); animation: event-in .45s ease-out;
}
.event-banner::after { content: ""; position: absolute; inset: -30px -20px auto auto; width: 95px; height: 95px; border-radius: 50%; background: rgba(255,255,255,.28); }
.event-icon { font-size: 24px; filter: drop-shadow(0 3px 4px rgba(72,92,63,.13)); }
.event-banner small, .event-banner strong { display: block; white-space: nowrap; }
.event-banner small { color: rgba(24,59,53,.48); font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.event-banner strong { margin-top: 2px; font-family: Georgia, "Songti SC", serif; font-size: 12px; }
.event-banner p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: 9px; text-align: right; }
.synergy-strip { position: relative; z-index: 3; min-height: 25px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 4px 9px; color: rgba(24,59,53,.5); font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.synergy-strip > span { white-space: nowrap; }
.synergy-strip > span b { color: var(--gold); font-size: 15px; vertical-align: -1px; }
#activeSynergies { display: flex; justify-content: flex-end; gap: 5px; overflow: hidden; }
.synergy-chip { padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--tribe-color) 36%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--tribe-color) 72%, #183b35); background: color-mix(in srgb, var(--tribe-color) 15%, white); white-space: nowrap; animation: synergy-in .35s ease-out; }
.forest-line { position: absolute; inset: 44% 4% auto; height: 1px; display: flex; justify-content: space-around; background: rgba(31,102,88,.08); }
.forest-line span { width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: rgba(31,102,88,.17); }
.lane-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 0 4px; text-align: center; color: rgba(24,59,53,.42); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.board { perspective: 900px; }
.board-side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; row-gap: 8px; transform-style: preserve-3d; }
.enemy-side { transform: rotateX(-1.2deg); transform-origin: bottom; }
.player-side { transform: rotateX(1.2deg); transform-origin: top; }
.board-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; height: 34px; }
.board-divider span { height: 1px; background: linear-gradient(90deg, transparent, rgba(31,102,88,.14), transparent); }
.board-divider strong { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .06em; }

.lane {
  position: relative; height: 90px; display: grid; place-items: center; overflow: hidden;
  border: 1px dashed rgba(31,102,88,.22); border-radius: 18px; background: rgba(255,255,255,.34);
  transform-style: preserve-3d; transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lane::before { content: ""; position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(31,102,88,.08); }
.lane.empty::after { content: "+"; color: rgba(31,102,88,.18); font-size: 28px; font-weight: 300; }
.player-side .lane.available { border-color: var(--gold); background: rgba(246,222,146,.22); cursor: pointer; animation: soft-pulse 1.5s infinite; }
.player-side .lane.available:hover { transform: translateY(-2px); background: rgba(246,222,146,.38); }
.lane.targetable { border-style: solid; border-color: #81b9aa; background: rgba(171,220,201,.2); cursor: pointer; animation: target-pulse 1.2s infinite; }
.lane.targetable:hover { transform: translateZ(8px) scale(1.02); }
.lane.upgrade-target { border-color: var(--gold); box-shadow: inset 0 0 24px rgba(232,184,86,.25), 0 0 0 2px rgba(232,184,86,.16); }
.row-tag { position: absolute; z-index: 5; left: 5px; top: 4px; padding: 1px 5px; border-radius: 999px; color: rgba(24,59,53,.56); background: rgba(255,255,255,.66); font-size: 6px; font-weight: 900; letter-spacing: .08em; }
.lane.hit { animation: hit .35s ease; }
.lane.tribe-linked { border-style: solid; border-color: color-mix(in srgb, var(--tribe-color) 58%, white); background: linear-gradient(145deg, color-mix(in srgb, var(--tribe-color) 13%, white), rgba(255,255,255,.42)); box-shadow: inset 0 0 20px color-mix(in srgb, var(--tribe-color) 10%, transparent), 0 0 0 2px color-mix(in srgb, var(--tribe-color) 10%, transparent); }
.lane.tribe-linked::after { content: "共鸣"; position: absolute; left: 50%; bottom: 3px; z-index: 4; transform: translateX(-50%); padding: 1px 5px; border-radius: 999px; color: #fff; background: color-mix(in srgb, var(--tribe-color) 72%, #40564e); font-size: 6px; font-weight: 900; letter-spacing: .1em; box-shadow: 0 2px 7px color-mix(in srgb, var(--tribe-color) 30%, transparent); }

.unit {
  --unit-color: #8db494;
  position: relative; z-index: 1; width: min(166px, 92%); height: 72px; padding: 7px 8px;
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: 1fr auto; column-gap: 7px;
  border: 2px solid rgba(255,255,255,.86); border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--unit-color) 26%, white), #fffdf8 74%);
  box-shadow: 0 7px 15px rgba(38,65,55,.11); animation: unit-in .28s ease-out; transform: translateZ(10px); transform-style: preserve-3d;
}
.unit-art { position: relative; grid-row: 1 / 3; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--unit-color); font-size: 25px; transform: translateZ(8px); box-shadow: 0 5px 9px rgba(30,55,47,.12); }
.unit-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255,255,255,.32), transparent 45%, rgba(255,255,255,.13)); pointer-events: none; }
.unit-copy { min-width: 0; align-self: center; }
.unit-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Georgia, "Songti SC", serif; font-size: 13px; }
.unit-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.unit-stats { display: flex; gap: 5px; }
.stat { min-width: 27px; padding: 3px 5px; border-radius: 7px; color: #fff; text-align: center; font-size: 10px; font-weight: 900; }
.stat.attack { background: var(--coral); }
.stat.health { background: var(--moss); }
.stat.shield { background: #528da7; }
.unit-skill {
  position: absolute; z-index: 3; right: 6px; top: -7px; max-width: 78px; padding: 2px 6px;
  border: 1px solid rgba(255,255,255,.9); border-radius: 999px; color: #fff; background: #6d668d;
  font-size: 7px; font-weight: 900; box-shadow: 0 3px 8px rgba(52,47,79,.18); white-space: nowrap;
}
.unit-tribe { position: absolute; z-index: 3; left: 4px; bottom: -6px; padding: 2px 6px; border: 1px solid rgba(255,255,255,.88); border-radius: 999px; color: #fff; background: var(--tribe-color); font-size: 6px; font-weight: 900; box-shadow: 0 2px 7px color-mix(in srgb, var(--tribe-color) 35%, transparent); }
.unit-stars { position: absolute; z-index: 4; left: 50%; top: -8px; transform: translateX(-50%); color: #f4c252; font-size: 9px; letter-spacing: -1px; text-shadow: 0 1px 2px #fff, 0 2px 5px rgba(123,80,28,.32); white-space: nowrap; }
.equipment-rack { position: absolute; z-index: 4; right: 4px; bottom: -7px; display: flex; gap: 2px; }
.equipment-slot { width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 5px; background: #6a776e; color: #fff; font-size: 8px; box-shadow: 0 2px 5px rgba(22,44,37,.2); }
.equipment-slot.empty { color: rgba(255,255,255,.52); background: rgba(92,112,102,.48); }
.unit.has-shield { box-shadow: 0 0 0 2px rgba(100,174,205,.42), 0 7px 15px rgba(38,65,55,.11); }
.unit.defeated { animation: defeated .42s forwards; }
.unit.lunge-player { animation: lunge-player .38s ease; }
.unit.lunge-enemy { animation: lunge-enemy .38s ease; }

.combat-fx { position: absolute; z-index: 12; left: 50%; top: 50%; display: grid; place-items: center; width: 58px; height: 58px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; font-weight: 1000; text-shadow: 0 2px 5px rgba(0,0,0,.18); }
.combat-fx.attack { color: #fff7dc; background: conic-gradient(from 15deg, transparent, rgba(238,116,79,.88), transparent 38%); animation: slash-fx .6s ease-out forwards; }
.combat-fx.attack::before, .combat-fx.attack::after { content: ""; position: absolute; width: 66px; height: 4px; border-radius: 99px; background: linear-gradient(90deg, transparent, #fff5c8, #e66f54, transparent); transform: rotate(-34deg); box-shadow: 0 0 12px #ef9a68; }
.combat-fx.attack::after { transform: rotate(28deg) scaleX(.72); }
.combat-fx.shield { color: #eaffff; border: 3px solid rgba(129,211,235,.86); background: radial-gradient(circle, rgba(125,203,225,.38), rgba(69,129,164,.13) 62%, transparent 64%); clip-path: polygon(25% 5%,75% 5%,98% 42%,75% 95%,25% 95%,2% 42%); animation: shield-fx .65s ease-out forwards; }
.combat-fx.heal { color: #ecffd9; background: radial-gradient(circle, rgba(133,203,107,.55), transparent 65%); animation: heal-fx .8s ease-out forwards; }
.combat-fx.heal::before, .combat-fx.heal::after { content: "✦"; position: absolute; color: #d8f39c; font-size: 13px; animation: sparkle .75s ease-out forwards; }
.combat-fx.heal::before { left: 7px; top: 23px; }
.combat-fx.heal::after { right: 8px; top: 7px; animation-delay: .08s; }
.combat-fx.synergy { width: 72px; height: 72px; color: #fff; border: 2px solid color-mix(in srgb, var(--tribe-color) 72%, white); background: radial-gradient(circle, color-mix(in srgb, var(--tribe-color) 38%, transparent), transparent 66%); animation: synergy-fx .9s ease-out forwards; }
.combat-fx.projectile { width: 28px; height: 28px; color: #fff8c9; background: radial-gradient(circle, #fff, #d9b6ff 30%, rgba(116,100,177,.55) 58%, transparent 65%); box-shadow: 0 0 16px #c1a6ff; animation: projectile-fx .72s cubic-bezier(.16,.8,.34,1) forwards; }
.combat-fx.upgrade { width: 78px; height: 78px; color: #fff4bb; border: 2px solid #f3c763; background: conic-gradient(from 10deg, rgba(245,198,94,.05), rgba(245,198,94,.58), rgba(255,255,255,.08), rgba(245,198,94,.5)); animation: upgrade-fx 1s ease-out forwards; }
.combat-fx.equip { color: #fff; border: 2px solid #dba865; background: radial-gradient(circle, rgba(219,168,101,.6), transparent 66%); animation: equip-fx .8s ease-out forwards; }

.battle-feed {
  position: relative; z-index: 3; min-height: 35px; display: flex; align-items: center; gap: 8px; padding: 7px 28px;
  border-top: 1px solid rgba(31,102,88,.08); background: rgba(239,240,219,.55); color: var(--muted);
}
.battle-feed b { flex: 0 0 auto; color: var(--moss); font-size: 8px; letter-spacing: .08em; }
.battle-feed p { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-signal { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(232,184,86,.14); animation: feed-pulse 1.7s infinite; }

.hand-panel { margin-top: 18px; padding: 20px 22px 24px; border: 1px solid rgba(255,255,255,.55); border-radius: 26px; background: rgba(255,253,248,.57); }
.hand-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.section-kicker { font-family: Georgia, "Songti SC", serif; font-size: 16px; font-weight: 700; }
.hand-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.card-type-legend { margin-left: auto; display: flex; gap: 5px; }
.card-type-legend span { padding: 3px 7px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.56); font-size: 7px; font-weight: 900; }
.card-type-legend span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; vertical-align: 1px; }
.unit-dot::before { background: #67a57c; }.spell-dot::before { background: #8677bd; }.gear-dot::before { background: #c48654; }
.end-turn-button {
  min-width: 180px; height: 54px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr 1fr;
  padding: 8px 14px 8px 18px; border: 0; border-radius: 17px; color: #fff; background: var(--moss); cursor: pointer; text-align: left;
  box-shadow: 0 8px 20px rgba(31,102,88,.18); transition: transform .2s ease, background .2s ease;
}
.end-turn-button:hover { transform: translateY(-2px); background: var(--moss-dark); }
.end-turn-button:disabled { opacity: .58; cursor: wait; transform: none; }
.end-turn-button span { align-self: end; font-size: 13px; font-weight: 900; }
.end-turn-button small { color: rgba(255,255,255,.68); font-size: 9px; }
.end-turn-button b { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 20px; }

.hand { min-height: 210px; display: flex; align-items: flex-end; justify-content: center; gap: 12px; overflow-x: auto; padding: 8px 5px 10px; scrollbar-width: thin; }
.hand-scroll-cue { display: none; }
.card {
  --card-color: #8db494;
  position: relative; flex: 0 0 146px; height: 202px; overflow: hidden; padding: 8px;
  border: 2px solid color-mix(in srgb, var(--tribe-color, #fff) 34%, white); border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--tribe-color, var(--card-color)) 16%, transparent), transparent 48%),
    linear-gradient(155deg, color-mix(in srgb, var(--card-color) 35%, white), #fffdf8 59%);
  box-shadow: 0 9px 20px rgba(32,60,50,.14); cursor: pointer; text-align: left;
  --tilt-x: 0deg; --tilt-y: 0deg;
  transform: perspective(700px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .2s ease, opacity .2s ease;
}
.card:hover:not(:disabled) { transform: perspective(700px) translateY(-7px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); box-shadow: 0 18px 28px rgba(32,60,50,.2); }
.card.selected { transform: perspective(700px) translateY(-10px) rotateX(2deg); box-shadow: 0 0 0 3px var(--gold), 0 18px 29px rgba(32,60,50,.21); }
.card:disabled { cursor: not-allowed; filter: saturate(.55); opacity: .53; }
.card-cost { position: absolute; z-index: 2; top: 7px; left: 7px; width: 29px; height: 29px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50% 50% 50% 8px; color: #fff; background: #478e95; font-size: 13px; font-weight: 900; box-shadow: 0 3px 8px rgba(37,95,101,.23); }
.card-art { position: relative; height: 72px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--card-color); font-size: 41px; }
.card-art::after { content: ""; position: absolute; width: 82px; height: 82px; right: -32px; top: -40px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; box-shadow: 0 0 0 13px rgba(255,255,255,.08); }
.card-tribe { position: absolute; z-index: 3; right: 8px; top: 8px; padding: 3px 7px; border: 1px solid rgba(255,255,255,.76); border-radius: 999px; color: #fff; background: var(--tribe-color); font-size: 7px; font-weight: 900; box-shadow: 0 2px 8px color-mix(in srgb, var(--tribe-color) 38%, transparent); }
.card-sigil { position: absolute; left: 50%; top: 28px; z-index: 0; transform: translateX(-50%) rotate(-8deg); color: rgba(255,255,255,.2); font-family: Georgia, serif; font-size: 62px; font-weight: 900; text-shadow: 0 5px 18px rgba(0,0,0,.08); }
.card[data-tribe="芽灵"] .card-art { background-image: radial-gradient(circle at 22% 78%, rgba(255,255,255,.4) 0 3px, transparent 4px), linear-gradient(145deg, #bcd87d, #769e58); }
.card[data-tribe="迅兽"] .card-art { background-image: repeating-linear-gradient(145deg, transparent 0 12px, rgba(255,255,255,.12) 13px 15px), linear-gradient(145deg, #efb06c, #cd694d); }
.card[data-tribe="湿地"] .card-art { background-image: radial-gradient(circle at 75% 20%, rgba(255,255,255,.42) 0 5px, transparent 6px), radial-gradient(circle at 22% 80%, rgba(255,255,255,.25) 0 8px, transparent 9px), linear-gradient(145deg, #86c8bc, #4e9898); }
.card[data-tribe="山兽"] .card-art { background-image: linear-gradient(35deg, rgba(255,255,255,.11) 25%, transparent 25% 75%, rgba(255,255,255,.1) 75%), linear-gradient(145deg, #bea77e, #796a5c); background-size: 20px 20px, auto; }
.card[data-tribe="星羽"] .card-art { background-image: radial-gradient(circle at 20% 25%, #fff 0 1px, transparent 2px), radial-gradient(circle at 75% 35%, #fff 0 1px, transparent 2px), linear-gradient(145deg, #9a94c9, #625d9a); }
.card[data-type="spell"] { --tribe-color: #7767ad; --card-color: #b3a7d7; }
.card[data-type="spell"] .card-art { background-image: radial-gradient(circle, rgba(255,255,255,.44), transparent 38%), conic-gradient(from 45deg, #6f63a7, #a68ccc, #6279a6, #6f63a7); }
.card[data-type="equipment"] { --tribe-color: #b97848; --card-color: #d9a46e; }
.card[data-type="equipment"] .card-art { background-image: linear-gradient(135deg, rgba(255,255,255,.28), transparent 35%), repeating-linear-gradient(45deg, #d7aa76 0 8px, #bd8458 8px 16px); }
.card-kind { position: absolute; z-index: 4; left: 8px; bottom: 40px; padding: 2px 6px; border-radius: 999px; color: #fff; background: rgba(44,58,52,.68); font-size: 6px; font-weight: 900; letter-spacing: .08em; }
.card-name { display: block; margin: 8px 3px 2px; font-family: Georgia, "Songti SC", serif; font-size: 14px; }
.card-tag { margin: 0 3px; color: var(--muted); font-size: 9px; }
.card-ability { margin: 7px 3px 0; padding-top: 6px; border-top: 1px solid rgba(24,59,53,.1); color: #59675f; font-size: 8px; line-height: 1.35; }
.card-ability b { margin-right: 3px; color: #625b83; }
.card-stats { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; justify-content: space-between; }
.card-stats .stat { border: 2px solid rgba(255,255,255,.86); border-radius: 50%; min-width: 29px; height: 29px; display: grid; place-items: center; padding: 0; }
.empty-hand { align-self: center; color: var(--muted); font-size: 12px; }

.activity-toast {
  position: fixed; z-index: 20; left: 50%; bottom: 25px; transform: translate(-50%, 15px); padding: 10px 17px;
  border-radius: 999px; color: #fff; background: rgba(24,59,53,.92); box-shadow: 0 9px 25px rgba(0,0,0,.15);
  font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transition: .25s ease;
}
.activity-toast.show { opacity: 1; transform: translate(-50%, 0); }

.modal-backdrop {
  position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px;
  background: rgba(17,42,37,.44); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: .25s ease;
  overflow-y: auto; overscroll-behavior: contain;
}
.modal-backdrop.visible { opacity: 1; visibility: visible; }
.modal { position: relative; width: min(510px, 100%); padding: 38px; border-radius: 30px; background: var(--paper); box-shadow: 0 30px 80px rgba(16,40,34,.27); text-align: center; transform: translateY(12px) scale(.98); transition: .25s ease; }
.modal-backdrop.visible .modal { transform: none; }
.modal-close { position: absolute; right: 17px; top: 14px; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); font-size: 24px; }
.modal-close:hover { background: #f1ebdf; }
.modal-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: -70px auto 22px; border: 5px solid var(--paper); border-radius: 20px 20px 20px 6px; background: #dce8aa; box-shadow: 0 8px 24px rgba(38,75,62,.18); font-size: 32px; }
.modal h2 { font-size: 30px; }
.modal-lead { max-width: 390px; margin: 12px auto 25px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0; text-align: left; }
.rule-grid > div { display: flex; gap: 9px; padding: 12px 9px; border-radius: 13px; background: #f3eee3; }
.rule-grid b { flex: 0 0 auto; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: var(--moss); font-size: 10px; }
.rule-grid strong, .rule-grid small { display: block; }
.rule-grid strong { font-size: 11px; }
.rule-grid small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.primary-button, .secondary-button { height: 50px; padding: 0 22px; border: 0; border-radius: 15px; cursor: pointer; font-weight: 900; }
.primary-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 16px; color: #fff; background: var(--moss); box-shadow: 0 8px 20px rgba(31,102,88,.18); }
.primary-button:hover { background: var(--moss-dark); }
.secondary-button { min-width: 160px; background: #eaf0dc; color: var(--moss); }
.rules-list { margin: 25px 0; padding: 0; list-style: none; text-align: left; }
.rules-list li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.rules-list li:last-child { border: 0; }
.rules-list b { color: var(--moss); font-family: Georgia, "Songti SC", serif; }
.rules-list span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.result-stats { display: flex; justify-content: center; gap: 12px; margin: 22px 0; }
.result-stats div { width: 116px; padding: 13px; border-radius: 14px; background: #f3eee3; }
.result-stats strong, .result-stats span { display: block; }
.result-stats strong { font-family: Georgia, serif; font-size: 24px; }
.result-stats span { color: var(--muted); font-size: 9px; }

@keyframes soft-pulse { 50% { box-shadow: inset 0 0 0 2px rgba(232,184,86,.12); } }
@keyframes unit-in { from { transform: translateY(14px) scale(.9); opacity: 0; } }
@keyframes hit { 40% { transform: translateX(-5px); filter: brightness(1.2); } 70% { transform: translateX(4px); } }
@keyframes defeated { to { transform: scale(.65) rotate(7deg); opacity: 0; } }
@keyframes event-in { from { transform: translateY(-7px); opacity: 0; } }
@keyframes feed-pulse { 50% { box-shadow: 0 0 0 7px rgba(232,184,86,0); } }
@keyframes synergy-in { from { transform: translateY(4px); opacity: 0; } }
@keyframes lunge-player { 45% { transform: translateZ(24px) translateY(-13px) scale(1.04); } }
@keyframes lunge-enemy { 45% { transform: translateZ(24px) translateY(13px) scale(1.04); } }
@keyframes slash-fx { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.35) rotate(-18deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.45) rotate(8deg); } }
@keyframes shield-fx { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.45) rotateY(45deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.22) rotateY(-18deg); } }
@keyframes heal-fx { 0% { opacity: 0; transform: translate(-50%,-35%) scale(.6); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-95%) scale(1.2); } }
@keyframes sparkle { to { transform: translateY(-28px) rotate(80deg); opacity: 0; } }
@keyframes synergy-fx { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.4); } }
@keyframes target-pulse { 50% { box-shadow: inset 0 0 0 3px rgba(99,176,154,.13), 0 0 14px rgba(99,176,154,.16); } }
@keyframes projectile-fx { 0% { opacity: 0; transform: translate(-110%,-170%) scale(.35); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(70%,45%) scale(1.35); } }
@keyframes upgrade-fx { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.35) rotate(-80deg); } 45% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5) rotate(80deg); } }
@keyframes equip-fx { 0% { opacity: 0; transform: translate(-50%,-20%) scale(.45); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-65%) scale(1.25); } }
@keyframes camera-shake { 0%,100% { transform: translate3d(0,0,0); } 25% { transform: translate3d(-2px,1px,0); } 50% { transform: translate3d(2px,-1px,0); } 75% { transform: translate3d(-1px,-1px,0); } }

@media (max-width: 720px) {
  .topbar {
    width: calc(100% - 24px); height: calc(70px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
  .text-button { display: none; }
  .game-shell { width: calc(100% - 18px); margin-top: 23px; }
  .game-heading { margin-inline: 7px; }
  .game-heading h1 { max-width: 250px; }
  .player-row { padding: 13px 15px; min-height: 80px; }
  .portrait { width: 48px; height: 48px; font-size: 24px; }
  .player-meta { width: min(290px, calc(100% - 108px)); }
  .enemy-row .player-meta { width: min(330px, calc(100% - 106px)); }
  .character-line { font-size: 9px; }
  .board-wrap { padding: 13px 9px 10px; }
  .event-banner { width: 96%; margin-bottom: 10px; }
  .synergy-strip { margin-inline: 1px; }
  .board-side { column-gap: 7px; row-gap: 6px; }
  .lane-labels { gap: 7px; }
  .lane { height: 80px; border-radius: 14px; }
  .unit { width: 96%; height: 64px; grid-template-columns: 33px 1fr; column-gap: 5px; padding: 6px; }
  .unit-art { font-size: 21px; }
  .unit-copy strong { font-size: 11px; }
  .unit-copy small { font-size: 8px; }
  .board-divider strong { max-width: 180px; text-align: center; }
  .hand-panel { padding: 15px 10px 17px; border-radius: 22px; }
  .hand-heading { padding-inline: 5px; }
  .card-type-legend { display: none; }
  .end-turn-button { min-width: 148px; }
  .hand {
    justify-content: flex-start; margin-inline: -2px; padding: 8px 6px 12px;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  }
  .card { scroll-snap-align: start; }
  .hand-scroll-cue { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: -5px 6px 0; color: rgba(24,59,53,.42); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
  .hand-scroll-cue b { font-size: 12px; }
  .activity-toast { bottom: calc(18px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 28px); text-align: center; }
  .battle-feed { padding-inline: 16px; }
  .modal-backdrop { align-items: center; padding: calc(48px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)); }
  .modal { max-height: calc(100dvh - 76px); overflow-y: auto; }
  .modal { padding: 32px 20px 25px; }
  .rule-grid { grid-template-columns: 1fr; }
  .rule-grid > div { padding: 9px 11px; }
}

@media (max-width: 430px) {
  .brand small { display: none; }
  .brand-mark { width: 38px; height: 38px; }
  .pill-button { padding: 9px 12px; }
  h1 { font-size: 22px; }
  .round-card span { display: none; }
  .round-card { grid-template-columns: 1fr; }
  .round-card strong { font-size: 24px; }
  .deck-stack { display: none; }
  .hero-row { flex-wrap: wrap; }
  .hero-row .player-meta { flex: 1; width: auto; }
  .hero-actions { width: 100%; margin: 2px 0 0 62px; justify-content: space-between; }
  .energy-box { padding: 6px 10px; }
  .camp-power { flex: 1; min-height: 42px; }
  .name-line { margin-bottom: 6px; }
  .lane { height: 76px; }
  .unit { display: block; padding: 5px; text-align: center; }
  .unit-art { width: 30px; height: 30px; margin: 0 auto 2px; font-size: 19px; }
  .unit-copy small { display: none; }
  .unit-stats { justify-content: center; margin-top: 3px; }
  .stat { min-width: 23px; padding: 2px 4px; }
  .hand-heading { align-items: flex-end; gap: 10px; }
  .hand-heading p { max-width: 142px; line-height: 1.4; }
  .end-turn-button { min-width: 136px; height: 50px; padding-inline: 13px; }
  .end-turn-button small { display: none; }
  .event-banner { grid-template-columns: auto auto; }
  .event-banner p { grid-column: 1 / -1; padding-left: 35px; margin-top: -5px; text-align: left; }
  .synergy-strip { align-items: flex-start; }
  .synergy-strip > span { max-width: 125px; white-space: normal; line-height: 1.35; }
  #activeSynergies { max-width: 190px; overflow-x: auto; justify-content: flex-start; }
  .card { flex-basis: 140px; height: 196px; }
  .card-art { height: 67px; }
  .card-ability { font-size: 7.5px; }
  .intro-modal .modal-icon { margin-top: -54px; }
  .modal h2 { font-size: 26px; }
  .modal-lead { margin-bottom: 17px; line-height: 1.65; }
  .rule-grid { gap: 6px; margin: 16px 0; }
}

@media (max-height: 680px) and (max-width: 720px) {
  .modal-backdrop { align-items: start; }
  .modal-icon { margin-top: -48px; }
  .modal-lead { margin-block: 8px 14px; }
  .rule-grid { margin-block: 12px; }
}

@media (hover: none) {
  .card:hover:not(:disabled), .end-turn-button:hover { transform: none; }
  .card.selected { transform: perspective(700px) translateY(-7px) rotateX(3deg); }
  .card:active:not(:disabled) { transform: perspective(700px) scale(.97) rotateX(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}