/* Тема «Тимур FX»: «кейс» образца 14.10 в зелёном (Тим 13.10: «цвет можешь под нас, чуть в зелёный»).
   Подключается ПОСЛЕДНЕЙ, поверх стилей образца (style.css, site.css, case.css — их синий уже
   переведён в зелёный скриптом tools/import_sample_css.py).
   Палитра — переменные ниже. Лента, плашки, каталог и лента выигрышей рисуются на canvas и
   берут цвета отсюда же (readPalette в static/wheel.js). Контраст текста на кнопках сторожит
   tests/test_theme.py (WCAG AA, 4.5:1). */
:root{
  --tf-bg:#0f1c16;            /* фон страницы */
  --tf-bg-glow:#2fa76a38;     /* свечение сверху */
  --tf-surface:#15241d;       /* панели «кейса» */
  --tf-surface-2:#1b2e25;
  --tf-surface-3:#112019;     /* поле ввода */
  --tf-line:#2d4439;
  --tf-line-strong:#467a5f;
  --tf-text:#ecf6f0;          /* основной текст */
  --tf-text-soft:#c7dbd0;
  --tf-text-muted:#a3bcaf;
  --tf-accent:#34d17a;        /* акцент: точки, линии */
  --tf-accent-soft:#8ff0b8;   /* светлый акцент: строка заголовка */
  --tf-btn-1:#8be8b2;         /* главная кнопка: светлый зелёный… */
  --tf-btn-2:#5fd393;         /* …с тёмным текстом, как в образце */
  --tf-btn-hover-1:#a3f0c4;
  --tf-btn-hover-2:#74dea3;
  --tf-btn-text:#082417;
  --tf-btn-edge:#b5f5d0;
  --tf-btn-disabled:#2a4237;
  --tf-marker:#e9fff2;        /* метка в центре ленты */
  --tf-marker-glow:#3ce68a;
  --tf-badge:#ffd36b;         /* надпись поверх картинки */
  --tf-badge-text:#10261a;
  --tf-card-text:#ecf6f0;     /* подпись на карточке ленты */
  /* Уровни призов — металл: золото, серебро, бронза. glow — тройка R,G,B для свечения. */
  --tf-gold-top:#4f4529;   --tf-gold-base:#1d2620;   --tf-gold-line:#b0954f;   --tf-gold-accent:#f3d98c;
  --tf-gold-glow:229,195,107;   --tf-gold-ink:#3f2c0a;
  --tf-gold-metal-1:#fff2c4; --tf-gold-metal-2:#e8bf63; --tf-gold-metal-3:#a17428; --tf-gold-metal-4:#f6dc93;
  --tf-silver-top:#3b4a44; --tf-silver-base:#1a2420; --tf-silver-line:#8fa59b; --tf-silver-accent:#e3eee8;
  --tf-silver-glow:196,212,204; --tf-silver-ink:#26302c;
  --tf-silver-metal-1:#ffffff; --tf-silver-metal-2:#cfd8d4; --tf-silver-metal-3:#84918c; --tf-silver-metal-4:#edf2ef;
  --tf-bronze-top:#4f3428; --tf-bronze-base:#24201a; --tf-bronze-line:#a8714f; --tf-bronze-accent:#f0bb98;
  --tf-bronze-glow:205,140,104; --tf-bronze-ink:#3a1d0e;
  --tf-bronze-metal-1:#ffd9bf; --tf-bronze-metal-2:#d48f60; --tf-bronze-metal-3:#80462a; --tf-bronze-metal-4:#ecb893;
  --tf-confetti-1:#34d17a;
  --tf-confetti-2:#ffd36b;
  --tf-confetti-3:#ffffff;
  --tf-confetti-4:#8ff0b8;
}

/* ---------------------------------------------------------------- фон и текст */
body.case-experience{
  color:var(--tf-text);
  background:radial-gradient(ellipse 80% 650px at 52% 0,var(--tf-bg-glow),transparent 78%),var(--tf-bg);
}
body.case-experience .case-intro h1 em{color:var(--tf-accent-soft)}

