/* Review round 2 (client's comments of 1–2 Nov 2026). Loaded after site, pages and platform, on every page.
   The numbers are the 10x thread numbers. */

/* ---------- #37 #39 #52 #54: every alien has an outer glow in its own colour. A picker's file name is hashed, so the
   alien is named by its place, by the block's colour (--c) or by data-alien (the section's fallback setting). ---------- */
.hero__alien, .ph__alien, .help__alien, .offer__alien, .lost__alien, .gate__alien, .trial__alien, .trial__crew img, .pill img, .tribe:not(.tribe--grand) img, .cart-empty img {
  --r: 20px;
  /* one shadow, not two (review 2026-11-09: How to Play crashed on a phone after zooming in and out): every glowing alien
     also floats, so the phone redraws its glow at the zoomed size; one pass instead of two took WebKit's peak memory on
     that page from about 12.4 GB to 8 GB at 4x zoom, with the same look */
  filter: drop-shadow(0 0 calc(var(--r) * 1.5) color-mix(in srgb, var(--glow, var(--c, var(--cyan))) 85%, transparent));
}
/* while the page is pinch-zoomed (site.js sets .is-zoomed) the glowing aliens and floating items hold still */
.is-zoomed :is(.hero__alien, .ph__alien, .help__alien, .offer__alien, .lost__alien, .gate__alien, .trial__alien, .trial__crew img, .pill img, .tribe img, .cart-empty img, .hero__float img) { animation: none !important; }
.tribe:not(.tribe--grand) img, .help__alien, .trial__crew img { --r: 12px; }
.pill img { --r: 4px; }
.hero__alien--kurss, .gate__alien, [data-alien*="kurss"] { --glow: var(--lav); }
[data-alien*="tuff"], .offer__alien { --glow: var(--pink); }
[data-alien*="odz"] { --glow: var(--orange); }
.hero__alien--gochya, .lost__alien, .cart-empty img, [data-alien*="gochya"] { --glow: var(--gochya); }
.trial__crew img:nth-child(1) { --glow: var(--lav); }
.trial__crew img:nth-child(2) { --glow: var(--pink); }
.trial__crew img:nth-child(3) { --glow: var(--orange); }
.trial__crew img:nth-child(4) { --glow: var(--gochya); }

/* ---------- #49: a phrase typed in ALL CAPS in a paragraph (site.js wraps it) ---------- */
.caps { font-weight: 800; letter-spacing: .07em; color: var(--ink); }

/* ---------- #43: a rainbow word in the finale ---------- */
.verb--grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- #19: the YouTube pop-up's player fills its frame ---------- */
.modal__video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- #65: the small line above "Trial timer" ---------- */
.tapp__eyebrow { grid-column: 1 / -1; justify-self: center; margin-bottom: -4px; }

/* ---------- #26 #27: the Lander Parts on the tug-of-war ---------- */
.tug__lane { height: 58px; }
.tug__token { width: 54px; height: 54px; border-radius: 50%; background: none; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
.tug__lane--grand .tug__token { background: none; }
.tug__token::after { content: none; }
.tug__token img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- #47 #48: the story's comet and slideshow ---------- */
.story__comet { position: absolute; z-index: 0; width: 86%; height: auto; top: -30%; right: -26%; rotate: 180deg; pointer-events: none; }
.story__photo { z-index: 1; background: var(--plum-800); }
.story__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s var(--ease-out); }
.story__slide.is-on { opacity: 1; }

