/* September collection/header refinement. This layer deliberately leaves the
   coloured navigation groups, icons, labels and menu behaviour untouched. */

/* Keep the family-wide gameplay power with the family title, separate from
   the variant-specific Boost blocks below each Sprite. */
.familyhead{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  column-gap:12px!important;
}
.familyhead>.family-title{
  grid-column:1;
  grid-row:1;
  min-width:0;
}
.familyhead>.count{
  grid-column:2;
  grid-row:1;
  align-self:start;
  justify-self:end;
  white-space:nowrap;
}
.familyhead>.family-power{
  grid-column:1/-1;
  grid-row:2;
  display:grid;
  gap:3px;
  width:100%;
  max-width:none;
  margin-top:7px;
  padding:7px 10px 8px;
  border-left:2px solid color-mix(in srgb,var(--st-cyan) 62%,var(--st-border));
  border-radius:0 9px 9px 0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--st-cyan) 9%,var(--st-surface-2)),color-mix(in srgb,var(--st-purple) 5%,transparent));
}
.family-power span{
  color:var(--st-cyan);
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.07em;
  line-height:1.2;
  text-transform:uppercase;
}
.family-power strong{
  min-width:0;
  color:var(--st-text-soft);
  font-size:.875rem;
  font-weight:700;
  line-height:1.4;
}
.familyhead>.sprite-info-trigger{
  grid-column:1/-1;
  grid-row:3;
  width:100%;
  margin-top:8px;
}
@media(min-width:901px) and (max-width:1199px){
  .familyhead>.family-power{min-height:118px}
}
@media(min-width:1200px) and (max-width:1599px){
  .familyhead>.family-power{min-height:98px}
}
@media(min-width:1600px){
  .familyhead>.family-power{min-height:82px}
}
html[data-theme="light"] .family-power{
  border-left-color:color-mix(in srgb,var(--st-cyan) 68%,var(--st-border));
  background:linear-gradient(90deg,color-mix(in srgb,var(--st-cyan) 10%,white),color-mix(in srgb,var(--st-purple) 4%,transparent));
}
html[data-theme="light"] .family-power strong{color:var(--st-text)}

/* Collection cards show one concise, consistently placed Boost block. */
.family-insights{display:none!important}
.variant-card-note{gap:0!important;padding:7px 9px 9px!important}
.variant-card-note .variant-card-detail+.variant-card-detail{display:none!important}
.variant-card-note .variant-card-boost strong{font-size:.68rem!important;line-height:1.35!important}

/* Keep Collection Overview on one line and group its four facts as a compact unit. */
.collection-overview-summary>.hero h2{
  max-width:none!important;
  white-space:nowrap!important;
}
.collection-overview-summary>.stats{
  grid-template-columns:repeat(4,minmax(84px,108px))!important;
  justify-content:start!important;
  width:max-content!important;
}
.collection-overview-summary .stat{padding-inline:10px!important}
.collection-overview-summary .collection-dust-field,
.collection-overview-summary .collection-dust-actions{align-self:center!important}
.collection-overview-summary .collection-dust-input,
.collection-overview-summary .collection-dust-actions .btn{height:40px!important;min-height:40px!important}
.collection-overview-summary .collection-dust-input{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
}
.collection-overview-summary .collection-dust-actions{display:flex!important;align-items:center!important;gap:7px!important}

@media(min-width:1101px){
  /* Put the field and its action in the same explicit grid row. This avoids
     centring the button against status/help copy that belongs below them. */
  .collection-overview-summary .collection-dust-field{
    grid-column:2!important;
    grid-row:1!important;
    grid-template-rows:40px!important;
    align-self:start!important;
    height:40px!important;
    min-height:40px!important;
  }
  .collection-overview-summary .collection-dust-field>span:first-child,
  .collection-overview-summary .collection-dust-field>small{display:none!important}
  .collection-overview-summary .collection-dust-actions{display:contents!important}
  .collection-overview-summary .collection-dust-actions .btn{
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
  }
  .collection-overview-summary .collection-dust-actions .sub{
    grid-column:2/4!important;
    grid-row:2!important;
  }
}

