/* AKREI STOCKS V21 — cohesive premium finish
   Stable layout, clearer commerce hierarchy, richer theme identity and
   visible Futuristic FX without mouse trails or layout movement. */

:root {
  --ak21-page-gutter: clamp(14px, 2.2vw, 34px);
  --ak21-section-gap: clamp(38px, 6vw, 84px);
  --ak21-radius-sm: 12px;
  --ak21-radius: 20px;
  --ak21-radius-lg: 28px;
  --ak21-shadow: 0 24px 72px rgba(0, 0, 0, .20);
  --ak21-ease: cubic-bezier(.22, 1, .36, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 118px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.ak9-body {
  min-width: 320px;
  overflow-x: clip;
}

::selection {
  color: #fff;
  background: rgba(var(--ak9-accent), .78);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ak21-skip-link {
  position: fixed;
  left: 18px;
  top: 12px;
  z-index: 1000000;
  transform: translateY(-160%);
  padding: 11px 16px;
  border: 1px solid rgba(var(--ak9-accent), .38);
  border-radius: 12px;
  color: rgb(var(--ak9-text));
  background: rgb(var(--ak9-surface));
  box-shadow: var(--ak21-shadow);
  font-size: 13px;
  font-weight: 800;
  transition: transform .2s var(--ak21-ease);
}

.ak21-skip-link:focus { transform: translateY(0); }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--ak9-accent)) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(var(--ak9-accent), .14) !important;
}

:where(button, a, summary, input, select, textarea) {
  -webkit-tap-highlight-color: transparent;
}

.ak9-main,
.ak9-navbar,
.ak9-footer-main,
.ak9-footer-bottom {
  width: min(100% - (var(--ak21-page-gutter) * 2), 1480px);
  margin-inline: auto;
}

.ak9-main { min-width: 0; }
.ak9-main > :where(.component, .components) { min-width: 0; }

/* Header: dense, stable, and readable at every desktop width. */
.ak9-header {
  padding-inline: var(--ak21-page-gutter) !important;
}

.ak9-navbar {
  min-width: 0 !important;
  border-radius: 22px !important;
  border-color: rgba(var(--ak9-border), .14) !important;
  background: color-mix(in srgb, rgb(var(--ak9-surface)) 92%, transparent) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .035) !important;
  backdrop-filter: blur(20px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.18) !important;
}

.ak9-brand,
.ak9-nav,
.ak9-actions { min-width: 0; }

.ak9-brand-copy strong { letter-spacing: -.035em; }
.ak9-brand-copy small { opacity: .72; }
.ak9-search-trigger kbd { opacity: .62; }

.ak9-nav-link,
.ak9-search-trigger,
.ak9-actions > :where(a, button, details) > summary {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.ak9-nav-link:hover,
.ak9-nav-link.is-active {
  color: rgb(var(--ak9-text)) !important;
  background: rgba(var(--ak9-accent), .10) !important;
}

.ak11-games-menu {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ak9-accent), .52) transparent;
}

.ak11-game-mega-card {
  min-width: 0;
  border-radius: 20px !important;
}

.ak11-game-mega-card > div { min-width: 0; }
.ak11-game-mega-card strong,
.ak11-game-mega-card small { overflow-wrap: anywhere; }

/* Hero: stronger hierarchy with a calmer, more expensive-looking frame. */
.ak9-store { gap: var(--ak21-section-gap) !important; }

.ak9-hero {
  min-width: 0 !important;
  border-radius: clamp(24px, 3vw, 36px) !important;
  border-color: rgba(var(--ak9-border), .14) !important;
  background:
    radial-gradient(circle at 10% 10%, rgba(var(--ak9-accent), .12), transparent 34%),
    radial-gradient(circle at 86% 82%, rgba(var(--ak9-accent-2), .10), transparent 38%),
    linear-gradient(145deg, rgba(var(--ak9-surface), .97), rgba(var(--ak9-surface-2), .82)) !important;
  box-shadow: 0 36px 100px rgba(0, 0, 0, .20), inset 0 1px rgba(255, 255, 255, .035) !important;
  isolation: isolate;
}

.ak9-hero-copy { min-width: 0; }
.ak9-hero h1 { max-width: 12ch; text-wrap: balance; }
.ak9-hero h1 strong { position: relative; }
.ak9-hero p { max-width: 640px; text-wrap: pretty; }

.ak9-eyebrow {
  border: 1px solid rgba(var(--ak9-accent), .20) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}

.ak9-primary,
.ak9-secondary,
.ak9-outline {
  min-height: 48px;
  border-radius: 14px !important;
  font-weight: 800 !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.ak9-primary:hover {
  box-shadow: 0 16px 38px rgba(var(--ak9-accent), .28) !important;
}

.ak9-hero-proof > span {
  min-width: 0;
  border-color: rgba(var(--ak9-border), .12) !important;
  background: rgba(var(--ak9-surface-2), .68) !important;
}

.ak9-hero-stage {
  min-width: 0;
  filter: drop-shadow(0 34px 76px rgba(0, 0, 0, .28));
}

.ak9-stage-card-main {
  border-color: rgba(var(--ak9-accent), .22) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .06) !important;
}

/* Dashboard and section rhythm. */
.ak9-dashboard-row,
.ak13-marketplace,
.ak9-trust-center,
.ak9-feedbacks,
.ak9-product-shell,
.ak9-page-shell,
.ak-page-heading {
  min-width: 0;
}

.ak9-metrics article,
.ak9-ranking,
.ak9-trust-grid article,
.ak9-facts article,
.ak9-feedbacks,
.ak9-purchase-panel,
.ak9-gallery,
.ak9-product-content,
.ak9-product-faq {
  border-color: rgba(var(--ak9-border), .13) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .12), inset 0 1px rgba(255, 255, 255, .025) !important;
}

.ak9-metrics article,
.ak9-trust-grid article,
.ak9-facts article { border-radius: 18px !important; }

.ak9-section-head h2 { text-wrap: balance; }
.ak9-section-head p { text-wrap: pretty; }

/* Catalog: fixes narrow-grid overflow and simplifies visual scanning. */
.ak13-marketplace[data-ak16-catalog] {
  width: 100% !important;
  min-width: 0 !important;
  padding: clamp(18px, 2.4vw, 34px) !important;
  border-radius: var(--ak21-radius-lg) !important;
  border-color: rgba(var(--ak9-border), .14) !important;
  box-shadow: var(--ak21-shadow), inset 0 1px rgba(255, 255, 255, .03) !important;
}

.ak13-market-top,
.ak13-market-grid,
.ak13-inventory-console,
.ak13-console-head,
.ak13-search-row,
.ak13-filter-console,
.ak13-product-shelf,
.ak13-grid-item { min-width: 0 !important; }

.ak13-market-grid {
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(16px, 2vw, 28px) !important;
}

.ak13-worlds-panel {
  top: 110px !important;
  border-radius: 22px !important;
  border-color: rgba(var(--ak9-border), .13) !important;
}

.ak16-category-card {
  min-width: 0;
  min-height: 108px !important;
  border-radius: 18px !important;
  border-color: rgba(var(--ak9-border), .13) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}

.ak16-category-card:hover,
.ak16-category-card.is-active {
  transform: none !important;
  border-color: rgba(var(--ak9-accent), .46) !important;
  box-shadow: 0 14px 38px rgba(var(--ak9-accent), .12) !important;
}

.ak13-search {
  min-width: 0;
  border-radius: 15px !important;
  border-color: rgba(var(--ak9-border), .14) !important;
}

.ak13-search input { min-width: 0; }
.ak13-filter-console { border-radius: 18px !important; }

.ak13-filter-groups {
  display: flex !important;
  flex-wrap: wrap !important;
  min-width: 0;
}

.ak13-filter-groups button {
  max-width: 100%;
  min-width: 0;
  border-radius: 999px !important;
}

.ak13-filter-groups button span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak13-product-shelf {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
}

.ak13-grid-item,
.ak13-product-card {
  width: 100% !important;
  max-width: 100% !important;
}

.ak13-grid-item {
  border-radius: 20px !important;
  transform: none !important;
}

.ak13-product-card {
  min-width: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  border-color: rgba(var(--ak9-border), .14) !important;
  background: linear-gradient(160deg, rgba(var(--ak9-surface), .96), rgba(var(--ak9-surface-2), .84)) !important;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .13) !important;
  transform: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

.ak13-product-card:hover {
  transform: none !important;
  border-color: rgba(var(--ak9-accent), .54) !important;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .18), 0 0 0 1px rgba(var(--ak9-accent), .08) inset !important;
}

