/* Каталог «Истории»: вкладки жанров и сетка карточек. Палитра — из party.css. */

.st-page { max-width: 1240px; margin: 0 auto; padding: 28px 20px 80px; }
.st-page [hidden] { display: none !important; }

.st-hero { max-width: 760px; margin: 10px 0 26px; }
.st-hero h1 { margin: 10px 0 10px; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.02em; }
.st-hero p { margin: 0; color: var(--party-muted, #aaa49b); font-size: 17px; line-height: 1.55; }

.st-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.st-tab {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 0 16px;
    border-radius: 999px; border: 1px solid var(--party-line, rgba(255,255,255,.1));
    background: rgba(255, 255, 255, .04); color: var(--party-ink, #f8f4ed);
    font: 600 15px/1 inherit; font-family: inherit; cursor: pointer;
    transition: background .2s, border-color .2s;
}
.st-tab span { color: var(--party-faint, #7d7a75); font-size: 13px; }
.st-tab:hover { background: rgba(255, 255, 255, .08); }
.st-tab.is-on { background: var(--party-accent, #f47735); border-color: transparent; color: #1d0e05; }
.st-tab.is-on span { color: rgba(29, 14, 5, .7); }

.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }

.st-card {
    display: flex; flex-direction: column;
    border-radius: var(--party-radius, 22px); overflow: hidden;
    border: 1px solid var(--party-line, rgba(255,255,255,.1));
    background: var(--party-panel, #111318);
    transition: transform .25s ease, border-color .25s;
}
.st-card[hidden] { display: none; }
.st-card:hover { transform: translateY(-3px); border-color: rgba(255, 217, 154, .3); }

.st-card__art { position: relative; display: block; aspect-ratio: 2 / 3; background: #15161b; overflow: hidden; }
.st-card__art img, .st-card__art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-card__art video { opacity: 0; transition: opacity .35s ease; }
.st-card__art video.is-on { opacity: 1; }
.st-card__ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 72px; font-weight: 800; color: rgba(255, 217, 154, .28);
    background: radial-gradient(circle at 50% 35%, rgba(244, 119, 53, .18), transparent 65%);
}
.st-card__badge {
    position: absolute; left: 12px; top: 12px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(10, 10, 12, .8); border: 1px solid rgba(255, 217, 154, .45);
    color: var(--party-gold, #ffd99a); font-size: 12px; font-weight: 700;
}

.st-card__lock {
    position: absolute; left: 8px; bottom: 8px; padding: 5px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    background: rgba(10, 9, 8, .82); color: var(--party-gold, #ffd99a);
    border: 1px solid rgba(255, 217, 154, .35);
}
.st-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 16px 18px; }
.st-card__meta { font-size: 12.5px; color: var(--party-faint, #7d7a75); text-transform: lowercase; }
.st-card h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.st-card h2 a { color: inherit; text-decoration: none; }
.st-card p {
    margin: 0; color: var(--party-muted, #aaa49b); font-size: 14px; line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden;
}
.st-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.st-card__actions .party-button { flex: 1; justify-content: center; min-width: 110px; }

/* На телефоне — одна карточка в ряд: обложки вертикальные, а видеообложка
   в половине ширины не читается, да и вторая колонка успевала показать только
   статичное фото. Широкая карточка кладёт обложку и текст рядом. */
@media (max-width: 640px) {
    .st-page { padding: 18px 14px 60px; }
    .st-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .st-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); }
    .st-card__art { aspect-ratio: 2 / 3; height: 100%; }
    .st-card__body { padding: 12px 14px 14px; }
    .st-card h2 { font-size: 18px; }
    .st-card p { -webkit-line-clamp: 3; line-clamp: 3; font-size: 13px; }
    .st-card__actions .party-button { min-width: 0; padding-inline: 12px; }
}

@media (max-width: 380px) {
    .st-card { grid-template-columns: 112px minmax(0, 1fr); }
    .st-card__actions .party-button--ghost { display: none; }
}

/* ── Игровой центр: полоса кошелька, вкладки, задания, Фортуна, сезон ── */

.hub-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 0 0 16px; padding: 12px; border-radius: 18px;
    background: var(--party-panel, #111318); border: 1px solid var(--party-line, rgba(255,255,255,.1));
}
.hub-stat {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: 12px;
    background: rgba(255,255,255,.04); color: var(--party-muted, #aaa49b); font-size: 14px;
}
.hub-stat b { color: var(--party-ink, #f8f4ed); font-size: 17px; }
.hub-stat small { color: var(--party-faint, #7d7a75); font-variant-numeric: tabular-nums; }
.hub-stat--muted { color: var(--party-faint, #7d7a75); }
.hub-stat--season { position: relative; overflow: hidden; min-width: 170px; padding-bottom: 12px; }
.hub-stat--season b { font-size: 14px; }
.hub-stat--season i, .hub-bar i {
    position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p, 0%);
    background: linear-gradient(90deg, var(--party-accent, #f47735), #ffa047);
}
.hub-daily { margin-left: auto; }

.hub-note { margin: 0 0 14px; padding: 11px 14px; border-radius: 14px; font-size: 14px; background: rgba(255,255,255,.05); }
.hub-note.is-good { border: 1px solid rgba(113,217,148,.5); }
.hub-note.is-bad { border: 1px solid rgba(241,115,105,.5); }

.hub-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--party-line, rgba(255,255,255,.1)); }
.hub-tab {
    min-height: 40px; padding: 0 16px; border-radius: 12px; border: 0;
    background: transparent; color: var(--party-muted, #aaa49b);
    font: 700 15px/1 inherit; font-family: inherit; cursor: pointer;
}
.hub-tab:hover { color: var(--party-ink, #f8f4ed); background: rgba(255,255,255,.05); }
.hub-tab.is-on { color: var(--party-ink, #f8f4ed); background: rgba(244,119,53,.18); }

.hub-hint { color: var(--party-faint, #7d7a75); font-size: 14px; line-height: 1.5; }
.hub-lead { color: var(--party-muted, #aaa49b); font-size: 15px; line-height: 1.55; margin: 0 0 14px; }
.hub-guest { max-width: 560px; padding: 22px; border-radius: 18px; background: var(--party-panel, #111318); border: 1px solid var(--party-line, rgba(255,255,255,.1)); }
.hub-guest p { margin: 0 0 14px; color: var(--party-muted, #aaa49b); line-height: 1.55; }
.hub-done { color: #71d994; font-weight: 700; font-size: 14px; }
.hub-lock, .hub-progress-num { color: var(--party-faint, #7d7a75); font-size: 13.5px; font-variant-numeric: tabular-nums; }

.hub-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.hub-task {
    display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px;
    background: var(--party-panel, #111318); border: 1px solid var(--party-line, rgba(255,255,255,.1));
}
.hub-task.is-claimed { opacity: .6; }
.hub-task__head { display: flex; justify-content: space-between; gap: 8px; }
.hub-task__head span { color: var(--party-gold, #ffd99a); font-size: 13.5px; white-space: nowrap; }
.hub-bar { position: relative; height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.hub-bar i { top: 0; height: 100%; border-radius: 6px; }
.hub-task .party-button { align-self: flex-start; }

.hub-fortune { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.hub-reel {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px; border-radius: 22px;
    background: radial-gradient(circle at 50% 30%, rgba(244,119,53,.2), transparent 70%), var(--party-panel, #111318);
    border: 1px solid rgba(255,217,154,.25);
}
.hub-reel span {
    display: flex; align-items: center; justify-content: center; min-height: 74px; padding: 8px; border-radius: 14px;
    background: rgba(255,255,255,.05); text-align: center; font-weight: 700; font-size: 14px; color: var(--party-gold, #ffd99a);
}
.hub-reel.is-spinning span { animation: hub-blink .18s steps(2) infinite; }
.hub-reel.is-spinning span:nth-child(2n) { animation-delay: .09s; }
@keyframes hub-blink { 50% { background: rgba(244,119,53,.35); color: #fff; } }
.hub-fortune__side p { margin: 0 0 10px; color: var(--party-muted, #aaa49b); line-height: 1.5; }
.hub-prize { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(113,217,148,.12); border: 1px solid rgba(113,217,148,.45); font-weight: 800; font-size: 18px; }
.hub-prize.is-empty { background: rgba(255,255,255,.05); border-color: var(--party-line, rgba(255,255,255,.1)); color: var(--party-muted, #aaa49b); }

.hub-season { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hub-level {
    display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px; border-radius: 16px;
    background: var(--party-panel, #111318); border: 1px solid var(--party-line, rgba(255,255,255,.1)); opacity: .6;
}
.hub-level b { font-size: 26px; line-height: 1; color: var(--party-faint, #7d7a75); }
.hub-level span { font-size: 13.5px; color: var(--party-muted, #aaa49b); }
.hub-level.is-reached { opacity: 1; border-color: rgba(255,217,154,.35); }
.hub-level.is-reached b { color: var(--party-gold, #ffd99a); }
.hub-level.is-claimed { opacity: .55; }

.hub-top { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hub-top h3 { margin: 0 0 10px; font-size: 16px; }
.hub-leaders { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hub-leaders li {
    display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
    background: var(--party-panel, #111318); border: 1px solid var(--party-line, rgba(255,255,255,.1));
}
.hub-leaders li.is-me { border-color: rgba(244,119,53,.6); }
.hub-leaders li > span:last-child { color: var(--party-faint, #7d7a75); font-size: 13px; text-align: right; }
.hub-leaders a { color: inherit; text-decoration: none; }
.hub-place { font-weight: 800; color: var(--party-gold, #ffd99a); }

.st-card__rate { margin-left: 6px; color: var(--party-gold, #ffd99a); font-weight: 700; }

@media (max-width: 760px) {
    .hub-fortune, .hub-top { grid-template-columns: 1fr; }
    .hub-daily { margin-left: 0; width: 100%; justify-content: center; }
    .hub-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .hub-tab { flex: none; }
}

/* Плашка «В процессе» стояла сверху и закрывала название на обложке. */
.st-card__badge { top: auto; bottom: 12px; }

/* ── Полоса игрового центра на странице истории ── */
.st-hubline {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px;
    max-width: 1240px; margin: 8px auto 26px; padding: 0 20px;
}
.st-hubline a.is-hot { border-color: rgba(255,217,154,.45); box-shadow: inset 0 0 0 1px rgba(255,217,154,.12); }
.st-hubline a.is-hot b::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: #ffb057; vertical-align: 2px; }
/* На главной полоса стоит внутри первого экрана — без своих отступов. */
.hero .st-hubline { padding: 0; margin: 18px 0 8px; max-width: none; text-align: left; }
.st-hubline a {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px;
    background: var(--party-panel, #111318); border: 1px solid var(--party-line, rgba(255,255,255,.1));
    color: inherit; text-decoration: none; transition: border-color .2s, transform .2s;
}
.st-hubline a:hover { border-color: rgba(255,217,154,.4); transform: translateY(-2px); }
.st-hubline b { font-size: 15px; }
.st-hubline span { font-size: 13px; color: var(--party-muted, #aaa49b); }
.st-hubline--guest {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    padding: 14px 18px; border-radius: 16px; background: var(--party-panel, #111318); border: 1px solid var(--party-line, rgba(255,255,255,.1));
    max-width: 1200px;
}
.st-hubline--guest span { color: var(--party-muted, #aaa49b); font-size: 14px; }
@media (max-width: 600px) { .st-hubline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Своё место в сезоне: чужих имён в рейтинге больше нет. */
.hub-mine {
    display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center;
    padding: 16px 18px; border-radius: 18px;
    border: 1px solid rgba(255, 217, 154, .22); background: rgba(255, 217, 154, .06);
}
.hub-mine b { grid-row: 1 / 3; font-size: 40px; line-height: 1; color: var(--party-gold, #ffd99a); }
.hub-mine span { font-weight: 600; }
.hub-mine small { color: var(--party-faint, #8d887f); font-size: 13px; }

/* Игровой центр в профиле: отступ сверху, чтобы не липнул к шапке. */
.profile-hub { margin: 0 0 22px; }