/* FRAMESHIFT — product page, quick view, purchase controls */
.product-page__crumbs { margin-block-end: clamp(1rem, 2vw, 1.75rem); }
.product-layout { display: grid; gap: clamp(1.5rem, 4vw, 4.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 990px) {
  .product-layout { grid-template-columns: minmax(0, 1.3fr) minmax(380px, 1fr); align-items: start; }
  .product-layout--sticky .product-layout__media { position: sticky; inset-block-start: calc(var(--header-h) + 24px); }
  .product-layout--sticky .gallery--thumbnails .gallery__slide { max-block-size: calc(100svh - var(--header-h) - 56px); min-block-size: 360px; }
}
.product-layout__media, .product-layout__info { min-inline-size: 0; }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: 0.75rem; }
.gallery__stage { position: relative; min-inline-size: 0; }
.gallery__track { display: grid; gap: var(--grid-gap); outline-offset: 4px; }
.gallery__slide { position: relative; aspect-ratio: 4 / 5; scroll-margin-block-start: calc(var(--header-h) + 16px); }
.gallery-ratio--square .gallery__slide { aspect-ratio: 1; }
.gallery-ratio--portrait .gallery__slide { aspect-ratio: 4 / 5; }
.gallery-ratio--landscape .gallery__slide { aspect-ratio: 4 / 3; }
.gallery-ratio--adapt .gallery__slide { aspect-ratio: var(--ratio, 1); }
.gallery__slide :is(video, iframe, model-viewer) { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.gallery__external, .gallery__model, .gallery__video { position: absolute; inset: 0; }
.gallery__badge { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; z-index: 3; display: inline-flex; gap: 0.4em; align-items: center; padding: 0.3em 0.6em; background: var(--c-bg); border: 1px solid var(--c-border); }
.gallery__badge .icon { inline-size: 14px; block-size: 14px; color: var(--c-accent); }

/* Thumbnails rail layout: one slide visible at a time, horizontal snap track */
.gallery--thumbnails .gallery__track,
.gallery--stack .gallery__track,
.gallery--grid .gallery__track { grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { scroll-snap-align: center; }
.gallery__track { gap: 0; }

.gallery__thumbs { display: none; gap: 8px; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumb { position: relative; flex: none; inline-size: 88px; aspect-ratio: 1; opacity: 0.6; transition: opacity var(--dur-1), box-shadow var(--dur-1); overflow: hidden; }
.gallery__thumb img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.gallery__thumb[aria-current='true'] { opacity: 1; box-shadow: inset 0 0 0 2px var(--c-accent); }
.gallery__thumb[aria-current='true']::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--c-accent); }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb-icon { position: absolute; inset-block-end: 4px; inset-inline-end: 4px; z-index: 2; color: var(--c-accent); }
.gallery__thumb-icon .icon { inline-size: 14px; block-size: 14px; }

/* Controls */
.gallery__arrow {
  position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 5;
  display: none; place-items: center; inline-size: 48px; block-size: 48px;
  background: rgb(var(--c-bg-rgb) / 0.78); color: var(--c-text); border: 1px solid var(--c-border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur-1), color var(--dur-1), opacity var(--dur-1);
}
.gallery__arrow:hover:not(:disabled) { background: var(--c-accent); color: var(--c-on-accent); }
.gallery__arrow:disabled { opacity: 0.3; cursor: default; }
.gallery__arrow--prev { inset-inline-start: 12px; }
.gallery__arrow--next { inset-inline-end: 12px; }
.gallery__zoom {
  position: absolute; inset-block-end: 12px; inset-inline-end: 12px; z-index: 5;
  display: grid; place-items: center; inline-size: 48px; block-size: 48px;
  background: rgb(var(--c-bg-rgb) / 0.78); border: 1px solid var(--c-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur-1), color var(--dur-1);
}
.gallery__zoom:hover { background: var(--c-accent); color: var(--c-on-accent); }
.gallery__counter { position: absolute; inset-block-end: 22px; inset-inline-start: 18px; z-index: 4; color: var(--c-text); text-shadow: 0 1px 8px rgb(var(--c-bg-rgb) / 0.9); pointer-events: none; }
.gallery__dots { position: absolute; inset-block-end: 6px; inset-inline: 0; z-index: 4; display: none; justify-content: center; gap: 0; }
.gallery__dot { position: relative; inline-size: 24px; block-size: 24px; display: grid; place-items: center; }
.gallery__dot::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--c-text); opacity: 0.35; transition: opacity var(--dur-1), inline-size var(--dur-2) var(--ease-out), border-radius var(--dur-2); box-shadow: 0 0 6px rgb(var(--c-bg-rgb) / 0.6); }
.gallery__dot[aria-current='true']::before { opacity: 1; inline-size: 18px; border-radius: 3px; background: var(--c-accent); }