.ak13-card-media {
  min-height: 178px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.ak13-card-media::before {
  background-size: 22px 22px !important;
  opacity: .34 !important;
}

.ak13-card-top {
  align-items: flex-start !important;
  gap: 8px !important;
}

.ak13-game-pill,
.ak13-state-pill {
  max-width: 72%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ak21-card-badges {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 28px);
  pointer-events: none;
}

.ak21-card-badges > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 170px;
  min-height: 25px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--ak21-badge-color, #7c5cff) 54%, transparent);
  border-radius: 8px;
  color: #fff;
  background: color-mix(in srgb, var(--ak21-badge-color, #7c5cff) 72%, #090b13);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ak21-badge-color, #7c5cff) 22%, transparent);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak13-product-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: scale(1.01) !important;
  transition: transform .55s var(--ak21-ease), filter .35s ease !important;
}

.ak13-product-card:hover .ak13-product-image {
  transform: scale(1.045) !important;
  filter: saturate(1.08) contrast(1.03);
}

.ak13-card-body { min-width: 0; padding: 17px !important; }
.ak13-card-title-row { min-width: 0; align-items: flex-start !important; }
.ak13-card-title-row h3 {
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ak13-card-meta {
  min-width: 0;
  flex-wrap: wrap;
}

.ak13-card-meta span { min-width: 0; }
.ak13-card-footer { min-width: 0; gap: 10px; }
.ak13-card-footer strong { overflow-wrap: anywhere; }

/* Product page: purchase details stay obvious without crowding. */
.ak9-product-layout,
.ak9-product-layout-v2 {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important;
  gap: clamp(18px, 2.6vw, 34px) !important;
}

.ak9-product-main,
.ak9-purchase-panel { min-width: 0; }

.ak9-purchase-panel {
  top: 112px !important;
  border-radius: 24px !important;
}

.ak9-product-hero,
.ak9-gallery,
.ak9-product-content,
.ak9-product-faq { border-radius: 24px !important; }

.ak9-facts-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.ak9-tabs {
  overflow-x: auto;
  scrollbar-width: none;
}

.ak9-tabs::-webkit-scrollbar { display: none; }
.ak9-tabs button { flex: 0 0 auto; }

.ak9-richtext :where(p, li) { text-wrap: pretty; }

/* Reviews: continuous on FX, still controllable and readable. */
.ak9-review-grid.is-carousel {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ak9-accent), .45) transparent;
}

.ak9-review-grid.is-carousel:hover,
.ak9-review-grid.is-carousel:focus-within { animation-play-state: paused !important; }

.ak9-review-card { min-width: 0; }

/* Footer and legal surfaces. */
.ak9-footer { margin-top: var(--ak21-section-gap) !important; }
.ak9-footer-main { gap: clamp(28px, 5vw, 80px) !important; }
.ak9-footer-columns { min-width: 0; }
.ak9-footer-bottom > span:nth-child(2) { display: inline-flex; align-items: center; gap: 7px; }
.ak9-footer-bottom > span:nth-child(2) i { color: rgb(var(--ak9-accent)); }

/* Native customer pages get the same V21 finish after their dedicated CSS. */
.cp-page,
.cp-layout,
.cp-main,
.cp-card,
.cp-table-wrap { min-width: 0; }

.cp-card,
.cp-hero,
.cp-aside-inner {
  border-color: rgba(var(--ak9-border), .13) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .12) !important;
}

.cp-card,
.cp-hero { border-radius: 22px !important; }

.cp-table-wrap { overflow-x: auto !important; }

/* Theme signatures remain obvious even with FX off. */
html[data-ak-theme="dark"] .ak9-hero {
  background:
    radial-gradient(circle at 14% 0%, rgba(116, 92, 255, .17), transparent 34%),
    radial-gradient(circle at 88% 72%, rgba(40, 220, 255, .09), transparent 36%),
    linear-gradient(145deg, #08090f, #0d0d16) !important;
}

html[data-ak-theme="light"] .ak9-navbar,
html[data-ak-theme="light"] .ak13-product-card,
html[data-ak-theme="light"] .ak9-feedbacks,
html[data-ak-theme="light"] .ak9-purchase-panel {
  box-shadow: 0 20px 58px rgba(41, 66, 120, .11), inset 0 1px rgba(255, 255, 255, .86) !important;
}

html[data-ak-theme="valorant"] .ak9-hero {
  background:
    linear-gradient(118deg, rgba(255, 70, 85, .14), transparent 30%),
    linear-gradient(62deg, transparent 64%, rgba(255, 145, 58, .08)),
    linear-gradient(145deg, #0c080b, #160b10) !important;
}

html[data-ak-theme="valorant"] .ak9-hero::after {
  border-color: rgba(255, 70, 85, .42) !important;
}

html[data-ak-theme="lol"] .ak9-hero {
  background:
    radial-gradient(circle at 80% 24%, rgba(66, 205, 242, .13), transparent 34%),
    linear-gradient(118deg, rgba(222, 181, 83, .14), transparent 32%),
    linear-gradient(145deg, #030d14, #071923) !important;
}

html[data-ak-theme="lol"] .ak9-hero::after {
  border-color: rgba(222, 181, 83, .42) !important;
}

html[data-ak-theme="nexus"] .ak9-hero {
  background:
    radial-gradient(circle at 18% 8%, rgba(116, 82, 255, .24), transparent 33%),
    radial-gradient(circle at 82% 72%, rgba(35, 226, 255, .15), transparent 36%),
    linear-gradient(145deg, #060519, #0a1230) !important;
}

/* V21 Futuristic FX: a visible show, never a layout mutation. */
html[data-ak-fx="on"] .ak9-fx-layer {
  opacity: .76 !important;
  filter: saturate(1.18) !important;
}

html[data-ak-theme="light"][data-ak-fx="on"] .ak9-fx-layer { opacity: .25 !important; }

html[data-ak-fx="on"] .ak9-fx-layer::before {
  opacity: .66 !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(var(--akfx-1), .25), transparent 25%),
    radial-gradient(circle at 86% 24%, rgba(var(--akfx-2), .20), transparent 29%),
    linear-gradient(rgba(var(--akfx-2), .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--akfx-1), .05) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 52px 52px, 52px 52px !important;
  animation: ak21-grid-drift 28s linear infinite !important;
}

html[data-ak-fx="on"] .ak9-fx-layer::after {
  opacity: .24 !important;
  background: linear-gradient(108deg, transparent 0 30%, rgba(var(--akfx-2), .32) 44%, rgba(var(--akfx-1), .14) 49%, transparent 62%) !important;
  animation: ak21-global-scan 8s ease-in-out infinite !important;
}

@keyframes ak21-grid-drift { to { background-position: 0 0, 0 0, 52px 52px, 52px 52px; } }
@keyframes ak21-global-scan { 0%, 100% { transform: translateX(-9%); opacity: .10; } 50% { transform: translateX(9%); opacity: .30; } }

html[data-ak-fx="on"] .akfx-line {
  height: 1px !important;
  opacity: .46 !important;
  filter: drop-shadow(0 0 12px rgba(var(--akfx-2), .42)) !important;
}

html[data-ak-fx="on"] .ak9-navbar {
  border-color: rgba(var(--akfx-2), .30) !important;
  box-shadow: 0 18px 58px rgba(0, 0, 0, .22), 0 0 34px rgba(var(--akfx-1), .11), inset 0 1px rgba(255, 255, 255, .06) !important;
}

html[data-ak-fx="on"] .ak9-hero {
  border-color: rgba(var(--akfx-2), .34) !important;
  box-shadow: 0 38px 110px rgba(0, 0, 0, .24), 0 0 72px rgba(var(--akfx-1), .13), inset 0 1px rgba(255, 255, 255, .055) !important;
}

html[data-ak-fx="on"] .ak9-stage-rings i {
  border-color: rgba(var(--akfx-2), .25) !important;
  box-shadow: 0 0 28px rgba(var(--akfx-1), .10) !important;
  animation-duration: 18s !important;
}

html[data-ak-fx="on"] :is(.ak13-product-card, .ak16-category-card, .ak9-review-card, .ak9-ranking-item, .ak9-offer-card, .ak9-trust-grid article, .ak9-metrics article) {
  transform: none !important;
  border-color: rgba(var(--akfx-1), .30) !important;
  background:
    radial-gradient(circle at var(--akfx-card-x, 50%) var(--akfx-card-y, 16%), rgba(var(--akfx-2), .14), transparent 36%),
    linear-gradient(150deg, rgba(var(--akfx-1), .07), transparent 36%),
    rgba(var(--ak9-surface-2), .90) !important;
  box-shadow: 0 20px 58px rgba(0, 0, 0, .18), 0 0 0 1px rgba(var(--akfx-2), .07) inset, 0 0 30px rgba(var(--akfx-1), .09) !important;
}

html[data-ak-fx="on"] :is(.ak13-product-card, .ak16-category-card, .ak9-review-card, .ak9-ranking-item, .ak9-offer-card, .ak9-trust-grid article, .ak9-metrics article):hover {
  transform: none !important;
  border-color: rgba(var(--akfx-2), .64) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .23), 0 0 0 1px rgba(var(--akfx-2), .14) inset, 0 0 46px rgba(var(--akfx-2), .16) !important;
}

html[data-ak-fx="on"] .ak13-grid-item,
html[data-ak-fx="on"] .ak13-grid-item:hover {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
}

html[data-ak-fx="on"] .ak13-grid-item::before,
html[data-ak-fx="on"] .ak13-grid-item::after {
  content: none !important;
  display: none !important;
}

html[data-ak-fx="on"] .ak13-card-media::after {
  opacity: .48 !important;
  animation: ak21-card-scan 6.6s var(--ak21-ease) infinite !important;
}

@keyframes ak21-card-scan {
  0%, 55% { transform: translateX(-145%); opacity: 0; }
  68% { opacity: .62; }
  92%, 100% { transform: translateX(145%); opacity: 0; }
}

html[data-ak-fx="on"] .ak9-primary {
  box-shadow: 0 14px 36px rgba(var(--akfx-1), .26), 0 0 28px rgba(var(--akfx-2), .10) !important;
}

/* Lightweight utility UI. */
.ak21-scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100001;
  height: 2px;
  pointer-events: none;
  background: transparent;
}

.ak21-scroll-progress > i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--ak21-scroll, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgb(var(--ak9-accent)), rgb(var(--ak9-accent-2)));
  box-shadow: 0 0 12px rgba(var(--ak9-accent), .52);
}

.ak21-back-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 950;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--ak9-border), .18);
  border-radius: 15px;
  color: rgb(var(--ak9-text));
  background: rgba(var(--ak9-surface), .92);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, visibility .2s ease, transform .25s var(--ak21-ease), border-color .2s ease;
}

.ak21-back-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ak21-back-top:hover { border-color: rgba(var(--ak9-accent), .52); }

/* Save rendering work for sections below the first viewport. */
@supports (content-visibility: auto) {
  .ak9-trust-center,
  .ak9-feedbacks,
  .ak9-upsells,
  .ak9-product-faq,
  .ak9-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
  }
}

@media (max-width: 1320px) {
  .ak9-nav { display: none !important; }
  .ak9-mobile-nav { display: block !important; }
  .ak9-navbar { grid-template-columns: minmax(170px, 1fr) auto !important; }
  .ak9-actions { justify-content: flex-end !important; }
}