/* ---------- #33 #34: the gallery's effects leave once a photo shows; the arrow opens the full image ---------- */
.so-pdp .so-stage, .so-pdp .media-gallery__list-wrapper > .kubes { transition: opacity .35s; }
.so-gallery.is-photo .so-stage, .so-gallery.is-photo .media-gallery__list-wrapper > .kubes { opacity: 0; }
.so-view { position: absolute; top: 12px; right: 12px; z-index: 6; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); background: rgba(20, 7, 22, .72); border: 1px solid var(--line); pointer-events: auto; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.so-view svg { width: 18px; height: 18px; }
.so-view:hover { color: var(--plum-800); background: var(--cyan); border-color: var(--cyan); }
.so-view:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.so-gallery.is-video .so-view { display: none; }
.so-lightbox img { display: block; max-width: min(1400px, 100%); max-height: calc(100svh - 32px); width: auto; height: auto; object-fit: contain; background: rgba(255, 255, 255, .04); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9); }
.so-lightbox .modal__x { top: 18px; right: 18px; background: var(--plum-800); }
/* review 2026-11-08 (Sula, #100): browse the photos in the full-screen view */
.so-lightbox__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; translate: 0 -50%; border-radius: 50%; border: 1px solid var(--line); background: var(--plum-800); color: var(--ink); transition: background .2s, color .2s; }
.so-lightbox__nav:hover { background: var(--cyan); border-color: var(--cyan); color: var(--plum-800); }
.so-lightbox__nav:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.so-lightbox__nav svg { width: 20px; height: 20px; }
.so-lightbox__nav--prev { left: 18px; } .so-lightbox__nav--prev svg { rotate: 180deg; }
.so-lightbox__nav--next { right: 18px; }
.so-lightbox__count { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; margin: 0; padding: 6px 12px; border-radius: 99px; background: var(--plum-800); font: 700 .72rem var(--font-mono); letter-spacing: .16em; color: var(--ink); }
.so-lightbox[data-count="1"] .so-lightbox__nav, .so-lightbox[data-count="1"] .so-lightbox__count { display: none; }
@media (max-width: 720px) { .so-lightbox__nav { width: 40px; height: 40px; } .so-lightbox__nav--prev { left: 8px; } .so-lightbox__nav--next { right: 8px; } }

/* ---------- #40: the small trial cards carry the example, under a dotted line ---------- */
.tribe { align-content: start; }
.tribe__ex { display: grid; gap: 4px; margin-top: 8px; padding-top: 14px; background: radial-gradient(circle, color-mix(in srgb, var(--c, var(--orange)) 80%, #fff) 1.4px, transparent 1.9px) 0 0 / 9px 4px repeat-x; font-size: .86rem; color: var(--muted); }
.tribe__ex-k { font: 700 .62rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.tribe__ex b { font: 800 .8rem/1.2 var(--font-display); letter-spacing: .02em; text-transform: uppercase; color: var(--c, var(--orange)); }
/* review 2026-11-08 (Sula, #103): on the Grand card the example's name and dotted rule take the gradient, like its title */
.tribe--grand { border-color: transparent; background: linear-gradient(170deg, color-mix(in srgb, var(--pink) 20%, var(--plum-800)), var(--plum-850) 70%) padding-box, linear-gradient(95deg, color-mix(in srgb, var(--pink) 60%, transparent), color-mix(in srgb, var(--orange) 60%, transparent) 45%, color-mix(in srgb, var(--cyan) 60%, transparent)) border-box; }
.tribe--grand .tribe__ex { position: relative; background: none; }
.tribe--grand .tribe__ex::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); -webkit-mask: radial-gradient(circle, #000 1.4px, transparent 1.9px) 0 0 / 9px 4px repeat-x; mask: radial-gradient(circle, #000 1.4px, transparent 1.9px) 0 0 / 9px 4px repeat-x; }
.tribe--grand .tribe__ex b { justify-self: start; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 760px) { .tribe h3 { font-size: clamp(1.1rem, 5vw, 1.6rem); } } /* GOCHYA stays on one line in the narrow cards */

/* ---------- #38 #61: the trial names are buttons; the section can carry a small line above its heading ---------- */
.trials__title { display: grid; gap: 12px; }
.trials__nav li { padding: 0; }
.trials__nav button { display: block; padding: 8px 12px; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; border-radius: inherit; cursor: pointer; }
.trials__nav li:not(.is-on):hover { color: var(--ink); border-color: rgba(255, 255, 255, .35); }
.trials__nav button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- #29: the upsell row with a card or two hidden ---------- */
.up[hidden] { display: none; }
.upsell:has(.up[hidden]) { grid-template-columns: minmax(0, 1fr); }
.upsell:not(:has(.up:not([hidden]))) { display: none; }
@media (min-width: 961px) {
  .upsell:has(.up[hidden]) .up { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
}

/* ---------- #28: − and + on the mini timer, while paused ---------- */
.tmr__adj { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; translate: 0 -50%; color: var(--muted); visibility: hidden; opacity: 0; transition: opacity .2s, color .2s; }
.tmr__adj svg { width: 16px; height: 16px; }
.tmr__adj:hover { color: var(--ink); }
.tmr__adj--less { left: 15%; }
.tmr__adj--more { right: 15%; }
.tmr[data-state="paused"] .tmr__adj, .tmr[data-state="idle"] .tmr__adj { visibility: visible; opacity: 1; } /* before the start too, as on the timer page (#28, #35) */