/* Color Challenge (/color-challenge).
   Vsja igra zhivjot v odnoj korobke knizhnyh proporcij 3:4 (kak iPad).
   Polzunki, knopki, rezultat i itog — nakladki poverh cveta: pri smene
   ekrana korobka ne menjaet ni razmer, ni formu. Knopki i shapka berutsja
   iz style.css i palette-legacy.css — dublirovat ih ne nado. */

.cg-page [hidden] {
  display: none !important;
}

.cg-page .wrap {
  width: var(--palette-page-width);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding: 24px 0 40px;
}

/* ===== korobka igry ===== */

.cg-page {
  --cg-bar-w: 44px;
  --cg-bar-inset: 14px;
  --cg-thumb-size: 36px;
  --cg-gap: 72px;

  /* Na bolshom ekrane korobka kvadratnaja — tak igra zanimaet bolshe mesta
     po shirine. Na uzkih ekranah kvadrat ne vlezaet, tam ostajotsja
     knizhnaja 3:4 (perekljuchaetsja nizhe, v @media). */
  --cg-ar: 1 / 1;
  --cg-k: 1;
  --cg-cap: 820px;
}

/* Shirina beretsja po men'shemu iz trjoh: shirina kolonki, potolok 520px
   i to, chto vlezaet po vysote (vysota x 3/4 — te samye proporcii 3:4). */
/* container-type delaet korobku tochkoj otschjota dlja edinicy cqw —
   procenta ot EJO shiriny. Bez etogo krupnyj tekst schitalsja ot shiriny okna
   (vw), a shirina korobki chasche upiraetsja v vysotu okna: pri suzhenii okna
   korobka stojala na meste, a zagolovok umenshalsja sam po sebe. */
.cg-shell {
  container-type: inline-size;
  position: relative;
  aspect-ratio: var(--cg-ar);
  width: min(100%, var(--cg-cap), calc((100vh - var(--cg-header-h, 82px) - var(--cg-gap)) * var(--cg-k)));
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  background: #e9ebf0;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.16);
}

/* dvh, a ne vh: na telefone adresnaja stroka to pojavljaetsja, to uezhaet */
@supports (height: 100dvh) {
  .cg-shell {
    width: min(100%, var(--cg-cap), calc((100dvh - var(--cg-header-h, 82px) - var(--cg-gap)) * var(--cg-k)));
  }
}

/* ===== cvet ===== */

.cg-stage {
  position: absolute;
  inset: 0;
}

.cg-stage__fills {
  position: absolute;
  inset: 0;
  display: flex;
}

.cg-stage__fill {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 0.35s ease;
}

/* Vtoraja polovina svjornuta v nol: pojavljaetsja tolko na sravnenii */
.cg-stage__fill--b {
  flex-grow: 0;
}

.cg-shell.is-result .cg-stage__fill--b {
  flex-grow: 1;
}

/* Podpisi stojat vnizu svoej poloviny, srazu nad polkoj s rezultatom.
   Vysotu polki kladjot v --cg-sheet-h skript: ona zavisit ot togo,
   v skolko strok legla fraza pod schjotom. */
