/* egg-hunt.css — плаваючий HUD, маркери-пасхалки та модалка питання.
   Підключається на кожній сторінці разом з egg-hunt.js. Використовує лише
   токени з variables.css — жодних нових кольорів. */

/* ── Маркер-пасхалка (додається в наявний контейнер сторінки) ── */
.egg-marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; min-width: 2rem; flex-shrink: 0;
  margin: .3rem .3rem .3rem .5rem; vertical-align: middle;
  border-radius: 50%; border: none; cursor: pointer;
  background: var(--surface-card); box-shadow: var(--shadow-sm);
  font-size: 1.1rem; line-height: 1; padding: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.egg-marker:hover { transform: scale(1.15); box-shadow: var(--shadow-md); }
.egg-marker--shimmer { animation: eggShimmer 2.4s ease-in-out infinite; }
.egg-marker.is-hidden { opacity: 0; transform: scale(.4); pointer-events: none; }
.egg-marker.is-revealed { animation: eggPop .6s ease; }
.egg-marker--bonus { position: absolute; top: .75rem; left: .75rem; margin: 0; }

@keyframes eggShimmer {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.5), var(--shadow-sm); }
  50% { box-shadow: 0 0 0 6px rgba(245,158,11,0), var(--shadow-sm); }
}
@keyframes eggPop {
  0% { opacity: 0; transform: scale(.4); }
  60% { opacity: 1; transform: scale(1.25); box-shadow: 0 0 0 8px rgba(245,158,11,.25); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Плаваючий HUD ── */
.egg-hud { position: fixed; left: 1rem; bottom: 1rem; z-index: 1150; font-family: var(--font-main); }
.egg-hud__pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--surface-card); color: var(--on-surface);
  border: 1px solid var(--border-soft); border-radius: 999px;
  padding: .55rem 1rem; box-shadow: var(--shadow-md); cursor: pointer;
  font-weight: 700; font-size: .9rem;
}
.egg-hud__icon { font-size: 1.1rem; }
.egg-hud--paused .egg-hud__pill { opacity: .7; }
.egg-hud__panel {
  margin-bottom: .6rem; padding: 1rem 1.1rem; width: 220px;
  background: var(--surface-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  position: absolute; bottom: 100%; left: 0;
}
.egg-hud__title { font-weight: 800; color: var(--primary); margin-bottom: .5rem; font-size: .9rem; }
.egg-hud__stat { font-size: .82rem; color: var(--on-surface-muted); margin-bottom: .25rem; }
.egg-hud__stat b { color: var(--on-surface); }
.egg-hud__actions { margin-top: .7rem; display: flex; flex-direction: column; gap: .4rem; }
.egg-hud__link { font-size: .82rem; color: var(--primary-light); font-weight: 600; }
.egg-hud__pause {
  border: 1px solid var(--border-soft); background: transparent; color: var(--on-surface-muted);
  border-radius: var(--radius); padding: .35rem .6rem; font-size: .78rem; cursor: pointer;
}
.egg-hud__pill--bump { animation: eggHudBump .4s ease; }
@keyframes eggHudBump { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
@media (max-width: 640px) { .egg-hud { left: .6rem; bottom: .6rem; } .egg-hud__panel { width: 200px; } }

/* ── "Яйце летить" у HUD при правильній відповіді ── */
/* opacity починає згасати лише в останній чверті польоту (transition-delay) —
   щоб яйце було добре видно в польоті, а не миттєво розчинялось. */
.egg-fly {
  position: fixed; z-index: 3000; font-size: 2.4rem; line-height: 1; pointer-events: none;
  transform: translate(0, 0) scale(1); opacity: 1;
  transition: transform 1.1s cubic-bezier(.22,.7,.25,1), opacity .35s ease .75s;
  will-change: transform, opacity;
}

/* ── Модалка питання (перевикористовує .modal-overlay/.modal з components.css) ── */
.egg-option {
  display: block; width: 100%; text-align: left; margin-bottom: .55rem;
  white-space: normal; transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.egg-option:last-child { margin-bottom: 0; }
.egg-option.is-selected { border-color: var(--primary-light); background: rgba(37,99,235,.1); }
.egg-option.is-correct { background: rgba(16,185,129,.14); border-color: var(--accent-green); color: var(--accent-green); }
.egg-option.is-wrong { background: rgba(239,68,68,.12); border-color: var(--danger); color: var(--danger); }
/* pointer-events:none — щойно кнопка заблокована, вона повністю перестає
   реагувати на курсор (жодного hover/scale-ефекту з наявних .btn стилів). */
.egg-option[disabled] { cursor: default; opacity: .85; pointer-events: none; }
/* Варіант, якого гравець не торкався — плавно схлопується після відповіді
   (JS вимірює scrollHeight, тоді transition max-height→0), лишає максимум
   2 картки замість 3, звільняє місце для пояснення й кнопки на мобільному. */
.egg-option.is-collapsing {
  transition: max-height .3s ease, opacity .25s ease, margin-bottom .3s ease .05s, padding-top .3s ease .05s, padding-bottom .3s ease .05s, border-width .3s ease .05s;
  opacity: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0;
}
.egg-explain {
  margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--radius);
  background: var(--surface-alt); color: var(--on-surface); font-size: .88rem; line-height: 1.55;
}
.egg-explain__source { display: block; margin-top: .4rem; font-size: .78rem; color: var(--on-surface-muted); }
/* Sticky-докована обгортка (ОКРЕМИЙ div, не сама кнопка!) — .btn задає
   власний display:inline-flex, який виграє в [hidden] незалежно від
   специфічності (author-стиль завжди сильніший за UA-стиль), тому
   toggle .hidden на самій кнопці не працював: display лишався inline-flex.
   Sticky/фон/тінь тепер на обгортці — кнопка всередині лишається звичайним
   .btn.btn--accent (амбер+білий текст), жодного конфлікту кольорів.
   Sticky в межах прокрутки самої .modal (max-height:90vh; overflow-y:auto).
   Негативні margin компенсують padding .modal (1.4rem 1.75rem 1.5rem), щоб
   докована смуга сягала країв картки; тінь зверху — натяк "є більше вмісту". */
.egg-modal-next-wrap {
  position: sticky; bottom: -1px;
  margin: 1.1rem -1.75rem -1.5rem; padding: .75rem 1.75rem 1.5rem;
  background: var(--surface-card); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 -10px 14px -8px rgba(0,0,0,.18);
}

@media (max-width: 720px) {
  .reg-text#eggModalQuestion { font-size: .92rem; }
  .egg-option { padding-top: .6rem; padding-bottom: .6rem; font-size: .88rem; }
  .egg-explain { font-size: .84rem; padding: .65rem .8rem; }
}

/* ── Спільна анімація "качання" яйця (тизер-бейдж + заголовок штабу) ── */
@keyframes eggWobble {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(11deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(5deg); }
}

/* ── Тизер-банер: два режими розміщення ── */
/* Головна (index.html): .egg-teaser вставляється JS усередину [data-page-hero]
   (afterbegin) — лежить ПОВЕРХ hero (відео/фон), не займає окреме місце в
   потоці й не зсуває hero вниз. При скролі їде разом із hero-секцією (не
   sticky, не fixed). top:68px — компенсація висоти фіксованої шапки (.nav),
   та сама константа, що й у .hero/.gm-hero/тощо. z-index:5 — вище за
   внутрішні шари hero (.hero__overlay:1, .hero .container:2 на index.html).
   Підсторінки: вставляється JS ПЕРЕД [data-page-hero] (beforebegin), з
   модифікатором .egg-teaser--flow — окремий блок у звичайному потоці між
   шапкою й hero, не оверлей (інакше перекриває назву сторінки).
   Світла тема: темно-синій (--gradient-hero) з бурштиновим кордоном/акцентами.
   Темна тема: суцільний бурштиновий (--gradient-accent) з білими елементами —
   протилежний контраст, щоб банер завжди виділявся проти фону сторінки. */
.egg-teaser {
  position: absolute; top: 68px; left: 0; right: 0; z-index: 5;
  color: #fff; background: var(--gradient-hero); border-left: 5px solid var(--accent);
}
.egg-teaser--flow {
  /* Звичайний потік між фіксованою шапкою (.header, position:fixed, висота
     68px — та сама константа, що й .hero/.nav__links на мобільному
     responsive.css) і hero-секцією підсторінки. Без цього відступу банер
     ховається під шапкою (видно лише вузьку смужку знизу). */
  position: relative; top: auto; left: auto; right: auto; margin-top: 69px;
}
/* Кожна hero-секція (.sp-hero/.gm-hero/.pj-hero/.ct-hero) має власний
   padding-top:96px — розрахований на випадок, коли hero йде ОДРАЗУ після
   фіксованої шапки. Коли банер вставлений перед hero (.egg-teaser--flow
   вище), він УЖЕ дає потрібний відступ від шапки (margin-top:69px + власна
   висота) — власний padding-top hero стає подвійним відступом і зайво
   опускає заголовок/кнопки. Тут лишаємо лише візуальний проміжок (--gap),
   не заново відступ від шапки. Специфічність (клас+атрибут) вища за
   поодинокий `.sp-hero` тощо, тому коректно перебиває їхній inline-стиль. */
.egg-teaser--flow + [data-page-hero] {
  padding-top: var(--gap);
}
/* padding-top/bottom ОКРЕМО (не скорочення "padding: 1.1rem 0") — інакше
   ліво/право обнуляється й затирає padding-inline, який .container дає
   цьому самому елементу (клас .container теж висить на .egg-teaser__inner) —
   бейдж і хрестик тоді впритул до країв екрана. */
.egg-teaser__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.egg-teaser__lead { display: flex; align-items: center; gap: 14px; }
.egg-teaser__badge { width: 38px; height: 38px; border-radius: 50%; background: rgba(59,130,246,.22); border: 1px solid rgba(59,130,246,.4); display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.egg-teaser__badge-icon { display: inline-block; transform-origin: 50% 70%; }
.egg-teaser__badge-icon.is-wobbling { animation: eggWobble 1.1s ease-in-out; }
.egg-teaser__text { display: flex; flex-direction: column; gap: .15rem; }
.egg-teaser__text strong { font-family: var(--font-head); font-size: 1.05rem; color: var(--accent); }
.egg-teaser__text span { font-size: .85rem; color: #b9c6dd; }
.egg-teaser__actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.egg-teaser__actions .btn--accent { background: var(--accent); color: #2c1602; }
.egg-teaser__close {
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 1rem; line-height: 1;
  display: grid; place-items: center; transition: background var(--transition);
}
.egg-teaser__close:hover { background: rgba(255,255,255,.22); }

[data-theme="dark"] .egg-teaser { background: var(--gradient-accent); border-left: none; }
[data-theme="dark"] .egg-teaser__text strong { color: #fff; }
[data-theme="dark"] .egg-teaser__text span { color: rgba(255,255,255,.92); }
[data-theme="dark"] .egg-teaser__actions .btn--accent { background: #fff; color: #7c3d05; }
[data-theme="dark"] .egg-teaser__close { background: rgba(0,0,0,.18); }
[data-theme="dark"] .egg-teaser__close:hover { background: rgba(0,0,0,.3); }

/* Компактний мобільний вигляд — не просто зменшені ті самі елементи, а
   окремо стиснутий варіант: менший бейдж, без другого рядка опису (лишається
   тільки заголовок), менша кнопка — щоб тизер не перекривав заголовок hero. */
@media (max-width: 720px) {
  .egg-teaser__inner { flex-direction: column; align-items: flex-start; text-align: left; padding-top: .7rem; padding-bottom: .7rem; gap: .55rem; }
  .egg-teaser__badge { width: 28px; height: 28px; font-size: 14px; }
  .egg-teaser__text strong { font-size: .9rem; }
  .egg-teaser__text span { display: none; }
  .egg-teaser__actions { width: 100%; justify-content: space-between; }
  .egg-teaser__actions .btn--accent { padding: .5rem .9rem; font-size: .85rem; }
}

/* ── Модалка «Почати полювання» ── */
.egg-start-rules { margin-top: 1.1rem; font-size: .85rem; color: var(--on-surface-muted); line-height: 1.55; }
.egg-start-links { margin-top: .6rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.egg-start-links a { color: var(--primary-light); font-weight: 600; }