/* Конструктор курсів (core/constructor.html, static/js/constructor.js).

   Усе під обгорткою .cc і з префіксом cc-, щоб не зачепити решту сайту.
   Кольори — з гами Академії: мідь і вугільна тримають основу, контрастна
   фарба (--contrast, див. style.css) позначає вибране й головне. */

.cc button { font: inherit; color: inherit; }
.cc-app { min-height: 420px; }
.cc-fine { font-size: var(--small); color: var(--ink-muted); margin: 0; }
.cc-kicker {
  display: block; font-size: var(--tiny); letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600; color: var(--contrast);
}
.cc-hint { color: var(--ink-muted); max-width: 52ch; margin: 0 0 28px; font-size: 17px; }
.cc-link {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--copper-dark) !important;
  text-decoration: underline; text-underline-offset: 3px; font-size: var(--small);
}
.cc-link:hover { color: var(--ink) !important; }
.cc-note {
  margin: 0; padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--accent-100); color: var(--ink-soft); font-size: var(--small);
}

/* --- пляшка: наповнюється з кожною відповіддю ----------------------------- */
.cc-bottle { --fill: 0.05; --liq: var(--accent-300); position: relative; width: 230px; max-width: 100%; margin: 0 auto; }
.cc-bottle-art { position: relative; }
.cc-bottle svg { display: block; width: 100%; height: auto; overflow: visible; }
.cc-glass-back { fill: var(--accent-50); }
.cc-liquid {
  transform: translateY(calc(362px - var(--fill) * 334px));
  transition: transform 900ms var(--ease-out);
}
.cc-wave { fill: var(--liq); transition: fill 600ms var(--ease-out); animation: cc-wave 3.4s linear infinite; }
.cc-glass { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.cc-shine { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 5; stroke-linecap: round; }
/* Корок з'являється лише на «перегонці», коли краплі вже вщухли (.is-sealed). */
.cc-cork {
  fill: var(--accent-700); opacity: 0; transform: translateY(-34px);
  transition: opacity 200ms var(--ease-out), transform 420ms var(--ease-spring);
}
/* Затримка — щоб остання крапля встигла зникнути. */
.cc-still.is-sealed .cc-cork { opacity: 1; transform: none; transition-delay: 220ms; }
.cc-bubble { fill: rgba(255, 255, 255, 0.65); animation: cc-rise 3.2s ease-in infinite; }
.cc-bubble:nth-of-type(2) { animation-delay: 1.1s; }
.cc-bubble:nth-of-type(3) { animation-delay: 2s; }
/* Етикетка масштабується разом із пляшкою: розміри — у частках її ширини
   (cqw), тож і на маленькій пляшці старту ім'я профілю не вилазить за край.
   Рядок у px перед кожним cqw — для браузерів, які cqw не знають. */
.cc-bottle { container-type: inline-size; }
.cc-label {
  position: absolute; left: 23%; right: 23%; top: 50%;
  display: grid; gap: 3px; padding: 10px 6px; text-align: center;
  padding: 4cqw 2.4cqw;
  background: var(--cream); border: 1px solid var(--border-strong); border-radius: 4px;
  font-size: 11px; line-height: 1.3; color: var(--ink-soft);
  font-size: 4.7cqw;
}
.cc-label > * { min-width: 0; overflow-wrap: anywhere; }
.cc-label strong {
  font-family: "Lora", Georgia, serif; font-weight: 500; color: var(--ink); line-height: 1.15;
  font-size: 13px;
  font-size: 6cqw;
}
.cc-label-kicker {
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper-dark);
  font-size: 8px;
  font-size: 3.6cqw;
}
@keyframes cc-wave { to { transform: translateX(80px); } }
@keyframes cc-rise {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-190px); opacity: 0; }
}

/* --- старт ---------------------------------------------------------------- */
/* Сторінка починається з гри, тож заголовок і старт тримаються одного екрана. */
.cc .page-intro { padding-top: 40px; }
.cc .page-intro + .page-section { padding-top: 24px; }
.cc-start {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 48px; align-items: center;
  padding: 36px 48px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-xl);
}
.cc-start-art .cc-bottle { width: 180px; }
/* На старті імена відомі наперед (DEMO у constructor.js) і короткі — можна крупніше. */
.cc-start-art .cc-label strong { font-size: 7.4cqw; }
.cc-how { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.cc-how li { display: flex; align-items: center; gap: 16px; font-family: "Lora", Georgia, serif; font-size: 22px; line-height: 1.25; }
.cc-how b {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-pill);
  border: 1.5px solid var(--copper); color: var(--copper-dark); font-size: 18px; font-weight: 500;
}
.cc-start-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.cc-start-actions .btn { white-space: normal; text-align: center; }

/* --- гра: крок ліворуч, пляшка праворуч ------------------------------------ */
.cc-quest { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: start; }
.cc-side { position: sticky; top: 120px; padding-top: 28px; }
.cc-main h2 { margin: 10px 0 12px; }
.cc-main h2:focus { outline: none; }