@media (max-width: 1180px) {
  .ak13-product-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ak13-market-grid { grid-template-columns: 1fr !important; }
  .ak13-worlds-panel { position: relative !important; top: auto !important; }
  .ak13-worlds { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ak9-product-layout,
  .ak9-product-layout-v2 { grid-template-columns: 1fr !important; }
  .ak9-purchase-panel { position: relative !important; top: auto !important; }
}

@media (max-width: 900px) {
  :root { --ak21-section-gap: 40px; }
  .ak9-hero { grid-template-columns: 1fr !important; }
  .ak9-hero-copy { max-width: 680px; }
  .ak9-hero-stage { min-height: 330px !important; }
  .ak13-worlds { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ak9-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ak9-footer-main { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
  :root { --ak21-page-gutter: 11px; }
  html { scroll-padding-top: 90px; }
  .ak9-header { padding-inline: 8px !important; }
  .ak9-navbar { width: 100% !important; min-height: 64px !important; border-radius: 18px !important; }
  .ak9-brand-copy small { display: none !important; }
  .ak9-actions > .ak9-search-trigger,
  .ak9-actions > .ak9-desktop-control,
  .ak9-actions > .ak9-account { display: none !important; }
  .ak9-mobile-panel { left: 8px !important; right: 8px !important; }
  .ak9-hero { padding: 24px 18px !important; border-radius: 24px !important; }
  .ak9-hero h1 { max-width: 100%; font-size: clamp(38px, 12vw, 58px) !important; }
  .ak9-hero-actions { display: grid !important; grid-template-columns: 1fr !important; }
  .ak9-hero-actions > * { width: 100% !important; justify-content: center !important; }
  .ak9-hero-proof { display: grid !important; grid-template-columns: 1fr !important; }
  .ak9-hero-stage { min-height: 270px !important; transform: scale(.92); transform-origin: center; }
  .ak9-dashboard-row { grid-template-columns: 1fr !important; }
  .ak9-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ak13-marketplace[data-ak16-catalog] { padding: 15px !important; border-radius: 22px !important; }
  .ak13-market-top { align-items: flex-start !important; }
  .ak13-market-proof { width: 100%; overflow-x: auto; justify-content: flex-start !important; scrollbar-width: none; }
  .ak13-market-proof::-webkit-scrollbar { display: none; }
  .ak13-worlds { grid-template-columns: 1fr !important; }
  .ak16-category-card { min-height: 96px !important; }
  .ak13-search-row { grid-template-columns: 1fr !important; }
  .ak13-blog-shortcut { width: 100% !important; justify-content: center !important; }
  .ak13-filter-title { align-items: flex-start !important; }
  .ak13-product-shelf { grid-template-columns: 1fr !important; gap: 13px !important; }
  .ak13-card-media { min-height: 190px !important; }
  .ak13-product-card { border-radius: 18px !important; }
  .ak9-facts-grid { grid-template-columns: 1fr !important; }
  .ak9-footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ak9-footer-bottom { align-items: flex-start !important; }
  .ak21-back-top { right: 12px; bottom: 12px; width: 42px; height: 42px; }
  html[data-ak-fx="on"] .ak9-fx-layer { opacity: .30 !important; }
  html[data-ak-fx="on"] .akfx-line { opacity: .17 !important; }
  html[data-ak-fx="on"] .ak9-fx-layer span:nth-child(n+7) { display: none !important; }
}

@media (max-width: 440px) {
  .ak9-brand-copy strong { font-size: 13px !important; }
  .ak9-metrics { grid-template-columns: 1fr !important; }
  .ak9-footer-columns { grid-template-columns: 1fr !important; }
  .ak13-console-count { width: 100%; justify-content: flex-start !important; }
  .ak13-search kbd { display: none !important; }
  .ak21-card-badges > span { max-width: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ak9-review-grid.is-carousel { transform: none !important; }
}

html[data-ak-motion="reduced"] .ak9-fx-layer *,
html[data-ak-motion="reduced"] .ak9-fx-layer::before,
html[data-ak-motion="reduced"] .ak9-fx-layer::after,
html[data-ak-data="lite"] .ak9-fx-layer *,
html[data-ak-data="lite"] .ak9-fx-layer::before,
html[data-ak-data="lite"] .ak9-fx-layer::after {
  animation: none !important;
}

html[data-ak-data="lite"] .ak9-fx-layer { opacity: .16 !important; }

/* AKREI STOCKS V22 — professional header, live search and game identities. */
:root {
  --ak22-header-control: 44px;
  --ak22-command-radius: 24px;
  --ak22-tactical-red: 255, 70, 85;
  --ak22-tactical-orange: 255, 139, 78;
  --ak22-hextech-gold: 210, 172, 82;
  --ak22-hextech-blue: 45, 185, 210;
}

/* Header layout: every control remains inside the navbar with or without FX. */
.ak9-navbar {
  display: grid !important;
  grid-template-columns: minmax(190px, .84fr) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(10px, 1.2vw, 20px) !important;
  overflow: visible !important;
}

.ak9-actions {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.ak9-actions > .ak9-search-trigger {
  position: relative !important;
  inset: auto !important;
  isolation: isolate;
  flex: 0 0 auto !important;
  width: 122px !important;
  min-width: 44px !important;
  max-width: 122px !important;
  height: var(--ak22-header-control) !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transform: none !important;
}

.ak9-actions > .ak9-search-trigger::before,
.ak9-actions > .ak9-search-trigger::after { pointer-events: none !important; }

.ak9-actions > .ak9-search-trigger > span {
  display: inline !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ak9-actions > .ak9-search-trigger kbd {
  display: inline-flex !important;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
  max-width: 45px;
}

.ak9-actions > .ak9-search-trigger kbd span { display: inline !important; }
.ak9-actions > :where(.ak9-dropdown, .ak9-mobile-nav) { flex: 0 0 auto; }
.ak9-actions > :where(.ak9-icon-button, .ak9-account) { flex: 0 0 auto !important; }

.ak22-mobile-search {
  width: 100%;
  min-height: 58px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(var(--ak9-accent), .22);
  border-radius: 15px;
  color: rgb(var(--ak9-text));
  background: linear-gradient(135deg, rgba(var(--ak9-accent), .12), rgba(var(--ak9-surface-2), .72));
  text-align: left;
}

.ak22-mobile-search > i:first-child {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: rgb(var(--ak9-accent));
  background: rgba(var(--ak9-accent), .12);
}

.ak22-mobile-search > span { min-width: 0; display: flex; flex-direction: column; }
.ak22-mobile-search strong { font-size: 11px; }
.ak22-mobile-search small { margin-top: 3px; color: rgb(var(--ak9-muted)); font-size: 8px; }
.ak22-mobile-search > i:last-child { color: rgb(var(--ak9-accent)); font-size: 10px; }

/* Search command center. */
.ak9-command-modal {
  z-index: 100020 !important;
  padding: min(10vh, 96px) 14px 24px !important;
  place-items: start center !important;
}

.ak9-command-modal[hidden] { display: none !important; }
.ak9-command-backdrop {
  border: 0 !important;
  background: rgba(2, 4, 10, .76) !important;
  backdrop-filter: blur(18px) saturate(.82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(.82) !important;
}

.ak9-command-modal > section {
  width: min(760px, calc(100vw - 28px)) !important;
  max-height: min(780px, calc(100dvh - 118px));
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--ak9-accent), .26) !important;
  border-radius: var(--ak22-command-radius) !important;
  background:
    radial-gradient(circle at 5% -10%, rgba(var(--ak9-accent), .16), transparent 36%),
    linear-gradient(155deg, rgba(var(--ak9-surface), .985), rgba(var(--ak9-surface-2), .965)) !important;
  box-shadow: 0 45px 130px rgba(0, 0, 0, .60), 0 0 0 1px rgba(255, 255, 255, .035) inset, 0 0 65px rgba(var(--ak9-accent), .10) !important;
}

.ak22-command-topline {
  min-height: 38px;
  padding: 0 13px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(var(--ak9-border), .075);
  color: rgb(var(--ak9-accent));
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .16em;
}

.ak22-command-topline span { display: inline-flex; align-items: center; gap: 7px; }
.ak22-command-topline button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: rgb(var(--ak9-muted));
  background: transparent;
}
.ak22-command-topline button:hover { color: rgb(var(--ak9-text)); background: rgba(var(--ak9-border), .07); }

.ak9-command-modal header {
  flex: 0 0 auto;
  height: 74px !important;
  grid-template-columns: 34px minmax(0, 1fr) 32px auto !important;
  gap: 8px;
  padding: 0 18px !important;
}

.ak9-command-modal header > i { font-size: 16px; filter: drop-shadow(0 0 12px rgba(var(--ak9-accent), .42)); }
.ak9-command-modal input {
  width: 100%;
  min-width: 0;
  height: 56px;
  color: rgb(var(--ak9-text)) !important;
  font-size: clamp(14px, 2vw, 17px) !important;
  letter-spacing: -.015em;
}
.ak9-command-modal input::placeholder { color: rgba(var(--ak9-muted), .78); }

.ak22-command-clear {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: rgb(var(--ak9-muted));
  background: rgba(var(--ak9-border), .06);
}
.ak22-command-clear[hidden] { display: none !important; }
.ak22-command-clear:hover { color: rgb(var(--ak9-text)); background: rgba(var(--ak9-accent), .12); }

.ak22-command-chips {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(var(--ak9-border), .07);
  scrollbar-width: none;
}
.ak22-command-chips::-webkit-scrollbar { display: none; }
.ak22-command-chips button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(var(--ak9-border), .09);
  border-radius: 999px;
  color: rgb(var(--ak9-muted));
  background: rgba(var(--ak9-surface-2), .62);
  font-size: 9px;
  font-weight: 850;
}
.ak22-command-chips button:hover,
.ak22-command-chips button.is-active { color: rgb(var(--ak9-text)); border-color: rgba(var(--ak9-accent), .34); background: rgba(var(--ak9-accent), .12); }

.ak22-command-summary {
  flex: 0 0 auto;
  min-height: 31px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgb(var(--ak9-muted));
  font-size: 8px;
  font-weight: 760;
}
.ak22-command-summary small { color: rgb(var(--ak9-accent)); font-size: 7px; font-weight: 950; letter-spacing: .14em; }

.ak9-command-results {
  flex: 1 1 auto;
  min-height: 196px;
  max-height: none !important;
  padding: 7px 9px 11px !important;
  overscroll-behavior: contain;
}

.ak9-command-results > button[data-ak-command-result] {
  position: relative;
  width: 100%;
  min-height: 66px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: rgb(var(--ak9-text));
  background: transparent;
  text-align: left;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.ak9-command-results > button:hover,
.ak9-command-results > button.is-active {
  border-color: rgba(var(--ak9-accent), .20);
  background: linear-gradient(90deg, rgba(var(--ak9-accent), .13), rgba(var(--ak9-accent), .045));
  box-shadow: inset 3px 0 rgb(var(--ak9-accent));
}

.ak9-command-results > button > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--ak9-accent), .22);
  border-radius: 13px;
  color: rgb(var(--ak9-accent));
  background: rgba(var(--ak9-accent), .10);
}
.ak9-command-results > button > span.is-valorant { color: rgb(var(--ak22-tactical-red)); border-color: rgba(var(--ak22-tactical-red), .28); background: rgba(var(--ak22-tactical-red), .11); }
.ak9-command-results > button > span.is-lol { color: rgb(var(--ak22-hextech-gold)); border-color: rgba(var(--ak22-hextech-gold), .28); background: rgba(var(--ak22-hextech-gold), .11); }
.ak9-command-results > button > span.is-cloud { color: #50a8ff; border-color: rgba(80, 168, 255, .28); background: rgba(80, 168, 255, .11); }
.ak9-command-results > button > div { min-width: 0; display: flex; flex-direction: column; }
.ak9-command-results > button strong { overflow: hidden; color: rgb(var(--ak9-text)); font-size: 11.5px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.ak9-command-results > button small { margin-top: 5px; overflow: hidden; color: rgb(var(--ak9-muted)); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.ak9-command-results > button > b { display: inline-flex; align-items: center; gap: 6px; color: rgb(var(--ak9-success)); font-size: 8px; white-space: nowrap; }
.ak9-command-results > button > b > i { width: 6px; height: 6px; border-radius: 99px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.ak9-command-results > button > b.is-out { color: rgb(var(--ak9-muted)); }
.ak9-command-results > button > em { color: rgb(var(--ak9-accent)); font-size: 9px; font-style: normal; opacity: .42; transform: translateX(-3px); transition: opacity .16s ease, transform .16s ease; }
.ak9-command-results > button:is(:hover, .is-active) > em { opacity: 1; transform: none; }
.ak9-command-empty { min-height: 196px !important; padding: 24px; text-align: center; }
.ak9-command-empty span { max-width: 360px; font-size: 9.5px !important; line-height: 1.55; }
.ak9-command-modal footer { flex: 0 0 auto; justify-content: flex-end; min-height: 42px; height: auto !important; }

/* Theme signatures: deliberately visible even when Futuristic FX is off. */
.ak22-theme-signature,
.ak22-lol-rune-orbit,
.ak22-valorant-brackets { display: none; pointer-events: none; }

html[data-ak-theme="valorant"] {
  --ak21-shadow: 0 28px 86px rgba(0, 0, 0, .28);
}

html[data-ak-theme="valorant"] .ak9-ambient {
  background:
    linear-gradient(126deg, rgba(var(--ak22-tactical-red), .055), transparent 32%),
    radial-gradient(circle at 74% 14%, rgba(var(--ak22-tactical-orange), .08), transparent 32%),
    #08090d !important;
}

html[data-ak-theme="valorant"] .ak9-ambient-grid {
  opacity: .66;
  background-image:
    linear-gradient(118deg, transparent 0 48%, rgba(var(--ak22-tactical-red), .035) 48% 49%, transparent 49%),
    linear-gradient(rgba(var(--ak22-tactical-red), .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ak22-tactical-red), .026) 1px, transparent 1px) !important;
  background-size: 320px 220px, 54px 54px, 54px 54px !important;
}

html[data-ak-theme="valorant"] :is(.ak9-navbar, .ak13-marketplace, .ak9-ranking, .ak9-feedbacks) {
  border-color: rgba(var(--ak22-tactical-red), .16) !important;
}

html[data-ak-theme="valorant"] .ak9-navbar {
  background: linear-gradient(105deg, rgba(11, 11, 16, .97), rgba(20, 10, 14, .93)) !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .30), inset 0 -2px rgba(var(--ak22-tactical-red), .055) !important;
}

html[data-ak-theme="valorant"] .ak9-hero {
  overflow: hidden;
  background:
    linear-gradient(118deg, rgba(var(--ak22-tactical-red), .18), transparent 33%),
    linear-gradient(62deg, transparent 62%, rgba(var(--ak22-tactical-orange), .105)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 46px),
    linear-gradient(145deg, #0a090d, #1a0b10) !important;
}

html[data-ak-theme="valorant"] .ak9-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(132deg, transparent 0 62%, rgba(var(--ak22-tactical-red), .12) 62% 63%, transparent 63%),
    linear-gradient(48deg, transparent 0 80%, rgba(var(--ak22-tactical-orange), .09) 80% 81%, transparent 81%);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 93% 100%, 0 100%);
}

html[data-ak-theme="valorant"] .ak9-hero h1 {
  text-transform: none;
  letter-spacing: -.052em;
}

html[data-ak-theme="valorant"] .ak9-hero h1 strong { color: #ff5967; text-shadow: 0 0 32px rgba(var(--ak22-tactical-red), .21); }
html[data-ak-theme="valorant"] .ak9-hero-stage { filter: drop-shadow(0 38px 78px rgba(var(--ak22-tactical-red), .16)); }
html[data-ak-theme="valorant"] .ak9-stage-character.is-valorant { filter: saturate(1.08) contrast(1.06) drop-shadow(0 26px 34px rgba(0,0,0,.42)); }

html[data-ak-theme="valorant"] .ak22-theme-signature.is-valorant {
  position: absolute;
  top: 3%;
  right: 3%;
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr auto;
  min-width: 188px;
  padding: 10px 12px;
  border-top: 1px solid rgba(var(--ak22-tactical-red), .58);
  border-right: 1px solid rgba(var(--ak22-tactical-red), .26);
  color: #ff6572;
  background: linear-gradient(90deg, transparent, rgba(var(--ak22-tactical-red), .06));
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .15em;
}
html[data-ak-theme="valorant"] .ak22-theme-signature.is-valorant b { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 28px; line-height: 1; }
html[data-ak-theme="valorant"] .ak22-theme-signature.is-valorant small { margin-top: 5px; color: rgba(255,255,255,.43); font-size: 6px; letter-spacing: .12em; }

html[data-ak-theme="valorant"] .ak22-valorant-brackets {
  position: absolute;
  inset: 10% 5% 9% 8%;
  z-index: 5;
  display: block;
  border: solid rgba(var(--ak22-tactical-red), .25);
  border-width: 1px 0 0 1px;
}
html[data-ak-theme="valorant"] .ak22-valorant-brackets::before,
html[data-ak-theme="valorant"] .ak22-valorant-brackets::after { content: ""; position: absolute; width: 34px; height: 34px; border-color: rgba(var(--ak22-tactical-orange), .50); }
html[data-ak-theme="valorant"] .ak22-valorant-brackets::before { top: -1px; right: 0; border-top: 2px solid; border-right: 2px solid; }
html[data-ak-theme="valorant"] .ak22-valorant-brackets::after { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; }
html[data-ak-theme="valorant"] .ak22-valorant-brackets > span { position: absolute; left: 8px; bottom: 6px; color: rgba(255,255,255,.34); font-size: 6px; font-weight: 950; letter-spacing: .18em; }

html[data-ak-theme="valorant"] [data-ak-card][data-ak-game="valorant"] {
  border-color: rgba(var(--ak22-tactical-red), .22) !important;
  background: linear-gradient(150deg, rgba(var(--ak22-tactical-red), .075), transparent 42%), rgba(var(--ak9-surface-2), .88) !important;
}
html[data-ak-theme="valorant"] [data-ak-card][data-ak-game="valorant"] .ak13-card-media::before { background: linear-gradient(135deg, rgba(var(--ak22-tactical-red), .14), transparent 52%, rgba(var(--ak22-tactical-orange), .08)) !important; }

html[data-ak-theme="lol"] {
  --ak21-shadow: 0 28px 88px rgba(0, 7, 15, .32);
}

html[data-ak-theme="lol"] .ak9-ambient {
  background:
    radial-gradient(circle at 16% 12%, rgba(var(--ak22-hextech-blue), .09), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(var(--ak22-hextech-gold), .075), transparent 28%),
    linear-gradient(180deg, #020b12, #04121a) !important;
}

html[data-ak-theme="lol"] .ak9-ambient-grid {
  opacity: .48;
  background-image:
    linear-gradient(30deg, rgba(var(--ak22-hextech-gold), .025) 12%, transparent 12.5%, transparent 87%, rgba(var(--ak22-hextech-gold), .025) 87.5%),
    linear-gradient(150deg, rgba(var(--ak22-hextech-blue), .022) 12%, transparent 12.5%, transparent 87%, rgba(var(--ak22-hextech-blue), .022) 87.5%) !important;
  background-size: 86px 150px !important;
}

html[data-ak-theme="lol"] :is(.ak9-navbar, .ak13-marketplace, .ak9-ranking, .ak9-feedbacks) {
  border-color: rgba(var(--ak22-hextech-gold), .17) !important;
}

html[data-ak-theme="lol"] .ak9-navbar {
  background: linear-gradient(105deg, rgba(3, 13, 20, .97), rgba(5, 24, 31, .94)) !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .32), inset 0 -2px rgba(var(--ak22-hextech-gold), .055) !important;
}

html[data-ak-theme="lol"] .ak9-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 24%, rgba(var(--ak22-hextech-blue), .17), transparent 33%),
    linear-gradient(118deg, rgba(var(--ak22-hextech-gold), .16), transparent 34%),
    repeating-radial-gradient(circle at 80% 48%, transparent 0 52px, rgba(var(--ak22-hextech-gold), .025) 53px 54px),
    linear-gradient(145deg, #020c13, #071b23) !important;
}

html[data-ak-theme="lol"] .ak9-hero::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: -1;
  border: 1px solid rgba(var(--ak22-hextech-gold), .15);
  border-radius: calc(clamp(24px, 3vw, 36px) - 10px);
  clip-path: polygon(0 22px, 22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px));
}