@media(min-width:1101px) and (max-width:1599px){
  .collection-overview-summary{
    grid-template-columns:max-content max-content!important;
    justify-content:start!important;
    gap:14px!important;
  }
  .collection-overview-summary>.collection-dust-overview{
    grid-column:1/-1!important;
    grid-template-columns:minmax(150px,220px) minmax(180px,260px) auto!important;
    width:100%!important;
    border-left:0!important;
    border-top:1px solid color-mix(in srgb,var(--st-gold) 42%,var(--st-border))!important;
    padding:9px 0!important;
  }
}
@media(min-width:1600px){
  .collection-overview-summary{
    grid-template-columns:max-content max-content minmax(310px,1fr)!important;
    gap:14px!important;
  }
  .collection-overview-summary>.collection-dust-overview{
    grid-column:auto!important;
    grid-template-columns:minmax(94px,1fr) minmax(138px,.9fr) auto!important;
    border-top:0!important;
    border-left:1px solid color-mix(in srgb,var(--st-gold) 48%,var(--st-border))!important;
    padding:7px 0 7px 12px!important;
  }
}
@media(max-width:620px){
  .collection-overview-summary>.stats{width:100%!important}
  .collection-overview-summary>.hero h2{font-size:clamp(1.45rem,8vw,1.9rem)!important}
  .collection-overview-summary>.collection-dust-overview{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    align-items:start!important;
    gap:7px 8px!important;
    width:100%!important;
    padding:10px 0 2px!important;
    border-left:0!important;
    border-top:1px solid color-mix(in srgb,var(--st-gold) 42%,var(--st-border))!important;
  }
  .collection-overview-summary .collection-dust-copy{display:none!important}
  .collection-overview-summary .collection-dust-field{grid-column:1!important;grid-row:1!important;width:100%!important}
  .collection-overview-summary .collection-dust-input{width:100%!important;height:44px!important;min-height:44px!important}
  .collection-overview-summary .collection-dust-input .input{min-height:42px!important}
  .collection-overview-summary .collection-dust-actions{display:contents!important}
  .collection-overview-summary .collection-dust-actions .btn{
    grid-column:2!important;
    grid-row:1!important;
    width:auto!important;
    height:44px!important;
    min-height:44px!important;
    align-self:start!important;
  }
  .collection-overview-summary .collection-dust-actions .sub{grid-column:1/3!important;grid-row:2!important;min-height:0!important;margin:0!important;text-align:left!important}
}