.cc-steps { list-style: none; margin: 0 0 32px; padding: 0; display: flex; gap: 8px; font-size: var(--small); color: var(--ink-muted); }
.cc-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 3px solid var(--border-strong); }
.cc-steps b {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong); font-size: 12px;
}
.cc-steps .is-done { border-color: var(--ink); color: var(--ink); }
.cc-steps .is-done b { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.cc-steps .is-now { border-color: var(--copper); color: var(--ink); font-weight: 700; }
.cc-steps .is-now b { background: var(--contrast); border-color: var(--contrast); color: var(--cream); }

.cc-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 36px; }

/* Картка-вибір: рівень і станція маршруту. */
.cc-level, .cc-stage {
  display: grid; gap: 6px; align-content: start; text-align: left; cursor: pointer;
  padding: 22px; background: var(--glass-bg); border: 1.5px solid var(--glass-border); border-radius: var(--radius-lg);
  font-size: var(--small); line-height: 1.5; color: var(--ink-soft);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.cc-level:hover, .cc-stage:hover { border-color: var(--copper-light); transform: translateY(-3px); box-shadow: var(--shadow); }
.cc-level strong, .cc-stage strong { font-family: "Lora", Georgia, serif; font-weight: 500; color: var(--ink); line-height: 1.2; }
.cc-level[aria-pressed="true"], .cc-stage[aria-pressed="true"] {
  border-color: var(--contrast); background: var(--contrast-50); box-shadow: 0 0 0 3px color-mix(in srgb, var(--contrast) 22%, transparent);
}

.cc-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.cc-level strong { font-size: var(--h3); }
.cc-level .icon-badge { margin-bottom: 8px; }
.cc-level[aria-pressed="true"] .icon-badge { border-color: var(--contrast); color: var(--contrast-dark); }
.cc-level-n { font-size: var(--tiny); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--contrast); }