html[data-ak-theme="lol"] .ak9-hero h1 strong {
  color: #d7b563;
  background: linear-gradient(180deg, #f5e0a4, #ad7c2c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 36px rgba(var(--ak22-hextech-gold), .12);
}
html[data-ak-theme="lol"] .ak9-hero-stage { filter: drop-shadow(0 38px 82px rgba(var(--ak22-hextech-blue), .14)); }
html[data-ak-theme="lol"] .ak9-stage-character.is-lol { filter: saturate(1.03) contrast(1.03) drop-shadow(0 26px 36px rgba(0,0,0,.48)); }

html[data-ak-theme="lol"] .ak22-theme-signature.is-lol {
  position: absolute;
  top: 3%;
  right: 3%;
  z-index: 6;
  display: grid;
  grid-template-columns: 1fr auto;
  min-width: 196px;
  padding: 10px 12px;
  border-top: 1px solid rgba(var(--ak22-hextech-gold), .56);
  border-right: 1px solid rgba(var(--ak22-hextech-gold), .24);
  color: #dec06f;
  background: linear-gradient(90deg, transparent, rgba(var(--ak22-hextech-blue), .055));
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .14em;
}
html[data-ak-theme="lol"] .ak22-theme-signature.is-lol b { grid-row: 1 / 3; grid-column: 2; align-self: center; color: rgb(var(--ak22-hextech-blue)); font-size: 20px; }
html[data-ak-theme="lol"] .ak22-theme-signature.is-lol small { margin-top: 5px; color: rgba(255,255,255,.42); font-size: 6px; letter-spacing: .11em; }

html[data-ak-theme="lol"] .ak22-lol-rune-orbit {
  position: absolute;
  inset: 8% 8% 8% 7%;
  z-index: 2;
  display: block;
  border: 1px solid rgba(var(--ak22-hextech-gold), .16);
  border-radius: 50%;
  transform: rotate(-10deg);
}
html[data-ak-theme="lol"] .ak22-lol-rune-orbit::before,
html[data-ak-theme="lol"] .ak22-lol-rune-orbit::after { content: ""; position: absolute; inset: 12%; border: 1px dashed rgba(var(--ak22-hextech-blue), .16); border-radius: 50%; }
html[data-ak-theme="lol"] .ak22-lol-rune-orbit::after { inset: 29%; border-style: solid; border-color: rgba(var(--ak22-hextech-gold), .20); }
html[data-ak-theme="lol"] .ak22-lol-rune-orbit i { position: absolute; width: 8px; height: 8px; border: 1px solid rgba(var(--ak22-hextech-gold), .65); background: #071923; transform: rotate(45deg); box-shadow: 0 0 15px rgba(var(--ak22-hextech-blue), .34); }
html[data-ak-theme="lol"] .ak22-lol-rune-orbit i:nth-child(1) { top: -4px; left: 49%; }
html[data-ak-theme="lol"] .ak22-lol-rune-orbit i:nth-child(2) { top: 48%; right: -4px; }
html[data-ak-theme="lol"] .ak22-lol-rune-orbit i:nth-child(3) { bottom: 4%; left: 17%; }

html[data-ak-theme="lol"] [data-ak-card][data-ak-game="lol"] {
  border-color: rgba(var(--ak22-hextech-gold), .22) !important;
  background: linear-gradient(150deg, rgba(var(--ak22-hextech-gold), .07), transparent 44%), rgba(var(--ak9-surface-2), .88) !important;
}
html[data-ak-theme="lol"] [data-ak-card][data-ak-game="lol"] .ak13-card-media::before { background: radial-gradient(circle at 78% 18%, rgba(var(--ak22-hextech-blue), .12), transparent 38%), linear-gradient(145deg, rgba(var(--ak22-hextech-gold), .10), transparent 55%) !important; }

@media (min-width: 901px) {
  html[data-ak-theme="lol"] .ak9-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(410px, .92fr) !important;
  }
  html[data-ak-theme="lol"] .ak9-hero-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
  }
  html[data-ak-theme="lol"] .ak9-hero-stage {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    min-height: 450px !important;
  }
  html[data-ak-theme="lol"] .ak9-stage-character.is-lol {
    left: auto !important;
    right: -5% !important;
    bottom: -2% !important;
    width: auto !important;
    height: 106% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    opacity: .90 !important;
    transform: none !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 82%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0 82%, transparent 100%) !important;
  }
}