/* Hover zoom (precise pointers only) */
@media (hover: hover) and (pointer: fine) {
  .gallery__slide[data-media-type='image'] { cursor: zoom-in; overflow: hidden; }
  .gallery__slide[data-media-type='image'] img { transition: transform 500ms var(--ease-out); transform-origin: var(--zx, 50%) var(--zy, 50%); }
  .gallery__slide[data-media-type='image']:hover img { transform: scale(1.7); }
  .gallery__arrow { display: grid; opacity: 0; }
  .gallery__stage:hover .gallery__arrow:not(:disabled), .gallery__arrow:focus-visible { opacity: 1; }
}
html[data-fx='none'] .gallery__slide[data-media-type='image']:hover img { transform: none; }

/* Desktop layouts */
@media (min-width: 990px) {
  .gallery--thumbnails { grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 12px; }
  .gallery--thumbnails .gallery__thumbs { display: flex; flex-direction: column; order: -1; max-block-size: min(78vh, 760px); overflow-y: auto; }
  .gallery--thumbnails .gallery__dots { display: none; }
  .gallery--thumbnails[data-count='1'] { grid-template-columns: 1fr; }

  .gallery--stack .gallery__track, .gallery--grid .gallery__track { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; gap: var(--grid-gap); }
  .gallery--grid .gallery__track { grid-template-columns: 1fr 1fr; }
  .gallery--grid .gallery__slide:first-child { grid-column: 1 / -1; }
  .gallery--stack .gallery__arrow, .gallery--grid .gallery__arrow, .gallery--stack .gallery__dots, .gallery--grid .gallery__dots, .gallery--stack .gallery__counter, .gallery--grid .gallery__counter { display: none; }
  .gallery--stack .gallery__zoom, .gallery--grid .gallery__zoom { inset-block-start: 12px; inset-block-end: auto; }
}
/* Phones/tablets: always a swipeable carousel with dots, full-bleed */
@media (max-width: 989px) {
  .gallery__track { margin-inline: calc(var(--gutter) * -1); }
  .gallery__dots { display: flex; }
  .gallery__counter { display: none; }
  .gallery .gallery__slide { box-shadow: none; }
  .gallery__stage .hud-corners { display: none; }
}
@media (max-width: 989px) and (min-width: 560px) { .gallery__arrow { display: grid; opacity: 1; } }
@media (max-width: 989px) and (hover: none) { .gallery__arrow { display: none; } }

/* ---------- Lightbox ---------- */
dialog.lightbox {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0; inline-size: 100vw; max-inline-size: 100vw; block-size: 100dvh; max-block-size: 100dvh;
  background: rgb(var(--c-bg-rgb) / 0.97); color: var(--c-text);
}
dialog.lightbox::backdrop { background: rgb(0 0 0 / 0.8); }
dialog.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: lb-in var(--dur-2) var(--ease-out); }
@keyframes lb-in { from { opacity: 0; } }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; padding-block-start: calc(8px + env(safe-area-inset-top)); }
.lightbox__stage { position: relative; overflow: auto; display: grid; place-items: center; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
.lightbox__img { max-inline-size: 100%; max-block-size: calc(100dvh - 72px); inline-size: auto; block-size: auto; object-fit: contain; cursor: zoom-in; transition: transform var(--dur-3) var(--ease-out); transform-origin: var(--zx, 50%) var(--zy, 50%); }
.lightbox__stage.is-zoomed { place-items: start; }
.lightbox__stage.is-zoomed .lightbox__img { max-inline-size: none; max-block-size: none; inline-size: 200%; cursor: zoom-out; }
dialog.lightbox .gallery__arrow { display: grid; opacity: 1; inset-block-start: 50%; }
@media (max-width: 559px) { dialog.lightbox .gallery__arrow { inline-size: 44px; block-size: 44px; } }

/* ---------- Info column ---------- */
.product-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 1.6vw, 1.4rem); align-content: start; }
.product-info__title-wrap { display: grid; gap: 1rem; }
.product-info__title-wrap .badges { margin-block-end: 0.15rem; }
.product-info__title { text-wrap: balance; line-height: 1; }
.product-info__vendor { color: var(--c-accent); }
.product-info__price { display: grid; gap: 0.5rem; }
.product-info__price [data-price] { align-items: center; gap: 0.35rem 0.9rem; }
.product-info__tax { font-size: var(--small); }
.product-info__description { color: var(--c-muted); }
.installments:empty, .installments shopify-payment-terms:empty { display: none; }
.installments { font-size: var(--small); color: var(--c-muted); }
.rating--summary { gap: 0.6rem; }
.rating--summary .rating__value { font-family: var(--font-mono); }
.rating--summary .rating__count { font-size: var(--small); text-decoration: underline; text-underline-offset: 3px; }