.cc-drinks { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-drink, .cc-word, .cc-seg button, .cc-options button {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--glass-bg); border: 1.5px solid var(--border-strong); color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.cc-drink { padding: 12px 20px 12px 14px; font-size: 16px; }
.cc-drink i { width: 22px; height: 22px; border-radius: 50%; background: var(--liq); border: 1.5px solid var(--ink); }
.cc-drink:hover, .cc-word:hover, .cc-seg button:hover, .cc-options button:hover { border-color: var(--copper); }
.cc .cc-drink[aria-pressed="true"], .cc .cc-word[aria-pressed="true"],
.cc .cc-seg button[aria-pressed="true"], .cc .cc-options button[aria-pressed="true"] {
  background: var(--contrast-dark); border-color: var(--contrast-dark); color: var(--cream);
}
.cc-drink[aria-pressed="true"] i { border-color: var(--cream); }

.cc-route { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cc-stage { grid-template-columns: auto 1fr; column-gap: 12px; padding: 16px 18px; }
.cc-stage-n { grid-column: 1 / -1; font-size: var(--tiny); letter-spacing: 0.1em; font-weight: 600; color: var(--contrast); }
.cc-stage-ic { grid-row: span 2; align-self: start; font-size: 26px; color: var(--ink); }
.cc-stage strong { font-size: 18px; }
.cc-stage > span:last-child { grid-column: 2; }
.cc-stage[aria-pressed="true"] .cc-stage-n::after { content: " · у маршруті"; color: var(--contrast-dark); }

/* --- вибір за словами ----------------------------------------------------- */
.cc-seg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.cc-seg-label { font-size: var(--small); color: var(--ink-muted); margin-right: 4px; }
.cc-seg button, .cc-word, .cc-options button { padding: 8px 16px; font-size: 15px; }
.cc #cc-search { margin-bottom: 8px; border-radius: var(--radius-pill); padding-inline: 20px; }
.cc-words h3 {
  margin: 20px 0 10px; font-family: "PT Sans", sans-serif; font-size: var(--tiny); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.cc-words > div { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- «перегонка» ---------------------------------------------------------- */
.cc-still { display: grid; justify-items: center; gap: 20px; padding: 24px 0 8px; }
.cc-still-text { margin: 0; font-family: "Lora", Georgia, serif; font-size: var(--h3); color: var(--ink); }
.cc-drops { position: relative; width: 20px; height: 44px; }
.cc-drops i {
  position: absolute; left: 4px; top: 0; width: 12px; height: 12px; background: var(--copper);
  border-radius: 0 50% 50% 50%; transform: rotate(45deg); opacity: 0; animation: cc-drop 0.85s ease-in infinite;
}
.cc-drops i:nth-child(2) { animation-delay: 0.28s; }
.cc-drops i:nth-child(3) { animation-delay: 0.56s; }
@keyframes cc-drop {
  0% { transform: translateY(-6px) rotate(45deg) scale(0.6); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(46px) rotate(45deg) scale(1); opacity: 0; }
}

/* --- результат ------------------------------------------------------------ */
.cc-result-head h2 { position: relative; margin: 10px 0 12px; font-size: var(--h1); }
.cc-result-head h2 span { display: inline-block; }
.cc-result-head h2:focus { outline: none; }
.cc-result-head .cc-hint { margin-bottom: 20px; max-width: 62ch; }
.cc-recap, .cc-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-tools { gap: 8px 24px; margin: 16px 0 32px; }
.cc-chip {
  padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: var(--accent-50); font-size: var(--small); color: var(--ink-soft);
}
.cc-chip--level { background: var(--contrast-dark); border-color: var(--contrast-dark); color: var(--cream); }

.cc-cards { display: grid; gap: 20px; }
.cc-cards-title { margin: 28px 0 0; }
.cc-card {
  padding: 28px; background: var(--glass-bg); border: 1.5px solid var(--glass-border); border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.cc-card--own { position: relative; background: var(--paper); border-color: var(--contrast); box-shadow: var(--shadow); }
.cc-card.is-chosen { border-color: var(--contrast-dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--contrast) 30%, transparent); }
.cc-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.cc-card-text { display: grid; gap: 8px; justify-items: start; }
.cc-card-text h3 { margin: 4px 0 0; }
.cc-card-text p { margin: 0; color: var(--ink-soft); max-width: 60ch; }
.cc-card-text .cc-why { font-size: var(--small); color: var(--ink-muted); }
.cc-facts { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: var(--small); color: var(--ink-muted); }
.cc-facts b { font-family: "Lora", Georgia, serif; font-size: 22px; font-weight: 500; color: var(--ink); margin-right: 4px; }

/* Ціни: гривні, під ними дрібно — євро за курсом НБУ. */
.cc-money { display: inline-flex; flex-direction: column; line-height: 1.15; }
.cc-money b { font-family: "Lora", Georgia, serif; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.cc-money small { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cc-muted { color: var(--ink-muted); }
.cc-price {
  display: grid; gap: 4px; justify-items: start; margin-top: 6px; padding: 12px 16px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--cream);
}
.cc-price-label { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper-dark); }
.cc-price .cc-money b { font-size: 28px; }
.cc-price .cc-money small { font-size: 13px; }
.cc-card-text .cc-price-note { font-size: var(--small); color: var(--ink-muted); }
.cc-mod-hours { margin: 0; font-size: var(--small); color: var(--ink-muted); }
.cc-card-text .cc-ready-price { font-size: var(--small); color: var(--ink-soft); }
.cc-ready-price b { color: var(--ink); }

.cc-ring { position: relative; width: 92px; height: 92px; flex: none; }
.cc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cc-ring circle { fill: none; stroke-width: 5; }
.cc-ring-track { stroke: var(--accent-200); }
.cc-ring-value {
  stroke: var(--copper); stroke-linecap: round; stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--p)); transition: stroke-dashoffset 1100ms var(--ease-out);
}
.cc-card--own .cc-ring-value { stroke: var(--contrast); }
.cc-ring > span { position: absolute; inset: 0; display: grid; place-content: center; grid-auto-flow: column; align-items: baseline; font-size: 13px; color: var(--ink-muted); }
.cc-ring b { font-family: "Lora", Georgia, serif; font-size: 28px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Програма індивідуального курсу. */
.cc-prog { display: grid; gap: 16px; margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--border-strong); }
.cc-mods { list-style: none; margin: 0; padding: 0; }
.cc-mod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; padding: 18px 0; border-bottom: 1px dashed var(--border-strong); }
.cc-mod-n {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong); font-size: var(--small); font-weight: 700; color: var(--ink-muted); background: var(--cream);
}
.cc-mod--goal .cc-mod-n { background: var(--contrast); border-color: var(--contrast); color: var(--cream); }
.cc-mod--drink .cc-mod-n { border-color: var(--copper); color: var(--copper-dark); }
.cc-mod-body { display: grid; gap: 4px; }
.cc-role { font-size: var(--tiny); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink-muted); }
.cc-mod--goal .cc-role { color: var(--contrast-dark); }
.cc-mod--drink .cc-role { color: var(--copper-dark); }
.cc-mod h4 { margin: 0; font-size: 20px; }
.cc-out, .cc-topics { margin: 0; font-size: var(--small); color: var(--ink-soft); }
.cc-topics { color: var(--ink-muted); }
.cc-meter { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: 1px; }
.cc-meter i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--copper); }
.cc-meter i.on { background: var(--copper); }
.cc-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--small); color: var(--ink-muted); }
.cc .cc-options button { padding: 4px 12px; font-size: var(--small); }
.cc-x {
  width: 34px; height: 34px; border-radius: var(--radius-pill); border: 1px solid transparent; background: none;
  cursor: pointer; font-size: 22px; line-height: 1; color: var(--ink-muted) !important;
}
.cc-x:hover { border-color: var(--border-strong); background: var(--cream); color: var(--ink) !important; }
.cc-add summary, .cc-inside summary { cursor: pointer; font-weight: 600; color: var(--copper-dark); width: fit-content; }
.cc-add[open] summary { margin-bottom: 4px; }

/* Готовий курс: що з програми в ньому є. */
.cc-inside { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.cc-inside .cc-link { display: inline-block; margin-top: 16px; }
.cc-cover { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 28px; }
.cc-cover h4 {
  margin: 16px 0 8px; font-family: "PT Sans", sans-serif; font-size: var(--tiny); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
}
.cc-cover ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--small); }
.cc-cover li { display: flex; gap: 8px; color: var(--ink-muted); }
.cc-cover li span { flex: none; width: 1em; text-align: center; font-weight: 700; }
.cc-cover .hit { color: var(--ink); }
.cc-cover .hit span { color: var(--contrast); }

