/* event.css — китайский фестивальный стиль для вкладки «Ивент».
 * Красное/тёмно-красное/золото, монеты, аккуратно и по-мобильному.
 * Скоуп через .ev-wrap, чтобы не влиять на остальные вкладки.
 */
.ev-wrap {
  --ev-red: #b01e2e;
  --ev-red-dark: #4a0f0f;
  --ev-red-deep: #3a0b0b;
  --ev-gold: #d4af37;
  --ev-gold-lite: #ffcf4d;
  --ev-ink: #fff3e0;
  --ev-ink-muted: #e9c9a8;
  --ev-card: linear-gradient(180deg, #5c1616, #3d0d0d);
  --ev-card-soft: linear-gradient(180deg, rgba(120,26,32,.55), rgba(58,11,11,.65));
  --ev-border: rgba(212,175,55,.38);
  --ev-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ev-ink);
  /* нижний отступ, чтобы нижняя навигация не перекрывала последние дни пути */
  padding-bottom: 84px;
}

.ev-card {
  background: var(--ev-card);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius);
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,207,77,.12);
}

.ev-h {
  margin: 0 0 12px;
  font-size: 17px;
  color: var(--ev-gold-lite);
  letter-spacing: .3px;
}

.ev-wrap .muted { color: var(--ev-ink-muted); }
.ev-wrap .small { font-size: 12.5px; }

/* ---- hero ---- */
.ev-hero { text-align: center; position: relative; overflow: hidden; }
.ev-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% -10%, rgba(255,207,77,.25), transparent 60%);
  pointer-events: none;
}
.ev-lanterns { font-size: 30px; display: flex; justify-content: center; gap: 20px; margin-bottom: 6px; }
.ev-lanterns span { animation: ev-sway 3.2s ease-in-out infinite; }
.ev-lanterns span:nth-child(2) { animation-delay: .5s; font-size: 34px; }
.ev-lanterns span:nth-child(3) { animation-delay: 1s; }
@keyframes ev-sway { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(3px) rotate(4deg); } }
.ev-title { margin: 4px 0; font-size: 22px; color: var(--ev-gold-lite); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.ev-desc { margin: 4px 0 10px; color: var(--ev-ink-muted); }
.ev-daychip {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ev-gold), var(--ev-gold-lite));
  color: #3a0b0b;
  font-weight: 700;
  font-size: 13px;
}
.ev-lantern { font-size: 40px; }
.ev-loading { text-align: center; }

/* ---- balance ---- */
.ev-balance { display: flex; align-items: center; gap: 14px; }
.ev-coin {
  font-size: 34px;
  filter: drop-shadow(0 2px 6px rgba(212,175,55,.5));
  animation: ev-spin 6s linear infinite;
}
@keyframes ev-spin { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.ev-balance-main { flex: 1; display: flex; flex-direction: column; }
.ev-balance-side { text-align: right; display: flex; flex-direction: column; }
.ev-balance-label { font-size: 11.5px; color: var(--ev-ink-muted); text-transform: uppercase; letter-spacing: .5px; }
.ev-balance-value { font-size: 26px; font-weight: 800; color: var(--ev-gold-lite); }
.ev-balance-side strong { font-size: 16px; color: var(--ev-ink); }

/* ---- twitch ---- */
.ev-twitch.linked { border-color: rgba(145,70,255,.5); }
.ev-tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(212,175,55,.18);
  color: var(--ev-gold-lite);
  margin-bottom: 4px;
}
.ev-row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ev-row-between strong { display: block; margin-top: 2px; }

