/* Keep navigation on its own row instead of competing with account controls. */
body > header {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 52px max-content max-content max-content;
  grid-template-areas: "brand search coin wallet profile" "navigation navigation navigation navigation navigation";
  align-items: center;
  gap: 20px 16px;
  width: calc(100% - 80px);
  max-width: 1380px;
  margin: 24px auto 0;
  padding: 22px 24px 0;
}
header .brand { grid-area: brand; justify-self: start; }
header .global-search { grid-area: search; width: 52px; min-width: 52px; height: 48px; margin: 0; }
header #owncoin { grid-area: coin; margin: 0; min-height: 48px; padding: 9px 16px; }
header #connectWallet { grid-area: wallet; min-height: 48px; padding: 12px 20px; }
header #me { grid-area: profile; min-height: 48px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
header nav {
  grid-area: navigation;
  display: flex;
  width: 100%;
  margin: 0;
  padding: 10px 0 0;
  gap: 12px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-padding-inline: 8px;
}
header nav button { flex: 0 0 auto; padding: 15px 22px 18px; white-space: nowrap; }
.statusbar { gap: 16px; }
.statusbar > span { line-height: 1.7; }
.statusbar > button { flex-shrink: 0; }
@media (max-width: 900px) {
  body > header {
    grid-template-columns: minmax(0, 1fr) 52px max-content;
    grid-template-areas: "brand search profile" "coin wallet wallet" "navigation navigation navigation";
    gap: 16px 12px;
    padding: 20px 20px 0;
  }
  header #owncoin { justify-self: start; }
  header #connectWallet { justify-self: end; }
  header nav { gap: 6px; }
  header nav button { padding-inline: 18px; }
}
@media (max-width: 650px) {
  body > header { width: calc(100% - 32px); margin: 16px auto 0; padding: 16px 14px 0; gap: 14px 10px; }
  header .brand { font-size: 24px; }
  header .brand span { font-size: 9px; letter-spacing: 2px; }
  header #me { width: 46px; padding: 10px; }
  header #me span { display: none; }
  header #owncoin { font-size: 11px; padding: 9px 12px; }
  header #owncoin span { font-size: 10px; }
  header #connectWallet { font-size: 16px; padding: 11px 16px; }
  header nav { gap: 4px; }
  header nav button { font-size: 16px; padding: 14px 14px 16px; }
  .statusbar { align-items: flex-start; margin-top: 18px; margin-bottom: 18px; }
}

