/* Базовые стили страницы — те же, что на остальных разделах сайта.
   Без них daily.css грузился в одиночку и страница выходила белой. */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Space Grotesk', sans-serif;
    background: #0a0a0a;
    color: #fff;
    min-height: 100vh;
}

.page { min-height: 100vh; display: flex; flex-direction: column; }

/* Ежедневная головоломка. Оформление в стиле сайта: тёмный фон,
   лаймовый акцент, крупные тап-зоны под телефон. */

.daily-wrap {
    max-width: 620px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    min-height: 70vh;
}

.d-state { animation: d-in .25s ease; }
@keyframes d-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }

/* ── шапка игры ── */
.d-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.d-num { font-size: 15px; color: rgba(255,255,255,.55); letter-spacing: .3px; }
.d-num b { color: #ccff00; margin-left: 6px; }
.d-streak {
    font-size: 14px; color: rgba(255,255,255,.7);
    background: rgba(255,255,255,.06); padding: 6px 12px; border-radius: 20px;
}

/* ── точки прогресса ── */
.d-progress { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.d-dot {
    width: 34px; height: 6px; border-radius: 3px;
    background: rgba(255,255,255,.14); transition: background .2s;
}
.d-dot.now { background: rgba(204,255,0,.55); }
.d-dot.ok  { background: #ccff00; }
.d-dot.bad { background: #ea2027; }

/* ── картинка ── */
.d-figure {
    position: relative; border-radius: 18px; overflow: hidden;
    background: #111; aspect-ratio: 1 / 1; margin-bottom: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.d-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-flash {
    position: absolute; inset: 0; opacity: 0; pointer-events: none;
    transition: opacity .18s;
}
.d-flash.ok  { background: rgba(204,255,0,.42); opacity: 1; }
.d-flash.bad { background: rgba(234,32,39,.45); opacity: 1; }

/* ── кнопки ответа ── */
.d-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d-btn {
    padding: 20px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05); color: #fff; font-size: 16px; font-weight: 600;
    font-family: inherit; cursor: pointer; transition: transform .12s, background .18s;
}
.d-btn:active { transform: scale(.97); }
.d-btn:disabled { opacity: .45; cursor: default; }
.d-btn-real:hover:not(:disabled) { background: rgba(204,255,0,.14); border-color: #ccff00; }
.d-btn-ai:hover:not(:disabled)   { background: rgba(234,32,39,.16); border-color: #ea2027; }

/* ── результат ── */
.d-score { text-align: center; margin-bottom: 26px; }
.d-score-n { font-size: 68px; font-weight: 700; line-height: 1; }
.d-score-n b { color: #ccff00; }
.d-rank { font-size: 22px; margin-top: 10px; color: #fff; }
.d-streak-badge {
    display: inline-block; margin-top: 12px; padding: 7px 16px; border-radius: 20px;
    background: rgba(255,255,255,.07); font-size: 14px;
}
.d-summary { margin-top: 14px; color: rgba(255,255,255,.6); font-size: 14px; }

.d-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 10px; }
.d-thumb {
    position: relative; padding: 0; border-radius: 10px; overflow: hidden;
    border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 1/1;
}
.d-thumb.ok  { border-color: #ccff00; }
.d-thumb.bad { border-color: #ea2027; }
.d-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-thumb-tag {
    position: absolute; left: 3px; top: 3px; font-size: 9px; font-weight: 700;
    background: rgba(0,0,0,.75); color: #fff; padding: 2px 5px; border-radius: 4px;
}
.d-hint { text-align: center; font-size: 13px; color: rgba(255,255,255,.45); margin-bottom: 22px; }

/* ── карточка для шеринга ── */
.d-share-card {
    background: rgba(255,255,255,.05); border-radius: 14px; padding: 18px;
    text-align: center; margin-bottom: 12px;
}
.d-share-line { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
/* Свои квадраты вместо системных эмодзи: 🟩🟥 рендерятся мятным и
   розовым, к лаймовой палитре сайта отношения не имеют. */
.d-squares { display: flex; gap: 7px; justify-content: center; }
.d-sq {
    width: 26px; height: 26px; border-radius: 6px; display: block;
}
.d-sq.ok  { background: #ccff00; box-shadow: 0 0 12px rgba(204,255,0,.35); }
.d-sq.bad { background: #ea2027; box-shadow: 0 0 12px rgba(234,32,39,.30); }

.d-share, .d-cta {
    display: block; width: 100%; text-align: center; padding: 17px;
    border-radius: 14px; font-size: 16px; font-weight: 700; font-family: inherit;
    cursor: pointer; border: none; text-decoration: none; margin-bottom: 12px;
}
.d-share { background: #ccff00; color: #0a0a0a; }
.d-share.copied::after { content: ' ✓'; }
.d-cta {
    background: transparent; color: #ccff00; border: 2px solid #ccff00;
}

.d-next { text-align: center; font-size: 13px; color: rgba(255,255,255,.45); margin-top: 20px; }
.d-timer { text-align: center; font-size: 22px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75); }

/* ── разбор ── */
.d-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.86); z-index: 300;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* display:flex перебивает атрибут hidden — без этого правила модалка
   висит поверх страницы с самого открытия. */
/* display:flex/inline-block перебивают атрибут hidden — из-за этого
   и модалка висела поверх страницы, и пустая плашка серии дней
   показывалась под званием. Одно правило на все блоки игры. */
.daily-wrap [hidden], .d-modal[hidden] { display: none !important; }
.d-modal-box {
    background: #121212; border-radius: 18px; padding: 20px; max-width: 460px; width: 100%;
    max-height: 88vh; overflow-y: auto; position: relative;
}
.d-modal-x {
    position: absolute; right: 12px; top: 8px; background: none; border: none;
    color: rgba(255,255,255,.6); font-size: 30px; cursor: pointer; line-height: 1;
}
.d-modal-box img { width: 100%; border-radius: 12px; margin-bottom: 14px; }
.d-truth { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.d-det { font-size: 14px; padding: 9px 12px; border-radius: 9px; margin-bottom: 14px; }
.d-det.ok  { background: rgba(204,255,0,.10); color: #ccff00; }
.d-det.bad { background: rgba(234,32,39,.12); color: #ff6b6b; }
.d-row {
    display: flex; justify-content: space-between; padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px;
    color: rgba(255,255,255,.6);
}
.d-row b { color: #fff; font-weight: 600; }

.d-spinner {
    width: 38px; height: 38px; margin: 80px auto; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.12); border-top-color: #ccff00;
    animation: d-spin .8s linear infinite;
}
@keyframes d-spin { to { transform: rotate(360deg); } }
.d-empty { text-align: center; color: rgba(255,255,255,.5); padding: 60px 0; }

@media (max-width: 480px) {
    .d-score-n { font-size: 56px; }
    .d-thumbs { gap: 6px; }
    .d-btn { padding: 18px 8px; font-size: 15px; }
}

/* ── Ответ поверх кадра ────────────────────────────────────────────
   Раньше был только цветной проблеск: игрок видел, угадал или нет, но
   не видел, ЧЕМ была картинка. Теперь ответ пишется словами. */
.d-reveal {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px);
    animation: d-reveal-in .18s ease;
}
.d-reveal[hidden] { display: none !important; }

@keyframes d-reveal-in {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
}

.d-reveal-mark {
    width: 74px; height: 74px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 42px; font-weight: 700; line-height: 1;
}
.d-reveal-mark.ok  { background: #ccff00; color: #0a0a0a; }
.d-reveal-mark.bad { background: #ea2027; color: #fff; }

.d-reveal-text {
    font-size: 30px; font-weight: 700; letter-spacing: .5px;
    text-align: center; padding: 0 20px;
}
.d-reveal-text.ai   { color: #ff6b6b; }
.d-reveal-text.real { color: #ccff00; }

@media (max-width: 480px) {
    .d-reveal-mark { width: 62px; height: 62px; font-size: 34px; }
    .d-reveal-text { font-size: 25px; }
}

/* Панель шеринга берётся общая — та же, что в карточке проверки
   (share.css). Своя версия убрана, чтобы не держать два вида кнопок. */
.d-socials { display: none; }

#d-card-canvas { display: none; }

.d-save {
    display: block; width: 100%; text-align: center; padding: 15px;
    border-radius: 14px; font-size: 15px; font-weight: 600; font-family: inherit;
    cursor: pointer; margin-bottom: 14px;
    background: rgba(255,255,255,.06); color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    transition: background .16s;
}
.d-save:hover { background: rgba(255,255,255,.11); }

.daily-wrap .share-buttons {
    display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
    margin-bottom: 18px;
}