.training-layout { grid-template-columns: minmax(0, 1fr); }
.hero-clan { margin-top: .3rem; font-size: .875rem; line-height: 1.4; color: #d5c297; }
.formation-heading { flex-wrap: wrap; }
.formation-rewards { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .8rem; margin-left: auto; }
.formation-rewards > span, .formation-rewards small { color: #c5cbbd; font-size: .875rem; font-weight: 400; }
.formation-rewards strong { color: #d6ebbe; font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.training-reward-actions { grid-column: 1 / -1; min-width: 0; }
.training-reward-actions[hidden] { display: none; }
.training-action-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.training-reward-actions .availability-note, .funded-rewards { text-align: left; color: #c5cbbd; font-size: .875rem; line-height: 1.6; margin-top: .6rem; }
.funded-rewards { margin-top: .2rem; }
.training-reward-actions .claim-button:disabled { opacity: 1; color: #c2c8b9; background: #363e30; border: 1px solid #677055; }
.hero-select { padding: 0; display: block; width: 100%; text-align: left; }
.bulk-selection { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 0 0 1rem; }
.bulk-selection button { min-height: 44px; font-size: .9375rem; }
.bulk-selection button:disabled { cursor: default; opacity: .45; }
.formation-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); max-height: min(720px, 65svh); overflow-y: auto; padding: 3px; scrollbar-gutter: stable; overscroll-behavior: contain; }
.formation-grid .hero-frame { aspect-ratio: 1; }
.formation-grid .hero-frame img, .formation-grid .hero-placeholder { height: 100%; width: 100%; }
@media (max-width: 760px) { .formation-heading h2 { flex: 1; } .formation-rewards { order: 1; flex-basis: 100%; margin-left: 0; } .training-action-buttons > button { flex: 1 1 180px; } }
#nft-grid { max-height: 55svh; overflow-y: auto; padding: 3px; scrollbar-gutter: stable; overscroll-behavior: contain; }
.formation-grid:focus-visible, #nft-grid:focus-visible { outline: 2px solid #e6c683; outline-offset: 4px; }
.hero-select:disabled { opacity: 1; }
.formation-hero.is-selected { border-color: #e6c683; box-shadow: 0 0 0 2px #d8b26d; }
.hero-placeholder { display: grid; place-items: center; height: clamp(230px,25vw,350px); background: #293026; color: #b6b59b; font: 4rem Georgia, serif; }
.hero-placeholder:not([hidden]) + img { position: absolute; inset: 0; }
.hero-placeholder { position: relative; overflow: hidden; font-size: .9375rem; }
.hero-placeholder.is-loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, #b4c7a426 48%, transparent 76%); transform: translateX(-100%); animation: dojo-shimmer 1.6s ease-in-out infinite; }
.is-loading::before { content: ''; display: inline-block; width: .85em; height: .85em; margin-right: .5rem; border: 2px solid #c1ccad50; border-top-color: #ebd29a; border-radius: 50%; vertical-align: -.05em; animation: dojo-spin .85s linear infinite; flex-shrink: 0; }
.hero-placeholder.is-loading::before { content: none; }
.formation-loading { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; padding: 1.25rem 0; color: #e4d9bd; font-size: .9375rem; }
.loading-track { flex-basis: 100%; height: 3px; background: #d4c59320; overflow: hidden; margin-top: .6rem; }
.loading-track::after { content: ''; display: block; width: 30%; height: 100%; background: #d8bc7a; animation: dojo-progress 1.5s ease-in-out infinite alternate; }
@keyframes dojo-spin { to { transform: rotate(360deg); } }
@keyframes dojo-shimmer { to { transform: translateX(100%); } }
@keyframes dojo-progress { from { transform: translateX(-100%); } to { transform: translateX(333%); } }
@media (prefers-reduced-motion: reduce) { .is-loading::before, .hero-placeholder.is-loading::after, .loading-track::after { animation: none; } }
.hero-training-note span { font-variant-numeric: tabular-nums; }
.training-message { padding: .9rem 0; margin-top: 1rem; font-size: .9375rem; color: #e1d4be; line-height: 1.65; overflow-wrap: anywhere; }
.training-message:empty { display: none; }
.queue-token { font-size: .875rem; padding: .25rem .4rem; border: 1px solid #6c705b; margin-right: .3rem; }
.pool-explanation { grid-column: 1/-1; font-size: .9375rem; color: #c6cabd; max-width: 980px; }
.withdraw-button { width: 100%; margin-top: 1.15rem; }
.exited-rewards { margin-top: 1.5rem; border-top: 1px solid #7c795e; padding-top: 1rem; }
.exited-rewards strong { font-size: 1rem; font-weight: 500; }
.exited-rewards p { margin: .5rem 0 1rem; color: #d2d6c8; font-size: .9375rem; }
.manual-heroes { margin-top: 1.5rem; border-top: 1px solid #555b49; padding-top: 1.25rem; }
.manual-heroes label { display: block; margin-bottom: .6rem; }
.manual-heroes > div { display: flex; gap: .7rem; flex-wrap: wrap; }
.manual-heroes input { min-width: 0; flex: 1 1 160px; border: 1px solid #8d927b; padding: .7rem 1rem; font: inherit; background: #11170f; color: #f1e8d5; }
.manual-heroes p { font-size: .875rem; color: #c5cabb; margin-top: .5rem; }
.inventory-hero .hero-placeholder { height: auto; aspect-ratio: 1; }
.inventory-hero img { height: auto; aspect-ratio: 1; }
.inventory-hero .hero-status { font-size: .875rem; }
.training-confirm { max-width: 560px; width: calc(100% - 2rem); max-height: calc(100svh - 2rem); overflow: auto; border: 1px solid #b99b6f; padding: 2rem; background: #1c231a; color: #f1eee4; }
.training-confirm::backdrop { background: rgba(5,9,6,.88); }
.training-confirm h2 { font: 400 2rem/1.2 Georgia,serif; margin: .8rem 0 1.4rem; }
.training-confirm p { font-size: 1rem; line-height: 1.6; color: #d3d7c9; margin-bottom: 1rem; overflow-wrap: anywhere; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; margin-top: 1.75rem; }
#wallet-options { display: grid; gap: .75rem; margin-bottom: 1.25rem; }
body:has(.training-confirm[open]) { overflow: hidden; }
@media (max-width:760px) { .hero-placeholder { height: auto; aspect-ratio: .9; } .dojo-nav-actions { gap: .6rem; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; } }
@media (max-width:460px) { .hero-placeholder { aspect-ratio: 1; } .training-confirm { padding: 1.25rem; } .confirm-actions { flex-direction: column-reverse; } .dojo-brand .brand-divider, .dojo-wordmark { display: none; } }