/* Shared interaction rhythm, scoped to the arena and fabrication screens. */
#game-shell,#bot-inventory,#recruit-page{--ui-ease:cubic-bezier(.2,.7,.2,1)}
#game-shell button,#bot-inventory button,#recruit-page button,#recruit-page a{transition:background-color .16s,border-color .16s,box-shadow .16s,color .16s,filter .16s,transform .16s var(--ui-ease)}
#game-shell button:disabled:hover,#bot-inventory button:disabled:hover,#recruit-page button:disabled:hover{filter:none;transform:none}
#game-shell button:active:not(:disabled),#bot-inventory button:active:not(:disabled),#recruit-page button:active:not(:disabled){transform:translateY(1px)}
#game-shell :is(button,a):focus-visible,#bot-inventory :is(button,input,[tabindex]):focus-visible,#recruit-page :is(button,a):focus-visible{outline:2px solid #fff0aa;outline-offset:2px}
#game-shell :is(.balance b,.arena-stats b,.hero-meta,.bot-stat b),#bot-inventory :is(.inventory-charge,.inventory-stats),#recruit-page :is(.mint-pricing,.mint-pull-note){font-variant-numeric:tabular-nums}
#game-shell :is(#heroes,.rightbar),#bot-inventory .inventory-grid,#recruit-page .mint-batch-grid{scrollbar-width:thin;scrollbar-color:#a45c56 #1a1017;scrollbar-gutter:stable;overscroll-behavior:contain;scroll-behavior:smooth}
body:has(#bot-inventory[open]),body:has(#mint-reveal[open]){overflow:hidden}
#game-shell .topbar{position:sticky;top:0;z-index:12}
#game-shell #heroes{grid-auto-rows:max-content;scroll-snap-type:y proximity;scroll-padding:4px;padding:4px 7px 4px 3px;gap:9px}
#game-shell .hero-card{scroll-snap-align:start;transition:border-color .18s,background-color .18s,box-shadow .18s;box-shadow:inset 0 1px #ffffff05,0 3px 10px #0002}
#game-shell .hero-card:hover{border-color:#b15b52}
#game-shell .hero-card.is-selected{border-color:#e9ba54;box-shadow:inset 3px 0 #e9ba54,0 3px 12px #0003}
#game-shell .hero-portrait{border-radius:0}
#game-shell .work-select{background-image:none;padding:3px 7px;border-radius:0;min-width:0}
#game-shell .hero-name{min-width:0;line-height:1.2}
#game-shell .hero-meta{min-width:0}
#game-shell .hero-meta b{font-variant-numeric:tabular-nums}
#game-shell .energy-track span{transition:width .35s linear}
#game-shell .mode-card,#game-shell .detail-panel{box-shadow:inset 0 1px #ffffff04,0 4px 14px #0002}
#game-shell .skill-detail{line-height:1.45;padding:6px 3px;min-height:29px}
#game-shell .chest-legend{gap:4px}
#game-shell .chest-legend>div{padding:3px 0}
#game-shell .chest-reward{font:10px 'Share Tech Mono',monospace;color:#ffe083;font-variant-numeric:tabular-nums}
#game-shell .chest-payout-note{margin:0;padding:0 10px 9px;text-align:center;font:9px/1.5 'Share Tech Mono',monospace;color:#ae8d99}
@media(min-width:1181px){
 #game-shell .sidebar{height:calc(100dvh - var(--header) - 32px);min-height:0;max-height:none}
 #game-shell #heroes{flex:1;min-height:0;align-content:start}
 #game-shell .rightbar{max-height:calc(100dvh - var(--header) - 32px);padding-right:6px}
 #game-shell .deploy-button{margin:10px 0 8px}
 #game-shell .inventory-button,#game-shell .hangar-button{min-height:34px;margin-bottom:8px}
 #game-shell .hero-info{grid-template-columns:minmax(0,1fr) 80px;column-gap:6px}
}
@media(min-width:1181px) and (max-height:800px){
 #game-shell .hero-info{grid-template-columns:minmax(0,1fr) 70px}
 #game-shell .mode-card{min-height:46px;padding:5px 9px}
 #game-shell .mode-card strong{font-size:15px;line-height:1.1}
 #game-shell .mode-card small{font-size:10px;line-height:1.2;margin-top:2px}
 #game-shell .hero-card{padding:5px 8px;row-gap:2px}
 #game-shell .hero-portrait{height:38px;width:34px}
 #game-shell .hero-portrait canvas{height:36px;width:31px}
 #game-shell .inventory-button,#game-shell .hangar-button{min-height:30px;height:30px;margin-bottom:7px}
 #game-shell .rightbar{gap:8px}
 #game-shell #activity{min-height:50px}
 #game-shell .panel-heading{height:29px}
 #game-shell .chest-legend canvas{width:28px;height:28px}
 #game-shell .chest-payout-note{font-size:8px;padding-bottom:6px}
}
@media(max-width:720px){
 #game-shell .topbar{position:relative}
 #game-shell #heroes{grid-template-columns:repeat(2,minmax(0,1fr));max-height:345px;gap:8px}
 #game-shell .hero-card{padding:10px 8px;gap:7px}
 #game-shell .hero-info{display:block}
 #game-shell .hero-name{font-size:15px}
 #game-shell .hero-meta{font-size:9px;margin:7px 0}
 #game-shell .work-select{height:30px;font-size:11px}
 #game-shell .bot-stat{font-size:11px}
 #game-shell .hero-meta .worker-state{font-size:8px}
}

/* Inventory: one scroll surface, stable card geometry and visible paging. */
#bot-inventory[open]{display:flex;flex-direction:column;gap:0;width:min(1100px,calc(100vw - 40px));height:min(780px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);padding:24px;overflow:hidden;box-shadow:0 24px 80px #0009;animation:ui-panel-in .18s var(--ui-ease)}
#bot-inventory::backdrop{background:#070509d9;backdrop-filter:blur(3px)}
#bot-inventory :is(.inventory-eyebrow,#inventory-title,#inventory-summary,.inventory-toolbar,.inventory-bottom){flex-shrink:0}
#bot-inventory #inventory-title{font-size:27px;padding-right:30px;line-height:1.25}
#bot-inventory #inventory-summary{margin:0 0 15px;font-size:12px;line-height:1.5}
#bot-inventory .inventory-toolbar{gap:9px;margin-bottom:12px;padding:10px 0}
#bot-inventory .inventory-filters button,#bot-inventory #inventory-deploy-all{min-height:36px}
#bot-inventory #inventory-search{min-height:36px;outline-offset:1px}
#bot-inventory .inventory-grid{flex:1;min-height:0;max-height:none;align-content:start;grid-auto-rows:max-content;gap:12px;padding:3px 7px 5px 3px}
#bot-inventory .inventory-card{display:flex;flex-direction:column;padding:12px;box-shadow:inset 0 1px #ffffff04;transition:border-color .18s,box-shadow .18s}
#bot-inventory .inventory-card:hover{border-color:var(--rarity);box-shadow:0 3px 14px #0003}
#bot-inventory .inventory-card-top{min-height:60px;align-items:center}
#bot-inventory .inventory-card-top strong{font-size:17px;line-height:1.25}
#bot-inventory .inventory-state{font-size:8px;line-height:1.4;min-height:12px}
#bot-inventory .inventory-energy{height:5px;margin-top:10px}
#bot-inventory .inventory-energy span{transition:width .5s linear}
#bot-inventory .inventory-charge{margin:6px 0 10px;font-size:10px;min-height:12px}
#bot-inventory .inventory-stats{padding:9px 0}
#bot-inventory .inventory-stats>span{font-size:12px}
#bot-inventory .inventory-skills{min-height:34px;padding:8px 0 0}
#bot-inventory .inventory-skills>span{width:22px;height:22px;outline-offset:1px}
#bot-inventory [data-inventory-action]{min-height:35px;margin-top:10px;font-size:14px}
#bot-inventory [data-inventory-action]:disabled{opacity:.48}
#bot-inventory .inventory-bottom{gap:12px;padding-top:12px;margin-top:8px;border-top:1px solid #61313c;min-height:46px}
#bot-inventory .inventory-bottom p{font-size:12px;line-height:1.4}
@media(max-width:720px){
 #bot-inventory[open]{width:calc(100vw - 20px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);padding:22px 12px 12px}
 #bot-inventory #inventory-title{font-size:23px}
 #bot-inventory #inventory-summary{font-size:10px;line-height:1.7;margin-bottom:10px}
 #bot-inventory .inventory-toolbar{gap:8px}
 #bot-inventory .inventory-grid{gap:8px;padding-right:4px}
 #bot-inventory .inventory-card{padding:9px}
 #bot-inventory .inventory-card-top{min-height:61px;gap:6px;align-items:flex-start}
 #bot-inventory .inventory-card-top strong{font-size:14px}
 #bot-inventory .inventory-card-top canvas{width:31px;height:40px}
 #bot-inventory .inventory-state{font-size:7px;letter-spacing:0}
 #bot-inventory .inventory-card-top small{font-size:8px}
 #bot-inventory .inventory-charge{font-size:9px}
 #bot-inventory .inventory-stats>span{font-size:11px}
 #bot-inventory .inventory-skills small{font-size:7px}
 #bot-inventory [data-inventory-action]{font-size:12px}
 #bot-inventory .inventory-bottom{align-items:center}
 #bot-inventory .inventory-bottom p{font-size:10px;max-width:60%}
}

/* Fabrication controls stay together; result cards scroll without moving actions. */
.site-shell #recruit-page .mint-actions{width:380px;max-width:calc(100vw - 48px);padding:14px 18px 12px;margin-bottom:16px;background:linear-gradient(145deg,#22151de8,#0e0c12ee);border:1px solid #82502f;border-top-color:#c89449;box-shadow:0 8px 28px #0005;min-height:0}
.site-shell #recruit-page .mint-actions :is(.mint-pricing,.mint-quantity,.mint-primary){width:100%;max-width:100%}
.site-shell #recruit-page .mint-pricing{height:30px;margin-bottom:10px;padding:0;gap:10px}
.site-shell #recruit-page .mint-pricing>span{font-size:8px;line-height:10px;gap:4px}
.site-shell #recruit-page .mint-pricing b{font-size:13px;line-height:15px}
.site-shell #recruit-page .mint-quantity{height:35px;gap:6px;margin-bottom:10px}
.site-shell #recruit-page .mint-quantity button{font-size:17px}
.site-shell #recruit-page .mint-primary{min-height:51px;font-size:25px;padding:10px 16px;gap:14px}
.site-shell #recruit-page .mint-pull-note{font-size:12px;min-height:17px;margin-top:10px}
.site-shell #recruit-page .mint-status{font-size:11px;margin-top:6px;min-height:16px;max-width:100%}
.site-shell #recruit-page .mint-progress{left:23px;right:23px;top:137px}
.site-shell #recruit-page .mint-rolls{width:240px;left:calc(50% + 210px)}
.site-shell #recruit-page .mint-rolls p{font-size:16px;gap:12px}
.site-shell #recruit-page .mint-rarity{font-size:12px;gap:8px}
.site-shell #recruit-page .mint-rarity small{font-size:10px;color:#d1bdc6;margin-left:2px}
.site-shell #recruit-page .mint-possibilities{width:min(920px,calc(100% - 200px));padding:13px 20px 10px}
.site-shell #recruit-page .mint-possibilities #mint-rarities{gap:12px;flex-wrap:wrap;justify-content:center}
.site-shell #recruit-page .mint-odds{display:none}
.site-shell #recruit-page .mint-capacity{border:1px solid #5a3039;background:#0d0b11bf;right:38px}
.site-shell #recruit-page .mint-reveal{animation:ui-panel-in .18s var(--ui-ease);scrollbar-gutter:stable}
.site-shell #recruit-page .mint-reveal.is-batch[open]{display:flex;flex-direction:column;height:min(800px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);overflow:hidden;padding:24px}
.site-shell #recruit-page .is-batch #mint-result-title{font-size:30px;margin-top:4px}
.site-shell #recruit-page #mint-batch-result:not([hidden]){display:flex;flex:1;min-height:0;flex-direction:column}
.site-shell #recruit-page .mint-batch-top{margin:13px 0 12px;flex-shrink:0}
.site-shell #recruit-page .mint-batch-summary{margin-bottom:12px;gap:8px;flex-shrink:0}
.site-shell #recruit-page .mint-batch-grid{flex:1;min-height:0;max-height:none;align-content:start;padding:3px 7px 5px 3px}
.site-shell #recruit-page .mint-batch-card{animation-name:ui-card-in;animation-duration:.28s;animation-fill-mode:backwards;padding:14px 10px 10px}
.site-shell #recruit-page .mint-batch-card:hover{transform:translateY(-2px)}
.site-shell #recruit-page .mint-batch-card>strong{font-size:16px}
.site-shell #recruit-page .mint-batch-hint{font-size:11px;margin:10px 0 0;flex-shrink:0}
.site-shell #recruit-page .mint-saved{font-size:12px;line-height:1.5;margin:12px 0;flex-shrink:0}
.site-shell #recruit-page .mint-result-buttons{flex-shrink:0;gap:10px}
.site-shell #recruit-page .mint-result-buttons :is(button,a){min-height:38px}
@media(min-width:721px) and (max-height:800px){
 .site-shell #recruit-page{padding-top:13px}
 .site-shell #recruit-page .mint-heading h1{font-size:43px}
 .site-shell #recruit-page .mint-heading p:not(.site-eyebrow){font-size:12px}
 .site-shell #recruit-page .mint-stage{min-height:180px;margin:0 190px}
 .site-shell #recruit-page .mint-machine{height:180px}
 .site-shell #recruit-page .mint-actions{padding-top:12px;padding-bottom:10px;margin-bottom:8px}
 .site-shell #recruit-page .mint-possibilities{margin-bottom:7px}
 .site-shell #recruit-page .mint-rolls{top:27%;left:calc(50% + 220px);width:220px;padding:15px}
 .site-shell #recruit-page .mint-rolls h2{font-size:10px;margin-bottom:14px}
 .site-shell #recruit-page .mint-rolls p{font-size:14px}
 .site-shell #recruit-page .mint-batch-card>canvas{width:70px;height:80px}
}
@media(min-width:721px) and (max-width:1100px){
 .site-shell #recruit-page .mint-rolls{display:none}
 .site-shell #recruit-page .mint-capacity{right:22px;width:120px}
 .site-shell #recruit-page .mint-possibilities{width:calc(100% - 80px)}
}
@media(max-width:720px){
 .site-shell #recruit-page .mint-actions{max-width:calc(100vw - 36px);width:344px;padding:13px 14px}
 .site-shell #recruit-page .mint-pricing b{font-size:12px}
 .site-shell #recruit-page .mint-primary{font-size:24px}
 .site-shell #recruit-page .mint-rolls{left:auto;width:100%;padding:10px;gap:10px}
 .site-shell #recruit-page .mint-rolls p{font-size:10px;gap:5px}
 .site-shell #recruit-page .mint-capacity{right:auto;border:0;border-block:1px solid #4d2a32}
 .site-shell #recruit-page .mint-possibilities{width:100%;padding:13px 12px 10px}
 .site-shell #recruit-page .mint-possibilities #mint-rarities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 15px;justify-content:stretch}
 .site-shell #recruit-page .mint-rarity{font-size:11px}
 .site-shell #recruit-page .mint-reveal.is-batch[open]{width:calc(100vw - 20px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);padding:23px 12px 14px}
 .site-shell #recruit-page .is-batch #mint-result-title{font-size:25px}
 .site-shell #recruit-page .mint-batch-summary>span{font-size:8px}
 .site-shell #recruit-page .mint-batch-card{padding:12px 8px 8px}
 .site-shell #recruit-page .mint-batch-card>strong{font-size:14px}
 .site-shell #recruit-page .mint-card-skills small{font-size:7px}
 .site-shell #recruit-page .mint-saved{font-size:11px}
}
@keyframes ui-panel-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes ui-card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#game-shell *,#bot-inventory *,#recruit-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}#bot-inventory,#recruit-page .mint-reveal{animation:none!important}}