/* ---- Twitch: два способа привязки + код в чате ---- */
.ev-twitch-methods { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; }
@media (min-width: 480px) { .ev-twitch-methods { grid-template-columns: 1fr 1fr; } }
.ev-method {
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(145,70,255,.28);
  border-radius: 13px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ev-method-h { font-weight: 700; color: var(--ev-gold-lite); font-size: 13.5px; }
.ev-method .ev-btn { margin-top: auto; }
.ev-twitch-code { border-color: rgba(145,70,255,.5); }
.ev-code-box {
  margin: 10px 0 6px;
  display: flex;
  justify-content: center;
}
.ev-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 10px;
  padding: 10px 18px 10px 28px;
  border-radius: 14px;
  color: var(--ev-red-dark);
  background: linear-gradient(180deg, var(--ev-gold-lite), var(--ev-gold));
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.ev-code-timer { text-align: center; margin: 4px 0 8px; color: var(--ev-ink-muted); font-size: 13px; }
.ev-code-timer b { color: var(--ev-gold-lite); }

/* ---- buttons ---- */
.ev-btn {
  border: none;
  border-radius: 14px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--ev-gold), var(--ev-gold-lite));
  color: #3a0b0b;
  transition: transform .08s ease, filter .15s ease;
}
.ev-btn:active { transform: scale(.96); }
.ev-btn:disabled { opacity: .5; filter: grayscale(.3); cursor: not-allowed; }
.ev-btn.ghost { background: transparent; border: 1px solid var(--ev-border); color: var(--ev-ink); }
.ev-btn.warn { background: linear-gradient(135deg, #e05a3a, #ff8a4a); color: #2a0808; }
.ev-btn.small { padding: 7px 12px; font-size: 12.5px; border-radius: 11px; }

/* ---- quests ---- */
/* ---- Дорожка заданий: извилистый вертикальный путь с точками-днями. ----
 * Структура вдохновлена синим референсом, но палитра — китайская красно-золотая.
 * Осевая линия рисуется как золотой пунктир по центру контейнера; точки-дни
 * смещены влево/вправо зигзагом. Подписи закрытых дней не раскрывают условия. */
.ev-path-hint { margin: -4px 0 14px; }
.ev-path {
  position: relative;
  padding: 6px 0 10px;
}
.ev-path::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 0;
  border-left: 3px dashed rgba(212,175,55,.45);
  transform: translateX(-50%);
}
.ev-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 50%;
  min-height: 64px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ev-node.left  { margin-right: auto; flex-direction: row-reverse; text-align: right; padding-right: 14px; }
.ev-node.right { margin-left: auto; flex-direction: row; text-align: left; padding-left: 14px; }
.ev-dot {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px;
  color: var(--ev-red-dark);
  background: radial-gradient(circle at 35% 30%, var(--ev-gold-lite), var(--ev-gold));
  border: 3px solid var(--ev-red-dark);
  box-shadow: 0 0 0 3px rgba(212,175,55,.35), 0 6px 16px rgba(0,0,0,.4);
  position: relative; z-index: 2;
  transition: transform .15s ease, box-shadow .15s ease;
}
/* точка стоит на осевой линии: сдвигаем её к центру контейнера */
.ev-node.left  .ev-dot { margin-right: -37px; }
.ev-node.right .ev-dot { margin-left: -37px; }
.ev-node:hover .ev-dot,
.ev-node:focus-visible .ev-dot { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(255,207,77,.5), 0 8px 20px rgba(0,0,0,.5); outline: none; }
.ev-node:focus-visible { outline: none; }
.ev-node-label { display: flex; flex-direction: column; gap: 2px; max-width: calc(100% - 60px); }
.ev-node-title { font-weight: 700; font-size: 14px; color: var(--ev-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* состояния */
.ev-node.locked .ev-dot {
  background: rgba(0,0,0,.3);
  color: var(--ev-ink-muted);
  border-color: rgba(212,175,55,.3);
  box-shadow: 0 0 0 3px rgba(212,175,55,.14), 0 4px 12px rgba(0,0,0,.35);
}
.ev-node.locked { cursor: pointer; opacity: .92; }
.ev-node.locked .ev-node-title { color: var(--ev-ink-muted); }
.ev-node.done .ev-dot {
  background: radial-gradient(circle at 35% 30%, #b8f0b8, #4bbf6b);
  border-color: #256b3a;
  color: #10331c;
}

/* прогресс-бар (используется и в модалке дня) */
.ev-bar { height: 8px; border-radius: 999px; background: rgba(0,0,0,.35); overflow: hidden; }
.ev-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ev-gold), var(--ev-gold-lite)); transition: width .4s ease; }
.ev-quest-nums { text-align: right; margin-top: 4px; }
.ev-quest-badge { font-size: 12px; font-weight: 700; color: #9ff09f; }

/* модалка задания дня */
.ev-modal { color: var(--ev-ink); }
.ev-modal-day { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ev-ink-muted); margin-bottom: 4px; }
.ev-modal h2 { margin: 0 0 8px; color: var(--ev-gold-lite); font-size: 18px; }
.ev-modal-status { margin-bottom: 8px; }
.ev-quest-open { font-size: 12px; font-weight: 700; color: var(--ev-gold-lite); }
.ev-modal-metric { margin: 4px 0 8px; color: var(--ev-ink-muted); font-size: 13px; }
.ev-modal-reward { margin-top: 10px; font-size: 14px; }
.ev-modal-reward strong { color: var(--ev-gold-lite); }
.ev-lock-big { font-size: 34px; text-align: center; margin: 6px 0; opacity: .85; }
.ev-chat-link {
  display: inline-block; margin-top: 12px;
  padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(90deg, var(--ev-gold), var(--ev-gold-lite));
  color: var(--ev-red-dark); font-weight: 700; text-decoration: none;
}
.ev-chat-link:hover { filter: brightness(1.05); }

/* ---- leaderboards ---- */
.ev-lb-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 460px) { .ev-lb-grid { grid-template-columns: 1fr 1fr; } }
.ev-lb-card { background: var(--ev-card-soft); border: 1px solid var(--ev-border); border-radius: 14px; padding: 12px; }
.ev-lb-title { font-weight: 700; font-size: 13.5px; color: var(--ev-gold-lite); margin-bottom: 8px; }
.ev-lb-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(212,175,55,.12); }
.ev-lb-row:last-child { border-bottom: none; }
.ev-lb-rank { width: 24px; text-align: center; font-weight: 700; }
.ev-lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-lb-val { font-weight: 700; color: var(--ev-gold-lite); }
.ev-winners { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ev-border); }