/* Key specs tiles */
.key-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); }
.key-specs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.key-specs__item { background: var(--c-surface); padding: 0.85rem 1rem; display: grid; gap: 0.2rem; min-inline-size: 0; }
.key-specs__item dt { color: var(--c-muted); font-size: 0.65rem; }
.key-specs__item dd { margin: 0; font-family: var(--font-heading); font-size: clamp(1rem, 0.6vw + 0.9rem, 1.3rem); line-height: 1.15; overflow-wrap: anywhere; }
@media (max-width: 420px) { .key-specs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Delivery */
.delivery { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.95rem 1.1rem; border: 1px solid var(--c-border); background: linear-gradient(135deg, rgb(var(--c-accent-rgb) / 0.07), transparent 60%); }
.delivery__icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none; background: var(--c-surface); color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-border); }
.delivery__heading { font-weight: 600; }
.delivery__text { display: grid; gap: 0.15rem; font-size: var(--small); min-inline-size: 0; }
.delivery__text .rte > * + * { margin-block-start: 0.4em; }

/* Variant picker */
.variant-picker { display: grid; gap: 1.25rem; }
.variant-picker__group { border: 0; padding: 0; display: grid; gap: 0.6rem; min-inline-size: 0; }
.variant-picker__group legend { margin-block-end: 0.6rem; padding: 0; }
.variant-picker__value { color: var(--c-text); text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.variant-picker__values { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.variant-pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-block-size: 46px; min-inline-size: 46px; padding: 0 1.1rem;
  border: 1px solid var(--c-border); background: var(--c-surface);
  font-size: var(--small); cursor: pointer; user-select: none;
  transition: border-color var(--dur-1), color var(--dur-1), background var(--dur-1), transform var(--dur-1);
}
[data-corners='rounded'] .variant-pill { border-radius: var(--radius); }
.variant-pill:hover { border-color: var(--c-muted); }
.variant-pill:active { transform: scale(0.97); }
input:checked + .variant-pill { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); background: rgb(var(--c-accent-rgb) / 0.08); color: var(--c-text); }
input:focus-visible + .variant-pill { outline: 2px solid var(--c-accent); outline-offset: 2px; }
input[data-unavailable='true'] + .variant-pill { color: var(--c-muted); background: repeating-linear-gradient(-45deg, transparent 0 6px, rgb(var(--c-text-rgb) / 0.05) 6px 7px), var(--c-surface); }
input[data-unavailable='true'] + .variant-pill span:last-child { text-decoration: line-through; text-decoration-color: rgb(var(--c-text-rgb) / 0.4); }
.variant-pill__chip { inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--swatch-img, var(--swatch)); background-size: cover; box-shadow: 0 0 0 1px var(--c-border); }

/* Purchase */
.product-buy__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
.product-buy__row { display: flex; gap: 0.6rem; align-items: stretch; }
.product-buy__row quantity-input { block-size: 60px; flex: none; }
.product-buy__submit { flex: 1; min-inline-size: 0; }
.product-buy__submit .button { block-size: 100%; min-block-size: 60px; }
.button.is-added { --btn-bg: var(--c-success); --btn-fg: #06100b; --btn-bd: var(--c-success); }
.product-buy__dynamic { min-block-size: 0; }
.product-buy__dynamic .shopify-payment-button__button { min-block-size: 52px; border-radius: var(--radius); }
.product-buy__dynamic .shopify-payment-button__more-payment-options { color: var(--c-muted); }
.selling-plans { border: 1px solid var(--c-border); padding: 0.9rem 1rem; display: grid; gap: 0.5rem; }
.selling-plan { display: flex; gap: 0.6rem; align-items: center; cursor: pointer; font-size: var(--small); min-block-size: 36px; }
.selling-plan input { accent-color: var(--c-accent); inline-size: 18px; block-size: 18px; }
.selling-plan__price { margin-inline-start: auto; font-family: var(--font-mono); }
.pickup { font-size: var(--small); color: var(--c-muted); }
.pickup p { display: flex; gap: 0.4rem; align-items: center; }
.pickup .icon { color: var(--c-success); inline-size: 16px; block-size: 16px; }

/* Inventory */
.inventory { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: var(--small); }
.inventory__state { display: inline-flex; align-items: center; gap: 0.5rem; }
.inventory__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 15%, transparent); }
.inventory__state--in { color: var(--c-success); }
.inventory__state--low { color: var(--c-accent); }
.inventory__state--out { color: var(--c-sale); }
.inventory__state--back { color: var(--c-muted); }
.inventory__state--low .inventory__dot { animation: pulse 1.4s infinite; }