/* Desktop masthead: three compact clocks above the smaller Sprite search. */
.header-time-cluster[hidden]{display:none!important}
@media(min-width:1200px){
  .top{
    grid-template-columns:minmax(300px,.9fr) minmax(360px,500px) minmax(0,1.1fr)!important;
    grid-template-rows:58px 66px!important;
    min-height:174px!important;
    gap:8px clamp(14px,1.7vw,28px)!important;
  }
  .top>.header-time-cluster{
    grid-column:1!important;
    grid-row:1!important;
    align-self:end!important;
    display:grid!important;
    grid-template-columns:minmax(66px,.75fr) minmax(66px,.75fr) minmax(100px,1.1fr) auto!important;
    align-items:stretch!important;
    gap:6px!important;
    width:min(100%,360px)!important;
  }
  .header-time-cluster>.clock,
  .header-time-cluster>.sidebar-event-timer{
    display:grid!important;
    align-content:center!important;
    gap:1px!important;
    min-width:0!important;
    min-height:48px!important;
    margin:0!important;
    padding:6px 8px!important;
    border:1px solid var(--st-border)!important;
    border-radius:10px!important;
    background:color-mix(in srgb,var(--st-surface-2) 84%,transparent)!important;
    box-shadow:none!important;
    text-align:left!important;
  }
  .header-time-cluster>.clock small,
  .header-time-cluster>.sidebar-event-timer span{
    overflow:hidden!important;
    color:var(--st-muted)!important;
    font-size:.48rem!important;
    font-weight:900!important;
    letter-spacing:.07em!important;
    line-height:1.15!important;
    text-overflow:ellipsis!important;
    text-transform:uppercase!important;
    white-space:nowrap!important;
  }
  .header-time-cluster>.clock strong,
  .header-time-cluster>.sidebar-event-timer strong{
    overflow:hidden!important;
    color:var(--st-text)!important;
    font-size:.68rem!important;
    font-variant-numeric:tabular-nums!important;
    line-height:1.15!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .header-time-cluster>.clock .sub,
  .header-time-cluster>.sidebar-event-timer small{display:none!important}
  .header-time-cluster>.sidebar-event-timer{cursor:pointer!important}
  .header-time-cluster>.sidebar-event-timer.live{
    border-color:#76ffad!important;
    background:color-mix(in srgb,#08753d 20%,var(--st-surface-2))!important;
  }
  .top>.header-sprite-search{
    grid-column:1!important;
    grid-row:2!important;
    align-self:center!important;
    justify-self:start!important;
    width:min(100%,340px)!important;
    margin:0!important;
  }
  .top>.persistent-brand{grid-column:2!important;grid-row:1/3!important}
  .top>.actions{grid-column:3!important;grid-row:1!important}
  .top>.header-sprite-quote{grid-column:3!important;grid-row:2!important}
}

.clock-format-switch{
  display:grid!important;
  grid-template-columns:auto auto!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  align-items:center!important;
  column-gap:5px!important;
  min-width:64px!important;
  min-height:48px!important;
  margin:0!important;
  padding:5px 7px!important;
  border:1px solid var(--st-border)!important;
  border-radius:10px!important;
  background:color-mix(in srgb,var(--st-surface-2) 84%,transparent)!important;
  color:var(--st-text-soft)!important;
  cursor:pointer!important;
}
.clock-format-switch>span{grid-column:1/-1;font-size:.46rem;font-weight:900;letter-spacing:.04em;white-space:nowrap}
.clock-format-switch>i{position:relative;width:25px;height:14px;border-radius:99px;background:var(--st-border-strong)}
.clock-format-switch>i>b{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--st-text-soft);transition:translate .16s ease}
.clock-format-switch>strong{font-size:.52rem;line-height:1}
.clock-format-switch[aria-checked="true"]>i{background:color-mix(in srgb,var(--st-cyan) 58%,var(--st-surface-2))}
.clock-format-switch[aria-checked="true"]>i>b{translate:11px 0;background:var(--st-cyan)}

/* Staff controls are one segmented pair: mode state plus a distinct Panel link. */
@media(min-width:1101px){
  .top>.actions:has(.admin-mode-toggle){grid-template-columns:auto auto auto var(--header-control-size,44px) var(--header-control-size,44px) minmax(130px,180px)!important;gap:6px!important}
  .top .actions>.admin-mode-toggle{grid-column:1!important;margin:0!important;padding-inline:8px!important;border-radius:11px 0 0 11px!important}
  .top .actions>.admin-panel-launch{grid-column:2!important;grid-row:1!important;margin-left:-6px!important;padding-inline:8px!important;border-left:0!important;border-radius:0 11px 11px 0!important;color:var(--st-gold)!important;text-decoration:none!important}
  .top .actions>.console-launch-button{grid-column:3!important}
  .top .actions>.theme-toggle{grid-column:4!important}
  .top .actions>#activityButton{grid-column:5!important}
  .top .actions>.account-menu-trigger{grid-column:6!important}
  .top>.actions:has(.admin-mode-toggle)>.account-menu-trigger{min-width:130px!important;max-width:180px!important}
}
@media(max-width:1100px){
  .top .actions>.admin-panel-launch{display:none!important}
}
.account-mobile-utilities>a[data-account-admin-panel]{
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:9px 10px;
  border:1px solid var(--st-border);
  border-radius:10px;
  background:var(--st-surface-2);
  color:var(--st-text);
  text-decoration:none;
}
.account-mobile-utilities>a[data-account-admin-panel]:not([hidden]){display:flex}
.account-mobile-utilities>a[data-account-admin-panel] span:nth-child(2){display:grid;gap:2px}
.account-mobile-utilities>a[data-account-admin-panel] small{color:var(--st-muted)}

@media(prefers-reduced-motion:reduce){.clock-format-switch>i>b{transition:none}}