/* Individual HUD blocks scale together; unused screen space stays on the battlefield. */
:root{--battle-ui-scale:1;--console:calc(128px * var(--battle-ui-scale))}
body[data-mode=game] #world{height:100%}
.battle-console,.minimap-wrap,.game-top,.growth-rail,.dps-widget,.right-tools,.initial-skill-status,#draw-dialog,#shop-dialog{zoom:var(--battle-ui-scale)}
.battle-console{display:grid;position:absolute;left:50%;right:auto;bottom:6px;transform:translateX(-50%);width:1000px;height:128px;gap:0;grid-template-columns:224px minmax(0,1fr) 164px;pointer-events:none;background:#131b15f2;border:2px solid #706b51;box-shadow:inset 0 0 0 3px #232c22,0 3px 8px #0006}
.battle-console>.panel{min-width:0;max-width:none;height:auto;border:0;box-shadow:none;background:transparent;border-right:1px solid #596043}
.battle-console>.hero-info{grid-column:1;grid-row:1;padding:12px;display:block;position:relative}
.battle-console>.build-slots{display:block;grid-column:2;grid-row:1;padding:10px 13px 7px}
.battle-console>.inventory{grid-column:3;grid-row:1;padding:10px 12px;border-right:0}
#hud>.minimap-wrap{position:absolute;left:8px;bottom:6px;width:168px;height:168px;padding:4px}
.hero-info #portrait{width:74px;height:86px}.hero-info #portrait>span{font-size:15px;padding:1px 6px;bottom:-5px;right:-4px}
.hero-summary{display:flex;align-items:center;gap:12px}.hero-vitals>div:first-child{margin-bottom:8px}.hero-vitals b{font-size:22px}
.hero-vitals #state-label{display:none}.hero-stats{margin-top:8px;display:flex;gap:8px;flex-direction:column;align-items:flex-start}
.hero-stats span,.hero-stats b{font-size:15px}.hero-stats span:last-child{display:none}
.hero-bars{margin-top:4px;display:grid;gap:3px}.health-bar,.mana-bar{height:12px;margin:0}.health-bar span,.mana-bar span{font-size:11px;line-height:10px}
.hero-info .order-buttons{position:absolute;right:auto;left:1014px;bottom:0;margin:0;gap:0}
.order-buttons button:not(#dash-order){display:none}.order-buttons #dash-order{width:56px;height:56px}.order-buttons kbd{font-size:13px;padding:1px 4px}
.console-label{font-size:13px;height:17px;line-height:17px;letter-spacing:0;gap:5px}.console-label .text-button{font-size:13px;padding:0}.console-label>span{font-size:12px;color:#b8b8a0}
.card-slots{height:54px;margin-top:3px;gap:5px;grid-template-columns:repeat(8,minmax(0,1fr))}
.held-card,.empty-card{height:54px;padding:2px 2px 15px;min-width:0}.held-card img{position:static;width:100%;height:35px;object-fit:contain}
.held-card>span{top:auto;bottom:1px;left:0;right:0;font-size:12px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.held-card>small{font-size:12px;right:2px;top:2px}.empty-card i{font-size:14px}
.inventory-slots{gap:5px;margin-top:4px;grid-template-columns:repeat(3,minmax(0,1fr))}.inventory-slots>span,.inventory-slots>button{height:37px;padding:2px}.inventory-slots img{width:100%;height:100%;object-fit:contain}
.game-top.panel{position:absolute;top:6px;left:auto;right:12px;width:max-content;height:36px;padding:0;gap:20px;background:none;border:0;box-shadow:none;pointer-events:none}
.game-brand{display:none}.resource{display:flex;align-items:center;font-size:15px;color:#eee2bd;text-shadow:0 2px 3px #000;gap:6px}.resource b{font-size:20px;margin-left:3px}.resource-icon{display:block;width:28px;height:28px;object-fit:contain;flex-shrink:0}
.game-time{position:fixed;top:4px;left:50%;transform:translateX(-50%);margin:0;padding:6px 20px;font-size:19px;color:#f6d78b;background:#12190eda;border:1px solid #746540}
.top-button{font-size:22px;line-height:28px;padding:0;width:30px;height:30px;color:#edd89e;border:1px solid #8d784d;background:#172017db}
.right-tools{position:static;display:contents;pointer-events:none}
.right-tools #follow-button,.right-tools #char-button{display:none}
.right-tools #draw-button,.right-tools #shop-button{position:absolute;bottom:146px;width:62px;height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border:2px solid #b89c5c;background:linear-gradient(#414335,#171f19)}
.right-tools #draw-button{left:calc(50% - 220px);right:auto}.right-tools #shop-button{right:14px;bottom:10px}
.right-tools #draw-button img,.right-tools #shop-button img{width:40px;height:40px;margin:0}.right-tools #shop-button>span{font-size:14px;line-height:18px}.right-tools #draw-button>span{display:none}
.right-tools kbd{font-size:12px}.right-tools #shop-button.active{border-color:#f2d68a;background:#49422a}.right-tools #draw-price{font-size:14px;line-height:18px;color:#f6d589}
.initial-skill-status{left:calc(50% + 280px);right:auto;bottom:146px;width:56px;height:56px;min-height:0;padding:4px;display:grid;place-items:center;gap:0;border:2px solid #a99564;background:#18231ce8}
.initial-skill-status>b,.initial-skill-status>small{display:none}.initial-skill-status>span{font-size:33px}
.bottom-hint{display:none}
.growth-rail{left:12px;top:84px;width:184px}
.bond-heading{font-size:20px;padding:8px}.bond-entry{height:48px;gap:8px}.bond-entry>img{height:38px;width:38px}.bond-entry>span,.bond-entry>b{font-size:16px}
.bond-tooltip{width:340px;max-height:540px;padding:18px}.bond-tooltip p{font-size:17px}.bond-tooltip>strong{font-size:16px}.bond-tooltip header b{font-size:23px}
.bond-members img{width:45px;height:45px}.bond-members span{font-size:15px}.bond-members small{font-size:13px}
.dps-widget{right:14px;top:34%;width:264px}.meter-tabs{height:34px}.meter-tabs button{font-size:14px;padding:5px}.meter-row>div{height:31px}
.meter-row span,.meter-row b{font-size:15px}.meter-row img{width:30px;height:30px}.meter-row>i{height:5px;margin-right:35px}.meter-empty{font-size:15px;padding:18px 0}#meter-total{font-size:14px}
body #base-status{top:68px;font-size:16px;width:250px}body #base-status small{font-size:14px}
body #base-status{top:46px;width:180px;padding:6px 9px;background:#162119b0;box-shadow:none;pointer-events:none}body #base-status small{display:none}
.dps-widget:has(.meter-empty) .meter-body{display:none}
body:has(#draw-dialog[open]) #base-status{visibility:hidden}
body:has(#draw-dialog[open]) #draw-button{visibility:hidden}
#draw-dialog{inset:62px 0 auto;margin:0 auto;width:max-content;max-width:none;padding:0;overflow:visible;z-index:30}
#draw-dialog .draw-candidates{display:flex;align-items:stretch;gap:18px}
#draw-dialog .choice-card{flex:0 0 352px;width:352px;max-width:352px;min-height:558px;height:auto;border:2px solid var(--card-line);border-radius:7px;filter:none!important}
#draw-dialog .card-topline{padding:11px 16px;gap:10px}#draw-dialog .card-topline>span{font-size:15px}#draw-dialog .card-topline>b{font-size:20px}
#draw-dialog .card-title-row{padding:14px 16px;gap:14px;flex-shrink:0}#draw-dialog .card-title-row .card-art{flex:0 0 66px;height:66px}#draw-dialog .card-art img{width:64px;height:64px}
#draw-dialog .choice-card h3{font-size:29px;letter-spacing:0;margin:0 0 7px}#draw-dialog .card-title-row small{font-size:15px}
#draw-dialog .card-copy{padding:0 17px;gap:12px;flex:1;flex-shrink:0}#draw-dialog .card-section small{font-size:16px;margin-bottom:5px;letter-spacing:0}
#draw-dialog .card-section p{font-size:19px;line-height:1.5;margin:0}#draw-dialog .card-gain p{font-size:21px;line-height:1.5;min-height:0}
#draw-dialog .card-section.card-bond{margin-top:0;padding-top:10px}#draw-dialog .card-bond p{font-size:18px}
#draw-dialog .card-members{gap:6px;margin:12px 16px 0;grid-template-columns:repeat(3,minmax(0,1fr))}#draw-dialog .card-members>div{flex-direction:row;padding:4px;gap:5px}
#draw-dialog .card-members img{width:25px;height:25px}#draw-dialog .card-members span{font-size:14px}#draw-dialog .card-members small{font-size:11px}
#draw-dialog .card-collection{font-size:15px;margin-top:12px;padding:10px 16px}#draw-dialog .card-collection>b{display:none}
#draw-dialog .draw-footer, #evolution-dialog .draw-footer{display:flex;justify-content:center;gap:12px;margin-top:16px;width:100%}
#draw-dialog .draw-footer button, #evolution-dialog .draw-footer button{flex:0 0 160px;min-width:0;height:48px;padding:8px;font-size:19px;letter-spacing:1px;border-width:2px}
#draw-refresh-count,#hero-refresh-count{color:#8ee89a}
#draw-dialog .draw-giveup{position:relative;flex:0 0 160px;min-width:0}
#draw-dialog #giveup-draw{background:linear-gradient(#593228,#30201c);border-color:#9a7056;color:#ebd4ba}
#draw-dialog .draw-giveup>button{width:100%}
#giveup-reward{position:absolute;top:calc(100% + 6px);left:0;right:0;text-align:center;white-space:nowrap;font-size:13px;line-height:16px;letter-spacing:0;color:#8ee89a;text-shadow:0 2px 3px #000}
#draw-dialog #fold-draw{background:linear-gradient(#3d4036,#20271f);border-color:#857a57;color:#e2d7b6}
#draw-dialog[data-count="1"] .draw-footer{gap:8px}#draw-dialog[data-count="1"] .draw-footer button{flex:1;font-size:18px;letter-spacing:0}
#draw-dialog[data-count="1"] .draw-giveup{flex:1}
#draw-dialog .choice-card:hover,#draw-dialog .choice-card:focus-visible{transform:translateY(-7px);box-shadow:inset 0 0 0 2px var(--card-line),0 8px 18px #0008}
#shop-dialog{position:fixed;inset:auto 14px 146px auto;margin:0;width:320px;max-width:none;max-height:none;overflow:visible;padding:14px;border:2px solid #a18a51;background:#101b18f5;box-shadow:inset 0 0 0 3px #252e22,0 6px 16px #0006;z-index:25}
.market-heading{display:flex;align-items:center;gap:12px}.market-heading h2{font-size:23px;margin:0;letter-spacing:2px}.market-heading>span{margin-left:auto;font-size:17px;color:#edcf85}.market-heading form{margin:0}.market-close{height:30px;width:30px;padding:0;font-size:25px;line-height:1;background:none;border-color:#756b48}
#shop-dialog .tabs{gap:12px;margin:10px 0 13px}#shop-dialog .tabs button{font-size:17px;padding:7px 12px}
#shop-dialog .shop-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;position:relative}
.market-slot{min-width:0}.market-slot>button{width:100%;display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 4px;border:1px solid #8c7853;background:linear-gradient(#34392b,#18201a);cursor:pointer}
.market-slot img{width:62px;height:62px;border:1px solid #bfa160;object-fit:cover}.market-slot button>span{font-size:16px;white-space:nowrap}.market-slot button>b{font-size:16px;font-weight:500;color:#edcf85}
.market-slot.sold-out button{opacity:.45;cursor:default}.market-tooltip{display:none;position:absolute;right:0;bottom:calc(100% + 10px);width:310px;padding:16px;border:1px solid #a28a50;background:#08120bfa;box-shadow:0 5px 12px #0008;pointer-events:none;z-index:3}
.market-slot:hover .market-tooltip,.market-slot:focus-within .market-tooltip{display:block}.market-tooltip strong{font-size:21px;color:#f2dda4}.market-tooltip p{font-size:19px;margin:12px 0;color:#d3e7bd}.market-tooltip small{font-size:15px;color:#c4c8ae;line-height:1.6}
.market-footer{display:flex;align-items:center;gap:12px;margin-top:13px}.market-footer>button{font-size:16px;white-space:nowrap;padding:8px;background:#38402c}.market-footer>span{font-size:14px;line-height:1.5;color:#ecd68f}.market-footer>span:empty{display:none}
@media(prefers-reduced-motion:reduce){#draw-dialog .choice-card:hover{transform:none}}