/* Approved in-game preview. All presentation is scoped away from the website. */
#game-shell{--value-font:Arial,Helvetica,sans-serif}
#game-shell :is(.balance b,.arena-stats b,.bot-stat b,.hero-meta b,.loadout-row b,.chest-reward,.squad-status b){font-family:var(--value-font);font-variant-numeric:tabular-nums;letter-spacing:0}
#game-shell .hero-card{min-width:0;border:1px solid #b23542;border-radius:5px;background:linear-gradient(125deg,#2b171f,#1b1118);padding:10px 12px;grid-template-columns:45px minmax(0,1fr);gap:6px 9px;box-shadow:0 2px 7px #0003}
#game-shell .hero-card.is-selected{border-color:#ffe26a;box-shadow:0 0 8px #ffbc2426}
#game-shell .hero-portrait{border-radius:3px;width:45px;height:52px}
#game-shell .hero-portrait canvas{width:41px;height:48px}
#game-shell .hero-info{display:grid;grid-template-columns:minmax(0,1fr) 78px;column-gap:6px;align-items:center}
#game-shell .hero-name{grid-column:1/-1;gap:5px;font-size:17px;line-height:1.25}
#game-shell .hero-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#game-shell .rarity{font-size:9px;margin-left:auto}
#game-shell .selected-badge{display:none;font:700 8px/1 Arial,sans-serif;color:#281b0b;background:#ffe16b;padding:3px 4px;border-radius:2px}
#game-shell .is-selected .selected-badge{display:inline-block}
#game-shell .energy-track{grid-column:1/-1;height:4px;margin:5px 0}
#game-shell .hero-meta{grid-column:1;grid-row:3;font-size:11px;margin:0;line-height:1.3}
#game-shell .hero-meta b{font-size:11px;font-weight:600}
#game-shell .hero-meta .pixel-icon{width:12px;height:12px}
#game-shell .hero-meta:after,#game-shell .hero-meta .worker-state{display:none}
#game-shell .work-select{grid-column:2;grid-row:3;font:700 11px Arial,sans-serif;height:25px;padding:3px 5px;border-radius:3px}
#game-shell .work-select:not(.ready):not(:disabled){border-color:#6b9a53;color:#bce48f;background:#1e3020}
#game-shell .bot-stats{padding:6px 0 0;gap:5px;border-top:0}
#game-shell .bot-stat{flex-direction:row;justify-content:center;gap:5px;font-size:13px;line-height:1.1}
#game-shell .bot-stat b{font-weight:700}
#game-shell .bot-stat .pixel-icon{width:14px;height:14px}
#game-shell .bot-skills{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:5px 0 2px;min-height:28px;border:0;gap:5px 8px;min-width:0}
#game-shell .hero-skill-meta{display:flex;flex:1 0 68px;align-items:center;gap:6px;min-width:0}
#game-shell .hero-skill-list{display:flex;flex:0 1 auto;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;min-width:0;max-width:100%}
#game-shell .skill-count{display:inline;font-size:9px;margin-right:0;white-space:nowrap}
#game-shell .card-status{font:700 8px Arial,sans-serif;color:#e9c36f;margin:0}
#game-shell .card-status.is-working{color:#b5df83}
#game-shell .skill-badge{flex:0 0 21px;width:21px;height:21px;border-radius:2px;padding:3px}
#game-shell .skill-badge .pixel-icon{width:13px;height:13px}
#game-shell .squad-title{padding:11px 3px 7px}
#game-shell .squad-title>small{font:11px Arial,sans-serif;color:#dbccd3}
#game-shell .squad-status{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:0 1px 7px}
#game-shell .squad-status>span{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;padding:6px 4px;border:1px solid #744150;border-radius:3px;background:#271720;font:11px/1 Arial,sans-serif;white-space:nowrap;color:#d7c5d2}
#game-shell .squad-status .pixel-icon{width:14px;height:14px}
#game-shell .squad-status .status-working{color:#ffe477;border-color:#9c692d}
#game-shell .squad-status .status-ready{color:#c1d2ee}
#game-shell .squad-status .status-reserve{color:#e9c788}
#game-shell .squad-status .status-recharging{color:#c7b6ec}
#game-shell .deploy-button{background:linear-gradient(#ffe96b,#ffd32f);border:1px solid #ffe887;border-radius:4px;height:40px;min-height:40px;font:700 17px 'Rajdhani',sans-serif;box-shadow:0 2px 8px #0004;isolation:isolate}
#game-shell .deploy-button.is-ready{box-shadow:0 0 12px #ffbc2533}
#game-shell :is(.mode-card,.detail-panel,.inventory-button,.workshop-button){border-radius:5px}
#game-shell .mode-card{border-width:1px;border-bottom-width:2px}
#game-shell .detail-panel{border:1px solid #ad3442;background:linear-gradient(125deg,#2b161e,#1b1118);overflow:hidden}
#game-shell .panel-heading{height:34px;font-size:12px;letter-spacing:.4px;border-color:#70303e}
#game-shell #goals-panel .panel-heading{padding:0;height:auto;min-height:38px;border:0;display:flex}
#goals-toggle{display:flex;align-items:center;gap:7px;width:100%;min-height:38px;text-align:left;padding:7px 10px;border:0;background:transparent;color:#ffe37d;font:12px 'Share Tech Mono',monospace}
#goals-toggle .pixel-icon{width:19px;height:19px}
#goals-summary{margin-left:auto;font:700 10px Arial,sans-serif;white-space:nowrap;color:#e8d6bf}
.goals-chevron{font:bold 25px/1 Arial,sans-serif;transform:rotate(90deg);transition:transform .15s}
#goals-toggle[aria-expanded=false] .goals-chevron{transform:none}
#game-shell .goal-row{font-size:13px;margin:10px}
#game-shell .loadout-bot{gap:10px;padding-bottom:10px;margin-bottom:7px}
#game-shell .loadout-bot canvas{width:43px;height:49px}
#game-shell .loadout-bot strong{font-size:19px}
#game-shell .loadout-bot small{font-size:10px;color:var(--rarity)}
#game-shell #loadout{padding:11px 12px}
#game-shell .loadout-row{margin-top:5px;min-height:24px;font-size:15px}
#game-shell .loadout-row b{font-size:14px;font-weight:700}
#game-shell .loadout-row .pixel-icon{width:17px;height:17px}
#game-shell .loadout-row>span{gap:9px}
#game-shell .balance-hint{font:11px/1.4 Arial,sans-serif;margin-top:10px;padding-top:8px}
#game-shell .loadout-skills{margin-top:9px;padding-top:8px}
#game-shell .loadout-skills h3{font-size:11px;margin-bottom:5px}
#game-shell .skill-detail{font-size:14px;min-height:30px;line-height:1.3;padding:5px 0;gap:10px}
#game-shell .skill-detail .pixel-icon{width:19px;height:19px}
#game-shell #activity{min-height:54px;padding:4px 11px 8px}
#game-shell .log-entry{font-size:12px;line-height:1.25;min-height:32px;padding-top:6px}
#game-shell .log-entry small{font-size:8px;margin-top:3px}
#game-shell .chest-legend{padding:10px 9px 6px;gap:5px}
#game-shell .chest-legend canvas{width:34px;height:34px;object-fit:contain}
#game-shell .chest-legend span{font-size:10px}
#game-shell .chest-reward{font-size:13px;font-weight:700;color:#ffe16b}
#game-shell .chest-payout-note{font:9px/1.4 Arial,sans-serif;padding:0 9px 8px}
#game-shell .arena-stats b{font-size:17px;font-weight:700}
#game-shell .arena-stats small{font-size:9px}
#game-shell .balance b{font-size:21px}
#game-shell .brand-tag{white-space:nowrap}
@media(min-width:721px) and (max-width:1450px){#game-shell .save-state{display:none}#game-shell .topbar{gap:10px;padding-left:16px;padding-right:16px}}
@media(min-width:1181px){
 #game-shell{--rail:clamp(260px,22vw,370px);--board:min(calc((100dvh - var(--header) - 180px)*17/13),calc(100vw - var(--rail)*2 - 64px),1100px)}
 #game-shell .workspace{gap:14px;padding:12px 18px;max-width:2040px}
 #game-shell .sidebar{height:calc(100dvh - var(--header) - 24px)}
 #game-shell .rightbar{max-height:calc(100dvh - var(--header) - 24px);gap:9px;align-content:start;padding-right:0;scrollbar-gutter:auto}
 #game-shell .mode-card{min-height:54px;padding:7px 11px}
 #game-shell .mode-card strong{font-size:17px}
 #game-shell .mode-card small{font-size:11px;margin-top:3px}
 #game-shell #heroes{padding:2px 5px 3px 2px;gap:8px}
 #game-shell .inventory-button{height:33px;min-height:33px;margin-bottom:7px}
 #game-shell .workshop-button{height:43px;min-height:43px;padding:7px 10px}
 #game-shell .workshop-button small{display:none}
 #game-shell .deploy-button{margin:8px 0 7px}
}
@media(min-width:1181px) and (max-height:800px){
 #game-shell .mode-card{min-height:45px;padding:5px 10px}
 #game-shell .hero-card{padding:7px 10px;row-gap:4px}
 #game-shell .hero-name{font-size:15px}
 #game-shell .hero-portrait{height:44px;width:38px}
 #game-shell .hero-portrait canvas{width:35px;height:41px}
 #game-shell .hero-card{grid-template-columns:38px minmax(0,1fr)}
 #game-shell .card-status{font-size:7px;margin-left:3px}
 #game-shell .skill-count{font-size:8px}
 #game-shell .bot-skills{min-height:26px;padding-top:3px;padding-bottom:2px}
 #game-shell .loadout-row{min-height:20px;font-size:14px;margin-top:3px}
 #game-shell .loadout-row b{font-size:13px}
 #game-shell .loadout-bot{padding-bottom:7px;margin-bottom:5px}
 #game-shell .loadout-bot canvas{width:35px;height:42px}
 #game-shell .loadout-bot strong{font-size:17px}
 #game-shell .skill-detail{font-size:12px;min-height:25px;padding:3px 0}
 #game-shell .skill-detail .pixel-icon{width:16px;height:16px}
 #game-shell .panel-heading{height:30px;font-size:11px}
 #game-shell #loadout{padding:9px 10px}
 #game-shell .loadout-skills{margin-top:6px;padding-top:6px}
 #game-shell .balance-hint{margin-top:6px;padding-top:5px;font-size:10px}
 #game-shell .chest-legend{padding-top:7px}
 #game-shell .chest-legend canvas{height:29px;width:29px}
 #game-shell .log-entry{font-size:11px;min-height:28px}
 #game-shell .selected-badge{font-size:7px;padding:3px}
}
@media(min-width:721px) and (max-width:1180px){
 #game-shell .selected-badge{font-size:7px}
 #game-shell .hero-name{font-size:15px;flex-wrap:wrap}
 #game-shell .rarity{font-size:8px}
 #game-shell .squad-status>span{font-size:10px;padding:5px 3px}
}
@media(min-width:1181px) and (max-height:740px){
 #game-shell .panel-heading{height:28px}
 #game-shell .loadout-row{min-height:18px;margin-top:2px;font-size:13px}
 #game-shell .loadout-bot canvas{height:36px;width:32px}
 #game-shell .loadout-bot{padding-bottom:5px;margin-bottom:4px}
 #game-shell .loadout-bot strong{font-size:16px}
 #game-shell .skill-detail{min-height:22px;padding:2px 0;font-size:11px}
 #game-shell .skill-detail .pixel-icon{height:15px;width:15px}
 #game-shell .loadout-skills{margin-top:5px;padding-top:5px}
 #game-shell #activity{height:60px;min-height:0;max-height:60px;overflow-y:auto;padding-top:1px}
 #game-shell .log-entry{font-size:10px;min-height:27px;padding-top:4px}
 #game-shell .chest-legend{padding:5px 7px 3px}
 #game-shell .chest-legend>div{gap:3px;padding:1px 0}
 #game-shell .chest-legend canvas{height:27px;width:27px}
 #game-shell .chest-legend span{font-size:9px}
 #game-shell .chest-reward{font-size:12px}
 #game-shell .chest-payout-note{font-size:8px;padding-bottom:5px}
}
@media(max-width:720px){
 #game-shell .sidebar{display:flex;flex-direction:column;max-height:none}
 #game-shell .squad-status{width:100%}
 #game-shell #heroes{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));max-height:365px}
 #game-shell .hero-card{display:flex;flex-wrap:wrap;padding:9px;gap:7px}
 #game-shell .hero-portrait{width:34px;height:42px}
 #game-shell .hero-portrait canvas{width:31px;height:38px}
 #game-shell .hero-info{display:flex;flex:1;min-width:75px;flex-direction:column;align-items:stretch;gap:4px}
 #game-shell .hero-name{font-size:14px;flex-wrap:wrap;gap:3px}
 #game-shell .rarity{font-size:7px}
 #game-shell .selected-badge{font-size:6px}
 #game-shell .hero-meta,#game-shell .hero-meta b{font-size:9px}
 #game-shell .work-select{height:26px;font-size:10px}
 #game-shell .energy-track{margin:2px 0}
 #game-shell .bot-stats{gap:2px}
 #game-shell .bot-stat{flex-direction:column;gap:3px;font-size:11px}
 #game-shell .bot-stat .pixel-icon{width:12px;height:12px}
 #game-shell .bot-skills{flex-wrap:wrap;justify-content:space-between;gap:5px;padding-bottom:3px}
 #game-shell .hero-skill-meta{flex-basis:34px}
 #game-shell .hero-skill-list{gap:3px}
 #game-shell .skill-count,#game-shell .card-status{font-size:7px}
 #game-shell .skill-count{margin-right:0}
 #game-shell .card-status{display:none}
 #game-shell .deploy-button,#game-shell .inventory-button,#game-shell .workshop-button{width:100%;margin:6px 0 0}
 #game-shell .rightbar .detail-panel{display:none}
 #game-shell .rightbar .detail-panel.active{display:block}
 #game-shell #goals-panel .panel-heading{display:flex}
 #game-shell #goals-summary{font-size:10px}
}