@import "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&display=swap";:root{--paper:#f5f0e8;--ink:#1b1b1b;--cinnabar:#c23a30;--gold:#d4af37;--gold-light:#f4e4c1;--jade:#317873;--jade-light:#5da4a6;--wood:#8b2500;--shadow:#1b1b1b1f;--shadow-heavy:#1b1b1b59}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--paper);width:100%;height:100%;color:var(--ink);font-family:Noto Serif SC,STSong,SimSun,serif;overflow:hidden}.card{cursor:pointer;-webkit-user-select:none;user-select:none;border:2px solid var(--gold);width:200px;height:300px;box-shadow:0 8px 22px var(--shadow-heavy), inset 0 0 0 1px #ffffff14;border-radius:14px;flex-direction:column;transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;display:flex;position:relative;overflow:hidden}.card:hover{box-shadow:0 12px 26px var(--shadow-heavy);z-index:20;transform:translateY(-5px)}.card.selected{z-index:30;animation:1.2s ease-in-out infinite cardPulse;transform:translateY(-10px)scale(1.04);box-shadow:0 0 0 3px #ffe89a,0 0 0 6px #d4af378c,0 0 28px #ffe89ab3,0 14px 32px #d4af3766}@keyframes cardPulse{0%,to{box-shadow:0 0 0 3px #ffe89a,0 0 0 6px #d4af378c,0 0 22px #ffe89a80,0 14px 32px #d4af3766}50%{box-shadow:0 0 0 3px #fff,0 0 0 8px #d4af37b3,0 0 38px #ffe89ae6,0 16px 40px #d4af3799}}.card-header{color:var(--gold-light);border-bottom:1.5px solid var(--gold);z-index:2;background:linear-gradient(135deg,#1b1b1bfa,#1b1b1bd9);justify-content:space-between;align-items:center;padding:6px 10px;font-size:13px;font-weight:700;display:flex}.card-cost{background:linear-gradient(135deg, var(--jade-light), var(--jade));color:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:15px;font-weight:900;display:flex;box-shadow:0 0 10px #5da4a68c,inset 0 1px 2px #ffffff4d}.card-art{flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.card-art-img{object-fit:cover;object-position:center 22%;z-index:0;width:100%;height:100%;animation:.6s both portraitIn;position:absolute;inset:0}.card-lock-overlay{z-index:5;color:#ffffffe6;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#000000b3;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex;position:absolute;inset:0}.card-lock-icon{opacity:.7;filter:drop-shadow(0 0 6px #0009);font-size:30px}.card-lock-text{letter-spacing:2px;color:#ffa07a;text-shadow:0 1px 2px #0009;font-size:11px;font-weight:700}.zone-empty{z-index:2;color:#fff6;letter-spacing:4px;justify-content:center;align-items:center;width:100%;min-height:90px;font-size:12px;font-style:italic;display:flex;position:relative}.zone-empty-player{color:#d4af37b3;letter-spacing:6px;font-size:13px;font-weight:600}.zone-blocked{cursor:not-allowed;opacity:.55}.zone-player{position:relative}.zone-player:before{content:"";border:1.5px solid var(--loc-accent,#d4af37);opacity:.35;pointer-events:none;z-index:0;border-radius:6px;position:absolute;inset:6px}.zone-player:after{content:"";border:.5px solid var(--loc-accent,#d4af37);opacity:.18;pointer-events:none;z-index:0;border-radius:5px;position:absolute;inset:9px}.zone-corner{border:2px solid var(--loc-accent,#d4af37);opacity:.8;pointer-events:none;z-index:1;width:18px;height:18px;transition:opacity .2s;position:absolute}.zone-corner-tl{border-bottom:none;border-right:none;border-top-left-radius:6px;top:2px;left:2px}.zone-corner-tr{border-bottom:none;border-left:none;border-top-right-radius:6px;top:2px;right:2px}.zone-corner-bl{border-top:none;border-right:none;border-bottom-left-radius:6px;bottom:2px;left:2px}.zone-corner-br{border-top:none;border-left:none;border-bottom-right-radius:6px;bottom:2px;right:2px}.zone-player:hover .zone-corner{opacity:1}.zone-prohibition{pointer-events:none;z-index:0;background:repeating-linear-gradient(45deg,#0000 0 10px,#c23a301a 10px 11px),linear-gradient(#c23a300a,#c23a3014);border:1px dashed #c23a3059;border-radius:6px;position:absolute;inset:0}.zone-opponent:after{content:"禁";color:#fff8e7;z-index:1;background:#c23a30d9;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:12px;font-weight:700;line-height:1;display:flex;position:absolute;top:6px;right:8px;box-shadow:0 0 4px #c23a3066}.location-divider{z-index:2;text-align:center;color:#ffffff73;letter-spacing:4px;background:linear-gradient(90deg,#0000,#0003,#0000);margin:2px 0;padding:2px 0;font-size:11px;position:relative}.hand-cards{flex-wrap:wrap;justify-content:center;align-items:flex-end;min-height:260px;padding:24px 16px 12px;display:flex;position:relative;overflow:visible}.hand-card-wrap{transform-origin:50% 100%;cursor:pointer;z-index:1;filter:drop-shadow(0 4px 8px #0000004d);flex:none;margin:0 -14px;transition:transform .28s cubic-bezier(.34,1.56,.64,1),z-index 0s linear .1s;position:relative}.hand-card-wrap:hover{transition-delay:0s;z-index:50!important;transform:translateY(-30px)scale(1.1)!important}.hand-card-wrap.hand-wrap-selected{z-index:40}@keyframes portraitIn{0%{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}.card-art-bg{z-index:0;position:absolute;inset:0}.card-art-bg svg{width:100%;height:100%;display:block}.card-art-img:after{content:"";pointer-events:none;background:linear-gradient(#0000 30%,#00000040 70%,#0000008c 100%);position:absolute;inset:0}.card-art-overlay{z-index:1;background:linear-gradient(#1b1b1b59 0%,#0000 40% 60%,#1b1b1b66 100%);flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.card-art-symbol{filter:drop-shadow(0 2px 6px #0000004d);opacity:.92;font-size:58px;line-height:1}.card-art-quote{text-align:center;color:#f4e4c1d9;text-shadow:0 1px 4px #00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#1b1b1b73;border-radius:4px;padding:3px 4px;font-size:12px;font-style:italic;line-height:1.3;position:absolute;bottom:6px;left:6px;right:6px}.card-body{border-top:1.5px solid var(--gold);z-index:2;background:linear-gradient(#1b1b1bfa,#1b1b1be6);flex-direction:column;gap:5px;padding:6px 10px 7px;display:flex}.card-title{color:var(--gold-light);text-align:left;letter-spacing:2px;text-shadow:0 1px 4px #00000080;font-size:19px;font-weight:900;line-height:1.1}.card-desc{color:#ddd;text-align:left;font-size:11px;line-height:1.3}.card-keywords{flex-wrap:wrap;justify-content:flex-start;gap:3px;display:flex}.card-keyword-tag,.kw{color:var(--gold);background:#1b1b1b80;border:1px solid #d4af3766;border-radius:3px;padding:0 5px;font-size:10px;line-height:1.4}.card-footer{z-index:2;background:linear-gradient(90deg,#000000b3,#00000080);border-top:1px solid #d4af374d;justify-content:space-between;align-items:center;min-height:26px;padding:4px 10px;font-size:13px;display:flex}.card-power{color:var(--gold);text-shadow:0 0 6px #d4af3766;font-size:22px;font-weight:900}.card-faction-icon{color:var(--gold-light);font-size:12px;font-weight:700}.card-faction-shanhaijing{background:linear-gradient(#2a0e00 0%,#1b1b1b 100%)}.card-faction-wulin{background:linear-gradient(#071821 0%,#1b1b1b 100%)}.rarity-COMMON{border-color:#a0a0a0}.rarity-RARE{border-color:#4a90d9;box-shadow:0 0 12px #4a90d940}.rarity-EPIC{border-color:#9b59b6;box-shadow:0 0 14px #9b59b64d}.rarity-LEGENDARY{border-color:#d4af37;box-shadow:0 0 18px #d4af3773}.location{border:2px solid var(--gold);background:linear-gradient(180deg, #fdf8ef 0%, var(--paper) 100%);min-width:260px;max-width:380px;box-shadow:0 6px 18px var(--shadow-heavy), inset 0 0 0 1px #fff9;border-radius:12px;flex-direction:column;flex:280px;transition:transform .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.location:hover{box-shadow:0 10px 26px var(--shadow-heavy), inset 0 0 0 1px #fff9;transform:translateY(-2px)}.location-header{background:linear-gradient(90deg, var(--wood), #5c1a00);color:var(--gold-light);border-bottom:2px solid var(--gold);border-radius:10px 10px 0 0;align-items:center;gap:10px;padding:10px 14px;font-weight:700;display:flex}.location-icon{filter:drop-shadow(0 1px 2px #0000004d);font-size:24px}.location-name{letter-spacing:3px;font-size:20px}.location-effect{color:#f4e4c1d9;padding-top:2px;font-size:13px;font-weight:400}.location-board{flex-direction:column;flex:1;gap:8px;padding:10px;display:flex;position:relative}.location-zone{border-radius:8px;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:6px;min-height:110px;padding:8px;transition:background .2s;display:flex}.zone-player{border:1.5px dashed var(--jade);background:#31787312}.zone-opponent{border:1.5px dashed var(--cinnabar);background:#c23a3012}.zone-neutral{border:1px dashed var(--gold);minHeight:36;background:#d4af370f;justify-content:center;align-items:center;display:flex}.location-total{background:linear-gradient(#0000,#8b25000a);border-top:1.5px solid #8b25002e;justify-content:space-around;align-items:center;padding:8px 0;font-size:16px;font-weight:900;display:flex}.total-player{color:var(--jade);font-size:18px}.total-opponent{color:var(--cinnabar);font-size:18px}.total-winner{text-shadow:0 0 12px;transform:scale(1.15)}.game-board{background:radial-gradient(at 30% 10%,#d4af3714 0%,#0000 55%),radial-gradient(at 70% 90%,#3178730f 0%,#0000 55%),linear-gradient(#fdfcf8,#f2ebde);flex-direction:column;width:100%;height:100%;display:flex;position:relative}.game-header{background:linear-gradient(90deg, var(--wood), #3a1a00);color:var(--gold-light);box-shadow:0 2px 12px var(--shadow-heavy);z-index:5;border-bottom:2px solid var(--gold);justify-content:space-between;align-items:center;padding:12px 24px;display:flex}.game-turn{letter-spacing:4px;text-shadow:0 1px 6px #0000004d;font-size:22px;font-weight:900}.game-energy{align-items:center;gap:9px;font-size:16px;display:flex}.energy-gem{background:radial-gradient(circle at 35% 35%, var(--jade-light), var(--jade));border-radius:50%;width:30px;height:30px;transition:all .25s;box-shadow:0 0 8px #5da4a68c,inset 0 1px 2px #ffffff59}.energy-gem.spent{background:#555;transform:scale(.82);box-shadow:inset 0 1px 4px #0006}.game-locations{flex-wrap:wrap;flex:1;justify-content:center;align-items:stretch;gap:16px;min-height:0;padding:20px;display:flex;overflow:visible}.game-hand-area{border-top:2px solid var(--gold);box-shadow:0 -4px 16px var(--shadow-heavy);background:linear-gradient(#1b1b1bd1,#1b1b1bf2);flex-direction:column;align-items:center;gap:6px;padding:10px 24px 12px;display:flex}.hand-label{color:var(--gold);letter-spacing:3px;text-shadow:0 1px 4px #0000004d;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;padding-top:4px;font-size:13px;display:flex}.skip-btn{color:#1b1b1b;border:1.5px solid var(--gold);cursor:pointer;letter-spacing:2px;box-shadow:0 2px 8px var(--shadow-heavy);background:linear-gradient(135deg,#d4af37f2,#8b2500f2);border-radius:6px;margin-left:12px;padding:4px 14px;font-family:inherit;font-size:13px;font-weight:700;transition:all .2s}.skip-btn:hover:not(:disabled){color:#fff;background:linear-gradient(135deg,#d4af37,#8b2500);transform:translateY(-1px)}.skip-btn:disabled{opacity:.4;cursor:not-allowed}.hand-cards{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:100vw;padding-bottom:2px;display:flex;overflow:visible}.main-menu{background:radial-gradient(ellipse at 20% 20%, #d4af371f 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, #3178731a 0%, transparent 50%), linear-gradient(180deg, var(--paper), #ede6d8);flex-direction:column;justify-content:center;align-items:center;gap:32px;width:100%;height:100%;padding:40px;display:flex}.menu-title{color:var(--wood);text-shadow:0 2px 0 var(--gold), 0 8px 24px var(--shadow-heavy);letter-spacing:14px;font-size:68px;font-weight:900}.menu-subtitle{color:var(--wood);opacity:.6;letter-spacing:5px;margin-top:-12px;font-size:20px;font-weight:400}.menu-btn{border:2.5px solid var(--gold);background:linear-gradient(135deg, var(--wood), #5c1a00);color:var(--gold-light);cursor:pointer;letter-spacing:5px;box-shadow:0 6px 18px var(--shadow-heavy), inset 0 1px 2px #ffffff26;border-radius:10px;padding:16px 52px;font-family:inherit;font-size:22px;font-weight:700;transition:all .25s}.menu-btn:hover{background:linear-gradient(135deg, #a03000, var(--wood));box-shadow:0 10px 30px var(--shadow-heavy);transform:translateY(-3px)}.how-to-play{background:linear-gradient(#fdfcf8,#f5f0e8);width:100%;height:100%;padding:32px 24px;overflow-y:auto}.rule-section{border:2px solid var(--gold);max-width:900px;box-shadow:0 6px 18px var(--shadow);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#ffffffb3;border-radius:12px;margin:0 auto 28px;padding:22px 26px}.rule-section h2{color:var(--wood);border-bottom:2px solid var(--gold);letter-spacing:3px;margin-bottom:14px;padding-bottom:10px;font-size:24px;font-weight:900}.rule-section p,.rule-section li{color:var(--ink);font-size:15.5px;line-height:1.75}.rule-section ul{margin-top:10px;padding-left:22px}.rule-section li{margin-bottom:7px}.stat-table{border-collapse:collapse;width:100%;margin-top:12px;font-size:14px}.stat-table th,.stat-table td{border:1px solid var(--gold);text-align:center;padding:9px 14px}.stat-table th{background:var(--wood);color:var(--gold-light);font-weight:700}.stat-table tr:nth-child(2n){background:#d4af3714}@keyframes appearIn{0%{opacity:0;transform:translateY(24px)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}.animate-appear{animation:.55s cubic-bezier(.22,1,.36,1) forwards appearIn}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.float-anim{animation:3.5s ease-in-out infinite float}@keyframes pulseGlow{0%,to{box-shadow:0 0 12px #d4af3726}50%{box-shadow:0 0 22px #d4af3759}}.pulse-glow{animation:2.5s ease-in-out infinite pulseGlow}@media (width<=1000px){.game-locations{flex-wrap:wrap;justify-content:center;gap:12px;padding:14px}.location{flex:260px;min-width:260px;max-width:100%}.card{width:140px;height:210px}.menu-title{letter-spacing:8px;font-size:42px}.menu-subtitle{letter-spacing:3px;font-size:14px}}
