/* QVIRO 0.5 — portrait layout, equipment selector and effects */
html,body{min-height:100%;overscroll-behavior-y:none}
.app{padding-bottom:calc(75px + env(safe-area-inset-bottom))}
#battle.view.active{height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 66px - 65px);min-height:0;display:flex;flex-direction:column;gap:6px;padding:8px 12px 2px;overflow:hidden}
#battle>.row{flex:0 0 auto;min-height:37px}
#battle h2{font-size:20px;margin:0}
#retreat{min-height:34px;padding:7px 13px;font-size:12px}
#battle .battle-art{flex:0 0 clamp(115px,18dvh,178px);height:auto;min-height:0;margin:0;background:radial-gradient(ellipse at 53% 7%,#39687a,#1b3440 58%,#0e2128 95%);isolation:isolate}
#battle .battle-art:after{z-index:0;pointer-events:none}
#battle .battle-art .enemy,#battle .battle-art #qv-fighter{position:relative;z-index:2}
#battle .battle-art #qv-fighter{height:100%;max-width:47%;display:flex;align-items:flex-end;justify-content:center}
#battle .battle-art #qv-fighter svg{height:100%;max-height:165px;max-width:140px;width:auto}
#battle .battle-art .enemy{font-size:clamp(58px,16vw,82px)}
#battle>.card{flex:0 0 auto;padding:10px 12px;margin:0}
#battle>.card .row{font-size:12px}
#battle>.card .progress{height:8px}
#battle #battlemsg{flex:0 0 auto;margin:0;min-height:17px;font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#b9d5ce}
#battle .board{width:100%;max-width:425px;flex:1 1 auto;min-height:130px;height:auto;max-height:none;margin:0 auto;gap:4px;grid-template-rows:repeat(6,minmax(0,1fr));align-content:stretch}
#battle .gem{aspect-ratio:auto;min-height:0;border-radius:11px;box-shadow:inset 0 1px #8aa7a340,0 1px 4px #0006;padding:1px;display:grid;place-items:center;overflow:hidden;transition:filter .14s,transform .14s}
#battle .gem svg{width:min(74%,39px);height:min(74%,39px);filter:drop-shadow(0 2px 3px #0008)}
#battle .gem.g0{background:linear-gradient(135deg,#14415c,#152a3f);border-color:#4688a7}
#battle .gem.g1{background:linear-gradient(135deg,#673b2d,#332b2d);border-color:#a87558}
#battle .gem.g2{background:linear-gradient(135deg,#2b5749,#16342f);border-color:#5f9a84}
#battle .gem.g3{background:linear-gradient(135deg,#66552c,#393829);border-color:#ab965b}
#battle .gem.g4{background:linear-gradient(135deg,#485a69,#263c45);border-color:#799bad}
#battle .gem.selected{outline:2px solid #f6df93;outline-offset:-2px;box-shadow:0 0 0 1px #f8df98}
#battle>.row:last-child{flex:0 0 auto;gap:8px;padding-bottom:1px}
#battle>.row:last-child .btn{flex:1;padding:8px 6px;min-height:40px;font-size:12px;white-space:nowrap}
#battle .battle-art .qv-hit-ring{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;background:radial-gradient(circle at 62% 45%,#e9f8ff 0,#b4ffe66e 12%,#43e9b500 47%);transform:scale(.2)}
#battle .battle-art.qv-strike .qv-human{animation:qv-lunge-body .7s cubic-bezier(.23,.8,.35,1)}
#battle .battle-art.qv-strike .qv-human .qv-rightarm{transform-origin:153px 112px;animation:qv-swing .7s ease-in-out}
#battle .battle-art.qv-strike .enemy{animation:qv-foe-hit .7s ease-in-out}
#battle .battle-art.qv-strike .qv-hit-ring{animation:qv-ring .65s ease-out}
#battle .battle-art.qv-mega{animation:qv-arena-pulse 1.24s ease-in-out}
#battle .battle-art.qv-mega .qv-human{animation:qv-super-body 1.24s ease-in-out}
#battle .battle-art.qv-mega .qv-human .qv-rightarm{transform-origin:153px 112px;animation:qv-super-arm 1.24s ease-in-out}
#battle .battle-art.qv-mega .enemy{animation:qv-super-foe 1.24s ease-in-out}
#battle .battle-art.qv-mega .qv-hit-ring{animation:qv-super-ring 1.24s ease-out}
#battle .battle-art.qv-guard .qv-human{animation:qv-guard-breathe .55s ease-in-out}
@keyframes qv-lunge-body{0%,100%{transform:translate(0,0)}25%{transform:translate(14px,-7px) rotate(-3deg)}49%{transform:translate(43px,-10px) rotate(8deg)}70%{transform:translate(16px,-3px)}}
@keyframes qv-swing{0%,100%{transform:rotate(0)}20%{transform:rotate(-52deg)}50%{transform:rotate(67deg)}70%{transform:rotate(17deg)}}
@keyframes qv-foe-hit{0%,40%,100%{transform:translate(0) rotate(0)}52%{transform:translate(12px,4px) rotate(11deg)}68%{transform:translate(-4px) rotate(-3deg)}}
@keyframes qv-ring{0%{opacity:0;transform:scale(.15)}40%{opacity:.9}100%{opacity:0;transform:scale(1.9)}}
@keyframes qv-arena-pulse{0%,100%{filter:none}20%{filter:brightness(.5)}54%{filter:brightness(1.4)}80%{filter:brightness(.8)}}
@keyframes qv-super-body{0%,100%{transform:none}16%{transform:translate(-8px,2px) scale(.95)}35%{transform:translate(15px,-15px) scale(1.08)}52%{transform:translate(48px,-14px) rotate(8deg)}69%{transform:translate(35px,-3px)}}
@keyframes qv-super-arm{0%,100%{transform:rotate(0)}24%{transform:rotate(-85deg)}46%{transform:rotate(82deg)}67%{transform:rotate(-25deg)}}
@keyframes qv-super-foe{0%,47%,100%{transform:none}58%{transform:translate(16px,-8px) rotate(18deg)}80%{transform:translate(-6px,3px) rotate(-8deg)}}
@keyframes qv-super-ring{0%,20%{opacity:0;transform:scale(.1)}40%{opacity:1;transform:scale(.55)}60%{opacity:.95;transform:scale(1.5)}100%{opacity:0;transform:scale(2.5)}}
@keyframes qv-guard-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.nav .ico{height:23px;display:flex;align-items:center;justify-content:center;margin-bottom:3px}
.nav .ico svg{width:23px;height:23px;filter:drop-shadow(0 2px 3px #0005)}
.res-icon{display:inline-flex;vertical-align:middle;width:17px;height:17px;align-items:center;margin-right:4px}
.res-icon svg{width:100%;height:100%}
#qv-paperdoll{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px;align-items:stretch;margin:12px 0}
#qv-avatararea{position:relative;min-height:295px;border:1px solid #355f5c;background:radial-gradient(ellipse at 50% 25%,#345b5a,#112a2c 80%);border-radius:15px;display:flex;justify-content:center;align-items:flex-end;overflow:hidden}
#qv-avatararea svg{height:98%;max-width:100%}
#qv-avatararea .qv-level{position:absolute;top:8px;left:9px;background:#142d2cdb;border:1px solid #447c6b;border-radius:10px;padding:6px;color:#d9f2dc;font-size:10px}
#qv-slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
#qv-slot-grid button{min-width:0;min-height:48px;border-radius:11px;padding:5px 3px;border:1px solid #47645e;background:linear-gradient(145deg,#234744,#152d30);color:#d9e9df;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
#qv-slot-grid button:active{background:#3d6258}
#qv-slot-grid button .qv-sloticon{width:25px;height:25px;display:inline-grid;place-items:center}
#qv-slot-grid button .qv-sloticon svg{width:25px;height:25px}
#qv-slot-grid button .qv-slotname{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#qv-slot-grid button .qv-dot{width:4px;height:4px;border-radius:50%}
#qv-slot-grid button.empty{border-style:dashed;color:#a7bab3}
#qv-slot-grid button[data-rarity="rare"]{border-color:#719ecc}
#qv-slot-grid button[data-rarity="epic"]{border-color:#bd8de6}
#qv-slot-grid button[data-rarity="exclusive"]{border-color:#e5be74}
#qv-equip,#qv-inventory{display:none}
#qv-wardrobe{margin:12px 0}
#qv-wardrobe h3{margin-bottom:9px}
#qv-wardrobe .sub{margin:8px 0 2px}
#qv-picker-backdrop{position:fixed;inset:0;z-index:70;background:#010d10cb;display:flex;align-items:flex-end;justify-content:center;padding:8px 8px max(8px,env(safe-area-inset-bottom))}
#qv-picker{width:min(470px,100%);max-height:min(82dvh,690px);display:flex;flex-direction:column;overflow:hidden;background:#163432;border:1px solid #79a995;border-radius:22px;box-shadow:0 -15px 55px #000a}
#qv-picker .head{padding:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #3d5e53}
#qv-picker .body{overflow:auto;padding:8px 16px 16px}
#qv-picker button.qv-pick-item{border:1px solid #436159;border-radius:12px;background:#17302f;color:#eef6e9;text-align:left;width:100%;padding:11px;margin:5px 0;display:flex;gap:12px;align-items:center}
#qv-picker .qv-pick-icon{width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center}
#qv-picker .qv-pick-icon svg{width:32px;height:32px}
#qv-picker .qv-pick-detail{min-width:0;flex:1}
#qv-picker .qv-pick-detail small{display:block;color:#a8c8bb;margin-top:4px}
#qv-picker .qv-pick-item.equipped{border-color:#d7e9ad}
#qv-gear-stats{font-size:12px;color:#c3dec9;line-height:1.7}
#qv-market{margin:12px 0}
.qv-human .qv-leftarm,.qv-human .qv-rightarm,.qv-human .qv-leftleg,.qv-human .qv-rightleg{transform-box:view-box}
@media(max-height:720px){#battle.view.active{gap:4px}#battle .battle-art{flex-basis:clamp(88px,14dvh,112px)}#battle>.card{padding:7px 9px}#battle>.row:last-child .btn{min-height:35px;padding:6px}#battle #battlemsg{font-size:10px}}
@media(prefers-reduced-motion:reduce){#battle .battle-art *,#battle .battle-art{animation-duration:.01ms!important;animation-iteration-count:1!important}}

#hero>.heroart{display:none!important}
#qv-avatar-image{width:100%;height:100%;display:flex;justify-content:center;align-items:flex-end}
#qv-avatar-image svg{height:min(290px,100%);max-width:100%}
#battle .battle-art .enemy{display:flex;align-items:center;justify-content:center;max-width:46%;height:100%;min-width:0}
#battle .battle-art .enemy svg{width:min(100%,150px);height:auto;max-height:100%;filter:drop-shadow(0 5px 8px #02141bbd)}
#qv-picker .head svg{width:24px;height:24px;vertical-align:middle;margin-right:6px}