/* ---- shop ---- */
.ev-shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ev-shop-item {
  background: var(--ev-card-soft);
  border: 1px solid var(--ev-border);
  border-radius: 15px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ev-shop-item.soldout { opacity: .6; }
.ev-shop-img { width: 100%; height: 96px; object-fit: cover; border-radius: 11px; }
.ev-shop-name { font-weight: 700; font-size: 14.5px; }
.ev-shop-meta { margin: 2px 0; }
.ev-shop-item .ev-btn { margin-top: auto; }
.ev-shop-closed p { margin: 4px 0 0; }

/* ---- admin ---- */
.ev-admin { border-color: rgba(255,138,74,.4); }
.ev-acc { border: 1px solid var(--ev-border); border-radius: 13px; margin-bottom: 8px; overflow: hidden; }
.ev-acc summary { padding: 11px 14px; cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--ev-gold-lite); list-style: none; }
.ev-acc summary::-webkit-details-marker { display: none; }
.ev-acc summary::before { content: "▸ "; }
.ev-acc[open] summary::before { content: "▾ "; }
.ev-acc > .ev-form, .ev-acc > div { padding: 0 14px 14px; }
.ev-form { display: flex; flex-direction: column; gap: 9px; padding: 0 14px 14px; }
.ev-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ev-ink-muted); }
.ev-form-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 10px; }
.ev-form-row .ev-input { flex: 1; min-width: 90px; }
.ev-input {
  background: rgba(0,0,0,.28);
  border: 1px solid var(--ev-border);
  border-radius: 10px;
  padding: 9px 11px;
  color: var(--ev-ink);
  font-size: 13.5px;
  width: 100%;
}
.ev-input.tiny { max-width: 74px; }
textarea.ev-input { min-height: 54px; resize: vertical; }
.ev-check { flex-direction: row !important; align-items: center; gap: 6px; }
.ev-check.tiny { font-size: 11.5px; }

.ev-adm-quests { display: flex; flex-direction: column; gap: 7px; padding: 0 14px 14px; }
.ev-adm-quest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: rgba(0,0,0,.2); padding: 8px; border-radius: 11px; }
.ev-adm-qday { font-weight: 700; font-size: 12px; color: var(--ev-gold-lite); min-width: 26px; }
.ev-adm-quest .ev-input { flex: 1; min-width: 70px; width: auto; }

.ev-adm-lbs { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 8px; }
.ev-adm-lb-cat { font-size: 12px; color: var(--ev-ink-muted); margin-bottom: 4px; }
.ev-adm-lb-inputs { display: flex; gap: 6px; align-items: center; }
.ev-adm-lb-inputs .ev-input { max-width: 70px; }

.ev-table-wrap { overflow-x: auto; }
.ev-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ev-table th, .ev-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid rgba(212,175,55,.15); }
.ev-table th { color: var(--ev-gold-lite); }

/* ---- статус счётчика (админка) ---- */
.ev-status { padding-top: 4px; }
.ev-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ev-status-grid > div { background: rgba(0,0,0,.22); border: 1px solid rgba(212,175,55,.2); border-radius: 10px; padding: 7px 9px; display: flex; flex-direction: column; gap: 2px; }
.ev-status-grid b { color: var(--ev-ink); font-size: 13px; }
.ev-status-err { background: rgba(120,20,20,.5); border: 1px solid rgba(255,120,120,.4); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; color: #ffd7d7; font-size: 12.5px; }
.ev-status-tops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; font-size: 12.5px; }
.ev-status-h { font-weight: 700; color: var(--ev-gold-lite); margin: 6px 0 4px; font-size: 12.5px; }

/* ---- twitch blacklist (админка) ---- */
.ev-bl-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ev-bl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(0,0,0,.22); border: 1px solid rgba(212,175,55,.2); border-radius: 10px; padding: 7px 9px; }
.ev-bl-row.off { opacity: .6; }
.ev-bl-who { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.ev-bl-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* светлая тема: слегка приглушаем, но фестиваль остаётся тёмно-красным */
:root[data-theme="light"] .ev-wrap { --ev-ink: #fff3e0; }