/* ======================================================================
   Оценка тайтла: полукруглая шкала («кинометр») с котом внутри.

   Язык интерфейса здесь другой, чем на остальных экранах: крупный
   единственный орган управления, большое число, цвет во всю дугу.
   Так оценка читается как отдельное действие-награда, а не как ещё
   одна форма. Цвет всего блока задаёт одна переменная --hue, её ставит
   rating.js по текущему баллу.
   ====================================================================== */

.react-widget {
    --hue: 88;
    --accent: hsl(var(--hue) 62% 52%);
    --accent-dim: hsl(var(--hue) 45% 26%);
    --accent-deep: hsl(var(--hue) 55% 34%);

    background: linear-gradient(180deg, #161b22 0%, #12171e 100%);
    border: 1px solid #263041;
    border-radius: 18px;
    padding: 14px 14px 12px;
    transition: border-color .35s ease;
}

.react-widget:not(.is-empty) { border-color: var(--accent-dim); }

.react-caption {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7d8794;
}

/* ---------- Шкала-«кинометр» ----------
   Полукруг от 0 слева до 100 справа. Один жест пальцем ставит и грубый
   балл, и точный: отдельной «доводки» больше нет, потому что за лишней
   кнопкой никто не ходил и стобалльная шкала вырождалась в пять значений.
   Слов на шкале нет: «шедевр» на восьмидесяти — обещание, которое
   интерфейс сдержать не может. Цвет, поза кота и число говорят сами. */
.react-dial {
    position: relative;
    width: 100%;
    max-width: 320px;
    margin: 4px auto 0;
    aspect-ratio: 260 / 158;
    /* pan-y, а не none.
       С `none` блок забирал ЛЮБОЕ касание внутри прямоугольника 260×158 —
       включая пустое место под дугой и вокруг кота. Человек клал палец,
       чтобы пролистать страницу, и страница не двигалась; догадаться,
       что палец нужно переставить, удавалось не сразу.
       `pan-y` отдаёт браузеру вертикальный жест (прокрутка) и оставляет
       нам горизонтальный — а шкала как раз горизонтальная: от 0 слева
       до 100 справа. */
    touch-action: pan-y;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.react-widget.is-locked .react-dial { cursor: default; opacity: .75; }

.react-dial:focus-visible { outline: none; }
.react-dial:focus-visible .react-knob { stroke: #fff; stroke-width: 3; }

.react-dial-svg { display: block; width: 100%; height: 100%; overflow: visible; }

.react-track {
    fill: none;
    stroke: #232c39;
    stroke-width: 14;
    stroke-linecap: round;
}

.react-fill {
    fill: none;
    stroke-width: 14;
    stroke-linecap: round;
    transition: stroke-dasharray .09s linear;
}

.react-widget.is-empty .react-fill { opacity: .28; }

/* Насечки на границах поз: видно, что кот меняется не наугад */
.react-tick { stroke: #0d1117; stroke-width: 2.5; opacity: .85; }

.react-knob {
    fill: #f0f6fc;
    stroke: var(--accent);
    stroke-width: 5;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
    transition: stroke .25s ease, cx .09s linear, cy .09s linear;
}

.react-widget.is-empty .react-knob { fill: #8b949e; stroke: #3a4657; }

/* Кот внутри дуги. Размер в процентах от шкалы, а не в пикселях:
   виджет живёт и на странице тайтла, и в шторке «Моих списков» */
.react-dial-art {
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);
    width: 50%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.react-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.react-img:not([src]) { display: none; }

.react-dial-art.is-bouncing { animation: react-pop .42s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes react-pop {
    0%   { transform: translate(-50%, -50%) scale(.86) rotate(-4deg); }
    55%  { transform: translate(-50%, -50%) scale(1.07) rotate(2deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0); }
}

/* Число — на месте цифрового табло спидометра, между концами дуги */
.react-dial-score {
    position: absolute;
    left: 50%;
    bottom: 1%;
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    transition: color .25s ease;
    pointer-events: none;
}

.react-dial-score b {
    font-size: 38px; font-weight: 800; line-height: 1;
    /* число стоит поверх картинки — без тени оно тонет в кресле */
    text-shadow: 0 2px 12px rgba(4, 8, 14, .85);
}
.react-dial-score i { font-style: normal; font-size: 13px; color: #616b78; }
.react-widget.is-empty .react-dial-score b { color: #4d5661; }

/* Подсказка стоит ровно там же, где потом встанет число: пока балла нет,
   показывать прочерк незачем, а после первого касания подсказка не нужна */
.react-hint {
    position: absolute;
    left: 50%;
    bottom: 3%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
    font-size: 13px;
    color: #6b7685;
    pointer-events: none;
}

.react-widget:not(.is-empty) .react-hint { display: none; }
/* Гостю шкала показывается, но не работает — подсказка про жест была бы обманом */
.react-widget.is-locked .react-hint { display: none; }
.react-widget.is-empty .react-dial-score { display: none; }

/* ---------- Картинок ещё нет ----------
   Шкала остаётся рабочей, место под маскота просто пустует */
.react-widget.is-artless .react-dial-art { display: none; }

/* ---------- Низ ---------- */
.react-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 24px;
    margin-top: 10px;
}

.react-state { font-size: 12.5px; color: #7d8794; }
.react-state[data-kind="ok"] { color: #3fb950; }
.react-state[data-kind="error"] { color: #f85149; }

.react-clear {
    background: none;
    border: none;
    padding: 4px 2px;
    color: #7d8794;
    font-size: 12.5px;
    text-decoration: underline;
    cursor: pointer;
}

.react-clear:hover { color: #e6edf3; }

/* ---------- Гостю ---------- */
/* Спящий кот вместо неподвижной шкалы с нулём: объяснить, почему она
   не работает, у него выходит лучше, чем у подписи под ней. */
.react-locked { text-align: center; }
.react-locked p { margin: 0 0 10px; font-size: 14px; color: #e6edf3; font-weight: 700; }
.react-locked-note { font-weight: 400 !important; color: #8b949e !important; }

/* Кнопка входа здесь — общая .btn-google из style.css.
   Растягиваем на всю ширину блока, чтобы она читалась как действие
   виджета, а не как случайная наклейка в углу. */
.react-locked .btn-google { width: 100%; }

/* ---------- Своя оценка на карточке «Моих списков» ----------
   Имя не rating-badge: так уже называется бейдж MovieMatch Score
   на карточке колоды в style.css.

   Полосой во всю ширину карточки, а не наклейкой в углу. Три причины.

   Пилюля высотой 22 px на плитке шириной 150 px — это цель для пальца
   вдвое меньше того, что человек в неё попадает. Пилюля с «Оценить»
   читалась не как действие, а как выцветшая метка рядом с годом
   и звёздочкой — то есть как ещё одно свойство фильма, а не приглашение.
   И высота у наклейки и у полосы разная: в сетке плиток соседи по ряду
   тянутся до самого высокого, и ряд с одним неоценённым фильмом ехал.

   Поэтому оба состояния — одна и та же полоса одной высоты. Различает
   их цвет: свой балл — залитая цветом оценки, «Оценить» — обведённая
   контуром, с оранжевой звездой. Залитое читается как сделанное,
   контурное — как пустое место, которое просят заполнить. */
.my-score-badge {
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: var(--gap-2);
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: hsl(var(--hue, 88) 42% 20%);
    color: hsl(var(--hue, 88) 70% 74%);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.my-score-badge b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.my-score-badge span { opacity: .75; }

/* Пустое место, которое просят заполнить: контур вместо заливки. */
.my-score-badge.is-empty {
    background: rgba(255, 255, 255, .035);
    border-color: var(--card-border);
    color: var(--text-secondary);
    font-size: 12px;
}

/* Звезда — единственное, что здесь окрашено в акцент. Она же отличает
   полосу от кнопок «Применить» и «Сбросить» внизу фильтров: те залиты
   целиком, эта только помечена. */
.my-score-badge.is-empty::before {
    content: '★';
    color: var(--accent-orange);
    font-size: 13px;
    line-height: 1;
}

.my-score-badge.is-empty:hover {
    background: rgba(255, 255, 255, .06);
    border-color: var(--accent-orange);
    color: var(--text-primary);
}

/* Нажатие видно на самой полосе, а не на карточке: карточка от касания
   уезжает целиком (`.list-card:active`), и без своего отклика полоса
   выглядела бы неотличимой от промаха по карточке. */
.my-score-badge:active { transform: scale(.96); }

/* ---------- Окно оценки на экране «Мои списки» ---------- */
.rating-sheet {
    position: fixed;
    inset: 0;
    /* выше нижней навигации (z-index: 100 в style.css), иначе она
       перекрывает кнопку «Закрыть» */
    z-index: 300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(1, 4, 9, .74);
}

.rating-sheet[hidden] { display: none; }

.rating-sheet-inner {
    width: min(460px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #0d1117;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid #263041;
}

.rating-sheet-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 800;
    color: #e6edf3;
}

.rating-sheet-close {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border: 2px solid #2b3442;
    border-bottom-width: 4px;
    border-radius: 12px;
    background: #161b22;
    color: #c9d1d9;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.rating-sheet-close:active { transform: translateY(2px); border-bottom-width: 2px; }

@media (min-width: 640px) {
    .rating-sheet { align-items: center; }
    .rating-sheet-inner { border-radius: 20px; border: 1px solid #263041; }
}

/* ---------- Узкие экраны ---------- */
@media (max-width: 359px) {
    .react-dial-score b { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .react-dial-art.is-bouncing { animation: none; }
    .react-fill, .react-knob { transition: none; }
}