@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600;700&family=Outfit:wght@400;500;600&display=swap');

:root { color-scheme: dark; --ink:#eee8dc; --muted:#918d86; --panel:#18171e; --line:#3a3434; --gold:#d8aa68; --red:#c85745; --teal:#54a1a2; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 50% 0,#26212c 0,#121118 38%,#0b0b0f 100%); color:var(--ink); font-family:Outfit,"Noto Serif SC",sans-serif; }
button,input,select { font:inherit; }
button { color:inherit; }
.grain { position:fixed; inset:0; opacity:.12; pointer-events:none; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); }
.game-shell { min-height:100vh; display:grid; grid-template-rows:auto auto minmax(330px,1fr) 260px; }
.topbar { height:74px; display:flex; align-items:center; gap:30px; padding:0 3vw; border-bottom:1px solid #332e31; background:#111016d9; backdrop-filter:blur(18px); position:relative; z-index:4; }
.brand { display:flex; align-items:center; min-width:190px; gap:11px; font-family:"Noto Serif SC",serif; letter-spacing:.08em; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; color:#f2bd74; border:1px solid #72583a; transform:rotate(45deg); background:#241b18; box-shadow:0 0 20px #d77a3530; }
.brand-mark::first-letter { transform:rotate(-45deg); }
.brand strong,.brand small { display:block; }.brand strong { font-size:17px; }.brand small { font:9px Outfit; letter-spacing:.28em; color:#7f7870; margin-top:2px; }
.run-stats { flex:1; display:flex; justify-content:center; gap:34px; color:#77736f; font-size:12px; letter-spacing:.08em; }
.run-stats b { color:#d8d1c5; margin-left:7px; font-size:14px; }
.header-actions { display:flex; align-items:center; gap:8px; }
.text-button,.icon-button { border:0; background:transparent; cursor:pointer; }
.text-button { color:#aaa39b; padding:10px 12px; }.text-button:hover { color:#fff; }
.home-button { display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid #b98045;border-radius:3px;background:linear-gradient(135deg,#5e3823,#2a1c1c);box-shadow:0 5px 18px #0008,inset 0 0 0 1px #f5c97d20;color:#ffe2b0;text-decoration:none;font:600 12px "Noto Serif SC",sans-serif;letter-spacing:.06em;white-space:nowrap;transition:transform .18s,filter .18s,border-color .18s; }
.home-button:hover,.home-button:focus-visible { color:#fff7e9;border-color:#f2bd74;filter:brightness(1.15);transform:translateY(-1px);outline:none; }
.icon-button { width:36px; height:36px; border:1px solid #40393a; color:#a39b93; font-size:19px; }.icon-button:hover { border-color:#92704d;color:#e2bb83; }
.route-strip { height:56px; display:flex; align-items:center; justify-content:center; background:#131218; border-bottom:1px solid #2c292d; position:relative; z-index:3; }
.route-node { width:46px; display:flex; flex-direction:column; align-items:center; gap:2px; color:#4f4b4c; }.route-node i { width:24px;height:24px;display:grid;place-items:center;border:1px solid #3a3538;border-radius:50%;font-style:normal;font-size:11px;background:#17151b; }.route-node small { font-size:9px; }
.route-node.current { color:#e4b679; }.route-node.current i { border-color:#d09a59;box-shadow:0 0 15px #c8773655;background:#2c211d; }.route-node.done { color:#77706b; }.route-node.done i { border-color:#60584f; }
.route-line { width:40px;height:1px;background:#3a3436;margin:-12px 2px 0; }.route-node.done + .route-line { background:#745d48; }
.battlefield { position:relative; overflow:hidden; background:linear-gradient(180deg,#17131ab8 0,#15131ab0 55%,#0b0b10dc 100%),url("assets/ember-forge-ruins.png") center/cover no-repeat; }
.battlefield::before { content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 48%,#ffffff05 48.2% 48.4%,transparent 48.6%),radial-gradient(ellipse at 50% 58%,#bd71361c,transparent 42%); }
.battlefield::after { content:"";position:absolute;left:0;right:0;bottom:0;height:32%;background:linear-gradient(170deg,transparent 0 48%,#0b0b0e 49%);opacity:.7; }
.ambient { position:absolute;border-radius:50%;filter:blur(70px);opacity:.2;width:240px;height:240px; }.ambient-left { background:#70487f;left:-100px;top:10%; }.ambient-right { background:#b55c31;right:-100px;top:0; }
.enemy-zone { position:absolute; top:32px; left:50%; transform:translateX(-50%); width:min(620px,75vw); display:flex; flex-direction:column; align-items:center; z-index:2; transition:filter .2s; }
.enemy-zone.hit { animation:enemyHit .35s; }.battlefield.enemy-turn .player-core { animation:playerHit .35s; }
@keyframes enemyHit { 35%{transform:translateX(calc(-50% + 9px));filter:brightness(2) sepia(1)} 60%{transform:translateX(calc(-50% - 7px))} }
@keyframes playerHit { 45%{transform:translateX(8px);filter:brightness(1.6)} }
.intent-card { position:absolute;right:50px;top:22px;text-align:center;padding:7px 15px;border:1px solid #544647;background:#171319cc;box-shadow:0 8px 30px #0008; }.intent-card small,.intent-card strong { display:block; }.intent-card small { color:#867b74;font-size:9px;letter-spacing:.16em;text-transform:uppercase; }.intent-card strong { color:#e9c19c;font-size:13px;margin-top:2px; }
.enemy-timeline { width:min(650px,88vw); margin-top:12px; padding:9px 11px 10px; border:1px solid #443b3d; background:#111116d9; box-shadow:0 10px 28px #0008; }
.timeline-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; color:#cba47d; font-size:10px; letter-spacing:.12em; }.timeline-title small { color:#82756e; font-size:9px; letter-spacing:.06em; }
.enemy-timeline ol { list-style:none; padding:0; margin:0; display:grid; gap:3px; }.enemy-timeline li { display:grid; grid-template-columns:68px minmax(0,1fr); gap:8px; align-items:center; min-height:22px; padding:4px 7px; border-left:2px solid #4a4244; color:#a69c95; font-size:10px; line-height:1.35; background:#1b181d88; }.enemy-timeline li b { color:#8c817c; font-weight:600; white-space:nowrap; }.enemy-timeline li span { color:#bcb1a9; }.enemy-timeline li.current { border-left-color:#d08e49; background:linear-gradient(90deg,#56341e99,#211a1dcc); box-shadow:inset 0 0 0 1px #9c613533; }.enemy-timeline li.current b,.enemy-timeline li.current span { color:#f0c99d; }.enemy-timeline li.will-skip { border-left-color:#8774cf; }.enemy-timeline li.will-skip span::first-letter { color:#c5b4ff; }
.enemy-portrait { width:126px;height:126px;display:grid;place-items:center;position:relative;margin-bottom:-8px; }.enemy-aura { position:absolute;inset:6px;border:1px solid #80604c;transform:rotate(45deg);background:radial-gradient(circle,#7e462d70,transparent 65%);box-shadow:0 0 50px #bc693533; }.enemy-aura::after { content:"";position:absolute;inset:12px;border:1px solid #5a4441; }.enemy-glyph { font:70px "Noto Serif SC";color:#d6b08e;text-shadow:0 10px 20px #000,0 0 30px #b24f30;z-index:1; }
.unit-info { width:310px;text-align:center; }.name-row { display:flex;align-items:center;justify-content:center;gap:10px;min-height:30px; }.name-row h1,.name-row h2 { margin:0;font:600 17px "Noto Serif SC";letter-spacing:.08em; }.name-row h2 { font-size:14px; }
.health-bar { height:19px;border:1px solid #4d3a3a;background:#141217;position:relative;margin-top:5px;overflow:hidden; }.health-bar i { display:block;height:100%;transition:width .3s;background:linear-gradient(90deg,#743629,#c75a42);box-shadow:inset 0 0 9px #ed9a6a66; }.health-bar span { position:absolute;inset:0;display:grid;place-items:center;font-size:10px;text-shadow:0 1px 2px #000; }
.player-zone { position:absolute;bottom:24px;left:3vw;right:3vw;display:flex;justify-content:space-between;align-items:end;z-index:2; }.player-core { display:flex;align-items:center;gap:14px; }.energy-orb { width:70px;height:70px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 35%,#e5b56a,#9d5535 40%,#2a1c22 72%);border:2px solid #d8aa6d;box-shadow:0 0 0 5px #1c181e,0 0 28px #d26d3f55; }.energy-orb span { font:700 28px "Noto Serif SC";line-height:1; }.energy-orb small { font-size:8px;letter-spacing:.1em; }
.player-details { width:280px; }.player-details .name-row { justify-content:flex-start; }.player-health i { background:linear-gradient(90deg,#226d6c,#4aa3a0); }
.turn-actions { display:flex;align-items:end;gap:22px; }.pile-counts { display:flex;gap:15px;color:#6e6968;font-size:10px; }.pile-counts b { color:#bbb2a9; }.end-turn { padding:9px 22px;border:1px solid #8c673f;background:linear-gradient(#33251f,#211a1c);min-width:150px;cursor:pointer;box-shadow:0 5px 18px #0007; }.end-turn:hover { border-color:#e1a55c;transform:translateY(-1px); }.end-turn:disabled { opacity:.4;cursor:default; }.end-turn span,.end-turn small { display:block; }.end-turn span { font:600 13px "Noto Serif SC";color:#e7c493;letter-spacing:.12em; }.end-turn small { color:#766b64;font-size:8px;margin-top:2px; }
.status-row { display:flex;gap:4px; }.status { padding:2px 5px;border:1px solid #586978;background:#16232e;color:#91cce5;font-size:9px; }.status.strength { color:#f09d7f;border-color:#774638;background:#2d1a19; }.status.vulnerable { color:#e3a091;border-color:#6e3b38;background:#2c191a; }.status.weak { color:#c2a5db;border-color:#594171;background:#21192d; }
.hand-wrap { background:linear-gradient(#111116,#0d0c10);border-top:1px solid #302a2e;position:relative;z-index:3;overflow:visible; }.hand { height:100%;display:flex;justify-content:center;align-items:flex-end;padding:18px 3vw 24px;gap:clamp(4px,1.1vw,14px);perspective:900px; }
.game-card { --card-hue:#b8503f;width:148px;height:216px;flex:0 1 148px;border:1px solid color-mix(in srgb,var(--card-hue) 58%,#b9a88f);border-radius:7px;position:relative;overflow:hidden;background:linear-gradient(155deg,color-mix(in srgb,var(--card-hue) 22%,#252029),#17151b 47%,#111015);box-shadow:0 10px 20px #0009,inset 0 0 0 3px #ffffff08;transition:transform .18s,filter .18s;cursor:pointer; }.hand .game-card:hover { transform:translateY(-34px) scale(1.08);z-index:5;filter:brightness(1.1); }.game-card.played { transform:translateY(-90px) scale(.7);opacity:0; }
.game-card::before { content:"";position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--card-hue) 55%,#736a62);border-radius:4px;pointer-events:none; }.card-cost { position:absolute;z-index:2;left:8px;top:8px;width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 40% 30%,#f0c176,#9f563c 65%);border:1px solid #f2ce99;color:#fff7e8;font:700 17px "Noto Serif SC";box-shadow:0 2px 8px #000; }.card-heading { height:43px;padding:9px 8px 0 39px;text-align:center; }.card-heading strong,.card-heading small { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.card-heading strong { font:600 13px "Noto Serif SC";letter-spacing:.05em; }.card-heading small { font-size:7px;color:#988e84;letter-spacing:.16em; }.card-art { height:87px;margin:1px 11px;display:grid;place-items:center;border-top:1px solid color-mix(in srgb,var(--card-hue) 60%,#5d5550);border-bottom:1px solid #494043;background:radial-gradient(circle,color-mix(in srgb,var(--card-hue) 55%,transparent),transparent 65%),linear-gradient(135deg,#ffffff08,#0005); }.card-art span { color:color-mix(in srgb,var(--card-hue) 45%,#f4d5ae);font:58px "Noto Serif SC";text-shadow:0 5px 14px #000,0 0 17px var(--card-hue); }.game-card p { margin:9px 14px 0;min-height:36px;text-align:center;color:#c8c0b6;font:500 10px/1.55 "Noto Serif SC"; }.card-footer { position:absolute;left:13px;right:13px;bottom:8px;display:flex;justify-content:space-between;color:#625d5a;font-size:6px;letter-spacing:.07em; }
.modal { width:min(900px,92vw);max-height:90vh;padding:0;border:1px solid #55484a;background:linear-gradient(145deg,#211d25,#121116);color:var(--ink);box-shadow:0 30px 100px #000;overflow:auto; }.modal::backdrop { background:#060609d9;backdrop-filter:blur(7px); }.reward-screen,.camp-screen,.result-screen,.deck-screen { padding:40px;text-align:center; }.eyebrow { margin:0 0 8px;color:#b98757;letter-spacing:.24em;font-size:10px; }.modal h2 { margin:0;font:600 26px "Noto Serif SC";letter-spacing:.06em; }.muted { color:#87817d;font-size:13px;line-height:1.7; }.reward-cards { display:flex;justify-content:center;gap:20px;margin:28px 0 14px; }.game-card.compact { flex:0 0 148px; }.reward-skip { margin-top:8px; }.campfire,.victory-sigil { margin:6px auto 12px;color:#e29552;font-size:70px;text-shadow:0 0 30px #e6723c; }.camp-actions { display:flex;gap:14px;justify-content:center;margin-top:27px; }.choice-button { width:220px;padding:18px;border:1px solid #55484a;background:#1b181e;cursor:pointer; }.choice-button:hover { border-color:#b98251;background:#251e1e; }.choice-button b,.choice-button span { display:block; }.choice-button b { font:600 16px "Noto Serif SC";color:#e1b77c; }.choice-button span { margin-top:6px;color:#89817b;font-size:11px; }.primary-button { border:1px solid #c08b53;background:linear-gradient(#9d5a38,#6e382b);padding:12px 24px;cursor:pointer;color:#fff1da;box-shadow:0 8px 20px #0006; }.primary-button:hover { filter:brightness(1.15); }.result-screen { padding:60px 40px; }.result-screen .primary-button { margin-top:18px; }
.modal-title-row { display:flex;justify-content:space-between;align-items:start;text-align:left;margin-bottom:25px; }
  /* 长牌组与图鉴会在 dialog 内滚动；标题栏吸顶，使关闭/返回操作始终可见。 */
  .deck-screen .modal-title-row,.compendium-screen .modal-title-row { position:sticky;top:0;z-index:8;padding:14px 0 12px;background:linear-gradient(180deg,#211d25 78%,#211d25e8 88%,transparent);box-shadow:0 10px 14px -13px #000; }
  .deck-screen .modal-title-row .icon-button,.compendium-screen .modal-title-row .icon-button { position:relative;z-index:1;background:#18151bcc; }.deck-grid { display:grid;grid-template-columns:repeat(auto-fill,148px);justify-content:center;gap:18px; }.deck-grid .game-card { cursor:default; }
.modal-close-row { position:sticky;top:0;z-index:3;height:0;text-align:right; }.modal-close-row .icon-button { margin:12px; }.workshop-grid { display:grid;grid-template-columns:1fr 330px;min-height:560px; }.workshop-grid>section:first-child { padding:45px; }.preview-stage { display:grid;place-items:center;background:radial-gradient(circle,#743f3540,transparent 55%),#100f14;border-left:1px solid #373136; }.preview-stage .game-card { transform:scale(1.25);cursor:default; }
.card-form { display:grid;gap:15px;margin-top:24px; }.card-form label { display:grid;gap:6px;color:#8e8781;font-size:11px; }.card-form input,.card-form select { width:100%;border:1px solid #494044;background:#121116;color:#e7dfd4;padding:10px;outline:none; }.card-form input:focus,.card-form select:focus { border-color:#a77a4c; }.form-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.card-form input[type=color] { height:39px;padding:3px; }.card-form input[type=range] { padding:0;accent-color:#c7794c; }.budget-note { margin:0;color:#ba8d63;font-size:11px; }.toast { position:fixed;left:50%;bottom:285px;z-index:20;transform:translate(-50%,15px);padding:9px 17px;border:1px solid #745a42;background:#21191bcc;color:#efd2aa;font-size:12px;opacity:0;transition:.2s;pointer-events:none; }.toast.show { opacity:1;transform:translate(-50%,0); }
@media (max-width:800px) { .home-button { position:fixed;left:14px;bottom:14px;z-index:40;padding:10px 13px;font-size:12px;border-radius:4px;box-shadow:0 8px 24px #000b; } .topbar { padding:0 14px;gap:10px; }.brand { min-width:auto; }.brand>div { display:none; }.run-stats { gap:10px;justify-content:flex-start; }.run-stats span:first-child { display:none; }.header-actions .text-button { font-size:0;padding:8px; }.header-actions .text-button b { font-size:12px; }.header-actions #workshop-button::after { content:"工坊";font-size:12px; }.route-line { width:18px; }.game-shell { grid-template-rows:auto auto minmax(360px,1fr) 220px; }.enemy-zone { top:45px;width:94vw; }.intent-card { right:0; }.player-zone { bottom:16px;align-items:end; }.player-details { width:180px; }.turn-actions { gap:8px; }.pile-counts { display:none; }.hand { justify-content:flex-start;overflow-x:auto;padding-left:18px; }.game-card { flex-basis:130px;min-width:130px;height:194px; }.card-art { height:71px; }.game-card p { font-size:9px; }.workshop-grid { grid-template-columns:1fr; }.preview-stage { min-height:340px;border:0;border-top:1px solid #373136; }.workshop-grid>section:first-child { padding:32px 24px; }.reward-cards { justify-content:flex-start;overflow-x:auto;padding:15px; }.camp-actions { flex-direction:column;align-items:center; } }
@media (max-height:720px) and (min-width:801px) { .game-shell { grid-template-rows:auto auto minmax(300px,1fr) 225px; }.enemy-zone { top:10px; }.enemy-portrait { width:105px;height:105px; }.enemy-glyph { font-size:58px; }.player-zone { bottom:12px; }.game-card { height:195px; }.card-art { height:70px; } }
/* v0.2 interaction feedback */
button.game-card { appearance:none; padding:0; color:inherit; font:inherit; text-align:initial; }
.hand .game-card.unplayable { cursor:not-allowed; filter:grayscale(.55) brightness(.58); opacity:.62; }
.hand .game-card.unplayable:hover { transform:none; z-index:auto; }
.header-actions .text-button:disabled { color:#5c5755; cursor:not-allowed; }
.choice-button:disabled,.choice-button.is-disabled { cursor:not-allowed; opacity:.48; }
.choice-button:disabled:hover { border-color:#55484a; background:#1b181e; }
.camp-actions-three .choice-button { width:220px; }
.status.phase { color:#f1bd76; border-color:#9b603e; background:#311c19; }
.enemy-zone.guarded { animation:enemyGuard .45s; }
.enemy-zone.empowered { animation:enemyEmpower .5s; }
.battlefield.boss-phase::before { animation:bossPhase .65s; }
@keyframes enemyGuard { 45% { filter:brightness(1.5) saturate(1.5); } }
@keyframes enemyEmpower { 45% { filter:brightness(1.55); transform:translateX(-50%) scale(1.05); } }
@keyframes bossPhase { 50% { background:radial-gradient(ellipse at 50% 45%,#e4582f66,transparent 48%); } }
@media (max-width:800px) { .camp-actions-three .choice-button { width:220px; } }

/* Narrative overlay */
.story-screen { padding:46px 52px 50px; text-align:center; }
.story-screen h2 { margin-bottom:14px; }
.story-lead { max-width:650px; margin:0 auto 25px; }
.story-chapters { display:grid; gap:10px; max-width:650px; margin:0 auto; text-align:left; }
.story-chapters article { display:grid; grid-template-columns:34px 1fr; gap:13px; padding:13px 15px; border:1px solid #43373a; background:#151217a8; }
.story-chapters span { color:#c88d53; font:600 15px Outfit,sans-serif; }
.story-chapters b { color:#e5c08b; font:600 13px "Noto Serif SC",serif; letter-spacing:.08em; }
.story-chapters p { margin:4px 0 0; color:#908983; font-size:12px; line-height:1.65; }
.story-start { margin-top:25px; }
@media (max-width:800px) { .story-screen { padding:34px 22px; }.story-chapters article { padding:12px; } }
/* Tutorial and decision guidance */
.tutorial-callout { max-width:650px; margin:15px auto; padding:11px 14px; display:flex; gap:10px; text-align:left; border:1px solid #7c5c3d; background:#2a1c1a; color:#d8c1a1; font-size:12px; line-height:1.55; }
.tutorial-callout b { color:#f0bd78; white-space:nowrap; }
.reward-continue { margin-top:15px; }
.story-tutorial { max-width:650px; margin:18px auto 0; padding:10px 14px; border-left:2px solid #c9854c; background:#1c171a; color:#cbb49a; font-size:12px; line-height:1.6; }
.tutorial-screen { padding:44px 50px; text-align:center; }
.tutorial-steps { display:grid; gap:10px; max-width:640px; margin:25px auto 0; text-align:left; }
.tutorial-steps article { display:grid; grid-template-columns:34px 1fr; gap:12px; padding:13px 15px; border:1px solid #42373a; background:#151217aa; }
.tutorial-steps span { display:grid; place-items:center; width:27px; height:27px; border:1px solid #9f7146; border-radius:50%; color:#e6ba7f; font:600 14px Outfit,sans-serif; }
.tutorial-steps b { color:#e3c092; font:600 13px "Noto Serif SC",serif; }
.tutorial-steps p { margin:4px 0 0; color:#958d85; font-size:12px; line-height:1.6; }
@media (max-width:800px) { .tutorial-screen { padding:32px 22px; }.tutorial-callout { display:block; }.tutorial-callout b { display:block; margin-bottom:3px; } }
/* Card rarity */
.game-card.interactive { cursor:pointer; }
.game-card.rarity-common { --rarity-glow:#756b64; }
.game-card.rarity-rare { --rarity-glow:#4e9fd8; border-color:#579fce; }
.game-card.rarity-rare::before { border-color:#65b5e9; }
.game-card.rarity-epic { --rarity-glow:#b06ad5; border-color:#a866ce; box-shadow:0 10px 20px #0009,0 0 16px #8a3fba45,inset 0 0 0 3px #ffffff08; }
.game-card.rarity-epic::before { border-color:#c17be7; }
.game-card.rarity-ssr { --rarity-glow:#e3b352; border-color:#efc867; background:linear-gradient(155deg,#d19a3538,#3b2720 47%,#151015); box-shadow:0 10px 20px #0009,0 0 22px #e2aa4f70,inset 0 0 0 3px #fff0b520; animation:ssrPulse 2.3s ease-in-out infinite; }
.game-card.rarity-ssr::before { border-color:#f6d881; box-shadow:inset 0 0 16px #e8aa4d55; }
.game-card.rarity-ssr .card-cost { background:radial-gradient(circle at 40% 30%,#fff0a9,#bd762e 65%); }
.game-card.rarity-ssr .card-footer span:last-child { color:#f4cc70; }
.game-card.rarity-forged { border-color:#d98257; }
@keyframes ssrPulse { 50% { box-shadow:0 10px 20px #0009,0 0 31px #e2aa4f99,inset 0 0 0 3px #fff0b530; } }
/* Individual card-face compositions */
.card-art { position:relative; isolation:isolate; overflow:hidden; }
.card-art::before,.card-art::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; }
.card-art span { position:relative; z-index:1; transition:transform .2s,filter .2s; }
.game-card:hover .card-art span { transform:scale(1.08) rotate(-3deg); filter:brightness(1.18); }
.art-slash::before { background:linear-gradient(122deg,transparent 25%,#ffb06b18 27% 31%,transparent 33%),linear-gradient(145deg,transparent 42%,#d94d3d88 44% 49%,transparent 51%); transform:scale(1.5); }
.art-meteor::before { background:radial-gradient(circle at 72% 25%,#ffc274cc 0 6%,#dc5d3b88 8% 15%,transparent 27%),linear-gradient(130deg,transparent 45%,#b9433777 47% 51%,transparent 53%); }
.art-spark::before { background:radial-gradient(circle at 50% 50%,#ffd17d77 0 8%,#e67b4088 11% 22%,transparent 48%),repeating-conic-gradient(from 0deg,#e8924b55 0 8deg,transparent 8deg 28deg); }
.art-tempo::before { background:repeating-radial-gradient(ellipse at 50% 50%,#b49ae655 0 4px,transparent 5px 13px),conic-gradient(from 0deg,transparent,#8d74d477,transparent); }
.art-guard::before,.art-brace::before { background:radial-gradient(ellipse at 50% 70%,#7ed0d477 0 22%,transparent 24%),linear-gradient(135deg,transparent 48%,#5ab2b866 49% 52%,transparent 53%); }
.art-fortress::before,.art-fortify::before { background:linear-gradient(90deg,transparent 18%,#59aab466 19% 27%,transparent 28% 47%,#56aeb966 48% 57%,transparent 58% 78%,#59aab466 79% 87%,transparent 88%),linear-gradient(0deg,#1f718066,transparent); }
.art-slam::before,.art-retribution::before { background:radial-gradient(circle at 50% 70%,#68c2cb66 0 13%,transparent 15%),linear-gradient(25deg,transparent 40%,#80d4d877 42% 48%,transparent 50%); }
.art-rune::before,.art-brand::before,.art-trace::before { background:conic-gradient(from 45deg at 50% 50%,transparent 0 18%,#ec766555 19% 26%,transparent 27% 43%,#f19a7055 44% 51%,transparent 52% 68%,#ec766555 69% 76%,transparent 77%); }
.art-comet::before,.art-cascade::before { background:radial-gradient(circle at 25% 25%,#f4b1cd99 0 4%,transparent 6%),radial-gradient(circle at 65% 48%,#f8b3c488 0 5%,transparent 7%),radial-gradient(circle at 42% 72%,#ed8aa988 0 4%,transparent 6%); }
.art-execution::before { background:radial-gradient(circle at 50% 50%,#ffd99288 0 10%,#a93d3f55 18%,transparent 42%),linear-gradient(45deg,transparent 46%,#ffe3a977 48% 52%,transparent 54%); }
.art-hex::before { background:repeating-conic-gradient(from 30deg at 50% 50%,#b48ae255 0 12deg,transparent 13deg 30deg),radial-gradient(circle,#573b9255,transparent 58%); }
.art-kindle::before,.art-stoke::before { background:radial-gradient(ellipse at 50% 72%,#ffc35a99 0 12%,#df6e3877 18%,transparent 48%),linear-gradient(20deg,transparent 38%,#ffb15c66 40% 44%,transparent 46%); }
.art-ashstrike::before { background:linear-gradient(115deg,transparent 22%,#ed6d4666 24% 29%,transparent 31%),radial-gradient(circle at 55% 55%,#9d433f77 0 15%,transparent 37%); }
.art-flare::before { background:radial-gradient(circle at 50% 58%,#fff0a688 0 8%,#f0943b99 15%,#b6443f66 30%,transparent 58%),repeating-conic-gradient(#f6a34a44 0 7deg,transparent 8deg 24deg); }
.art-forged::before { background:linear-gradient(130deg,transparent 35%,#e59a6d77 37% 43%,transparent 45%),radial-gradient(circle at 35% 70%,#ffb27466 0 7%,transparent 9%); }
.game-card.rarity-legendary { --rarity-glow:#e3b352; border-color:#efc867; background:linear-gradient(155deg,#d19a3538,#3b2720 47%,#151015); box-shadow:0 10px 20px #0009,0 0 22px #e2aa4f70,inset 0 0 0 3px #fff0b520; animation:legendaryPulse 2.3s ease-in-out infinite; }
.game-card.rarity-legendary::before { border-color:#f6d881; box-shadow:inset 0 0 16px #e8aa4d55; }
.game-card.rarity-legendary .card-cost { background:radial-gradient(circle at 40% 30%,#fff0a9,#bd762e 65%); }
.game-card.rarity-legendary .card-footer span:last-child { color:#f4cc70; }
@keyframes legendaryPulse { 50% { box-shadow:0 10px 20px #0009,0 0 31px #e2aa4f99,inset 0 0 0 3px #fff0b530; } }
.reward-option { display:flex; flex-direction:column; align-items:center; gap:8px; }
.reward-pick { width:148px; padding:7px 4px; border:1px solid #87603d; background:#2a1d1b; color:#e8c28b; cursor:pointer; font-size:11px; }
.reward-pick:hover { border-color:#e1a55c; background:#3a251f; }
@media (max-width:800px) { .reward-option { flex:0 0 148px; }.reward-cards { gap:14px; } }
/* Card compendium */
.compendium-screen { padding:36px 40px 46px; text-align:left; }
.compendium-screen .muted { max-width:760px; }
.rarity-legend { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 28px; }
.rarity-legend span { padding:5px 9px; border:1px solid #5d5550; font-size:11px; }
.rarity-legend .common { color:#c4bab0; }.rarity-legend .rare { color:#76bfe8; border-color:#579fce; }.rarity-legend .epic { color:#d496f2; border-color:#a866ce; }.rarity-legend .legendary { color:#f3ce72; border-color:#efc867; }.rarity-legend .forged { color:#ed9b6c; border-color:#d98257; }
.compendium-group { padding:20px 0 25px; border-top:1px solid #3b3436; }
.compendium-group h3 { margin:0; color:#e5c08b; font:600 17px "Noto Serif SC",serif; letter-spacing:.06em; }
.compendium-group p { margin:5px 0 15px; color:#908881; font-size:12px; }
.compendium-grid { justify-content:start; gap:14px; }
.forge-guide { margin-top:6px; }
@media (max-width:800px) { .compendium-screen { padding:30px 20px; }.compendium-grid { justify-content:center; } }
/* Difficulty selection */
.difficulty-picker { margin:20px auto 0; max-width:650px; text-align:left; }
.difficulty-picker>p { margin:0 0 8px; color:#d8b275; font:600 12px "Noto Serif SC",serif; letter-spacing:.08em; }
.difficulty-picker>div { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.difficulty-choice { min-height:78px; padding:10px; border:1px solid #4d4040; background:#171319; color:#aaa29a; text-align:left; cursor:pointer; }
.difficulty-choice b,.difficulty-choice span { display:block; }.difficulty-choice b { color:#d5c3ad; font:600 12px "Noto Serif SC",serif; }.difficulty-choice span { margin-top:5px; font-size:9px; line-height:1.45; }
.difficulty-choice:hover { border-color:#a9784a; background:#241a1a; }.difficulty-choice.selected { border-color:#dcaa63; background:#30201b; box-shadow:inset 0 0 0 1px #dcaa6344; }.difficulty-choice.selected b { color:#f1cb91; }
@media (max-width:800px) { .difficulty-picker>div { grid-template-columns:1fr; }.difficulty-choice { min-height:58px; } }

/* Rarity hierarchy: ordinary is silver-white; forged is cyan metal, never gold. */
.game-card.rarity-common {
  --rarity-glow:#f1f2ed;
  border-color:#dfe3e2;
  background:linear-gradient(155deg,#f4f6f01c,#262a2e 47%,#111317);
  box-shadow:0 10px 20px #0009,0 0 9px #e9eeea35,inset 0 0 0 2px #ffffff10;
}
.game-card.rarity-common::before { border-color:#f7f9f5; box-shadow:inset 0 0 12px #ffffff12; }
.game-card.rarity-common .card-cost { background:radial-gradient(circle at 40% 30%,#ffffff,#88939a 67%); color:#1c2227; }
.game-card.rarity-common .card-heading small,.game-card.rarity-common .card-footer span:last-child { color:#f0f2ee; }

.game-card.rarity-rare {
  --rarity-glow:#56bfff;
  border-color:#61bff1;
  background:linear-gradient(155deg,#3cbbef24,#182a38 47%,#101319);
  box-shadow:0 10px 20px #0009,0 0 14px #39a8ed4f,inset 0 0 0 2px #8ed7ff10;
}
.game-card.rarity-rare::before { border-color:#8bd7ff; box-shadow:inset 0 0 12px #56bfff26; }
.game-card.rarity-rare .card-cost { background:radial-gradient(circle at 40% 30%,#dff7ff,#277cb2 68%); }
.game-card.rarity-rare .card-heading small,.game-card.rarity-rare .card-footer span:last-child { color:#9bddff; }

.game-card.rarity-epic {
  --rarity-glow:#cf78f3;
  border-color:#c875ed;
  background:linear-gradient(155deg,#b85ce82b,#2a1b3b 47%,#15101c);
  box-shadow:0 10px 20px #0009,0 0 18px #ad52d660,inset 0 0 0 2px #e8b8ff12;
}
.game-card.rarity-epic::before { border-color:#e0a0ff; box-shadow:inset 0 0 14px #cd73ed35; }
.game-card.rarity-epic .card-cost { background:radial-gradient(circle at 40% 30%,#ffe5ff,#783ca4 68%); }
.game-card.rarity-epic .card-heading small,.game-card.rarity-epic .card-footer span:last-child { color:#ecaaff; }

.game-card.rarity-legendary {
  --rarity-glow:#ffd368;
  border-color:#ffd36e;
  background:linear-gradient(155deg,#f3bd3f42,#4a2d13 47%,#17120d);
  box-shadow:0 10px 20px #0009,0 0 25px #f5b83b88,inset 0 0 0 3px #fff0b52e;
  animation:legendaryPulse 2.3s ease-in-out infinite;
}
.game-card.rarity-legendary::before { border-color:#fff0a3; box-shadow:inset 0 0 17px #ffc45366; }
.game-card.rarity-legendary .card-cost { background:radial-gradient(circle at 40% 30%,#fff7c5,#c57416 68%); color:#3a2007; }
.game-card.rarity-legendary .card-heading small,.game-card.rarity-legendary .card-footer span:last-child { color:#ffe49a; }

.game-card.rarity-forged {
  --rarity-glow:#62e4e6;
  border-color:#55d9dd;
  background:repeating-linear-gradient(135deg,#0b222a 0 7px,#102d36 7px 14px),linear-gradient(155deg,#3ad5d82b,#13313b 47%,#0d161b);
  box-shadow:0 10px 20px #0009,0 0 18px #37d9df78,inset 0 0 0 2px #8cffff1c;
}
.game-card.rarity-forged::before { border-color:#a2ffff; border-style:dashed; box-shadow:inset 0 0 15px #35d9df55; }
.game-card.rarity-forged .card-cost { background:radial-gradient(circle at 40% 30%,#dbffff,#177d8c 68%); color:#062d34; }
.game-card.rarity-forged .card-heading small,.game-card.rarity-forged .card-footer span:last-child { color:#8effff; }
.game-card.rarity-forged .card-art::after { background:repeating-linear-gradient(135deg,transparent 0 11px,#87ffff18 12px 14px); }

.rarity-legend .common { color:#f2f4ef; border-color:#e7ebe6; }
.rarity-legend .rare { color:#9bddff; border-color:#61bff1; }
.rarity-legend .epic { color:#ecaaff; border-color:#c875ed; }
.rarity-legend .legendary { color:#ffe49a; border-color:#ffd36e; }
.rarity-legend .forged { color:#8effff; border-color:#55d9dd; }

.enemy-trait { min-height:16px; margin:1px 0 2px; color:#b0a49a; font-size:10px; letter-spacing:.04em; }

/* Reward cards have room for their full rules text. */
.reward-option .game-card.compact { height:270px; }
.reward-option .game-card.compact .card-art { height:96px; }
.reward-option .game-card.compact p { min-height:48px; margin-top:10px; font-size:11px; line-height:1.6; }
.reward-option .game-card.compact .card-footer { bottom:9px; }
.shop-screen .reward-option .game-card { cursor:default; }
@media (max-width:800px) { .reward-option .game-card.compact { height:250px; }.reward-option .game-card.compact .card-art { height:82px; } }

.enemy-codex article { margin-top:10px; padding:14px 16px; border:1px solid #443a3a; background:#171419; }
.enemy-codex article b,.enemy-codex article span { display:block; }.enemy-codex article b { color:#e6bf88; font:600 15px "Noto Serif SC",serif; }.enemy-codex article span { margin-top:5px; color:#aaa099; font-size:11px; }.enemy-codex article p { margin:8px 0 0; color:#87c7df; font-size:12px; }
.shop-screen .reward-cards { flex-wrap:wrap; max-width:900px; margin-inline:auto; }

/* Reward and compendium cards always reserve space for full rules text. */
.reward-screen { padding-bottom:44px; }
.reward-cards { align-items:flex-start; }
.reward-option { width:188px; }
.reward-option .game-card.compact { width:188px; flex-basis:188px; height:332px; }
.reward-option .game-card.compact .card-heading { height:48px; padding-left:43px; }
.reward-option .game-card.compact .card-art { height:122px; }
.reward-option .game-card.compact p { min-height:58px; margin:11px 16px 0; font-size:11px; line-height:1.65; }
.reward-option .game-card.compact .card-footer { bottom:10px; font-size:7px; }
.reward-card-info { width:188px; min-height:52px; padding:8px 10px; text-align:left; border:1px solid #4d4344; background:#151218; color:#c9c0b6; font:11px/1.55 "Noto Serif SC",serif; }
.reward-card-info b { display:block; margin-bottom:2px; color:#d9ae77; font-size:10px; letter-spacing:.08em; }
.reward-card-info span { display:block; }
.reward-pick { width:188px; }
.compendium-grid .game-card.compact { height:278px; }
.compendium-grid .game-card.compact .card-art { height:105px; }
.compendium-grid .game-card.compact p { min-height:48px; margin-top:9px; }
.enemy-codex article { text-align:left; }
.enemy-actions { margin-top:11px; padding:10px 12px; border-left:2px solid #8b6746; background:#171419; }
.enemy-actions>b { color:#e0b77f !important; font-size:11px; letter-spacing:.06em; }
.enemy-actions ol { margin:7px 0 0; padding-left:20px; color:#c7beb5; font-size:12px; line-height:1.75; }
.enemy-actions li + li { margin-top:3px; }
@media (max-width:800px) { .reward-option { width:168px; }.reward-option .game-card.compact,.reward-card-info,.reward-pick { width:168px; }.reward-option .game-card.compact { flex-basis:168px; height:316px; }.reward-cards { justify-content:flex-start; overflow-x:auto; padding:0 6px 8px; }.reward-card-info { font-size:10px; } }
.shop-actions { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; }
.shop-actions .choice-button { width:230px; padding:11px 14px; }
.shop-actions .choice-button b { font-size:13px; }
.shop-actions .choice-button span { font-size:10px; }
@media (max-width:800px) { .shop-actions { flex-direction:column; }.shop-actions .choice-button { width:min(100%,260px); } }
@media (max-width:800px) { .enemy-timeline { width:94vw; margin-top:8px; padding:7px; }.enemy-timeline li { grid-template-columns:62px minmax(0,1fr); gap:5px; min-height:20px; padding:3px 5px; font-size:8px; }.timeline-title { margin-bottom:4px; } }
@media (max-height:720px) and (min-width:801px) { .enemy-timeline { margin-top:5px; padding:5px 8px; }.timeline-title { margin-bottom:3px; }.enemy-timeline ol { gap:2px; }.enemy-timeline li { min-height:17px; padding:2px 5px; font-size:8px; } }

/* 开局选择不使用 dialog：本地直接打开 HTML 时也必须先完成难度选择。 */
.opening-screen { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; overflow:auto; padding:24px; background:radial-gradient(circle at 50% 25%,#302027ee 0%,#111018f5 55%,#07070add 100%); color:var(--ink); }
.opening-screen[hidden] { display:none; }
.opening-screen .story-screen { width:min(900px,92vw); max-height:calc(100vh - 48px); overflow:auto; box-sizing:border-box; border:1px solid #55484a; background:linear-gradient(145deg,#211d25,#121116); box-shadow:0 30px 100px #000; }
/* Mobile-first battle layout */
@media (max-width:640px) {
  body { min-width:0; }
  .game-shell { min-height:100dvh; grid-template-rows:auto auto minmax(440px,1fr) 208px; }
  .topbar { height:auto; min-height:60px; display:grid; grid-template-columns:auto 1fr auto; gap:8px 10px; padding:9px 12px; }
  .brand { min-width:0; gap:8px; }.brand-mark { width:30px; height:30px; font-size:13px; }.brand>div { display:block; }.brand strong { font-size:14px; }.brand small { font-size:7px; }
  .run-stats { grid-column:2; justify-content:flex-end; gap:7px; font-size:10px; letter-spacing:0; white-space:nowrap; }.run-stats span:first-child { display:none; }.run-stats b { margin-left:3px; font-size:11px; }
  .header-actions { grid-column:1 / -1; width:100%; justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; gap:3px; padding-bottom:1px; }.header-actions::-webkit-scrollbar { display:none; }
  .header-actions .text-button { flex:0 0 auto; padding:7px 8px; font-size:11px; border:1px solid #302b2e; background:#17151a; }.header-actions .text-button:not(#deck-button) { font-size:11px; }.header-actions #workshop-button::after { content:none; }.header-actions .icon-button { flex:0 0 32px; width:32px; height:32px; }
  .route-strip { height:48px; justify-content:flex-start; overflow-x:auto; padding:0 12px; overscroll-behavior-x:contain; scrollbar-width:none; }.route-strip::-webkit-scrollbar { display:none; }.route-node { flex:0 0 40px; width:40px; }.route-node small { font-size:8px; }.route-line { flex:0 0 15px; width:15px; }
  .battlefield { min-height:440px; }
  .enemy-zone { top:10px; width:100%; padding:0 10px; }.enemy-portrait { width:94px; height:94px; margin-bottom:-3px; }.enemy-glyph { font-size:54px; }.enemy-aura::after { inset:9px; }.unit-info { width:min(100%,300px); }.name-row h1 { font-size:15px; }.enemy-trait { max-width:88vw; margin:1px 0; font-size:10px; }
  .intent-card { position:static; order:-1; align-self:flex-end; margin:0 2px 5px 0; padding:5px 8px; }.intent-card strong { font-size:11px; }.intent-card small { font-size:8px; }
  .enemy-timeline { width:100%; max-width:430px; max-height:128px; margin-top:7px; overflow-y:auto; -webkit-overflow-scrolling:touch; }.enemy-timeline li { grid-template-columns:56px minmax(0,1fr); min-height:19px; padding:3px 5px; font-size:8px; }
  .player-zone { bottom:10px; left:12px; right:12px; align-items:center; gap:8px; }.player-core { min-width:0; gap:9px; }.energy-orb { width:52px; height:52px; box-shadow:0 0 0 3px #1c181e,0 0 18px #d26d3f55; }.energy-orb span { font-size:22px; }.energy-orb small { font-size:7px; }.player-details { width:min(42vw,190px); }.player-details .name-row h2 { font-size:12px; }.player-details .status-row { flex-wrap:wrap; }.health-bar { height:17px; }.turn-actions { margin-left:auto; }.pile-counts { display:none; }.end-turn { min-width:104px; padding:10px 9px; }.end-turn span { font-size:12px; }.end-turn small { font-size:7px; }
  .hand-wrap { overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }.hand { width:max-content; min-width:100%; justify-content:flex-start; padding:12px 14px 18px; gap:10px; scroll-snap-type:x proximity; }.game-card { flex:0 0 118px; min-width:118px; height:178px; scroll-snap-align:center; }.card-art { height:64px; margin-inline:9px; }.card-art span { font-size:46px; }.card-heading { height:39px; padding:8px 6px 0 35px; }.card-heading strong { font-size:11px; }.game-card p { margin:7px 10px 0; min-height:32px; font-size:8px; line-height:1.45; }.card-footer { left:10px; right:10px; bottom:6px; }
  .toast { bottom:220px; max-width:calc(100vw - 32px); text-align:center; }
  .modal { width:100vw; max-width:100vw; max-height:100dvh; margin:0; border-inline:0; }.reward-screen,.camp-screen,.result-screen,.deck-screen { padding:28px 16px 32px; }.modal h2 { font-size:22px; }.muted { font-size:12px; }.camp-actions-three .choice-button,.choice-button { width:min(100%,330px); min-height:54px; }.primary-button,.reward-pick,.icon-button { min-height:44px; }.reward-cards { scroll-padding-inline:8px; }.deck-grid { grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px; }.deck-grid .game-card { justify-self:center; }
  .opening-screen { padding:0; place-items:stretch; }.opening-screen .story-screen { width:100%; min-height:100dvh; max-height:100dvh; border:0; padding:34px 18px calc(30px + env(safe-area-inset-bottom)); }.story-screen h2 { font-size:25px; }.story-lead { font-size:13px; }.difficulty-choice { min-height:64px; }.difficulty-picker>div { gap:9px; }
}
@media (max-width:390px) {
  .brand>div { display:none; }.run-stats { gap:5px; }.header-actions .text-button { padding:6px 7px; font-size:10px; }.battlefield { min-height:420px; }.enemy-timeline { max-height:112px; }.player-details { width:39vw; }.end-turn { min-width:96px; }.game-card { flex-basis:108px; min-width:108px; height:166px; }.card-art { height:57px; }.card-art span { font-size:41px; }.game-card p { font-size:7.5px; }.reward-option { width:154px; }.reward-option .game-card.compact,.reward-card-info,.reward-pick { width:154px; }.reward-option .game-card.compact { flex-basis:154px; height:298px; }
}
@media (hover:none) and (pointer:coarse) {
  .hand .game-card:hover { transform:none; filter:none; }.hand .game-card:active { transform:translateY(-12px) scale(1.02); filter:brightness(1.12); }.text-button:hover,.choice-button:hover,.primary-button:hover,.reward-pick:hover { filter:none; transform:none; }
}