/* Browser-only rules; "web" is not a browser CSS media type. */
:focus-visible {
  outline: 2px solid var(--accent, #6542a6) !important;
  outline-offset: 3px;
}
[data-material='navigation'] a {
  text-decoration: none;
}
[data-under-header='true'] {
  scroll-padding-top: calc(var(--app-header-height, 80px) + 12px);
}
@media (max-width: 1023px) {
  [data-page-scroll='true'] {
    scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }
}

/* Fixed roles keep the native opaque fallbacks and the web glass in sync. */
:root {
  --panel-neutral: #ffffff;
  --panel-play: #ddc9f6;
  --panel-ranking: #cbdff7;
  --panel-daily: #f3d5bf;
  --panel-social: #cce5df;
  --navigation-surface: #f5f3fa;
  --surface-edge-light: #ffffff66;
}
:root[data-appearance='dark'] {
  --panel-neutral: #272131;
  --panel-play: #49335f;
  --panel-ranking: #2c425b;
  --panel-daily: #523b32;
  --panel-social: #2d4843;
  --navigation-surface: #191620;
  --surface-edge-light: #cbb4f430;
}
[data-tone='neutral'] {
  --panel-tint: var(--panel-neutral);
}
[data-tone='play'] {
  --panel-tint: var(--panel-play);
}
[data-tone='ranking'] {
  --panel-tint: var(--panel-ranking);
}
[data-tone='daily'] {
  --panel-tint: var(--panel-daily);
}
[data-tone='social'] {
  --panel-tint: var(--panel-social);
}
[data-material='glass'],
[data-material='solid'],
[data-profile-card] {
  box-shadow:
    inset 0 1px 0 var(--surface-edge-light),
    0 3px 0 #30243e06,
    0 12px 28px #30243e08;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  [data-profile-card]:not([data-profile-card='phoenix']) {
    background-color: color-mix(in srgb, var(--profile-card-tint) 82%, transparent) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    isolation: isolate;
  }
  [data-material='glass'] {
    /* Confine the filtered layer when a card changes size beneath glass navigation. */
    isolation: isolate;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--panel-tint) 82%, transparent) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  [data-material='navigation'] {
    background-color: color-mix(in srgb, var(--navigation-surface) 72%, transparent) !important;
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    box-shadow: inset 0 -1px 0 var(--surface-edge-light);
  }
  [data-material='dock'] {
    background-color: color-mix(in srgb, var(--navigation-surface) 72%, transparent) !important;
    background-image: linear-gradient(135deg, #ffffff18, #ffffff00 55%);
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    box-shadow:
      inset 0 1px 0 var(--surface-edge-light),
      0 4px 24px #19162024;
  }
}
@media (prefers-reduced-transparency: reduce) {
  [data-profile-card]:not([data-profile-card='phoenix']) {
    background-color: var(--profile-card-tint) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  [data-material='glass'] {
    background-color: var(--panel-tint) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  [data-material='navigation'],
  [data-material='dock'] {
    background-color: var(--navigation-surface) !important;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (forced-colors: active) {
  [data-material],
  [data-profile-card] {
    background: Canvas !important;
    border-color: CanvasText !important;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  [data-profile-card='phoenix'] > :first-child {
    display: none;
  }
}
input,
textarea {
  font-size: 16px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (min-width: 1160px) {
  [data-under-header='true'] {
    scrollbar-gutter: stable both-edges;
  }
}