/* Highlights + specs */
.highlights { display: grid; gap: 0.75rem; padding: 1rem 1.1rem; background: var(--c-surface); border-inline-start: 2px solid var(--c-accent); }
.highlights__list { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.highlights__list li { display: flex; gap: 0.6rem; align-items: flex-start; }
.highlights__list .icon { color: var(--c-accent); inline-size: 16px; block-size: 16px; margin-block-start: 0.25em; }
.accordion > summary > .icon:first-child { color: var(--c-accent); margin-inline-end: 0.6rem; }
.spec-list { display: grid; }
.spec-list__row { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 1rem; padding-block: 0.55rem; border-block-end: 1px dashed var(--c-border); font-size: var(--small); }
.spec-list__row dt { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--tiny); color: var(--c-muted); align-self: center; }
[lang^='ar'] .spec-list__row dt { letter-spacing: 0; }
.spec-list__row dd { margin: 0; color: var(--c-text); font-variant-numeric: tabular-nums; }

/* Trust */
.trust { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.trust li { display: grid; justify-items: center; align-content: start; gap: 0.4rem; padding: 0.9rem 0.4rem; text-align: center; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); border: 1px solid var(--c-border); color: var(--c-muted); }
[lang^='ar'] .trust li { letter-spacing: 0; font-family: var(--font-body); font-size: 0.78rem; text-transform: none; }
.trust .icon { color: var(--c-accent); }