html[data-ak-theme="valorant"] .ak9-command-modal > section { border-color: rgba(var(--ak22-tactical-red), .34) !important; }
html[data-ak-theme="lol"] .ak9-command-modal > section { border-color: rgba(var(--ak22-hextech-gold), .34) !important; }

html[data-ak-fx="on"][data-ak-theme="valorant"] .ak22-valorant-brackets { animation: ak22-target-pulse 3.8s ease-in-out infinite; }
html[data-ak-fx="on"][data-ak-theme="lol"] .ak22-lol-rune-orbit { animation: ak22-rune-turn 28s linear infinite; }
html[data-ak-fx="on"] .ak22-theme-signature { animation: ak22-signature-glow 4s ease-in-out infinite; }
@keyframes ak22-target-pulse { 50% { opacity: .48; transform: scale(.985); } }
@keyframes ak22-rune-turn { to { transform: rotate(350deg); } }
@keyframes ak22-signature-glow { 50% { filter: brightness(1.15); } }

@media (max-width: 1440px) {
  .ak9-navbar { grid-template-columns: minmax(180px, 1fr) auto !important; }
  .ak9-nav { display: none !important; }
  .ak9-mobile-nav { display: block !important; }
  .ak9-actions > .ak9-search-trigger { width: 44px !important; max-width: 44px !important; padding: 0 !important; }
  .ak9-actions > .ak9-search-trigger > span,
  .ak9-actions > .ak9-search-trigger kbd { display: none !important; }
}

@media (max-width: 980px) {
  .ak9-actions > .ak9-desktop-control,
  .ak9-actions > .ak9-account { display: none !important; }
  .ak9-navbar { min-height: 68px !important; }
}

@media (max-width: 720px) {
  .ak9-actions > .ak9-search-trigger { display: inline-flex !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; }
  .ak9-actions > .ak9-icon-button,
  .ak9-actions > .ak9-mobile-nav > summary { width: 42px !important; height: 42px !important; }
  .ak9-command-modal { padding: 8px !important; align-items: start !important; }
  .ak9-command-modal > section { width: 100% !important; max-height: calc(100dvh - 16px); border-radius: 20px !important; }
  .ak9-command-modal header { height: 66px !important; grid-template-columns: 28px minmax(0, 1fr) 30px !important; padding: 0 13px !important; }
  .ak9-command-modal header > kbd { display: none !important; }
  .ak9-command-modal input { height: 50px; font-size: 14px !important; }
  .ak22-command-chips { padding-inline: 12px; }
  .ak22-command-summary { padding-inline: 13px; }
  .ak9-command-results { padding-inline: 6px !important; }
  .ak9-command-results > button[data-ak-command-result] { grid-template-columns: 42px minmax(0, 1fr) 20px; min-height: 62px; padding-inline: 8px; }
  .ak9-command-results > button > span { width: 40px; height: 40px; }
  .ak9-command-results > button > b { display: none; }
  .ak9-command-modal footer { justify-content: center; }
  .ak9-command-modal footer span:nth-child(3) { display: none; }
  .ak22-theme-signature { display: none !important; }
  html[data-ak-theme="valorant"] .ak9-hero::before,
  html[data-ak-theme="lol"] .ak9-hero::before { opacity: .72; }
}

@media (max-width: 460px) {
  .ak9-brand-logo { width: 38px !important; height: 38px !important; }
  .ak9-brand-copy { display: none !important; }
  .ak9-navbar { grid-template-columns: 44px auto !important; }
  .ak9-command-results > button small { max-width: 210px; }
  .ak22-command-topline { letter-spacing: .11em; }
}

@media (prefers-reduced-motion: reduce) {
  .ak22-lol-rune-orbit,
  .ak22-valorant-brackets,
  .ak22-theme-signature { animation: none !important; }
}

/* ========================================================================== 
   AKREI V23 — mastercraft header architecture and editorial game themes
   ========================================================================== */
:root {
  --ak23-header-control: 44px;
  --ak23-header-gap: clamp(10px, 1.15vw, 18px);
  --ak23-hairline: rgba(var(--ak9-border), .105);
}

/* The search is a first-class navbar region, never a nested utility control. */
.ak9-navbar {
  display: grid !important;
  grid-template-columns: minmax(190px, 248px) minmax(250px, 380px) minmax(0, 1fr) !important;
  grid-template-areas:
    "brand search actions"
    "nav nav nav" !important;
  grid-template-rows: 58px 36px !important;
  column-gap: var(--ak23-header-gap) !important;
  row-gap: 0 !important;
  width: min(100%, 1480px) !important;
  min-height: 100px !important;
  height: auto !important;
  padding: 0 16px 6px !important;
  align-items: center !important;
  overflow: visible !important;
}

.ak9-brand {
  grid-area: brand !important;
  width: max-content;
  max-width: 100%;
  justify-self: start;
}

.ak9-nav {
  grid-area: nav !important;
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  width: max-content !important;
  max-width: 100% !important;
  height: 36px !important;
  min-width: 0 !important;
  padding: 2px 2px 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(2px, .45vw, 7px) !important;
  border-top: 0;
  justify-self: center !important;
  overflow: visible !important;
}

