.unit-move{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:6px;letter-spacing:.35px;color:color-mix(in srgb,var(--accent) 78%,#fff);opacity:.9}.unit-status{position:absolute;z-index:2;top:4px;left:5px;min-width:11px;text-align:center;color:#e9d18c;font-size:8px;filter:drop-shadow(0 1px 4px #000)}.unit.burning .unit-status{color:#ff9873;font-size:10px}.unit.burning{box-shadow:0 0 13px #ed795577}.unit-command{position:absolute;z-index:9;left:50%;top:46px;transform:translate(-50%,-5px);display:flex;align-items:center;gap:9px;max-width:calc(100% - 24px);min-height:43px;padding:5px 8px;border:1px solid #ddca8d69;border-radius:8px;background:linear-gradient(110deg,#111a14ef,#1d281eF5);box-shadow:0 5px 18px #0008,inset 0 1px #fff1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .17s,transform .17s,visibility .17s;backdrop-filter:blur(6px)}.unit-command.visible{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}.command-creature{width:29px;height:29px;flex:none;display:grid;place-items:center;border-radius:50%;font-size:18px;background:radial-gradient(circle at 50% 35%,#d1cc9c48,#62755137 66%,transparent);border:1px solid #ccbd796b}.command-copy{min-width:117px;display:grid;gap:3px}.command-copy strong{font-family:var(--cn);font-size:9px;font-weight:600;color:#eee7d3;white-space:nowrap}.command-copy strong span{color:#d6c488}.command-copy small{font-family:var(--cn);font-size:7px;color:#a9ae9a;white-space:nowrap}.skill-button{height:29px;flex:none;border:1px solid #91b4a169;border-radius:5px;padding:0 9px;background:linear-gradient(120deg,#5a8f7d37,#7ab7a016);color:#d1f0da;font-family:var(--cn);font-size:8px;white-space:nowrap;cursor:pointer;transition:.18s}.skill-button span{margin-left:4px;color:#a8c9be;font-size:7px}.skill-button:hover{border-color:#bee2c2;box-shadow:0 0 12px #85c59c42;background:#79b69328}.skill-button.disabled{opacity:.46;cursor:not-allowed}.combo-ready{display:flex;align-items:center;gap:5px;padding:0 8px;height:25px;border-radius:4px;border:1px solid #ddc77a40;background:#d2b86812;color:#e7d69b;font-family:var(--cn);font-size:7px;white-space:nowrap;animation:combo-glow 2s ease-in-out infinite}.combo-ready>span{font-size:11px}.command-close{align-self:flex-start;flex:none;padding:0;border:0;background:none;color:#8b9380;font-size:15px;line-height:1;cursor:pointer}.combo-notice{position:absolute;z-index:5;top:48%;left:50%;transform:translate(-50%,5px);min-width:225px;display:flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid #dec97772;border-radius:8px;background:linear-gradient(110deg,#23271dde,#27291ade);box-shadow:0 5px 22px #080a0885,0 0 22px #d6b95f19;opacity:0;visibility:hidden;transition:.22s;pointer-events:none}.combo-notice.show{opacity:1;visibility:visible;transform:translate(-50%,0)}.combo-notice-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#d3bb6e20;border:1px solid #e2cf8467;font-size:14px}.combo-notice>span:nth-child(2){display:grid;gap:3px}.combo-notice strong{font-family:var(--cn);font-size:9px;color:#f0dfa4;font-weight:600}.combo-notice small{font-family:var(--cn);font-size:7px;color:#c1baa0}.combo-spark{margin-left:auto;color:#e9d28a;font-size:16px}.guide-combo-line{display:block;margin:5px 0;padding:5px 7px;border-radius:4px;background:#d2bd7010;color:#e4d39b;font-size:10px}.collection-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;max-height:340px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#b5a36c42 transparent}.collection-entry{min-width:0;display:flex;align-items:center;gap:8px;padding:6px 3px;border-bottom:1px solid #d2ca9512}.collection-entry>i{width:28px;height:28px;flex:none;border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent);font-style:normal;font-size:17px}.collection-entry>span{min-width:0;display:grid;gap:3px}.collection-entry b{font-family:var(--cn);font-size:9px;font-weight:600;color:#eee7d2}.collection-entry small{font-family:var(--cn);font-size:7px;color:#a9af99;white-space:nowrap}.collection-entry>em{margin-left:auto;font-style:normal;font-size:7px;color:#cfc397;white-space:nowrap}.enemy-thinking .turn-label #turnHint{color:#edd597}.enemy-thinking .turn-spark{animation:star-turn 3s linear infinite}@keyframes combo-glow{50%{box-shadow:0 0 11px #d9c06b24}}@media(max-width:940px){.unit-command{top:39px;gap:6px;min-height:38px;padding:4px 6px}.command-creature{width:25px;height:25px;font-size:15px}.command-copy{min-width:97px}.command-copy strong{font-size:8px}.command-copy small{font-size:6px}.skill-button{height:26px;padding:0 7px;font-size:7px}.combo-ready{font-size:6px;padding:0 5px}.combo-notice{top:47%;min-width:200px;padding:6px 9px}.unit-move{font-size:5px}}@media(max-width:560px){.unit-command{top:36px;max-width:calc(100% - 12px);gap:5px;min-height:36px}.command-copy{min-width:87px}.command-copy strong{font-size:7px}.command-copy small{max-width:112px;overflow:hidden;text-overflow:ellipsis}.skill-button{height:25px;padding:0 6px;font-size:7px}.skill-button span{font-size:6px;margin-left:2px}.combo-ready{max-width:108px;height:22px;overflow:hidden;font-size:0;gap:3px}.combo-ready>span{font-size:11px;flex:none}.combo-ready:after{content:'合击可用';font-size:6px}.command-close{font-size:12px}.combo-notice{min-width:178px;max-width:calc(100% - 18px);gap:6px;padding:5px 7px}.combo-notice-icon{width:22px;height:22px;font-size:12px}.combo-notice strong{font-size:8px}.combo-notice small{font-size:6px}.collection-grid{grid-template-columns:1fr}.collection-entry{padding:5px 2px}.guide-combo-line{font-size:9px}}

/* Readable action cues, real Kanto artwork, and first-match setup. */
.artwork-frame{overflow:visible!important;isolation:isolate}
.artwork-fallback{position:relative;z-index:1;display:grid;width:100%;height:100%;place-items:center;transition:opacity .18s}
.artwork-frame>img{position:absolute;z-index:2;inset:-18%;width:136%;height:136%;object-fit:contain;opacity:0;pointer-events:none;filter:drop-shadow(0 5px 5px #0009);transition:opacity .18s}
.artwork-frame.has-artwork>.artwork-fallback{opacity:0}
.artwork-frame.has-artwork>img{opacity:1}
.card-creature.artwork-frame>img{inset:-12%;width:124%;height:124%;filter:drop-shadow(0 8px 7px #000a)}
.command-creature.artwork-frame>img{inset:-13%;width:126%;height:126%}
.collection-art{width:32px;height:32px;flex:none;position:relative;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent);font-size:17px}
.collection-art>img{inset:-14%;width:128%;height:128%}
.hand-card.playable{border-color:color-mix(in srgb,var(--accent) 66%,#e9d28a);box-shadow:0 4px 13px #05080696,0 0 10px color-mix(in srgb,var(--accent) 22%,transparent),inset 0 0 0 2px #0d130d65}
.hand-card.playable:hover{box-shadow:0 0 20px color-mix(in srgb,var(--accent) 38%,transparent),0 10px 20px #0009}
.hand-card.playable:focus-visible,.difficulty-option:focus-visible,.subtle-button:focus-visible,.end-turn-button:focus-visible{outline:2px solid #f1dd9a;outline-offset:2px}
.turn-footer-hint{color:#a6a58d;font-family:var(--cn);font-size:8px}
.end-turn-button{height:29px;padding:0 13px;background:linear-gradient(135deg,#d2bb6d42,#ddc27320);font-size:10px}
.end-turn-button.ready-to-end{border-color:#edd78c;background:linear-gradient(135deg,#d9c16b66,#ddc2732f);box-shadow:0 0 14px #d8c06b38;animation:end-turn-glow 1.5s ease-in-out infinite}
@keyframes end-turn-glow{50%{box-shadow:0 0 20px #ead58a63}}
.difficulty-overlay{position:fixed;inset:0;z-index:40;display:none;place-items:center;padding:16px;background:#07100bd9;backdrop-filter:blur(9px)}
.difficulty-overlay.open{display:grid}
.difficulty-dialog{width:min(540px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;padding:26px;background:radial-gradient(ellipse at 50% 0%,#314432,#19241b 56%,#141d17);border:1px solid #d2bd7771;border-radius:14px;box-shadow:0 18px 70px #000c,inset 0 0 0 3px #fff1;color:#eee8d5;text-align:center}
.difficulty-eyebrow{color:#c9b987;font-size:8px;letter-spacing:1.8px}
.difficulty-mark{width:37px;height:37px;margin:13px auto 8px;display:grid;place-items:center;border:1px solid #d7c27d82;border-radius:50%;background:#bba45a16;color:#e5d192;font-size:19px}
.difficulty-dialog h2{margin:5px 0 7px;font-family:var(--cn);font-size:22px;font-weight:600}
.difficulty-intro{margin:0 0 16px;color:#b6b9a7;font-family:var(--cn);font-size:10px}
.difficulty-options{display:grid;gap:7px;text-align:left}
.difficulty-option{width:100%;padding:10px 12px;border:1px solid #d2c58c30;border-radius:7px;background:#101912a8;color:#bfc0aa;font-family:var(--cn);font-size:9px;line-height:1.6;text-align:left;cursor:pointer;transition:.18s}
.difficulty-option:hover{border-color:#d8c47c82;background:#d2bb7010}
.difficulty-option.selected{border-color:#e0cb82;background:linear-gradient(105deg,#c3aa4a20,#a9c59112);box-shadow:inset 3px 0 #dec97d,0 0 13px #d4c27912;color:#e5dfc8}
.difficulty-option-head{display:flex;align-items:center;gap:8px;margin-bottom:3px;color:#f1e8cf}
.difficulty-option-head strong{font-size:11px}
.difficulty-option-head em{padding:1px 6px;border:1px solid #d7c37c45;border-radius:10px;color:#dfcf9a;font-size:7px;font-style:normal}
.first-game-guide{margin-top:13px;padding:12px 14px;border:1px solid #d2bd7730;border-radius:7px;background:#111a14a8;text-align:left}
.first-game-guide>strong{font-family:var(--cn);font-size:10px;color:#e4d39b}
.first-game-guide ol{margin:8px 0 0;padding-left:19px;color:#bfc0aa;font-family:var(--cn);font-size:9px;line-height:1.7}
.first-game-guide li+li{margin-top:4px}
.difficulty-actions{display:flex;gap:9px;margin-top:13px}
.difficulty-actions .modal-primary{flex:1;margin:0}
.result-secondary{height:38px;padding:0 13px;border:1px solid #d2c58c38;border-radius:6px;background:#1019128a;color:#c4bea6;font-family:var(--cn);font-size:9px;cursor:pointer}
.result-secondary:hover{border-color:#ddcb8e;color:#f0e6c7}
.result-card.defeat h2{color:#e6b1a0}
.result-card.defeat .result-star{border-color:#d69a8577;color:#e9ae9b;background:#bd775610}
.result-card .result-secondary{width:100%;margin-top:8px}
@media(max-width:1150px){.turn-footer-hint{font-size:7px}.end-turn-button{height:27px}}
@media(max-width:560px){.difficulty-dialog{padding:20px 16px}.difficulty-dialog h2{font-size:19px}.difficulty-option{padding:9px 10px;font-size:8px}.first-game-guide{padding:10px}.first-game-guide ol{font-size:8px}.turn-footer-hint{display:none}.end-turn-button{height:25px;padding:0 9px}.collection-art{width:29px;height:29px}}
.difficulty-trigger{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.difficulty-trigger span:first-child{font-size:11px;color:#ddc684}
.difficulty-trigger span:last-child{font-size:9px}
.difficulty-trigger:disabled,.subtle-button:disabled{opacity:.42;cursor:wait}
@media(max-width:940px){.difficulty-trigger span:first-child{font-size:13px}.difficulty-trigger span:last-child{font-size:8px}}

/* Action feedback: travelling strikes, impact bursts and floating damage. */
.combat-fx-layer{position:fixed;inset:0;z-index:19;overflow:visible;pointer-events:none;isolation:isolate}
.fx-trail{position:absolute;height:3px;transform-origin:left center;border-radius:99px;background:linear-gradient(90deg,transparent,#d5f5fa,#fff8cc);box-shadow:0 0 8px #8de8ff,0 0 17px #9addff;opacity:0;animation:fx-trail-fire .34s cubic-bezier(.2,.7,.3,1) both}
.fx-trail-attack{height:4px;background:linear-gradient(90deg,transparent,#f3d58c,#fff);box-shadow:0 0 8px #ffe392,0 0 17px #ffe392}
.fx-trail-skill{background:linear-gradient(90deg,transparent,#a9e7ec,#f5fff1);box-shadow:0 0 9px #8be7f4,0 0 18px #7dcdda}
.fx-trail-combo{height:6px;background:linear-gradient(90deg,transparent,#f7c85f,#fff5b2);box-shadow:0 0 12px #ffe47c,0 0 24px #ffc95b}
.fx-trail-counter{height:3px;background:linear-gradient(90deg,transparent,#ebaa97,#fff);box-shadow:0 0 8px #ff9d7d}
.fx-shot{position:absolute;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;color:#fff8da;font-size:19px;text-shadow:0 0 10px #fff;filter:drop-shadow(0 0 8px #d8fbff);animation:fx-shot-flight .4s cubic-bezier(.15,.7,.3,1) both}
.fx-shot-attack{color:#fff0bd;text-shadow:0 0 12px #ffe29c}
.fx-shot-skill{color:#b9f4fa;text-shadow:0 0 13px #8beaff}
.fx-shot-combo{color:#fff3a2;font-size:24px;text-shadow:0 0 16px #ffe663}
.fx-shot-counter{color:#ffc9b6}
.fx-impact{position:absolute;width:35px;height:35px;border:2px solid #f8f4c6;border-radius:50%;background:radial-gradient(circle,#fffde9a8 0 8%,#e0edff67 18%,#fff0 68%);box-shadow:0 0 12px #fff,0 0 24px #9ad9f4;transform:translate(-50%,-50%);animation:fx-impact-pop .46s cubic-bezier(.14,.7,.25,1) both}
.fx-impact-defeat{width:45px;height:45px;border-color:#ffe7a0;background:radial-gradient(circle,#fffbd8dc 0 9%,#ffd57b91 23%,#ff8c6370 46%,#fff0 73%);box-shadow:0 0 20px #fff1b0,0 0 34px #ffb06e}
.fx-spark{position:absolute;left:50%;top:50%;color:#fff5bd;font-size:11px;text-shadow:0 0 8px #fff,0 0 14px #ffdb72;transform:translate(-50%,-50%) rotate(var(--spark-angle)) translateY(-7px);animation:fx-spark-fly .48s cubic-bezier(.1,.75,.2,1) both}
.fx-damage{position:absolute;min-width:50px;text-align:center;color:#fff1bb;font:800 21px/1.1 var(--serif);text-shadow:0 2px 5px #170c08,0 0 12px #ffc17a;transform:translate(-50%,-50%);animation:fx-damage-rise .76s cubic-bezier(.15,.7,.2,1) both}
.fx-damage-combo{color:#fff4a8;font-size:27px;text-shadow:0 2px 5px #321b07,0 0 16px #ffe66d}
.fx-damage-lethal{color:#fff9d7;font-size:30px;text-shadow:0 2px 6px #4b160f,0 0 20px #ffb55e}
.fx-caption{position:absolute;max-width:220px;white-space:nowrap;padding:4px 9px;border:1px solid #e7d58a70;border-radius:20px;background:#172016eF;color:#f5e6b6;font:600 11px/1.2 var(--cn);text-shadow:0 1px 4px #000;transform:translate(-50%,-50%);box-shadow:0 3px 12px #0009;animation:fx-caption-in .7s ease-out both}
.fx-caption-combo{border-color:#ffdc797d;color:#fff1a2;background:linear-gradient(100deg,#392615ed,#1f2416ef);box-shadow:0 0 16px #ffc74750,0 3px 12px #0009}
.fx-caption-summon{border-color:#a8e1c180;color:#d9ffe2;background:#132319ef;box-shadow:0 0 16px #83e5a24d,0 3px 12px #0009}
.fx-combo-banner{position:absolute;min-width:250px;padding:10px 18px;border:1px solid #ffe084a3;border-radius:9px;background:linear-gradient(110deg,#37220deF,#222719f2);color:#fff0a7;font:700 14px/1.3 var(--cn);text-align:center;letter-spacing:.5px;text-shadow:0 2px 7px #000;box-shadow:0 0 26px #ffdc6866,0 8px 24px #0009;transform:translate(-50%,-50%);animation:fx-banner-in 1.12s cubic-bezier(.12,.75,.2,1) both}
.hero-hit-flash{animation:hero-hit-flash .56s ease-out!important;border-color:#ffe7a2!important;box-shadow:0 0 0 4px #ffd98247,0 0 28px #ffcc77c9,inset 0 0 20px #fff4!important}
.unit.impact-hit{animation:impact-shake .42s ease-out}
.unit.attack-lunge{animation:attack-lunge .4s cubic-bezier(.2,.8,.2,1)}
.unit-entrance{animation:unit-enter .48s cubic-bezier(.15,.85,.25,1.1),summon-glow .72s ease-out}
@keyframes fx-trail-fire{0%{opacity:0;scale:0 1}14%{opacity:1;scale:.18 1}65%{opacity:.9;scale:.88 1}100%{opacity:0;scale:1 1}}
@keyframes fx-shot-flight{0%{opacity:0;transform:translate(-50%,-50%) translate3d(0,0,0) scale(.4) rotate(-25deg)}15%{opacity:1}74%{opacity:1;transform:translate(-50%,-50%) translate3d(var(--fx-dx),var(--fx-dy),0) scale(1.16) rotate(16deg)}100%{opacity:0;transform:translate(-50%,-50%) translate3d(var(--fx-dx),var(--fx-dy),0) scale(.45) rotate(34deg)}}
@keyframes fx-impact-pop{0%{opacity:0;scale:.15}22%{opacity:1;scale:1.16}100%{opacity:0;scale:1.85}}
@keyframes fx-spark-fly{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--spark-angle)) translateY(-7px) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--spark-angle)) translateY(-29px) scale(.1)}}
@keyframes fx-damage-rise{0%{opacity:0;transform:translate(-50%,-20%) scale(.58)}18%{opacity:1;transform:translate(-50%,-60%) scale(1.18)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-125%) scale(.94)}}
@keyframes fx-caption-in{0%,12%{opacity:0;transform:translate(-50%,-30%) scale(.8)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:0;transform:translate(-50%,-78%) scale(.96)}}
@keyframes fx-banner-in{0%{opacity:0;filter:blur(4px);scale:.8}18%{opacity:1;filter:none;scale:1.04}70%{opacity:1}100%{opacity:0;scale:1.08;translate:0 -18px}}
@keyframes impact-shake{20%{transform:translateX(-5px) rotate(-2deg);filter:brightness(1.6)}42%{transform:translateX(5px) rotate(2deg)}66%{transform:translateX(-3px)}100%{transform:translateX(0);filter:brightness(1)}}
@keyframes hero-hit-flash{0%{filter:brightness(1)}24%{filter:brightness(1.8) saturate(1.5)}100%{filter:brightness(1)}}
@keyframes summon-glow{0%{filter:brightness(1.8);box-shadow:0 0 30px #d5ffe2}100%{filter:brightness(1);}}
@media(prefers-reduced-motion:reduce){.fx-trail,.fx-shot,.fx-impact,.fx-spark,.fx-damage,.fx-caption,.fx-combo-banner,.unit.attack-lunge,.unit.impact-hit,.unit-entrance,.hero-hit-flash{animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media(max-width:560px){.fx-caption{font-size:9px;max-width:160px;padding:3px 7px}.fx-combo-banner{min-width:205px;padding:8px 10px;font-size:11px}.fx-damage{font-size:18px}.fx-damage-combo{font-size:23px}}
.hand-card .card-content{gap:1px}
.hand-card .card-type{margin-top:1px;letter-spacing:.1px;font-size:6.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hand-card{flex-basis:clamp(105px,12.2%,140px)}
.hand-card .card-art{bottom:38%}
.hand-card:after{background:linear-gradient(180deg,transparent 24%,#10171065 45%,#0d130ef5 72%)}
.card-ability{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:3px;margin-top:2px;color:#d6f0d8;font-family:var(--cn);font-size:8px;line-height:1.2;text-shadow:0 1px 4px #000}
.card-ability b{font-weight:700;color:#d9f2d0;white-space:nowrap}
.card-ability i{min-width:0;overflow:hidden;color:#ddce98;font-size:7px;font-style:normal;white-space:nowrap;text-overflow:ellipsis}
.card-stats span{display:flex;align-items:center;gap:2px}
.card-stats b{font-size:11px;line-height:1}
.card-stats small{font-family:var(--cn);font-size:6px;color:#d6d3b9;font-weight:500}
@media(max-width:560px){.hand-card{flex-basis:100px}.card-ability{font-size:7px}.card-ability i{font-size:6px}.card-stats b{font-size:10px}}