/* ==========================================================================
   SilverMU data pages (ranking, character, guild): opt-in layer.
   Loaded after the skin by ranking.php, character_details.php and guild_details.php, which set
   $bodyClass to 'svp-inner--data ...'. Same mechanic as css/silver-inner.css: everything sits in
   @layer sv-inner and every declaration carries !important. Inert when the body class is missing.
   Literal values with fallbacks: this sheet does not need css/silver-inner.css.
   NEVER (fx.js owns): opacity/transform/transition/animation on section, .white-box, .news-card,
   .class-panel, .kpi, .info-block; display/visibility/width on anything a script toggles.
   ========================================================================== */
@layer sv-inner {

/* --------------------------------------------------------------------------
   Ranking tab strip (data/rk-1 P0, rk-4). Legacy style.css makes the 17 tabs one row at <=1100px
   but keeps .ranking-tabs-bar{min-height:480px} (reset only at <=950px): 454px slabs. One strip rule
   set for <=1100px, content-width tabs so the next tab peeks out as a scroll cue.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  body.svp-inner--data .ranking-tabs-bar {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 16px !important;
    padding: 8px 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-inline: 16px !important;
    scrollbar-width: none !important;
    white-space: nowrap !important;
  }
  body.svp-inner--data .ranking-tabs-bar::-webkit-scrollbar { display: none !important; }
  body.svp-inner--data .ranking-tab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 44px !important;
    align-self: center !important;
    scroll-snap-align: center !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }
}
@media (max-width: 1100px) and (hover: hover) and (pointer: fine) {
  body.svp-inner--data .ranking-tabs-bar {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(124, 200, 255, .45) transparent !important;
  }
  body.svp-inner--data .ranking-tabs-bar::-webkit-scrollbar { display: block !important; height: 6px !important; }
  body.svp-inner--data .ranking-tabs-bar::-webkit-scrollbar-thumb { background: rgba(124, 200, 255, .45) !important; border-radius: 999px !important; }
}
@media (max-width: 760px) {
  body.svp-inner--data .ranking-tabs-bar {
    padding: 8px 24px !important;
    scroll-padding-inline: 24px !important;
    background: rgba(8, 12, 20, .96) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent) !important;
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent) !important;
  }
}
@media (max-width: 760px) and (min-height: 480px) {
  body.svp-inner--data .ranking-tabs-bar {
    position: sticky !important;
    top: var(--site-header-offset, 64px) !important;
    z-index: 20 !important;
  }
}

/* --------------------------------------------------------------------------
   Ranking cards on phones and tablets (data/rk-5). Legacy table/cards swap at 900px stays.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.svp-inner--data .ranking-cards-list { gap: 8px !important; }
  body.svp-inner--data .ranking-card {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: center !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(195, 202, 216, .13) !important;
    border-radius: 10px !important;
    background: rgba(8, 12, 20, .55) !important;
    box-shadow: none !important;
  }
  body.svp-inner--data .ranking-card-rank {
    width: 40px !important;
    min-width: 0 !important;
    height: 40px !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
  body.svp-inner--data .ranking-card-main {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  body.svp-inner--data .ranking-card-title {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }
  body.svp-inner--data .ranking-card-extra {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f3f6fb !important;
    font-family: var(--sv-font-ui, Oswald, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    font-variant-numeric: lining-nums tabular-nums !important;
    overflow-wrap: anywhere !important;
  }
  body.svp-inner--data .ranking-card-extra strong {
    display: block !important;
    margin: 0 0 1px !important;
    color: #a3adbf !important;
    font-family: var(--sv-font-ui, Oswald, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    hyphens: auto !important;
  }
}
@media (max-width: 519px) {
  body.svp-inner--data .ranking-card-extra:last-child:nth-child(even) { grid-column: 1 / -1 !important; }
}
@media (min-width: 520px) and (max-width: 900px) {
  body.svp-inner--data .ranking-card-main { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important; }
}

/* --------------------------------------------------------------------------
   Character stat pairs (data/ch-1): label and value touch, the value's own 1px border is the divider.
   -------------------------------------------------------------------------- */
body.svp-inner--data .character-details .char-dl { column-gap: 0 !important; }

/* --------------------------------------------------------------------------
   Character header (data/ch-2, CSS-only part; the masthead restructure needs character_details.view.php,
   which is not in this lane). Palette back to ember/steel, readable class label, larger render.
   -------------------------------------------------------------------------- */
body.svp-inner--character .character-details .cd-panel--summary {
  --panel-accent: linear-gradient(90deg, #ff8a2b, #ffb36a) !important;
  --panel-glow: radial-gradient(circle, rgba(255, 138, 43, .12), transparent 70%) !important;
}
body.svp-inner--character .character-details .char-class-label {
  color: #ffb36a !important;
  font-family: var(--sv-font-ui, Oswald, sans-serif) !important;
  font-size: 14px !important;
  letter-spacing: .14em !important;
}
body.svp-inner--character .character-details .char-avatar {
  width: 148px !important;
  height: 148px !important;
}
body.svp-inner--character .character-details .char-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
body.svp-inner--character .character-details .char-header-main .page-title {
  font-size: clamp(28px, 2.4vw + 12px, 44px) !important;
  line-height: 1.12 !important;
  overflow-wrap: anywhere !important;
}
@media (max-width: 600px) {
  body.svp-inner--character .character-details .char-avatar { width: 112px !important; height: 112px !important; }
}
body.svp-inner--character .character-details .white-box[style*="max-width"] { margin-inline: auto !important; }

/* --------------------------------------------------------------------------
   Guild hero (data/gd-1, CSS-only part): dark label and emblem well, tamer title, 2x2 event grid,
   13px table heads. FAQ/overview restructure is deferred (needs markup).
   -------------------------------------------------------------------------- */
body.svp-inner--guild .guild-details .guild-label {
  background: rgba(124, 200, 255, .1) !important;
  border: 1px solid rgba(124, 200, 255, .3) !important;
  color: #a9dcff !important;
  font-family: var(--sv-font-ui, Oswald, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
}
body.svp-inner--guild .guild-details .guild-avatar {
  background: rgba(8, 12, 20, .72) !important;
  border: 1px solid rgba(195, 202, 216, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 24px rgba(0, 0, 0, .4) !important;
}
body.svp-inner--guild .guild-details .guild-avatar img { image-rendering: pixelated !important; }
body.svp-inner--guild .guild-details .guild-header-main .page-title {
  font-size: clamp(2rem, 3vw + .8rem, 3.25rem) !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
}
body.svp-inner--guild .guild-details .guild-intro {
  font-size: 16px !important;
  max-width: 72ch !important;
}
body.svp-inner--guild .guild-details .guild-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 760px) {
  body.svp-inner--guild .guild-details .guild-grid-3 { grid-template-columns: minmax(0, 1fr) !important; }
}
body.svp-inner--guild .guild-details .guild-table th {
  font-size: 13px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

}