.ak9-nav-link {
  min-height: 31px !important;
  padding: 0 clamp(8px, .82vw, 13px) !important;
  border-radius: 10px !important;
  white-space: nowrap;
  font-size: clamp(8.5px, .72vw, 10.5px) !important;
  letter-spacing: -.01em !important;
}

.ak9-nav-link.is-active {
  box-shadow: inset 0 -2px rgb(var(--ak9-accent)) !important;
}

.ak23-header-search {
  grid-area: search !important;
  position: relative !important;
  inset: auto !important;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-self: stretch !important;
  width: min(100%, 380px) !important;
  min-width: 0 !important;
  max-width: 380px !important;
  height: var(--ak23-header-control) !important;
  margin: 0 auto !important;
  padding: 4px 10px 4px 5px !important;
  gap: 9px !important;
  border: 1px solid rgba(var(--ak9-border), .14) !important;
  border-radius: 14px !important;
  color: rgb(var(--ak9-text)) !important;
  background:
    linear-gradient(90deg, rgba(var(--ak9-accent), .075), transparent 36%),
    rgba(var(--ak9-surface-2), .72) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 8px 24px rgba(0, 0, 0, .09) !important;
  overflow: hidden !important;
  text-align: left !important;
  transform: none !important;
}

.ak23-header-search::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 2px !important;
  background: rgb(var(--ak9-accent)) !important;
  opacity: .72;
  transform: none !important;
  pointer-events: none !important;
}

.ak23-header-search::after { display: none !important; }

.ak23-header-search:hover,
.ak23-header-search:focus-visible {
  border-color: rgba(var(--ak9-accent), .34) !important;
  background:
    linear-gradient(90deg, rgba(var(--ak9-accent), .12), transparent 45%),
    rgba(var(--ak9-surface-2), .84) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 12px 30px rgba(0, 0, 0, .14), 0 0 0 3px rgba(var(--ak9-accent), .06) !important;
}

.ak23-search-icon {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center;
  border-radius: 10px;
  color: rgb(var(--ak9-accent));
  background: rgba(var(--ak9-accent), .105);
  font-size: 12px;
}

.ak23-search-copy {
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.05;
}

.ak23-search-copy strong,
.ak23-search-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ak23-search-copy strong { color: rgb(var(--ak9-text)); font-size: 10px; font-weight: 820; }
.ak23-search-copy small { margin-top: 4px; color: rgb(var(--ak9-muted)); font-size: 7.5px; font-weight: 680; }

.ak23-header-search kbd {
  min-width: 42px;
  height: 25px;
  padding: 0 7px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid rgba(var(--ak9-border), .13) !important;
  border-radius: 8px !important;
  color: rgb(var(--ak9-muted));
  background: rgba(var(--ak9-background), .48) !important;
  box-shadow: inset 0 -1px rgba(255, 255, 255, .04);
  font-size: 7.5px !important;
  font-weight: 800;
}

.ak23-header-search kbd span { display: inline !important; }

.ak9-actions {
  grid-area: actions !important;
  justify-self: end !important;
  width: max-content !important;
  max-width: 100% !important;
  gap: 6px !important;
}

.ak9-actions > .ak9-search-trigger { display: none !important; }
.ak9-mobile-nav { display: none !important; }

.ak9-actions > :where(.ak9-dropdown, .ak9-mobile-nav) > summary,
.ak9-actions > :where(.ak9-account, .ak9-icon-button) {
  min-height: 40px !important;
  border-radius: 12px !important;
}

/* A calmer professional surface system: depth through borders and light, not motion. */
:is(.ak13-marketplace, .ak9-ranking, .ak9-offers, .ak9-trust-center, .ak9-feedbacks) {
  border-color: rgba(var(--ak9-border), .12) !important;
  box-shadow: 0 24px 74px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .025) !important;
}

:is(.ak9-product-card, .ak13-product-card, .ak9-offer-card, .ak9-ranking-item):hover {
  transform: none !important;
}

.ak13-market-top h2,
.ak13-console-head h3,
.ak9-section-head h2,
.ak9-hero h1 {
  text-transform: none !important;
  text-wrap: balance;
}

.ak9-hero h1 {
  letter-spacing: -.056em !important;
  line-height: .96 !important;
}

.ak9-hero :is(.ak9-primary, .ak9-secondary),
.ak13-marketplace button,
.ak9-section-head button {
  text-transform: none !important;
  letter-spacing: -.01em;
}

/* Valorant: tactical details stay uppercase; human-facing copy stays natural. */
html[data-ak-theme="valorant"] :is(
  .ak9-hero h1,
  .ak9-hero p,
  .ak9-hero button,
  .ak9-hero-proof b,
  .ak9-hero-proof small,
  .ak9-section-head h2,
  .ak9-section-head p,
  .ak9-section-head button,
  .ak9-ranking-copy strong,
  .ak9-ranking-copy small,
  .ak13-market-top h2,
  .ak13-market-top p,
  .ak13-console-head h3,
  .ak13-panel-title strong,
  .ak13-filter-title strong,
  .ak13-filter-title p,
  .ak13-product-card h3,
  .ak9-trust-grid strong,
  .ak9-trust-grid p,
  .ak9-review-card strong,
  .ak9-review-card p
) {
  text-transform: none !important;
  letter-spacing: normal;
}

html[data-ak-theme="valorant"] .ak9-hero h1 {
  max-width: 11.6ch;
  letter-spacing: -.058em !important;
  font-weight: 880 !important;
}

