:root {
  color-scheme: dark;
  --ink: #07191d;
  --jade: #55e2d0;
  --jade-soft: #a9fff0;
  --gold: #f2c66c;
  --gold-light: #ffe8a4;
  --enemy: #ff846f;
  --paper: #f8f0d4;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  font-family: "Songti SC", "Noto Serif SC", "STSong", serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: radial-gradient(circle at 50% 15%, #173b3d 0, #07191d 48%, #030b0e 100%); color: var(--paper); }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
.game-shell { width: min(100%, 1500px); min-height: 100vh; margin: auto; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: grid; align-content: center; gap: 12px; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup p, .brand-lockup h1 { margin: 0; }
.brand-lockup p { color: #a6c9c5; font: 700 14px/1.2 system-ui, sans-serif; letter-spacing: .14em; }
.brand-lockup h1 { color: var(--gold-light); font-size: clamp(24px, 3vw, 38px); letter-spacing: .08em; text-shadow: 0 2px 14px #000; }
.brand-seal { width: 54px; height: 54px; display: grid; place-items: center; border: 2px solid var(--gold); border-radius: 12px 4px 12px 4px; background: linear-gradient(145deg, #173b38, #091b1e); color: var(--gold); box-shadow: inset 0 0 0 3px #102d2b, 0 8px 26px #0008; font-size: 18px; font-weight: 900; }
.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.pool-count { min-height: 48px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid #d5b56655; border-radius: 999px; background: #08181bc9; color: #bcd1cc; font: 700 14px system-ui, sans-serif; }
.pool-count b { color: var(--gold-light); font-size: 20px; }
.utility-button, .primary-button, .text-button, .close-button, .pause-button { min-width: 48px; min-height: 48px; border: 1px solid #d7bd7766; border-radius: 12px; cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.utility-button { padding: 0 16px; background: linear-gradient(#173537eb, #0a2024eb); color: #e7e3cb; }
.utility-button:hover { border-color: var(--gold); background: linear-gradient(#23484a, #0d292d); transform: translateY(-1px); }
.primary-button { padding: 0 28px; border-color: #ffe19a; background: linear-gradient(180deg, #e9bd63, #9e642b); color: #261607; font-weight: 900; box-shadow: inset 0 1px #fff6, 0 8px 24px #0008; }
.primary-button:hover { background: linear-gradient(180deg, #ffe096, #bc7938); transform: translateY(-2px); box-shadow: inset 0 1px #fff8, 0 10px 30px #000a; }
.text-button { padding: 0 18px; border-color: transparent; background: transparent; color: #bdece3; }
.text-button:hover { color: white; text-decoration: underline; }
.arena-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 520px; max-height: calc(100vh - 110px); overflow: hidden; border: 2px solid #b99a557a; border-radius: 22px; background: #0d2827; box-shadow: 0 20px 70px #000b, inset 0 0 0 5px #07181bbf; isolation: isolate; }
#arena { width: 100%; height: 100%; display: block; touch-action: none; }
.arena-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #00131670, transparent 12%, transparent 88%, #170c0966), linear-gradient(180deg, #020b0c66, transparent 18%, transparent 80%, #020b0caa); box-shadow: inset 0 0 90px #031013aa; z-index: 2; }
.scoreboard { position: absolute; top: 3.5%; left: 50%; transform: translateX(-50%); z-index: 20; width: min(70%, 840px); display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; filter: drop-shadow(0 6px 12px #0009); pointer-events: none; }
.commander { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid #ead18b77; background: linear-gradient(180deg, #122d2ecf, #07191de8); }
.enemy-commander { flex-direction: row-reverse; border-radius: 6px 18px 6px 18px; text-align: right; border-color: #ff9f8f77; }
.player-commander { border-radius: 18px 6px 18px 6px; }
.commander .crest { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 2px solid currentColor; font-size: 19px; font-weight: 900; }
.enemy-commander .crest { color: #ff9d8b; background: #551a16; }
.player-commander .crest { color: #9ffbef; background: #0b4d4a; }
.commander small { display: block; color: #b5c6c2; font: 700 14px system-ui, sans-serif; }
.commander strong { font-size: 18px; }
.commander b { margin-left: auto; color: var(--gold-light); font: 900 18px system-ui, sans-serif; }
.enemy-commander b { margin: 0 auto 0 0; }
.timer { min-height: 72px; display: grid; place-items: center; align-content: center; border: 2px solid var(--gold); border-radius: 12px; background: linear-gradient(#16383a, #061619); box-shadow: inset 0 0 0 3px #09282a; }
.timer small { color: #b9d5d0; font: 800 14px system-ui, sans-serif; }
.timer strong { color: white; font: 900 26px/.9 ui-monospace, monospace; text-shadow: 0 2px 5px #000; }
.timer em { display: none; color: #ffc6f4; font: 900 14px system-ui, sans-serif; }
.timer.is-double em { display: block; }
.timer.is-double small { display: none; }
.deployment-hint { position: absolute; top: 16%; left: 50%; z-index: 22; transform: translateX(-50%); min-height: 38px; display: flex; align-items: center; padding: 0 18px; border: 1px solid #fff5; border-radius: 999px; background: #06191dd9; color: #e6f5f1; font: 800 14px system-ui, sans-serif; opacity: 0; transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; }
.deployment-hint.is-visible { opacity: 1; transform: translate(-50%, 5px); }
.pause-button { position: absolute; top: 3.8%; right: 3.8%; z-index: 24; width: 50px; padding: 0; border-radius: 50%; background: #071a1ed9; font: 900 18px system-ui, sans-serif; }
.pause-button:hover { background: #173a3d; border-color: var(--gold); }
.hand-dock { position: absolute; left: 50%; bottom: 2.8%; z-index: 30; transform: translateX(-50%); width: min(88%, 940px); min-height: 126px; display: grid; grid-template-columns: 150px 1fr 92px; align-items: end; gap: 10px; padding: 12px 14px 10px; border: 1px solid #d6bb746e; border-radius: 22px 22px 14px 14px; background: linear-gradient(180deg, #102c30e8, #051418f5); box-shadow: inset 0 1px #fff2, 0 10px 38px #000a; backdrop-filter: blur(8px); }
.elixir-meter { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; font: 800 14px system-ui, sans-serif; }
.elixir-meter > span { grid-column: 1 / -1; text-align: center; color: #f0b4eb; letter-spacing: .18em; }
.elixir-orb { width: 58px; height: 58px; display: grid; place-items: center; align-content: center; border: 2px solid #ffc2ff; border-radius: 50% 46% 52% 45%; background: radial-gradient(circle at 36% 28%, #ffd3ff, #c743ce 52%, #541064 100%); box-shadow: 0 0 22px #e548ec8f, inset 0 0 0 4px #5c17667a; transform: rotate(3deg); }
.elixir-orb span { font: 900 26px/1 ui-monospace, monospace; text-shadow: 0 2px 4px #56145d; }
.elixir-orb small { font: 800 14px system-ui, sans-serif; }
.elixir-track { position: relative; height: 20px; overflow: hidden; border: 2px solid #e8c1e5; border-radius: 999px; background: #241027; box-shadow: inset 0 2px 7px #000b; }
.elixir-track i { position: absolute; inset: 0 auto 0 0; width: 50%; background: linear-gradient(90deg, #8e2eae, #f176e5); transition: width 120ms linear; }
#elixir-pips { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), #2d0b3388 calc(10% - 2px) 10%); }
.hand-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.battle-card { position: relative; min-width: 0; min-height: 104px; padding: 0; overflow: hidden; border: 2px solid #d8bb72; border-radius: 13px; background: #0e2429; box-shadow: 0 6px 14px #0008, inset 0 0 0 2px #051519; cursor: grab; transform-origin: center bottom; transition: transform 150ms ease, filter 150ms ease, border-color 150ms ease; }
.battle-card:hover { transform: translateY(-7px); border-color: #fff0a9; filter: brightness(1.08); }
.battle-card:focus-visible { outline: 3px solid #7affed; outline-offset: 3px; }
.battle-card.is-selected { transform: translateY(-12px); border-color: #fff9bc; box-shadow: 0 0 0 3px #58e3d4, 0 8px 24px #000b; }
.battle-card.is-locked { filter: grayscale(.65) brightness(.62); cursor: not-allowed; }
.battle-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.battle-card::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, #061317ed 45%); }
.battle-card .cost { position: absolute; top: 5px; left: 5px; z-index: 3; width: 31px; height: 31px; display: grid; place-items: center; border: 2px solid #ffdcff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f7abf2, #8c2499 70%); font: 900 18px system-ui, sans-serif; text-shadow: 0 2px #47114e; box-shadow: 0 2px 7px #0009; }
.battle-card .key { position: absolute; top: 6px; right: 6px; z-index: 3; min-width: 24px; min-height: 24px; display: grid; place-items: center; border: 1px solid #fff7; border-radius: 5px; background: #07181cd9; font: 800 14px system-ui, sans-serif; }
.battle-card .card-copy { position: absolute; z-index: 4; left: 7px; right: 7px; bottom: 6px; display: grid; text-align: left; }
.battle-card .card-copy strong { color: white; font-size: 17px; text-shadow: 0 2px 4px #000; }
.battle-card .card-copy small { overflow: hidden; color: #b9d8d3; font: 700 14px/1.2 system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.card-tooltip { position: absolute; left: 50%; bottom: calc(2.8% + 140px); z-index: 90; width: min(360px, 76%); min-height: 132px; padding: 13px 15px; border: 1px solid #e4c87f; border-radius: 16px 7px 16px 7px; background: linear-gradient(145deg, #17383af2, #061519f7); box-shadow: inset 0 0 0 3px #224c48a8, 0 14px 38px #000b; color: #edf6ed; opacity: 0; transform: translate(-50%, 8px); transition: opacity 150ms ease, transform 150ms ease; pointer-events: none; }
.card-tooltip.is-visible { opacity: 1; transform: translate(-50%, 0); }
.card-tooltip header { display: grid; grid-template-columns: 66px 1fr; gap: 11px; align-items: center; text-align: left; }
.card-tooltip header img { width: 66px; height: 66px; object-fit: cover; border: 1px solid #d7bb77; border-radius: 11px; }
.card-tooltip header small, .card-tooltip header strong, .card-tooltip header span { display: block; }
.card-tooltip header small { color: #dfc982; font: 800 14px/1.2 system-ui, sans-serif; }
.card-tooltip header strong { margin: 2px 0; color: #fff7ce; font: 900 22px/1.1 system-ui, sans-serif; text-shadow: 0 2px 4px #000; }
.card-tooltip header span, .card-tooltip footer { color: #aed7d0; font: 700 14px/1.35 system-ui, sans-serif; }
.card-tooltip p { margin: 10px 0 5px; color: white; font: 800 16px/1.4 system-ui, sans-serif; text-align: left; }
.card-tooltip footer { padding-top: 6px; border-top: 1px solid #7bb0a749; text-align: left; }
.next-card { min-width: 0; display: grid; justify-items: center; gap: 3px; color: #a7c5c1; font: 700 14px system-ui, sans-serif; }
.next-card img { width: 60px; height: 60px; object-fit: cover; border: 2px solid #8c9f86; border-radius: 10px; filter: saturate(.8); }
.next-card strong { max-width: 84px; overflow: hidden; color: #eef4dc; text-overflow: ellipsis; white-space: nowrap; }
.drag-ghost { position: fixed; z-index: 400; width: 78px; height: 92px; display: none; pointer-events: none; transform: translate(-50%, -65%); border: 2px solid var(--gold-light); border-radius: 12px; background: #102a2f; box-shadow: 0 12px 30px #000c; overflow: hidden; }
.drag-ghost.is-visible { display: block; }
.drag-ghost img { width: 100%; height: 100%; object-fit: cover; }
.drag-ghost span { position: absolute; inset: auto 0 0; padding: 4px; background: #06171de6; text-align: center; font-weight: 900; }
.toast { position: absolute; left: 50%; bottom: 22%; z-index: 80; min-height: 42px; display: grid; place-items: center; padding: 0 20px; border: 1px solid #f5d78b; border-radius: 999px; background: #07181eed; color: white; font: 800 15px system-ui, sans-serif; opacity: 0; transform: translate(-50%, 8px); transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.modal-backdrop { position: absolute; inset: 0; z-index: 200; display: none; place-items: center; padding: 5%; background: #021012d9; backdrop-filter: blur(10px); }
.modal-backdrop.is-visible { display: grid; }
.start-panel, .deck-panel, .help-panel, .pause-panel, .result-panel { position: relative; width: min(94%, 720px); max-height: 92%; overflow: auto; border: 1px solid #d5bd7e; border-radius: 24px 8px 24px 8px; background: linear-gradient(160deg, #17393b 0, #081c20 46%, #061217 100%); box-shadow: inset 0 0 0 4px #0a2829, 0 24px 80px #000d; text-align: center; }
.start-panel { padding: 24px 42px 30px; }
.start-panel > p, .deck-panel header p, .help-panel > p, .pause-panel > p, .result-panel > p { margin: 0 0 4px; color: var(--gold); font: 900 14px system-ui, sans-serif; letter-spacing: .16em; }
.start-panel h2, .deck-panel h2, .help-panel h2, .pause-panel h2, .result-panel h2 { margin: 0; color: var(--gold-light); font-size: clamp(30px, 5vw, 52px); text-shadow: 0 4px 18px #000; }
.start-panel > span { display: block; margin: 5px 0 16px; color: #bcd9d4; font: 800 15px system-ui, sans-serif; letter-spacing: .12em; }
.start-art { height: 138px; display: flex; justify-content: center; align-items: end; overflow: hidden; mask-image: linear-gradient(#000 70%, transparent); }
.start-art img { width: 164px; height: 164px; object-fit: cover; border-radius: 50%; }
.start-art img:first-child { transform: translateX(30px); }
.start-art img:last-child { transform: translateX(-30px); }
.start-art i { position: relative; z-index: 2; width: 54px; height: 54px; align-self: center; border: 2px solid var(--gold); border-radius: 50%; background: #0b2929; }
.start-art i::before { content: "斗"; display: grid; place-items: center; height: 100%; color: var(--gold-light); font-size: 24px; font-weight: 900; }
.start-deck-preview { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin: 0 auto 18px; }
.start-deck-preview img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid #d7bb77; border-radius: 8px; }
.start-panel .primary-button { min-width: 220px; }
.start-panel .text-button { display: block; margin: 5px auto 0; }
.deck-panel { width: min(96%, 1080px); padding: 22px; text-align: left; }
.deck-panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.deck-panel header h2 { font-size: 34px; }
.deck-panel header span { color: #aac8c4; font: 700 14px system-ui, sans-serif; }
.close-button { width: 48px; padding: 0; border-radius: 50%; background: #102d31; font: 400 30px system-ui, sans-serif; }
.close-button:hover { border-color: var(--gold); background: #1b4346; transform: rotate(5deg); }
.deck-summary { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 18px; margin: 14px 0; padding: 12px; border: 1px solid #75bcb45c; border-radius: 14px; background: #06181c9c; }
.deck-summary > strong { font-size: 17px; }
.deck-summary > strong b { color: var(--gold-light); }
.deck-summary > span { color: #d7b6da; font: 700 14px system-ui, sans-serif; }
#deck-slots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
#deck-slots img { width: 100%; aspect-ratio: 1.25; object-fit: cover; border: 2px solid #d0b570; border-radius: 8px; }
.collection-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; max-height: 46vh; overflow-y: auto; padding: 4px; }
.collection-card { position: relative; min-height: 116px; padding: 0; overflow: hidden; border: 2px solid #536d69; border-radius: 12px; background: #0c2428; cursor: pointer; text-align: left; }
.collection-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.collection-card.is-in-deck { border-color: #79fff0; box-shadow: inset 0 0 0 3px #1d6f68; }
.collection-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collection-card::after { content: ""; position: absolute; inset: 34% 0 0; background: linear-gradient(transparent, #06181cf5 45%); }
.collection-card .cost { position: absolute; z-index: 3; top: 5px; left: 5px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #a431ac; border: 2px solid #ffd8ff; font: 900 17px system-ui, sans-serif; }
.collection-card .selected-mark { position: absolute; z-index: 3; top: 6px; right: 6px; min-width: 28px; min-height: 28px; display: grid; place-items: center; border-radius: 50%; background: #26bba9; opacity: 0; }
.collection-card.is-in-deck .selected-mark { opacity: 1; }
.collection-card div { position: absolute; z-index: 3; left: 7px; right: 7px; bottom: 7px; }
.collection-card strong, .collection-card small { display: block; }
.collection-card strong { font-size: 17px; }
.collection-card small { color: #b5ceca; font: 700 14px/1.2 system-ui, sans-serif; }
.deck-panel footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.help-panel { padding: 30px; }
.help-panel .close-button { position: absolute; top: 16px; right: 16px; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; text-align: left; }
.help-grid article { position: relative; min-height: 114px; padding: 18px 16px 14px 62px; border: 1px solid #6da59e5e; border-radius: 14px; background: #071b20b8; }
.help-grid b { position: absolute; top: 18px; left: 15px; color: #6ce5d5; font: 900 22px system-ui, sans-serif; }
.help-grid strong, .help-grid span { display: block; }
.help-grid strong { margin-bottom: 6px; color: var(--gold-light); font-size: 18px; }
.help-grid span, .input-tip { color: #b6ceca; font: 700 14px/1.55 system-ui, sans-serif; }
.pause-panel, .result-panel { width: min(92%, 520px); padding: 32px; }
.pause-rune, .result-rune { width: 86px; height: 86px; display: grid; place-items: center; margin: 0 auto 14px; border: 3px solid var(--gold); border-radius: 50% 45% 50% 45%; background: #0c3131; color: var(--gold-light); font-size: 42px; font-weight: 900; box-shadow: 0 0 30px #d7ae5b55; }
.pause-panel h2, .result-panel h2 { font-size: 36px; }
.pause-panel button, .result-panel button { margin: 16px 4px 0; }
.result-panel > span:not(.result-rune) { display: block; margin: 10px auto; color: #bad3cf; font: 700 15px/1.5 system-ui, sans-serif; }
.result-crowns { color: var(--gold-light); font-size: 34px; letter-spacing: .22em; }
.loading-screen { position: absolute; inset: 0; z-index: 500; display: grid; place-items: center; align-content: center; gap: 10px; background: radial-gradient(circle at center, #163d3d, #041215 66%); transition: opacity 220ms ease; }
.loading-screen.is-hidden { opacity: 0; pointer-events: none; }
.loading-seal { width: 90px; height: 90px; display: grid; place-items: center; border: 3px double var(--gold); border-radius: 50%; color: var(--gold-light); font-size: 38px; font-weight: 900; box-shadow: 0 0 35px #d9b55a40; }
.loading-screen strong { color: #e8e0c5; font-size: 19px; }
.loading-screen > div { width: min(64%, 420px); height: 10px; overflow: hidden; border: 1px solid #8aa39e; border-radius: 999px; background: #061417; }
.loading-screen i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #37bbaa, #f0cc73); }
.loading-screen small { color: #9ab9b4; font: 700 14px system-ui, sans-serif; }
@media (max-width: 900px) {
  .game-shell { padding: 6px; align-content: start; }
  .masthead { padding: 2px 6px; }
  .brand-lockup p, .pool-count, #help-button { display: none; }
  .brand-seal { width: 46px; height: 46px; }
  .arena-frame { min-height: 560px; max-height: none; aspect-ratio: auto; height: calc(100vh - 62px); }
  .scoreboard { width: 82%; grid-template-columns: 1fr 86px 1fr; }
  .commander { padding: 4px 7px; }
  .commander .crest, .commander small { display: none; }
  .hand-dock { width: 96%; grid-template-columns: 82px 1fr 62px; min-height: 112px; padding: 8px; }
  .elixir-meter { grid-template-columns: 48px 1fr; }
  .elixir-orb { width: 48px; height: 48px; }
  .battle-card { min-height: 92px; }
  .battle-card .card-copy small, .battle-card .key, .next-card strong { display: none; }
  .next-card img { width: 52px; height: 52px; }
  .collection-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; }
}