/* --- запис ---------------------------------------------------------------- */
.cc-enroll {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: start;
  margin-top: 48px; padding: 48px; scroll-margin-top: 110px;
  background: var(--contrast-deep); color: var(--neutral-200); border-radius: var(--radius-xl);
}
.cc-enroll[hidden] { display: none; }
.cc-enroll h2 { margin: 0 0 14px; color: var(--neutral-100); }
.cc-enroll-text p { font-size: 17px; max-width: 32em; }
.cc-enroll .section-kicker { color: var(--contrast-light); }
.cc-enroll .cc-fine { color: var(--contrast-light); font-size: var(--small); }
.cc-form {
  display: grid; gap: 16px; padding: 32px; background: var(--cream); color: var(--ink);
  border-radius: var(--radius-lg); border: 1px solid var(--border);
}
.cc-form label { font-size: var(--small); margin-bottom: 6px; font-weight: 400; color: var(--ink-muted); }

/* --- головна: гра стартує в героя -----------------------------------------
   Ліворуч заголовок Академії, праворуч — сцена: фото з дегустації, печатка
   й стартова картка гри на контрастній фарбі. Пляшка стоїть на картці, мов
   на полиці, — тій самій, що в заголовку. Після старту текст і сцена
   ховаються (скрипт ставить .is-playing), і гра займає всю ширину героя. */
.cc-home { position: relative; }
.cc-home > .container { position: relative; z-index: 1; }
.cc-home .hero-split { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 56px; align-items: center; }
.cc-home.is-playing .hero-split { grid-template-columns: minmax(0, 1fr); }
.cc-home .cc-app { min-height: 0; }
.cc-home.is-playing .cc-app { min-height: 420px; }
.cc-home.is-playing :is(.cc-home-photo, .cc-home-seal, .hero-ring, .hero-drop) { display: none; }

/* Текст: підпис із краплею, заголовок, що закінчується «на полиці». */
.hero-kicker {
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: 20px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper-dark);
}
.hero-kicker::before {
  content: ""; flex: none; width: 10px; height: 10px; background: var(--copper);
  border-radius: 0 50% 50% 50%; transform: rotate(45deg);
}
.cc-home h1 { isolation: isolate; margin-bottom: 22px; font-size: clamp(36px, 4.3vw, 60px); line-height: 1.05; letter-spacing: -0.03em; }
.cc-home h1 em { display: block; }
.hero-shelf { position: relative; display: inline-block; white-space: nowrap; }
.hero-shelf::after {
  content: ""; position: absolute; z-index: -1; left: -0.05em; right: -0.12em; bottom: -0.04em; height: 0.08em;
  border-radius: 999px; background: var(--copper); transform-origin: left center;
}
.cc-home .hero-lead { max-width: 33em; margin-bottom: 28px; font-size: clamp(17px, 1.45vw, 19px); line-height: 1.6; font-weight: 400; }
.cc-home .hero-actions { gap: 12px; margin-bottom: 36px; }
.cc-home .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 24px; }
.cc-home .hero-stat { min-width: 0; }
.cc-home .hero-stats .stat-label { line-height: 1.4; }

/* Тло: два відсвіти фірмових фарб, напис логотипа кільцем ледь обертається,
   пливуть мідні краплі. Донизу все тане — наступна секція на тому ж
   пергаменті, тож різати кільце по краю героя не можна. */
.hero-deco {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(900px 600px at 90% 6%, color-mix(in srgb, var(--copper) 15%, transparent), transparent 62%),
    radial-gradient(800px 700px at -6% 100%, color-mix(in srgb, var(--contrast) 11%, transparent), transparent 60%);
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.hero-ring {
  --size: min(820px, 68vw);
  position: absolute; right: -8%; top: 0; bottom: 0; margin: auto 0; width: var(--size); height: var(--size);
  opacity: 0.07; fill: var(--copper-dark); animation: hero-spin 160s linear infinite;
}
.hero-ring text { font-family: var(--font-body); font-size: 60px; font-weight: 700; }
.hero-drop {
  position: absolute; width: 14px; height: 14px; border-radius: 0 50% 50% 50%; transform: rotate(45deg);
  background: var(--copper); opacity: 0.4; animation: hero-drift 9s ease-in-out infinite alternate;
}
.hero-drop-1 { left: 4%; top: 15%; }
.hero-drop-2 { left: 48%; top: 8%; width: 10px; height: 10px; background: var(--contrast); animation-duration: 11s; animation-delay: -3s; }
.hero-drop-3 { left: 50%; bottom: 24%; width: 11px; height: 11px; animation-duration: 8s; animation-delay: -5s; }
.hero-drop-4 { right: 3%; top: 72%; background: var(--contrast); animation-duration: 12s; animation-delay: -2s; }
/* Вужче за 1280 ліворуч від тексту вже немає поля — крапля лізла б на підпис. */
@media (max-width: 1279px) { .hero-drop-1 { display: none; } }
@keyframes hero-spin { to { transform: rotate(360deg); } }
@keyframes hero-drift { to { transform: translate(8px, -22px) rotate(32deg); } }
.hero-shelf::after { animation: hero-draw 900ms var(--ease-out) 600ms both; }
@keyframes hero-draw { from { transform: scaleX(0); } }

/* Стартова картка гри — темна, на контрастній фарбі. */
.cc-home .cc-start {
  grid-template-columns: minmax(0, 1fr) auto; gap: 28px; padding: 40px 36px;
  border: 0; box-shadow: var(--shadow-xl); color: var(--neutral-100);
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, color-mix(in srgb, var(--contrast-light) 16%, transparent), transparent 62%),
    var(--contrast-deep);
}
.cc-home .cc-start .tag { background: var(--contrast-light); color: var(--contrast-deep); }
.cc-start-title {
  margin: 14px 0 22px; font-family: "Lora", Georgia, serif; font-size: clamp(26px, 2.5vw, 34px);
  line-height: 1.12; letter-spacing: -0.01em; color: var(--cream);
}
.cc-home .cc-how { margin-bottom: 26px; }
.cc-home .cc-how li { font-size: 18px; gap: 14px; }
.cc-home .cc-how b { --how-rest: var(--copper-light); width: 34px; height: 34px; font-size: 15px; border-color: var(--copper-light); }
.cc-home .cc-start-actions { flex-direction: column; align-items: stretch; margin-bottom: 0; }
.cc-home .cc-start .btn-outline { border-color: color-mix(in srgb, var(--cream) 40%, transparent); color: var(--cream); font-size: var(--small); padding-block: 12px; }
.cc-home .cc-start .btn-outline:hover { background: color-mix(in srgb, var(--cream) 12%, transparent); border-color: var(--cream); color: var(--cream); }
.cc-home .cc-start .cc-fine { display: none; }
.cc-home .cc-start-art .cc-bottle { width: 132px; }