html[data-ak-theme="valorant"] .ak9-hero {
  background:
    radial-gradient(circle at 82% 30%, rgba(var(--ak22-tactical-orange), .11), transparent 28%),
    linear-gradient(118deg, rgba(var(--ak22-tactical-red), .145), transparent 39%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 54px),
    linear-gradient(145deg, #09090d, #180b10) !important;
}

html[data-ak-theme="valorant"] .ak9-hero h1 strong {
  color: #ff6572;
  text-shadow: 0 0 34px rgba(var(--ak22-tactical-red), .16);
}

html[data-ak-theme="valorant"] .ak9-eyebrow,
html[data-ak-theme="valorant"] :is(.ak13-kicker, .ak13-console-head > div > span, .ak13-panel-title > span, .ak13-filter-title > div > span) {
  text-transform: uppercase !important;
  letter-spacing: .105em !important;
}

html[data-ak-theme="valorant"] .ak23-header-search {
  border-color: rgba(var(--ak22-tactical-red), .24) !important;
  background: linear-gradient(90deg, rgba(var(--ak22-tactical-red), .115), transparent 42%), rgba(12, 11, 16, .82) !important;
}

html[data-ak-theme="valorant"] .ak23-search-icon { color: #ff6270; background: rgba(var(--ak22-tactical-red), .12); }
html[data-ak-theme="valorant"] .ak23-header-search::before { background: #ff5967 !important; }

/* League: museum-like hextech surfaces with legible contemporary typography. */
html[data-ak-theme="lol"] .ak23-header-search {
  border-color: rgba(var(--ak22-hextech-gold), .23) !important;
  background: linear-gradient(90deg, rgba(var(--ak22-hextech-gold), .095), transparent 43%), rgba(2, 15, 22, .80) !important;
}

html[data-ak-theme="lol"] .ak23-search-icon { color: #dfbd68; background: rgba(var(--ak22-hextech-gold), .105); }
html[data-ak-theme="lol"] .ak23-header-search::before { background: linear-gradient(#d6ae4c, #37b7d2) !important; }
html[data-ak-theme="lol"] .ak9-hero h1 { letter-spacing: -.052em !important; }

@media (max-width: 1180px) {
  .ak9-navbar {
    grid-template-columns: minmax(175px, 220px) minmax(200px, 1fr) max-content !important;
    grid-template-areas: "brand search actions" !important;
    grid-template-rows: 68px !important;
    min-height: 76px !important;
    padding: 0 12px !important;
  }

  .ak9-nav { display: none !important; }
  .ak9-mobile-nav { display: block !important; }
  .ak9-account { display: none !important; }
  .ak23-header-search { max-width: 360px !important; }
}

@media (max-width: 900px) {
  .ak9-navbar {
    grid-template-columns: minmax(150px, 210px) minmax(170px, 1fr) auto !important;
    column-gap: 9px !important;
  }

  .ak9-actions > .ak9-desktop-control { display: none !important; }
  .ak23-search-copy small { display: none; }
  .ak23-search-copy strong { font-size: 9px; }
}

@media (max-width: 640px) {
  .ak9-navbar {
    grid-template-columns: minmax(42px, 1fr) 44px auto !important;
    grid-template-areas: "brand search actions" !important;
    column-gap: 7px !important;
    min-height: 66px !important;
    padding: 0 8px !important;
    border-radius: 17px !important;
  }

  .ak23-header-search {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    padding: 3px !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    border-radius: 12px !important;
  }

  .ak23-header-search::before { width: 2px !important; }
  .ak23-search-icon { width: 36px !important; height: 36px !important; margin: auto; }
  .ak23-search-copy,
  .ak23-header-search kbd { display: none !important; }
  .ak9-actions { gap: 5px !important; }
  .ak9-actions > .ak9-icon-button,
  .ak9-actions > .ak9-mobile-nav > summary { width: 42px !important; height: 42px !important; }
}

@media (max-width: 420px) {
  .ak9-brand { width: 40px !important; overflow: hidden; }
  .ak9-brand-copy { display: none !important; }
  .ak9-brand-logo { flex: 0 0 38px; width: 38px !important; height: 38px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ak23-header-search,
  .ak9-nav-link { transition: none !important; }
}

/* ========================================================================== 
   AKREI V25 — reliable appearance engine and production-grade visual system
   ========================================================================== */
:root {
  --ak25-control-height: 42px;
  --ak25-menu-radius: 20px;
  --ak25-border: rgba(var(--ak9-border), .13);
  --ak25-soft-border: rgba(var(--ak9-border), .085);
  --ak25-surface: color-mix(in srgb, rgb(var(--ak9-surface)) 96%, rgb(var(--ak9-accent)) 4%);
}

/* Header geometry is identical with FX on and off. */
.ak9-header,
html[data-ak-fx="on"] .ak9-header,
html[data-ak-fx="off"] .ak9-header {
  margin-bottom: 18px !important;
  padding-inline: var(--ak21-page-gutter) !important;
  overflow: visible !important;
}

.ak9-navbar,
html[data-ak-fx="on"] .ak9-navbar,
html[data-ak-fx="off"] .ak9-navbar {
  isolation: isolate !important;
  overflow: visible !important;
}

@media (min-width: 1181px) {
  .ak9-navbar,
  html[data-ak-fx="on"] .ak9-navbar,
  html[data-ak-fx="off"] .ak9-navbar {
    grid-template-columns: minmax(184px, 220px) minmax(230px, 340px) minmax(0, 1fr) !important;
    grid-template-areas:
      "brand search actions"
      "nav nav nav" !important;
    grid-template-rows: 54px 32px !important;
    width: min(100%, 1380px) !important;
    min-height: 90px !important;
    padding: 0 14px 4px !important;
    column-gap: clamp(10px, 1.2vw, 18px) !important;
    row-gap: 0 !important;
  }

  .ak9-nav,
  html[data-ak-fx="on"] .ak9-nav,
  html[data-ak-fx="off"] .ak9-nav {
    display: flex !important;
    height: 32px !important;
  }

  .ak9-mobile-nav,
  html[data-ak-fx="on"] .ak9-mobile-nav,
  html[data-ak-fx="off"] .ak9-mobile-nav { display: none !important; }

  .ak23-header-search {
    width: 100% !important;
    max-width: 340px !important;
    height: var(--ak25-control-height) !important;
  }

  .ak9-nav-link {
    min-height: 29px !important;
    padding-inline: clamp(8px, .7vw, 12px) !important;
  }
}

.ak9-actions > :where(.ak9-dropdown, .ak9-mobile-nav) > summary,
.ak9-actions > :where(.ak9-account, .ak9-icon-button) {
  min-height: 38px !important;
}

.ak9-actions > .ak9-dropdown > summary {
  padding-inline: 8px !important;
  gap: 6px !important;
}

.ak9-actions > .ak9-dropdown > summary > strong,
.ak9-account > span { white-space: nowrap; }

.ak23-header-search { flex: none !important; }
.ak23-search-copy strong { font-size: 10px !important; }
.ak23-search-copy small { font-size: 7px !important; }

/* Dropdown reliability: author-level visibility wins over old animation frames. */
.ak9-navbar,
.ak9-actions,
.ak9-dropdown,
.ak9-theme-control { overflow: visible !important; }

.ak9-dropdown > .ak9-menu,
.ak9-mobile-nav > .ak9-mobile-panel {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: none !important;
}

.ak9-dropdown[open] > .ak9-menu,
.ak9-mobile-nav[open] > .ak9-mobile-panel {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.ak9-dropdown > summary,
.ak9-mobile-nav > summary {
  list-style: none;
  user-select: none;
}

.ak9-dropdown > summary::-webkit-details-marker,
.ak9-mobile-nav > summary::-webkit-details-marker { display: none; }

.ak9-dropdown > summary > .fa-chevron-down {
  transition: transform .2s var(--ak21-ease) !important;
}

.ak9-dropdown[open] > summary > .fa-chevron-down { transform: rotate(180deg); }

/* Appearance control: clear hierarchy, compact switch and unambiguous selection. */
.ak9-theme-control { z-index: 2000 !important; }
.ak9-theme-control[open] { z-index: 2100 !important; }

.ak9-theme-control > summary[aria-expanded="true"] {
  color: rgb(var(--ak9-text)) !important;
  border-color: rgba(var(--ak9-accent), .30) !important;
  background: rgba(var(--ak9-accent), .10) !important;
}

.ak9-theme-menu {
  right: 0 !important;
  top: calc(100% + 10px) !important;
  z-index: 2200 !important;
  width: 344px !important;
  max-width: min(344px, calc(100vw - 24px)) !important;
  max-height: min(620px, calc(100dvh - 112px)) !important;
  padding: 11px !important;
  border: 1px solid rgba(var(--ak9-accent), .22) !important;
  border-radius: var(--ak25-menu-radius) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(var(--ak9-accent-2), .09), transparent 32%),
    linear-gradient(155deg, rgba(var(--ak9-surface), .995), rgba(var(--ak9-surface-2), .985)) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255, 255, 255, .03) inset !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ak9-accent), .45) transparent;
}

.ak9-theme-menu::before,
.ak9-theme-menu::after { content: none !important; }

.ak25-theme-menu-head {
  min-height: 43px;
  padding: 3px 7px 8px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--ak25-soft-border);
  color: rgb(var(--ak9-text)) !important;
  font-size: 10px !important;
  letter-spacing: .09em !important;
}

.ak25-theme-menu-head > small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgb(var(--ak9-muted));
  font-size: 7.5px;
  font-weight: 750;
  letter-spacing: .02em;
  text-transform: none;
  white-space: nowrap;
}

.ak25-theme-menu-head > small i {
  color: rgb(var(--ak9-success));
  font-size: 8px;
}

.ak25-theme-group-label {
  min-height: 28px;
  padding: 8px 8px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgb(var(--ak9-muted));
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.ak25-theme-group-label small {
  color: rgba(var(--ak9-muted), .72);
  font-size: 6.5px;
  font-weight: 750;
  letter-spacing: .05em;
}

.ak25-theme-options {
  display: grid;
  gap: 2px;
}

.ak9-theme-menu button {
  border: 1px solid transparent !important;
  transform: none !important;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

.ak9-theme-menu button:not(.ak9-theme-fx-row) {
  grid-template-columns: 34px minmax(0, 1fr) minmax(56px, auto) 16px !important;
  min-height: 50px !important;
  padding: 7px 9px !important;
  border-radius: 13px !important;
}

.ak9-theme-menu button:not(.ak9-theme-fx-row):hover {
  border-color: rgba(var(--ak9-accent), .19) !important;
  background: rgba(var(--ak9-accent), .075) !important;
  transform: none !important;
}

.ak9-theme-menu button:not(.ak9-theme-fx-row).is-active {
  border-color: rgba(var(--ak9-accent), .32) !important;
  background: linear-gradient(90deg, rgba(var(--ak9-accent), .15), rgba(var(--ak9-accent-2), .055)) !important;
  box-shadow: inset 3px 0 rgb(var(--ak9-accent)), 0 9px 24px rgba(0, 0, 0, .10) !important;
}

.ak9-theme-menu button > strong {
  min-width: 0;
  color: rgb(var(--ak9-text));
  font-size: 10.5px !important;
  letter-spacing: -.01em;
  text-transform: none !important;
}

.ak9-theme-menu button > small {
  max-width: 92px;
  color: rgb(var(--ak9-muted));
  font-size: 7.5px !important;
  text-align: right;
  text-transform: none !important;
}

.ak9-theme-menu button > .fa-check {
  opacity: 0 !important;
  transform: scale(.72);
  transition: opacity .16s ease, transform .18s var(--ak21-ease);
}

.ak9-theme-menu button.is-active > .fa-check {
  opacity: 1 !important;
  transform: scale(1);
}

.ak9-theme-dot {
  position: relative;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 10px !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .20), inset 0 1px rgba(255, 255, 255, .12);
}

.ak9-theme-dot::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 5px;
  opacity: .48;
}

.ak9-fx-dot::after { border-radius: 50%; }

.ak9-theme-menu .ak9-theme-fx-row {
  grid-template-columns: 34px minmax(0, 1fr) 56px !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 8px 9px !important;
  border-color: rgba(var(--ak9-accent), .22) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(var(--ak9-accent), .11), rgba(var(--ak9-surface-2), .82), rgba(var(--ak9-accent-2), .07)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035) !important;
}

.ak9-theme-menu .ak9-theme-fx-row:hover {
  border-color: rgba(var(--ak9-accent-2), .36) !important;
  background: linear-gradient(135deg, rgba(var(--ak9-accent), .15), rgba(var(--ak9-surface-2), .90), rgba(var(--ak9-accent-2), .10)) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12), inset 0 1px rgba(255, 255, 255, .045) !important;
}

.ak9-theme-fx-copy strong { font-size: 10.5px !important; }
.ak9-theme-fx-copy small { font-size: 7px !important; letter-spacing: .055em !important; }

.ak9-theme-fx-row > b,
.ak9-mobile-fx-toggle > b {
  position: relative !important;
  width: 54px !important;
  min-width: 54px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 1px solid rgba(var(--ak9-border), .18) !important;
  border-radius: 999px !important;
  color: rgb(var(--ak9-muted)) !important;
  background: rgba(var(--ak9-bg), .46) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .22) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}

.ak9-theme-fx-row > b::before,
.ak9-mobile-fx-toggle > b::before {
  top: 50% !important;
  left: 4px !important;
  z-index: 2 !important;
  width: 20px !important;
  height: 20px !important;
  transform: translateY(-50%) !important;
  background: #fff !important;
  box-shadow: 0 4px 11px rgba(0, 0, 0, .32) !important;
  transition: left .2s var(--ak21-ease), box-shadow .2s ease !important;
}

.ak9-theme-fx-row > b::after,
.ak9-mobile-fx-toggle > b::after {
  content: "OFF" !important;
  inset: 0 !important;
  padding: 0 7px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  color: currentColor !important;
  background: none !important;
  font-size: 6.5px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  animation: none !important;
}

html[data-ak-fx="on"] .ak9-theme-fx-row > b,
html[data-ak-fx="on"] .ak9-mobile-fx-toggle > b,
.ak9-theme-fx-row.is-active > b,
.ak9-mobile-fx-toggle.is-active > b {
  color: #fff !important;
  background: linear-gradient(135deg, rgb(var(--ak9-accent)), rgb(var(--ak9-accent-2))) !important;
  border-color: rgba(var(--ak9-accent-2), .46) !important;
  box-shadow: 0 0 16px rgba(var(--ak9-accent), .20), inset 0 1px rgba(255, 255, 255, .18) !important;
  text-indent: 0 !important;
}

