/* Reference-inspired battle skin. All game actions and dungeon art stay live. */
body.battle-mode #app.combat-app{max-width:700px;margin:0 auto;grid-template-rows:100px minmax(0,1fr);padding:env(safe-area-inset-top) 8px env(safe-area-inset-bottom);box-sizing:border-box}
#app.combat-app .combat-hud{display:flex;align-items:flex-start;gap:8px;padding:12px 8px 0;background:linear-gradient(110deg,#031621ad,transparent);overflow:visible}
.combat-hud .frodia-vitals{flex:1;min-width:0;width:auto;max-width:420px}
.combat-hud .slant-health{height:43px;margin:0 6px 0 0;transform:skew(-12deg);background:#041926ae;border:1px solid #6ea9bc;box-shadow:inset 0 0 0 2px #082230;isolation:isolate;padding-right:45px}
.combat-hud .slant-health>b{transform:skew(12deg);font-size:12px;line-height:30px;gap:5px;padding:0 8px}
.combat-hud .slant-health strong{font-size:27px}.combat-hud .slant-health small{font-size:13px}
.combat-hud .slant-health>.bar{position:absolute;inset:auto 5px 4px;height:5px;width:auto;background:#041421;z-index:0;border:0}
.combat-hud .slant-health>.bar i{background:linear-gradient(90deg,#44bfb1,#b5f7b6);box-shadow:0 0 6px #7ae5bd}
.combat-hud .player-shield{right:4px;top:2px;height:29px;width:42px;font-size:17px;background:transparent;border:0}
.combat-hud .player-shield svg{width:17px}.combat-hud .tp-stars{margin-top:7px;gap:6px;flex-wrap:wrap}.combat-hud .tp-stars>span{gap:7px}.combat-hud .tp-star{width:17px;height:20px}
.battle-location{color:#f8edcd;text-shadow:0 2px 4px #00121c;font-size:12px;letter-spacing:.08em;max-width:105px;padding-top:14px;text-align:right}.battle-location small{display:block;font:10px Cinzel,serif;margin-top:4px;letter-spacing:.2em}
.combat-hud .battle-menu{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;flex:none;transform:none;width:43px;height:85px;margin:-12px 0 0;padding:7px 2px;background:linear-gradient(135deg,#031727,#102b3b);border:1px solid #c5ab75;border-radius:0;box-shadow:inset 0 0 0 3px #091b29;clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);color:#fff1cd}
.combat-hud .battle-menu>span{transform:none;font-size:20px;line-height:20px}.battle-menu strong{font:29px/30px Cinzel,serif}.battle-menu small{font:9px Cinzel,serif}
body.battle-mode .pocket-battle,body.battle-mode .pocket-battle.core-battle{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(235px,38%) 78px;gap:3px;padding:0;min-height:0;overflow:hidden}
.pocket-battle .battle-stage{grid-column:1;grid-row:1;min-height:0;overflow:visible}
.pocket-battle .enemies{height:100%;padding:20px 3px 0;gap:10px;align-items:stretch}
.pocket-battle .enemy,.pocket-battle .enemy.forest-core{grid-template-rows:28px 22px 5px minmax(30px,auto) minmax(0,1fr) minmax(23px,auto);gap:2px;background:none;border:0;box-shadow:none;min-height:0;padding:0}
.pocket-battle .enemy.selected{background:none;box-shadow:none}
.pocket-battle .enemy h2{padding:3px 8px;font-size:13px;line-height:19px;letter-spacing:.04em;background:linear-gradient(110deg,#081c28f5,#03131de0);border-top:1px solid #c0a570;border-left:2px solid #d6bb7c;clip-path:polygon(7% 0,92% 0,100% 100%,0 100%)}
.pocket-battle .enemy .enemy-hp{padding:1px 7px;font-size:12px;background:linear-gradient(90deg,#041722df,#061c29a6);border-right:1px solid #8cb6c6}
.pocket-battle .enemy .enemy-hp>[data-hp-number]{font-size:16px}.pocket-battle .enemy>.enemybar{height:5px;min-height:5px;border:0;background:#122d39}.pocket-battle .enemy>.enemybar>i{background:linear-gradient(90deg,#b52143,#ff5d70)}
.pocket-battle .enemy .intent,.pocket-battle .enemy.forest-core .intent{flex-flow:row nowrap;gap:5px;padding:3px 5px;background:linear-gradient(90deg,#071a28dc,#102d398a);border-left:2px solid #e8c77d;align-items:baseline}
.pocket-battle .enemy .intent .count,.pocket-battle .enemy .intent .count b{font-size:12px;line-height:17px;flex:none}.pocket-battle .enemy .intent>span:last-child{font-size:11px;line-height:16px;overflow-wrap:anywhere}
.pocket-battle .enemy .enemy-art{overflow:visible;min-height:0}.pocket-battle .enemy.selected .enemy-art{filter:drop-shadow(0 0 6px #ccecff40)}
.pocket-battle .hand-rack{grid-column:1;grid-row:2;display:flex;gap:8px;padding:9px 3px 6px;height:100%;min-height:0;box-sizing:border-box;align-items:stretch;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.pocket-battle .hand-rack .card{--type-edge:#b4c5d0;flex:0 0 calc((100% - 16px)/3);width:calc((100% - 16px)/3);height:100%;min-height:0;max-width:none;margin:0;padding:3px;display:flex;flex-direction:column;border:1px solid var(--type-edge);border-radius:6px;background:linear-gradient(130deg,#e8cf89 0%,var(--type-edge) 3%,#041923 5%,#04121e 93%,var(--type-edge) 97%,#e8cf89);box-shadow:inset 0 0 0 1px #d0b979,0 3px 8px #0009;transform:none}
.pocket-battle .hand-rack .card.Offense{--type-edge:#f16e6a}.pocket-battle .hand-rack .card.Defense{--type-edge:#7dd5ff}.pocket-battle .hand-rack .card.Nexus{--type-edge:#a5d686}
.pocket-battle .hand-rack .card.armed{box-shadow:0 0 0 2px var(--type-edge),0 0 16px var(--type-edge);border-color:#fff2bb;transform:none}
.pocket-battle .hand-rack .cardhead{flex:none;min-height:34px;height:34px;gap:3px;padding:0 2px;background:#031824;border-bottom:1px solid var(--type-edge)}
.pocket-battle .hand-rack .cardhead .card-type{color:var(--type-edge);font-size:clamp(8px,2.2vw,13px);letter-spacing:0}.pocket-battle .hand-rack .cardhead .card-rank{font-size:9px;line-height:12px}
.pocket-battle .hand-rack .cost{width:28px;height:28px;line-height:25px;font-size:23px;border:1px solid #e9d498;background:radial-gradient(circle at 30% 20%,#63b8d3,#083954 55%,#02101c);box-shadow:0 0 0 1px #8ba5b0}
.pocket-battle .hand-rack .card-art{flex:0 0 27%;height:auto;min-height:0;margin:2px 0 0;width:100%;border:1px solid var(--type-edge);box-sizing:border-box}
.pocket-battle .hand-rack .cardbody{flex:1;min-height:0;margin:0;padding:0 4px 4px;border:1px solid var(--type-edge);background:linear-gradient(110deg,#efe5cd,#fff9ed);overflow-y:auto}
.pocket-battle .hand-rack .cardbody h3{font-size:clamp(12px,3.4vw,18px);line-height:1.3;margin:0 -4px 5px;padding:5px 1px;background:#041924;border-bottom:1px solid var(--type-edge);color:#fff3d9}
.pocket-battle .hand-rack .cardbody p{font-size:clamp(11px,2.9vw,15px);line-height:1.5;margin:0}
.pocket-battle .hand-rack .cardslots{flex:none;min-height:42px;margin:0;padding:3px 1px;gap:3px;background:#041720;border-top:1px solid var(--type-edge)}
.pocket-battle .hand-rack .cardslots small{display:block;width:100%;font-size:10px;line-height:13px;white-space:normal;overflow:visible;overflow-wrap:anywhere;color:#f7e6bd}.pocket-battle .hand-rack .cardslots .module-orb{width:11px;height:11px}
.pocket-battle .combat-actions{grid-column:1;grid-row:3;grid-template-columns:1.25fr .6fr 1fr;padding:3px 8px;gap:10px}
.pocket-battle .combat-actions .use-card{height:52px;border-radius:3px;border:1px solid #9bdded;background:linear-gradient(135deg,#153344eb,#031420f0);font:17px Cinzel,serif;box-shadow:inset 0 0 0 3px #0c2835;color:#f3e8ce}
.pocket-battle .combat-actions .nexus-peek{width:46px;height:46px;font-size:11px}.pocket-battle .combat-actions .endturn{width:74px;height:74px;border-radius:50%;border:2px solid #b0f5ff;background:radial-gradient(circle,#073342 35%,#027c97 67%,#072a3e 70%);box-shadow:0 0 0 3px #0d3347,0 0 0 4px #8fd7e8,inset 0 0 15px #56e1ff;font:italic 20px/1.05 Cinzel,serif}
#app.core-combat{--core-hud-height:100px}
@media(max-width:360px){.battle-location{max-width:72px;font-size:10px}.pocket-battle .enemies{gap:5px}.pocket-battle .enemy h2{font-size:11px}.pocket-battle .enemy .intent{gap:2px;padding:2px}.pocket-battle .enemy .intent .count{font-size:10px}}
@media(max-height:620px){body.battle-mode #app.combat-app{grid-template-rows:85px minmax(0,1fr)}body.battle-mode .pocket-battle,body.battle-mode .pocket-battle.core-battle{grid-template-rows:minmax(0,1fr) minmax(180px,43%) 64px}.pocket-battle .enemies{padding-top:2px}.pocket-battle .combat-actions .endturn{height:58px;width:58px;font-size:17px}.pocket-battle .hand-rack .card-art{flex-basis:22%}#app.core-combat{--core-hud-height:85px}}

.sleep-instruction{position:absolute;left:5%;right:5%;bottom:6px;text-align:center;color:#fff;background:#17122ce6;border:1px solid #b8a2ef;padding:8px 12px;border-radius:6px;font-size:14px;pointer-events:none;z-index:12}.combat-number.evade{color:#bdf7ff;font-size:24px}.status.sleep,.status.illusion{background:#483b69;color:#f4e9ff}.status.evasion{background:#275464;color:#d8fcff}

.pocket-battle .enemies.wide-encounter{display:flex}.pocket-battle .wide-encounter .enemy{flex:var(--enemy-slots,1);max-width:none}

/* Compare displayed costs with the card's original cost. */
.card .cost.cost-higher{color:#ff8796}.card .cost.cost-lower{color:#8dffac}
.pocket-battle .enemy h2{white-space:nowrap;min-width:0;letter-spacing:0}.enemy-name{display:inline-block;flex-shrink:0;white-space:nowrap}

.combat-message-overlay{position:fixed;inset:0;z-index:10000;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:24px;background:#03131b45;touch-action:manipulation}.combat-message-panel{display:block;width:min(440px,100%);padding:24px 20px;color:#fff6dd;background:linear-gradient(135deg,#123747f5,#041621f5);border:1px solid #d5bd83;border-radius:8px;box-shadow:0 8px 40px #0009;font-size:18px;line-height:1.7;text-align:center}.combat-message-panel small{display:block;margin-top:12px;font-size:12px;color:#b4ced2}.tp-stars{position:relative}.tp-recovery-pop{position:absolute;left:50%;top:100%;white-space:nowrap;color:#b5ffe2;text-shadow:0 2px 3px #001711,0 0 10px #38efaa;font-size:22px;z-index:20;pointer-events:none;animation:tp-recovery 1.2s ease-out forwards}@keyframes tp-recovery{0%{opacity:0;transform:translate(-50%,5px) scale(.8)}20%{opacity:1;transform:translate(-50%,-3px) scale(1.15)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-20px) scale(1)}}@media(prefers-reduced-motion:reduce){.tp-recovery-pop{animation:none}}

/* Keep these large creatures within the mobile view. */
.pocket-battle .enemy[data-enemy-type="E020"] .enemy-art img.illustrated-sprite{top:-24px}
.pocket-battle .enemy.forest-core .enemy-art img.illustrated-sprite{width:100%;max-width:100%;height:auto;left:0;right:auto;top:calc(-1 * var(--core-hud-height,70px));margin:0;transform:none;object-fit:contain;object-position:center top}

.pocket-battle .enemy-shield{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.pocket-battle .enemy-shield .shield-icon{width:1em;height:1.2em;flex-shrink:0;vertical-align:middle}

/* Two-slot wolf: keep the complete silhouette inside its encounter allocation. */
.pocket-battle .enemy[data-enemy-type="E023"] .enemy-art img.illustrated-sprite{width:100%;max-width:100%;height:auto;left:0;right:auto;top:0;margin:0;transform:none;object-fit:contain;object-position:center top}
.pocket-battle .enemy[data-enemy-type="E025"] .enemy-art img.illustrated-sprite,.pocket-battle .enemy[data-enemy-type="E026"] .enemy-art img.illustrated-sprite{width:100%;max-width:100%;height:100%;left:0;right:auto;top:0;margin:0;transform:none;object-fit:contain;object-position:center top}

/* Additional enemies retain their complete silhouettes within each slot. */
.pocket-battle .enemy:is([data-enemy-type="E027"],[data-enemy-type="E028"],[data-enemy-type="E029"],[data-enemy-type="E030"],[data-enemy-type="E031"],[data-enemy-type="E032"],[data-enemy-type="E033"],[data-enemy-type="E034"]) .enemy-art img{width:100%;max-width:100%;height:100%;left:0;top:0;right:auto;margin:0;transform:none;object-fit:contain;object-position:center top}

.pocket-battle .enemy[data-enemy-type="E036"] .enemy-art img.illustrated-sprite,.pocket-battle .enemy[data-enemy-type="E037"] .enemy-art img.illustrated-sprite,.pocket-battle .enemy[data-enemy-type="E038"] .enemy-art img.illustrated-sprite,.pocket-battle .enemy[data-enemy-type="E039"] .enemy-art img.illustrated-sprite{width:100%;max-width:100%;height:auto;left:0;right:auto;top:0;margin:0;transform:none;object-fit:contain;object-position:center top}

/* Reduce these three illustrations to 80% of the standard 160% art width. */
.pocket-battle .enemy:is([data-enemy-type="E016"],[data-enemy-type="E021"],[data-enemy-type="E022"]){--art-width:128%}

/* Highlight only a status that has just been applied; no reserved HUD panel. */
.tp-stars .player-statuses .status-just-added{outline:2px solid #fff0bc;outline-offset:2px;box-shadow:0 0 15px currentColor;position:relative;z-index:2}
.tp-stars .player-statuses .illusion,.tp-stars .player-statuses .sleep{color:#eed0ff;background:#352242}
.tp-stars .player-statuses .collapse{color:#ffd2a1;background:#453020}
.combat-message-panel{white-space:pre-line;max-height:75dvh;overflow:auto}

.pocket-battle .enemy[data-enemy-type="E006"] .enemy-art img{width:100%;height:auto;max-height:100%;object-fit:contain;transform:none;top:0}

.pocket-battle .enemy[data-enemy-type="E040"] .enemy-art img{width:100%;height:auto;max-height:100%;object-fit:contain;transform:none;top:0}

/* Enlarge selected small enemies, anchored inward at encounter edges. */
body.battle-mode .pocket-battle .enemy:is([data-enemy-type="E027"],[data-enemy-type="E028"],[data-enemy-type="E029"]) .enemy-art img.illustrated-sprite{transform:scale(1.2);transform-origin:center top}
body.battle-mode .pocket-battle .enemy[data-enemy-type="E025"] .enemy-art img.illustrated-sprite{transform:scale(1.8);transform-origin:center top;top:-60px}
.pocket-battle :is(.enemy-count-2,.enemy-count-3) .enemy:is([data-enemy-type="E025"],[data-enemy-type="E027"],[data-enemy-type="E028"],[data-enemy-type="E029"],[data-enemy-type="E030"],[data-enemy-type="E032"]):first-child .enemy-art img.illustrated-sprite{transform-origin:left top}
.pocket-battle :is(.enemy-count-2,.enemy-count-3) .enemy:is([data-enemy-type="E025"],[data-enemy-type="E027"],[data-enemy-type="E028"],[data-enemy-type="E029"],[data-enemy-type="E030"],[data-enemy-type="E032"]):last-child .enemy-art img.illustrated-sprite{transform-origin:right top}
.pocket-battle .enemy[data-enemy-type="E004"] .enemy-art img.illustrated-sprite{top:-20px}

body.battle-mode .pocket-battle .enemy[data-enemy-type="E030"] .enemy-art img.illustrated-sprite{transform:scale(1.3);transform-origin:center top;top:-20px}

body.battle-mode .pocket-battle .enemy[data-enemy-type="E032"] .enemy-art img.illustrated-sprite{transform:scale(1.5);transform-origin:center top}