@media (min-width: 861px) {
  /* Перший екран — на всю висоту вікна (у розумних межах), як у Центру. */
  .cc-home {
    display: flex; flex-direction: column; justify-content: center;
    min-height: clamp(600px, calc(100svh - 116px), 840px); padding: 44px 0 48px;
  }
  .cc-home.is-playing { display: block; min-height: 0; }
  .cc-home > .container { width: 100%; }
  .cc-home h1 > span, .cc-home h1 em > span { display: block; }

  /* Сцена: фото визирає з-за картки на --peek, пляшка стоїть на її краю. */
  .cc-home-play { --peek: 244px; position: relative; }
  .cc-home-photo {
    position: absolute; left: 0; top: 0; width: 62%; height: calc(var(--peek) + 96px);
    object-fit: cover; object-position: 50% 100%;
    border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  }
  .cc-home-seal {
    position: absolute; z-index: 2; left: -34px; top: -26px; width: 124px; height: 124px; padding: 14px;
    object-fit: contain; background: var(--cream); border: 1px solid var(--border); border-radius: 50%;
    box-shadow: var(--shadow-lg); animation: float-gentle 6s ease-in-out infinite;
  }
  .cc-home:not(.is-playing) .cc-app { position: relative; z-index: 1; margin-top: var(--peek); }
  .cc-home .cc-start { position: relative; display: block; padding: 30px 36px 26px; }
  .cc-start-title { margin: 12px 0 18px; font-size: clamp(24px, 2.1vw, 30px); text-wrap: balance; }
  .cc-home .cc-how { gap: 9px; margin-bottom: 22px; }
  .cc-home .cc-how li { font-size: 17px; }
  .cc-home .cc-how b { width: 30px; height: 30px; font-size: 14px; }
  /* Другий шлях — не кнопка, а посилання під закликом. */
  .cc-home .cc-start .btn-outline, .cc-home .cc-start .btn-outline:hover {
    align-self: center; padding: 2px 4px; border: 0; background: none; box-shadow: none; transform: none;
    color: var(--contrast-light); text-decoration: underline; text-underline-offset: 3px; font-weight: 400;
  }
  .cc-home .cc-start .btn-outline:hover { color: var(--cream); }

  /* Пляшка на «полиці»: стоїть на верхньому краї картки, не гойдається. */
  .cc-home .cc-start-art { position: absolute; right: 8%; bottom: calc(100% - 3px); width: 104px; }
  .cc-home .cc-start-art::before {
    content: ""; position: absolute; z-index: -1; inset: 8% -30% -6%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--copper) 26%, transparent), transparent);
  }
  .cc-home .cc-start-art .cc-bottle { width: 100%; animation: none; container-type: normal; }
  /* Етикетка тут — бирка поруч із пляшкою: на самій пляшці її не прочитати. */
  .cc-home .cc-start-art .cc-label {
    left: auto; right: calc(100% + 16px); top: 30%; width: 152px;
    gap: 2px; padding: 10px 16px; text-align: left; font-size: 13px;
    border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  }
  .cc-home .cc-start-art .cc-label::after {
    content: ""; position: absolute; right: -5px; top: 50%; width: 11px; height: 11px; margin-top: -5px;
    background: inherit; transform: rotate(45deg);
  }
  .cc-home .cc-start-art .cc-label strong { font-size: 17px; }
  .cc-home .cc-start-art .cc-label-kicker { font-size: 10px; font-weight: 700; }
}

