/* Front-facing battle stage. Art slots remain replaceable when final assets arrive. */
.game-shell.screen-battle{width:100%;max-width:none;min-height:100dvh;padding:0;margin:0}
.screen-battle .battle-shell.battle-scene{--hand-height:292px;--hud-height:74px;--card-width:124px;--card-height:208px;--fan-step:clamp(44px,13vw,56px);position:relative;isolation:isolate;display:grid;grid-template-rows:46px minmax(280px,1fr) var(--hand-height) var(--hud-height) 27px;width:min(100%,960px);height:100dvh;min-height:719px;max-width:none;margin:0 auto;overflow:hidden;background:#f4f2e9;background-image:radial-gradient(ellipse at 50% 22%,#ffffff90 0 14%,transparent 58%),radial-gradient(#a7ae8940 .8px,transparent .8px);background-size:auto,8px 8px;box-shadow:0 0 70px #3d472319}
.battle-topbar{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1b1d1f35;padding:0 8px;background:#f4f2e9ba;min-width:0}
.battle-brand{position:absolute;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;white-space:nowrap;display:flex;align-items:center;gap:9px}
.battle-brand>b{font-size:16px;letter-spacing:-.6px;font-weight:1000}.battle-brand>span{font-size:10px;color:#737b60;border-left:1px solid #9ba28a;padding-left:9px}
.battle-top-actions{display:flex;align-items:center;gap:2px}.battle-nav{min-width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;font-weight:850;font-size:12px;padding:0 8px;border-radius:6px}.battle-nav:first-child{font-size:20px}.battle-top-actions .battle-nav:first-child{font-size:11px}.battle-top-actions .battle-nav:last-child{font-size:19px}.battle-nav:hover{background:#e4e9d4}
.screen-battle .enemy-stage.battlefield{position:relative;min-height:0;width:100%;margin:0;overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;display:flex;align-items:center;flex-direction:column;padding:13px 14px 6px;z-index:1}
.battle-round{position:absolute;top:16px;right:15px;font:850 11px ui-monospace,monospace;letter-spacing:.5px;color:#858d72;white-space:nowrap;text-align:right}.battle-round>b{font-size:15px;color:#6b7656;display:inline;line-height:1.2;letter-spacing:0}
.battle-relics{position:absolute;left:9px;top:9px;display:flex;gap:3px;max-width:100px;flex-wrap:wrap;z-index:8}.battle-relic{width:30px;height:30px;display:grid;place-items:center;border:1.5px solid #8e9879;border-radius:50%;background:#edf1dc;box-shadow:1px 2px 0 #b6bea5;font-size:16px;padding:0}.battle-relic:hover{background:var(--lime);border-color:var(--ink)}
.enemy-heading{text-align:center;position:relative;z-index:4;max-width:70%;min-height:45px}.enemy-heading>span{font-size:9px;font-weight:700;color:#7b8567;line-height:1.4;display:block;letter-spacing:.2px}.enemy-heading>h1{font-size:23px;font-weight:1000;line-height:1.35;letter-spacing:-.9px;overflow-wrap:anywhere;margin:3px 0 0;text-shadow:1px 1px 0 #fffdf5}
.screen-battle .enemy-illustration{height:clamp(150px,22dvh,220px);min-height:0;width:100%;margin:3px 0 0;padding:0;display:flex;justify-content:center;align-items:center;position:relative;flex-shrink:0;z-index:2}
.screen-battle .enemy-portrait{height:100%;width:clamp(150px,23dvh,230px);max-width:58%;position:relative;transform-origin:50% 78%;z-index:3}
.screen-battle .enemy-portrait>.face{width:100%;height:100%;object-fit:contain;filter:drop-shadow(2px 3px 0 #1b1d1f);transform:rotate(-3deg)}
.screen-battle .enemy-rays{position:absolute;width:280px;max-width:90%;height:260px;inset:auto;top:50%;left:50%;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,#8b956b26 0deg 2deg,transparent 2deg 21deg);mask-image:radial-gradient(circle,#000 10%,transparent 70%);border-radius:50%;opacity:.75}
.screen-battle .enemy-floor{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:145px;height:18px;z-index:1;background:#727e4f35;filter:blur(3px);border-radius:50%}
.screen-battle .enemy-scribble{position:absolute;left:calc(50% - 137px);top:50%;font-size:15px;font-weight:1000;line-height:1.05;transform:translateY(-25%) rotate(-13deg);color:#9b9870;text-shadow:1px 1px 0 #fffef5;z-index:2}
.screen-battle .enemy-vitals{position:relative;z-index:5;width:218px;max-width:68%;height:35px;min-height:35px;display:flex;align-items:center;justify-content:center;margin:8px 0 0;padding:0 14px 5px;border:0;border-radius:0;background:var(--ink);clip-path:polygon(0 12%,7% 0,93% 0,100% 12%,95% 84%,87% 100%,13% 100%,5% 84%);box-shadow:none}
.enemy-health-text{font-size:12px;font-weight:950;color:#fffdf4;line-height:1;position:relative;z-index:2;margin-top:-4px;text-shadow:0 1px 0 #000}.enemy-health-text small{font-size:10px;font-weight:700;color:#f0e4d4}
.screen-battle .enemy-vitals .health-track{position:absolute;inset:6px 12px 11px;margin:0;height:auto;background:#4c342e;border-radius:1px;overflow:hidden;z-index:0}.screen-battle .enemy-vitals .health-track>i{height:100%;display:block;background:#eb6b50;box-shadow:inset 0 2px 0 #ffc18c60;transition:width .2s ease-out}
.screen-battle .enemy-vitals .shield-badge{position:absolute;z-index:3;right:13px;bottom:6px;display:block;background:#bba3ff;color:var(--ink);font-size:10px;font-weight:950;padding:1px 4px;border:0;border-radius:2px;line-height:1.2}
.screen-battle .intent-banner{position:relative;inset:auto;z-index:4;min-width:0;max-width:calc(100% - 34px);width:auto;display:flex;align-items:center;gap:7px;margin:7px 0 0;padding:4px 8px;background:#f5e8d4;border:1px solid #bdad8c;border-radius:4px;box-shadow:1px 2px 0 #d9c8aa;transform:rotate(-1deg)}
.screen-battle .intent-symbol{font-size:21px;font-weight:1000;color:#aa6234;line-height:1}.screen-battle .intent-banner>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 7px;justify-content:center}.screen-battle .intent-banner small{font-size:9px;color:#8e8063;line-height:1.4}.screen-battle .intent-banner b{font-size:12px;line-height:1.4}.screen-battle .intent-banner div>span{font-size:11px;line-height:1.5;color:#7a684b}.screen-battle .intent-attack{background:#f7e4cc}
.enemy-state-list{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-top:6px;max-width:94%;z-index:4}.enemy-state-list:empty{display:none}.enemy-state-list>span{font-size:10px;background:#e5dfef;border:1px solid #bfb4d0;border-radius:3px;padding:2px 5px;line-height:1.5}
.scene-horizon{position:absolute;left:-10%;bottom:-19px;width:120%;height:86px;background:radial-gradient(ellipse at 50% 0,#c5cfaa36,transparent 66%);border-radius:50%;border-top:1px solid #b9c49d45;z-index:-1;pointer-events:none}
.screen-battle .fx-layer{position:absolute;inset:-20% -15%;pointer-events:none;z-index:40;overflow:visible}
.screen-battle .turn-banner{position:absolute;left:50%;top:65%;z-index:45;transform:translate(-50%,-50%) scale(.9) rotate(-3deg);opacity:0;pointer-events:none;background:#d4ff3f;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:10px 26px 8px;white-space:nowrap;text-align:center;transition:opacity .16s,transform .16s}
.turn-banner>span{font-size:26px;font-weight:1000;letter-spacing:2px;display:block}.turn-banner>small{font-size:10px;font-weight:750;display:block;margin-top:3px;letter-spacing:.5px}.screen-battle .turn-banner.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
.screen-battle .hand-section.battle-hand-zone{position:relative;min-width:0;width:100%;height:var(--hand-height);margin:0;z-index:12;padding:0;overflow:visible;align-self:end}
.hand-hint{position:absolute;left:16px;right:16px;top:6px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#838d6a;z-index:1;pointer-events:none}.hand-hint>b{font-size:10px;letter-spacing:.3px;font-weight:650}.has-selection .hand-hint>span{color:#6d822d;font-weight:850}
.hand-scroll{height:100%;width:100%;position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x}.hand-scroll::-webkit-scrollbar{display:none}
.screen-battle #hand.battle-hand{display:block;position:relative;min-width:100%;width:max(100%,calc(var(--card-width) + (var(--hand-count) - 1)*var(--fan-step) + 24px));height:100%;min-height:0;padding:0;margin:0;gap:0;overflow:visible;scroll-snap-type:none;justify-content:normal;perspective:1100px}
.hand-slots{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0}.hand-slot{position:absolute;top:67px;left:calc(50% + var(--fan-offset)*var(--fan-step));height:calc(var(--card-height) - 5px);width:calc(var(--card-width) - 4px);transform:translateX(-50%) translateY(var(--fan-lift)) rotate(var(--fan-angle));border:1.5px solid #778b4f30;border-radius:9px;background:#cfdbaf0c;display:grid;place-content:center}.hand-slot>i{font-size:22px;color:#a7b78d48;font-style:normal}
/* Standalone selectors keep card faces intact while motion.js lifts a clone into body. */
.playing-card.battle-card{--card-accent:#bba3ff;display:block;position:absolute;top:65px;left:calc(50% + var(--fan-offset)*var(--fan-step));width:var(--card-width,124px);height:var(--card-height,208px);min-height:0;flex:none;padding:0;overflow:visible;background:#fffdf4;border:2px solid var(--ink);border-radius:8px;box-shadow:2px 3px 0 #1b1d1fa6;transform:translateX(-50%) translateY(var(--fan-lift)) rotate(var(--fan-angle));transform-origin:50% 100%;transition:transform .11s cubic-bezier(.2,.8,.25,1),box-shadow .11s,filter .11s;cursor:pointer;backface-visibility:hidden;text-align:left;touch-action:manipulation;scroll-snap-align:none}
.playing-card.battle-card.type-attack{--card-accent:#ffad62}.playing-card.battle-card.type-power{--card-accent:#d4ff3f}
.battle-card>.card-front{display:flex;flex-direction:column;position:relative;width:100%;height:100%;padding:6px;overflow:hidden;border-radius:5px;backface-visibility:hidden;background:#fffdf4}
.battle-card .card-top{display:flex;align-items:center;justify-content:space-between;gap:3px;margin:0 0 3px;min-height:21px;flex-shrink:0}.battle-card .card-cost{width:22px;height:22px;border:1.5px solid var(--ink);border-radius:50%;font-size:13px;line-height:1;font-weight:1000;background:var(--card-accent);display:grid;place-items:center}.battle-card .card-kind{font-size:10px;letter-spacing:0;line-height:1;color:#8a8e77}.battle-card .card-name{display:block;font-size:12px;line-height:1.4;letter-spacing:-.3px;font-weight:1000;min-height:17px;flex-shrink:0;margin:0;overflow-wrap:anywhere}.battle-card .card-name.upgraded{color:#637d24}
.battle-card .card-art{display:grid;place-items:center;position:relative;width:100%;height:65px;min-height:65px;margin:5px 0;border:1.3px solid var(--ink);border-radius:3px;background:var(--card-accent);overflow:hidden;flex-shrink:0}.battle-card .art-stamp{font-size:39px;font-weight:1000;line-height:1;transform:rotate(-14deg)}.battle-card .art-scribble{font-size:9px;padding:2px 3px;right:3px;bottom:4px}.battle-card .art-stars{font-size:14px;left:5px;top:3px}
.battle-card .card-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;flex:1;font-size:11px;font-weight:600;line-height:1.55;letter-spacing:-.25px;color:#292c24;overflow-wrap:anywhere;min-height:0}.battle-card .card-bottom{margin-top:4px;border-top:1px solid #d4d9c1;padding-top:3px;font-size:9px;letter-spacing:0;line-height:1.3;color:#979c84;text-align:center;flex-shrink:0}
.battle-card>.card-back-face{position:absolute;inset:-2px;border:2px solid var(--ink);border-radius:8px;background:#bba3ff;background-image:repeating-linear-gradient(45deg,transparent 0 7px,#1b1d1f0d 7px 9px);display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;backface-visibility:hidden;transform:rotateY(180deg);box-shadow:inset 0 0 0 5px #eee5ff,inset 0 0 0 7px #1b1d1f;pointer-events:none}.card-back-face>span{font-weight:1000;font-size:44px;line-height:1;transform:rotate(-10deg);color:#fffdf4;text-shadow:2px 2px 0 var(--ink),-1px -1px 0 var(--ink)}.card-back-face>i{font-size:25px;font-style:normal;font-weight:1000;line-height:1.2;color:var(--ink);transform:rotate(8deg);margin-top:3px}.card-back-face>small{font-size:9px;color:#5e5074;font-weight:800;margin-top:14px;letter-spacing:1px}
.screen-battle #hand .playing-card.battle-card:hover{transform:translateX(-50%) translateY(calc(var(--fan-lift) - 12px)) rotate(calc(var(--fan-angle)*.4));z-index:30!important;box-shadow:3px 5px 0 var(--ink)}
.screen-battle #hand .playing-card.battle-card.is-selected{transform:translateX(-50%) translateY(-28px) rotate(0deg) scale(1.1);z-index:40!important;box-shadow:0 0 0 3px #d4ff3f,0 0 18px #d4ff3f9c,4px 6px 0 var(--ink);filter:brightness(1.035)}
.screen-battle #hand .battle-card.is-waiting-deal{opacity:0;pointer-events:none}.screen-battle #hand .battle-card.is-drawing{pointer-events:none}.battle-card.is-back-facing>.card-front{transform:rotateY(180deg)}.battle-card.is-back-facing>.card-back-face{transform:rotateY(0deg)}
.screen-battle #hand .empty-hand{position:absolute;left:50%;top:90px;transform:translateX(-50%);font-size:13px;color:#8c9874;line-height:1.8;text-align:center;width:230px;padding:20px 8px;margin:0;border:0;background:transparent;z-index:2}
.selected-card-panel{position:absolute;z-index:60;left:50%;bottom:calc(var(--hand-height) + var(--hud-height) + 3px);transform:translateX(-50%) rotate(-1deg);width:min(calc(100% - 30px),360px);background:#fffdf5;border:2px solid var(--ink);border-radius:9px;padding:10px 12px;box-shadow:4px 5px 0 #1b1d1f;animation:selection-in .16s ease-out both;max-height:230px;overflow-y:auto}
.selection-heading{display:flex;align-items:center;gap:8px;padding-right:24px;min-height:23px}.selection-heading>strong{font-size:15px;font-weight:1000;letter-spacing:-.4px}.selection-heading>span{font-size:10px;color:#788263;white-space:nowrap;margin-left:auto}.selection-close{position:absolute;right:4px;top:2px;width:34px;height:34px;font-size:21px;background:transparent;border:0;font-weight:650;display:grid;place-items:center;padding:0}.selected-card-panel>p{font-size:13px;line-height:1.7;font-weight:650;margin:6px 0 9px;white-space:normal;color:#414635}.selection-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.selection-actions>.button{font-size:12px;min-height:40px;padding:8px 13px;box-shadow:2px 3px 0 var(--ink)}.selection-actions>small{font-size:10px;line-height:1.5;color:#8b937b;flex:1;min-width:100px}
.screen-battle .player-resources{height:var(--hud-height);position:relative;z-index:70;width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#e8ecd8;border-top:2px solid var(--ink);box-shadow:0 -4px 0 #f4f2e9,0 -5px 0 #a2ad856b;min-width:0}
.pile-stack{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;width:42px;height:58px;flex-shrink:0;border:0;background:transparent;padding:0;color:#667150}.pile-stack>small{font-size:9px;font-weight:750;line-height:1.2;display:block;margin-top:3px;white-space:nowrap}.mini-card-back{width:24px;height:32px;border:1.5px solid var(--ink);background:#bba3ff;border-radius:3px;display:grid;place-items:center;transform:rotate(-8deg);box-shadow:2px 2px 0 #1b1d1f,4px 3px 0 #e1d8f5,5px 4px 0 #1b1d1f;background-image:repeating-linear-gradient(45deg,transparent 0 3px,#fff2 3px 4px)}.mini-card-back>i{font-style:normal;color:var(--ink);font-size:13px;font-weight:1000;line-height:1;border:1px solid #1b1d1f66;padding:3px 2px;transform:rotate(5deg)}.pile-count{position:absolute;right:0;top:0;min-width:18px;height:18px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;background:#fffdf4;color:var(--ink);font-size:10px;font-weight:950;line-height:1;padding:0 2px}.discard-symbol{height:31px;width:27px;border:1.5px solid #6c7954;border-radius:3px;background:#dbe2c8;display:grid;place-items:center;font-size:25px;line-height:1;font-weight:900;transform:rotate(7deg)}
.hero-vitals{display:flex;align-items:center;justify-content:space-evenly;gap:10px;flex:1;min-width:0}.hero-health{min-width:70px;flex:1;max-width:150px}.hero-health>span{display:block;font-size:9px;font-weight:750;color:#838d70;line-height:1;margin-bottom:4px}.hero-health>strong{font-size:17px;font-weight:1000;color:#b54f38;line-height:1.1;display:block;white-space:nowrap}.hero-health small{font-size:10px;color:#8f997d;margin-left:2px}.hero-health>i{height:4px;display:block;background:#c4ccb2;overflow:hidden;margin-top:5px;border-radius:2px}.hero-health>i>b{display:block;height:100%;background:#e37952}.hero-shield{display:flex;align-items:center;gap:3px;border:1.5px solid #8f81aa;border-radius:9px 9px 13px 13px;padding:6px 5px;background:#e7dff4;min-width:33px;justify-content:center}.hero-shield>span{font-size:10px;font-weight:750;color:#9480b5}.hero-shield>b{font-size:15px;line-height:1;font-weight:1000}.hero-energy{width:43px;flex-shrink:0;display:grid;justify-items:center;gap:3px}.hero-energy>b{height:35px;width:35px;border:2px solid var(--ink);background:#d4ff3f;box-shadow:1px 2px 0 var(--ink);border-radius:50%;display:flex;align-items:baseline;justify-content:center;padding-top:5px;font-size:17px;font-weight:1000;line-height:1.2;transform:rotate(7deg)}.hero-energy small{font-size:9px}.hero-energy>span{font-size:8px;color:#707f55;font-weight:800;line-height:1}
.screen-battle .player-resources .end-turn{height:50px;min-height:50px;width:64px;flex-shrink:0;font-size:12px;line-height:1.35;padding:5px 7px;border-radius:7px;display:block;text-align:left;white-space:normal;box-shadow:2px 3px 0 #aab68d;background:var(--ink);color:#fffdf5;border:2px solid var(--ink)}.player-resources .end-turn>span{float:right;font-size:19px;line-height:1;margin-top:-14px;color:#d4ff3f}
.battle-logline{font-size:10px;line-height:1.4;min-width:0;background:#e8ecd8;padding:2px 14px 6px;display:flex;align-items:center;justify-content:center;z-index:71}.screen-battle .battle-logline .last-log{font-size:10px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:#7c8965}
@keyframes selection-in{from{opacity:0;transform:translate(-50%,8px) rotate(-1deg)}to{opacity:1;transform:translate(-50%,0) rotate(-1deg)}}
@media(min-width:701px){.screen-battle .battle-shell.battle-scene{--card-width:154px;--card-height:243px;--hand-height:335px;--hud-height:80px;--fan-step:74px;grid-template-rows:52px minmax(305px,1fr) var(--hand-height) var(--hud-height) 28px;min-height:800px;border-left:1px solid #a9b78d66;border-right:1px solid #a9b78d66}.battle-topbar{padding:0 18px}.battle-brand>b{font-size:19px}.battle-brand>span{font-size:11px}.screen-battle .enemy-stage.battlefield{padding-top:16px}.enemy-heading>span{font-size:11px}.enemy-heading>h1{font-size:29px}.screen-battle .enemy-illustration{height:clamp(175px,24dvh,265px);margin-top:6px}.screen-battle .enemy-portrait{width:clamp(175px,25dvh,270px)}.screen-battle .enemy-scribble{font-size:19px;left:calc(50% - 178px)}.screen-battle .enemy-vitals{width:260px;max-width:68%;height:38px;margin-top:10px}.enemy-health-text{font-size:14px}.enemy-health-text small{font-size:12px}.screen-battle .intent-banner{padding:6px 12px;margin-top:9px;gap:9px}.screen-battle .intent-banner small{font-size:10px}.screen-battle .intent-banner b{font-size:14px}.screen-battle .intent-banner div>span{font-size:12px}.battle-round{font-size:12px;right:28px;top:24px}.battle-round>b{font-size:29px}.battle-relics{top:19px;left:20px;max-width:190px;gap:7px}.battle-relic{height:36px;width:36px;font-size:19px}.hand-hint{left:30px;right:30px;top:9px;font-size:11px}.hand-hint>b{font-size:11px}.hand-slot{top:68px}.playing-card.battle-card{top:65px}.battle-card>.card-front{padding:8px}.battle-card .card-cost{height:25px;width:25px;font-size:15px}.battle-card .card-name{font-size:14px;min-height:20px}.battle-card .card-kind{font-size:11px}.battle-card .card-art{height:80px;min-height:80px;margin:7px 0}.battle-card .art-stamp{font-size:49px}.battle-card .card-description{font-size:12px;-webkit-line-clamp:4}.battle-card .card-bottom{font-size:10px}.screen-battle #hand .playing-card.battle-card.is-selected{transform:translateX(-50%) translateY(-30px) rotate(0deg) scale(1.12)}.selected-card-panel{bottom:calc(var(--hand-height) + var(--hud-height) - 4px);width:400px;max-width:calc(100% - 30px);padding:13px 15px}.selection-heading>strong{font-size:17px}.selected-card-panel>p{font-size:14px}.screen-battle .player-resources{padding:10px 29px;gap:25px}.hero-vitals{gap:25px;justify-content:center}.hero-health{flex:none;max-width:200px;width:180px}.hero-health>span{font-size:11px}.hero-health>strong{font-size:22px}.hero-health small{font-size:12px}.hero-shield{min-width:48px;padding:8px}.hero-shield>span{font-size:12px}.hero-shield>b{font-size:20px}.hero-energy{width:54px}.hero-energy>b{height:42px;width:42px;font-size:21px;padding-top:6px}.hero-energy small{font-size:11px}.hero-energy>span{font-size:10px}.pile-stack{height:62px;width:52px}.pile-stack>small{font-size:10px}.mini-card-back{height:37px;width:28px}.mini-card-back>i{font-size:17px}.pile-count{right:1px;top:0;font-size:12px;width:21px;height:21px}.discard-symbol{width:33px;height:36px;font-size:28px}.screen-battle .player-resources .end-turn{width:91px;height:52px;font-size:14px;padding:6px 12px}.battle-logline{padding-bottom:6px}.screen-battle .battle-logline .last-log{font-size:11px}}
@media(max-width:350px){.screen-battle .battle-shell.battle-scene{--card-width:120px;--card-height:207px;--fan-step:44px;--hand-height:286px;--hud-height:72px;grid-template-rows:44px minmax(272px,1fr) var(--hand-height) var(--hud-height) 26px;min-height:700px}.battle-brand{gap:6px;left:43%}.battle-brand>b{font-size:15px}.battle-brand>span{font-size:9px;padding-left:6px}.battle-topbar{padding:0 4px}.battle-nav{padding:0 6px;min-width:40px}.battle-top-actions{gap:0}.enemy-heading{max-width:69%;min-height:43px}.enemy-heading>h1{font-size:21px}.enemy-heading>span{font-size:8px}.battle-round{right:12px;top:15px;font-size:9px}.battle-round>b{font-size:18px}.battle-relics{left:7px;top:7px;max-width:65px;gap:2px}.battle-relic{height:28px;width:28px;font-size:14px}.screen-battle .enemy-illustration{height:clamp(145px,21.5dvh,185px);margin-top:1px}.screen-battle .enemy-portrait{width:clamp(145px,22dvh,190px)}.screen-battle .enemy-scribble{font-size:13px;left:calc(50% - 125px)}.screen-battle .enemy-vitals{width:204px;margin-top:5px}.screen-battle .intent-banner{max-width:calc(100% - 15px);margin-top:5px;padding:4px 6px;gap:5px}.screen-battle .intent-banner div>span{font-size:11px}.screen-battle .intent-banner small{font-size:8px}.screen-battle .intent-banner b{font-size:11px}.screen-battle .intent-symbol{font-size:18px}.enemy-state-list{margin-top:4px;gap:3px}.enemy-state-list>span{font-size:9px;padding:1px 4px}.hand-hint{left:13px;right:13px;font-size:10px}.hand-hint>b{font-size:10px}.battle-card .card-name{font-size:12px;letter-spacing:-.4px}.battle-card .card-art{height:62px;min-height:62px}.battle-card .card-description{font-size:11px}.battle-card .card-bottom{font-size:9px}.screen-battle .player-resources{padding:8px 6px;gap:4px}.hero-vitals{gap:5px}.hero-health{min-width:65px}.hero-health>strong{font-size:16px}.hero-health small{font-size:9px}.hero-shield{min-width:29px;padding:5px 3px;gap:1px}.hero-shield>span{font-size:9px}.hero-shield>b{font-size:14px}.hero-energy{width:35px}.hero-energy>b{width:32px;height:32px;font-size:16px;padding-top:5px}.hero-energy small{font-size:8px}.hero-energy>span{font-size:8px}.pile-stack{width:34px;min-width:34px}.pile-stack>small{font-size:9px}.mini-card-back{width:21px;height:29px}.mini-card-back>i{font-size:12px;padding:3px 1px}.pile-count{right:-1px;top:2px;font-size:9px;min-width:17px;height:17px}.discard-symbol{width:23px;height:28px;font-size:23px}.screen-battle .player-resources .end-turn{width:58px;height:49px;min-height:49px;font-size:11px;padding:5px 6px}.selected-card-panel{width:calc(100% - 24px);padding:9px 10px;bottom:calc(var(--hand-height) + var(--hud-height) - 1px)}.selection-heading>strong{font-size:14px}.selection-heading>span{font-size:10px}.selected-card-panel>p{font-size:12px;line-height:1.7}.selection-actions{gap:9px}.selection-actions>.button{font-size:12px}.selection-actions>small{font-size:10px}.screen-battle .battle-logline .last-log{font-size:9px}}
@media(max-height:760px) and (orientation:portrait){.screen-battle .enemy-stage.battlefield{padding-top:10px}.screen-battle .enemy-illustration{height:clamp(135px,20.5dvh,170px)}.screen-battle .enemy-portrait{width:clamp(135px,21dvh,175px)}.enemy-heading>h1{font-size:21px}.enemy-heading{min-height:42px}.enemy-state-list>span{font-size:9px}.screen-battle .turn-banner{top:59%}}
@media(orientation:landscape) and (max-height:550px){.screen-battle .battle-shell.battle-scene{height:auto;min-height:780px;--card-width:146px;--card-height:230px;--hand-height:315px;--fan-step:68px;grid-template-rows:46px 300px var(--hand-height) 76px 28px}.screen-battle .enemy-illustration{height:168px}.screen-battle .enemy-portrait{width:180px}.enemy-heading>h1{font-size:24px}.enemy-heading{min-height:45px}.screen-battle .intent-banner{margin-top:6px}.screen-battle .enemy-vitals{margin-top:6px}.battle-card .card-art{height:73px;min-height:73px}.battle-card .card-name{font-size:13px}.battle-card .card-description{font-size:11px}.screen-battle .player-resources{padding:8px 22px;gap:20px}.hero-vitals{gap:20px}.hero-health{max-width:170px}.screen-battle .player-resources .end-turn{width:90px}.selected-card-panel{bottom:calc(var(--hand-height) + 72px);width:360px}.scene-horizon{bottom:-10px}}
.screen-battle #hand.battle-hand{width:max(100%,calc(var(--card-width) + (var(--hand-count) - 1)*var(--fan-step) + var(--fan-padding,24px)))}
@media(max-width:350px){.screen-battle .battle-shell.battle-scene{--card-width:116px}.battle-card>.card-front{padding:5px}.battle-card .card-description{font-size:11px}.pile-stack{width:44px;min-width:44px}}
.screen-battle .battlefield>*{flex-shrink:0}
.screen-battle .has-selection .battlefield{z-index:35}
.selected-card-panel{position:relative;inset:auto;left:auto;bottom:auto;top:auto;transform:rotate(-1deg);margin:9px 0 0;flex-shrink:0;width:min(calc(100% - 8px),360px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;max-height:230px;padding:10px 11px;background:#fffdf5;animation:selection-popup .16s ease-out both}
.selection-heading{grid-column:1/-1;padding-right:23px;min-height:22px}.selected-card-panel>p{grid-column:1;grid-row:2;margin:0;font-size:13px;line-height:1.65;align-self:center}.selection-actions{grid-column:2;grid-row:2;align-self:end;display:block}.selection-actions>small{display:none}.selection-actions>.button{min-height:42px;font-size:12px;padding:9px 11px}.selection-heading>strong{font-size:15px}.selection-heading>span{font-size:10px}
@media(max-width:350px){.selected-card-panel{padding:9px 10px;gap:5px 8px}.selected-card-panel>p{font-size:12px;line-height:1.65}.selection-heading>strong{font-size:14px}.selection-actions>.button{font-size:12px;padding:9px 10px}}
@keyframes selection-popup{from{opacity:0;transform:translateY(7px) rotate(-1deg)}to{opacity:1;transform:translateY(0) rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){.battle-scene *,.battle-card,.battle-card *{animation:none!important;transition:none!important}.screen-battle .turn-banner{transform:translate(-50%,-50%) rotate(-3deg)}.screen-battle .turn-banner.is-visible{transform:translate(-50%,-50%) rotate(-3deg)}.selected-card-panel{transform:rotate(-1deg)}}
/* Consumables sit beside the opponent, leaving intent and the bottom HUD clear. */
.battlefield .item-belt.is-compact{position:absolute;right:8px;top:69px;width:43px;z-index:25;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;border-radius:0;padding:0;margin:0;box-shadow:none}
.battlefield .item-belt.is-compact .item-belt-label{display:block;min-width:0;width:100%;margin:0;text-align:center}
.battlefield .item-belt.is-compact .item-belt-label>b{font-size:9px;font-weight:850;line-height:1.5;color:#83916a;text-shadow:0 1px 0 #fffdf5}
.battlefield .item-belt.is-compact .item-belt-label>b>span{display:block;margin:0}
.battlefield .item-belt.is-compact .item-slots{width:100%;display:flex;flex-direction:column;gap:6px;flex:none}
.battlefield .item-belt.is-compact .item-slot{width:40px;height:40px;min-height:40px;display:grid;place-items:center;gap:0;padding:4px;border-radius:8px;background:#fffdf5;box-shadow:1px 2px 0 #abb78e;text-align:center}
.battlefield .item-belt.is-compact .item-slot>span{font-size:21px;line-height:1}.battlefield .item-belt.is-compact .item-slot>small{display:none}
.battlefield .item-belt.is-compact .item-slot.is-empty{background:#e4ebd2a6;box-shadow:none;border-style:dashed;border-color:#a2b387}.battlefield .item-belt.is-compact .item-slot.is-empty>span{font-size:20px;color:#a6b78c}
.screen-battle .battle-relics{max-width:61px;gap:4px}.screen-battle .battle-relic{height:28px;width:28px;font-size:15px}
.screen-battle .enemy-heading{max-width:65%}
.battle-card>.card-front,.battle-card>.card-front *{pointer-events:none;user-select:none;-webkit-user-select:none}
.screen-battle #hand .battle-card.is-drag-source{opacity:.25!important}
.hand-hint>span{font-size:11px;font-weight:750;letter-spacing:0}.hand-hint>b{font-size:10px}
.enemy-drop-area{position:absolute;left:10px;right:10px;top:8px;height:72%;opacity:0;pointer-events:none;border:2px dashed #9dbd4a;border-radius:30%;z-index:0}.enemy-drop-area>span{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);font-size:12px;white-space:nowrap;color:#6b8528}
.is-card-dragging .selection-actions{visibility:hidden}.selection-actions>.button.play-button{background:#edf0e2;box-shadow:1px 2px 0 #a8b58b;font-weight:750}
@media(min-width:701px){.battlefield .item-belt.is-compact{right:24px;top:82px;width:55px;gap:8px}.battlefield .item-belt.is-compact .item-belt-label>b{font-size:11px}.battlefield .item-belt.is-compact .item-slot{width:48px;height:48px;min-height:48px}.battlefield .item-belt.is-compact .item-slot>span{font-size:25px}.battlefield .item-belt.is-compact .item-slots{gap:8px}.screen-battle .battle-relics{max-width:112px;gap:7px}.screen-battle .battle-relic{height:32px;width:32px;font-size:18px}.hand-hint>span{font-size:12px}}
@media(max-width:350px){.battlefield .item-belt.is-compact{right:5px;top:66px;width:39px;gap:5px}.battlefield .item-belt.is-compact .item-belt-label>b{font-size:9px}.battlefield .item-belt.is-compact .item-slot{width:36px;height:37px;min-height:37px;padding:3px}.battlefield .item-belt.is-compact .item-slot>span{font-size:20px}.battlefield .item-belt.is-compact .item-slots{gap:6px}.screen-battle .battle-relics{left:6px;max-width:55px;gap:3px}.screen-battle .battle-relic{height:25px;width:25px;font-size:14px}.hand-hint>span{font-size:10px}.hand-hint>b{font-size:9px}}
@media(max-width:700px){.battlefield .item-belt.is-compact{width:46px;right:6px}.battlefield .item-belt.is-compact .item-slot{height:44px;width:44px;min-height:44px}}
@media(max-width:350px){.battlefield .item-belt.is-compact{width:44px;right:4px}.battlefield .item-belt.is-compact .item-slot{height:44px;width:44px;min-height:44px}}
/* ===== 打击感与场景：纯 CSS，无图片、无血 ===== */

/* 敌人出场：从天而降 + 名字砸下 */
@keyframes enemy-slam{0%{transform:scale(2.4) rotate(-14deg);opacity:0}
  55%{transform:scale(.92) rotate(3deg);opacity:1}
  75%{transform:scale(1.04) rotate(-1deg)}
  100%{transform:scale(1) rotate(0)}}
@keyframes portrait-drop{0%{transform:translateY(-70px) scale(1.15);opacity:0}
  60%{transform:translateY(6px) scale(.98);opacity:1}
  100%{transform:translateY(0) scale(1)}}
.enemy-name{animation:enemy-slam .5s cubic-bezier(.2,1.5,.4,1) both;transform-origin:50% 80%}
#enemy-portrait{animation:portrait-drop .55s cubic-bezier(.2,1.3,.45,1) both}

/* 受击：抖动 + 叠一个「砰!」气泡（黄绿，不涉血） */
@keyframes hit-jolt{0%,100%{transform:translate(0,0) rotate(0)}
  15%{transform:translate(-9px,5px) rotate(-2.4deg)}
  35%{transform:translate(8px,-6px) rotate(2.2deg)}
  55%{transform:translate(-6px,3px) rotate(-1.4deg)}
  75%{transform:translate(4px,-2px) rotate(.8deg)}}
.is-hit{animation:hit-jolt .38s cubic-bezier(.36,.07,.19,.97) both;position:relative}
.is-hit:after{content:'砰!';position:absolute;right:-14px;top:-10px;z-index:6;
  font-size:34px;font-weight:1000;color:#d4ff3f;-webkit-text-stroke:3px #1b1d1f;paint-order:stroke fill;
  transform:rotate(-12deg);text-shadow:4px 4px 0 #1b1d1f;animation:stamp .38s ease-out both;pointer-events:none}
@keyframes stamp{0%{transform:rotate(-12deg) scale(.4);opacity:0}45%{transform:rotate(-12deg) scale(1.18);opacity:1}100%{transform:rotate(-12deg) scale(1);opacity:1}}

/* 敌人血条受击闪一下（亮黄，不是红） */
.is-hit .enemy-bar,.is-hit .hp-bar{filter:brightness(1.5) saturate(1.3)}

/* 事件场景背景：按场景给不同的条纹/圆点底 */
.event-art{position:relative;overflow:hidden;border:3px solid #1b1d1f;background:#fffdf5}
.event-art[data-scene=dorm]{background:repeating-linear-gradient(135deg,#ffe9b8 0 18px,#fff6dd 18px 36px)}
.event-art[data-scene=corridor]{background:repeating-linear-gradient(90deg,#dce9ff 0 22px,#f2f7ff 22px 44px)}
.event-art[data-scene=classroom]{background:repeating-linear-gradient(45deg,#e6ffe9 0 16px,#f5fff6 16px 32px)}
.event-art[data-scene=canteen]{background:repeating-linear-gradient(0deg,#ffe3d6 0 20px,#fff3ec 20px 40px)}
.event-art[data-scene=garden]{background:radial-gradient(#bfe8a8 2px,transparent 2.2px) 0 0/14px 14px,#f4ffe9}
.event-art[data-scene=sports]{background:repeating-linear-gradient(160deg,#d9ecff 0 26px,#eef7ff 26px 52px)}
.event-art[data-scene=computer]{background:repeating-linear-gradient(90deg,#e4e0ff 0 10px,#f4f2ff 10px 20px)}
.event-art[data-scene=library]{background:repeating-linear-gradient(0deg,#f3e6ff 0 26px,#fbf5ff 26px 52px)}
.event-art[data-scene=courier]{background:repeating-linear-gradient(45deg,#ffeeb8 0 12px,#fff9e0 12px 24px)}
.event-art > span{position:relative;z-index:2}
.event-art > i{position:relative;z-index:2}
/* 有照片时：照片打底 + 压暗保证文字可读 */
.event-art.event-photo{background-size:cover;background-position:center}
.event-art.event-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#fffdf5b8 0%,#fffdf530 40%,#1b1d1f66 100%);z-index:1}
/* 每张卡独立的色相 / 倾斜，避免同符号撞脸 */
.card-art{filter:hue-rotate(var(--hue,0deg)) saturate(var(--sat,100%));transform:rotate(var(--tilt,0deg));transition:transform .15s}
.playing-card:hover .card-art{transform:rotate(0) scale(1.02)}
/* 卡面右下角编号：同首字的卡也能区分 */
.card-art:after{content:attr(data-code);position:absolute;right:8px;bottom:6px;font-size:10px;font-weight:900;letter-spacing:1px;opacity:.45}