/* Scrollable, readable cards leave the battlefield and HUD on screen. */
.illustrated-sprite{display:block;width:100%;height:100%;overflow:hidden;image-rendering:auto;filter:drop-shadow(0 5px 5px #0008)}
.pocket-battle .enemy .illustrated-sprite{max-width:280px;height:100%;margin:auto}.pocket-battle .battle-frodia .illustrated-sprite{height:100%;width:100%}
body.battle-mode .pocket-battle{grid-template-rows:minmax(135px,1fr) 30px 26px clamp(240px,37dvh,320px) 48px;gap:3px}
.pocket-battle .enemy-hp{display:flex;align-items:center;justify-content:center;gap:2px;white-space:nowrap}.pocket-battle .enemy-hp>.enemy-shield{display:inline-flex;align-items:center;margin-left:4px;padding:0 3px;background:#265570;color:#d5f4ff;border:1px solid #78b2cf66;border-radius:3px;font-size:12px;line-height:16px;flex-shrink:0}.pocket-battle .enemy-count-3 .enemy-hp small{display:none}
.pocket-battle .hand-heading>span{overflow:hidden;text-overflow:ellipsis}.pocket-battle .hand-rack{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;align-items:stretch;max-width:none;width:100%;padding:5px 5px 9px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#8ad5df #122a32}
.pocket-battle .hand-rack .card{flex:0 0 215px;width:215px;max-width:215px;height:100%;min-height:0;display:flex;flex-direction:column;scroll-snap-align:start;transform:none;border-radius:23px 23px 8px 8px;padding:4px;opacity:1}
.pocket-battle .hand-rack .card.unplayable{filter:saturate(.55)}.pocket-battle .hand-rack .card.unplayable .cost{background:#3a4858}
.pocket-battle .hand-rack .cardhead{position:relative;inset:auto;display:flex;justify-content:space-between;align-items:center;min-height:25px;height:25px;flex-shrink:0;padding:0 4px;font-size:12px}
.pocket-battle .hand-rack .cardhead>span:not(.cost){display:inline}.pocket-battle .hand-rack .cost{height:27px;width:27px;font-size:20px;line-height:23px}.pocket-battle .hand-rack .card-art{height:clamp(40px,8dvh,75px);width:calc(100% - 12px);margin:1px 6px 3px;flex-shrink:0;border-radius:45% 45% 12% 12%}
.pocket-battle .hand-rack .cardbody{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:3px 8px;margin:0 2px;min-height:0;flex:1}
.pocket-battle .hand-rack .cardbody h3{display:block;flex-shrink:0;font-size:15px;line-height:1.25;text-align:center;margin:0 -8px 4px;padding:3px 5px;background:#304c59;color:#fff5cf;text-shadow:none;white-space:normal;overflow:visible}
.pocket-battle .hand-rack .cardbody p{display:block;color:#183139;font-size:14px;line-height:1.4;margin:0;overflow:visible;-webkit-line-clamp:unset;white-space:normal;text-align:left}
.pocket-battle .hand-rack .condition{display:block;color:#155174;font-size:12px;line-height:1.3;margin-top:3px}.pocket-battle .hand-rack .cardslots{min-height:19px;padding:3px;margin:0 2px 1px;gap:6px}.pocket-battle .hand-rack .module-orb{height:13px;width:13px}.pocket-battle .hand-rack .cardslots small{display:none}
.combat-number{position:absolute;top:38%;z-index:30;pointer-events:none;font-size:clamp(27px,4vw,44px);font-weight:950;line-height:1;text-shadow:0 2px 2px #000,2px 0 #061923,-2px 0 #061923,0 -2px #061923;animation:combat-number-rise .9s both;white-space:nowrap}.combat-number.damage{color:#ff505d}.combat-number.heal{color:#71ff99}.battle-frodia .combat-number{top:33%}
@keyframes combat-number-rise{0%{opacity:0;transform:translate(-50%,6px) scale(.75)}15%{opacity:1;transform:translate(-50%,-1px) scale(1.12)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px) scale(.95)}}
.bag-group{margin-top:28px}.bag-group>h3{display:flex;align-items:center;gap:5px;font-size:18px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px}.bag-group>h3 small{font-size:14px;margin-left:auto;color:var(--muted)}.blessing-summary{margin:26px 0;padding:18px;border:1px solid #c7b97788;background:#283f3766}.blessing-summary h3{font-size:18px;color:#ffe8a0;margin-bottom:10px}.blessing-summary p{font-size:14px;line-height:1.7;margin:7px 0}.blessing-summary p b{display:block;color:#e1eeda}
.revelation-screen{background:radial-gradient(ellipse at 50% 0,#77875233,transparent 65%)}.revelation-screen h1{color:#ffeeb6}.revelation-screen .choice{border:1px solid #d5c27688;background:linear-gradient(145deg,#33493ae8,#0a2630)}.revelation-screen .choice p{font-size:16px;color:#e6f3e5}.revelation-screen>.outline{margin-top:24px}
@media(max-width:700px){body.battle-mode .pocket-battle{grid-template-rows:minmax(125px,1fr) 27px 25px clamp(238px,37dvh,285px) 46px;gap:3px}.pocket-battle .hand-rack .card{flex-basis:210px;width:210px;max-width:210px}.pocket-battle .hand-rack{gap:10px}.pocket-battle .hand-rack .cardbody h3{font-size:15px}.pocket-battle .hand-heading>div{gap:7px}.pocket-battle .enemy-hp>.enemy-shield{margin-left:2px;padding:0 2px}.pocket-battle .hand-rack .card-art{height:clamp(36px,7dvh,60px)}}
@media(max-height:640px) and (orientation:portrait){body.battle-mode .pocket-battle{grid-template-rows:minmax(100px,1fr) 23px 23px 218px 42px;gap:2px}.pocket-battle .hand-rack .card-art{height:28px}.pocket-battle .hand-rack .card{flex-basis:225px;width:225px;max-width:225px}.pocket-battle .hand-rack .cardbody h3{font-size:14px}.pocket-battle .hand-rack .cardbody p{font-size:14px;line-height:1.3}.pocket-battle .hand-rack .condition{font-size:12px;line-height:1.2}.pocket-battle .hand-rack .cardhead{height:23px;min-height:23px}}
@media(orientation:landscape) and (max-height:650px){body.battle-mode .pocket-battle{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:26px minmax(0,1fr) 42px;gap:4px 9px}.pocket-battle .battle-stage{grid-column:1;grid-row:1/4}.pocket-battle .combat-status{grid-column:2;grid-row:1}.pocket-battle .hand-rack{grid-column:2;grid-row:2;padding:3px 3px 7px;gap:10px}.pocket-battle .combat-actions{grid-column:2;grid-row:3}.pocket-battle .hand-rack .card{flex-basis:215px;width:215px;max-width:215px}.pocket-battle .hand-rack .card-art{height:34px}.pocket-battle .hand-rack .cardbody h3{font-size:14px}.pocket-battle .hand-rack .cardbody p{font-size:14px;line-height:1.3}.pocket-battle .hand-rack .condition{font-size:12px;line-height:1.2}}
@media(prefers-reduced-motion:reduce){.combat-number{animation-name:combat-number-still}@keyframes combat-number-still{0%,90%{opacity:1}100%{opacity:0}}}

.music-controls{display:grid;gap:18px;padding:10px 0}.music-controls p{font-size:16px;line-height:1.7}.music-controls label{font-size:16px;display:flex;justify-content:space-between}.music-controls input[type=range]{width:100%;height:36px;accent-color:var(--cyan)}.topbar nav [data-music-status]{font-size:12px;white-space:nowrap}@media(max-width:700px){.topbar nav{gap:8px}.topbar nav button{font-size:12px;padding:4px}.topbar .brand{font-size:17px}}

.combat-number.shield{color:#5abbff}