@media (max-width: 860px) {
  /* На телефоні картка гри стає одразу під заголовком: його діти
     розкладаються в ту саму колонку, що й картка. Сцени немає — фото
     лягає тлом картки, пляшка стоїть усередині. */
  .cc-home { padding-top: 28px; }
  .cc-home .hero-split, .cc-home.is-playing .hero-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cc-home-text { display: contents; }
  .cc-home-text[hidden] { display: none; }
  .cc-home-text > .hero-kicker { margin-bottom: 14px; }
  .cc-home h1 { margin-bottom: 24px; }
  .cc-home-play { order: 1; margin-bottom: 32px; }
  .cc-home.is-playing .cc-home-play { margin-bottom: 0; }
  .cc-home-text > .hero-lead, .cc-home-text > .hero-actions, .cc-home-text > .hero-stats { order: 2; }
  .cc-home-photo, .cc-home-seal, .hero-drop { display: none; }
  .hero-ring { right: -30%; top: auto; bottom: -12%; --size: 110vw; }
  /* У картці спершу назва й заклик, кроки — під ними. */
  .cc-home .cc-start {
    grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 28px 24px;
    background:
      linear-gradient(155deg, color-mix(in srgb, var(--contrast-deep) 72%, transparent), color-mix(in srgb, var(--contrast-deep) 96%, transparent) 70%),
      url("../img/photo/hero-glass.2d2009db59f5.jpg") 30% center / cover;
  }
  .cc-home .cc-start-body { display: flex; flex-direction: column; align-items: stretch; }
  .cc-home .cc-start-body > .tag { order: -3; align-self: start; }
  .cc-home .cc-start-title { order: -2; margin: 12px 0 20px; }
  .cc-home .cc-start-actions { order: -1; margin-bottom: 24px; }
  .cc-home .cc-how { margin-bottom: 0; }
  .cc-home .cc-start-art .cc-bottle { width: 104px; }
  /* Скло на темному — світле. */
  .cc-home .cc-start .cc-glass { stroke: var(--cream); }
  .cc-home .cc-start .cc-glass-back { fill: color-mix(in srgb, var(--cream) 14%, transparent); }
  .cc-home .cc-start .cc-pour { border-color: var(--cream); }
}
@media (max-width: 480px) {
  /* Маленький телефон: заклик має вміститись у перший екран, тож підпис над
     заголовком поступається місцем, а заголовок трохи менший. */
  .cc-home { padding-top: 20px; }
  .cc-home-text > .hero-kicker { display: none; }
  .cc-home h1 { font-size: 34px; margin-bottom: 18px; }
  .cc-home .hero-stats { gap: 14px; }
  /* Картка в одну колонку; пляшка — маленька, у кутку біля назви. Етикетку
     на такій не прочитати, тож її немає. */
  .cc-home .cc-start { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 22px 20px; }
  .cc-home .cc-start-title { font-size: 24px; margin: 10px 0 16px; padding-right: 64px; }
  .cc-home .cc-start-art { position: absolute; right: 20px; top: 18px; }
  .cc-home .cc-start-art .cc-bottle { width: 46px; }
  .cc-home .cc-start-art .cc-label { display: none; }
}

/* --- вузькі екрани -------------------------------------------------------- */
@media (max-width: 900px) {
  .cc-start { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; }
  .cc-start-art .cc-bottle { width: 150px; }
  .cc-quest { grid-template-columns: 1fr; gap: 20px; }
  /* Пляшка — смужкою над кроком: маленька, з підписом поруч. */
  .cc-side { position: static; order: -1; padding: 0; }
  .cc-side .cc-bottle { display: flex; align-items: center; gap: 16px; width: auto; margin: 0; }
  .cc-side .cc-bottle-art { width: 58px; flex: none; }
  .cc-side .cc-plus { display: none; }
  .cc-side .cc-label { position: static; text-align: left; padding: 0; border: 0; background: none; font-size: var(--small); }
  .cc-side .cc-label strong { font-size: 20px; }
  .cc-side .cc-label-kicker { font-size: 10px; }
}
@media (max-width: 640px) {
  .cc-steps li { flex-direction: column; align-items: flex-start; gap: 4px; font-size: var(--tiny); }
  .cc-nav .btn { padding-inline: 18px; }
  /* Десять станцій стовпчиком — це три екрани; на телефоні лишаємо назви. */
  .cc-route { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cc-stage { padding: 12px 14px; column-gap: 10px; }
  .cc-stage strong { font-size: 16px; align-self: center; }
  .cc-stage-ic { grid-row: auto; font-size: 22px; }
  .cc-stage > span:last-child { display: none; }
  .cc-stage[aria-pressed="true"] .cc-stage-n::after { content: " ✓"; }
  .cc-card { padding: 20px; }
  .cc-card-head { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
  .cc-card-head > .btn { grid-column: 1 / -1; }
  .cc-ring { width: 68px; height: 68px; }
  .cc-ring b { font-size: 21px; }
  .cc-mod { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
  .cc-x { grid-column: 2; justify-self: start; width: auto; height: auto; padding: 4px 0; font-size: var(--small); }
  .cc-x::after { content: " прибрати"; }
  .cc-enroll { padding: 28px 20px; }
  .cc-form { padding: 22px; }
}

/* --- рух ------------------------------------------------------------------
   Усе, що рухається, зібрано тут. Хто просив «менше руху» — не отримує
   нічого з цього (останнє правило файла), а скрипт не сипле краплі. */
@keyframes cc-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes cc-pop { 45% { transform: scale(1.05); } }
@keyframes cc-grow { from { transform: scaleX(0); } }

/* Кнопка-заклик: пульсує, крапля підстрибує, стрілка тягне вперед. */
.cc .cc-go { position: relative; gap: 12px; font-size: 18px; padding: 18px 34px; }
.cc-go::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: cc-pulse 1.9s ease-out infinite;
}
.cc-go:disabled::before, .cc-go:disabled .cc-go-arrow { animation: none; }
.cc .cc-go:not(:disabled):hover { transform: translateY(-3px) scale(1.04); box-shadow: var(--shadow-lg); }
.cc-go-arrow { display: inline-block; animation: cc-nudge 1.1s ease-in-out infinite; }
.cc-go-drop {
  width: 12px; height: 12px; flex: none; background: var(--cream);
  border-radius: 0 50% 50% 50%; animation: cc-bob 1.1s ease-in-out infinite;
}
@keyframes cc-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--copper) 60%, transparent); }
  75%, 100% { box-shadow: 0 0 0 20px color-mix(in srgb, var(--copper) 0%, transparent); }
}
@keyframes cc-nudge { 50% { transform: translateX(7px); } }
@keyframes cc-bob {
  0%, 100% { transform: translateY(-3px) rotate(45deg); }
  50% { transform: translateY(3px) rotate(45deg); }
}
.cc-nav .is-ready { animation: cc-pop 420ms var(--ease-out); }