/* Frequently bought together */
.complementary { display: grid; gap: 0.75rem; padding-block-start: 0.5rem; border-block-start: 1px solid var(--c-border); }
.complementary__list { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.complementary__item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.5rem; border: 1px solid var(--c-border); background: var(--c-surface); transition: border-color var(--dur-1); }
.complementary__item:hover { border-color: var(--c-muted); }
.complementary__img { position: relative; inline-size: 72px; aspect-ratio: 1; overflow: hidden; display: block; }
.complementary__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.complementary__info { display: grid; gap: 0.2rem; min-inline-size: 0; }
.complementary__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; font-size: var(--small); font-weight: 600; line-height: 1.3; }
.complementary__title:hover { color: var(--c-accent); }
.complementary__add { border: 1px solid var(--c-border); position: relative; background: var(--c-bg); }
.complementary__add:hover { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.complementary__add.is-loading .icon { opacity: 0; }
.complementary__add.is-loading .button__spinner { opacity: 1; animation: spin 0.7s linear infinite; }
.complementary__form form { margin: 0; }

/* Sticky buy bar */
.sticky-buy {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 80;
  background: rgb(var(--c-bg-rgb) / 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--c-border);
  padding-block: 0.6rem calc(0.6rem + env(safe-area-inset-bottom));
  animation: sticky-in var(--dur-3) var(--ease-out);
}
@keyframes sticky-in { from { transform: translateY(100%); } }
.sticky-buy__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sticky-buy__product { display: flex; align-items: center; gap: 0.75rem; min-inline-size: 0; }
.sticky-buy__img { inline-size: 48px; block-size: 48px; flex: none; overflow: hidden; position: relative; }
.sticky-buy__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.sticky-buy__title { font-weight: 600; font-size: var(--small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 40vw; }
.sticky-buy__button { min-block-size: 48px; }
body.has-sticky-buy .footer { padding-block-end: 84px; }
body.has-sticky-buy .toast { inset-block-end: calc(88px + env(safe-area-inset-bottom)); }
@media (max-width: 559px) { .sticky-buy__img { display: none; } .sticky-buy__title { max-inline-size: 44vw; } }
@media (min-width: 990px) { .sticky-buy__title { max-inline-size: 28vw; } }

/* ---------- Quick view ---------- */
.quick-view__content { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 750px) { .quick-view__content { grid-template-columns: 1.05fr 1fr; } }
.quick-view__media { background: var(--c-surface); min-inline-size: 0; }
.qv-gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.qv-gallery__track::-webkit-scrollbar { display: none; }
.qv-gallery__slide { scroll-snap-align: center; clip-path: none !important; aspect-ratio: 4 / 5; }
@media (min-width: 750px) { .qv-gallery__slide { aspect-ratio: auto; min-block-size: 100%; block-size: 100%; } .qv-gallery, .qv-gallery__track { block-size: 100%; } }
.quick-view__info { padding: clamp(1.25rem, 3vw, 2.5rem); }
.quick-view__loading { display: grid; place-items: center; min-block-size: 50vh; }

/* ---------- Gaming performance blocks (FPS benchmarks, games it runs) ---------- */
.gperf { display: grid; gap: 0.9rem; padding: clamp(1rem, 2vw, 1.4rem); border: 1px solid var(--c-border); background: rgb(var(--c-text-rgb) / 0.03); }
.gperf__head { display: flex; gap: 0.8rem; align-items: center; }
.gperf__icon { display: grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; color: var(--c-accent); border: 1px solid rgb(var(--c-accent-rgb) / 0.4); background: rgb(var(--c-accent-rgb) / 0.08); }
.gperf__icon .icon { inline-size: 20px; block-size: 20px; }
.gperf__title { margin: 0; font-size: var(--h6, 1.05rem); letter-spacing: 0.02em; }
.gperf__sub, .gperf__note { margin: 0; font-size: var(--small, 0.85rem); }
.gperf__note { font-size: var(--tiny, 0.75rem); }
.gperf__empty { padding: 0.8rem; border: 1px dashed var(--c-border); font-size: var(--small, 0.85rem); }

.fps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.fps-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'game fps' 'meta meta' 'bar bar'; column-gap: 1rem; row-gap: 0.25rem; align-items: baseline; --c: var(--c-muted); }
.fps-row--mid { --c: #ffb02e; }
.fps-row--high { --c: #3ddc84; }
.fps-row--low { --c: #ff5d5d; }
.fps-row__game { grid-area: game; font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
.fps-row__meta { grid-area: meta; }
.fps-row__fps { grid-area: fps; display: inline-flex; gap: 0.3em; align-items: baseline; color: var(--c); direction: ltr; unicode-bidi: isolate; }
.fps-row__fps b { font-family: var(--font-mono); font-size: 1.3rem; line-height: 1; }
.fps-row__fps small { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.fps-row__bar { grid-area: bar; display: block; block-size: 6px; background: rgb(var(--c-text-rgb) / 0.1); overflow: hidden; }
.fps-row__bar i { display: block; block-size: 100%; inline-size: var(--w, 0%); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, transparent), var(--c)); }
[dir='rtl'] .fps-row__bar i { margin-inline-start: 0; }
html[data-fx='full'] .fps-row__bar i { transform-origin: left; animation: fps-grow 900ms var(--ease-out, ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
[dir='rtl'] html[data-fx='full'] .fps-row__bar i, html[data-fx='full'] [dir='rtl'] .fps-row__bar i { transform-origin: right; }
@keyframes fps-grow { from { transform: scaleX(0); } }

.ready-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ready-tier { display: inline-flex; align-items: center; padding: 0.15em 0.55em; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid currentColor; color: var(--tc, var(--c-muted)); }
.ready-tier--ultra { --tc: #b57cff; }
.ready-tier--high { --tc: #3ddc84; }
.ready-tier--medium { --tc: #ffb02e; }
.ready-tier--low { --tc: #ff7a59; }
.ready-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 0.5rem; }
.ready-item { display: grid; gap: 0.35rem; padding: 0.65rem 0.75rem; border: 1px solid var(--c-border); border-inline-start: 3px solid var(--tc, var(--c-border)); background: rgb(var(--c-text-rgb) / 0.02); min-inline-size: 0; }
.ready-item--ultra { --tc: #b57cff; } .ready-item--high { --tc: #3ddc84; } .ready-item--medium { --tc: #ffb02e; } .ready-item--low { --tc: #ff7a59; }
.ready-item__game { font-weight: 600; overflow-wrap: anywhere; }
.ready-item__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: center; }
.ready-more { display: grid; gap: 0.6rem; }
.ready-more > summary { justify-self: start; list-style: none; cursor: pointer; }
.ready-more > summary::-webkit-details-marker { display: none; }
.ready-more[open] > summary { display: none; }
.ready-grid--more { margin-block-start: 0; }