html[data-ak-fx="on"] .ak9-theme-fx-row > b::before,
html[data-ak-fx="on"] .ak9-mobile-fx-toggle > b::before,
.ak9-theme-fx-row.is-active > b::before,
.ak9-mobile-fx-toggle.is-active > b::before { left: 29px !important; }

html[data-ak-fx="on"] .ak9-theme-fx-row > b::after,
html[data-ak-fx="on"] .ak9-mobile-fx-toggle > b::after,
.ak9-theme-fx-row.is-active > b::after,
.ak9-mobile-fx-toggle.is-active > b::after {
  content: "ON" !important;
  justify-content: flex-start !important;
  padding: 0 0 0 8px !important;
  background: none !important;
  animation: none !important;
}

html[data-ak-theme="light"] .ak9-theme-menu {
  border-color: rgba(var(--ak9-accent), .19) !important;
  background: linear-gradient(155deg, rgba(255, 255, 255, .995), rgba(245, 248, 255, .985)) !important;
  box-shadow: 0 28px 80px rgba(37, 55, 95, .18), inset 0 1px #fff !important;
}

html[data-ak-theme="light"] .ak9-theme-fx-row > b,
html[data-ak-theme="light"] .ak9-mobile-fx-toggle > b {
  color: #516079 !important;
  background: #e8edf7 !important;
  border-color: rgba(35, 48, 75, .16) !important;
}

/* Mobile appearance choices are real selectable cards, not tiny text pills. */
.ak25-mobile-theme-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px !important;
}

.ak25-mobile-theme-grid > button {
  min-width: 0;
  height: 42px !important;
  padding: 0 9px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  text-align: left;
}

.ak25-mobile-theme-grid > button:last-child { grid-column: 1 / -1; }
.ak25-mobile-theme-grid .ak9-theme-dot {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  border-radius: 7px !important;
}
.ak25-mobile-theme-grid .ak9-theme-dot::after { inset: 4px; border-radius: 3px; }
.ak25-mobile-theme-grid > button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ak25-mobile-theme-grid > button.is-active {
  box-shadow: inset 2px 0 rgb(var(--ak9-accent)), 0 8px 20px rgba(0, 0, 0, .08);
}

/* Theme identities: distinct without sacrificing commerce readability. */
html[data-ak-theme="dark"] :is(.ak9-navbar, .ak13-marketplace, .ak9-ranking, .ak9-feedbacks, .ak9-trust-center) {
  background: linear-gradient(155deg, rgba(9, 10, 16, .97), rgba(13, 16, 25, .92)) !important;
}

html[data-ak-theme="light"] body.ak9-body {
  background:
    radial-gradient(circle at 8% 0%, rgba(104, 79, 255, .055), transparent 27%),
    linear-gradient(180deg, #f8faff, #eef2f8 70%) !important;
}

html[data-ak-theme="light"] :is(input, textarea, select) {
  color: #151b28 !important;
  caret-color: rgb(var(--ak9-accent));
}

html[data-ak-theme="valorant"] :is(
  .ak9-nav-link span,
  .ak9-account span,
  .ak9-menu strong,
  .ak9-menu small,
  .ak9-mobile-panel nav span,
  .ak9-mobile-settings button,
  .ak13-product-card h3,
  .ak13-card-meta span,
  .ak9-product-content,
  .ak9-product-faq,
  .ak9-feedbacks,
  .ak9-trust-center
) {
  text-transform: none !important;
  letter-spacing: normal;
}

html[data-ak-theme="valorant"] :is(.ak9-navbar, .ak9-theme-menu, .ak13-marketplace, .ak9-ranking) {
  border-color: rgba(var(--ak22-tactical-red), .20) !important;
}

html[data-ak-theme="valorant"] .ak9-theme-menu {
  background:
    linear-gradient(125deg, rgba(var(--ak22-tactical-red), .10), transparent 40%),
    linear-gradient(155deg, rgba(12, 10, 15, .995), rgba(24, 11, 16, .985)) !important;
}

html[data-ak-theme="valorant"] .ak9-theme-menu button.is-active {
  box-shadow: inset 3px 0 #ff5967, 0 9px 26px rgba(37, 3, 9, .20) !important;
}

html[data-ak-theme="lol"] :is(.ak9-navbar, .ak9-theme-menu, .ak13-marketplace, .ak9-ranking) {
  border-color: rgba(var(--ak22-hextech-gold), .20) !important;
}

html[data-ak-theme="lol"] .ak9-theme-menu {
  background:
    radial-gradient(circle at 94% 4%, rgba(var(--ak22-hextech-blue), .12), transparent 34%),
    linear-gradient(155deg, rgba(3, 13, 20, .995), rgba(6, 25, 33, .985)) !important;
}

html[data-ak-theme="lol"] .ak9-theme-menu button.is-active {
  box-shadow: inset 3px 0 #d7b563, 0 9px 26px rgba(0, 8, 16, .24) !important;
}

html[data-ak-theme="nexus"] :is(.ak9-theme-menu, .ak9-command-modal > section) {
  border-color: rgba(82, 225, 255, .24) !important;
  background:
    radial-gradient(circle at 92% 4%, rgba(82, 225, 255, .12), transparent 34%),
    linear-gradient(155deg, rgba(8, 13, 29, .995), rgba(14, 24, 48, .985)) !important;
}

/* Stable state transitions and background performance. */
html.ak9-theme-changing .ak9-header,
html.ak9-theme-changing .ak9-announcement,
html.ak9-theme-changing .ak9-main {
  filter: none !important;
  opacity: 1 !important;
}

html[data-ak-page-active="hidden"] :is(
  .ak9-fx-layer,
  .ak9-fx-layer *,
  .akfx-line,
  .ak9-review-grid,
  .ak9-stage-rings i,
  .ak22-lol-rune-orbit,
  .ak22-valorant-brackets
) { animation-play-state: paused !important; }

html[data-ak-page-active="hidden"] .ak9-fx-layer::before,
html[data-ak-page-active="hidden"] .ak9-fx-layer::after { animation-play-state: paused !important; }

@media (max-width: 1180px) {
  .ak9-nav,
  html[data-ak-fx="on"] .ak9-nav,
  html[data-ak-fx="off"] .ak9-nav { display: none !important; }

  .ak9-mobile-nav,
  html[data-ak-fx="on"] .ak9-mobile-nav,
  html[data-ak-fx="off"] .ak9-mobile-nav { display: block !important; }

  .ak9-mobile-panel { max-height: calc(100dvh - 132px) !important; }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .ak9-navbar,
  html[data-ak-fx="on"] .ak9-navbar,
  html[data-ak-fx="off"] .ak9-navbar {
    grid-template-columns: minmax(175px, 220px) minmax(200px, 1fr) max-content !important;
    grid-template-areas: "brand search actions" !important;
    grid-template-rows: 68px !important;
    min-height: 76px !important;
    padding: 0 12px !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .ak9-navbar,
  html[data-ak-fx="on"] .ak9-navbar,
  html[data-ak-fx="off"] .ak9-navbar {
    grid-template-columns: minmax(150px, 210px) minmax(170px, 1fr) auto !important;
    grid-template-areas: "brand search actions" !important;
    grid-template-rows: 68px !important;
    min-height: 76px !important;
    padding: 0 12px !important;
    column-gap: 9px !important;
  }
}

@media (max-width: 900px) {
  .ak9-theme-menu { max-height: min(560px, calc(100dvh - 94px)) !important; }
  .ak9-mobile-panel {
    border-color: rgba(var(--ak9-accent), .18) !important;
    background: linear-gradient(155deg, rgba(var(--ak9-surface), .995), rgba(var(--ak9-surface-2), .985)) !important;
    box-shadow: 0 28px 86px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .035) !important;
  }
}

@media (max-width: 640px) {
  .ak9-header,
  html[data-ak-fx="on"] .ak9-header,
  html[data-ak-fx="off"] .ak9-header {
    margin-bottom: 12px !important;
    padding-inline: 8px !important;
  }

  .ak9-navbar,
  html[data-ak-fx="on"] .ak9-navbar,
  html[data-ak-fx="off"] .ak9-navbar {
    grid-template-columns: minmax(42px, 1fr) 44px auto !important;
    grid-template-areas: "brand search actions" !important;
    grid-template-rows: 62px !important;
    min-height: 62px !important;
    padding: 0 7px !important;
  }

  .ak9-mobile-panel {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: -15px !important;
    bottom: auto !important;
    left: auto !important;
    width: min(360px, calc(100vw - 28px)) !important;
    height: auto !important;
    max-height: calc(100dvh - 132px) !important;
    border-radius: 20px !important;
  }

  .ak9-theme-fx-row > b,
  .ak9-mobile-fx-toggle > b { width: 54px !important; min-width: 54px !important; height: 28px !important; }

  html[data-ak-fx="on"] .ak9-theme-fx-row > b::before,
  html[data-ak-fx="on"] .ak9-mobile-fx-toggle > b::before,
  .ak9-theme-fx-row.is-active > b::before,
  .ak9-mobile-fx-toggle.is-active > b::before { left: 29px !important; }
}

@media (max-width: 370px) {
  .ak9-navbar,
  html[data-ak-fx="on"] .ak9-navbar,
  html[data-ak-fx="off"] .ak9-navbar {
    grid-template-columns: 40px 42px auto !important;
    column-gap: 4px !important;
  }
  .ak23-header-search { width: 42px !important; min-width: 42px !important; max-width: 42px !important; }
  .ak9-actions { gap: 3px !important; }
}

@media (prefers-contrast: more) {
  .ak9-navbar,
  .ak9-menu,
  .ak9-mobile-panel,
  .ak13-product-card { border-width: 2px !important; }
  .ak9-theme-menu button.is-active { outline: 2px solid rgb(var(--ak9-accent)); outline-offset: -2px; }
}

@media (forced-colors: active) {
  .ak9-theme-dot,
  .ak9-theme-fx-row > b,
  .ak9-mobile-fx-toggle > b { forced-color-adjust: none; }
  .ak9-theme-menu button.is-active { outline: 2px solid Highlight; }
}