/* Старт: кроки виходять по черзі й далі світяться один за одним. */
.cc-how li { animation: cc-up 600ms var(--ease-out) both; animation-delay: calc(var(--i) * 140ms + 100ms); }
.cc-how b { animation: cc-lit 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * 1.6s + 0.9s); }
@keyframes cc-lit {
  0%, 30%, 100% { background: transparent; color: var(--how-rest, var(--copper-dark)); transform: none; }
  8%, 22% { background: var(--copper); color: var(--cream); transform: scale(1.12); }
}
.cc-start-actions { animation: cc-up 600ms var(--ease-out) 520ms both; }
.cc-start .cc-fine { animation: cc-up 600ms var(--ease-out) 660ms both; }
.cc-start-art .cc-bottle { animation: cc-float 5.5s ease-in-out infinite; }
@keyframes cc-float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-10px) rotate(1.5deg); }
}

/* Крапля в пляшку й табличка «що долили». */
.cc-pour {
  position: absolute; left: 50%; top: -46px; width: 14px; height: 14px; margin-left: -7px; pointer-events: none;
  background: var(--liq, var(--copper)); border: 1.5px solid var(--ink); border-radius: 0 50% 50% 50%;
  animation: cc-pour 520ms ease-in both;
}
@keyframes cc-pour {
  from { transform: translateY(0) rotate(45deg) scale(0.6); opacity: 0; }
  25% { opacity: 1; }
  to { transform: translateY(60px) rotate(45deg) scale(1); opacity: 0.3; }
}
.cc-bottle-art.is-splash svg { animation: cc-splash 560ms var(--ease-out) 400ms; }
@keyframes cc-splash {
  35% { transform: translateY(4px) scale(1.03, 0.98); }
  70% { transform: translateY(-3px) scale(0.99, 1.01); }
}
.cc-plus {
  position: absolute; left: 50%; top: 19%; z-index: 2; white-space: nowrap; pointer-events: none;
  padding: 5px 14px; border-radius: var(--radius-pill); background: var(--contrast-dark); color: var(--cream);
  font-size: 13px; font-weight: 700; animation: cc-plus 1300ms var(--ease-out) both;
}
@keyframes cc-plus {
  0% { opacity: 0; transform: translate(-50%, 22px) scale(0.8); }
  18%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -18px); }
}
.cc-label.is-changed { animation: cc-pop 460ms var(--ease-spring); }
.cc-label.is-changed strong { animation: cc-up 420ms var(--ease-out) both; }

/* Гра: заголовок і картки кроку виходять по черзі, лінія кроку «набігає». */
.cc-main > .cc-kicker, .cc-main > h2, .cc-main > .cc-hint { animation: cc-up 520ms var(--ease-out) both; }
.cc-main > h2 { animation-delay: 60ms; }
.cc-main > .cc-hint { animation-delay: 120ms; }
#cc-step.is-entering :is(.cc-level, .cc-drink, .cc-stage, .cc-word) {
  animation: cc-up 480ms var(--ease-out) both; animation-delay: calc(var(--i) * 45ms + 160ms);
}
#cc-step.is-entering .cc-word { animation-duration: 320ms; animation-delay: calc(var(--i) * 12ms + 160ms); }
.cc .is-pop { animation: cc-pop 380ms var(--ease-spring); }
.cc-steps li { position: relative; }
.cc-steps .is-now { border-top-color: var(--border-strong); }
.cc-steps .is-now::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--contrast);
  transform-origin: left; animation: cc-grow 800ms var(--ease-out) both;
}
.cc-steps .is-now b { animation: cc-pulse 1.9s ease-out infinite; }
.cc-level .icon-badge, .cc-stage-ic, .cc-drink i { transition: transform var(--duration-base) var(--ease-spring); }
.cc-level:hover .icon-badge { transform: rotate(-10deg) scale(1.12); }
.cc-stage:hover .cc-stage-ic, .cc-stage[aria-pressed="true"] .cc-stage-ic { transform: scale(1.2) rotate(-6deg); }
.cc-drink:hover i, .cc-drink[aria-pressed="true"] i { transform: scale(1.25); }
.cc-word, .cc-drink { transition-property: border-color, background, color, transform; }
.cc-word:hover, .cc-drink:hover { transform: translateY(-2px); }