/* ---------------------------------------------------------------- уровни */
body.case-experience [data-tier="gold"]{--prize-glow:var(--tf-gold-glow);--prize-top:var(--tf-gold-top);--prize-base:var(--tf-gold-base);--prize-line:var(--tf-gold-line);--prize-accent:var(--tf-gold-accent)}
body.case-experience [data-tier="silver"]{--prize-glow:var(--tf-silver-glow);--prize-top:var(--tf-silver-top);--prize-base:var(--tf-silver-base);--prize-line:var(--tf-silver-line);--prize-accent:var(--tf-silver-accent)}
body.case-experience [data-tier="bronze"]{--prize-glow:var(--tf-bronze-glow);--prize-top:var(--tf-bronze-top);--prize-base:var(--tf-bronze-base);--prize-line:var(--tf-bronze-line);--prize-accent:var(--tf-bronze-accent)}
body.case-experience .gold-dot{background:rgb(var(--tf-gold-glow))}
body.case-experience .silver-dot{background:rgb(var(--tf-silver-glow))}
body.case-experience .bronze-dot{background:rgb(var(--tf-bronze-glow))}

/* ---------------------------------------------------------------- лента */
body.case-experience .case-machine{background:linear-gradient(140deg,#2f6f4f66,transparent 65%),var(--tf-surface);border-color:var(--tf-line-strong)}
body.case-experience .roulette-marker{width:2px;background:var(--tf-marker);box-shadow:0 0 14px var(--tf-marker-glow)}
body.case-experience .case-selection{background:rgba(var(--prize-glow),.08);box-shadow:0 0 30px rgba(var(--prize-glow),.22)}
body.case-experience .case-progress>span{background:var(--tf-accent)}

/* ---------------------------------------------------------------- кнопки (текст — WCAG AA) */
body.case-experience .spin-button:not(:disabled),body.case-experience .claim-button{
  background:linear-gradient(120deg,var(--tf-btn-2),var(--tf-btn-1))!important;
  border-color:var(--tf-btn-edge)!important;color:var(--tf-btn-text)!important;
  box-shadow:0 5px 18px #34d17a2e!important;filter:none;
}
body.case-experience .spin-button:not(:disabled):hover,body.case-experience .claim-button:hover{
  background:linear-gradient(120deg,var(--tf-btn-hover-2),var(--tf-btn-hover-1))!important;filter:none;
}
body.case-experience .spin-button:disabled{background:var(--tf-btn-disabled)!important;border-color:var(--tf-line)!important;color:var(--tf-text-soft)!important}
body.case-experience .code-row button,body.case-experience .case-claim-link{
  background:var(--tf-btn-2)!important;border-color:var(--tf-btn-edge)!important;color:var(--tf-btn-text)!important;
}
body.case-experience .code-row button:hover,body.case-experience .case-claim-link:hover{background:var(--tf-btn-hover-2)!important}
body.case-experience #entry.code-accepted .code-row button{background:var(--tf-btn-1)!important}
body.case-experience .code-row input{background:var(--tf-surface-3);border-color:var(--tf-line-strong);color:var(--tf-text)}
body.case-experience .code-row input::placeholder{color:var(--tf-text-muted)}
body.case-experience :is(button,a,input):focus-visible{outline:2px solid var(--tf-accent-soft);outline-offset:3px}

/* ---------------------------------------------------------------- окно выигрыша */
body.case-experience #reward-dialog{color:var(--tf-text)}
body.case-experience #reward-dialog .winner-heading{color:var(--prize-accent,#ffe397)}

/* ---------------------------------------------------------------- служебное */
.copy-buffer{position:fixed;left:-9999px;top:0;opacity:0}

/* ---------------------------------------------------------------- каталог на телефоне: по два */
@media(max-width:600px){
  body.case-experience .reward-catalog__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.case-experience .reward-tile h3{font-size:14px;line-height:1.3}
  body.case-experience .reward-tile__copy{padding:10px 12px 12px}
  body.case-experience .reward-tile__tier{font-size:9px}
  body.case-experience .reward-tile__visual{height:auto;padding:34px 6px 4px}
}

/* ---------------------------------------------------------------- картинки на canvas — без искажения */
/* В образце здесь был SVG фиксированной высоты; canvas с такой высотой сплющивается.
   Размер холста в пикселях wheel.js подбирает под экран (DPR до 3) — пропорции держит CSS. */
body.case-experience canvas.reward-tile__art{width:100%;max-width:250px;height:auto;aspect-ratio:22/15}
body.case-experience .prize-feed__art canvas{display:block;width:82px;height:70px}

/* ---------------------------------------------------------------- фильтры каталога — цвета уровней */
body.case-experience .case-filters [data-filter="gold"]{--filter-rgb:var(--tf-gold-glow);--filter-accent:var(--tf-gold-accent)}
body.case-experience .case-filters [data-filter="silver"]{--filter-rgb:var(--tf-silver-glow);--filter-accent:var(--tf-silver-accent)}
body.case-experience .case-filters [data-filter="bronze"]{--filter-rgb:var(--tf-bronze-glow);--filter-accent:var(--tf-bronze-accent)}