.brand .brand-version{display:inline;font-size:10px;letter-spacing:1px;margin-left:7px;color:#aaba9c;vertical-align:super;white-space:nowrap}
.xp-panel{margin:20px 0}.xp-panel h2{margin:8px 0}.xp-panel progress{width:100%;height:12px;accent-color:#f58b45;margin:12px 0}.xp-panel .spaced{gap:12px;flex-wrap:wrap}.xp-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.xp-inputs label{display:grid;gap:6px}.xp-inputs input,.xp-inputs select{width:100%;min-width:0}.boardhead:has(.clan-period){flex-wrap:wrap;gap:12px}.boardhead .tabs:has(.clan-period){flex-wrap:wrap}
.premium-section{margin-top:28px}.premium-thumb{height:200px;display:grid;place-items:center}.premium-thumb .fitting-player{transform:scale(.8);transform-origin:center}.premium-section .gear{gap:12px}.swatches{flex-wrap:wrap}
.cash-total{font:clamp(24px,5vw,38px) 'IBM Plex Mono',monospace;display:block;margin:18px 0}.cash-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.cash-actions button{flex:1;white-space:nowrap}.cash-trade{margin:18px 0}.cash-trade input{display:block}#cashFlow label{display:block;margin-top:16px}#cashOwner{margin:15px 0}
.cash-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}.cash-menu button{text-align:left;padding:20px}.cash-menu strong,.cash-menu small{display:block}.cash-menu small{margin-top:8px;color:var(--muted);line-height:1.5}.cash-total{width:100%;text-align:left;border-color:#627354}.cash-menu button:disabled{opacity:.65;cursor:not-allowed}@media(max-width:550px){.cash-menu{grid-template-columns:1fr}}
.clan-membership-bar{padding:16px 24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line)}.membership-comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.membership-comparison section{padding:15px;border:1px solid var(--line)}.clan-premium-preview{--clan-accent:#84dfb1;position:relative;animation:clanPulse 3s ease-in-out infinite;border-color:var(--clan-accent)}.clan-premium-preview .clan-mark{box-shadow:0 0 16px var(--clan-accent)}.clan-premium-preview .clan-cover{background-size:cover;background-position:center}.clan-effect-gold{--clan-accent:#f5c75a}.clan-effect-plasma{--clan-accent:#b998ff}.clan-effect-plasma .clan-cover{background-color:#34204b}.clan-effect-gold .clan-cover{background-color:#4d3b16}@keyframes clanPulse{50%{box-shadow:0 0 22px color-mix(in srgb,var(--clan-accent) 35%,transparent)}}@media(prefers-reduced-motion:reduce){.clan-premium-preview{animation:none}}@media(max-width:550px){.membership-comparison{grid-template-columns:1fr}}
.catalog-switch{display:grid!important;grid-template-columns:1fr 1fr;padding:0!important;gap:0!important}.catalog-switch button{font-size:23px;font-weight:700;padding:20px;border:0;background:transparent}.catalog-switch button.active{background:#303c29;box-shadow:inset 0 -3px var(--orange);color:var(--bone)}.catalog-switch button+button{border-left:1px solid var(--line)}[hidden]{display:none!important}.hair-color-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:16px 0}.hair-color-row input{width:56px;height:44px;padding:4px}.hair-color-row .mini{flex-basis:100%}
.clan-leaders{margin:0 0 24px}.clan-leaders .boardhead{flex-wrap:wrap;gap:15px}.clan-leaders h2{margin:8px 0}.clan-winner{background:transparent;border:0;display:flex;flex-direction:column;align-items:center;min-width:0}.clan-winner .podium-name{display:grid;gap:8px;text-align:center}.clan-winner .podium-name strong{overflow-wrap:anywhere}.clan-winner .large{margin:10px}.clan-summary{margin-top:24px}.clan-cover .tag{background:#121a14df}@media(prefers-reduced-motion:reduce){.clan-cover{background-image:none!important}}
.matching-item{display:block!important;width:100px;height:115px!important;overflow:hidden}.matching-item .fitting-player{width:100px!important;height:115px!important;transform:none!important}.matching-item canvas{width:100px!important;height:115px!important}.matching-item .diamond-sparkle{display:none}.aura-catalog{margin-top:30px}.aura-stage{position:relative;width:190px;height:250px;isolation:isolate;display:grid;place-items:center;margin:auto;--aura:#6df4bf}.aura-stage>.fitting-player{z-index:2;position:relative}.aura-energy{position:absolute;inset:24px 12px 5px;border-radius:48% 48% 30% 30%;background:radial-gradient(ellipse,var(--aura),transparent 68%);opacity:.42;filter:blur(8px);animation:auraBreathe 2.4s ease-in-out infinite;z-index:0}.aura-particles{position:absolute;inset:8px;z-index:3;pointer-events:none}.aura-sparks{--aura:#ffd45a}.aura-plasma{--aura:#ad79ff}.aura-sparks .aura-particles:before,.aura-plasma .aura-particles:before,.aura-sparks .aura-particles:after,.aura-plasma .aura-particles:after{content:'';position:absolute;left:10%;top:80%;width:3px;height:12px;background:var(--aura);box-shadow:125px -90px 4px var(--aura),8px -145px 3px var(--aura),140px -20px 5px var(--aura),75px -175px 4px var(--aura);transform:rotate(18deg);animation:auraRise 1.8s linear infinite}.aura-particles:after{animation-delay:-.9s!important;left:20%!important}.aura-card-preview{min-height:250px}.inspection-stage .aura-stage{transform:none}@keyframes auraBreathe{50%{opacity:.7;transform:scale(1.09,1.05)}}@keyframes auraRise{0%{opacity:0;transform:translateY(12px) rotate(18deg)}25%{opacity:.8}100%{opacity:0;transform:translateY(-35px) rotate(-15deg)}}@media(prefers-reduced-motion:reduce){.aura-energy,.aura-particles:before,.aura-particles:after{animation:none!important}.aura-particles{display:none}}

/* Item catalog artwork never contains a player canvas. */
.inventory-item{display:block;width:120px;height:140px;margin:auto;background:none}.inventory-item canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.inventory-item.shop-item{width:165px;height:190px}.item-preview{min-height:170px}.shop-catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0;border:0;background:none}.shop-catalog-heading h3{margin:0}.inspection-stage{min-height:365px;overflow:auto}.inspection-stage.zoomed{min-height:500px}.character{overflow:visible!important}.inspection-stage .aura-stage{transform:none}@media(max-width:650px){.inspection-stage .fitting-player{transform:scale(1.2)}.inspection-stage.zoomed .fitting-player{transform:scale(1.4)}.inspection-stage.zoomed{min-height:365px}}

/* Equal catalog slots, with aspect ratio preserved inside each slot. */
.gear .inventory-item,.inventory-item.shop-item,.item-preview .inventory-item{width:160px;height:190px;flex-shrink:0;max-width:100%}.premium-thumb{height:190px}.geargrid>.gear{align-items:stretch}.shop-categories{display:flex;gap:8px;margin:18px 0}.shop-categories button{flex:1}.shop-categories .active{border-color:#f58b45;color:#f5b184}.diamond-radiance canvas,.fitting-anniversary>canvas,.fitting-diamondyear>canvas{animation:diamondRadiate 2.8s ease-in-out infinite;filter:drop-shadow(0 0 4px #62edff88)}@keyframes diamondRadiate{0%,100%{filter:drop-shadow(0 0 3px #62edff88) drop-shadow(0 0 7px #33b5e444)}50%{filter:drop-shadow(0 0 7px #8ffaffcc) drop-shadow(0 0 17px #33cde777)}}.aura-card-preview .aura-energy{opacity:.7}.aura-catalog>p{margin-bottom:18px}@media(prefers-reduced-motion:reduce){.diamond-radiance canvas,.fitting-anniversary>canvas,.fitting-diamondyear>canvas{animation:none;filter:drop-shadow(0 0 6px #62edff88)}}