.cg-tag {
  position: absolute;
  left: 50%;
  bottom: calc(var(--cg-sheet-h, 150px) + 20px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.cg-shell.is-result .cg-tag {
  opacity: 1;
}

/* Ni plashek, ni tenej: na chistom cvete oni vygljadeli grjazno.
   Vsjo derzhitsja na prozrachnosti belogo — podpis blednee, kod chut plotnee. */
.cg-tag__label {
  color: rgba(255, 255, 255, 0.66);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Kod tonkij: v etoj igre on spravochnyj, glavnoe — sami cveta rjadom */
.cg-tag__hex {
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.cg-stage__meta {
  position: absolute;
  inset: 18px 20px auto 20px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  pointer-events: none;
}

/* Cifry vsegda belye — tak zadumano. Ten pod nimi ubrana: ona pachkala
   chistyj cvet. Vmesto nejo belyj sdelan chut prozrachnym — nadpis
   stanovitsja mjagche i ne sporit s samim cvetom. */
.cg-stage__meta {
  color: rgba(255, 255, 255, 0.82);
}

/* Na rezultate nomer raunda ne nuzhen — tam vazhny tolko dva cveta i schjot */
.cg-shell.is-result .cg-stage__round {
  display: none;
}

/* Poka igrok podbiraet cvet, nomer raunda ubran: on nichego ne dobavljaet
   i tolko otvlekaet ot samogo cveta. Vo vremja pokaza on nuzhen. */
.cg-shell.is-guess .cg-stage__round {
  display: none;
}

.cg-stage__round {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

.cg-stage__count {
  font-size: clamp(38px, 11vw, 58px);
  font-size: clamp(30px, 13cqw, 58px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

/* ===== polzunki sboku =====
   Nativnyj input[type=range], razvjornutyj na 90°: tak sohranjajutsja
   privychnoe pertaskivanie palcem, strelki na klaviature i dostupnost.
   Dlinu polosy (ravnu vysote korobki) kladjot v --cg-bar-len skript. */

/* Polosy ne prizhaty k krajam i razvedeny zazorom: vplotnuju drug k drugu
   oni chitalis' kak odin polosatyj blok, a ne kak tri otdelnyh regulatora.
   Zaodno skruglenija te zhe, chto u vsego sajta. */
.cg-bars {
  position: absolute;
  left: var(--cg-bar-inset);
  top: var(--cg-bar-inset);
  bottom: var(--cg-bar-inset);
  z-index: 3;
  display: flex;
  gap: 8px;
}

.cg-bar {
  position: relative;
  width: var(--cg-bar-w);
}

/* Dlina polosy schitaetsja iz vysoty korobki minus otstupy, poetomu
   otstup mozhno menjat v CSS — skript ob etom znat ne dolzhen. */
.cg-bar input {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--cg-bar-len, 420px) - var(--cg-bar-inset) * 2);
  height: var(--cg-bar-w);
  margin: 0;
  padding: 0;
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(-90deg);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
  touch-action: none;
}

/* Ruchka — ta zhe, chto u tochek mesha na /gradient-creator: beloe kolco
   i zalivka tekuschim cvetom (ejo stavit skript v --cg-thumb). Zdes u nejo
   est i tolk: pramo na polose vidno cvet, kotoryj ty sobiraesh.
   Tonkij vneshnij kontur nuzhen dlja svetloty 100% — inache belaja ruchka
   propadala by na belom konce polosy. */
.cg-bar input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--cg-thumb-size);
  height: var(--cg-thumb-size);
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--cg-thumb, #fff);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1), 0 4px 14px rgba(15, 23, 42, 0.3);
  transition: transform 0.15s ease;
}

.cg-bar input::-moz-range-thumb {
  width: var(--cg-thumb-size);
  height: var(--cg-thumb-size);
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--cg-thumb, #fff);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1), 0 4px 14px rgba(15, 23, 42, 0.3);
}

.cg-bar input:hover::-webkit-slider-thumb,
.cg-bar input:active::-webkit-slider-thumb {
  transform: scale(1.12);
}

.cg-bar input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.9), 0 2px 10px rgba(16, 24, 40, 0.4);
}

/* ===== knopki ===== */

.cg-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
  transition: background 0.25s ease, transform 0.25s ease;
}

.cg-pill:hover {
  background: #fafafa;
  transform: translateY(-2px);
}

.cg-pill:active {
  transform: translateY(0);
}

.cg-pill--lg {
  height: 52px;
  padding: 0 34px;
  font-size: 16px;
}

.cg-pill--wide {
  width: 100%;
}

/* Ot Play again otlichaetsja tolko propisnymi bukvami i strelkoj:
   shirina, vysota i kegl obschie s ostalnymi knopkami */
.cg-start {
  width: 100%;
  max-width: 280px;
}

