@font-face {
  font-family: "VALORANT UI";
  src:
    local("Valorant Font"),
    local("VALORANT Font"),
    url("./fonts/Valorant Font.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #181818;
  --bg-deep: #141414;
  --mica: rgba(37, 37, 37, .82);
  --mica-solid: #242424;
  --surface: #202020;
  --surface-2: #292929;
  --surface-3: #303030;
  --hover: #333333;
  --border: rgba(255, 255, 255, .075);
  --border-strong: rgba(255, 255, 255, .135);
  --text: #f4f4f4;
  --muted: #a9a9a9;
  --muted-2: #777777;
  --accent: #60a5fa;
  --accent-soft: rgba(96, 165, 250, .12);
  --valorant: #ff4655;
  --success: #6ccb9a;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .36);
  font-family: "VALORANT UI", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 0 0, rgba(65, 105, 160, .12), transparent 34rem),
    linear-gradient(180deg, #1b1b1b 0%, #171717 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
body.dialog-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

button, input, select { font: inherit; }
button, select { color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(96, 165, 250, .28); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border: 3px solid transparent; background-clip: padding-box; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); background-clip: padding-box; }

.mica {
  background: var(--mica);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.app-shell { width: min(1560px, calc(100% - 28px)); margin: 14px auto 0; }
.app-header {
  position: sticky;
  top: 10px;
  z-index: 50;
  min-height: 62px;
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: auto minmax(260px, 620px) auto;
  align-items: center;
  gap: 18px;
  padding: 9px 12px 9px 14px;
  box-shadow: 0 10px 35px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.035);
}
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; min-width: 190px; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px rgba(255,255,255,.12);
  overflow: hidden;
  flex: 0 0 auto;
}
.brand-mark img {
  width: 23px;
  height: 23px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(79,187,255,.22));
}
.brand-copy { min-width: 0; }
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { font-size: 14px; letter-spacing: -.03em; font-weight: 700; }
.brand-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.search-box {
  height: 40px; display: flex; align-items: center; gap: 9px;
  background: rgba(20,20,20,.72); border: 1px solid var(--border);
  border-radius: 9px; padding: 0 11px; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.search-box:focus-within { background: #1d1d1d; border-color: rgba(96,165,250,.62); box-shadow: 0 0 0 1px rgba(96,165,250,.16); }
.search-icon { color: var(--muted); font-size: 18px; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.search-box input::placeholder { color: #747474; }
kbd { color: #7d7d7d; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; font-size: 9px; }
.header-actions { display: flex; justify-content: flex-end; gap: 7px; }
.header-button, .secondary-button {
  min-height: 38px; border: 1px solid var(--border); background: rgba(255,255,255,.045); color: #dfdfdf;
  border-radius: 9px; padding: 0 13px; cursor: pointer; font-size: 12px; font-weight: 600;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.header-button:hover, .secondary-button:hover { background: rgba(255,255,255,.085); border-color: var(--border-strong); }
.header-button:active, .secondary-button:active { transform: scale(.97); }
.icon-only { width: 38px; padding: 0; font-size: 16px; }

@media (max-width: 900px) {
  .app-header { gap: 12px; }
  .brand { min-width: 0; }
  .brand-copy small { max-width: 170px; }
}

@media (max-width: 640px) {
  .brand-copy small { display: none; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-mark img { width: 21px; height: 21px; }
}

.workspace { padding: 34px 2px 0; }
.library-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding: 0 6px 22px; }
.eyebrow { color: var(--muted-2); font-size: 10px; letter-spacing: .14em; font-weight: 700; }
.library-heading h1 { margin: 4px 0 3px; font-size: clamp(27px, 3vw, 36px); font-weight: 650; letter-spacing: -.035em; }
.library-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.library-summary { text-align: right; }
.library-summary span, .library-summary strong { display: block; }
.library-summary span { color: var(--muted); font-size: 11px; }
.library-summary span i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); margin-right: 5px; box-shadow: 0 0 0 3px rgba(108,203,154,.08); }
.library-summary strong { margin-top: 4px; font-size: 13px; font-weight: 600; }

.filter-panel { border-radius: var(--radius); padding: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.filter-scroll { min-width: 0; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.filter-scroll::-webkit-scrollbar { display: none; }
.category-button, .filter-toggle {
  border: 0; min-height: 34px; flex: 0 0 auto; border-radius: 8px; padding: 0 10px;
  background: transparent; color: #adadad; cursor: pointer; font-size: 11px; font-weight: 600;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.category-button:hover, .filter-toggle:hover { background: rgba(255,255,255,.055); color: #eee; }
.category-button.active, .filter-toggle.active { background: rgba(255,255,255,.09); color: white; }
.category-button:active, .filter-toggle:active { transform: scale(.98); }
.category-button .count, .filter-toggle span { color: #7d7d7d; margin-left: 4px; font-size: 10px; }
.filter-controls { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
select {
  min-height: 34px; border-radius: 8px; border: 1px solid var(--border); outline: 0;
  background: #262626; padding: 0 29px 0 10px; color: #d8d8d8; font-size: 11px;
  transition: border-color .16s ease, background .16s ease;
}
select:hover { background: #2b2b2b; }
select:focus { border-color: rgba(96,165,250,.55); }

.state-panel { margin-top: 12px; min-height: 72px; border-radius: var(--radius); display: flex; align-items: center; gap: 12px; padding: 14px; }
.state-panel strong, .state-panel span { display: block; }
.state-panel strong { font-size: 12px; }
.state-panel span { color: var(--muted); font-size: 11px; margin-top: 2px; }
.state-panel .secondary-button { margin-left: auto; }
.state-symbol { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.05); }
.loader { width: 25px; height: 25px; border: 2px solid rgba(255,255,255,.11); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

.cosmetics-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.skin-card {
  min-width: 0; position: relative; overflow: hidden; cursor: pointer;
  background: #222222; border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), background .16s ease, border-color .16s ease, box-shadow .16s ease;
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: 230px;
}
.skin-card.animate-in { animation: cardIn .24s ease both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.skin-card:hover { transform: translateY(-2px); background: #262626; border-color: var(--border-strong); box-shadow: 0 7px 18px rgba(0,0,0,.13); }
.skin-card:focus-visible { outline: 2px solid rgba(96,165,250,.72); outline-offset: 2px; }
.skin-media { height: 148px; position: relative; display: grid; place-items: center; background: linear-gradient(145deg, #292929, #202020); overflow: hidden; }
.skin-media::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(20,20,20,.52)); pointer-events: none; }
.skin-media img { width: 100%; height: 100%; object-fit: contain; padding: 21px 17px; transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.skin-card:hover .skin-media img { transform: scale(1.035); }
.card-favorite {
  position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(28,28,28,.76); color: #d5d5d5; cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.card-favorite:hover { background: rgba(50,50,50,.92); }
.card-favorite.active { color: #ff7c87; background: rgba(255,70,85,.12); }
.card-favorite:active { transform: scale(.93); }
.video-badge { position: absolute; left: 8px; bottom: 8px; z-index: 3; padding: 4px 7px; border-radius: 6px; background: rgba(26,26,26,.78); border: 1px solid rgba(255,255,255,.08); color: #d6d6d6; font-size: 9px; }
.skin-body { padding: 11px 12px 12px; }
.skin-meta { color: var(--muted-2); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-body h3 { margin: 4px 0 0; font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-footer { margin-top: 9px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.skin-footer span { color: #8a8a8a; font-size: 9px; }
.skin-footer strong { color: #c5c5c5; font-size: 10px; font-weight: 600; }
.card-arrow { color: #666; font-size: 17px; line-height: 1; }

.footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 24px 6px 18px; color: #666; font-size: 9px; }
.footer-credit {
  flex-basis: 100%;
  margin-top: 3px;
  color: #8a8a8a;
  text-align: center;
  font-weight: 600;
}

.detail-dialog {
  position: relative;
  width: min(1420px, calc(100vw - 136px));
  height: min(860px, calc(100vh - 28px));
  max-width: none; max-height: none;
  padding: 0; border: 1px solid rgba(255,255,255,.095); border-radius: 18px;
  background: #202020; color: var(--text); overflow: visible;
  overscroll-behavior: contain;
  box-shadow: 0 35px 100px rgba(0,0,0,.58);
  opacity: 0; transform: scale(.985) translateY(7px);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), overlay .18s ease allow-discrete, display .18s ease allow-discrete;
}
.detail-dialog[open] { opacity: 1; transform: scale(1) translateY(0); }
@starting-style { .detail-dialog[open] { opacity: 0; transform: scale(.985) translateY(7px); } }
.detail-dialog::backdrop { background: rgba(9,9,9,.78); transition: background .18s ease; }
@starting-style { .detail-dialog[open]::backdrop { background: rgba(9,9,9,0); } }

.cosmetic-nav {
  position: absolute;
  top: 50%;
  z-index: 30;
  margin: 0;
  width: 46px;
  height: 58px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 15px;
  background: rgba(31,31,31,.9);
  color: #d9d9d9;
  box-shadow: 0 12px 34px rgba(0,0,0,.3);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .12s ease, color .14s ease;
}
.cosmetic-nav:hover {
  background: rgba(45,45,45,.96);
  border-color: rgba(255,255,255,.18);
  color: white;
}
.cosmetic-nav:active { transform: translateY(-50%) scale(.94); }
.cosmetic-nav-prev { left: -56px; }
.cosmetic-nav-next { right: -56px; }
.detail-layout {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 424px;
  border-radius: inherit;
}

.preview-pane {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 60px minmax(0,1fr) 60px;
  background: #1b1b1b;
  border-right: 1px solid var(--border);
}
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 15px 0 18px; border-bottom: 1px solid var(--border); }
.media-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.04); }
.media-tab {
  min-width: 72px;
  min-height: 31px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #8f8f8f;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .12s ease, border-color .15s ease;
}
.media-tab:hover:not(:disabled) { color: #ddd; }
.media-tab.active { background: #333333; color: white; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.media-tab:disabled { cursor: not-allowed; }
.media-tab.unavailable {
  color: #a9a9a9;
  background: rgba(255,255,255,.025);
  border-color: rgba(255,255,255,.055);
  opacity: 1;
}
.media-tab.unavailable > span:first-child { color: #8f8f8f; }
.tab-availability {
  display: inline-flex;
  align-items: center;
  color: #e6757f;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
}
.media-tab:active:not(:disabled) { transform: scale(.97); }
.preview-stage {
  min-height: 0; position: relative; overflow: hidden; contain: layout paint;
  background:
    radial-gradient(circle at 50% 45%, rgba(103, 143, 194, .14), transparent 37%),
    linear-gradient(145deg, #242424, #191919 70%);
}
.preview-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.017) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.017) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at center, black, transparent 72%); }
.image-preview, .video-preview { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; place-items: center; animation: mediaIn .2s ease both; }
@keyframes mediaIn { from { opacity: 0; transform: scale(.992); } to { opacity: 1; transform: scale(1); } }
.image-preview img {
  width: min(90%, 1040px);
  height: min(84%, 680px);
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  filter: drop-shadow(0 35px 40px rgba(0,0,0,.38));
}
.image-preview img.is-swatch {
  width: min(52%, 460px);
  height: min(52%, 460px);
  max-width: calc(100% - 72px);
  max-height: calc(100% - 72px);
  margin: auto;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.3));
}
.image-source-controls {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  max-width: calc(100% - 32px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  flex-wrap: wrap;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(28,28,28,.91);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.image-source-button {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 10px;
  background: transparent;
  color: #a4a4a4;
  font-size: 9px;
  font-weight: 650;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .1s ease;
}
.image-source-button:hover {
  color: #efefef;
  background: rgba(255,255,255,.055);
}
.image-source-button.active {
  color: #fff;
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.12);
}
.image-source-button:active { transform: scale(.96); }
.video-preview {
  padding: 0;
  overflow: hidden;
  background: #080808;
}
.video-preview video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  background: #080808;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transform: translateZ(0);
}
.video-preview video.is-loading {
  cursor: progress;
}

.video-now-playing {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  max-width: min(56%, 460px);
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  background: rgba(20,20,20,.56);
  color: rgba(255,255,255,.82);
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.video-now-playing-kicker {
  display: block;
  color: rgba(255,255,255,.45);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .13em;
}
.video-now-playing strong {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.3;
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
}

.video-paused-indicator {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: rgba(0,0,0,.055);
  animation: pausedIn .14s ease both;
}
.video-paused-indicator .pause-glyph {
  width: 28px;
  height: 32px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 7px;
  filter: drop-shadow(0 3px 9px rgba(0,0,0,.72));
}
.video-paused-indicator .pause-glyph::before,
.video-paused-indicator .pause-glyph::after {
  content: "";
  width: 7px;
  height: 32px;
  border-radius: 2px;
  background: #fff;
}
@keyframes pausedIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

.video-volume-control {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 6;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(24,24,24,.84);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.video-volume-icon {
  width: 15px;
  text-align: center;
  font-size: 11px;
  line-height: 1;
}
.video-volume-control input[type="range"] {
  width: 96px;
  height: 3px;
  accent-color: #e7e7e7;
  cursor: pointer;
}

.media-empty { color: #939393; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.video-preview .media-empty {
  position: absolute;
  inset: 0;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.035), transparent 34%),
    #171717;
}
.media-empty > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.05); font-size: 16px; }
.media-empty strong { color: #d2d2d2; font-size: 13px; }
.media-empty small { font-size: 10px; }

.video-error-message {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 28px;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(255,70,85,.08), transparent 32%),
    rgba(18,18,18,.94);
}
.video-error-symbol {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 3px;
  border: 1px solid rgba(255,70,85,.26);
  border-radius: 50%;
  background: rgba(255,70,85,.08);
  color: #ff6572;
  font-size: 19px;
  font-weight: 800;
}
.video-error-message strong {
  color: #f1f1f1;
  font-size: 14px;
}
.video-error-message small {
  max-width: 360px;
  color: #929292;
  font-size: 10px;
  line-height: 1.45;
}
.video-error-message button {
  min-height: 34px;
  margin-top: 5px;
  padding: 0 12px;
  border: 1px solid rgba(255,70,85,.24);
  border-radius: 8px;
  background: rgba(255,70,85,.1);
  color: #f2c6ca;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
}
.video-error-message button:hover {
  background: rgba(255,70,85,.16);
  border-color: rgba(255,70,85,.38);
}
.preview-footer { display: flex; align-items: center; padding: 0 18px; border-top: 1px solid var(--border); background: #1f1f1f; }
.preview-caption span, .preview-caption strong { display: block; }
.preview-caption span { color: #6f6f6f; font-size: 8px; letter-spacing: .13em; font-weight: 700; }
.preview-caption strong { margin-top: 3px; font-size: 11px; font-weight: 600; }

.info-pane {
  --edition-rgb: 150, 150, 150;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--edition-rgb), .30), transparent 42%),
    linear-gradient(155deg,
      rgba(var(--edition-rgb), .20) 0%,
      rgba(var(--edition-rgb), .10) 28%,
      rgba(var(--edition-rgb), .035) 52%,
      rgba(36,36,36,.98) 76%
    ),
    #242424;
  box-shadow:
    inset 3px 0 0 rgba(var(--edition-rgb), .18),
    inset 0 1px 0 rgba(255,255,255,.025);
}
.info-pane[data-edition="select"] { --edition-rgb: 109, 165, 214; }
.info-pane[data-edition="deluxe"] { --edition-rgb: 80, 202, 164; }
.info-pane[data-edition="premium"] { --edition-rgb: 170, 104, 255; }
.info-pane[data-edition="exclusive"] { --edition-rgb: 240, 190, 80; }
.info-pane[data-edition="ultra"] { --edition-rgb: 255, 111, 92; }
.info-pane[data-edition="other"] { --edition-rgb: 150, 150, 150; }
.info-scroll {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
}
.info-topbar,
.title-block,
.price-row,
.quick-info,
.pricing-note {
  flex: 0 0 auto;
}

.info-topbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.weapon-chip { display: inline-flex; align-items: center; min-height: 26px; border-radius: 7px; padding: 0 9px; background: #303030; border: 1px solid var(--border); color: #bcbcbc; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.favorite-button { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: #2c2c2c; color: #d6d6d6; cursor: pointer; font-size: 17px; transition: background .15s ease, color .15s ease, transform .12s ease; }
.favorite-button:hover { background: #343434; }
.favorite-button.active { color: #ff7d89; background: rgba(255,70,85,.08); border-color: rgba(255,70,85,.18); }
.favorite-button:active { transform: scale(.94); }
.title-block { padding: 20px 0 17px; border-bottom: 1px solid var(--border); }
.edition-label {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  min-height: 24px;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid rgba(var(--edition-rgb), .25);
  border-radius: 999px;
  background: rgba(var(--edition-rgb), .08);
  color: rgb(var(--edition-rgb));
  text-shadow: 0 0 14px rgba(var(--edition-rgb), .22);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 750;
}
.edition-label::before {
  content: "✦";
  color: rgb(var(--edition-rgb));
  font-size: 8px;
  text-shadow: 0 0 10px rgba(var(--edition-rgb), .55);
  animation: editionSparkle 2.8s ease-in-out infinite;
}
.edition-label::after {
  content: "";
  position: absolute;
  inset: -60% auto -60% -38%;
  z-index: -1;
  width: 34%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  animation: editionSheen 3.8s ease-in-out infinite;
}
@keyframes editionSparkle {
  0%, 100% { opacity: .55; transform: scale(.86) rotate(-8deg); }
  50% { opacity: 1; transform: scale(1.08) rotate(8deg); }
}
@keyframes editionSheen {
  0%, 58% { left: -38%; opacity: 0; }
  70% { opacity: .7; }
  100% { left: 118%; opacity: 0; }
}
.title-block h2 {
  margin: 6px 0 0;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 650;
}
.price-row {
  padding: 13px 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.price-row span, .price-row strong { display: block; }
.price-row span { color: #858585; font-size: 9px; }
.price-row strong { margin-top: 3px; font-size: 14px; }
.price-row small { color: #696969; font-size: 9px; max-width: 135px; line-height: 1.35; text-align: right; }
.quick-info {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--border);
}
.quick-info > div {
  min-width: 0;
  min-height: 52px;
  padding: 9px 9px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 9px;
  background: rgba(255,255,255,.022);
}
.quick-info span,
.quick-info strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quick-info span {
  color: #7d7d7d;
  font-size: 8px;
  white-space: nowrap;
}
.quick-info strong {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.side-section {
  flex: 0 0 auto;
  padding: 15px 0 12px;
  border-bottom: 1px solid var(--border);
}
.side-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 9px;
}
.side-section-heading span { color: #707070; font-size: 8px; letter-spacing: .13em; font-weight: 700; }
.side-section-heading h3 { margin: 2px 0 0; font-size: 13px; font-weight: 650; }
.side-section-heading small { color: #777; font-size: 9px; }
.chroma-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 7px;
}
.chroma-card {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #292929;
  padding: 5px;
  cursor: pointer;
  min-width: 0;
  text-align: left;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.chroma-card:hover { background: #303030; border-color: var(--border-strong); }
.chroma-card.active { border-color: rgba(96,165,250,.52); background: rgba(96,165,250,.07); }
.chroma-card:active { transform: scale(.98); }
.chroma-thumb {
  height: 53px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #1d1d1d;
  overflow: hidden;
}
.chroma-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.chroma-card strong {
  display: block;
  margin: 6px 2px 1px;
  color: #c9c9c9;
  font-size: 7.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-section:not(.levels-section) {
  flex: 0 0 auto;
}

.levels-section {
  flex: 1 1 0;
  min-height: 210px;
  overflow: hidden;
  padding: 12px 0 8px;
  display: flex;
  flex-direction: column;
  border-bottom: 0;
}
.levels-section .side-section-heading {
  flex: 0 0 auto;
  margin-bottom: 10px;
}
.level-list {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 7px;
  padding-bottom: 16px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.24) rgba(255,255,255,.035);
  scroll-behavior: smooth;
}
.level-list:focus-visible {
  outline: 1px solid rgba(96,165,250,.5);
  outline-offset: 4px;
  border-radius: 8px;
}
.level-list::-webkit-scrollbar {
  width: 10px;
}
.level-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,.035);
  border-radius: 999px;
}
.level-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.24);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.level-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.34);
  background-clip: padding-box;
}
.level-item {
  min-height: 50px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #292929;
  transition: background .14s ease, border-color .14s ease;
}
.level-item:hover { background: #2d2d2d; border-color: var(--border-strong); }
.level-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #333; color: #c7c7c7; font-size: 9px; font-weight: 700; }
.level-copy {
  min-width: 0;
  align-self: center;
}
.level-copy strong {
  display: block;
  font-size: 9px;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.level-copy span {
  display: block;
  margin-top: 3px;
  color: #737373;
  font-size: 8px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}
.level-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.level-current-badge {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(108,203,154,.09);
  border: 1px solid rgba(108,203,154,.18);
  color: var(--success);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.level-item.active {
  border-color: rgba(108,203,154,.34);
  background:
    linear-gradient(90deg, rgba(108,203,154,.075), transparent 52%),
    #2a2a2a;
}
.level-item.active .level-number {
  background: rgba(108,203,154,.12);
  color: #baf0d2;
}
.level-preview-button.active {
  border-color: rgba(108,203,154,.42);
  background: rgba(108,203,154,.15);
}
.level-preview-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(108,203,154,.18);
  border-radius: 50%;
  padding: 0;
  background: rgba(108,203,154,.06);
  color: var(--success);
  font-size: 9px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
}
.level-preview-button:hover {
  background: rgba(108,203,154,.13);
  border-color: rgba(108,203,154,.3);
}
.level-preview-button:active {
  transform: scale(.9);
}
.level-no-preview { color: #626262; font-size: 8px; }
.pricing-note {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--border);
  color: #777;
}
.pricing-note span { font-size: 11px; color: #8a8a8a; }
.pricing-note p { margin: 0; font-size: 9px; line-height: 1.45; }

@media (min-width: 721px) {
  .detail-layout,
  .preview-pane,
  .info-pane,
  .info-scroll {
    overflow: hidden;
  }
}


@media (max-height: 760px) and (min-width: 721px) {
  .info-scroll {
    padding: 13px 16px 16px;
  }

  .favorite-button {
    width: 32px;
    height: 32px;
  }

  .title-block {
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .title-block h2 {
    font-size: 24px;
  }

  .price-row {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .quick-info {
    padding-top: 9px;
    padding-bottom: 10px;
    gap: 5px;
  }

  .quick-info > div {
    min-height: 45px;
    padding: 7px 7px;
  }

  .side-section:not(.levels-section) {
    padding-top: 11px;
    padding-bottom: 9px;
  }

  .chroma-thumb {
    height: 44px;
  }

  .levels-section {
    min-height: 190px;
    padding-top: 9px;
    padding-bottom: 6px;
  }

  .level-list {
    padding-bottom: 14px;
  }

  .pricing-note {
    margin-top: 6px;
    padding-top: 8px;
  }
}

@media (max-width: 1280px) {
  .cosmetics-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .detail-layout { grid-template-columns: minmax(0,1fr) 395px; }
}
@media (max-width: 1080px) and (min-width: 721px) {
  .chroma-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chroma-thumb {
    height: 48px;
  }

  .levels-section {
    min-height: 185px;
  }
}

@media (max-width: 960px) {
  .app-header { grid-template-columns: auto minmax(200px,1fr) auto; }
  .brand-copy { display: none; }
  .brand { min-width: auto; }
  .filter-panel { align-items: stretch; flex-direction: column; }
  .filter-controls { flex-wrap: wrap; }
  .filter-controls select { flex: 1; }
  .cosmetics-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .detail-dialog { height: calc(100vh - 16px); width: calc(100vw - 16px); overflow: hidden; }
  .detail-layout { grid-template-columns: minmax(0,1fr) 350px; }
  .cosmetic-nav { width: 40px; height: 50px; z-index: 40; background: rgba(28,28,28,.84); }
  .cosmetic-nav-prev { left: 12px; }
  .cosmetic-nav-next { right: 12px; }
}
@media (max-width: 720px) {
  .video-now-playing {
    top: 10px;
    left: 10px;
    max-width: 64%;
  }

  .level-actions {
    gap: 4px;
  }

  .level-current-badge {
    display: none;
  }

  .video-volume-control { right: 10px; bottom: 10px; }
  .video-volume-control input[type="range"] { width: 76px; }
  .video-paused-indicator span { width: 58px; height: 58px; font-size: 20px; }
  .cosmetic-nav { top: 50%; width: 38px; height: 46px; }
  .image-source-controls { right: 10px; bottom: 10px; max-width: calc(100% - 20px); }
  .image-source-button { min-height: 28px; padding: 0 8px; font-size: 8px; }

  .app-shell { width: calc(100% - 12px); margin-top: 6px; }
  .app-header { top: 5px; grid-template-columns: auto 1fr auto; gap: 8px; padding: 7px; }
  .header-button:not(.icon-only) { display: none; }
  kbd { display: none; }
  .workspace { padding-top: 24px; }
  .library-heading { align-items: flex-start; }
  .library-summary { display: none; }
  .filter-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .filter-controls select { width: 100%; }
  .cosmetics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
  .skin-media { height: 130px; }
  .detail-dialog {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .detail-layout {
    display: block;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
  .preview-pane { height: 58vh; min-height: 430px; border-right: 0; border-bottom: 1px solid var(--border); }
  .info-pane {
    min-height: 420px;
    overflow: visible;
  }
  .info-scroll {
    height: auto;
    overflow: visible;
    display: block;
  }
  .levels-section {
    display: block;
    overflow: visible;
  }
  .level-list {
    min-height: 190px;
    max-height: 260px;
    overflow-y: scroll;
  }
}
@media (max-width: 460px) {
  .library-heading h1 { font-size: 26px; }
  .library-heading p { font-size: 11px; }
  .filter-controls { grid-template-columns: 1fr; }
  .cosmetics-grid { grid-template-columns: 1fr; }
  .skin-media { height: 190px; }
  .preview-pane { height: 52vh; min-height: 380px; grid-template-rows: 52px minmax(0,1fr) 54px; }
  .image-preview img { width: 92%; height: 78%; }
  .title-block h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* =========================================================
   Multi-library navigation
   ========================================================= */

.section-switcher {
  position: sticky;
  top: 74px;
  z-index: 19;
  margin-top: 8px;
  min-height: 44px;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.section-switcher::-webkit-scrollbar { display: none; }
.section-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #989898;
  cursor: pointer;
  font-size: 10px;
  font-weight: 650;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .1s ease;
}
.section-button:hover { background: rgba(255,255,255,.055); color: #ddd; }
.section-button:active { transform: scale(.97); }
.section-button.active {
  color: #fff;
  background: rgba(255,255,255,.085);
  border-color: rgba(255,255,255,.075);
}
.section-button.tier-guide-button.active {
  color: #f7df91;
  border-color: rgba(247,223,145,.22);
  background: rgba(247,223,145,.07);
}

.collectible-section { min-width: 0; }
.collectible-toolbar {
  min-height: 54px;
  padding: 8px 10px 8px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: var(--radius);
}
.collectible-toolbar-copy { min-width: 0; }
.collectible-toolbar-copy > span {
  display: block;
  color: #d7d7d7;
  font-size: 11px;
  font-weight: 650;
}
.collectible-toolbar-copy > small {
  display: block;
  margin-top: 2px;
  color: #777;
  font-size: 9px;
}
.collectible-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}
.collectible-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #222;
  cursor: pointer;
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: 230px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.collectible-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: #262626;
  box-shadow: 0 7px 18px rgba(0,0,0,.13);
}
.collectible-card:focus-visible {
  outline: 2px solid rgba(96,165,250,.72);
  outline-offset: 2px;
}
.collectible-media {
  height: 158px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 18%, rgba(var(--collectible-rgb,120,140,170),.08), transparent 38%),
    linear-gradient(145deg,#292929,#202020);
}
.collectible-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 15px;
}
.collectible-card[data-type="cards"] .collectible-media img {
  object-fit: cover;
  padding: 0;
}
.collectible-title-media {
  min-height: 158px;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  color: #ddd;
  font-size: clamp(17px,2vw,25px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
  background:
    radial-gradient(circle at center, rgba(var(--collectible-rgb,240,190,80),.09), transparent 52%),
    #222;
}
.collectible-card-body { padding: 11px 12px 12px; }
.collectible-card-meta {
  color: #737373;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.collectible-card-body h3 {
  margin: 5px 0 0;
  color: #e5e5e5;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.collectible-card-footer {
  margin-top: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #777;
  font-size: 8px;
}
.collectible-card-footer strong { color: #aaa; font-size: 9px; }
.collectible-favorite {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(28,28,28,.76);
  color: #d5d5d5;
  cursor: pointer;
}
.collectible-favorite.active {
  color: #ff7c87;
  background: rgba(255,70,85,.12);
}

/* =========================================================
   Official tier guide
   ========================================================= */

.tier-guide-card {
  --tier-rgb: 150,150,150;
  --tier-rank: 0;
  position: relative;
  min-height: 246px;
  overflow: hidden;
  border: 1px solid rgba(var(--tier-rgb),.19);
  border-radius: 14px;
  background:
    radial-gradient(circle at 78% 12%, rgba(var(--tier-rgb),calc(.08 + var(--tier-rank) * .025)), transparent 42%),
    linear-gradient(180deg,rgba(var(--tier-rgb),.055),transparent 54%),
    #222;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tier-guide-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--tier-rgb),.34);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
.tier-guide-card::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -42%;
  width: 30%;
  transform: rotate(16deg);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  animation: tierGuideSheen calc(5s - min(var(--tier-rank),4) * .65s) ease-in-out infinite;
  pointer-events: none;
}
.tier-guide-card[data-rank="0"]::after { opacity: .18; animation-duration: 7s; }
.tier-guide-card[data-rank="1"]::after { opacity: .28; }
.tier-guide-card[data-rank="2"]::after { opacity: .45; }
.tier-guide-card[data-rank="3"]::after { opacity: .62; }
.tier-guide-card[data-rank="4"]::after { opacity: .8; }
@keyframes tierGuideSheen {
  0%, 60% { left: -42%; opacity: 0; }
  72% { opacity: .8; }
  100% { left: 118%; opacity: 0; }
}
.tier-guide-inner {
  position: relative;
  z-index: 2;
  min-height: 246px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.tier-guide-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(var(--tier-rgb),.18));
}
.tier-guide-rank {
  margin-top: auto;
  color: rgba(var(--tier-rgb),.92);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.tier-guide-name {
  margin: 5px 0 0;
  font-size: 18px;
  font-weight: 680;
  letter-spacing: -.025em;
}
.tier-guide-color {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #818181;
  font-size: 8px;
}
.tier-guide-swatch {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 6px;
  background: rgb(var(--tier-rgb));
  box-shadow: 0 0 calc(3px + var(--tier-rank) * 3px) rgba(var(--tier-rgb),.28);
}
.tier-guide-card[data-rank="4"] .tier-guide-name::after,
.tier-guide-card[data-rank="3"] .tier-guide-name::after {
  content: " ✦";
  color: rgb(var(--tier-rgb));
  text-shadow: 0 0 10px rgba(var(--tier-rgb),.55);
  animation: tierStar 1.8s ease-in-out infinite alternate;
}
@keyframes tierStar { from { opacity:.35; } to { opacity:1; } }

/* =========================================================
   Collectible detail dialog
   ========================================================= */

.collectible-dialog {
  position: relative;
  width: min(1160px,calc(100vw - 120px));
  height: min(760px,calc(100vh - 28px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 18px;
  background: #202020;
  color: var(--text);
  box-shadow: 0 35px 100px rgba(0,0,0,.58);
}
.collectible-dialog::backdrop { background: rgba(9,9,9,.78); }
.collectible-nav {
  position: absolute;
  top: 50%;
  z-index: 30;
  width: 44px;
  height: 56px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(31,31,31,.92);
  color: #ddd;
  cursor: pointer;
  font-size: 29px;
}
.collectible-nav-prev { left: -55px; }
.collectible-nav-next { right: -55px; }
.collectible-detail-layout {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px;
  border-radius: inherit;
}
.collectible-detail-media {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background:
    radial-gradient(circle at center, rgba(var(--detail-rgb,120,140,170),.07), transparent 42%),
    #1b1b1b;
}
.collectible-detail-media > img,
.collectible-detail-image {
  display: block;
  place-self: center;
  width: auto;
  height: auto;
  max-width: min(88%, 860px);
  max-height: min(84%, 650px);
  object-fit: contain;
  object-position: center;
  margin: auto;
  transform-origin: center;
  transition: opacity .14s ease;
}
.collectible-detail-image.is-loading {
  opacity: .86;
}
.collectible-detail-image.asset-card {
  max-width: min(88%, 820px);
  max-height: min(86%, 680px);
}
.collectible-detail-image.asset-spray-transparent,
.collectible-detail-image.asset-spray-full,
.collectible-detail-image.asset-spray-icon,
.collectible-detail-image.asset-buddy,
.collectible-detail-image.asset-tier {
  max-width: min(72%, 620px);
  max-height: min(72%, 560px);
}
.collectible-detail-image.asset-animation {
  max-width: min(76%, 660px);
  max-height: min(76%, 580px);
}
.collectible-detail-media.card-detail > img {
  width: auto;
  height: auto;
  max-width: min(86%,760px);
  max-height: min(84%,650px);
  object-fit: contain;
  object-position: center;
}
.collectible-title-visual {
  max-width: 78%;
  padding: 28px 34px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(40,40,40,.84);
  color: #e2e2e2;
  font-size: clamp(30px,5vw,60px);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.collectible-asset-switcher {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 6;
  max-width: calc(100% - 28px);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(28,28,28,.82);
}
.collectible-asset-button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #999;
  cursor: pointer;
  font-size: 8px;
}
.collectible-asset-button.active {
  color: #fff;
  border-color: var(--border);
  background: rgba(255,255,255,.08);
}
.collectible-detail-info {
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  background:
    radial-gradient(circle at 85% 0%,rgba(var(--detail-rgb,140,140,140),.1),transparent 35%),
    #242424;
}
.collectible-detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-right: 42px;
}
.collectible-title-block {
  padding: 24px 0 18px;
  border-bottom: 1px solid var(--border);
}
.collectible-title-block h2 {
  margin: 6px 0 0;
  font-size: 29px;
  line-height: 1.05;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
.collectible-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.collectible-stat {
  min-width: 0;
  min-height: 54px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
}
.collectible-stat span {
  display: block;
  color: #777;
  font-size: 8px;
}
.collectible-stat strong {
  display: block;
  margin-top: 5px;
  color: #d8d8d8;
  font-size: 10px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.collectible-detail-section {
  padding: 17px 0;
  border-bottom: 1px solid var(--border);
}
.tier-detail-color {
  margin-top: 11px;
  height: 70px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgb(var(--detail-rgb,150,150,150));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 0 30px rgba(var(--detail-rgb,150,150,150),.16);
}
.tier-detail-note {
  margin: 8px 0 0;
  color: #777;
  font-size: 9px;
  line-height: 1.5;
}
.tier-detail-note code { color: #aaa; }

/* =========================================================
   Rank-scaled edition animation for weapon detail panel
   ========================================================= */

.info-pane[data-tier-rank="-1"] .edition-label::before,
.info-pane[data-tier-rank="0"] .edition-label::before {
  animation-duration: 4s;
  opacity: .55;
}
.info-pane[data-tier-rank="1"] .edition-label::before { animation-duration: 3.3s; }
.info-pane[data-tier-rank="2"] .edition-label::before { animation-duration: 2.6s; }
.info-pane[data-tier-rank="3"] .edition-label::before { animation-duration: 1.95s; }
.info-pane[data-tier-rank="4"] .edition-label::before { animation-duration: 1.4s; }

.info-pane[data-tier-rank="-1"] .edition-label::after,
.info-pane[data-tier-rank="0"] .edition-label::after {
  animation-duration: 6.4s;
  opacity: .28;
}
.info-pane[data-tier-rank="1"] .edition-label::after { animation-duration: 5.1s; }
.info-pane[data-tier-rank="2"] .edition-label::after { animation-duration: 4s; }
.info-pane[data-tier-rank="3"] .edition-label::after { animation-duration: 3s; }
.info-pane[data-tier-rank="4"] .edition-label::after { animation-duration: 2.15s; }

.info-pane[data-tier-rank="3"] .edition-label {
  box-shadow: 0 0 18px rgba(var(--edition-rgb),.08);
}
.info-pane[data-tier-rank="4"] .edition-label {
  border-color: rgba(var(--edition-rgb),.38);
  background: rgba(var(--edition-rgb),.115);
  box-shadow:
    0 0 16px rgba(var(--edition-rgb),.1),
    0 0 34px rgba(var(--edition-rgb),.06);
}
.info-pane[data-tier-rank="4"] .edition-label::before {
  content: "✦ ✧";
  letter-spacing: 2px;
}

@media (max-width: 1200px) {
  .collectible-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .section-switcher { top: 67px; }
  .collectible-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .collectible-dialog {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    overflow: hidden;
  }
  .collectible-detail-layout { grid-template-columns: minmax(0,1fr) 330px; }
  .collectible-nav-prev { left: 12px; }
  .collectible-nav-next { right: 12px; }
}
@media (max-width: 720px) {
  .section-switcher { position: static; margin-top: 6px; }
  .collectible-toolbar { align-items: flex-start; flex-direction: column; }
  .collectible-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .collectible-media { height: 132px; }
  .collectible-dialog { overflow-y: auto; }
  .collectible-detail-layout { display: block; height: auto; min-height: 100%; }
  .collectible-detail-media { height: 54vh; min-height: 380px; border-right: 0; border-bottom: 1px solid var(--border); }
  .collectible-detail-info { overflow: visible; }
}
@media (max-width: 460px) {
  .collectible-grid { grid-template-columns: 1fr; }
  .collectible-media { height: 190px; }
}


.detail-top-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.detail-exit-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #2c2c2c;
  color: #d6d6d6;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.detail-exit-button:hover {
  background: #343434;
  border-color: var(--border-strong);
}

.detail-exit-button:active {
  transform: scale(.94);
}

.detail-exit-button:focus-visible {
  outline: 2px solid rgba(96,165,250,.62);
  outline-offset: 2px;
}

.collectible-detail-topbar {
  padding-right: 0;
}

@media (max-height: 760px) and (min-width: 721px) {
  .detail-exit-button {
    width: 32px;
    height: 32px;
  }
}


@media (max-height: 720px) and (min-width: 721px) {
  .collectible-detail-image.asset-spray-transparent,
  .collectible-detail-image.asset-spray-full,
  .collectible-detail-image.asset-spray-icon,
  .collectible-detail-image.asset-buddy,
  .collectible-detail-image.asset-tier,
  .collectible-detail-image.asset-animation {
    max-height: 66%;
  }

  .collectible-asset-switcher {
    bottom: 10px;
  }
}


/* Performance / smoothness pass */
.skin-card,
.collectible-card,
.tier-guide-card {
  contain: layout paint style;
}

.preview-stage,
.collectible-detail-media {
  contain: layout paint;
}

.detail-dialog,
.collectible-dialog {
  contain: layout paint style;
}

@media (prefers-reduced-motion: no-preference) {
  .detail-dialog[open],
  .collectible-dialog[open] {
    animation: dialogEnter .16s cubic-bezier(.2,.8,.2,1);
  }

  @keyframes dialogEnter {
    from { opacity: 0; transform: scale(.992); }
    to { opacity: 1; transform: scale(1); }
  }
}


/* Safer spray preview presentation */
.collectible-detail-image.asset-spray-transparent,
.collectible-detail-image.asset-spray-full,
.collectible-detail-image.asset-spray-icon {
  width: auto;
  height: auto;
  max-width: min(66%, 560px);
  max-height: min(66%, 520px);
  object-fit: contain;
  object-position: center;
  place-self: center;
  margin: auto;
}


/* =========================================================
   Public feature pack
   ========================================================= */

.app-header {
  position: relative;
}

.global-search-panel {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 120;
  width: min(720px, calc(100vw - 28px));
  max-height: min(72vh, 720px);
  overflow-y: auto;
  transform: translateX(-50%);
  padding: 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(29,29,29,.98);
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
  scrollbar-gutter: stable;
}

.global-result-group + .global-result-group {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(255,255,255,.055);
}

.global-result-heading {
  min-height: 28px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8c8c8c;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.global-result {
  width: 100%;
  min-height: 56px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.global-result:hover,
.global-result:focus-visible {
  background: rgba(255,255,255,.055);
  outline: none;
}

.global-result-image {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #202020;
  color: #777;
}

.global-result-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.global-result-copy { min-width: 0; }

.global-result-copy strong {
  display: block;
  overflow: hidden;
  color: #e8e8e8;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-result-copy small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #777;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-result-arrow { color: #666; font-size: 18px; }
.global-search-loading,
.global-search-empty {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #888;
  font-size: 9px;
}

.media-spinner {
  width: 18px;
  height: 18px;
  display: inline-block;
  border: 2px solid rgba(255,255,255,.14);
  border-top-color: rgba(255,255,255,.8);
  border-radius: 50%;
  animation: featureSpin .7s linear infinite;
}
@keyframes featureSpin { to { transform: rotate(360deg); } }

.video-loading-indicator {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 8;
  min-width: 148px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: translate(-50%,-50%);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: rgba(24,24,24,.76);
  color: rgba(255,255,255,.8);
  pointer-events: none;
}
.video-loading-indicator strong { font-size: 9px; font-weight: 600; }






.detail-action-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #2c2c2c;
  color: #cfcfcf;
  cursor: pointer;
  font-size: 14px;
}
.detail-action-button:hover { background: #343434; color: #fff; }

.image-preview-tools,
.collectible-preview-tools {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 8;
  display: flex;
  gap: 5px;
  max-width: calc(100% - 28px);
  flex-wrap: wrap;
}

.preview-tool-button {
  min-height: 31px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(27,27,27,.82);
  color: #aaa;
  cursor: pointer;
  font-size: 8px;
}
.preview-tool-button:hover { background: rgba(45,45,45,.95); color: #fff; }

.image-preview,
.collectible-detail-media {
  --preview-image: none;
}

.image-preview[data-preview-bg="checker"],
.collectible-detail-media[data-preview-bg="checker"] {
  background-color: #202020;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.04) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}

.image-preview[data-preview-bg="blur"]::before,
.collectible-detail-media[data-preview-bg="blur"]::before {
  content: "";
  position: absolute;
  inset: -30px;
  z-index: 0;
  background-image: var(--preview-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(34px) saturate(.85);
  opacity: .23;
  transform: scale(1.08);
  pointer-events: none;
}

.image-preview[data-preview-bg="blur"]::after,
.collectible-detail-media[data-preview-bg="blur"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(20,20,20,.58);
  pointer-events: none;
}

.image-preview > img,
.image-preview > .image-preview-tools,
.image-preview > .image-source-controls,
.collectible-detail-media > img,
.collectible-detail-media > .collectible-title-visual,
.collectible-detail-media > .collectible-preview-tools,
.collectible-detail-media > .collectible-asset-switcher {
  position: relative;
  z-index: 2;
}


.feature-dialog {
  width: min(1180px, calc(100vw - 30px));
  max-width: none;
  max-height: calc(100vh - 30px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: #202020;
  color: var(--text);
  box-shadow: 0 35px 100px rgba(0,0,0,.62);
}
.feature-dialog::backdrop { background: rgba(7,7,7,.8); }

.feature-dialog-header {
  min-height: 92px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border);
}
.feature-dialog-header h2 {
  margin: 4px 0 4px;
  font-size: 24px;
  letter-spacing: -.035em;
}
.feature-dialog-header p {
  margin: 0;
  color: #777;
  font-size: 9px;
}
.feature-close-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #2a2a2a;
  color: #ddd;
  cursor: pointer;
  font-size: 20px;
}


.primary-feature-button,
.compare-tray-actions button,
.share-card-actions button,
.night-market-toolbar button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #2d2d2d;
  color: #ddd;
  cursor: pointer;
  font-size: 9px;
}
.primary-feature-button {
  background: #3a3a3a !important;
  color: #fff !important;
}


.compare-tray strong {
  display: block;
  font-size: 10px;
}
.compare-tray span {
  display: block;
  margin-top: 2px;
  color: #777;
  font-size: 8px;
}


.share-card-dialog { width: min(900px,calc(100vw - 30px)); }
.share-card-preview {
  padding: 16px;
  display: grid;
  place-items: center;
  background: #171717;
}
.share-card-preview img {
  width: 100%;
  max-height: 58vh;
  object-fit: contain;
  border-radius: 12px;
}
.share-card-actions {
  padding: 11px 16px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.site-toast {
  position: fixed;
  left: 50%;
  bottom: 82px;
  z-index: 300;
  padding: 9px 12px;
  transform: translate(-50%,8px);
  opacity: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(31,31,31,.97);
  color: #ddd;
  font-size: 9px;
  box-shadow: 0 12px 35px rgba(0,0,0,.4);
  transition: opacity .15s ease, transform .15s ease;
}
.site-toast.show {
  opacity: 1;
  transform: translate(-50%,0);
}

@media (max-width: 760px) {
  .global-search-panel { top: 100%; }
    .feature-dialog { width: calc(100vw - 12px); }
    .detail-action-button:nth-child(-n+3) { width: 32px; height: 32px; }
}

@media (max-width: 500px) {
      .image-preview-tools,
  .collectible-preview-tools {
    left: 8px;
    bottom: 8px;
  }
}


/* =========================================================
   UI correction pass
   ========================================================= */

/* Keep preview controls pinned to the corners. Earlier feature styles
   accidentally reset them to position:relative, which pulled them into
   the center of the image stage. */
.image-preview > .image-preview-tools {
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  bottom: 14px !important;
  z-index: 12 !important;
}

.image-preview > .image-source-controls {
  position: absolute !important;
  left: auto !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 12 !important;
  max-width: calc(100% - 250px);
}

.collectible-detail-media > .collectible-preview-tools {
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  bottom: 14px !important;
  z-index: 12 !important;
}

.collectible-detail-media > .collectible-asset-switcher {
  position: absolute !important;
  left: auto !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 12 !important;
  max-width: calc(100% - 250px);
}

.site-toast[popover] {
  inset: auto auto 82px 50%;
  margin: 0;
  transform: translate(-50%, 8px);
  border: 1px solid rgba(255,255,255,.1);
}

.site-toast[popover].show {
  transform: translate(-50%,0);
}

/* Compare tray */








/* Keep the top right action cluster from crushing the info panel. */
.detail-top-actions {
  gap: 5px;
}

@media (max-width: 980px) {
  .night-builder-slots { grid-template-columns: 1fr; }
  .night-reveal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .night-reveal-grid { grid-template-columns: 1fr; }
  .night-builder-slot { grid-template-columns: 92px minmax(0,1fr); }
  .night-builder-art { height: 100px; }
  
  .image-preview > .image-source-controls,
  .collectible-detail-media > .collectible-asset-switcher {
    max-width: calc(100% - 28px);
    bottom: 54px !important;
  }
}


/* =========================================================
   Valorahub reliability + VALORANT polish pass
   ========================================================= */

:root {
  --accent: #ff4655;
  --accent-soft: rgba(255,70,85,.13);
  --valorant-red: #ff4655;
  --valorant-red-deep: #bd3944;
}

body {
  background:
    radial-gradient(circle at 0 0, rgba(255,70,85,.075), transparent 31rem),
    radial-gradient(circle at 100% 16%, rgba(255,70,85,.035), transparent 30rem),
    linear-gradient(180deg, #1b1b1b 0%, #151515 100%);
}

::selection { background: rgba(255,70,85,.3); }

/* The feature-pack CSS previously changed .app-header back to relative,
   which is why only the section menu followed the page. Keep both bars
   together while scrolling. */
.app-header {
  position: sticky !important;
  top: 10px !important;
  z-index: 90 !important;
  border-color: rgba(255,255,255,.09);
  box-shadow:
    0 12px 34px rgba(0,0,0,.3),
    inset 3px 0 0 rgba(255,70,85,.72),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.section-switcher {
  position: sticky !important;
  top: 80px !important;
  z-index: 80 !important;
  box-shadow:
    0 9px 24px rgba(0,0,0,.22),
    inset 0 -1px 0 rgba(255,70,85,.08);
}

.section-button.active {
  color: #fff;
  background: rgba(255,70,85,.11);
  border-color: rgba(255,70,85,.24);
  box-shadow: inset 0 -2px 0 rgba(255,70,85,.8);
}

.section-button:hover {
  color: #fff;
  background: rgba(255,70,85,.065);
}

.eyebrow { color: #d96570; }
.search-box:focus-within {
  border-color: rgba(255,70,85,.48);
  box-shadow: 0 0 0 3px rgba(255,70,85,.075);
}

.filter-panel,
.collectible-toolbar {
  box-shadow:
    inset 2px 0 0 rgba(255,70,85,.36),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.category-button.active,
.filter-toggle.active {
  background: rgba(255,70,85,.11);
  color: #fff;
}

/* Filter/sort controls for every collectible library. */
.collectible-toolbar-controls {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.collectible-toolbar-controls select {
  min-width: 132px;
}

/* Restore modal navigation. Paint containment clipped the buttons because
   they intentionally sit outside the modal edges. */
.detail-dialog,
.collectible-dialog {
  contain: layout style !important;
}

.cosmetic-nav,
.collectible-nav {
  top: 50% !important;
  z-index: 90 !important;
  transform: translateY(-50%) !important;
  border-color: rgba(255,255,255,.13);
  background: rgba(27,27,27,.96);
  box-shadow: 0 14px 38px rgba(0,0,0,.38);
}

.cosmetic-nav:hover,
.collectible-nav:hover {
  color: #fff;
  border-color: rgba(255,70,85,.55);
  background: rgba(255,70,85,.16);
}

/* Card artwork should be fully visible and consistently scaled instead of
   cropping or relying on a source's natural pixel size. */
.skin-media,
.collectible-media {
  isolation: isolate;
}

.skin-media img {
  width: 90% !important;
  height: 86% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.2));
}

.collectible-media img {
  width: 88% !important;
  height: 86% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.2));
}

.collectible-card[data-type="cards"] .collectible-media img {
  width: 94% !important;
  height: 90% !important;
  object-fit: contain !important;
  padding: 0 !important;
}

.collectible-card[data-type="sprays"] .collectible-media img {
  width: 82% !important;
  height: 82% !important;
}

.collectible-card[data-type="buddies"] .collectible-media img {
  width: 78% !important;
  height: 88% !important;
}

.collectible-media img.asset-missing {
  opacity: 0;
}

.collectible-missing-art {
  color: #6f6f6f;
  font-size: 9px;
}

/* Detail artwork now deliberately occupies the preview area while always
   remaining contained. This also makes small API icons readable. */
.collectible-detail-media > img,
.collectible-detail-image {
  width: 78% !important;
  height: 78% !important;
  max-width: 820px !important;
  max-height: 620px !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.22));
}

.collectible-detail-image.asset-card {
  width: 88% !important;
  height: 86% !important;
  max-width: 880px !important;
  max-height: 680px !important;
}

.collectible-detail-image.asset-spray-transparent,
.collectible-detail-image.asset-spray-full,
.collectible-detail-image.asset-spray-icon,
.collectible-detail-image.asset-animation {
  width: 72% !important;
  height: 72% !important;
  max-width: 660px !important;
  max-height: 560px !important;
}

.collectible-detail-image.asset-buddy {
  width: 68% !important;
  height: 76% !important;
  max-width: 600px !important;
  max-height: 590px !important;
}

/* Slight VALORANT-style surface treatment without changing the layout. */
.skin-card:hover,
.collectible-card:hover {
  border-color: rgba(255,70,85,.24);
  box-shadow:
    0 10px 24px rgba(0,0,0,.2),
    0 0 0 1px rgba(255,70,85,.035);
}

/* Clean top accent, intentionally inset so it reads as part of each card
   instead of a stray red dash floating above the grid. */
.skin-card::before,
.collectible-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  z-index: 2;
  width: auto;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,70,85,.28) 12%,
    rgba(255,70,85,.76) 50%,
    rgba(255,70,85,.28) 88%,
    transparent 100%
  );
  opacity: .72;
  pointer-events: none;
}

@media (max-width: 720px) {
  .app-header {
    top: 5px !important;
  }

  .section-switcher {
    position: sticky !important;
    top: 68px !important;
    margin-top: 6px;
  }

  .collectible-toolbar-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .collectible-toolbar-controls select {
    flex: 1 1 145px;
  }
}


/* Collectible viewer control reliability + exact navigation centering */
.collectible-dialog {
  overflow: visible;
}

.collectible-nav {
  top: 50% !important;
  width: 48px !important;
  height: 60px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-50%) !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  z-index: 120 !important;
}

.collectible-nav-prev {
  left: -62px !important;
}

.collectible-nav-next {
  right: -62px !important;
}

@media (max-width: 960px) {
  .collectible-nav-prev { left: 10px !important; }
  .collectible-nav-next { right: 10px !important; }
}


/* =========================================================
   QoL: exact modal navigation + artwork quality
   ========================================================= */
.cosmetic-nav,
.collectible-nav {
  position: absolute !important;
  top: 50% !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform: translateY(-50%) !important;
  line-height: 0 !important;
}

.cosmetic-nav .nav-chevron,
.collectible-nav .nav-chevron {
  width: 11px;
  height: 11px;
  display: block;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform-origin: 50% 50%;
}

.cosmetic-nav-prev .nav-chevron,
.collectible-nav-prev .nav-chevron {
  transform: translateX(2px) rotate(-135deg);
}

.cosmetic-nav-next .nav-chevron,
.collectible-nav-next .nav-chevron {
  transform: translateX(-2px) rotate(45deg);
}

/* Buddy viewer has two intentional presentation modes.
   Normal keeps the cleaner level icon restrained; Large recreates the bigger
   lower-detail Buddy render using the API's item.displayIcon source. */
.collectible-detail-image.asset-buddy {
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
}

.collectible-detail-image.asset-buddy-normal {
  width: auto !important;
  height: auto !important;
  max-width: min(56%, 500px) !important;
  max-height: min(64%, 500px) !important;
}

.collectible-detail-image.asset-buddy-large {
  width: min(82%, 760px) !important;
  height: min(82%, 650px) !important;
  max-width: min(82%, 760px) !important;
  max-height: min(82%, 650px) !important;
}

/* Slightly reduce dead vertical space around normal collectible art while
   keeping tall cards and sprays safely contained. */
.collectible-detail-media {
  padding-block: 6px;
}

.collectible-preview-tools.hidden {
  display: none !important;
}


/* =========================================================
   Buddy / charm compact browsing
   ========================================================= */
.collectible-grid[data-section="buddies"] {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 8px;
}

.collectible-card[data-type="buddies"] {
  contain-intrinsic-size: 190px;
}

.collectible-card[data-type="buddies"] .collectible-media {
  height: 118px;
}

.collectible-card[data-type="buddies"] .collectible-media img {
  width: auto;
  height: auto;
  max-width: 84%;
  max-height: 110px;
  padding: 4px;
  object-fit: contain;
}

.collectible-card[data-type="buddies"] .collectible-card-body {
  padding: 8px 10px 9px;
}

.collectible-card[data-type="buddies"] .collectible-card-body h3 {
  margin-top: 3px;
  font-size: 10px;
}

.collectible-card[data-type="buddies"] .collectible-card-footer {
  margin-top: 6px;
}

.collectible-grid[data-section="buddies"] .collectible-favorite {
  width: 27px;
  height: 27px;
  top: 6px;
  right: 6px;
}

@media (max-width: 760px) {
  .collectible-grid[data-section="buddies"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
}

@media (max-width: 440px) {
  .collectible-grid[data-section="buddies"] {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Agents // VALORANT Protocol dossier
   ========================================================= */
.agent-section {
  --agent-accent: 255,70,85;
  padding-bottom: 20px;
}

.agents-section-button {
  position: relative;
}
.agents-section-button::after {
  content: "NEW";
  position: absolute;
  top: -7px;
  right: -8px;
  padding: 1px 4px;
  border-radius: 999px;
  background: var(--valorant);
  color: #fff;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: .86;
}
.agents-section-button.active::after { opacity: 0; }

.agent-hero {
  position: relative;
  min-height: 230px;
  margin: 2px 0 12px;
  padding: 34px 38px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background:
    linear-gradient(120deg, rgba(255,70,85,.14), transparent 38%),
    repeating-linear-gradient(120deg, transparent 0 46px, rgba(255,255,255,.018) 47px 48px),
    #202020;
}
.agent-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, transparent, #ff4655 18%, #ff4655 82%, transparent);
}
.agent-hero::after {
  content: "VALORANT";
  position: absolute;
  right: 130px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  color: rgba(255,255,255,.025);
  font-size: 112px;
  font-weight: 800;
  letter-spacing: .13em;
  pointer-events: none;
}
.agent-kicker {
  display: block;
  color: #ff6572;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}
.agent-hero h1 {
  margin: 7px 0 4px;
  font-size: clamp(38px,5vw,68px);
  line-height: .92;
  font-weight: 800;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.agent-hero p {
  max-width: 560px;
  margin: 0;
  color: #aaa;
  font-size: 14px;
}
.agent-hero-mark {
  position: relative;
  z-index: 1;
  width: 126px;
  height: 126px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,70,85,.28);
  clip-path: polygon(18% 0,100% 0,100% 82%,82% 100%,0 100%,0 18%);
  background: rgba(255,70,85,.055);
}
.agent-hero-mark span {
  color: #ff5563;
  font-size: 56px;
  font-weight: 800;
  line-height: .8;
}
.agent-hero-mark small {
  position: absolute;
  bottom: 13px;
  color: #8d8d8d;
  font-size: 7px;
  letter-spacing: .18em;
}

.agent-controls {
  min-height: 54px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 12px;
}
.agent-role-filters {
  min-width: 0;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}
.agent-role-filters::-webkit-scrollbar { display: none; }
.agent-role-button {
  min-height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #9d9d9d;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: .18s ease;
}
.agent-role-button img { width: 16px; height: 16px; object-fit: contain; opacity: .8; }
.agent-role-button:hover { color: #fff; background: rgba(255,255,255,.05); }
.agent-role-button.active {
  color: #fff;
  border-color: rgba(255,70,85,.28);
  background: rgba(255,70,85,.095);
  box-shadow: inset 0 -2px #ff4655;
}
.agent-control-meta { flex: 0 0 auto; text-align: right; }
.agent-control-meta span,
.agent-control-meta strong { display: block; }
.agent-control-meta span { color: #8c8c8c; font-size: 9px; }
.agent-control-meta span i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(108,203,154,.08);
}
.agent-control-meta strong { margin-top: 2px; font-size: 12px; }

.agent-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 11px;
  margin-top: 12px;
}
.agent-card {
  --agent-card-a: #ff4655;
  --agent-card-b: #7a2630;
  --agent-tilt-x: 0deg;
  --agent-tilt-y: 0deg;
  --agent-mx: 50%;
  --agent-my: 35%;
  position: relative;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 13px;
  background: #202020;
  cursor: pointer;
  isolation: isolate;
  transform: perspective(850px) rotateX(var(--agent-tilt-x)) rotateY(var(--agent-tilt-y));
  transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease;
  content-visibility: auto;
  contain-intrinsic-size: 340px;
}
.agent-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at var(--agent-mx) var(--agent-my), color-mix(in srgb,var(--agent-card-a) 28%,transparent), transparent 34%),
    linear-gradient(155deg, color-mix(in srgb,var(--agent-card-a) 17%,#202020), #1a1a1a 62%);
}
.agent-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-top: 2px solid color-mix(in srgb,var(--agent-card-a) 70%,transparent);
  background: linear-gradient(180deg, transparent 60%, rgba(14,14,14,.88));
  pointer-events: none;
}
.agent-card:hover {
  border-color: color-mix(in srgb,var(--agent-card-a) 42%,rgba(255,255,255,.1));
  box-shadow: 0 18px 38px rgba(0,0,0,.28);
  transform: perspective(850px) rotateX(var(--agent-tilt-x)) rotateY(var(--agent-tilt-y)) translateY(-3px);
}
.agent-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .13;
  filter: saturate(.75) contrast(1.1);
}
.agent-card-portrait {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 7px;
  width: 112%;
  height: 82%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.34));
  transition: transform .28s cubic-bezier(.2,.8,.2,1), filter .25s ease;
}
.agent-card:hover .agent-card-portrait {
  transform: translateX(-50%) scale(1.035);
  filter: drop-shadow(0 22px 24px rgba(0,0,0,.42));
}
.agent-card-number {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 11px;
  color: rgba(255,255,255,.24);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.agent-card-copy {
  position: absolute;
  z-index: 4;
  left: 13px;
  right: 13px;
  bottom: 12px;
}
.agent-card-role {
  display: flex;
  align-items: center;
  gap: 6px;
  color: color-mix(in srgb,var(--agent-card-a) 78%,white);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.agent-card-role img { width: 15px; height: 15px; object-fit: contain; }
.agent-card h3 {
  margin: 4px 0 0;
  color: #f5f5f5;
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.agent-card-open {
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8c8c8c;
  font-size: 8px;
}
.agent-card-open b { color: #ccc; font-size: 14px; font-weight: 500; }

.agent-dialog {
  --agent-a: #ff4655;
  --agent-b: #57242a;
  position: relative;
  width: min(1390px,calc(100vw - 120px));
  height: min(830px,calc(100vh - 28px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  background: #181818;
  color: var(--text);
  box-shadow: 0 35px 110px rgba(0,0,0,.62);
  opacity: 0;
  transform: scale(.986) translateY(7px);
  transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1), overlay .18s ease allow-discrete, display .18s ease allow-discrete;
}
.agent-dialog[open] { opacity: 1; transform: scale(1) translateY(0); }
@starting-style { .agent-dialog[open] { opacity: 0; transform: scale(.986) translateY(7px); } }
.agent-dialog::backdrop { background: rgba(8,8,8,.84); backdrop-filter: blur(2px); }
.agent-dossier {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(420px,.75fr);
  border-radius: inherit;
}
.agent-dossier-visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb,var(--agent-a) 16%,transparent), transparent 35%),
    linear-gradient(145deg,color-mix(in srgb,var(--agent-b) 24%,#171717),#151515 70%);
  border-right: 1px solid rgba(255,255,255,.075);
}
.agent-dossier-background {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  opacity: .14;
  filter: saturate(.7) contrast(1.15);
  animation: agentBgFloat 11s ease-in-out infinite alternate;
}
@keyframes agentBgFloat { to { transform: translate3d(1.6%,-1%,0) scale(1.025); } }
.agent-dossier-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg,black,transparent 84%);
}
.agent-dossier-grid::before,
.agent-dossier-grid::after {
  content: "";
  position: absolute;
  background: color-mix(in srgb,var(--agent-a) 60%,transparent);
}
.agent-dossier-grid::before { left: 6%; top: 10%; width: 1px; height: 58%; }
.agent-dossier-grid::after { left: 6%; top: 10%; width: 27%; height: 1px; }
.agent-dossier-index {
  position: absolute;
  top: 24px;
  right: 28px;
  color: rgba(255,255,255,.045);
  font-size: 150px;
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.07em;
}
.agent-dossier-portrait {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -3%;
  width: 96%;
  height: 102%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  filter: drop-shadow(0 28px 35px rgba(0,0,0,.38));
  animation: agentPortraitIn .45s cubic-bezier(.15,.8,.2,1) both;
}
@keyframes agentPortraitIn {
  from { opacity: 0; transform: translateX(-50%) translateY(22px) scale(.985); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.agent-dossier-label {
  position: absolute;
  z-index: 3;
  left: 27px;
  bottom: 25px;
  max-width: 70%;
  text-shadow: 0 3px 18px rgba(0,0,0,.62);
}
.agent-dossier-label span {
  display: block;
  color: color-mix(in srgb,var(--agent-a) 78%,white);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .17em;
}
.agent-dossier-label strong {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-size: clamp(42px,5vw,76px);
  line-height: .86;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.agent-dossier-info {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 22px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb,var(--agent-a) 18%,transparent), transparent 36%),
    #222;
}
.agent-dossier-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.agent-role-chip {
  min-height: 34px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: #d8d8d8;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.agent-role-chip img { width: 18px; height: 18px; object-fit: contain; }
.agent-dossier-heading {
  padding: 25px 0 18px;
  border-bottom: 1px solid var(--border);
}
.agent-dossier-number {
  color: color-mix(in srgb,var(--agent-a) 75%,white);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
}
.agent-dossier-heading h2 {
  margin: 4px 0 7px;
  font-size: 48px;
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.04em;
}
.agent-dossier-heading p {
  margin: 0;
  color: #8d8d8d;
  font-size: 11px;
  line-height: 1.35;
}
.agent-bio-block {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.agent-bio-block > span,
.agent-section-title > span {
  display: block;
  color: #6f6f6f;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;
}
.agent-bio-block p {
  margin: 5px 0 0;
  color: #c5c5c5;
  font-size: 12px;
  line-height: 1.45;
}
.agent-abilities-section { padding: 16px 0; border-bottom: 1px solid var(--border); }
.agent-section-title strong { display: block; margin-top: 2px; font-size: 14px; }
.agent-ability-rail {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 6px;
}
.agent-ability-button {
  position: relative;
  min-height: 62px;
  padding: 7px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #292929;
  cursor: pointer;
  transition: .17s ease;
}
.agent-ability-button img { width: 34px; height: 34px; object-fit: contain; opacity: .76; }
.agent-ability-button span {
  position: absolute;
  left: 6px;
  bottom: 4px;
  color: #666;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .1em;
}
.agent-ability-button:hover { border-color: rgba(255,255,255,.16); background: #303030; }
.agent-ability-button.active {
  border-color: color-mix(in srgb,var(--agent-a) 50%,transparent);
  background: color-mix(in srgb,var(--agent-a) 10%,#292929);
  box-shadow: inset 0 -2px color-mix(in srgb,var(--agent-a) 70%,transparent);
}
.agent-ability-button.active img { opacity: 1; }
.agent-ability-detail {
  min-height: 126px;
  margin-top: 8px;
  padding: 11px;
  display: grid;
  grid-template-columns: 64px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  animation: abilityIn .2s ease both;
}
@keyframes abilityIn { from { opacity: .45; transform: translateY(3px); } }
.agent-ability-icon-wrap {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: color-mix(in srgb,var(--agent-a) 9%,#1d1d1d);
}
.agent-ability-icon-wrap img { width: 44px; height: 44px; object-fit: contain; }
.agent-ability-detail span { color: color-mix(in srgb,var(--agent-a) 76%,white); font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.agent-ability-detail h3 { margin: 2px 0 3px; font-size: 16px; }
.agent-ability-detail p { margin: 0; color: #9a9a9a; font-size: 10px; line-height: 1.4; }

.agent-card-lab { padding: 16px 0 3px; }
.agent-card-lab-row { margin-top: 9px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.agent-username-field {
  min-width: 0;
  padding: 6px 9px;
  display: grid;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #1d1d1d;
}
.agent-username-field span { color: #686868; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.agent-username-field input { min-width: 0; border: 0; outline: 0; background: transparent; color: #eee; font-size: 12px; }
.agent-download-card-button {
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(255,70,85,.3);
  border-radius: 8px;
  background: linear-gradient(135deg,rgba(255,70,85,.18),rgba(255,70,85,.08));
  color: #ffd8dc;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  transition: .16s ease;
}
.agent-download-card-button:hover { transform: translateY(-1px); background: rgba(255,70,85,.2); }
.agent-player-tag {
  margin-top: 7px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 2px solid color-mix(in srgb,var(--agent-a) 75%,transparent);
  background: rgba(255,255,255,.025);
}
.agent-player-tag span { color: #666; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.agent-player-tag strong { font-size: 10px; }

.agent-nav {
  position: absolute;
  top: 50%;
  z-index: 30;
  width: 46px;
  height: 58px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(31,31,31,.94);
  color: #ddd;
  cursor: pointer;
  transition: .15s ease;
}
.agent-nav:hover { background: rgba(255,70,85,.12); border-color: rgba(255,70,85,.3); }
.agent-nav .nav-chevron { width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.agent-nav-prev { left: -58px; }
.agent-nav-next { right: -58px; }
.agent-nav-prev .nav-chevron { transform: rotate(-135deg); }
.agent-nav-next .nav-chevron { transform: rotate(45deg); }

@media (max-width: 1250px) {
  .agent-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .agent-dossier { grid-template-columns: minmax(0,1fr) 430px; }
}
@media (max-width: 980px) {
  .agent-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .agent-dialog { width: min(960px,calc(100vw - 28px)); height: calc(100vh - 24px); overflow: auto; }
  .agent-dossier { height: auto; min-height: 100%; grid-template-columns: 1fr; }
  .agent-dossier-visual { min-height: 520px; border-right: 0; border-bottom: 1px solid var(--border); }
  .agent-nav { display: none; }
}
@media (max-width: 720px) {
  .agent-hero { min-height: 190px; padding: 28px 24px; }
  .agent-hero-mark { display: none; }
  .agent-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .agent-card { min-height: 300px; }
  .agent-controls { align-items: stretch; flex-direction: column; }
  .agent-control-meta { text-align: left; }
  .agent-dossier-visual { min-height: 440px; }
  .agent-dossier-info { padding: 17px; }
  .agent-card-lab-row { grid-template-columns: 1fr; }
}
@media (max-width: 470px) {
  .agent-grid { grid-template-columns: 1fr 1fr; }
  .agent-card { min-height: 260px; }
  .agent-card h3 { font-size: 18px; }
  .agent-dossier-visual { min-height: 390px; }
  .agent-ability-rail { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .agent-card,
  .agent-card-portrait,
  .agent-dossier-portrait,
  .agent-dossier-background,
  .agent-ability-detail { animation: none !important; transition: none !important; }
}