/* Applied only after choosing/resuming a partner. Original starter and modals are untouched. */
#hud{display:none}
body.playing{overflow:hidden}
body.playing #app{display:block;width:100vw;height:100dvh;min-height:0;position:relative;background:#152d2d;overflow:hidden}
body.playing .topbar,body.playing .sidebar,body.playing .arena-toolbar,body.playing .arena-bottom,body.playing .arena-side-label{display:none}
body.playing .layout,body.playing .arena-column,body.playing .arena-wrap{display:block;position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;border:0;padding:0;margin:0;overflow:hidden}
body.playing #battlefield{display:block;width:100%;height:100%;touch-action:none}
body.playing #hud{display:block;position:absolute;inset:0;pointer-events:none;z-index:8;color:#e8eee9}
body.playing #hud>div{position:absolute}
body.playing #hud button,body.playing #hud details,body.playing #hud input,body.playing #hud .shop-card,body.playing #hud .bench-slot{pointer-events:auto}
body.playing #hud-location{left:22px;top:20px}
body.playing #map-name{font-size:12px;background:#102b2be6;border:1px solid #92b7a54d;border-radius:5px;padding:8px 12px;box-shadow:0 4px 14px #081d2755;color:#dceacb}
body.playing #hud-round{left:50%;top:15px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px}
body.playing .header-middle{background:#111f30ed;border:1px solid #77929480;border-radius:6px;padding:8px 17px;gap:16px;height:43px;box-shadow:0 5px 18px #06212766}
body.playing .header-middle .head-sep{display:none}
body.playing .round-text{font-size:11px;color:#a4bbb9}
body.playing .round-text b{font-size:21px;color:#ffdda0;margin-left:9px}
body.playing .phase-pill{font-size:10px;padding:5px 10px;border-radius:4px}
body.playing #stage-dots{display:flex;gap:7px}
body.playing #stage-dots span{width:25px;height:3px;border-radius:1px;background:#15333ddd;border:1px solid #8bb19a4a}
body.playing #stage-dots span.active{background:#f5da98;box-shadow:0 0 8px #e6cc7166}
body.playing #hud-stats{right:20px;top:15px;display:flex;align-items:center;gap:6px;padding:5px 7px;background:#111f30ed;border:1px solid #77929480;border-radius:6px;box-shadow:0 5px 18px #06212766}
body.playing #hud-topstats .header-end{gap:13px}
body.playing .top-stat{min-width:55px;gap:5px}
body.playing .top-stat strong{font-size:17px}
body.playing .top-stat small{font-size:8px;color:#9aaeb8}
body.playing .top-stat>span{font-size:17px}
body.playing #sound-btn,body.playing #help-btn,body.playing .hud-icon{width:31px;height:31px;min-height:31px;border:1px solid #7896a94d;background:#23364877;border-radius:4px;color:#d2e0df;padding:5px}
body.playing .hud-icon svg{width:20px;height:20px;display:block}
body.playing #hud-left{left:20px;top:97px;width:174px;display:flex;flex-direction:column;gap:12px}
body.playing #hud-right{right:20px;top:97px;width:194px;display:flex;flex-direction:column;gap:8px}
body.playing .hud-kicker{font-size:9px;text-transform:uppercase;letter-spacing:1.6px;color:#9cbab6;display:block;margin-bottom:5px}
body.playing .hud-weather,body.playing #hud-opponent,body.playing #hud-inspector,body.playing #hud-items,body.playing #hud-log{background:#102231df;border:1px solid #7e9b954a;box-shadow:0 5px 19px #0a202d45;border-radius:5px;padding:10px}
body.playing #hud-opponent.boss{border-color:#d1b16b88}
body.playing .weather-tag{font-size:11px;padding:0;background:none;color:#bde6dc;border:0}
body.playing .side-card{border:0;box-shadow:none;background:none;border-radius:0;padding:0}
body.playing .side-title{font-size:10px;letter-spacing:.2px;margin:0 0 6px;display:flex;justify-content:space-between}
body.playing .side-title small{font-size:9px;color:#a4bcb3}
body.playing .side-explainer,body.playing .syn-progress,body.playing .syn-desc,body.playing .info-divider,body.playing .info-card .side-title,body.playing .info-card .micro-row,body.playing .item-card .side-title,body.playing .recipe-note,body.playing .focus-card .side-title,body.playing .log-card .side-title{display:none}
body.playing .synergy-list{display:flex;flex-direction:column;gap:4px}
body.playing .synergy-entry{background:#142d33df;min-height:29px;padding:4px 6px;border:1px solid #73998c40;border-radius:4px;gap:6px;box-shadow:0 3px 10px #10272e33}
body.playing .synergy-entry.active{background:#1f443ddd;border-color:#a4c99577}
body.playing .syn-icon{width:23px;height:23px;min-width:23px;font-size:14px;background:transparent;border:0;border-radius:2px}
body.playing .syn-top{font-size:10px;gap:6px}
body.playing .syn-top b{font-size:10px}
body.playing .synergy-entry:not(.active){opacity:.80}
body.playing #hud-items summary,body.playing #hud-log summary{font-size:11px;font-weight:700;cursor:pointer;color:#cfdfd7;min-height:18px}
body.playing #hud-item-summary{color:#ffe0a0;float:right}
body.playing .item-grid{grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}
body.playing .item-slot{width:100%;height:32px;min-height:32px;min-width:32px;border-color:#80999a40;background:#0d1b2a77;border-radius:4px;font-size:17px}
body.playing .item-slot:disabled:empty{opacity:.5}
body.playing .item-slot small{font-size:8px}
body.playing .encounter-name{font-size:12px;margin:4px 0 6px;color:#f2d5a2;line-height:1.45}
body.playing #encounter-desc{font-size:10px;line-height:1.6;color:#bbcec9;margin:3px 0 7px}
body.playing #hud-enemies{display:flex;gap:4px;flex-wrap:wrap}
body.playing .enemy-portrait{height:39px;min-width:36px;width:36px;position:relative;background:#152c3b;border:1px solid #75929166;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:2px}
body.playing .enemy-portrait img{width:30px;height:29px;object-fit:contain;image-rendering:pixelated}
body.playing .enemy-portrait small{position:absolute;bottom:0;left:3px;color:#e8c98a;font-size:7px}
body.playing .enemy-portrait.fainted{opacity:.35}
body.playing .hud-fold{font-size:10px;min-height:30px;border:1px solid #80979855;background:#112532e6;color:#c8dace;border-radius:4px;padding:6px 8px;cursor:pointer}
body.playing #hud-inspector{display:none;max-height:calc(100vh - 350px);overflow:auto}
body.playing.hud-inspecting #hud-inspector{display:block}
body.playing .unit-title{gap:8px}
body.playing .unit-portrait{width:52px;height:52px;min-width:52px}
body.playing .unit-portrait img{width:45px;height:45px;object-fit:contain}
body.playing .unit-title h3{font-size:13px;margin:3px 0}
body.playing .unit-meta{font-size:9px;line-height:1.5}
body.playing .unit-stat-grid{gap:5px;margin:8px 0}
body.playing .unit-stat{padding:5px 7px;border-color:#6c8a8d44;border-radius:3px}
body.playing .unit-stat small{font-size:9px}
body.playing .unit-stat strong{font-size:12px}
body.playing .skill-box{padding:7px;margin-top:7px;border-radius:3px}
body.playing .skill-box b{font-size:10px}
body.playing .skill-box p{font-size:9px;line-height:1.5;margin:4px 0}
body.playing .equip-list{margin-top:7px;gap:6px}
body.playing .equip-slot{width:29px;height:29px}
body.playing .sell-btn{font-size:10px;padding:8px;margin-top:7px}
body.playing #hud-log .battle-log{max-height:140px;font-size:10px;margin-top:8px}
body.playing #hud-clock{left:50%;top:82px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;font-size:11px;color:#def1e4;text-shadow:0 2px 4px #102c35}
body.playing #speed-btn{padding:5px 9px;background:#172d38b9;border:1px solid #aec1af66;font-size:10px;border-radius:4px;min-height:28px}
body.playing #hud-bottom{left:50%;bottom:14px;transform:translateX(-50%);width:min(1210px,calc(100% - 350px));display:flex;flex-direction:column;align-items:stretch}
body.playing #hud-hint{font-size:10px;color:#e4ead4;text-shadow:0 2px 4px #172e3b;min-height:22px;text-align:center;padding:4px}
body.playing .game-footer{position:relative;inset:auto;width:100%;height:auto;min-height:0;margin:0;padding:9px 12px 10px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(115deg,#102432f5,#142736f2);border:1px solid #87a39b88;border-radius:7px;box-shadow:0 9px 30px #03132388,inset 0 1px #d9e2c722;backdrop-filter:blur(7px)}
body.playing .footer-head{height:54px;min-height:54px;display:flex;gap:12px;border:0;padding:0}
body.playing .bench-title{width:55px;min-width:55px;gap:3px}
body.playing .bench-title b{font-size:10px}
body.playing .bench-title small{display:none}
body.playing .bench-counter{font-size:9px}
body.playing .bench{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));height:54px;gap:6px;flex:1}
body.playing .bench-slot{width:100%;height:54px;border-radius:4px;border-color:#89a3aa55;background:linear-gradient(#223c47a8,#152734a8);min-width:0}
body.playing .bench-slot img{max-height:47px;max-width:56px}
body.playing .bench-slot.occupied{border-style:solid}
body.playing .bench-stars{font-size:9px;bottom:1px}
body.playing .bench-cost{font-size:8px}
body.playing .deploy-button{min-width:130px;width:130px;height:54px;min-height:54px;border-radius:5px;font-size:13px;box-shadow:0 2px #a77636;display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;gap:5px}
body.playing .deploy-button small{width:100%;font-size:8px;margin:0}
body.playing .deploy-triangle{font-size:12px}
body.playing .shop-area{height:112px;display:flex;gap:10px;margin:0;padding:8px 0 0;border-top:1px solid #87a39b33}
body.playing .shop-sidebar{width:154px;min-width:154px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:30px 32px 30px;gap:5px}
body.playing .shop-sign,body.playing .shop-odds{display:none}
body.playing #hud-level{grid-column:1/3;display:flex;flex-direction:column;gap:3px;justify-content:center}
body.playing #hud-level-title{display:flex;justify-content:space-between;align-items:center;font-size:9px}
body.playing #level-label{font-size:13px;color:#f1db99}
body.playing #xp-label{font-size:9px;color:#a8c0b6}
body.playing .hud-xp-track .progress{height:3px;background:#061522;margin:0;border:0}
body.playing .reroll-btn,body.playing .lock-btn,body.playing #xp-btn{padding:5px 6px;font-size:10px;border-radius:4px;min-height:30px;margin:0;gap:3px;justify-content:center;white-space:nowrap}
body.playing .reroll-btn small,body.playing .lock-btn small{display:none}
body.playing #xp-btn{grid-column:1/3}
body.playing #xp-btn>span{margin-left:auto}
body.playing .shop-cards{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
body.playing .shop-card{height:103px;min-height:0;border-radius:4px;position:relative;border-width:1px;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(120deg,#18303bd9,var(--tier-bg))}
body.playing .shop-card:hover{transform:translateY(-3px)}
body.playing .shop-top{height:58px;min-height:58px}
body.playing .shop-top img{height:57px;max-width:74px;filter:drop-shadow(0 4px 1px #020b1355)}
body.playing .shop-cost{left:5px;top:5px;font-size:10px;padding:1px 4px;border-radius:3px}
body.playing .shop-name{font-size:11px;padding:1px 4px 0;line-height:1.3}
body.playing .shop-meta{font-size:8px;padding:1px 3px;color:#bdd0d2}
body.playing .shop-price{font-size:8px;padding:3px 0;border-color:#bcc5a321}
body.playing .footer-status{display:none}
body.playing #hud-shop-toggle{display:none;align-self:center;margin-bottom:5px}
body.playing.hud-combat #hud-shop-toggle{display:block}
body.playing.hud-combat:not(.hud-shop-open) .shop-area,body.playing.hud-combat:not(.hud-shop-open) #hud-hint{display:none}
body.playing.hud-combat .game-footer{background:#0f2232db}
body.playing.hud-combat:not(.hud-shop-open) #hud-bottom{width:min(1030px,calc(100% - 430px))}
body.playing.hud-combat .deploy-button{background:#243944;color:#b4ccc8;border-color:#748f85;box-shadow:none;font-size:11px}
body.playing .arena-toast{top:14%;z-index:7;font-size:15px}
body.playing .global-toast{bottom:228px}
body.playing .combat-result{z-index:12}
body.playing #hud button:focus-visible,body.playing .shop-card:focus-visible{outline:2px solid #ffe099;outline-offset:2px}
@media(max-width:1500px){
 body.playing #hud-left{left:14px;width:149px;top:91px}
 body.playing #hud-right{right:14px;width:159px;top:91px}
 body.playing #hud-location{left:14px;top:18px}
 body.playing #map-name{font-size:10px;padding:7px 9px}
 body.playing #hud-stats{right:14px}
 body.playing #hud-topstats .header-end{gap:7px}
 body.playing #hud-bottom{width:calc(100% - 318px);bottom:10px}
 body.playing .shop-sidebar{width:133px;min-width:133px}
 body.playing .bench{gap:4px}
 body.playing .bench-title{width:44px;min-width:44px}
 body.playing .footer-head{gap:8px}
 body.playing .deploy-button{width:112px;min-width:112px;font-size:12px}
 body.playing .synergy-entry{min-height:27px;padding:3px 4px}
 body.playing .syn-icon{width:20px;height:20px;min-width:20px}
 body.playing .syn-top{font-size:9px}
 body.playing .item-grid{gap:3px}
 body.playing .item-slot{height:29px;min-width:27px;min-height:29px}
 body.playing .enemy-portrait{width:31px;min-width:31px;height:35px}
 body.playing .enemy-portrait img{width:26px;height:27px}
 body.playing .encounter-name{font-size:11px}
 body.playing .game-footer{padding:7px 9px 8px}
 body.playing .shop-area{height:106px}
 body.playing .shop-card{height:98px}
 body.playing .shop-top{height:54px;min-height:54px}
 body.playing .shop-top img{height:52px}
 body.playing .shop-name{font-size:10px}
 body.playing .header-middle{padding:7px 12px;gap:10px}
 body.playing .phase-pill{font-size:9px}
 body.playing .top-stat{min-width:44px}
}
@media(max-height:820px){
 body.playing #hud-left,body.playing #hud-right{top:87px;gap:7px}
 body.playing #hud-left .synergy-entry:nth-child(n+8){display:none}
 body.playing #hud-items,body.playing .hud-weather,body.playing #hud-opponent{padding:8px}
 body.playing #hud-clock{top:76px}
 body.playing .game-footer{gap:6px}
 body.playing #hud-hint{font-size:9px;min-height:17px;padding:1px}
 body.playing .shop-area{height:103px}
 body.playing .shop-top{height:49px;min-height:49px}
 body.playing .shop-top img{height:48px}
 body.playing .shop-card{height:95px}
 body.playing .shop-price{display:none}
 body.playing .global-toast{bottom:212px}
}
@media(max-width:1100px){
 body.playing #hud-bottom{width:calc(100% - 36px)}
 body.playing #hud-left,body.playing #hud-right{width:133px}
 body.playing #hud-location{top:65px}
 body.playing #hud-round{left:35%}
 body.playing #hud-stats{gap:2px}
 body.playing #hud-inspector{max-height:320px}
 body.playing .shop-sidebar{width:125px;min-width:125px}
}


body.playing #hud-level-chip{font-size:11px;color:#e2d8ad;border-right:1px solid #8b9d8466;padding:0 9px 0 3px;font-weight:800}

/* Compact controls must not grow over the first shop card. */
body.playing .shop-sidebar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);flex-shrink:0;width:164px;min-width:164px}
body.playing .shop-cards{min-width:0}
body.playing .reroll-btn,body.playing .lock-btn{min-width:0;width:100%;font-size:10px;padding:4px 2px}
body.playing #hud-synergy-toggle{min-height:24px;padding:4px;font-size:9px}
body.playing.hud-synergy-open #hud-synergies{max-height:42vh;overflow:auto;pointer-events:auto;scrollbar-width:thin}
body.playing.hud-synergy-open #hud-left .synergy-entry{display:flex}
body.playing.hud-synergy-open .syn-desc{display:block;font-size:9px;line-height:1.45}
body.playing.hud-synergy-open .syn-progress{display:block}

body.playing #hud-shop-gold{font-size:10px;color:#f6cf7d}