/* ==========================================================
   ward.css — новый облик стиля «Ординаторская» (холст «Конторка — новый облик», ряд A).
   Объёмные кнопки, Unbounded в заголовках, Manrope в кнопках, отклик на нажатие.
   Только data-theme="ward"; night и chart не трогаем.
   ========================================================== */

:root[data-theme="ward"] {
  --ward-press: translateY(4px);
}

/* ---------- Заголовки ---------- */
:root[data-theme="ward"] .hm-title,
:root[data-theme="ward"] .topbar h1,
:root[data-theme="ward"] .tq-title,
:root[data-theme="ward"] .section-title,
:root[data-theme="ward"] .tq .q-text,
:root[data-theme="ward"] .flash-face.front,
:root[data-theme="ward"] .result-score .big {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.01em;
}

:root[data-theme="ward"] .hm-title { font-size: 17px; }
:root[data-theme="ward"] .tq .q-text { font-size: 19px; line-height: 1.3; }
:root[data-theme="ward"] .topbar h1 { font-size: 19px; }
:root[data-theme="ward"] .flash-face.front { font-size: 19px; line-height: 1.3; }

/* ---------- Кнопки: объём, Manrope без капса ---------- */
:root[data-theme="ward"] .btn {
  font-family: var(--font-btn);
  font-weight: 800;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  border: 2px solid var(--edge);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 5px 0 var(--edge);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

:root[data-theme="ward"] .btn:hover { filter: none; }

:root[data-theme="ward"] .btn:active {
  transform: var(--ward-press);
  box-shadow: 0 1px 0 var(--edge);
}

:root[data-theme="ward"] .btn-primary {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 5px 0 var(--accent-deep);
}

:root[data-theme="ward"] .btn-primary:active { box-shadow: 0 1px 0 var(--accent-deep); }

:root[data-theme="ward"] .btn[disabled] {
  transform: none;
  box-shadow: 0 5px 0 var(--edge);
  opacity: 0.45;
}

:root[data-theme="ward"] .btn-small { font-size: 14px; box-shadow: 0 4px 0 var(--edge); }
:root[data-theme="ward"] .btn-primary.btn-small { box-shadow: 0 4px 0 var(--accent-deep); }

/* Карточки и плитки: «приподнятый» край */
:root[data-theme="ward"] .card {
  border: 2px solid var(--edge);
  box-shadow: 0 4px 0 var(--edge);
}

:root[data-theme="ward"] .nav { border-top-width: 2px; border-top-color: var(--edge); }
:root[data-theme="ward"] .nav-item.active { color: var(--accent); background: var(--accent-soft); border-radius: 16px; }
:root[data-theme="ward"] .nav-item.active .icon { animation: ward-pop 0.45s; }

:root[data-theme="ward"] .hm-tile {
  box-shadow: 0 4px 0 rgba(22, 48, 42, 0.12);
  font-family: var(--font-btn);
  font-weight: 800;
}

:root[data-theme="ward"] .hm-stat {
  border: 2px solid var(--edge);
  box-shadow: 0 3px 0 var(--edge);
}

:root[data-theme="ward"] .hm-stat { align-items: center; text-align: center; padding: 14px 8px 12px; }
:root[data-theme="ward"] .hm-stat b { font-family: var(--font-head); font-size: 20px; font-weight: 700; }
:root[data-theme="ward"] .hm-stat .small { font-size: 11px; line-height: 1.2; }
:root[data-theme="ward"] .hm-stat .icon { width: 28px; height: 28px; }
:root[data-theme="ward"] .hm-stat-icon.fire .icon { animation: ward-flick 1.6s ease-in-out infinite; transform-origin: 50% 90%; }

/* ---------- Задание дня: зелёная плашка ---------- */
:root[data-theme="ward"] .hm-task {
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--accent-deep);
  box-shadow: 0 6px 0 var(--accent-deep);
}