.cg-start__arrow {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* Vtoraja knopka na itoge: ta zhe forma, no prozrachnaja — chtoby Play again
   ostavalsja glavnym dejstviem */
/* Bez teni: chitaemost derzhit bolee plotnaja zalivka, a ne ten pod tekstom */
.cg-pill--ghost {
  background: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: #fff;
  box-shadow: none;
}

.cg-pill--ghost:hover {
  background: rgba(255, 255, 255, 0.26);
}

.cg-check {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 4;
}

/* ===== rezultat raunda ===== */

.cg-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 18px calc(26px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.cg-sheet__score {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cg-sheet__score > span:first-child {
  font-size: clamp(38px, 11vw, 54px);
  font-size: clamp(30px, 12cqw, 54px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #111827;
  font-variant-numeric: tabular-nums;
}

.cg-sheet__max {
  font-size: 15px;
  font-weight: 700;
  color: #98a2b3;
}

.cg-sheet__note {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #667085;
  text-align: center;
}

/* ===== start, ssylka-vyzov i itog: tri ekrana, odin ritm =====
   Ikonka — podpis — krupnoe chislo (ili zagolovok) — odna stroka — knopki.
   Vse povtorjajuschiesja elementy opisany odnim pravilom na dvoih, a ne
   parami pohozhih: ran'she oni raspolzalis' i ekrany vygljadeli kak iz
   raznyh igr — raznyj kegl schjota, raznaja stroka pod nim, raznaja
   shirina knopok. */

.cg-intro,
.cg-final {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 20px;
  padding: 32px 26px;
  text-align: center;
  color: #fff;
  background-color: #46506b;
  background-size: cover;
  background-position: center;
}

.cg-final {
  overflow-y: auto;
}

/* Ikonka nad podpisju: glaz na starte, mishen po ssylke, kubok na itoge */
.cg-mark {
  width: 68px;
  height: 68px;
  margin-bottom: -10px;
  color: rgba(255, 255, 255, 0.85);
}

/* Podpis nad chislom */
.cg-intro__challenge,
.cg-final__label {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* Zagolovok igry — tolko na startovom ekrane. Ogranichenie shiriny v ch
   imenno ono lomaet ego na dve stroki: odnoj dlinnoj strokoj on byl shire
   podpisi pod nim, i blok ne sobiralsja. */
.cg-title {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(32px, 9vw, 58px);
  font-size: clamp(28px, 12cqw, 58px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

/* Krupnoe chislo: odno i to zhe po ssylke i na itoge */
.cg-intro__score,
.cg-final__score {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.cg-intro__score > span:first-child,
.cg-final__score > span:first-child {
  font-size: clamp(46px, 13vw, 76px);
  font-size: clamp(40px, 17cqw, 76px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.cg-intro__max,
.cg-final__max {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
}

/* Odna stroka pod glavnym elementom: podskazka na starte, priglashenie
   po ssylke, zvanie na itoge. Rol raznaja, no mesto i ves odinakovye. */
.cg-lead,
.cg-final__rank {
  margin: 0;
  max-width: 29ch;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

/* Melkaja vtorostepennaja stroka: rekord na starte, chuzhoj schjot na itoge */
.cg-intro__best,
.cg-final__versus {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

/* Knopki: odna shirina i odin kegl na vseh trjoh ekranah.
   Bez rastjazhki na vsju kolonku oni szhimajutsja po tekstu, i "Play again"
   okazyvaetsja uzhe, chem "Replay these colors" — imenno etim ekrany
   i otlichalis drug ot druga. */
.cg-final__actions,
.cg-final__share {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 280px;
}

.cg-final__actions .cg-pill,
.cg-final__share .cg-pill {
  width: 100%;
}

/* Odnoj knopki bylo malo: neponjatno, chto imenno uletit drugu.
   Poetomu sperva stroka o tom, chto proishodit, i tolko pod nej knopka. */
.cg-final__invite {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
}

/* ===== uzkie ekrany =====
   Korobka ostajotsja korobkoj: bokovye otstupy i skruglenija te zhe,
   chto na PK — menjajutsja tolko tolschina polzunkov i razmery knopok. */

@media (max-width: 860px) {
  .cg-page {
    --cg-bar-w: 38px;
    --cg-thumb-size: 32px;
    --cg-bar-inset: 12px;
    --cg-gap: 44px;
    --cg-ar: 3 / 4;
    --cg-k: 0.75;
    --cg-cap: 640px;
  }

  .cg-page .wrap {
    width: 100%;
    padding: 10px 8px 20px;
  }

  .cg-shell {
    border-radius: 24px;
  }

  .cg-stage__meta {
    inset: 14px 16px auto 16px;
  }

  .cg-check {
    right: 12px;
    bottom: 12px;
  }
}

@media (max-width: 380px) {
  .cg-page {
    --cg-bar-w: 34px;
    --cg-thumb-size: 29px;
    --cg-bar-inset: 10px;
  }

  .cg-page .wrap {
    padding: 8px 6px 16px;
  }

  .cg-shell {
    border-radius: 20px;
  }

  /* Na uzkom ekrane na itoge tri knopki plus priglashenie: bez ужatyh
     otstupov blok upiraetsja v nizhnij kraj korobki i dajot prokrutku */
  .cg-intro,
  .cg-final {
    padding: 20px 16px;
    gap: 10px;
  }

  .cg-mark {
    width: 44px;
    height: 44px;
    margin-bottom: -8px;
  }

  .cg-lead,
  .cg-final__rank {
    font-size: 15px;
  }

  .cg-intro__challenge,
  .cg-final__label {
    font-size: 13px;
  }

  .cg-final__actions,
  .cg-final__share {
    gap: 8px;
  }

  .cg-pill {
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }

  .cg-pill--lg {
    height: 46px;
    padding: 0 28px;
    font-size: 15px;
  }

  /* Nadpis dlinnaja, a mesta sprava ot trjoh polos malo */
  .cg-check {
    height: 42px;
    padding: 0 14px;
    font-size: 13px;
  }

  .cg-sheet {
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  }

}

@media (max-width: 330px) {
  /* Samye nizkie ekrany: itog s tremja knopkami i priglasheniem inache
     ne vlezaet v korobku celikom */
  .cg-intro,
  .cg-final {
    gap: 8px;
  }

  .cg-mark {
    width: 34px;
    height: 34px;
  }

  /* Krupnaja ikonka zabrala vysotu — vozvraschaem ejo promezhutkami */
  .cg-intro,
  .cg-final {
    gap: 6px;
  }

  .cg-pill--lg {
    height: 44px;
  }

  .cg-page {
    --cg-bar-w: 30px;
    --cg-thumb-size: 26px;
    --cg-bar-inset: 8px;
  }

  .cg-check {
    padding: 0 11px;
    font-size: 12px;
  }

  .cg-stage__meta {
    inset: 10px 12px auto 12px;
  }
}