/* «Перегонка»: апарат дрижить, смужка відлічує час. */
.cc-still-art { display: grid; justify-items: center; gap: 6px; animation: cc-shake 420ms ease-in-out infinite; }
/* Пляшка наливається повільніше, ніж у грі: краплі мають устигнути накапати. */
.cc-still .cc-liquid { transition-duration: 2100ms; transition-timing-function: ease-in-out; }
/* Долито: краплі зникають, апарат завмирає, корок сідає на місце. */
.cc-drops { transition: opacity 180ms var(--ease-out); }
.cc-still.is-sealed .cc-drops { opacity: 0; }
.cc-still.is-sealed .cc-still-art { animation: cc-sealed 420ms var(--ease-out) 260ms; }
@keyframes cc-sealed { 40% { transform: translateY(5px); } }
@keyframes cc-shake { 25% { transform: rotate(-0.7deg); } 75% { transform: rotate(0.7deg); } }
.cc-still-text.is-changed { animation: cc-up 320ms var(--ease-out) both; }
.cc-still-bar { width: min(320px, 80%); height: 4px; border-radius: 2px; background: var(--accent-200); overflow: hidden; }
.cc-still-bar i { display: block; height: 100%; background: var(--copper); transform-origin: left; animation: cc-grow var(--ms) linear both; }

/* Результат: ім'я, бризки, картки одна за одною, печатка на найкращій. */
.cc-result.is-first .cc-result-head > * { animation: cc-up 600ms var(--ease-out) both; }
.cc-result.is-first .cc-result-head h2 { animation: cc-name 900ms var(--ease-out) both; }
@keyframes cc-name {
  from { opacity: 0; transform: translateY(24px) scale(0.94); letter-spacing: 0.08em; filter: blur(6px); }
}
.cc-result.is-first .cc-result-head .cc-hint { animation-delay: 250ms; }
.cc-result.is-first .cc-recap { animation-delay: 350ms; }
.cc-result.is-first .cc-tools { animation-delay: 450ms; }
.cc-result.is-first .cc-chip { animation: cc-up 420ms var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 70ms + 420ms); }
.cc-result.is-first :is(.cc-card, .cc-cards-title) { animation: cc-up 700ms var(--ease-out) both; animation-delay: calc(var(--i, 1) * 170ms + 520ms); }
.cc-result.is-first .cc-mod { animation: cc-up 480ms var(--ease-out) both; animation-delay: calc(var(--i) * 70ms + 950ms); }
.cc-burst { position: absolute; top: 55%; width: 0; height: 0; pointer-events: none; }
.cc-burst i {
  position: absolute; width: 11px; height: 11px; background: var(--c); border-radius: 0 50% 50% 50%;
  opacity: 0; animation: cc-burst 1200ms var(--ease-out) both;
}
@keyframes cc-burst {
  0% { transform: rotate(45deg) scale(0.3); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(45deg) scale(1); opacity: 0; }
}
.cc-stamp {
  position: absolute; top: -15px; right: 28px; padding: 5px 14px; transform: rotate(3deg);
  background: var(--cream); border: 2px solid var(--contrast-dark); border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--contrast-dark);
}
.cc-result.is-first .cc-stamp { animation: cc-stamp 460ms cubic-bezier(0.2, 1.5, 0.4, 1) 1500ms both; }
@keyframes cc-stamp { from { opacity: 0; transform: rotate(-14deg) scale(2.4); } }

/* Правки в програмі: нове підсвічується, обрана картка відгукується. */
.cc-mod.is-new, .cc-card.is-new { animation: cc-new 1500ms var(--ease-out); }
@keyframes cc-new {
  0% { opacity: 0; transform: translateX(-16px); background: var(--contrast-100); }
  30% { opacity: 1; transform: none; background: var(--contrast-50); }
}
.cc-mod-n, .cc-x { transition: transform var(--duration-base) var(--ease-spring), background var(--duration-fast), border-color var(--duration-fast); }
.cc-mod:hover .cc-mod-n { transform: scale(1.15); }
.cc-x:hover { transform: rotate(90deg); }
.cc-card:not(.cc-card--own):hover { border-color: var(--copper-light); box-shadow: var(--shadow); }
.cc-inside[open] .cc-cover, .cc-add[open] .cc-words { animation: cc-up 380ms var(--ease-out) both; }

@media (max-width: 640px) {
  /* На телефоні заклик іде першим: кроки під ним, а не над. */
  .cc-start-body { display: flex; flex-direction: column; }
  .cc-start-actions { order: -1; margin-bottom: 28px; }
  .cc-start-actions .btn { width: 100%; }
  .cc-how { margin-bottom: 20px; }
  .cc-how li { font-size: 18px; }
  .cc .cc-go { font-size: 16px; padding: 16px 24px; }
  .cc-x:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cc *, .cc *::before, .cc *::after { animation: none !important; transition: none !important; }
}