:root[data-theme="ward"] .hm-task-art { color: #fff; opacity: 0.22; }
:root[data-theme="ward"] .hm-kicker { color: #ffd98a; }
:root[data-theme="ward"] .hm-task-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
:root[data-theme="ward"] .hm-task-meta { color: rgba(255, 255, 255, 0.88); }
:root[data-theme="ward"] .hm-task .seg-cell { background: rgba(0, 0, 0, 0.22); }
:root[data-theme="ward"] .hm-task .seg-cell.ok,
:root[data-theme="ward"] .hm-task .seg-cell.done { background: #ffd34d; }
:root[data-theme="ward"] .hm-go {
  background: var(--gold);
  color: var(--gold-text);
  box-shadow: 0 5px 0 var(--gold-deep);
}
:root[data-theme="ward"] .hm-go:active { box-shadow: 0 1px 0 var(--gold-deep); }

/* ---------- Полоски: упругий рост и блик ---------- */
:root[data-theme="ward"] .bar > span {
  position: relative;
  transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root[data-theme="ward"] .seg-cell { height: 8px; border-radius: 4px; transition: background 0.3s ease; }

/* ---------- Тест ---------- */
:root[data-theme="ward"] .tq .option {
  border: 2px solid var(--edge);
  border-bottom-width: 5px;
  font-weight: 600;
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
}

:root[data-theme="ward"] .tq .option:active:not([disabled]) { transform: translateY(2px); }
:root[data-theme="ward"] .tq .option.selected { border-color: var(--accent); background: var(--accent-soft); }
:root[data-theme="ward"] .tq .option.correct {
  border-color: var(--good);
  background: var(--good-bg);
  animation: ward-hop 0.5s;
}
:root[data-theme="ward"] .tq .option.wrong {
  border-color: var(--bad);
  background: var(--bad-bg);
  animation: ward-shake 0.4s;
}
:root[data-theme="ward"] .tq .option.faded { opacity: 0.5; }

:root[data-theme="ward"] .tq-fb {
  animation: ward-rise 0.38s cubic-bezier(0.2, 1.25, 0.4, 1);
}
:root[data-theme="ward"] .tq-fb.ok { background: var(--good-bg); border-color: var(--good); }
:root[data-theme="ward"] .tq-fb.no { background: var(--bad-bg); border-color: var(--bad); }
:root[data-theme="ward"] .tq-xp { background: #fff1d6; color: var(--gold-deep); animation: ward-pop 0.5s; }
:root[data-theme="ward"] .tq-main { font-size: 16px; }
:root[data-theme="ward"] .tq-actions { gap: 8px; }
:root[data-theme="ward"] .tq-actions .btn { min-width: 0; padding-inline: 8px; font-size: 14px; line-height: 1.15; text-align: center; white-space: normal; gap: 4px; }
:root[data-theme="ward"] .tq-actions .btn:first-child { flex: 0.8; }
:root[data-theme="ward"] .tq-actions .btn .icon { width: 16px; height: 16px; flex-shrink: 0; }
:root[data-theme="ward"] .tq-fb.ok + .tq-foot .btn-primary { background: var(--good); box-shadow: 0 5px 0 #17653f; }

/* ---------- Карточки ---------- */
:root[data-theme="ward"] .flash-face { border: 2px solid var(--edge); box-shadow: 0 4px 0 var(--edge); }
:root[data-theme="ward"] .flash-face.back { background: var(--accent); box-shadow: 0 5px 0 var(--accent-deep); border-color: transparent; }
:root[data-theme="ward"] .flash-actions .btn { font-size: 13px; padding-inline: 2px; }
:root[data-theme="ward"] .flash-actions .btn[data-grade="1"] { color: var(--bad); }
:root[data-theme="ward"] .flash-actions .btn[data-grade="2"] { color: var(--warn); }
:root[data-theme="ward"] .flash-actions .btn[data-grade="4"] { color: var(--accent); }
:root[data-theme="ward"] .flash-actions .btn small { color: var(--text-muted); opacity: 1; font-weight: 500; font-family: var(--font-body); }
:root[data-theme="ward"] .flash-actions .btn-primary { color: #fff; }
:root[data-theme="ward"] .flash-actions .btn-primary small { color: rgba(255, 255, 255, 0.85); }

/* ---------- Конфетти и «+XP» (js/effects.js) ---------- */
.fx-layer {
  position: absolute;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  pointer-events: none;
}

.fx-bit {
  position: absolute;
  left: 50%;
  top: 70%;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: ward-burst 1s ease-out forwards;
}

.fx-xp {
  position: absolute;
  right: 22px;
  top: 62%;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  color: var(--gold-deep);
  animation: ward-floatup 1.2s ease-out forwards;
}

@keyframes ward-pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes ward-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-8px); } 70% { transform: translateY(1px); } 100% { transform: translateY(0); } }
@keyframes ward-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes ward-rise { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ward-flick { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08, 1.12) rotate(2deg); } }
@keyframes ward-floatup { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 20% { transform: translateY(-14px) scale(1.15); opacity: 1; } 100% { transform: translateY(-90px) scale(1); opacity: 0; } }
@keyframes ward-burst { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="ward"] .tq .option.correct,
  :root[data-theme="ward"] .tq .option.wrong,
  :root[data-theme="ward"] .tq-fb,
  :root[data-theme="ward"] .tq-xp,
  :root[data-theme="ward"] .nav-item.active .icon,
  :root[data-theme="ward"] .hm-stat-icon.fire .icon { animation: none; }
  :root[data-theme="ward"] .bar > span { transition: none; }
  .fx-layer { display: none; }
}

/* ---------- Профиль: шапка и «Награды» ---------- */
.pf-card .profile-head .grow { flex: 1; min-width: 0; }
.pf-level { width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pf-level b { font-size: 13px; white-space: nowrap; }
.pf-level .bar { flex: 1; min-width: 0; width: auto; height: 10px; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pf-awards { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin-top: 12px; }
.pf-awards > b { align-self: flex-start; }
.pf-medal { width: 56px; height: 56px; color: var(--seg-off, #e6e3d6); margin-top: 6px; }

:root[data-theme="ward"] .pf-card .name { font-family: var(--font-head); font-size: 24px; font-weight: 700; }
:root[data-theme="ward"] .pf-actions .btn { font-size: 13px; padding: 0 14px; box-shadow: 0 3px 0 var(--edge); }
:root[data-theme="ward"] .pf-level .bar > span { background: var(--accent); }
:root[data-theme="ward"] .hm-stats { margin-top: 12px; }