/* Общий фон страницы */
body {
    background-color: #000000;
    /* полностью чёрный фон */
    color: #ffffff;
    /* белый текст */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

html,
body {
    height: 100%;
    margin: 0;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 90px;
}

/* PWA-safe app shell: prevent long-press text selection and context menu on UI elements.
   Text inputs and contenteditable areas remain selectable. */
#app,
#app * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

#app button,
#app [role="button"],
#app .tab-btn,
#app .file-button,
#app .log-card,
#app .imprint-item,
#app .achievement-item,
#app .path-card,
#app .manual-calendar-day,
#app .calendar-day {
    touch-action: manipulation;
}

/* Drag handles own the touch gesture; keep this more specific than #app button
   so browser scrolling cannot cancel pointer-based reordering. */
#app .path-row-drag-handle,
#app .direction-card-drag-handle {
    touch-action: none;
}

#app input,
#app textarea,
#app select,
#app [contenteditable="true"],
#app .selectable-text,
#app .text-selectable,
#app .path-overlay-textarea,
#app .manual-time-input,
#app .manual-calendar-header input,
#app .manual-date-btn input {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

#tabsContent {
    flex: none;
    display: block;
}

/* только для основных табов */
#tabsContent .tab-content {
    display: none;
}

.tab-content {
    overflow-y: auto;
}

.app-header {
    padding-left: 8px;
    padding-bottom: 10px;
    padding-top: 10px;

    font-size: 28px;
    font-weight: bold;

    color: #fff;
}

/* Показываем первую вкладку по умолчанию через CSS */
#beginPathTab {
    display: flex;
    flex-direction: column;
    align-items: center;

    justify-content: flex-start;

    padding-top: 5px;
    /* 🔥 регулирует высоту всего блока */

    box-sizing: border-box;
}

/* Основные вкладки (Begin Path, Life Paths, Moments) */
.tabs-main {
    display: flex;
    gap: 10px;
    /* расстояние между вкладками */
    flex-wrap: wrap;
    /* чтобы не появлялся горизонтальный скролл на узких экранах */
    margin-bottom: 20px;
    /* оставляем как было */
}

/* =========================
   Отдельный блок для Settings
========================= */
.tabs-settings {
    display: flex;
    gap: 10px;
    /* расстояние между вкладками */
    flex-wrap: wrap;
    /* чтобы не появлялся горизонтальный скролл на узких экранах */
    margin-bottom: 20px;
    /* оставляем как было */
}

.settings-block {
    margin-top: 2px;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-title {
    margin-left: 6px;
    font-size: 16px;
    font-weight: 500;
    opacity: 0.9;
}

.settings-subtitle {
    margin-left: 6px;
    font-size: 12px;
    opacity: 0.6;
}

.settings-channels-block {
    margin-top: 0;
    padding-top: 2px;
}

.settings-channels-title {
    margin-left: 0;
    text-align: center;
}

.settings-channels {
    display: flex;
    gap: 8px;
    margin: 0 8px;
}

.settings-channels .file-button {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    box-sizing: border-box;
    gap: 10px;
    margin: 0;
    text-decoration: none;
}

.settings-channels img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.settings-credits {
    margin: 10px 6px 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.7);
}

.settings-credits > div:first-child {
    margin-bottom: 4px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
}

.settings-credits > div:not(:first-child) {
    font-style: italic;
}

.settings-credits > div:last-child {
    margin-top: 4px;
}


#exportBackupBtn {
    display: flex;
    justify-content: center;
    margin-left: 6px;
}

/* Hover эффект (мягкий, как у системной кнопки) */
#exportBackupBtn:hover,
.file-button:hover,
#pathButtons button:hover,
.path-overlay-action-btn:hover,
.manual-calendar-header button:hover,
.manual-calendar-day:hover,
#manualDateLabel.tab-btn:hover,
.manual-date-btn:hover,
#addManualBtnConfirm:hover,
.log-edit-btn:hover,
.calendar-day:hover,
.path-details-ok-btn:hover,
.avatar-gender-btn:hover,
.imprint-edit-btn:hover,
#saveArtifactBtn:hover,
#saveAchievementBtn:hover,
.primary-btn:hover,
#okBtn:hover {
    opacity: 1;
    background: #36E08A;
    color: #000;
}

/* кастомная кнопка как Save Backup */
.file-button {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #222121;
    color: rgb(255, 255, 255);
    font-family: Arial, sans-serif;
    font-size: 13px;
    margin-left: 8px;
    margin-right: 8px;
    padding: 10px;

    margin-top: 8px;

    cursor: pointer;

    border-radius: 6px;

    transition: all 0.15s ease;
}

/* статус файла */
.file-status {
    text-align: center;
    font-style: italic;
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.7;
}

/* =========================
   Tab Headers Style
========================= */
.tab-headers-style {
    margin: 4px 8px 8px 8px;
    font-size: 22px;
    font-weight: bold;
}

/* Кнопки вкладок */
.tab-btn {
    background-color: #111111;
    /* чуть светлее фона страницы */
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.2s;
    flex: 1 1 auto;
    /* кнопки растягиваются по ширине */
    text-align: center;
}

.tab-btn.active {
    background-color: #36E08A;
    /* зелёная подсветка активной вкладки */
    color: #000000;
    /* читается на зелёном фоне */
}

/* =========================
   INPUT SYMBOLS COUNTERS
========================= */
.input-counter {
    font-size: 12px;
    opacity: 0.6;
    text-align: right;
    margin-top: 0px;
    padding-right: 4px;
}

#achievementDescCounter,
#artifactDescCounter,
#manualSessionCommentCounter,
#directionCommentCounter,
#editDirectionCommentCounter,
#sessionCommentCounter {
    margin-top: 10px;
}

.input-counter.warning {
    opacity: 1;
    color: #ffcc66;
}

.input-counter.limit {
    opacity: 1;
    color: #ff6666;
}

.hidden {
    display: none !important;
}

/* =========================
   BEGIN PATH TAB
========================= */
/* Контейнер для кнопок */
#beginPathCircle #pathSelector {
    font-size: 15px;
    width: 72%;
    min-width: unset;

    text-align: center;
    margin-top: 26px;
    padding: 10px 12px;
}

#beginPathCircle {
    width: clamp(270px, 45vw, 340px);
    height: clamp(270px, 45vw, 340px);

    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;

    background: #121212;
    border: 1px solid rgba(255, 255, 255, 0.151);

    border-radius: 50%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 12px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

    position: relative;

    padding: 20px;
}

.begin-path-mode-switch {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    width: 220px;

    margin: 4px auto 14px auto;

    padding: 3px;

    border-radius: 999px;

    background: #1b1b1b;

    overflow: hidden;
}

.begin-path-mode-switch::before {
    content: "";

    position: absolute;

    top: 3px;
    bottom: 3px;
    left: 3px;

    width: calc(50% - 3px);

    border-radius: 999px;

    background: #3DDC84;

    transition: transform 0.22s ease;
}

.begin-path-mode-switch.timer-active::before {
    transform: translateX(100%);
}

.begin-path-mode-btn {
    position: relative;

    width: 100%;

    z-index: 1;

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;

    border: none;

    background: transparent !important;

    color: rgba(255, 255, 255, 0.80);

    font-size: 14px;
    font-weight: 700;

    padding: 10px 16px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.begin-path-mode-btn.active {
    color: #111;
}

.begin-path-mode-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

#pathPicker {
    margin-top: 12px;
}

.begin-path-display {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#beginPathReadout {
    font-size: 45px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 1.1;

    margin-top: 20px;
    margin-bottom: 10px;
}

.timer-input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.timer-segment-input {
    width: 74px;
    padding: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.timer-segment-input:focus {
    border-color: rgba(54, 224, 138, 0.7);
    background: rgba(54, 224, 138, 0.08);
}

.timer-separator {
    font-size: 34px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.82);
}

#expDisplay {
    font-size: 16px;
    opacity: 0.85;

    margin-bottom: auto;
    letter-spacing: 0.3px;
    margin-bottom: 12px;
}

#pathButtons {
    display: flex;
    gap: 14px;
    margin-top: auto;
    /* 🔥 уводит вниз круга */
    padding-bottom: 18px;
}

#pathButtons button {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.151);
    border-radius: 12px;

    color: white;
    font-weight: 500;
    font-size: 15px;

    padding: 8px 14px;

    cursor: pointer;
    transition: 0.2s;

    min-width: 50px;
}

/* =========================
   Timer Screen Warning
========================= */
.timer-screen-warning {
    margin: 14px auto 0px;

    color: rgba(255, 255, 255, 0.45);

    font-size: 11px;
    line-height: 1.4;

    font-style: oblique 6deg;

    text-align: center;
}

.timer-screen-warning.hidden {
    display: none;
}

/* =========================
   Dayli Limit Text
========================= */
.daily-log-limit-text p {

    margin: 0;

}


.daily-log-limit-text p+p {

    margin-top: 10px;

}

#dailyLogLimitAction {
    margin-top: 4px;
}

/* =========================
   Settings
========================= */
.settings-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    width: 100%;
}

.settings-title {
    flex: 1;
}

.settings-toggle {
    display: flex;

    align-items: center;

    width: fit-content;

    flex-shrink: 0;

    margin-right: 10px;

    cursor: pointer;

    user-select: none;
}

.settings-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-toggle-track {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #252525;
    transition: background 0.2s ease;
}

.settings-toggle-thumb {
    position: absolute;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
}

.settings-toggle input:checked+.settings-toggle-track {
    background: #36E08A;
}

.settings-toggle input:checked+.settings-toggle-track .settings-toggle-thumb {
    transform: translateX(22px);
}

#sessionComment:focus {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

/* Контейнер комментария */
#commentContainer {
    margin-top: 10px;
    display: flex;
    white-space: pre-wrap;
    flex-direction: column;
    width: 100%;
    position: relative;

}

/* линия-переход к Directions */
#commentContainer::after {
    content: "";

    position: absolute;

    bottom: -6px;
    left: 50%;

    transform: translateX(-50%);

    width: 68%;

    height: 1px;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.10),
            transparent);

    pointer-events: none;
}

.begin-path-directions-btn {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

    margin: 16px auto 10px auto;

    padding: 13px 22px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    color:
        rgba(255, 255, 255, 0.88);

    font-size: 14px;
    font-weight: 500;

    letter-spacing: 0.02em;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

/* textarea уже у тебя есть, можно чуть расширить */
#sessionComment {
    width: 100%;
    max-width: none;
    height: 80px;

    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;

    color: white;
    font-size: 13px;
    padding: 12px 14px;

    resize: none;
    outline: none;

    transition: border 0.2s ease, background 0.2s ease;

    box-sizing: border-box;
}

/* 🔥 FLOATING ADD SESSION BUTTON */
#addManualBtn,
#tutorialArchiveBtn {
    position: fixed;

    bottom: 95px;

    width: 40px;
    height: 40px;

    border-radius: 50%;
    border: none;

    background: linear-gradient(135deg, #2a2a2a, #1f1f1f);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);

    z-index: 1100;

    transition: transform 0.2s, box-shadow 0.2s;
}

#addManualBtn {
    right: 18px;
}

#tutorialArchiveBtn {
    left: 18px;
    padding: 0;
}

#coreSubTab #tutorialArchiveBtn {
    left: auto;
    right: 18px;
}

#tutorialArchiveBtn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: inherit;
}

.tutorial-archive-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #3ddc84;
    color: #07140c;
    border: 2px solid #111;
    font: bold 11px/14px Arial, sans-serif;
    text-align: center;
    pointer-events: none;
}

.tutorial-archive-badge[hidden] { display: none; }

#backupRiskBadge {
    position: static;
    flex-shrink: 0;
    align-self: center;
    margin-left: 4px;
}

#bottomNav .nav-btn,
#relicTab [data-tab="coreSubTab"] {
    position: relative;
}

#bottomNav .tutorial-archive-badge,
#coreTutorialBadge {
    z-index: 2;
    top: 0;
    right: 0;
}

.tutorial-archive-start {
    position: absolute;
    top: 8px;
    right: 6px;
}

.tutorial-archive-entry { position: relative; margin: 12px 0; }
#tutorialArchiveList .tutorial-archive-entry > details { margin: 0; }
#tutorialArchiveList .tutorial-archive-entry-has-start > details > summary {
    padding-right: 100px;
    min-height: 26px;
    line-height: 26px;
}

.tutorial-archive-start:disabled { opacity: .65; cursor: default; }

.tutorial-conditions { margin: 12px 0; }
.tutorial-condition-row,
.tutorial-mastery-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: baseline;
    gap: 12px;
}
.tutorial-condition-row > span:last-child,
.tutorial-mastery-heading > span:last-child { text-align: center; }
.tutorial-conditions > .tutorial-condition-row { padding-inline-start: 24px; }
#tutorialArchiveList details.tutorial-mastery {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
}
#tutorialArchiveList .tutorial-mastery > summary {
    position: relative;
    display: block;
    list-style: none;
    padding-inline-start: 24px;
}
.tutorial-mastery > summary::-webkit-details-marker { display: none; }
.tutorial-mastery > summary::before {
    content: '▸';
    position: absolute;
    inset-inline-start: 0;
    width: 18px;
    text-align: center;
}
.tutorial-mastery[open] > summary::before { content: '▾'; }
.tutorial-mastery-task { margin: 10px 0 10px 42px; }

#addPathOverlayBtn {
    position: fixed;

    right: 8px;
    bottom: 80px;

    width: 40px;
    height: 40px;

    border-radius: 100%;

    background: linear-gradient(135deg, #00FF6A, #3DDC84);

    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.45);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 1100;

    transition: transform 0.2s, box-shadow 0.2s;
}

#addManualBtn img {
    width: 20px;
    height: 20px;

    transition: transform 0.2s, filter 0.2s;

    filter:
        brightness(0) saturate(100%) invert(74%) sepia(32%) saturate(700%) hue-rotate(95deg) brightness(1.0) contrast(1.0);
}

#addPathOverlayBtn img {
    width: 20px;
    height: 20px;

    transition: transform 0.2s, filter 0.2s;

    filter: brightness(0) invert(15%);
}

#addManualBtn:hover,
#addPathOverlayBtn:hover {
    transform: scale(1.08);
}

#addPathOverlayBtn:hover img {
    transform: scale(1.12);
}

#addManualBtn:hover img {
    transform: scale(1.12);

    filter:
        brightness(0) saturate(100%) invert(74%) sepia(32%) saturate(600%) hue-rotate(95deg) brightness(1.0) contrast(0.95) drop-shadow(0 0 3px rgba(61, 220, 132, 0.4));
}

#addManualBtn:active,
#addPathOverlayBtn:active {
    transform: scale(0.95);
}

#addManualBtn:active img,
#addPathOverlayBtn:active img {
    transform: scale(0.9);

    filter:
        brightness(0) saturate(100%) invert(76%) sepia(38%) saturate(1200%) hue-rotate(95deg) brightness(1.2) contrast(1.05) drop-shadow(0 0 4px rgba(43, 200, 133, 0.6));
}

/* PATH OVERLAY */
.path-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 0;

    background: rgba(0, 0, 0, 0.6);

    box-sizing: border-box;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.path-overlay.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

.path-overlay-backdrop {
    position: absolute;
    inset: 0;
}

.path-overlay-content {
    width: calc(100% - 20px);
    max-width: 520px;

    margin: 10px auto;
    padding: 14px 12px;

    background: #121212;
    border-radius: 16px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    position: relative;

    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;

    padding-bottom: calc(12px + env(safe-area-inset-bottom));

    flex: 0 0 auto;

    box-sizing: border-box;
}

#pathOverlayCloseBtn,
#editPathOverlayCloseBtn {
    position: absolute;
    top: 10px;
    right: 10px;

    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.path-overlay-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.path-overlay-label {
    margin-top: -12px;
    margin-bottom: 6px;
    font-size: 14px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
}

.path-overlay-select,
.path-overlay-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: #1d1d1d;
    color: #fff;
    padding: 10px 12px;
    font: inherit;
}

.path-overlay-textarea {
    resize: none;
    min-height: 44px;
    height: 44px;
    line-height: 1.3;
    overflow: hidden;
}

.path-overlay-placeholder {
    margin: 0 0 0 4px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.5;
    transition: all 0.25s ease;
}

.path-overlay-favourite-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: #1d1d1d;
    color: #fff;
    cursor: pointer;
    font: inherit;
}

.path-overlay-favourite-toggle.is-active {
    border-color: rgba(245, 197, 24, 0.65);
    background: rgba(245, 197, 24, 0.12);
}

.path-overlay-favourite-icon {
    margin-top: 0px;
    color: #f5c518;
    font-size: 20px;
    font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
    line-height: 1;
}

.path-overlay-action-btn {
    margin-top: 4px;
    width: 100%;
    padding: 10px 0;
}

/* POP-UP ADD SESSION (MANUAL) */
.overlay {
    --manual-overlay-top-gap: 12px;
    --manual-overlay-bottom-gap: calc(82px + env(safe-area-inset-bottom));

    position: fixed;
    inset: 0;
    z-index: 1200;

    display: flex;
    align-items: flex-end;
    padding-top: 20px;
    /* чтобы было куда расти вверх */
    justify-content: center;

    padding: 0;

    background: rgba(0, 0, 0, 0.6);

    box-sizing: border-box;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.overlay-content,
.weekly-loop-results-window {
    width: calc(100% - 20px);
    max-width: 520px;

    margin: 10px auto;
    /* 🔥 центр + одинаковый отступ */
    padding: 14px 12px;

    background: #121212;
    border-radius: 16px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    position: relative;

    max-height: 85vh;
    /* можно 82–90vh по вкусу */
    overflow-y: auto;
    /* 🔥 КЛЮЧ */
    overflow-x: hidden;

    padding-bottom: calc(12px + env(safe-area-inset-bottom));

    flex: 0 0 auto;

    box-sizing: border-box;
}

.overlay.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

.manual-collapsible-section {
    width: 100%;
    box-sizing: border-box;
}

.manual-collapsible-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: #fff;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
}

.manual-collapsible-icon {
    width: 14px;
    flex: 0 0 14px;
    text-align: center;
    line-height: 1;
}

.manual-collapsible-label {
    line-height: 1.2;
}

.manual-collapsible-content {
    margin-top: 6px;
}

/* =========================
   ADD SESSION (MANUAL) CALENDAR POPUP
========================= */
#manualCalendarPopup {
    max-width: 400px;
    margin: 10px auto;
    background: #111;
    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
}

/* header */
.manual-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: #fff;
}

/* кнопки навигации месяцев */
.manual-calendar-header button {
    background: #222;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
}

/* grid */
.manual-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

/* day cell */
.manual-calendar-day {
    padding: 8px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    background: #222;
    transition: 0.2s;
    color: #fff;
}

.manual-calendar-day.active {
    background: #36E08A;
    color: #000;
}

.manual-calendar-day.disabled {
    cursor: not-allowed;
    opacity: 0.35;
    background: #222;
    color: #fff;
}

.manual-calendar-day.disabled:hover {
    background: #222;
    color: #fff;
}

.manual-calendar-grid .manual-calendar-day {
    user-select: none;
}

/* Кнопка Today в календаре */
#manualDateLabel.tab-btn {
    padding: 6px 14px;
    /* чуть компактнее, чем вкладка */
    font-size: 14px;
    /* нормальный размер текста */
    margin-bottom: 10px;
    /* отступ от верхнего контента */
    background-color: #333;
    /* совпадает с оверлеем */
    border-radius: 6px;
    /* как у календаря */
    transition: background-color 0.2s, color 0.2s;
}

/* кнопка Today */
.manual-date-btn {
    flex: 1;
    height: 42px;
    /* фиксированная высота */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    line-height: 42px;
    /* чтобы текст центрировался точно по высоте */
    cursor: pointer;
    transition: 0.2s;
    box-sizing: border-box;
    /* важно */
    padding: 0;
    /* убираем лишние внутренние отступы */
}

/* Стиль ADD Manual Session BTN */
#manualPathPicker {

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 42px;

    padding: 0 12px;

    font-size: 16px;

    background: #1a1a1a;

    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;

    color: #fff;

    box-sizing: border-box;

    cursor: pointer;

    user-select: none;
}

#manualPathPickerText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    padding-right: 10px;

    flex: 1;
}

#addManualBtnConfirm {
    min-width: 0;
    width: 100%;
    font-size: 14px;
    transition: 0.2s;
    margin-right: 0;
}

/* ЦЕНТРИРУЕМ КНОПКУ */
.manual-add-session-row {
    display: flex;
    justify-content: center;
    /* центрируем кнопку горизонтально */
    width: 100%;
    /* растягиваем на всю ширину overlay */
    margin-top: 10px;
    /* немного отступ сверху */
    box-sizing: border-box;
    padding: 0 0;
    /* можно убрать лишние паддинги, если есть */
    position: sticky;
    bottom: 0;

    background: #121212;
    padding-top: 8px;
}

/* =========================
   MANUAL TIME PICKER
========================= */
/* контейнер manualTimeWrapper */
#manualTimeWrapper {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;

    margin: 2px 0;
}

/* input часы и минуты */
#manualHoursInput,
#manualMinutesInput {
    flex: 1;

    min-width: 0;

    height: 42px;

    border-radius: 8px;
    border: none;

    background: #222;

    color: #fff;

    text-align: center;

    font-size: 16px;

    box-sizing: border-box;
}

/* двоеточие */
#manualTimeWrapper span {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex: 0 0 auto;
}

/* контейнер дата + время */
.manual-date-time-row {
    display: flex;
    gap: 8px;
    /* небольшой отступ между кнопкой и time picker */
    margin-bottom: 4px;
    width: 100%;
    /* растягиваем по ширине оверлея */
}

/* time picker центрирование текста */
.manual-time-input {
    flex: 1;
    height: 42px;
    padding: 0;
    /* убираем горизонтальные отступы, чтобы не мешали центрированию */
    text-align: center;
    /* центрируем текст по горизонтали */
    border-radius: 6px;
    border: none;
    background-color: #333;
    color: #fff;
    font-size: 14px;
    line-height: 42px;
    /* центрируем текст по вертикали */
    cursor: pointer;
    box-sizing: border-box;
}

/* optional: убрать стрелки в Firefox */
.manual-time-input::-webkit-inner-spin-button,
.manual-time-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Контейнер комментария растягиваем по ширине блока дата+время */
#manualCommentContainer {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    /* 🔥 КЛЮЧ */
    width: 100%;
    padding-bottom: 2px;
    box-sizing: border-box;
}

/* textarea комментария */
#manualSessionComment {
    width: 100%;
    /* занимает всю ширину контейнера */
    height: 60px;

    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    /* чуть меньше, чтобы совпадало с кнопками */
    color: white;
    font-size: 12px;
    padding: 8px;

    resize: none;
    outline: none;

    box-sizing: border-box;
    /* учитываем padding и border */
    transition: border 0.2s ease, background 0.2s ease;
}

#manualSessionComment:focus {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

/* Контент вкладок */
.tab-content {
    background-color: #111111;
    /* чуть светлее основного фона */
    padding: 6px 10px 10px 6px;
    border-radius: 8px;
}

/* Кнопки таймера */
button {
    background-color: #222222;
    color: #ffffff;
    border: none;
    padding: 10px 15px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #333333;
}

/* Кнопки навыков */
.path-btn {
    display: block;
    width: 100%;
    background-color: #222222;
    color: #ffffff;
    border: none;
    padding: 10px 32px 10px 10px;
    margin: 5px 0;
    text-align: left;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

.path-btn:hover {
    background-color: #333333;
}

/* A compact fold stays below the centered drag handle. */
#pathsList .path-btn {
    --path-fold-size: 20px;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--path-outline-color, #444444) 50%, transparent);
    border-bottom-right-radius: 0;
    clip-path: polygon(0 0, 100% 0,
            100% calc(100% - var(--path-fold-size)),
            calc(100% - var(--path-fold-size)) 100%, 0 100%);
    transition: border-color .15s, background-color .15s;
}

#pathsList .path-btn::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: var(--path-fold-size);
    height: var(--path-fold-size);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background: linear-gradient(135deg,
            var(--path-fold-color, #666666) 42%,
            color-mix(in srgb, var(--path-fold-color, #666666) 85%, black) 48%,
            rgba(0, 0, 0, .28) 50%);
    border-top-left-radius: 2px;
    pointer-events: none;
}

#pathsList .path-btn:hover {
    border-color: color-mix(in srgb, var(--path-outline-color, #444444) 75%, transparent);
}

/* Прогресс-бары навыков */
.path-bar {
    width: 100%;
    height: 8px;
    background-color: #444;
    border-radius: 4px;
    margin: 5px 0;
}

#addPathPanel {
    margin-bottom: 15px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Объединяем и корректируем path-row */
.path-row {
    display: flex;
    align-items: center;
    gap: 8px;
    /* расстояние между чекбоксом, звездой и текстом */
    flex-wrap: nowrap;
    /* перенос длинного текста */
    margin-bottom: 6px;
    position: relative;
}

.path-row.path-row-placeholder {
    border: 1px dashed rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 6px;
}

.path-row.is-dragging {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
}

.path-row-drag-handle {
    position: absolute;
    top: 48%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.22);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    opacity: 0.8;
    z-index: 2;
}

.path-row-drag-handle:hover {
    color: rgba(255, 255, 255, 0.46);
}

.path-row-drag-handle:active {
    cursor: grabbing;
    transform: scale(0.94);
}

/* Path info занимает всё оставшееся место, но не ломает строку */
.path-btn {
    flex: 1 1 auto;
    word-break: break-word;
    /* текст переносится, но строка остаётся */
    min-width: 0;
    /* важно, чтобы flex корректно сжимался */
}

#addPathPanel input,
#addPathPanel button,
#addPathPanel select {
    margin-left: 0;
}

#pathSelector,
#pathPicker,
#aspectSelect,
#editAspectSelect,
#pathNameInput,
#editPathNameInput {
    font-size: 16px;
    padding: 6px 8px;

    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.151);
    border-radius: 8px;

    color: #fff;
    box-sizing: border-box;
}


#manualPathPicker {

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 42px;

    padding: 0 12px;

    font-size: 16px;

    background: #1a1a1a;

    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 8px;

    color: #fff;

    box-sizing: border-box;

    cursor: pointer;

    user-select: none;
}

#manualPathPickerText {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    padding-right: 10px;

    flex: 1;
}

/* SD LVL bar (фиолетовая) */
.sd-bar-fill {
    height: 100%;

    background: linear-gradient(90deg, #7a0ce0, #9a40ee);

    box-shadow: 0 0 8px rgba(168, 85, 247, 0.4),
        inset 0 0 6px rgba(255, 255, 255, 0.15);

    border-radius: 4px;
    width: 0%;

    transition: width 0.8s ease;
}

/* =========================
   Session finish screen
========================= */
/* parent */
.finish-content {
    width: 180px;
    text-align: center;
    color: white;
}

.finish-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.85);

    display: none;
    /* скрыт по умолчанию */
    justify-content: center;
    align-items: center;

    z-index: 9999;
}

/* +X mins */
#finishResult {
    font-size: 28px;
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Шарики */
#finishOrbs {
    font-size: 24px;
    margin-bottom: 20px;
}

/* Плавное появление Path+mins */
#finishPathName,
#finishResult {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.path-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00FF6A, #3DDC84);
    box-shadow: 0 0 8px rgba(0, 255, 106, 0.35);
    border-radius: 4px;
    width: 0%;

    transition: width 0.8s ease;
    /* 🔥 ВОТ ЭТО МАГИЯ */
}

#finishOrbs {
    transition: opacity 0.4s ease;
}

#finishBar {
    opacity: 0;
    transition: opacity 0.5s ease;
}

#finishLevelUp {
    transition: opacity 0.3s ease;
}

#finishLevelUp {
    display: none;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    margin-top: 10px;

    color: #00FF6A;

    opacity: 0;
    transform: scale(0.8);

    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* активное состояние */
#finishLevelUp.show {
    opacity: 1;
    transform: scale(1);
}

/* Текст уровня */
#finishLevelText {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#finishLevelText.show {
    opacity: 1;
    transform: translateY(0);
}

#finishFinalState {
    opacity: 0;
    transition: opacity 0.5s ease;
}

#finishCloseBtn {
    margin: 15px auto 0 auto;
    display: block;

    opacity: 0;

    width: 160px;
    /* скрыта по умолчанию */
    transform: scale(0.8);
    /* чуть уменьшена */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#finishCloseBtn.show {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
    /* кнопка появляется чуть позже */
}

/* =========================
   LOGS CONTAINER+CARDS
========================= */
#logsContainer {
    padding: 0 14px 8px;
    /* 🔥 даём пространство для scale */
}

.log-card {
    position: relative;
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 12px;
    color: #111;
    transition: transform 0.12s ease;

    display: flex;
    flex-direction: column;
    gap: 7px;

    transform-origin: center;
}

.log-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(255, 255, 255, 0.08);
}

.log-card.expanded {
    transform: scale(1.005);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* заголовок */
.log-title {
    font-weight: 600;
    font-size: 15px;
    padding-right: 28px;
}

.log-edit-hint {
    position: absolute;
    top: 12px;
    right: 12px;

    font-size: 14px;
    line-height: 1;

    color: rgba(0, 0, 0, 0.6);

    pointer-events: none;
    user-select: none;
}

/* длительность */
.log-duration {
    font-size: 14px;
    /* почти как title */
    color: #111;
    /* 🔥 чёрный */
    font-weight: 400;
    /* не жирный */
}

/* комментарий */
.log-comment {
    display: none;
    font-size: 14px;
    font-style: italic;
    color: rgba(0, 0, 0, 0.95);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    white-space: pre-wrap;
}

.log-card.has-comment .log-comment {
    display: block;
}

/* 🔥 контейнер кнопок */
.log-actions {
    display: none;
    gap: 8px;
    margin-top: 0px;
    will-change: max-height, opacity;
}

/* когда карточка раскрыта */
.log-card.expanded .log-actions {
    display: flex;
}

.log-edit-btn {
    margin-top: 6px;
    padding: 6px 12px;
    background: #222;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: max-height 0.35s ease;
}

.log-delete-btn {
    margin-top: 8px;
    padding: 6px 12px;
    background: #000000;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.log-delete-btn:hover {
    background: #ff0400;
}

/* =========================
   LOG CONTROLS (Day Switcher)
========================= */
#logsControls,
#loopsControls {
    display: flex;
    justify-content: space-between;
    /* ← и → по краям */
    align-items: center;
    /* по центру по вертикали */
    width: 100%;
    /* растягиваем по ширине карточек */
    max-width: 400px;
    /* можно подогнать под карточку */
    margin: 0 auto 10px;
    /* центрируем контейнер и отступ снизу */
    padding: 8px 12px;
    /* внутренние отступы */
    border-radius: 12px;
    /* светлый фон, можно убрать или заменить */
    font-weight: 600;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #222222;
}

/* =========================
   Loop Year Popup
========================= */
#loopsYearPopup .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

#loopsYearLabel {
    text-align: center;
    font-weight: 600;
}


/* кнопки */
#logsControls button,
#prevLoopsMonthBtn,
#nextLoopsMonthBtn {
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s ease;
    margin-right: 0px;
}

/* Hover */
#logsControls button:hover,
.secondary-btn:hover,
#prevLoopsMonthBtn:hover,
#nextLoopsMonthBtn:hover {
    background-color: #36E08A;
}

#logsControls #dateLabel,
#loopsMonthLabel {
    flex: 0 0 auto;

    margin: 0 14px;

    text-align: center;
}

#dateLabel,
#loopsMonthLabel {
    display: inline-block;

    padding: 4px 10px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.03);

    cursor: pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .1s ease;
}

#dateLabel:hover,
#loopsMonthLabel:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}

#dateLabel:active,
#loopsMonthLabel:active {
    transform: scale(.97);
}

/* =========================
   CALENDAR POPUP
========================= */
.calendar-popup {
    max-width: 400px;
    margin: 10px auto;
    background: #111;
    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
}

/* header */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

#prevMonthBtn,
#nextMonthBtn {
    margin-right: 0;
}

/* grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

/* day cell */
.calendar-day {
    padding: 8px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    background: #222;
    transition: 0.2s;
}

.calendar-day.active {
    background: #36E08A;
    color: #000;
}

.calendar-day.disabled {
    cursor: not-allowed;
    opacity: 0.35;
    background: #222;
    color: #fff;
}

.calendar-day.disabled:hover {
    background: #222;
    color: #fff;
}

.calendar-grid .calendar-day {
    user-select: none;
}

/* =========================
   Year controls (Relic/Loops)
========================= */
/* =========================
   Year controls
========================= */

.loops-year-controls {
    display: none;
    flex-basis: 100%;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}


.loops-year-controls.expanded {
    display: flex;
}


#prevLoopsYearBtn:active,
#nextLoopsYearBtn:active {
    transform: scale(.97);
}


#loopsYearLabel {
    text-align: center;

    font-weight: 600;
}

/* =========================
Delete Confirm Overlay
========================= */
.delete-confirm-text {
    font-size: 14px;
    margin-left: 10px;
    margin-top: -10px;
    font-style: italic;
    opacity: 0.75;
}

.delete-confirm-actions {
    display: flex;
    width: 100%;
    gap: 10px;
    /* если хочешь небольшой разрыв между кнопками */
    margin-top: 4px;
}

.delete-confirm-actions button {
    flex: 1;
    /* ключевой момент — делим пополам */
    padding: 12px 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* левая кнопка */
.secondary-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* правая кнопка (опасное действие) */
.danger-btn {
    background: rgba(255, 0, 0, 0.12);
    color: #ff4d4d;
    border: 1px solid rgba(255, 77, 77, 0.3);
}

.danger-btn:hover {
    background: #ff4d4d;
    color: #000;
}

/* =========================
   RESET APP CACHE OVERLAY
========================= */
#resetAppCacheResultOverlay,
#resetAppCacheErrorOverlay {
    z-index: 1000001;
}

#resetAppCacheResultText {
    margin-bottom: 16px;
}

#resetAppCacheResultText .settings-channels {
    margin: 0 0 12px;
    font-style: normal;
}

#resetAppCacheResultText .settings-channels span {
    display: inline;
    margin-bottom: 0;
}

#resetAppCacheTitle,
#resetAppCacheResultTitle,
#resetAppCacheErrorTitle,
#dailyLogLimitTitle,
#pathOverlayTitle,
#editPathOverlayTitle,
#logNoteTitle,
#deleteConfirmTitle,
#addArtifactTitle,
#addAchievementTitle,
#checkMyDirectionTitle,
#myDirectionsTitle,
#chooseAvatarTitle {
    padding: 0 10px;
}

#setDirectionTitle,
#changeDirectionTitle,
#editArtifactTitle,
#editAchievementTitle,
#addSessionTitle {
    padding: 0 6px;
}

#resetAppCacheTitle,
#resetAppCacheText,
#resetAppCacheResultTitle,
#resetAppCacheResultText,
.reset-app-cache-actions {
    position: relative;
    z-index: 2;
}

/* Reclaimer */
.reset-app-cache-reclaimer {
    position: absolute;

    left: 46%;
    bottom: 15%;

    transform: translateX(-50%);

    width: 100%;
    height: auto;

    pointer-events: none;
    user-select: none;

    z-index: 0;

    opacity: 0.75;
}

#dailyLogLimitReclaimer {
    bottom: 18%;
}

#deleteConfirmReclaimer {
    bottom: 5%;
}

.reset-app-cache-text,
.daily-log-limit-text,
.reclaimer-preview-text,
.onboarding-intro-text {
    font-size: 15px;
    font-style: oblique 8deg;
    line-height: 1.5;

    margin-top: -12px;

    padding: 0 8px;

    color:
        rgba(255, 255, 255, 0.75);
}

.reclaimer-preview-text,
.onboarding-intro-text {
    margin-top: 6px;
    margin-bottom: -6px;
    font-size: 18px;
}

.onboarding-intro-text {
    line-height: 1.3;
    white-space: pre-line;
    font-style: oblique 0deg;
    color: rgba(255, 255, 255, 0.92);
}

#onboardingFirstMeetingSpeaker,
#onboardingIdentitySpeaker {
    align-self: flex-start;

    padding: 4px 12px;

    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.38);
}

#onboardingFirstMeetingText,
#onboardingIdentityText {
    margin-top: -10px;
}

#onboardingFirstMeetingText,
#onboardingBasicsText,
#onboardingIdentityText {
    position: relative;

    color: rgba(255, 255, 255, 0.92);

    font-size: 18px;

    font-style: oblique 8deg;

    line-height: 1.5;

    text-align: left;

}

.onboarding-reclaimer-text-line {
    opacity: 0;

    display: block;

    transform: translateX(-8px);

    clip-path: inset(0 100% 0 0);

    transition:
        opacity 0.22s ease-out,
        transform 0.25s ease-out,
        clip-path 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.onboarding-reclaimer-text-line.visible {
    opacity: 1;

    transform: translateX(0);

    clip-path: inset(0 0 0 0);
}

.onboarding-intro-text p {
    margin: 0 0 8px;
}

.onboarding-intro-text p:last-child {
    margin-bottom: 4px;
}

.onboarding-intro-text-break {
    height: 14px;
}

.onboarding-intro-emphasis {
    font-style: oblique 8deg;
}

.onboarding-identity-hint {
    position: relative;
    z-index: 20;
    cursor: pointer;
}

.onboarding-identity-hint::before {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid #3DDC84;
    border-radius: 50%;
    box-shadow:
        0 0 0 4px rgba(61, 220, 132, 0.12),
        0 0 18px rgba(61, 220, 132, 0.35);
    pointer-events: none;
    z-index: -1;
}

#corePortraitEditIdentity.onboarding-identity-hint {
    top: 12px;
    right: 16px;
}

#corePortraitEditIdentity.onboarding-identity-hint::before {
    inset: -7px;
}

#onboardingIdentityAvatar.onboarding-identity-avatar-blurred {
    filter: blur(4px);
    transition: filter 200ms ease;
}

#playerNameIdentity.onboarding-identity-nickname-blurred,
#onboardingIdentityNickname.onboarding-identity-nickname-blurred {
    filter: blur(3px);
    transition: filter 200ms ease;
}

/* ========================= */

.reset-app-cache-text span {

    display: block;

    margin-bottom: 10px;

}

.reset-app-cache-text span:last-child {

    margin-bottom: 0;

}


.reset-app-cache-actions {
    display: flex;

    width: 100%;

    gap: 10px;

    margin-top: -10px;

}


.reset-app-cache-actions button {
    flex: 1;

    padding: 12px 0;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition:
        all .2s ease;

}

/* =========================
   � Mobile install prompt
========================= */
.install-prompt-overlay {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.install-prompt-card {
    width: min(92vw, 360px);
    background: #121212;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 22px 18px 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.install-prompt-icon-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.install-prompt-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    object-fit: cover;
}

.install-prompt-card h3 {
    margin: 0 0 8px;
    font-size: 20px;
}

.install-prompt-text {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.45;
    opacity: 0.8;
}

.install-prompt-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.install-prompt-actions .primary-btn,
.install-prompt-actions .secondary-btn {
    flex: 1;
    min-height: 42px;
}

/* =========================
   �🔥 Нижняя панель
========================= */
#bottomNav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: 70px;

    background: #111111;
    /* тёмный контрастный фон */
    border-top: 1px solid #1a1a18;

    display: flex;
    justify-content: space-around;
    align-items: center;

    z-index: 1000;
    transition: transform 0.22s ease, opacity 0.22s ease, visibility 0.22s ease;
}

body.manual-overlay-open #bottomNav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(100% + env(safe-area-inset-bottom)));
}

#bottomNav[hidden] {
    display: none !important;
}

/* обычные кнопки */
.nav-btn {
    background: none;
    border: none;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nav-btn img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    transition: transform 0.2s, filter 0.2s;
    filter: brightness(1.2) contrast(1.2);
    ;
    /* чуть подсветить иконки */
}

.nav-btn:hover img {
    transform: scale(1.1);
    filter:
        brightness(0) saturate(100%) invert(74%) sepia(32%) saturate(600%) hue-rotate(95deg) brightness(1.0) contrast(0.95) drop-shadow(0 0 2px rgba(61, 220, 132, 0.35));
}

.nav-btn.active img {
    transform: scale(1.1);

    filter:
        brightness(0) saturate(100%) invert(74%) sepia(32%) saturate(900%) hue-rotate(95deg) brightness(1.1);
}

.nav-btn.disabled img {
    opacity: 0.4;
    cursor: default;
}

/* 🔘 центральная кнопка */
#centerBtn {
    position: relative;
    top: -10px;

    width: 80px;
    height: 80px;

    border-radius: 50%;
    border: 2px solid #36E08A;
    /* чёткий контур */
    background: #222;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6),
        inset 0 0 10px rgba(61, 220, 132, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}

#centerBtn img {
    width: 40px;
    height: 40px;

    transform: translateX(3px) scale(1);
    /* 🔥 двигаем чуть вправо */
    transition: transform 0.2s, filter 0.2s;
}

#centerBtn:hover img {
    transform: translateX(3px) scale(1.1);
    filter:
        brightness(0) saturate(100%) invert(74%) sepia(32%) saturate(600%) hue-rotate(95deg) brightness(1.0) contrast(0.95) drop-shadow(0 0 2px rgba(61, 220, 132, 0.35));
}

#centerBtn.active img {
    transform: translateX(3px) scale(1.15);

    filter:
        brightness(0) saturate(100%) invert(76%) sepia(38%) saturate(1200%) hue-rotate(95deg) brightness(1.2) contrast(1.05) drop-shadow(0 0 4px rgba(43, 200, 133, 0.55));
}

#centerBtn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 255, 153, 0.6);
}

/* чтобы контент не перекрывался панелью */
body {
    padding-bottom: 90px;
}

.tabs-main,
.tabs-settings {
    display: none;
}

/* =========================
   🔥 RELIC TABS
========================= */
#relicTab {
    display: none;
    flex-direction: column;
    padding-top: 1px;
}

.sub-tab {
    display: none;
}

.sub-tab.active {
    display: block;
}

.relic-tabs {
    display: flex;
    gap: 0;
    margin-top: -2px;
    margin-bottom: 12px;

    width: 100%;
    overflow: hidden;

    border-radius: 10px;
}

.relic-tab-btn {
    flex: 1 1 0;

    margin: 0;
    padding: 12px 8px;

    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);

    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.6);

    cursor: pointer;
    transition: 0.2s ease;

    font-size: 14px;
}

/* Remove doubled borders between adjacent buttons */
.relic-tab-btn+.relic-tab-btn {
    border-left: none;
}

/* First button */
.relic-tab-btn:first-child {
    border-radius: 10px 0 0 10px;
}

/* Last button */
.relic-tab-btn:last-child {
    border-radius: 0 10px 10px 0;
}

.relic-tab-btn.active {
    background: #36E08A;
    color: #000000;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}

.relic-tab-btn:hover {
    background: #36E08A;
    color: #000000;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}

.imprints-header-row {
    align-items: center;
    gap: 0px;
}

.imprints-header-row h2 {
    margin: 0;
}

.imprints-filter-row {
    display: flex;

    justify-content: left;

    align-items: left;

    margin-left: 6px;
    gap: 10px;
}

.imprints-filter-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.imprints-filter-btn:hover {
    background: rgba(54, 224, 138, 0.18);
    border-color: #36E08A;
    transform: translateY(-1px);
}

.imprints-filter-icon {
    font-size: 18px;
    line-height: 1;
}

.imprints-filter-summary {
    margin: 8px 0 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.62);
}

.imprints-filter-overlay.hidden {
    display: none !important;
}

.imprints-filter-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.imprints-filter-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

.imprints-filter-panel {
    position: relative;
    width: min(100%, 560px);
    margin: 16px;
    padding: 18px;
    border-radius: 20px;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.imprints-filter-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.imprints-filter-panel-header h3 {
    padding-top: 10px;
    margin: 0;
    font-size: 18px;
}

.imprints-filter-section+.imprints-filter-section {
    margin-top: 18px;
}

.imprints-filter-label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

.imprints-filter-year-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 0;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1c1c1c;
    color: #fff;
    font-size: 14px;
}

#imprintsFilterYearPickerOverlay .path-picker-window {
    max-width: 500px;
    box-sizing: border-box;
}

#imprintsFilterYearPickerOptions button {
    width: 100%;
    margin-right: 0;
}

.imprints-month-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 10px;
}

.imprints-filter-chip {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 8px;
    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);

    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
    text-align: center;

    cursor: pointer;

    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;

    white-space: nowrap;
}

.imprints-filter-chip:hover {
    background: rgba(255, 255, 255, 0.07);
}

.imprints-filter-chip.is-active {
    background: rgba(54, 224, 138, 0.2);
    border-color: #36E08A;
    color: #fff;
}

.imprints-filter-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
}

.imprints-filter-reset-btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
}

.imprints-empty-state {
    margin-top: 18px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.5;
}

/* =========================
   RELIC TAB - RELIC IMAGE
========================= */
.relic-scene {
    position: relative;

    width: 340px;
    height: 340px;

    margin: -12px auto 0;

    opacity: 0;
    transform: scale(1);
    visibility: hidden;

    transition: opacity 100ms ease;
}

.relic-scene.loaded {
    opacity: 1;
    visibility: visible;
}

/* SCENE VIGNETTE (outside relic stack) */
.relic-scene::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(circle,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.08) 35%,
            rgba(0, 0, 0, 0.04) 70%,
            rgba(0, 0, 0, 0.00) 100%);
}

#globalRelicContainer.relic-traces-scan::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    pointer-events: none;

    z-index: 7;

    background:
        linear-gradient(to bottom,
            transparent 0%,

            rgba(255, 255, 255, .00) 20%,

            rgba(255, 255, 255, .035) 32%,
            rgba(255, 255, 255, .07) 42%,

            rgba(255, 255, 255, .14) 47%,
            rgba(255, 255, 255, .17) 50%,
            rgba(255, 255, 255, .14) 53%,

            rgba(255, 255, 255, .07) 58%,
            rgba(255, 255, 255, .035) 68%,

            rgba(255, 255, 255, .00) 80%,

            transparent 100%);

    background-repeat: no-repeat;

    background-size:
        100% 70px;

    background-position:
        0 -70px;

    opacity: 0;

    animation:
        tracesRelicScan 20s ease-in-out infinite;
}

.relic-wrapper {
    position: relative;

    width: 100%;
    height: 100%;
}

.relic-layer {
    position: absolute;
    z-index: 1;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;

    image-rendering: auto;
    backface-visibility: hidden;
}

.relic-display {
    position: absolute;
    opacity: 1;
    mix-blend-mode: normal;
}

.relic-ui {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.relic-core-message {
    transform: translateY(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

/* Line 1, 2 - Core */
.relic-message-line {
    margin-top: -4px;
    margin-bottom: 3px;
    font-size: 14px;
    color: rgba(240, 240, 240, 0.87);
    letter-spacing: 0.04em;
}

.relic-message-accent {
    font-weight: 700;
}

/* Between 1-2 lines - Core */
.relic-message-value {
    position: center;
    text-align: center;
    width: 195px;
    margin-top: 16px;
    margin-bottom: 4px;
    font-size: 16px;

    font-weight: 700;

    color: #E8FFF4;
}

/* Number - Core */
#totalMomentsValue {
    margin-top: 10px;
    font-size: 18px;
    color: #9a40ee;

    text-shadow:
        0 0 12px rgba(154, 64, 238, 0.4);
}

/* Line 1 - Loops Badge */
.loops-relic-badge {
    width: 80px;
    max-width: 80px;
    height: auto;

    display: block;
    margin: auto;
    margin-top: -25px;
    margin-bottom: 4px;

    opacity: 0.90;

    filter:
        brightness(0.92) contrast(0.90) saturate(0.88);
}

/* Line 2 - Loops */
/* Loops Relic - Target progress bar */
.loops-relic-hours-bar {
    position: relative;

    width: 120px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto;
    margin-bottom: 6px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;

    background: rgba(255, 255, 255, 0.04);

    box-sizing: border-box;

    overflow: hidden;
}


/* Progress fill */
.loops-relic-hours-fill {
    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: var(--loops-progress);

    background: rgba(210, 235, 255, 0.72);

    pointer-events: none;

    transition:
        width 0.5s ease;
}


/* Shared text layer */
.loops-relic-hours-text {
    position: absolute;

    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;

    font-size: 13px;
    font-weight: 500;

    pointer-events: none;
}


/* Text on dark background */
.loops-relic-hours-text-base {
    color: #E8FFF4;
}


/* Text on filled background */
.loops-relic-hours-text-filled {
    color: #0B1828;

    clip-path: inset(0 calc(100% - var(--loops-progress)) 0 0);
}

/* Line 2 - Moments */
.logsSubTab-line {
    margin-top: 1px;
    font-size: 14px;
    color: rgba(240, 240, 240, 0.87);
    letter-spacing: 0.04em;
}

/* Paths relic - number */
.pathsRelic-hours-value {
    font-size: 18px;
    font-weight: 700;
    color: #36E08A;
    text-shadow: 0 0 12px rgba(64, 238, 116, 0.4);
}

/* Paths relic - text */
.pathsRelic-hours-text {
    margin-top: 8px;
    font-size: 18px;
    font-weight: 700;
    color: #E8FFF4;
}

/* Paths relic - second line */
#relicLine2 {
    margin-top: 0;
    font-size: 14px;
    color: rgba(240, 240, 240, 0.87);
    letter-spacing: 0.04em;
}

.imprints-empty-line1 {
    margin-top: 15px;
    text-align: center;
}

/* Line 1 text - Moments */
.logsSubTab-value {
    margin-bottom: 6px;
    font-size: 18px;

    font-weight: 700;

    color: #E8FFF4;
}

/* Card - Traces */
.imprintsSubTab-value {
    margin-bottom: 0px;
    position: absolute;
    top: calc(50% - 20px);
    left: 50%;
    width: 195px;

    transform:
        translate(-50%, -50%) perspective(800px) rotateX(-5deg);

    opacity: .95;

    filter:
        brightness(.95) contrast(.96) drop-shadow(0 0 10px rgba(54, 224, 138, 0.15));

    mask-image: radial-gradient(ellipse at center,
            black 65%,
            rgba(0, 0, 0, .95) 80%,
            transparent 100%);
}

/* Card - Traces */
#logsSubTabValue {

    color: #36E08A;

    text-shadow: 0 0 12px rgba(64, 238, 116, 0.4);
}

.path-details-overlay {
    position: fixed;
    inset: 0;
    z-index: 14000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(0, 0, 0, 0.72);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.path-details-overlay.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

.path-details-card {
    width: calc(100% - 20px);
    max-width: 520px;
    margin: 10px auto;
    padding: 14px 12px;
    background: #121212;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    flex: 0 0 auto;
    box-sizing: border-box;
    max-height: 85vh;
}

.path-details-relic-container {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto;
}

.path-details-relic {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.path-details-info-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    pointer-events: none;
    margin-top: 30px;
}


.path-details-name,
.path-details-hours {
    margin-bottom: 4px;
    font-weight: 700;
    color: #E8FFF4;
}

.path-details-name {
    font-size: 18px;
}

.path-details-hours {
    margin-top: 2px;
    font-size: 16px;
}

.path-details-hours-value {
    color: #36E08A;
    text-shadow: 0 0 12px rgba(64, 238, 116, 0.4);
}

.path-details-text-info {
    margin-top: 1px;
    font-size: 14px;
    color: rgba(240, 240, 240, 0.87);
    letter-spacing: 0.04em;
}

.path-details-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.path-details-text {
    margin: 0;
    font-size: 15px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.84);
}

.path-details-actions-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.path-details-btn,
.path-details-ok-btn {
    box-sizing: border-box;
    margin-top: 4px;
    margin-right: 0;
    padding: 10px 0;
    background-color: #222222;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}

.path-details-btn {
    flex: 1;
}

.path-details-ok-btn {
    width: 100%;
}

.path-details-btn.is-active {
    border-color: rgba(245, 197, 24, 0.65);
    background: rgba(245, 197, 24, 0.12);
    color: #f5c518;
}

/* Relic Paths - Balance Diagram
========================= */
.pathsSubTab-message {

    transform:
        translateY(0px);

    opacity: .82;

    text-shadow:
        0 0 4px rgba(255, 255, 255, .10);

}

.pathsSubTab-message #relicValue {

    width: 200px;

    filter:
        drop-shadow(0 0 2px rgba(255, 255, 255, .08));

}

.paths-balance {

    width: 200px;

    display: flex;
    flex-direction: column;

    gap: 9px;

    margin-top: 4px;
}


.paths-balance-title {
    margin: 0;
    line-height: 1.3;
}

.paths-balance-rows {

    display: flex;
    flex-direction: column;

    gap: 8px;

}


.paths-balance-row {
    display: grid;

    grid-template-columns:
        100px 1fr;

    align-items: center;

    gap: 9px;

}


.paths-balance-label {
    font-size: 12px;

    line-height: 1;

    text-align: right;

    opacity: .78;

    letter-spacing:
        .035em;

    white-space: nowrap;

}


.paths-balance-bar {
    position: relative;
    max-width: 85px;

    height: 8px;

    overflow: hidden;

    background:
        rgba(255,
            255,
            255,
            .035);

}

.paths-balance-period {

    margin-top: 2px;

    width: 100%;

    text-align: center;

    font-size: 10px;

    line-height: 1;

    font-style: italic;

    color: rgba(240,
            240,
            240,
            .48);

    letter-spacing: .04em;

}

/* =========================
   RELIC PATHS - PROCESSING FX
========================= */

#globalRelicContainer.relic-paths-processing::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    pointer-events: none;

    z-index: 7;

    background:

        linear-gradient(to right,
            transparent 0%,
            transparent 18%,
            rgba(255, 255, 255, .00) 18%,
            rgba(255, 255, 255, .10) 24%,
            rgba(255, 255, 255, .00) 32%,
            transparent 32%) 0 22px / 100% 2px no-repeat,

        linear-gradient(to right,
            transparent 0%,
            transparent 52%,
            rgba(255, 255, 255, .00) 52%,
            rgba(255, 255, 255, .09) 58%,
            rgba(255, 255, 255, .00) 68%,
            transparent 68%) 0 64px / 100% 2px no-repeat,

        linear-gradient(to right,
            transparent 0%,
            transparent 12%,
            rgba(255, 255, 255, .00) 12%,
            rgba(255, 255, 255, .12) 20%,
            rgba(255, 255, 255, .00) 31%,
            transparent 31%) 0 108px / 100% 2px no-repeat,

        linear-gradient(to right,
            transparent 0%,
            transparent 61%,
            rgba(255, 255, 255, .00) 61%,
            rgba(255, 255, 255, .10) 67%,
            rgba(255, 255, 255, .00) 78%,
            transparent 78%) 0 151px / 100% 2px no-repeat,

        linear-gradient(to right,
            transparent 0%,
            transparent 28%,
            rgba(255, 255, 255, .00) 28%,
            rgba(255, 255, 255, .08) 34%,
            rgba(255, 255, 255, .00) 44%,
            transparent 44%) 0 194px / 100% 2px no-repeat;


    background-repeat: no-repeat;

    opacity: 0;

    animation:
        relicPathsProcessing 18s ease-in-out infinite;
}


@keyframes relicPathsProcessing {

    /* =========================
       LONG SILENCE
    ========================= */

    0% {
        background-position:
            0 22px,
            0 64px,
            0 108px,
            0 151px,
            0 194px;

        opacity: 0;
    }


    /* =========================
       QUICK APPEARANCE
    ========================= */

    35% {
        opacity: 0;
    }

    36% {
        opacity: .35;
    }


    /* =========================
       VERY FAST SHORT PASS
    ========================= */

    38% {
        background-position:
            0 42px,
            0 84px,
            0 128px,
            0 171px,
            0 214px;

        opacity: .35;
    }


    /* =========================
       IMMEDIATE DISAPPEAR
    ========================= */

    39% {
        opacity: 0;
    }


    /* =========================
       LONG SILENCE
    ========================= */

    78% {
        opacity: 0;
    }


    /* =========================
       QUICK RETURN
    ========================= */

    79% {
        opacity: .35;
    }


    /* =========================
       VERY FAST SHORT RETURN
    ========================= */

    81% {
        background-position:
            0 22px,
            0 64px,
            0 108px,
            0 151px,
            0 194px;

        opacity: .35;
    }


    /* =========================
       IMMEDIATE DISAPPEAR
    ========================= */

    82% {
        opacity: 0;
    }


    /* =========================
       LONG SILENCE
    ========================= */

    100% {
        background-position:
            0 22px,
            0 64px,
            0 108px,
            0 151px,
            0 194px;

        opacity: 0;
    }

}

/* =========================
   WEEKLY LOOP HISTORY
========================= */
.weekly-loop-week-date {
    position: relative;

    width: fit-content;

    margin: 0 auto 4px;

    padding: 3px 10px;

    font-size: 15px;
    font-style: italic;
    font-weight: 500;

    color: rgba(255, 255, 255, 0.62);

    box-sizing: border-box;

    pointer-events: none;
    user-select: none;

    z-index: 10;
}


.weekly-loop-week-date::after {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;
    bottom: 1px;

    height: 1px;

    background:
        rgba(255, 255, 255, 0.22);
}

.weekly-loop-week {
    width: 100%;
    margin-top: 4px;
    margin-bottom: 14px;
}

.weekly-loop-stack {
    position: relative;

    width: 100%;
    height: 87px;

    overflow: visible;
}

/* =========================
   MORE LOOPS INDICATOR
========================= */
.weekly-loop-more {
    position: absolute;

    right: -20px;
    bottom: -24px;

    margin-bottom: 4px;

    z-index: 10;

    font-size: 13px;
    font-style: italic;
    font-weight: 600;

    color: rgba(255, 255, 255, 0.55);

    white-space: nowrap;

    pointer-events: none;
    user-select: none;
}

/* =========================
   Relic Loops
   WEEKLY LOOP CARD
========================= */
#loopsHistoryContainer {
    padding-left: 4px;
    padding-right: 20px;
    /* 🔥 даём пространство для scale */
}

.weekly-loop-card {
    position: absolute;

    top: 0;

    width: calc(100% - 20px);
    height: 87px;

    border-radius: 14px;

    overflow: hidden;

    background: #181818;

    box-sizing: border-box;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.weekly-loop-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    filter: blur(0.5px);
}

/* =========================
   3 Card Stack
========================= */
.weekly-loop-stack--3 {
    margin-top: 40px;
}

.weekly-loop-stack--3 .weekly-loop-card:nth-child(1) {
    left: 40px;
    top: -32px;
    z-index: 1;
}

.weekly-loop-stack--3 .weekly-loop-card:nth-child(2) {
    left: 20px;
    top: -16px;
    z-index: 2;
}

.weekly-loop-stack--3 .weekly-loop-card:nth-child(3) {
    left: 0;
    top: 0;
    z-index: 3;
}

/* =========================
   2 Card Stack
========================= */
.weekly-loop-stack--2 {
    margin-top: 24px;
}

.weekly-loop-stack--2 .weekly-loop-card:nth-child(1) {
    left: 20px;
    top: -16px;
    z-index: 1;

    width: 325px;
}

.weekly-loop-stack--2 .weekly-loop-card:nth-child(2) {
    left: 0;
    top: 0;
    z-index: 2;

    width: 325px;
}

/* =========================
   1 Card Stack
========================= */
.weekly-loop-stack--1 {
    margin-top: 8px;
}

.weekly-loop-stack--1 .weekly-loop-card:nth-child(1) {
    left: 0;
    top: 0;
    z-index: 1;

    width: 345px;
}

/* =========================
   CARD CONTENT
========================= */
.weekly-loop-card-overlay {
    position: absolute;

    top: 12px;
    left: 10px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 3px;

    z-index: 2;

    pointer-events: none;
}


.weekly-loop-card-title {
    color: #ffffff;

    font-size: 17px;
    font-weight: 700;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.9);
}


.weekly-loop-card-hpbar {
    position: relative;

    width: 150px;
    height: 8px;

    border-radius: 999px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.5);
}


.weekly-loop-card-hp-fill {
    position: absolute;

    inset: 0 auto 0 0;

    width: 0%;

    background: #e81224;

    border-radius: inherit;
}

.weekly-loop-card-milestone {
    position: absolute;

    top: -2px;
    bottom: -2px;

    width: 2px;

    background:
        rgba(255, 255, 255, 0.8);

    z-index: 2;

    pointer-events: none;
}

.weekly-loop-card-milestone.milestone-25 {
    left: 25%;
}

.weekly-loop-card-milestone.milestone-50 {
    left: 50%;
}

.weekly-loop-card-milestone.milestone-75 {
    left: 75%;
}


.weekly-loop-card-result,
.weekly-loop-results-card-result {
    margin-top: 1px;
    font-size: 13px;

    font-weight: 700;

    color: #ffffff;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.9);
}

/* =========================================================
   Loops Weekly Reset Finish Screen
========================================================= */
.weekly-reset-finish-content {
    width: 280px;

    text-align: center;

    color: white;
}

/* Loops Stack Cards */
.weekly-reset-finish-stack {
    position: relative;
    width: 100%;
    height: 87px;
    overflow: visible;
}

/* Cards inside the Finish Screen */
.weekly-reset-finish-stack .weekly-loop-card {
    opacity: 0;

    transform:
        translateY(-18px) scale(0.96);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}

/* Revealed card */
.weekly-reset-finish-stack .weekly-loop-card.show {
    opacity: 1;

    transform:
        translateY(0) scale(1);
}


/* EXP to SD LVL */
.weekly-reset-finish-exp {
    margin-top: 8px;

    margin-bottom: 6px;

    font-size: 18px;

    font-weight: bold;

    color: #a855f7;

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.weekly-reset-finish-exp.show {
    opacity: 1;

    transform:
        translateY(0);
}


/* SD LVL Bar */
.weekly-reset-finish-bar {
    width: 270px;

    height: 8px;

    margin:
        0 auto 12px auto;

    background: #292929;

    border-radius: 999px;

    overflow: hidden;

    opacity: 0;

    transition:
        opacity 0.5s ease;
}


/* Buttons */
.weekly-reset-finish-button {
    width: 180px;

    margin:
        8px auto 0 auto;

    display: block;

    opacity: 0;

    transform:
        translateY(6px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.weekly-reset-finish-button.show {
    opacity: 1;

    transform:
        translateY(0);
}

/* =========================================================
   WEEKLY RESET FINISH SCREEN
   MORE LOOPS INDICATOR
========================================================= */
.weekly-reset-finish-stack .weekly-loop-stack .weekly-loop-more {
    position: absolute;

    right: 20px;
    left: auto;

    transform: none;

    bottom: -26px;

    margin: 0;

    z-index: 10;

    font-size: 13px;
    font-style: italic;
    font-weight: 600;

    line-height: 18px;

    color:
        rgba(255, 255, 255, 0.55);

    white-space: nowrap;

    pointer-events: none;
    user-select: none;
}

.weekly-reset-finish-stack:has(.weekly-loop-stack.has-more) {
    padding-bottom: 14px;
}

/* =========================
   WEEKLY RESET FINISH STACK
   Single card
========================= */
#weeklyResetFinishStack {
    margin-bottom: 4px;
}

.weekly-reset-finish-stack .weekly-loop-stack--1 {

    height: 69px;

}

.weekly-reset-finish-stack .weekly-loop-stack--1 .weekly-loop-card:nth-child(1) {
    left: 50%;
    top: 0;
    z-index: 1;
    width: 280px;

    transform:
        translateX(-50%) translateY(12px) scale(0.98);

}


.weekly-reset-finish-stack .weekly-loop-stack--1 .weekly-loop-card:nth-child(1).show {
    opacity: 1;

    transform:
        translateX(-50%) translateY(0) scale(1);

}

/* =========================================================
   WEEKLY RESET FINISH SCREEN
   2 Card Stack
========================================================= */
.weekly-reset-finish-stack .weekly-loop-stack--2 {

    position: relative;

    width: 280px;

    margin-left: auto;
    margin-right: auto;

}


/* =========================================================
   BACK CARD
========================================================= */
.weekly-reset-finish-stack .weekly-loop-stack--2 .weekly-loop-card:nth-child(1) {

    left: 20px;
    top: -16px;

    z-index: 1;

    width: 260px;

    transform:
        translateY(12px) scale(0.98);

}


/* =========================================================
   FRONT CARD
========================================================= */
.weekly-reset-finish-stack .weekly-loop-stack--2 .weekly-loop-card:nth-child(2) {

    left: 0;
    top: 0;

    z-index: 2;

    width: 260px;

    transform:
        translateY(12px) scale(0.98);

}


/* =========================================================
   SHOW
========================================================= */
.weekly-reset-finish-stack .weekly-loop-stack--2 .weekly-loop-card:nth-child(1).show {

    opacity: 1;

    transform:
        translateY(0) scale(1);

}


.weekly-reset-finish-stack .weekly-loop-stack--2 .weekly-loop-card:nth-child(2).show {

    opacity: 1;

    transform:
        translateY(0) scale(1);

}

/* =========================================================
   WEEKLY RESET FINISH SCREEN
   3 Card Stack
========================================================= */
.weekly-reset-finish-stack .weekly-loop-stack--3 {

    position: relative;

    width: 280px;

    margin-left: auto;
    margin-right: auto;

}


/* =========================================================
   BACK CARD
========================================================= */
.weekly-reset-finish-stack .weekly-loop-stack--3 .weekly-loop-card:nth-child(1) {

    left: 40px;
    top: -32px;

    z-index: 1;

    width: 240px;

    transform:
        translateY(12px) scale(0.98);

}


/* =========================================================
   MIDDLE CARD
========================================================= */
.weekly-reset-finish-stack .weekly-loop-stack--3 .weekly-loop-card:nth-child(2) {

    left: 20px;
    top: -16px;

    z-index: 2;

    width: 240px;

    transform:
        translateY(12px) scale(0.98);

}


/* =========================================================
   FRONT CARD
========================================================= */
.weekly-reset-finish-stack .weekly-loop-stack--3 .weekly-loop-card:nth-child(3) {

    left: 0;
    top: 0;

    z-index: 3;

    width: 240px;

    transform:
        translateY(12px) scale(0.98);

}


/* =========================================================
   SHOW
========================================================= */
.weekly-reset-finish-stack .weekly-loop-stack--3 .weekly-loop-card:nth-child(1).show {

    opacity: 1;

    transform:
        translateY(0) scale(1);

}


.weekly-reset-finish-stack .weekly-loop-stack--3 .weekly-loop-card:nth-child(2).show {

    opacity: 1;

    transform:
        translateY(0) scale(1);

}


.weekly-reset-finish-stack .weekly-loop-stack--3 .weekly-loop-card:nth-child(3).show {

    opacity: 1;

    transform:
        translateY(0) scale(1);

}

/* =========================================================
   FEATURED CARD — IMPACT
========================================================= */
/* ---------- 1 CARD ---------- */
.weekly-reset-finish-stack .weekly-loop-stack--1 .weekly-loop-card.featured.show {
    animation:
        weeklyFeaturedCardImpact1 0.9s cubic-bezier(0.22, 0.8, 0.25, 1) forwards;
}


@keyframes weeklyFeaturedCardImpact1 {

    0% {

        opacity: 0;

        transform:
            translateX(-50%) translateY(12px) scale(0.93);

    }

    55% {

        opacity: 1;

        transform:
            translateX(-50%) translateY(0) scale(1.025);

    }

    100% {

        opacity: 1;

        transform:
            translateX(-50%) translateY(0) scale(1);

    }

}


/* ---------- 2 CARDS ---------- */
.weekly-reset-finish-stack .weekly-loop-stack--2 .weekly-loop-card.featured.show {

    animation:
        weeklyFeaturedCardImpact2 0.9s cubic-bezier(0.22, 0.8, 0.25, 1) forwards;

}


@keyframes weeklyFeaturedCardImpact2 {

    0% {

        opacity: 0;

        transform:
            translateY(12px) scale(0.93);

    }

    65% {

        opacity: 1;

        transform:
            translateY(0) scale(1.025);

    }

    82% {

        transform:
            translateY(0) scale(0.995);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0) scale(1);

    }

}


/* ---------- 3 CARDS ---------- */

.weekly-reset-finish-stack .weekly-loop-stack--3 .weekly-loop-card.featured.show {

    animation:
        weeklyFeaturedCardImpact3 0.9s cubic-bezier(0.22, 0.8, 0.25, 1) forwards;

}


@keyframes weeklyFeaturedCardImpact3 {

    0% {

        opacity: 0;

        transform:
            translateY(12px) scale(0.93);

    }

    65% {

        opacity: 1;

        transform:
            translateY(0) scale(1.025);

    }

    82% {

        transform:
            translateY(0) scale(0.995);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0) scale(1);

    }

}

/* =========================================================
   WEEKLY RESET FINISH SCREEN
   MORE LOOPS INDICATOR
========================================================= */
.weekly-reset-finish-stack .weekly-loop-stack .weekly-loop-more {

    opacity: 0;

    transform:
        translateY(6px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

}

/* =========================================================
   SHOW
========================================================= */
.weekly-reset-finish-stack .weekly-loop-stack .weekly-loop-more.show {

    opacity: 1;

    transform:
        translateY(0);

}

/* =========================================================
   Relic Amimations
========================================================= */
/* Z-INDEX ORDER */
/* 11 - FRONT FX */
.relic-effects {
    z-index: 11;
}

/* 10 - PULSE */
.relic-pulse2 {

    z-index: 10;

    opacity: 0;

    animation: relicPulseCycle 11s ease-in-out infinite;
}

/* 9 - UI */
.relic-ui {
    z-index: 9;
}

/* 8 - DETAILS */
.relic-details {
    z-index: 8;
}

/* 7 - DISPLAY */
.relic-display {
    z-index: 7;
}

/* 6 - RING CORE */
.relic-ringcore {
    z-index: 6;
}

/* 5 - LIGHT ON METAL */
.light-on-metal {
    z-index: 5;
}

/* 4 - RELIC GLOW */
.relic-glow-svg {
    z-index: 4;
    transform: translateX(2px);
    filter: brightness(1);

    animation: relicGlowBreath 13s ease-in-out infinite;
}

/* 3 - OUTER RING */
.relic-outer {
    z-index: 3;
}

/* 2 - BACK LIGHT */
.relic-light {
    z-index: 2;

    transform: translateY(5px);

    opacity: 0.85;

    animation: relicLightBreath 10s ease-in-out infinite;
}

.theme-core .relic-light {
    animation: relicLightBreath 10s ease-in-out infinite;
}

.theme-history .relic-light {
    animation: relicLightBreathStable 9s ease-in-out infinite;
}

.theme-history .relic-glow-svg {
    animation: relicGlowMinimumBreath 10s ease-in-out infinite;
}

.theme-history .relic-pulse2 {
    animation: relicPulseWaves 10s ease-in-out infinite;
}

.theme-loops .relic-light {
    animation:
        loopsLightTension 11s ease-in-out infinite;

}

.theme-loops .relic-glow-svg {
    animation:
        loopsGlowPressure 8s ease-in-out infinite;

}

.theme-loops .relic-pulse2 {
    animation:
        loopsPulsePressure 12s ease-in-out infinite;

}

.theme-traces .relic-light {
    animation: tracesLightIdle 24s ease-in-out infinite;
}

.theme-traces .relic-glow-svg {
    animation: tracesDiscovery 18s ease-in-out infinite;
}

.theme-traces .relic-pulse2 {
    animation: tracesScan 14s ease-in-out infinite;
}

.theme-moments .relic-light {
    animation:
        momentsLightDrift 18s ease-in-out infinite;

}

.theme-moments .relic-glow-svg {
    animation:
        momentsGlowMemory 7s linear infinite;

}

.theme-moments .relic-pulse2 {
    animation:
        momentsPulseEcho 16s ease-in-out infinite;

}

/* =========================
   ANIMATIONS RELIC - CORE SUBTAB
========================= */
/* 1 - CORE */
@keyframes relicLightBreath {

    0% {
        opacity: .86;
    }

    32% {
        opacity: 1;
    }

    100% {
        opacity: .86;
    }
}

/* =========================
   ANIMATIONS RELIC - TRACES SUBTAB
========================= */
/* LIGHT SLOW */
@keyframes tracesLightIdle {

    0%,
    100% {
        opacity: 0.97;
    }

    50% {
        opacity: 1;
    }
}

/* DISCOVERY */
@keyframes tracesDiscovery {

    0%,
    41%,
    100% {
        filter: brightness(1);
    }

    43% {
        filter: brightness(1.16);
    }

    46% {
        filter: brightness(1);
    }

    78% {
        filter: brightness(1.12);
    }

    81% {
        filter: brightness(1);
    }
}

/* SCAN */
@keyframes tracesScan {

    0%,
    30% {
        opacity: .08;
    }

    34% {
        opacity: .58;
    }

    37% {
        opacity: .12;
    }

    70% {
        opacity: .12;
    }

    74% {
        opacity: .72;
    }

    77% {
        opacity: .08;
    }

    100% {
        opacity: .08;
    }

}

@keyframes tracesRelicScan {

    0% {
        background-position: 0 -70px;
        opacity: 0;
    }

    10% {
        opacity: .35;
    }

    45% {
        background-position: 0 calc(100% + 35px);
        opacity: .35;
    }

    50% {
        background-position: 0 calc(100% + 35px);
        opacity: .35;
    }

    85% {
        background-position: 0 -70px;
        opacity: .35;
    }

    90% {
        opacity: 0;
    }

    100% {
        background-position: 0 -70px;
        opacity: 0;
    }

}

/* =========================
   ANIMATIONS RELIC - PATHS SUBTAB
========================= */
@keyframes relicLightBreathStable {

    0%,
    100% {
        opacity: .94;
    }

    25% {
        opacity: .98;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: .97;
    }

}

@keyframes relicGlowMinimumBreath {

    0%,
    100% {
        filter: brightness(1);
    }

    35% {
        filter: brightness(1.05);
    }

    55% {
        filter: brightness(1.12);
    }

    75% {
        filter: brightness(1.04);
    }

}

@keyframes relicPulseWaves {

    0%,
    100% {
        opacity: .08;
    }

    18% {
        opacity: .16;
    }

    32% {
        opacity: .10;
    }

    55% {
        opacity: .28;
    }

    72% {
        opacity: .12;
    }

}

/* =========================
   ANIMATIONS RELIC - LOOPS SUBTAB
========================= */
/* LIGHT — restrained tension */
@keyframes loopsLightTension {

    0%,
    100% {
        opacity: .92;
    }

    28% {
        opacity: .97;
    }

    52% {
        opacity: .90;
    }

    68% {
        opacity: .99;
    }

}


/* GLOW — pressure building and releasing */
@keyframes loopsGlowPressure {

    0%,
    100% {
        filter:
            brightness(1);
    }

    24% {
        filter:
            brightness(1.04);
    }

    48% {
        filter:
            brightness(1.10);
    }

    55% {
        filter:
            brightness(1.04);
    }

    76% {
        filter:
            brightness(1.07);
    }

}


/* PULSE — restrained pressure waves */
@keyframes loopsPulsePressure {

    0%,
    100% {
        opacity: .10;
    }

    20% {
        opacity: .14;
    }

    38% {
        opacity: .22;
    }

    46% {
        opacity: .12;
    }

    63% {
        opacity: .18;
    }

    71% {
        opacity: .28;
    }

    79% {
        opacity: .11;
    }

}

/* =========================
   ANIMATIONS RELIC - MOMENTS SUBTAB
========================= */
/* LIGHT DRIFT */
@keyframes momentsLightDrift {

    0% {
        opacity: .94;
    }

    19% {
        opacity: 1;
    }

    43% {
        opacity: .96;
    }

    67% {
        opacity: 1;
    }

    82% {
        opacity: .97;
    }

    100% {
        opacity: .94;
    }

}

/* MEMORY NOISE */
@keyframes momentsGlowMemory {

    0% {
        filter: brightness(1);
    }

    9% {
        filter: brightness(1.03);
    }

    17% {
        filter: brightness(.98);
    }

    29% {
        filter: brightness(1.05);
    }

    38% {
        filter: brightness(1.01);
    }

    52% {
        filter: brightness(.97);
    }

    64% {
        filter: brightness(1.07);
    }

    72% {
        filter: brightness(1.02);
    }

    87% {
        filter: brightness(1.05);
    }

    100% {
        filter: brightness(1);
    }

}


/* ECHO PULSE */
@keyframes momentsPulseEcho {

    0% {
        opacity: .13;
    }

    31% {
        opacity: .18;
    }

    35% {
        opacity: .48;
    }

    39% {
        opacity: .20;
    }

    58% {
        opacity: .25;
    }

    62% {
        opacity: .62;
    }

    66% {
        opacity: .34;
    }

    72% {
        opacity: .17;
    }

    100% {
        opacity: .13;
    }

}

/* =========================
   CORE TAB - UNDER RELIC IMAGE
========================= */
/* CORE PROFILE */

.core-profile-layout {
    display: flex;
    align-items: flex-start;

    gap: 16px;

    margin-top: 14px;
}

.core-portrait {
    flex-shrink: 0;

    width: 144px;
    height: 215px;
    position: relative;
    cursor: pointer;
}

.core-portrait-image {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}

.core-portrait-edit {
    position: absolute;

    top: 4px;
    right: 4px;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;

    background: rgba(0, 0, 0, .55);

    color: white;

    pointer-events: none;

}

.core-profile-info {
    flex: 1;
    margin-left: 5px;

    min-width: 0;
}

.player-name-container {
    width: 100%;
    max-width: 220px;
    margin-top: -4px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

    user-select: none;
}

.player-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.player-name-value {

    color: #36E08A;

    font-size: 18px;
    font-weight: 600;
}

.player-name-label {
    color: rgba(255, 255, 255, 0.7);

    font-size: 14px;
    letter-spacing: 0.04em;
}

.backup-status-title {
    color: rgba(255, 255, 255, 0.65);

    font-size: 14px;
    margin-left: -4px;
    font-weight: bold;
    letter-spacing: 0.04em;
}

.backup-status-age,
.backup-status-exp {
    color: rgba(255, 255, 255, 0.65);

    font-size: 12px;
    letter-spacing: 0.04em;
}

.backup-status-toggle {
    cursor: pointer;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    padding: 0;
    display: flex;
    align-items: left;
    gap: 6px;
    width: fit-content;
}

.backup-status-toggle:hover {
    background: none;
}

.backup-status-arrow {
    transition: transform 0.2s ease;
    display: inline-block;
    flex-shrink: 0;
    margin-top: 2px;
}

.backup-status-details.collapsed {
    display: none;
}

.backup-status-details {
    margin-top: 6px;
}

.backup-status-container {
    margin-top: 10px;
}

.player-name-input {
    max-width: 120px;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    outline: none;

    color: #36E08A;

    font-size: 16px;
    font-weight: 600;

    padding: 0;

    text-align: left;

    transition: all 0.2s ease;
}

.player-name-input.editing {
    border-bottom: 1px solid #ffffff;

    color: #E8FFF4;

    text-shadow: 0 0 10px rgba(154, 64, 238, 0.3);
}

#editNicknameBtn {
    background: none;
    border: none;

    color: #ffffff;

    cursor: pointer;

    font-size: 18px;

    padding: 2px;

    opacity: 0.8;

    transition: all 0.15s ease;
}

#editNicknameBtn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Текст LVL */
.sd-level-title {
    margin-top: 16px;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: bold;
    color: #E8FFF4;
}

/* SD Level Wrapper - Container */
.sd-level-wrapper {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    width: 100%;
    max-width: 200px;

    gap: 4px;
}

/* SD Level Bar - Bar Container */
.sd-level-bar {
    margin-bottom: 2px;
    width: 150px;
    min-height: 16px;
}

/* SD Level EXP - EXP Text */
.sd-level-exp {
    margin-left: 4px;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: normal;
    color: rgba(232, 255, 244, 0.9);
}

/* =========================
   IMPRINT TAB FROM BOTTOM NAV
========================= */
/* 🔲 Общий блок секции */
.imprint-section {
    margin: 16px;
    margin: 20px 12px 10px 12px;
    padding: 16px;
    border-radius: 16px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.06);

    position: relative;

    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.imprint-section:active {
    transform: scale(0.98);
}


/* 🧠 Хедер */
.imprint-header {
    margin-bottom: 10px;
}

/* 🔹 Subtitle = название типа (Artifact / Achievement / Direction) */
.imprint-subtitle {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    opacity: 0.9;
}

/* 📜 Контент */
.imprint-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.imprint-charge-hint {
    position: absolute;
    top: 12px;
    right: 14px;

    font-size: 12px;
    opacity: 0.55;
    font-style: italic;

    color: rgba(255, 255, 255, 0.75);
}

/* ✨ Lore текст (сильный акцент) */
.imprint-lore,
.artifactImprintLore,
.achievementImprintLore {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.75;

    font-style: italic;
    /* 🔥 ощущение “мысли/памяти” */
    padding-left: 10px;
    border-left: 2px solid rgba(255, 255, 255, 0.1);

    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    max-width: 100%;
}

.artifact-imprint-lore-with-hint,
.achievement-imprint-lore-with-hint {
    padding-right: 150px;
}

/* 🎯 Кнопка Capture It (чуть улучшим) */
.primary-btn {
    align-self: flex-start;
}

/* =========================
   DIRECTIONS SECTION IMPRINT TAB
========================= */
.imprint-direction-section {

    position: relative;

    margin-top: 52px;
}

/* subtle separator */
.imprint-direction-section::before {

    content: "";

    position: absolute;

    top: -28px;
    left: 50%;

    transform: translateX(-50%);

    width: 72%;

    height: 1px;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.096),
            transparent);

    pointer-events: none;
}

/* =========================
   ADD ARTIFACT OVERPLAY
========================= */
.imprint-add-overlay.hidden,
#addArtifactOverlay.hidden,
#addAchievementOverlay.hidden {
    display: none !important;

    opacity: 0;
    pointer-events: none;
}

.imprint-add-overlay,
#addArtifactOverlay,
#addAchievementOverlay {
    position: fixed;
    inset: 0;
    /* top:0 right:0 bottom:0 left:0 */
    z-index: 9999;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 0;

    background: rgba(0, 0, 0, 0.6);
    /* важно: затемнение */

    box-sizing: border-box;

    opacity: 1;
    transition: opacity 0.2s ease;
}

/* сам контейнер */
.imprint-add-overlay .overlay-content,
#addArtifactOverlay .overlay-content,
#addAchievementOverlay .overlay-content {
    margin: 10px auto;
    /* НЕ width, НЕ padding — только позиция */
}

/* Кнопка закрытия (как в manual) */
#closeAvatarOverlay,
#closeArtifactOverlay,
#closeAchievementOverlay,
#closeDirectionsOverlay,
#closeAddDirectionOverlay,
#closeEditDirectionOverlay,
#closeBeginPathDirectionsOverlay,
#manualCloseBtn,
#weeklyLoopResultsCloseButton,
#closeEditLogNoteBtn,
#closeEditArtifactBtn,
#closeEditAchievementBtn,
#tutorialArchiveClose {
    position: absolute;
    top: 10px;
    right: 10px;

    z-index: 10;

    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

#closeImprintsFilterBtn {
    position: absolute;
    margin-top: 10px;
    top: -4px;
    right: 10px;

    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

#achievementTitleError,
#artifactTitleError,
#directionTitleError,
#editDirectionTitleError {
    color: rgba(255, 90, 90, 0.95);

    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    margin: 0 8px;
    padding: 0 10px;

    background: rgba(255, 92, 92, 0.08);
    border-left: 3px solid rgba(228, 15, 15, 0.85);

    text-shadow:
        0 0 6px rgba(255, 92, 92, 0.35);

    border-radius: 3px;

    opacity: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;

    transition:
        opacity 0.18s ease,
        max-height 0.18s ease,
        margin 0.18s ease,
        padding 0.18s ease,
        visibility 0.18s ease;
}

#achievementTitleError.is-visible,
#artifactTitleError.is-visible,
#directionTitleError.is-visible,
#editDirectionTitleError.is-visible {
    opacity: 1;
    max-height: 60px;

    margin: 8px 8px 0 8px;
    padding: 8px 10px;

    visibility: visible;
}

.artifact-rarity-question {

    display: block;

    margin-bottom: 2px;
    margin-left: 8px;

    font-size: 14px;

    line-height: 1.2;

    letter-spacing: .035em;

    color:
        rgba(255, 255, 255, .6);

}

/* Artifact Overlay fields */
.imprint-overlay-input,
.imprint-overlay-select,
.imprint-overlay-textarea,
#artifactTitleInput,
#artifactRaritySelect,
#artifactDescriptionInput,
#achievementTitleInput,
#achievementRaritySelect,
#achievementDescriptionInput {
    width: 100%;
    box-sizing: border-box;
}

.imprint-overlay-textarea,
#artifactDescriptionInput,
#achievementDescriptionInput {
    line-height: 1.4;
}

/* Input стиль под overlay */
.imprint-overlay-input,
.imprint-overlay-select,
#artifactTitleInput,
#artifactRaritySelect,
#achievementTitleInput,
#achievementRaritySelect {
    background: #1a1a1a;
    border: none;
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    font-size: 14px;
}

.imprint-overlay-input,
#artifactTitleInput,
#achievementTitleInput {
    margin-bottom: 0px;
}

.imprint-overlay-select,
#artifactRaritySelect,
#achievementRaritySelect {
    margin-bottom: 6px;
}

.artifact-hint,
.achievement-hint {
    font-size: 13px;
    line-height: 1.5;

    margin-left: 8px;

    font-style: italic;

    color: rgba(255, 255, 255, 0.6);

    /* 🔥 лёгкое смещение для ощущения "внутреннего голоса" */
    padding-left: 2px;

    transition: all 0.25s ease;
}

/* Rarity Colors Artifacts */
.artifact-hint.rarity-uncommon {
    color: rgba(89, 203, 83, 0.85);
    text-shadow: 0 0 4px rgba(89, 203, 83, 0.12);
}

.artifact-hint.rarity-rare {
    color: rgba(80, 152, 211, 0.9);
    text-shadow: 0 0 5px rgba(80, 152, 211, 0.18);
}

.artifact-hint.rarity-epic {
    color: rgba(168, 85, 247, 0.95);
    text-shadow: 0 0 6px rgba(168, 85, 247, 0.25);
}

.artifact-hint.rarity-legendary {
    color: rgba(251, 146, 60, 1);
    text-shadow: 0 0 6px rgba(251, 146, 60, 0.4);
}

#editArtifactTitleInput.rarity-uncommon {
    border-color: rgba(89, 203, 83, 0.85);
}

#editArtifactTitleInput.rarity-rare {
    border-color: rgba(80, 152, 211, 0.9);
}

#editArtifactTitleInput.rarity-epic {
    border-color: rgba(168, 85, 247, 0.95);
}

#editArtifactTitleInput.rarity-legendary {
    border-color: rgba(251, 146, 60, 1);
}

/* textarea чуть выше визуально */
.imprint-comment-container,
#artifactCommentContainer,
#achievementCommentContainer {
    display: flex;
    flex-direction: column;

    margin-top: 6px;
    /* отделяет от rarity */
    margin-bottom: 6px;
    /* отделяет от кнопки */
    gap: 0;

    height: 200px;
    overflow-y: auto;
}

/* textarea как в manual */
.imprint-comment-container textarea,
#artifactCommentContainer textarea,
#achievementCommentContainer textarea {
    width: 100%;
    height: 90%;
    background: #1a1a1a;
    border: none;
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    resize: none;

    overflow-y: auto;
}

.imprint-save-btn,
.save-avatar-btn,
#saveArtifactBtn,
#saveAchievementBtn {
    margin-top: 6px;
    align-self: center;

    width: 100%;
    max-width: none;

    display: flex;
    justify-content: center;

    align-self: stretch;
    /* ключевой момент */

    padding: 12px 14px;
}

/* =========================
   IMPRINTS TAB (ВНУТРИ RELIC)
========================= */
#imprintsFeed {
    padding: 0 14px;
    /* 🔥 даём пространство для scale */
}

.imprint-item {
    padding: 12px 32px 12px 12px;
    border-bottom: 1px solid #222;

    position: relative;
    box-sizing: border-box;
}

.imprint-item.expanded,
.imprint-item-achievement.expanded {
    transform: none;
}

.imprint-item::after,
.imprint-item::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.imprint-item-title {
    font-weight: bold;
    font-weight: 600;
    font-size: 15px;

    padding-right: 18px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.imprint-edit-hint {
    position: absolute;
    top: 12px;
    right: 12px;

    font-size: 14px;
    line-height: 1;

    color: rgba(255, 255, 255, 0.8);

    pointer-events: none;
    user-select: none;
}

.imprint-item-meta {
    font-size: 12px;
    opacity: 0.8;
}

.imprint-item-desc {
    font-size: 12px;
    margin-top: 6px;
    opacity: 0.9;
    white-space: pre-wrap;
}

.imprint-date {
    margin-top: 18px;
    margin-bottom: 6px;

    font-size: 13px;
    font-weight: 600;

    opacity: 0.7;
    letter-spacing: 0.5px;
}

.imprint-date:first-child {
    margin-top: 0;
}

.imprint-edit-btn {
    margin-top: 8px;

    padding: 8px 0;
    width: 100%;

    background: #222;
    color: white;

    border: none;
    border-radius: 8px;

    cursor: pointer;

    font-size: 13px;

    transform: translateZ(0);
}

.imprint-item-actions {
    overflow: hidden;

    max-height: 0;

    opacity: 0;

    pointer-events: none;
}

.imprint-item.expanded .imprint-item-actions,
.imprint-item-achievement.expanded .imprint-item-actions {
    max-height: 44px;
    opacity: 1;

    pointer-events: auto;
}

/* =========================
   ARTIFACT RARITY COLORS (UPDATED)
========================= */
.imprint-item {
    padding: 12px 12px 12px 20px;
    border-radius: 14px 14px 6px 14px;
    margin-bottom: 10px;

    transform: translateY(0);

    color: #fff;

    /* базовый тёмный фон */
    background: #1a1a1a;
    border: 1px solid #222;

    position: relative;
    overflow: hidden;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45),
        0 2px 6px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.06);

    transition: 0.25s ease;
}

.imprint-accent {
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 4px;
}

.rarity-uncommon .imprint-accent {
    background: #59cb53;
}

.rarity-rare .imprint-accent {
    background: #5098d3;
}

.rarity-epic .imprint-accent {
    background: #a855f7;
}

.rarity-legendary .imprint-accent {
    background: #fb923c;
}

.imprint-item.rarity-uncommon {
    background: linear-gradient(135deg,
            rgba(89, 203, 83, 0.35),
            rgba(89, 203, 83, 0.18));
    border: 1px solid rgba(89, 203, 83, 0.55);
}

.imprint-item.rarity-rare {
    background: linear-gradient(135deg,
            rgba(80, 152, 211, 0.35),
            rgba(80, 152, 211, 0.18));
    border: 1px solid rgba(80, 152, 211, 0.55);
}

.imprint-item.rarity-epic {
    background: linear-gradient(135deg,
            rgba(168, 85, 247, 0.35),
            rgba(168, 85, 247, 0.18));
    border: 1px solid rgba(168, 85, 247, 0.55);
}

.imprint-item.rarity-legendary {
    background: linear-gradient(135deg,
            rgba(251, 146, 60, 0.4),
            rgba(251, 146, 60, 0.2));
    border: 1px solid rgba(251, 146, 60, 0.65);
}

.imprint-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    opacity: 0.7;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.imprint-item.rarity-uncommon::before {
    box-shadow: inset 0 0 25px rgba(89, 203, 83, 0.25);
}

.imprint-item.rarity-rare::before {
    box-shadow: inset 0 0 25px rgba(80, 152, 211, 0.25);
}

.imprint-item.rarity-epic::before {
    box-shadow: inset 0 0 30px rgba(168, 85, 247, 0.3);
}

.imprint-item.rarity-legendary::before {
    box-shadow: inset 0 0 35px rgba(251, 146, 60, 0.35);
}

.imprint-item::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: soft-light;
    opacity: 0.7;
}

.imprint-item.rarity-uncommon::after {
    border: 1px solid rgba(89, 203, 83, 0.25);
}

.imprint-item.rarity-rare::after {
    border: 1px solid rgba(80, 152, 211, 0.25);
}

.imprint-item.rarity-epic::after {
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.imprint-item.rarity-legendary::after {
    border: 1px solid rgba(251, 146, 60, 0.4);
}

.imprint-item:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(255, 255, 255, 0.08);
}

/* =========================
   Artifact Patterns
========================= */
.pattern-shard-lines::before {
    background: repeating-linear-gradient(-30deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.07) 2px,
            transparent 2px,
            transparent 10px);
}

/* 2. hex-grid-light + */
.pattern-hex-grid-light::before {
    background: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.04), transparent 10px),
        repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.04), transparent 10px);
    background-size: 20px 35px;
}

/* 3. fractured-light + */
.pattern-fractured-light::before {
    background: linear-gradient(30deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
        linear-gradient(-30deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%);
    background-size: 20px 20px;
}

/* 4. checker-fade + */
.pattern-checker-fade::before {
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%);
    background-size: 16px 16px;

    mask-image: linear-gradient(to right,
            transparent 0%,
            black 40%,
            black 100%);
}

/* 5. micro-dots (очень мелкая текстура) + */
.pattern-micro-dots::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 8px 8px;
}

/* 6. angled-grid (наклонённая сетка) + */
.pattern-angled-grid::before {
    background: repeating-linear-gradient(60deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 12px),
        repeating-linear-gradient(-60deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 12px);
}

/* 7. wave-stripes (волнистые полосы) + */
.pattern-wave-stripes::before {
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 10px);
    transform: skewY(10deg);
}

/* 8. diagonal-lines + */
.pattern-diagonal-lines::before {
    background: repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.06) 0px,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px,
            transparent 8px);
}

/* 9. layered-grid (двойная сетка) + */
.pattern-layered-grid::before {
    background: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 10px 10px, 10px 10px;
}

/* 10. ring-offset (смещённые круги) + */
.pattern-ring-offset::before {
    background: repeating-radial-gradient(circle at 30% 40%,
            rgba(255, 255, 255, 0.05),
            transparent 10px,
            rgba(255, 255, 255, 0.03) 20px);
}

/* 11. pixel-grid (пиксельная структура) + */
.pattern-pixel-grid::before {
    background: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 6px 6px;
}

/* 12. Scanlines (тонкие “CRT-линии”) + */
.pattern-scanlines::before {
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px,
            transparent 4px);
}

/* 13. arc-segments (обновлённый, смещённый центр) + */
.pattern-arc-segments::before {
    background: repeating-radial-gradient(circle at 58% 50%,
            /* 🔥 смещение вправо */
            transparent 0px,
            transparent 8px,
            rgba(255, 255, 255, 0.05) 8px,
            rgba(255, 255, 255, 0.05) 10px);

    mask-image: linear-gradient(to right,
            transparent 0%,
            black 20%,
            black 80%,
            transparent 100%);
}

/* 14. masked-stripes (разорванные полосы) + */
.pattern-masked-stripes::before {
    background: repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.07) 3px,
            transparent 3px,
            transparent 14px);

    mask-image: radial-gradient(circle at 70% 50%,
            black 40%,
            transparent 70%);
}

/* 15. conic-grid-break + */
.pattern-conic-grid-break::before {
    background: conic-gradient(rgba(255, 255, 255, 0.05) 0deg 10deg,
            transparent 10deg 40deg);
    background-size: 40px 40px;
}

/* =========================
   Achievements
========================= */
/* Rarity Colors Achievements */
.imprint-item-achievement {
    padding: 12px 12px 12px 42px;
    border-radius: 0;

    clip-path: polygon(12px 0%,
            calc(100% - 12px) 0%,
            100% 12px,
            100% calc(100% - 12px),
            calc(100% - 12px) 100%,
            12px 100%,
            0% calc(100% - 12px),
            0% 12px);
    margin-bottom: 10px;

    transform: translateY(0);

    color: #fff;

    /* базовый тёмный фон */
    background: radial-gradient(circle at 65% 70%,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.03) 38%,
            rgba(0, 0, 0, 0.18) 100%),
        #2b2e34;
    border: none;

    position: relative;
    overflow: hidden;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18),
        0 0 10px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    transition: 0.25s ease;
}

.imprint-item-achievement::after {
    content: "";

    position: absolute;

    top: 0;
    left: 40%;

    width: 70%;
    height: 4px;
    filter: blur(1px);
    opacity: 0.55;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.541),
            transparent);

    opacity: 0.45;

    pointer-events: none;
}

.imprint-item-achievement::before {
    content: "";

    position: absolute;

    inset: 0;

    clip-path: inherit;

    pointer-events: none;

    border: 2px solid rgba(255, 255, 255, 0.16);

    box-sizing: border-box;

    opacity: 1;
}

.achievement-hint.rarity-bronze,
.achievement-hint.achievement-rarity-bronze {
    color: rgba(184, 115, 51, 0.979);
    text-shadow: 0 0 8px rgba(184, 115, 51, 0.32);
}

.achievement-hint.rarity-silver,
.achievement-hint.achievement-rarity-silver {
    color: rgba(214, 217, 223, 0.98);
    text-shadow: 0 0 8px rgba(214, 217, 223, 0.28);
}

.achievement-hint.rarity-gold,
.achievement-hint.achievement-rarity-gold {
    color: rgba(255, 204, 51, 1);
    text-shadow: 0 0 10px rgba(255, 204, 51, 0.35);
}

.achievement-hint.rarity-diamond,
.achievement-hint.achievement-rarity-diamond {
    color: rgba(77, 231, 255, 1);
    text-shadow: 0 0 12px rgba(77, 231, 255, 0.4);
}

#editAchievementTitleInput.achievement-rarity-bronze {
    border-color: rgba(184, 115, 51, 0.979);
}

#editAchievementTitleInput.achievement-rarity-silver {
    border-color: rgba(214, 217, 223, 0.98);
}

#editAchievementTitleInput.achievement-rarity-gold {
    border-color: rgba(255, 204, 51, 1);
}

#editAchievementTitleInput.achievement-rarity-diamond {
    border-color: rgba(77, 231, 255, 1);
}

/* Accents Achievements */
.achievement-accent,
.imprint-item .achievement-accent,
.imprint-item-achievement .achievement-accent,
.imprint-item-achievement .imprint-accent {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translateY(-50%);
    overflow: hidden;

    --x: 5px;
    --y: 3px;
    --accent-duration: 8s;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35),
        0 0 10px rgba(0, 0, 0, 0.25);
}

.achievement-accent::before {
    content: "";
    position: absolute;

    width: 40%;
    height: 40%;
    border-radius: 70%;

    background: rgba(255, 255, 255, 0.9);
    filter: blur(1px);

    top: var(--y);
    left: var(--x);

    mix-blend-mode: screen;

    animation: accent-light var(--accent-duration) ease-in-out infinite;
}

@keyframes accent-light {

    /* долго ничего нет */
    0%,
    40% {
        transform: scale(0.8);
        opacity: 0;
    }

    /* появление */
    46% {
        transform: scale(1);
        opacity: 0.35;
    }

    /* вход в пик */
    52% {
        transform: scale(1.15);
        opacity: 0.65;
    }

    /* ======= УДЛИНЁННОЕ ГОРЕНИЕ ======= */
    58%,
    82% {
        transform: scale(1.05);
        opacity: 0.6;
    }

    /* мягкое затухание */
    88% {
        transform: scale(0.9);
        opacity: 0.25;
    }

    /* исчезновение */
    94%,
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}

.rarity-bronze .achievement-accent,
.achievement-rarity-bronze .achievement-accent,
.rarity-bronze .imprint-accent,
.achievement-rarity-bronze .imprint-accent {

    background: #b87333;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45),
        0 0 6px rgba(184, 115, 51, 0.35),
        inset 0 0 6px rgba(255, 180, 120, 0.18);
}

.rarity-silver .achievement-accent,
.achievement-rarity-silver .achievement-accent,
.rarity-silver .imprint-accent,
.achievement-rarity-silver .imprint-accent {

    background: #d6d9dfc2;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4),
        0 0 7px rgba(214, 217, 223, 0.25),
        inset 0 0 6px rgba(255, 255, 255, 0.18);
}

.rarity-gold .achievement-accent,
.achievement-rarity-gold .achievement-accent,
.rarity-gold .imprint-accent,
.achievement-rarity-gold .imprint-accent {

    background: #ffcc33;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45),
        0 0 8px rgba(255, 204, 51, 0.35),
        inset 0 0 7px rgba(255, 240, 160, 0.22);
}

.rarity-diamond .achievement-accent,
.achievement-rarity-diamond .achievement-accent,
.rarity-diamond .imprint-accent,
.achievement-rarity-diamond .imprint-accent {

    background: #4de7ff;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(77, 231, 255, 0.35),
        inset 0 0 8px rgba(180, 255, 255, 0.25);
}

/* Card Backgrounds Achievements */
.achievement-item.rarity-bronze,
.achievement-item.achievement-rarity-bronze,
.imprint-item.rarity-bronze,
.imprint-item.achievement-rarity-bronze,
.imprint-item-achievement.rarity-bronze,
.imprint-item-achievement.achievement-rarity-bronze {
    background: linear-gradient(135deg,
            rgba(184, 115, 51, 0.50),
            rgba(184, 115, 51, 0.24));

    border: 1px solid rgba(184, 115, 51, 0.726), ;
}

.achievement-item.rarity-silver,
.achievement-item.achievement-rarity-silver,
.imprint-item.rarity-silver,
.imprint-item.achievement-rarity-silver,
.imprint-item-achievement.rarity-silver,
.imprint-item-achievement.achievement-rarity-silver {
    background: linear-gradient(135deg,
            rgba(214, 217, 223, 0.52),
            rgba(214, 217, 223, 0.26));

    border: 1px solid rgba(214, 217, 223, 0.74);
}

.achievement-item.rarity-gold,
.achievement-item.achievement-rarity-gold,
.imprint-item.rarity-gold,
.imprint-item.achievement-rarity-gold,
.imprint-item-achievement.rarity-gold,
.imprint-item-achievement.achievement-rarity-gold {
    background: linear-gradient(135deg,
            rgba(255, 204, 51, 0.54),
            rgba(255, 204, 51, 0.28));

    border: 1px solid rgba(255, 204, 51, 0.849);
}

.achievement-item.rarity-diamond,
.achievement-item.achievement-rarity-diamond,
.imprint-item.rarity-diamond,
.imprint-item.achievement-rarity-diamond,
.imprint-item-achievement.rarity-diamond,
.imprint-item-achievement.achievement-rarity-diamond {
    background: linear-gradient(135deg,
            rgba(77, 231, 255, 0.56),
            rgba(77, 231, 255, 0.30));

    border: 1px solid rgba(77, 231, 255, 0.911);
}

/* Metallic Glow Achievements */
.achievement-item.rarity-bronze::before,
.achievement-item.achievement-rarity-bronze::before,
.imprint-item.rarity-bronze::before,
.imprint-item.achievement-rarity-bronze::before,
.imprint-item-achievement.rarity-bronze::before,
.imprint-item-achievement.achievement-rarity-bronze::before {
    border-color: rgba(255, 170, 90, 0.52);

    box-shadow: inset 0 0 12px rgba(255, 210, 140, 0.18),
        0 0 14px rgba(184, 115, 51, 0.24);
}

.achievement-item.rarity-silver::before,
.achievement-item.achievement-rarity-silver::before,
.imprint-item.rarity-silver::before,
.imprint-item.achievement-rarity-silver::before,
.imprint-item-achievement.rarity-silver::before,
.imprint-item-achievement.achievement-rarity-silver::before {
    border-color: rgba(255, 255, 255, 0.52);

    box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.22),
        0 0 18px rgba(214, 217, 223, 0.28);
}

.achievement-item.rarity-gold::before,
.achievement-item.achievement-rarity-gold::before,
.imprint-item.rarity-gold::before,
.imprint-item.achievement-rarity-gold::before,
.imprint-item-achievement.rarity-gold::before,
.imprint-item-achievement.achievement-rarity-gold::before {
    border-color: rgba(255, 220, 120, 0.62);

    box-shadow: inset 0 0 16px rgba(255, 235, 160, 0.24),
        0 0 24px rgba(255, 204, 51, 0.32);
}

.achievement-item.rarity-diamond::before,
.achievement-item.achievement-rarity-diamond::before,
.imprint-item.rarity-diamond::before,
.imprint-item.achievement-rarity-diamond::before,
.imprint-item-achievement.rarity-diamond::before,
.imprint-item-achievement.achievement-rarity-diamond::before {
    border-color: rgba(170, 245, 255, 0.72);

    box-shadow: inset 0 0 18px rgba(180, 255, 255, 0.22),
        0 0 28px rgba(77, 231, 255, 0.36);
}

/* =========================
   DIRECTIONS
========================= */
.directions-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* =========================
   DIRECTION CARD
========================= */
.direction-card {
    position: relative;
    margin-bottom: 10px;

    padding: 8px 26px 8px 16px;

    border-radius: 18px;

    overflow: hidden;

    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.02));

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    border: 1px solid rgba(255, 255, 255, 0.06);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    isolation: isolate;
}

.direction-card.is-dragging {
    opacity: 0.92;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.direction-card-placeholder {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: none;
}

/* лёгкое "оживление", но без игровой агрессии */
.direction-card:hover {
    border-color: rgba(255, 255, 255, 0.10);
}

.direction-card::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.9;

    pointer-events: none;
}

/* =========================
   OPEN CORNER
========================= */
.direction-card::after {
    content: "";

    position: absolute;

    right: 14px;
    bottom: 12px;

    width: 72px;
    height: 72px;

    opacity: 0.14;

    pointer-events: none;
}

/* =========================
   TITLE
========================= */
.direction-card-title {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

/* =========================
   COMMENT
========================= */
.direction-card-comment {
    font-size: 12px;
    font-style: italic;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    white-space: pre-wrap;
}

.direction-card-drag-handle {
    position: absolute;

    top: 14px;
    right: 6px;
    padding-top: 0px;
    padding-right: 0px;

    z-index: 2;

    width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(255, 255, 255, 0.22);

    font-size: 11px;
    line-height: 1;

    cursor: grab;

    user-select: none;
    -webkit-user-select: none;

    touch-action: none;

    background: transparent;

    border: none;

    opacity: 0.7;

    transition: opacity 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.direction-card-drag-handle:hover {

    background: transparent !important;

    background-color: transparent !important;

    color: rgba(255, 255, 255, 0.22);

    opacity: 0.7;
}

.direction-card-drag-handle:active {

    cursor: grabbing;

    transform: scale(0.94);
}

.direction-card-drag-handle:active {
    cursor: grabbing;
    background: rgba(255, 255, 255, 0.08);
}

.direction-card.is-expanded {
    border-color: rgba(255, 255, 255, 0.18);
}

.direction-card-event {
    position: relative;
    z-index: 1;

    margin-bottom: 10px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.38);

    font-family: "SF Mono",
        "Roboto Mono",
        "Consolas",
        monospace;
}

/* =========================
   EMPTY STATE
========================= */
.directions-empty {

    padding: 18px 10px;

    text-align: center;

    font-size: 14px;

    line-height: 1.5;

    color: rgba(255, 255, 255, 0.42);
}

/* =========================
   DIRECTION CARD ACTIONS
========================= */
.direction-card-actions {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: row;

    gap: 10px;

    margin-top: 14px;

    width: 100%;
}

/* =========================
   DIRECTION CARD BUTTON
========================= */
.direction-card-btn {
    background: #111;
    flex: 1;

    width: 0;
    max-width: none;

    margin-top: 8px;
    margin-right: 0;

    border: none;
    border-radius: 8px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 13px;

    cursor: pointer;

    transform: translateZ(0);
}

/* =========================
   DIRECTION CARD PATTERNS LIGHT
========================= */
.direction-bf-1::before {
    background: radial-gradient(circle at 60% 65%,
            rgba(255, 255, 255, 0.08),
            transparent 75%),
        radial-gradient(circle at 20% 30%,
            rgba(255, 255, 255, 0.04),
            transparent 80%);
}

.direction-bf-2::before {
    background: radial-gradient(circle at 85% 40%,
            rgba(255, 255, 255, 0.06),
            transparent 78%),
        radial-gradient(circle at 30% 80%,
            rgba(255, 255, 255, 0.05),
            transparent 70%);
}

.direction-bf-3::before {
    background: radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, 0.10),
            transparent 82%),
        radial-gradient(circle at 80% 20%,
            rgba(255, 255, 255, 0.03),
            transparent 75%);
}

.direction-bf-4::before {
    background: radial-gradient(circle at 70% 80%,
            rgba(255, 255, 255, 0.07),
            transparent 85%),
        radial-gradient(circle at 10% 20%,
            rgba(255, 255, 255, 0.03),
            transparent 70%);
}

.direction-bf-5::before {
    background: radial-gradient(circle at 40% 10%,
            rgba(255, 255, 255, 0.06),
            transparent 70%),
        radial-gradient(circle at 60% 90%,
            rgba(255, 255, 255, 0.05),
            transparent 78%);
}

.direction-bf-6::before {
    background: radial-gradient(circle at 25% 60%,
            rgba(255, 255, 255, 0.07),
            transparent 78%),
        radial-gradient(circle at 75% 20%,
            rgba(255, 255, 255, 0.04),
            transparent 70%);
}

.direction-bf-7::before {
    background: radial-gradient(circle at 80% 30%,
            rgba(255, 255, 255, 0.09),
            transparent 75%),
        radial-gradient(circle at 10% 70%,
            rgba(255, 255, 255, 0.03),
            transparent 85%);
}

.direction-bf-8::before {
    background: radial-gradient(circle at 50% 60%,
            rgba(255, 255, 255, 0.08),
            transparent 85%),
        radial-gradient(circle at 50% 20%,
            rgba(255, 255, 255, 0.03),
            transparent 70%);
}

.direction-bf-9::before {
    background: radial-gradient(circle at top left,
            rgba(255, 255, 255, 0.10),
            transparent 70%),
        radial-gradient(circle at bottom right,
            rgba(255, 255, 255, 0.04),
            transparent 65%);
}

.direction-bf-10::before {
    background: radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, 0.05),
            transparent 88%);
}

/* =========================
   DIRECTION CARD PATTERNS HATCHING
========================= */
.direction-af-1::after {
    background: linear-gradient(135deg,
            transparent 0%,
            transparent 60%,
            rgba(255, 255, 255, 0.14) 60.5%,
            transparent 62%),
        linear-gradient(120deg,
            transparent 0%,
            transparent 72%,
            rgba(255, 255, 255, 0.10) 72.5%,
            transparent 74%);
}

.direction-af-2::after {
    background: linear-gradient(140deg,
            transparent 0%,
            transparent 55%,
            rgba(255, 255, 255, 0.15) 55.5%,
            transparent 58%),
        linear-gradient(110deg,
            transparent 0%,
            transparent 68%,
            rgba(255, 255, 255, 0.12) 68.5%,
            transparent 71%);
}

.direction-af-3::after {
    background: linear-gradient(125deg,
            transparent 0%,
            transparent 62%,
            rgba(255, 255, 255, 0.16) 62.5%,
            transparent 64%),
        linear-gradient(150deg,
            transparent 0%,
            transparent 76%,
            rgba(255, 255, 255, 0.10) 76.5%,
            transparent 78%);
}

.direction-af-4::after {
    background: linear-gradient(135deg,
            transparent 0%,
            transparent 65%,
            rgba(255, 255, 255, 0.13) 65.5%,
            transparent 67%),
        linear-gradient(160deg,
            transparent 0%,
            transparent 78%,
            rgba(255, 255, 255, 0.11) 78.5%,
            transparent 80%);
}

.direction-af-5::after {
    background: linear-gradient(120deg,
            transparent 0%,
            transparent 58%,
            rgba(255, 255, 255, 0.15) 58.5%,
            transparent 60%),
        linear-gradient(145deg,
            transparent 0%,
            transparent 74%,
            rgba(255, 255, 255, 0.12) 74.5%,
            transparent 76%);
}

.direction-af-6::after {
    background: linear-gradient(135deg,
            transparent 0%,
            transparent 62%,
            rgba(255, 255, 255, 0.14) 62.5%,
            transparent 64%),
        linear-gradient(135deg,
            transparent 0%,
            transparent 70%,
            rgba(255, 255, 255, 0.10) 70.5%,
            transparent 72%);
}

.direction-af-7::after {
    background: linear-gradient(150deg,
            transparent 0%,
            transparent 60%,
            rgba(255, 255, 255, 0.16) 60.5%,
            transparent 63%),
        linear-gradient(110deg,
            transparent 0%,
            transparent 78%,
            rgba(255, 255, 255, 0.11) 78.5%,
            transparent 80%);
}

.direction-af-8::after {
    background: linear-gradient(130deg,
            transparent 0%,
            transparent 66%,
            rgba(255, 255, 255, 0.14) 66.5%,
            transparent 68%),
        linear-gradient(160deg,
            transparent 0%,
            transparent 72%,
            rgba(255, 255, 255, 0.09) 72.5%,
            transparent 74%);
}

.direction-af-9::after {
    background: linear-gradient(135deg,
            transparent 0%,
            transparent 58%,
            rgba(255, 255, 255, 0.16) 58.5%,
            transparent 60%),
        linear-gradient(120deg,
            transparent 0%,
            transparent 70%,
            rgba(255, 255, 255, 0.12) 70.5%,
            transparent 72%),
        linear-gradient(145deg,
            transparent 0%,
            transparent 78%,
            rgba(255, 255, 255, 0.10) 78.5%,
            transparent 80%);
}

.direction-af-10::after {
    background: linear-gradient(135deg,
            transparent 0%,
            transparent 70%,
            rgba(255, 255, 255, 0.12) 70.5%,
            transparent 72%);
}

/* =========================
   Logs Edit Overlay (внутри Relic)
========================= */
#editLogNoteInput {
    width: 100%;
    min-height: 140px;
    resize: vertical;
    box-sizing: border-box;
    padding: 10px;

    border-radius: 10px;
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

#saveEditLogNoteBtn {
    width: 100%;
    margin-top: 8px;
}

/* =========================
   Artifacts Edit Overlay (внутри Relic)
========================= */
.imprint-edit-overlay-body input,
.imprint-edit-overlay-body textarea,
.artifact-overlay-body input,
.artifact-overlay-body textarea,
.achievement-overlay-body input,
.achievement-overlay-body textarea {
    width: 100%;
    padding: 10px;

    box-sizing: border-box;

    border-radius: 10px;
    background: #1c1c1c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

.imprint-edit-overlay-body textarea,
.artifact-overlay-body textarea,
.achievement-overlay-body textarea {
    min-height: 160px;
    /* было ~40–60 → теперь норм читается */
    resize: vertical;
    /* можно тянуть вниз */
    line-height: 1.4;
}

.imprint-edit-overlay,
.artifact-overlay,
.achievement-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 9999;
}

.imprint-edit-overlay.hidden,
.artifact-overlay.hidden,
.achievement-overlay.hidden {
    display: none;
}

.imprint-edit-overlay-backdrop,
.artifact-overlay-backdrop,
.achievement-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.imprint-edit-overlay-panel,
.artifact-overlay-panel,
.achievement-overlay-panel {
    position: relative;
    width: min(100%, 520px);
    margin: 10px 10px 10px 10px;
    padding: 16px;
    border-radius: 16px;
    background: #141414;
    z-index: 1;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.imprint-edit-overlay-header,
.artifact-overlay-header,
.achievement-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

#logNoteContext {
    margin: 0 10px;
    margin-bottom: 6px;

    display: inline-block;

    width: fit-content;

    padding: 4px 8px;

    border-radius: 6px;

    color: #111;

    font-size: 16px;
    font-weight: 600;

    line-height: 1.2;
}

.imprint-edit-overlay-body,
.artifact-overlay-body,
.achievement-overlay-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 0;
}

#saveEditArtifactBtn,
#saveEditAchievementBtn {
    width: 100%;
    margin-top: 8px;
}

/* =========================
   🔮 Artifact+Achievement finish screen
========================= */
#pathPickerOverlay,
#artifactFinishScreen,
#achievementFinishScreen,
#manualOverlay,
#finishScreen,
#deleteConfirmOverlay,
.path-details-overlay,
.path-overlay,
.imprint-add-overlay,
.imprint-edit-overlay,
.artifact-overlay,
.achievement-overlay,
#weeklyResetFinishScreen,
#weeklyLoopResultsOverlay,
#imprintsFilterOverlay,
#resetAppCacheOverlay,
#resetAppCacheResultOverlay,
#resetAppCacheErrorOverlay,
#dailyLogLimitOverlay {
    background: rgba(0, 0, 0, 0.75);

    backdrop-filter: blur(15px);
}

/* parent */
.artifact-finish-content {
    width: 280px;
    text-align: center;
    color: white;
}

.artifact-finish-imprint {
    text-align: left;
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;

    transition: transform 0.6s ease, opacity 0.4s ease;

    margin-bottom: 10px;
}

.artifact-finish-imprint.show {
    transform: scaleX(1);
    opacity: 1;
}

/* только внутри finish screen */
.artifact-finish-content .path-bar,
.achievement-finish-content .path-bar {
    width: 270px;
    margin-left: 6px;
    margin-right: 4px;
}

.finish-sd-label {
    text-align: center;
    font-weight: bold;

    color: #a855f7;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.finish-level-up {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    margin-top: 10px;

    color: #9a40ee;

    display: none;
    opacity: 0;

    transform: scale(0.8);

    transition: opacity 0.4s ease, transform 0.4s ease;
}

.finish-level-up.show {
    opacity: 1;
    transform: scale(1);
}

.finish-final-text {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;

    opacity: 0;
    transform: translateY(8px);

    transition: opacity 0.4s ease, transform 0.4s ease;
}

.finish-final-text.show {
    opacity: 1;
    transform: translateY(0);
}

#artifactFinishCloseBtn,
#achievementFinishCloseBtn {
    margin: 15px auto 0 auto;
    display: block;

    opacity: 0;

    width: 160px;

    transform: translateY(6px);
    transition: all 0.3s ease;
}

#artifactFinishCloseBtn.show,
#achievementFinishCloseBtn.show {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   🔮 Achievement finish screen анимация
========================= */
.achievement-finish-content {
    width: 280px;
    text-align: left;
    color: white;
}

.achievement-finish-imprint {
    --achievement-tilt: 0deg;
    --achievement-impact-tilt: 0deg;

    opacity: 0;

    transform: translate3d(0, -220px, 0) scale3d(2.4, 2.4, 1) rotate(var(--achievement-impact-tilt));

    filter: blur(8px);

    will-change: transform, opacity, filter;

    backface-visibility: hidden;
    transform-style: preserve-3d;

    transform-origin: center center;
}

.achievement-finish-imprint::after {
    content: "";
    position: absolute;
    inset: -1px;

    background: radial-gradient(circle at 30% 10%,
            rgba(168, 85, 255, 0.18),
            transparent 60%);

    border-radius: 14px;

    z-index: -2;
}

.achievement-finish-imprint.show {

    opacity: 1;

    filter: blur(0px);

    animation: achievement-impact 200ms cubic-bezier(0.08, 0.82, 0.17, 1) forwards;
}

@keyframes achievement-impact {

    0% {

        opacity: 0;

        transform: translate3d(0, -220px, 0) scale3d(2.4, 2.4, 1) rotate(var(--achievement-impact-tilt));

        filter: blur(8px);
    }

    82% {

        opacity: 1;

        transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(var(--achievement-tilt));

        filter: blur(0px);
    }

    100% {

        opacity: 1;

        transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(var(--achievement-tilt));

        filter: blur(0px);
    }
}

/* =========================
   CHOOSE AVATAR OVERLAY
========================= */
#avatarOverlay {
    z-index: 1000000;
}

.avatar-subtitle {
    margin-top: -14px;
    margin-left: 10px;
    font-size: 14px;
    font-style: italic;
    opacity: 0.7;
    text-align: left;
    letter-spacing: 0.3px;
}

.avatar-option {
    width: 100%;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: all .2s ease;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
}

.avatar-option.selected {
    border-color: #28a745;
    box-shadow: 0 0 14px rgba(40, 167, 69, 0.5);
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
    padding: 10px;
}

.avatar-gender-tabs {
    margin-top: -10px;
    display: flex;
    width: 100%;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
}

.avatar-gender-btn {
    flex: 1;
    padding: 10px 0;

    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.9);

    border: none;
    cursor: pointer;

    font-size: 14px;
    letter-spacing: 0.04em;

    transition: all 0.2s ease;

    text-align: center;
}

.avatar-gender-btn {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.avatar-gender-btn:last-child {
    border-right: none;
}

.avatar-gender-btn.active {
    background: #36E08A;
    color: #111;
}

.avatar-gender-btn {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.avatar-gender-btn:last-child {
    border-right: none;
}

.save-avatar-btn {
    margin-top: -10px;
    box-sizing: border-box;
    bottom: 0;
}

/* =========================
   LOOPS OF INERTIA
========================= */
.loops-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}

.loops-card {
    width: 100%;
    height: 87px;

    border-radius: 14px;

    position: relative;
    overflow: hidden;

    background: #181818;

    border: 1px solid rgba(255, 255, 255, 0.08);
}

.loops-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
    filter: blur(0.5px);
}

/* Если нужно будет добавить уникальные размытия для отдельных изображений
.loops-card--idlecircuit img {

}*/

.loops-card-overlay {
    position: absolute;

    top: 8px;
    left: 10px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 3px;

    z-index: 2;

    pointer-events: none;

    padding: 7px 12px 8px 10px;

    border-radius: 10px;

    overflow: hidden;

    isolation: isolate;
}

/* Отключил как плохое UI-решение для читаемости текста
.loops-card-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(170, 185, 205, 0.20) 0%, rgba(145, 160, 180, 0.10) 50%, rgba(120, 135, 155, 0.01) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0.6;
}*/

.loops-card-title {
    color: #ffffff;

    font-size: 17px;
    font-weight: 700;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.85);
}

.loops-card-hpbar {
    position: relative;
    width: 150px;
    height: 8px;

    border-radius: 3px;
    overflow: hidden;

    background: rgba(255, 255, 255, 0.08);

    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.loop-card-hp-fill {
    position: absolute;
    inset: 0 auto 0 0;

    width: 0%;

    background: #e81224;
    border-radius: inherit;

    transition: width 0.2s ease;
}

.loop-card-milestone {
    position: absolute;

    top: -2px;
    bottom: -2px;

    width: 2px;

    background: rgba(255, 255, 255, 0.5);

    z-index: 2;
}

.loop-card-milestone.milestone-25 {
    left: 25%;
}

.loop-card-milestone.milestone-50 {
    left: 50%;
}

.loop-card-milestone.milestone-75 {
    left: 75%;
}

.loops-card-hp {
    font-size: 13px;

    font-weight: 600;

    color: rgba(255, 255, 255, .92);

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8);
}

.loops-comment {
    margin-top: 2px;

    font-size: 13px;
    font-weight: 600;

    color: rgba(255, 255, 255, .92);

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Week timer */
.loops-week-timer {
    width: fit-content;
    margin: -5.5px auto 8px;

    padding: 8px 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: linear-gradient(135deg, #2a2a2a, #1f1f1f);

    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

#loopsWeekTimer {
    margin-top: -1.5px
}

.loops-week-timer.green,
.loops-progress-box.green {

    color: #36E08A;

    box-shadow:
        0 0 0 1px rgba(54, 224, 138, .35),
        0 6px 16px rgba(0, 0, 0, .45);

    text-shadow:
        0 0 6px rgba(54, 224, 138, .22);

}

.loops-week-timer.yellow,
.loops-progress-box.yellow {

    color: #FFD54A;

    box-shadow:
        0 0 0 1px rgba(255, 213, 74, .35),
        0 6px 16px rgba(0, 0, 0, .45);

    text-shadow:
        0 0 6px rgba(255, 213, 74, .22);

}

.loops-week-timer.red,
.loops-progress-box.red {

    color: #FF6464;

    box-shadow:
        0 0 0 1px rgba(255, 100, 100, .35),
        0 6px 16px rgba(0, 0, 0, .45);

    text-shadow:
        0 0 6px rgba(255, 100, 100, .22);

}

/* Weekly progress */
.loops-progress-box {
    width: fit-content;
    margin: 10px auto 0;
    margin-bottom: 3px;

    padding: 8px 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;

    border-radius: 12px;

    background: linear-gradient(135deg, #2a2a2a, #1f1f1f);
    box-shadow: 0 0 0 1px rgba(54, 224, 138, 0.35),
        0 6px 16px rgba(0, 0, 0, 0.45);

    color: #36E08A;

    text-shadow: 0 0 6px rgba(54, 224, 138, 0.22);
}

.loops-progress-value {
    font-size: 16px;
    font-weight: 700;
}

.loops-progress-total {
    font-size: 16px;
    font-weight: 500;
    opacity: 0.9;
}

/* =========================
   LOOPS OF INERTIA OVERLAY
========================= */
.suppression-loops-overlay,
.summon-loop-overlay {
    position: fixed;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 10px;

    background: #121212;

    overflow-y: auto;

    z-index: 15000;
}

#suppressionHistoryOverlay {
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(15px);

    z-index: 15001;
}


#suppressionHistoryOverlay .suppression-window {
    position: relative;
    width: 100%;
    max-width: 350px;

    box-sizing: border-box;

    padding: 14px 10px;

    background: #121212;

    border-radius: 16px 16px 0 0;

    max-height: calc(100vh - 12px);

    overflow: hidden;

    margin-top: auto;
}

#suppressionHistoryList {
    min-height: 0;
    overflow-y: auto;
    padding: 0 14px 8px;
}

#suppressionHistoryTitle {
    padding-top: 20px;
}

#suppressionHistoryOkButton {
    position: absolute;

    top: 0px;
    right: 2px;

    background: none;
    border: none;

    color: white;

    font-size: 18px;

    cursor: pointer;
}

.loops-overlay-image {
    width: 340px;
    height: auto;
    display: block;
    margin: 10px auto;
    border-radius: 8px;
}

.loops-overlay-title,
.loops-overlay-lore {
    align-self: flex-start;

    width: 340px;
    max-width: 100%;

    text-align: left;
}

.loops-overlay-title {
    font-size: 22px;
    font-weight: bold;
    margin-left: 4px;
    margin-bottom: 4px;
}


.loops-overlay-lore {
    margin-left: 6px;
    font-size: 13px;
    font-style: italic;
}

.suppression-window {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loops-overlay-health {
    width: 336px;
    margin: -18px auto 0;
    text-align: center;
}

.loops-overlay-health .loops-overlay-hpbar {
    margin-top: 0;
}

.loops-overlay-hpbar {
    position: relative;

    width: 336px;
    height: 8px;

    margin:
        -18px auto 4px auto;

    border-radius: 3px;

    background: rgba(255, 255, 255, 0.15);

    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.35);

    overflow: hidden;
}

.loop-hp-fill {
    position: absolute;
    inset: 0 auto 0 0;

    width: 44%;

    background: #e81224;

    border-radius: inherit;

    z-index: 1;
}

.loop-milestone {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: rgba(255, 255, 255, 0.6);
    z-index: 2;
}

.milestone-25 {
    left: 25%;
}

.milestone-50 {
    left: 50%;
}

.milestone-75 {
    left: 75%;
}

.loops-overlay-hp {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

#suppressionRewards,
#suppressionRewardsPreview {
    width: 100%;
    max-width: 340px;

    display: flex;
    gap: 10px;

    margin-left: 4px;
    margin-top: 8px;
    margin-bottom: 6px;
    padding: 6px 0;

    border-radius: 12px;

    background: linear-gradient(180deg,
            rgba(255, 255, 255, .05),
            rgba(255, 255, 255, .02));

    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .04),
        0 2px 8px rgba(0, 0, 0, .35);
}

#successfulSuppressionReward,
#weeklyLoopDetailsReward {
    width: 100%;
    max-width: 340px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;

    margin-left: 4px;
    margin-top: 14px;
    margin-bottom: 6px;
    padding: 8px 12px;

    box-sizing: border-box;
    border-radius: 12px;

    background: linear-gradient(180deg,
            rgba(255, 255, 255, .05),
            rgba(255, 255, 255, .02));

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, .04),
        0 2px 8px rgba(0, 0, 0, .35);
}

.loops-reward-positive,
.loops-reward-negative {
    flex: 1;
}

.loops-reward-label {
    font-size: 11px;
    font-style: italic;
    color: rgba(255, 255, 255, .55);
    margin-left: 12px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.loops-reward-value {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.loops-reward-positive .loops-reward-value {
    margin-left: 12px;
    color: #9a40ee;
    text-shadow: 0 0 12px rgba(154, 64, 238, 0.4);
}

.loops-reward-negative .loops-reward-value {
    margin-left: 12px;
    color: #d21801;
}

#successfulSuppressionReward,
#weeklyLoopDetailsReward {
    width: 100%;
    align-self: stretch;
    text-align: left;
    box-sizing: border-box;
}

#successfulSuppressionRewardTitle,
#weeklyLoopDetailsRewardTitle {
    margin-left: 6px;
    font-size: 18px;
    font-weight: 600;
}

#weeklyLoopDetailsRewardTitle {
    font-size: 16px;
}

#successfulSuppressionRewardMeta {
    margin-left: 8px;
    margin-top: 2px;
    margin-bottom: 2px;
    font-size: 14px;
    font-style: italic;
}

#successfulSuppressionLastLog,
#suppressionLastLog,
#suppressionHistoryList,
#weeklyLoopDetailsLastLog {
    width: 340px;
    box-sizing: border-box;
    margin-top: 6px;
}

#suppressionLastLog,
#weeklyLoopDetailsLastLog {
    padding: 0 14px 8px;
}

#suppressionLastLog .log-card:hover,
#suppressionHistoryList .log-card:hover,
#weeklyLoopDetailsLastLog .log-card:hover,
#successfulSuppressionLastLog .log-card:hover {
    transform: none;
    box-shadow: none;
}

.loops-log-title {
    font-weight: 600;
    font-size: 15px;
}

.loops-log-meta {
    font-size: 14px;
    color: #111;
    font-weight: 400;
}

.loops-log-comment {
    display: none;
    font-size: 14px;
    font-style: italic;
    color: rgba(0, 0, 0, 0.95);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    white-space: pre-wrap;
}

.loops-log-comment {
    display: block;
    font-size: 14px;
    font-style: italic;
    color: rgba(0, 0, 0, 0.95);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    white-space: pre-wrap;
}

.suppression-records {
    width: fit-content;

    margin-top: -6px;
    margin-bottom: 6px;
    padding: 4px 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: rgba(255, 255, 255, 0.7);

    font-size: 13px;
    font-weight: 500;

    text-align: center;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.suppression-records:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
}

.suppression-records:active {
    background: rgba(255, 255, 255, 0.08);
}

.suppression-history-date-group {
    width: 100%;
    box-sizing: border-box;
}

.suppression-history-date {
    margin-top: 10px;
    margin-bottom: 8px;
    padding: 0 4px;

    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 600;

    text-align: left;
}

.suppression-history-date-group:first-child .suppression-history-date {
    margin-top: 0;
}

#okBtn,
#successfulSuppressionOkButton,
#weeklyLoopDetailsOkButton {
    width: 100%;
    font-size: 14px;
    transition: 0.2s;
    align-self: center;
    max-width: 340px;
    display: flex;
    justify-content: center;
    align-self: stretch;
    padding: 10px 6px;
    margin-right: 0;
    margin-top: 4px;
}

/* =========================
   Summon Loop Overlay
========================= */
.summon-window {
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
}

.summon-section {
    margin-top: 10px;

}

.summon-section-title {
    margin-left: 6px;
    margin-bottom: 6px;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .04em;

    color: #cfd8e6;

}

.summon-buttons,
.summon-buttons-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 6px;
}

.summon-buttons button,
.summon-buttons-grid {
    width: 100%;
}

.summon-buttons-grid button {
    min-height: 18px;

}

.summon-buttons-grid button.selected {

    opacity: 1;

    background: #36E08A;

    color: #000;

}

.summon-buttons-grid button:disabled {

    opacity: .45;

    cursor: not-allowed;

    filter: grayscale(.35);

}

.summon-mode-button {
    margin-left: 4px;
}

.summon-mode-button-target {
    margin-left: 0;
    margin-right: 4px;
}

#summonCancelButton,
#summonConfirmButton {
    font-size: 14px;
    transition: 0.2s;
    max-width: 330px;
    margin-right: 0;
    margin-top: 10px;
    padding: 14px 16px;
}

#summonCancelButton {

    opacity: .8;

}

#summonConfirmButton {

    font-weight: 700;

}

/* =========================
   Summon Loop Confirmation Overlay
========================= */
.summon-loop-confirm-overlay {
    position: fixed;

    inset: 0;

    z-index: 16000;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    padding: 0;

    box-sizing: border-box;

    background:
        rgba(0, 0, 0, 0.68);

    backdrop-filter:
        blur(4px);
}


.summon-loop-confirm-overlay.hidden {
    display: none;
}


.summon-loop-confirm-window {

    width: 100%;
    max-width: 420px;

    padding: 14px 12px;
    margin-left: 10px;
    margin-right: 10px;

    box-sizing: border-box;

    border-radius:
        18px 18px 0 0;

    background: #121212;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-bottom: none;

    box-shadow:
        0 -14px 40px rgba(0, 0, 0, 0.65);

}


.summon-loop-confirm-title {

    margin-bottom: 18px;

    font-size: 20px;

    font-weight: 700;

    text-align: center;

}


.summon-loop-confirm-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding: 9px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);

}


.summon-loop-confirm-row:last-of-type {

    border-bottom: none;

}


.summon-loop-confirm-label {

    flex:
        0 0 auto;

    font-size: 14px;

    opacity: 0.55;

}


.summon-loop-confirm-value {

    min-width: 0;

    font-size: 15px;

    font-weight: 600;

    text-align: right;

    overflow-wrap: anywhere;

}


.summon-loop-confirm-question {

    margin-top: 18px;

    margin-bottom: 14px;

    font-size: 15px;

    font-weight: 600;

    text-align: center;

    opacity: 0.85;

}


.summon-loop-confirm-buttons {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

}


.summon-loop-confirm-buttons button {

    min-height: 42px;

    padding:
        9px 12px;

    margin-right: 0;

    border: none;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

}

/* =========================
   Wekkly Loop Results (after click on Log)
========================= */
.weekly-loop-results-window {
    position: relative;

    width: min(calc(100% - 28px), 420px);

    max-height: calc(100vh - 40px);

    padding: 16px;

    border-radius: 18px;

    background: #121212;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

/* =========================
   HEADER
========================= */
.weekly-loop-results-title {
    margin-top: 1em;
    margin-bottom: 1em;

    padding-right: 28px;

    font-size: 19px;
    font-weight: 700;

    color: #ffffff;
}

/* =========================
   LOOP LIST
========================= */
.weekly-loop-results-list {
    display: flex;
    flex-direction: column;
    gap: 8px;

    flex: 1 1 auto;
    min-height: 0;

    overflow-y: auto;

    padding-right: 10px;

    scrollbar-gutter: stable;
}

/* =========================
   LOOP CARD
========================= */
.weekly-loop-results-card {
    position: relative;

    width: 100%;
    height: 87px;

    flex: 0 0 87px;

    overflow: hidden;

    border-radius: 14px;

    background: #181818;

    box-sizing: border-box;
}

.weekly-loop-results-card img {
    width: 100%;
    height: 100%;

    display: block;
}

/* =========================
   CARD OVERLAY
========================= */
.weekly-loop-results-card-overlay {
    position: absolute;

    inset: 0;

    padding: 12px 14px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 4px;

    box-sizing: border-box;

    pointer-events: none;
}


/* Make content sit above backdrop */
.weekly-loop-results-card-title,
.weekly-loop-results-card-hpbar,
.weekly-loop-results-card-result {
    position: relative;

    z-index: 1;
}


/* =========================
   TITLE
========================= */
.weekly-loop-results-card-title {
    color: #ffffff;

    font-size: 17px;

    font-weight: 700;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.9);
}


/* =========================
   HP BAR
========================= */
.weekly-loop-results-card-hpbar {
    position: relative;

    width: 150px;
    height: 8px;

    border-radius: 999px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.weekly-loop-results-card-hp-fill {
    position: absolute;

    inset: 0 auto 0 0;

    width: 0%;

    background: #e81224;

    border-radius: inherit;
}

/* =========================
   MILESTONES
========================= */
.weekly-loop-results-card-milestone {
    position: absolute;

    top: -2px;
    bottom: -2px;

    width: 2px;

    background:
        rgba(255, 255, 255, 0.8);

    z-index: 2;
}

/* =========================
   RESULT
========================= */
.weekly-loop-results-card-result {
    font-size: 13px;

    font-weight: 700;

    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.9);
}

/* =========================
   TOTAL SD EXP
========================= */
.weekly-loop-results-total {
    display: flex;

    justify-content: space-between;
    align-items: center;

    flex: 0 0 auto;

    margin-top: -4px;
    padding-top: 8px;

    border-top:
        1px solid rgba(255, 255, 255, 0.10);

}


#weeklyLoopResultsTotalEXP {
    font-size: 16px;

    color: #9a40ee;

    text-shadow:
        0 0 12px rgba(154, 64, 238, 0.4);

    font-weight: 700;
}

/* =========================
   Historical weekly Loop load
========================= */
.weekly-loop-results-load {
    display: flex;

    align-items: center;

    padding: 6px 10px;

    border-radius: 12px;

    margin-top: -2px;
    margin-left: 4px;

    background:
        linear-gradient(135deg,
            #2a2a2a,
            #1f1f1f);

}

.weekly-loop-results-load-value {
    font-size: 14px;
    font-weight: 700;

}


/* Weekly load colors */
.weekly-loop-results-load.green {

    color: #36E08A;

    box-shadow:
        0 0 0 1px rgba(54, 224, 138, .35),
        0 4px 12px rgba(0, 0, 0, .35);

    text-shadow:
        0 0 6px rgba(54, 224, 138, .22);

}


.weekly-loop-results-load.yellow {
    color: #FFD54A;

    box-shadow:
        0 0 0 1px rgba(255, 213, 74, .35),
        0 4px 12px rgba(0, 0, 0, .35);

    text-shadow:
        0 0 6px rgba(255, 213, 74, .22);

}


.weekly-loop-results-load.red {
    color: #FF6464;

    box-shadow:
        0 0 0 1px rgba(255, 100, 100, .35),
        0 4px 12px rgba(0, 0, 0, .35);

    text-shadow:
        0 0 6px rgba(255, 100, 100, .22);

}

/* =========================
   Path Picker Overlay
========================= */
.path-picker {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;

    touch-action: manipulation;
}

#pathPickerText,
.path-picker span {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.path-picker-overlay {
    position: fixed;
    inset: 0;
    padding: 0;

    background: rgba(0, 0, 0, 0.6);

    display: flex;
    align-items: flex-end;
    justify-content: center;

    z-index: 16000;
    box-sizing: border-box;
    opacity: 1;
}

.path-picker-overlay.hidden {
    display: none;
}

.path-picker-window {
    width: calc(100% - 40px);
    max-height: 80vh;

    overflow-y: auto;

    background: #1c1c1c;

    border-radius: 16px;
    margin: 10px;
    padding: 10px;

    border: 1px solid rgba(255, 255, 255, .12);

    box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}

.path-picker-section {
    margin-bottom: 14px;
}


.path-picker-section-header {

    padding: 10px 12px;

    color: rgba(255, 255, 255, .95);

    font-size: 15px;
    font-weight: 700;

    background: rgba(255, 255, 255, .10);

    border-radius: 10px;

    border: 1px solid rgba(255, 255, 255, .18);

    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);

    cursor: pointer;

    user-select: none;
}

.path-picker-section.open .path-picker-section-header {

    background: rgba(255, 255, 255, .14);

    border-color: rgba(255, 255, 255, .25);
}

.path-picker-item {

    padding: 10px 12px;

    margin-bottom: 6px;

    border-radius: 10px;

    background: rgba(255, 255, 255, .035);

    border: 1px solid rgba(255, 255, 255, .06);

    color: rgba(255, 255, 255, .85);

    font-size: 15px;

    cursor: pointer;

    transition: background .15s,
        border-color .15s,
        transform .1s;
}


.path-picker-item:hover {

    background: rgba(255, 255, 255, .10);

    border-color: rgba(255, 255, 255, .25);
}


.path-picker-item:active {

    transform: scale(.98);
}

#pathPickerContent .path-picker-item {
    --path-fold-size: 24px;
    position: relative;
    overflow: hidden;
    padding-right: 44px;
    border-bottom-right-radius: 0;
    clip-path: polygon(0 0, 100% 0,
            100% calc(100% - var(--path-fold-size)),
            calc(100% - var(--path-fold-size)) 100%, 0 100%);
    background: transparent;
    border-color: color-mix(in srgb, var(--path-picker-color, #444444) 50%, transparent);
    color: rgba(255, 255, 255, .90);
}

/* The fold and clipped outer border share the same endpoints.
   Offset by the 1px border so the fold meets its outside edge without a gap.
   Keep it clear of the label and let all touches reach the Path itself. */
#pathPickerContent .path-picker-item::after {
    content: "";
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: var(--path-fold-size);
    height: var(--path-fold-size);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background: linear-gradient(135deg,
            var(--path-fold-color, #666666) 42%,
            color-mix(in srgb, var(--path-fold-color, #666666) 85%, black) 48%,
            rgba(0, 0, 0, .28) 50%);
    border-top-left-radius: 3px;
    pointer-events: none;
}

#pathPickerContent .path-picker-item:hover {
    border-color: color-mix(in srgb, var(--path-picker-color, #444444) 75%, transparent);
}

.path-picker-items {
    margin-top: 8px;
    padding-left: 8px;

    overflow: hidden;
}


.path-picker-items.collapsed {
    display: none;
}

.path-picker-overlay,
.path-picker-section-header,
.path-picker-item {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}


.path-picker-item,
.path-picker-section-header {
    touch-action: manipulation;
}

/* =========================
   Summon Difficulty Picker (+Artifact, Achievement Rarity Picker, AspectSelect)
========================= */
#summonDifficultyPicker,
#artifactRaritySelect,
#achievementRaritySelect,
#aspectSelect,
#editAspectSelect {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;

    touch-action: manipulation;

    max-width: 340px;
    margin-left: 4px;

    font-size: 16px;
    padding: 6px 8px;

    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.151);
    border-radius: 8px;

    color: #fff;
    box-sizing: border-box;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

#artifactRaritySelect,
#achievementRaritySelect,
#aspectSelect,
#editAspectSelect {
    margin-left: 0;
}

/* Overlay */
.summon-difficulty-picker-overlay,
#artifactRarityPickerOverlay,
#achievementRarityPickerOverlay,
#aspectPickerOverlay,
#editAspectPickerOverlay {
    position: fixed;
    inset: 0;

    padding: 0;

    background: rgba(0, 0, 0, 0.6);

    display: flex;
    align-items: flex-end;
    justify-content: center;

    z-index: 9999;

    box-sizing: border-box;
}

.summon-difficulty-picker-overlay.hidden,
#artifactRarityPickerOverlay.hidden,
#achievementRarityPickerOverlay.hidden,
#aspectPickerOverlay.hidden,
#editAspectPickerOverlay.hidden {
    display: none;
}


/* Window */
.summon-difficulty-picker-window,
#artifactRarityPickerOverlay .path-picker-window,
#achievementRarityPickerOverlay .path-picker-window,
#aspectPickerOverlay .path-picker-window,
#editAspectPickerOverlay .path-picker-window {
    width: calc(100% - 40px);
    max-width: 500px;

    background: #1c1c1c;

    border-radius: 16px;
    margin: 10px;
    padding: 10px;

    border: 1px solid rgba(255, 255, 255, .12);

    box-shadow:
        0 10px 40px rgba(0, 0, 0, .6);

    box-sizing: border-box;
}


/* Title */
.summon-difficulty-picker-title,
#artifactRarityPickerOverlay .path-picker-title,
#achievementRarityPickerOverlay .path-picker-title,
#aspectPickerTitle .path-picker-title,
#difficultyPickerTitle,
#pathPickerTitle .path-picker-title,
#editAspectPickerTitle .path-picker-title,
.path-picker-title {
    font-size: 18px;
    font-weight: 700;

    color: white;

    margin-top: 10px;
    margin-bottom: 8px;

    text-align: center;
}

#difficultyPickerTitle,
#pathPickerTitle {
    margin-bottom: 14px;
}

/* Options */
.summon-difficulty-picker-options,
#artifactRarityPickerOptions,
#achievementRarityPickerOptions,
#aspectPickerOptions,
#editAspectPickerOptions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


/* Option */
.summon-difficulty-picker-option,
.artifact-rarity-picker-option,
.achievement-rarity-picker-option,
.aspect-picker-option {
    margin-top: 8px;
    padding: 10px 12px;

    border-radius: 10px;

    background: rgba(255, 255, 255, .035);

    border: 1px solid rgba(255, 255, 255, .06);

    color: rgba(255, 255, 255, .85);

    font-size: 15px;
    font-weight: 600;

    text-align: center;

    cursor: pointer;

    transition:
        background .15s,
        border-color .15s,
        transform .1s;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;

    touch-action: manipulation;
}

.summon-difficulty-picker-option.selected {
    background: #36E08A;
    color: #000;
}

.summon-difficulty-picker-option:hover {
    background: rgba(255, 255, 255, .10);

    border-color: rgba(255, 255, 255, .25);
}

.summon-difficulty-picker-option:active,
.artifact-rarity-picker-option:active,
.achievement-rarity-picker-option:active,
.aspect-picker-option:active {
    transform: scale(.98);
}

/* =========================
   Artifact Rarity Picker Colors
========================= */
/* Uncommon */
.artifact-rarity-picker-option.rarity-uncommon.active {

    background:
        rgba(89, 203, 83, .15);

    border-color:
        rgba(89, 203, 83, .40);

    box-shadow:
        0 0 8px rgba(89, 203, 83, .12);

}

/* Rare */
.artifact-rarity-picker-option.rarity-rare.active {

    background:
        rgba(80, 152, 211, .16);

    border-color:
        rgba(80, 152, 211, .41);

    box-shadow:
        0 0 8px rgba(80, 152, 211, .13);

}

/* Epic */
.artifact-rarity-picker-option.rarity-epic.active {

    background:
        rgba(168, 85, 247, .16);

    border-color:
        rgba(168, 85, 247, .44);

    box-shadow:
        0 0 9px rgba(168, 85, 247, .16);

}

/* Legendary */
.artifact-rarity-picker-option.rarity-legendary.active {

    background:
        rgba(251, 146, 60, .17);

    border-color:
        rgba(251, 146, 60, .45);

    box-shadow:
        0 0 10px rgba(251, 146, 60, .18);

}

/* Hover — unselected */
.artifact-rarity-picker-option:not(.active):hover,
.achievement-rarity-picker-option:not(.active):hover {

    background:
        rgba(255, 255, 255, .07);

    border-color:
        rgba(255, 255, 255, .20);

}

/* Hover — selected */
.artifact-rarity-picker-option.active:hover,
.achievement-rarity-picker-option.active:hover {

    filter:
        brightness(1.12);

}

/* =========================
   Achievement Rarity Picker Colors 
========================= */
/* Bronze */
.achievement-rarity-picker-option.achievement-rarity-bronze.active {

    background:
        rgba(184, 115, 51, .20);

    border-color:
        rgba(184, 115, 51, .52);

    box-shadow:
        0 0 8px rgba(184, 115, 51, .16);

}

/* Silver */
.achievement-rarity-picker-option.achievement-rarity-silver.active {

    background:
        rgba(214, 217, 223, .20);

    border-color:
        rgba(214, 217, 223, .50);

    box-shadow:
        0 0 8px rgba(214, 217, 223, .16);

}

/* Gold */
.achievement-rarity-picker-option.achievement-rarity-gold.active {

    background:
        rgba(255, 204, 51, .22);

    border-color:
        rgba(255, 204, 51, .52);

    box-shadow:
        0 0 9px rgba(255, 204, 51, .20);

}

/* Diamond */
.achievement-rarity-picker-option.achievement-rarity-diamond.active {

    background:
        rgba(77, 231, 255, .22);

    border-color:
        rgba(77, 231, 255, .56);

    box-shadow:
        0 0 10px rgba(77, 231, 255, .24);

}

/* =========================
   Aspect Picker Colors
========================= */
.aspect-picker-option.active[data-aspect-id="valueflow"],
#pathPickerContent .path-picker-section-header[data-aspect-id="valueflow"] {
    background: rgba(22, 198, 12, .20);
    border-color: rgba(22, 198, 12, .50);
}

.aspect-picker-option.active[data-aspect-id="neuralforge"],
#pathPickerContent .path-picker-section-header[data-aspect-id="neuralforge"] {
    background: rgba(0, 120, 215, .40);
    border-color: rgba(0, 120, 215, .50);
}

.aspect-picker-option.active[data-aspect-id="heartresonance"],
#pathPickerContent .path-picker-section-header[data-aspect-id="heartresonance"] {
    background: rgba(255, 87, 151, .30);
    border-color: rgba(255, 87, 151, .50);
}

.aspect-picker-option.active[data-aspect-id="biomodule"],
#pathPickerContent .path-picker-section-header[data-aspect-id="biomodule"] {
    background: rgba(232, 18, 36, .20);
    border-color: rgba(232, 18, 36, .50);
}

.aspect-picker-option.active[data-aspect-id="ideareactor"],
#pathPickerContent .path-picker-section-header[data-aspect-id="ideareactor"] {
    background: rgba(235, 238, 70, .40);
    border-color: rgba(235, 238, 70, .50);
}

.aspect-picker-option.active[data-aspect-id="callofrealms"],
#pathPickerContent .path-picker-section-header[data-aspect-id="callofrealms"] {
    background: rgba(0, 240, 255, .40);
    border-color: rgba(0, 240, 255, .50);
}

/* Hover */
.aspect-picker-option:not(.active):hover {
    background:
        rgba(255, 255, 255, .07);

    border-color:
        rgba(255, 255, 255, .20);

}

.aspect-picker-option.active:hover {
    filter:
        brightness(1.12);

}

/* =========================
   Debug Error Overlay
========================= */
#debugErrorOverlay {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;

    background: #05070a;

    overflow-y: auto;

    color: #fff;
    font-family: Arial, sans-serif;
}


#debugErrorWindow {

    position: relative;

    width: 100%;

    max-width: 560px;

    min-height: 100vh;

    margin: 0 auto;

    padding: 24px 20px 10px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-end;

    overflow: hidden;

}


/* =========================
   Reclaimer
========================= */
#debugErrorReclaimer {
    position: absolute;

    left: 50%;
    bottom: 22%;

    transform: translateX(-50%);

    width: 100%;
    height: auto;

    pointer-events: none;
    user-select: none;

    z-index: 0;

    opacity: 0.75;
}


/* =========================
   Lore Message
========================= */
#debugErrorLoreLabel {
    margin-bottom: 6px;

    color:
        rgba(255, 255, 255, 0.38);

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

#debugErrorLore {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 520px;

    margin: 0 0 10px;

    padding: 18px 20px;

    box-sizing: border-box;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-left:
        2px solid rgba(255, 255, 255, 0.32);

    border-radius: 16px;

    background: #121212;

    color:
        rgba(255, 255, 255, 0.92);

    font-size: 15px;
    font-style: oblique 8deg;
    line-height: 1.5;

    text-align: left;
}

/* =========================
   Lore Typing Animation
========================= */
.debug-error-line {
    opacity: 0;

    display: inline-block;

    margin-top: 4px;

    transform: translateX(-10px);

    clip-path: inset(0 100% 0 0);

    transition:
        opacity 0.08s ease-out,
        transform 0.12s ease-out,
        clip-path 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.debug-error-line:first-child {
    margin-top: 0;
}

.debug-error-line.is-visible {
    opacity: 1;

    transform: translateX(0);

    clip-path: inset(0 0 0 0);
}

/* =========================
   Error Block
========================= */
#debugErrorBlock {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 520px;

    max-height: 230px;

    padding: 18px;

    box-sizing: border-box;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius: 16px;

    background: #121212;
}

/* =========================
   Error Label
========================= */
#debugErrorLabel {
    margin-bottom: 10px;

    color:
        rgba(255, 255, 255, 0.45);

    font-family: monospace;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


/* =========================
   Error Message
========================= */
#debugErrorMessage {
    min-height: 48px;
    max-height: 120px;

    margin-bottom: 14px;
    padding: 12px;

    box-sizing: border-box;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.05);

    color:
        rgba(255, 255, 255, 0.88);

    font-family: monospace;

    font-size: 13px;
    line-height: 1.5;

    white-space: pre-wrap;

    word-break: break-word;
    overflow-wrap: anywhere;

    overflow-y: auto;
    overflow-x: hidden;
}

/* =========================
   Actions
========================= */
#debugErrorActions {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 520px;

    display: flex;

    gap: 10px;

    margin-top: 14px;
}

/* =========================
   Action Buttons
========================= */
#debugErrorActions button {
    flex: 1;

    min-width: 0;

    padding: 10px 15px;
    margin-right: 0;

    box-sizing: border-box;

    border: none;

    border-radius: 5px;

    background-color: #222222;

    color: #fff;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}

#debugErrorActions button:hover {
    background:
        rgba(255, 255, 255, 0.12);

    border-color:
        rgba(255, 255, 255, 0.25);
}


#debugErrorActions button:active {
    background:
        rgba(255, 255, 255, 0.16);
}


/* =========================
   Mobile
========================= */
@media (max-width: 360px) {

    #debugErrorWindow {
        padding:
            20px 10px 10px;
    }


    #debugErrorLore {
        padding:
            10px 10px;

        font-size: 14px;
    }


    #debugErrorBlock {
        padding: 14px;
    }


    #debugErrorMessage {
        font-size: 12px;
    }


    #debugErrorActions {
        gap: 8px;
    }


    #debugErrorActions button {
        padding:
            11px 10px;

        font-size: 13px;
    }

}

/* =========================
   SCREEN BUFFS/DEBUFFS TARGET LOOP
========================= */
#beginPathCircle.target-loop-buff::before {
    content: "";

    position: absolute;
    inset: -2px;

    border: 2px solid rgba(72, 238, 166, 1);

    border-radius: 50%;

    box-shadow:
        0 0 7px rgba(72, 238, 166, 0.30),
        0 0 18px rgba(72, 238, 166, 0.15),
        0 0 32px rgba(72, 238, 166, 0.06);

    pointer-events: none;
    z-index: 10;
}

#beginPathCircle.target-loop-debuff::before {
    content: "";

    position: absolute;
    inset: -2px;

    border: 2px solid rgba(247, 38, 35, 0.7);

    border-radius: 50%;

    box-shadow:
        0 0 7px rgba(247, 38, 35, 0.30),
        0 0 18px rgba(247, 38, 35, 0.15),
        0 0 32px rgba(247, 38, 35, 0.06);

    pointer-events: none;
    z-index: 10;
}

/* Screen Real Size Debug
#deviceDebugInfo {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 999999;

    padding: 8px 10px;

    background: rgba(0, 0, 0, 0.85);
    color: white;

    font-family: monospace;
    font-size: 12px;
    line-height: 1.5;

    border-radius: 6px;

    pointer-events: none;
} */

/* =========================
   Startup Gate
   ========================= */
#appStartupGate {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #000000;
}

#appStartupGateImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================
   Onboarding Welcome
   ========================= */
#onboardingWelcome {
    position: fixed;
    inset: 0;
    z-index: 1000000;

    display: none;

    align-items: center;
    justify-content: center;

    background: transparent;
    box-sizing: border-box;
}

.onboarding-welcome-content {
    width: min(90%, 520px);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    transform: translateY(36vh);
}

.onboarding-welcome-subtitle {
    position: relative;

    margin-bottom: 24px;

    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;

    padding: 12px 18px 12px 22px;

    background: rgba(18, 18, 18, 0.94);

    border: 1px solid rgba(0, 255, 106, 0.7);
    border-radius: 16px;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.35);

    box-sizing: border-box;

    transition:
        transform 0.6s ease,
        opacity 0.4s ease;
}

.onboarding-welcome-subtitle::before {
    content: "";

    position: absolute;

    left: 0;
    top: 8px;
    bottom: 8px;

    width: 3px;

    border-radius: 3px;

    background: linear-gradient(to bottom,
            #00FF6A,
            #3DDC84);
}

.onboarding-welcome-subtitle.show {
    transform: scaleX(1);
    opacity: 1;
}

.onboarding-welcome-subtitle-text {
    font-size: 20px;
    font-weight: 550;
    font-style: oblique 8deg;
    line-height: 1.5;
    letter-spacing: -0.015em;

    background: linear-gradient(120deg,
            #00FF6A,
            #3DDC84);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.onboarding-welcome-actions {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.onboarding-welcome-actions button {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid rgba(255, 255, 255, 0.151);
    border-radius: 12px;

    background: #1a1a1a;
    color: white;
    font-size: 15px;

    cursor: pointer;
    transition: 0.2s;
}

.onboarding-welcome-actions button:hover {
    background: #242424;
}

/* =========================
   ONBOARDING INTRO
   ========================= */
.onboarding-intro-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    pointer-events: none;
}

.onboarding-intro-image-top {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: auto;

    pointer-events: none;
}

.onboarding-intro-images {
    position: absolute;

    left: 50%;
    top: 0;

    width: 360px;
    height: 100%;

    transform: translateX(-50%);

    pointer-events: none;
}

.onboarding-intro-image-stack {
    position: absolute;

    left: 0;

    width: 100%;
    height: 180px;

    object-fit: contain;

    opacity: 0;
    transition: opacity 150ms ease-out;
}

.onboarding-intro-image-stack.visible {
    opacity: 1;
}

.onboarding-intro-image-stack.position-1 {
    top: 0;
}

.onboarding-intro-image-stack.position-2 {
    top: 165px;
}

.onboarding-intro-image-stack.position-3 {
    top: 330px;
}

.onboarding-intro-background {
    position: absolute;

    inset: 0;

    background-position: 85% center;
    background-repeat: no-repeat;
    background-size: cover;

    pointer-events: none;
}

#onboardingIdentityBackground {
    background-position: center center;
}

#onboardingIntroImageNext {
    pointer-events: none;
    opacity: 0;
    transition: opacity 100ms ease-out;
}

.onboarding-intro-image-twist {
    animation: onboardingIntroImageTwist 280ms ease-out both;
}

@keyframes onboardingIntroImageTwist {

    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.88);
    }

    45% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.06);
    }

    75% {
        transform: translate(-50%, -50%) scale(0.985);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.onboarding-intro-image-final {
    position: absolute;

    width: 100px;
    height: 100px;

    max-width: none;
    max-height: none;

    top: 45%;
    left: 50%;

    transform: translate(-50%, -50%);

    object-fit: contain;
    object-position: center;

    pointer-events: auto;
    cursor: pointer;
    filter:
        drop-shadow(0 0 20px rgba(0, 0, 0, 0.75));
}

.onboarding-intro-image-final-animated {
    animation:
        onboarding-intro-final-pulse 16s linear infinite;
}


@keyframes onboarding-intro-final-pulse {

    /* =========================
       ТИШИНА
       ========================= */

    0%,
    5%,
    100% {
        filter:
            drop-shadow(0 0 0 rgba(255, 255, 255, 0)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.75));
    }


    /* =========================
       ПЕРВЫЙ СИГНАЛ
       ========================= */

    10% {
        filter:
            drop-shadow(0 0 2px rgba(61, 220, 132, 1)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.75));
    }

    14% {
        filter:
            drop-shadow(0 0 2px rgba(61, 220, 132, 1)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.75));
    }

    18% {
        filter:
            drop-shadow(0 0 0 rgba(61, 220, 132, 0)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.75));
    }


    /* =========================
       ТИШИНА
       ========================= */

    48% {
        filter:
            drop-shadow(0 0 0 rgba(0, 255, 106, 0)) drop-shadow(0 0 1px rgba(61, 220, 132, 0)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.75));
    }


    /* =========================
       ДВОЙНОЙ СИГНАЛ
       ========================= */

    55% {
        filter:
            drop-shadow(0 0 1px rgba(61, 220, 132, 1)) drop-shadow(0 0 2px rgba(61, 220, 132, 0.50)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.75));
    }

    62% {
        filter:
            drop-shadow(0 0 0 rgba(61, 220, 132, 0)) drop-shadow(0 0 1px rgba(61, 220, 132, 0)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.75));
    }

    69% {
        filter:
            drop-shadow(0 0 1px rgba(61, 220, 132, 1)) drop-shadow(0 0 2px rgba(61, 220, 132, 0.50)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.75));
    }

    76% {
        filter:
            drop-shadow(0 0 0 rgba(61, 220, 132, 0)) drop-shadow(0 0 1px rgba(61, 220, 132, 0)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.75));
    }
}

/* =========================
   FIRST MEETING
   ========================= */
#onboardingFirstMeetingCharacter,
#onboardingBasicsCharacter,
#onboardingIdentityCharacter {
    opacity: 1;
}

#onboardingFirstMeetingCharacterNext,
#onboardingBasicsCharacterNext,
#onboardingIdentityCharacterNext {
    opacity: 0;
    transition: opacity 180ms ease-in-out;
}

/* =========================
   IDENTITY
   ========================= */
#onboardingIdentityBackground {
    z-index: 1;
}

#onboardingIdentityImage {
    z-index: 2;
}

#onboardingIdentityProfile {
    position: absolute;
    z-index: 10;
}

#onboardingIdentityContent {
    z-index: 20;
}

#onboardingIdentityCharacter.onboarding-identity-character-background {
    filter:
        brightness(0.7) blur(1px);

    opacity: 0.85;
}

#onboardingIdentityProfile {
    position: absolute;
    inset: 0;

    z-index: 10;

    pointer-events: none;
}

#onboardingIdentityProfile .player-name-container {
    max-width: calc(100% - 10px);

    margin: 0;
    padding: 8px 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    background: rgba(18, 18, 18, 0.99);

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;

    user-select: none;

    position: absolute;

    left: 50%;
    top: 65%;

    transform: translate(-50%, -50%);

    pointer-events: auto;
}

#onboardingIdentityProfile .player-name-row {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    box-sizing: border-box;
}

#onboardingIdentityAvatarSelector {
    width: 320px;
    height: auto;
    position: absolute;

    left: 50%;
    top: 33.5%;

    transform: translate(-50%, -50%);

    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

#corePortraitEditIdentity {
    font-size: 24px;
    right: 12px;
    top: 8px;
}

#playerNameIdentity {
    margin-top: 3px;
    font-size: 18px;
}

#onboardingIdentityEditNicknameBtn {
    width: 28px;
    height: 28px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(255, 255, 255, 0.9);

    font-size: 14px;
    cursor: pointer;
    margin-left: 6px;
}

#onboardingIdentityNickname {
    color: #36E08A;
    font-size: 22px;
    font-weight: 600;
}

/* =========================
   Reclaimer Visual Novel Test
   TEMPORARY PREVIEW
   + ONBOARDING INTRO
   ========================= */
#reclaimerPreview,
#onboardingIntro,
#onboardingFirstMeeting,
#onboardingIdentity {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    background: #000000;
    box-sizing: border-box;
}

.reclaimer-preview-scene,
.onboarding-intro-scene {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000000;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    max-width: 360px;
    width: 100%;

    margin: 0 auto;
}

.reclaimer-preview-character {
    position: absolute;
    left: 50%;
    bottom: 0%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
}

.reclaimer-preview-dialogue,
.onboarding-intro-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 14px 12px;

    max-width: 360px;

    display: flex;
    flex-direction: column;
    gap: 18px;

    background: rgba(18, 18, 18, 1.0);

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-bottom: none;

    border-radius: 14px 14px 0 0;

    box-sizing: border-box;
}

#onboardingFirstMeetingContent,
#onboardingIdentityContent,
.reclaimer-preview-dialogue {
    border: 1px solid rgba(255, 255, 255, 0.14);

    border-left: 2px solid rgba(255, 255, 255, 0.32);
}

/* The upper dialogue border doubles as progress through the current block. */
#onboardingBasics .reclaimer-preview-dialogue,
#onboardingIntro .onboarding-intro-content,
#onboardingFirstMeetingContent,
#onboardingIdentityContent { border-top-color: transparent; }
.onboarding-reading-progress {
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 3px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
    pointer-events: none;
}
.onboarding-reading-progress-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #00FF6A, #3DDC84);
}


#reclaimerPreviewNavigation button,
#onboardingIntroNavigation button,
#onboardingFirstMeetingNavigation button,
#onboardingBasicsNavigation button,
#onboardingIdentityNavigation button {
    flex: 1;

    padding: 12px 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.151);
    border-radius: 12px;

    background: #1a1a1a;
    color: rgba(255, 255, 255, 0.65);

    font-size: 14px;

    cursor: pointer;
    transition: 0.2s;

    margin-right: 0;
}

/* Tutorial Engine Navigation */
#reclaimerPreviewNavigation,
#onboardingIntroNavigation,
#onboardingFirstMeetingNavigation,
#onboardingBasicsNavigation,
#onboardingIdentityNavigation {
    display: flex;
    gap: 12px;
    width: 100%;

    margin-bottom: -6px;
}

#reclaimerPreviewNavigation button:disabled,
#onboardingIntroNavigation button:disabled,
#onboardingFirstMeetingNavigation button:disabled,
#onboardingBasicsNavigation button:disabled,
#onboardingIdentityNavigation button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* =========================
   ADAPTATION FOR SMARTHONES
========================= */
@media (max-width: 600px) {
    body {
        padding: 0;
    }

    .overlay-content {
        padding: 14px 12px;
        /* 🔥 ключевой фикс */
        margin: 10px;
        /* оставляем только визуальный отступ */
        width: min(520px, calc(100% - 20px));
        box-sizing: border-box;
    }

    #addManualBtn,
    #tutorialArchiveBtn {
        bottom: 100px;
        /* 🔥 ниже поля комментария */
        width: 40px;
        height: 40px;
        font-size: 26px;
    }

    #addManualBtn {
        right: 10px;
    }

    #tutorialArchiveBtn {
        left: 10px;
    }

    #coreSubTab #tutorialArchiveBtn {
        left: auto;
        right: 10px;
    }

    /* 🔥 чуть увеличиваем “зону жизни” панели */
    #bottomNav {
        height: 64px;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    }

    /* 🔥 уменьшаем иконки */
    .nav-btn img {
        width: 38px;
        height: 38px;
    }

    /* 🔥 центр становится более компактным */
    #centerBtn {
        width: 68px;
        height: 68px;
        top: -8px;
    }

    #centerBtn img {
        width: 34px;
        height: 34px;
        transform: translateX(2px) scale(1);
    }

    #centerBtn.active img {
        transform: translateX(2px) scale(1.12);
    }

    /* 🔥 убираем “слишком агрессивный подъём” */
    #centerBtn:hover {
        transform: scale(1.03);
    }

    .artifact-imprint-lore-with-hint,
    .achievement-imprint-lore-with-hint {
        padding-right: 0;
    }

    .relic-tabs {
        max-width: 355px;
    }

    .summon-window,
    .suppression-window {
        width: calc(100vw - 20px);
        max-width: 350px;
        box-sizing: border-box;
    }

    /* Desktop Hover Deactivation for Log Cards */
    @media (hover: none),
    (pointer: coarse) {
        .log-card:hover {
            transform: none;
            box-shadow: none;
        }
    }

    /* Desktop Hover Deactivation for Artifact Cards */
    @media (hover: none),
    (pointer: coarse) {
        .imprint-item:hover {
            transform: translateY(0);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45),
                0 2px 6px rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.06);
        }
    }
}

/* Keep locked controls in their original layout; only their content is masked. */
:where(.feature-locked) {
    /* Anchor the lock on ordinary controls without overriding fixed/absolute positioning. */
    position: relative;
}

.feature-locked {
    color: transparent !important;
    text-shadow: none !important;
    cursor: default !important;
}

.feature-locked>* {
    visibility: hidden !important;
}

.feature-locked::after {
    content: "\1F512";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(136, 136, 136, 0.9);
    font: 18px/1 "Segoe UI Symbol", sans-serif;
    visibility: visible;
}

.feature-panel-locked {
    display: none !important;
}

/* The engine highlights the current action and blurs only sibling branches. */
.tutorial-action-hint {
    outline: 2px solid #3DDC84 !important;
    outline-offset: 4px;
    box-shadow: 0 0 0 6px rgba(61, 220, 132, 0.12), 0 0 18px rgba(61, 220, 132, 0.35) !important;
}

.tutorial-action-blurred {
    filter: blur(3px) !important;
    transition: filter 200ms ease;
}

/* The Achievement's polygon would clip the external tutorial ring. */
.imprint-item-achievement.tutorial-action-hint {
    clip-path: none;
    border-radius: 8px;
}

#artifactCommentContainer.tutorial-action-hint,
#achievementCommentContainer.tutorial-action-hint {
    border-radius: 8px;
    outline-offset: 4px;
}

/* Leave breathing room around Core's text without changing its normal layout. */
#sdLevelDisplay.tutorial-action-hint,
#backupStatusToggle.tutorial-action-hint,
#backupStatusContainer.tutorial-action-hint {
    outline-offset: 8px;
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(61, 220, 132, 0.18) !important;
}

/* Keep the hint ring outside the segmented tabs and round the highlighted button. */
.relic-tabs:has(.tutorial-action-hint) {
    overflow: visible;
}

.relic-tabs .relic-tab-btn.tutorial-action-hint {
    border-radius: 10px;
}

/* Keep Core's tutorial ring inside the button, clear of the active Paths tab. */
#relicTab .relic-tab-btn[data-tab="coreSubTab"].tutorial-action-hint {
    outline-offset: -2px;
    box-shadow: inset 0 0 12px rgba(61, 220, 132, 0.35) !important;
}

/* Guidance can lock the current tab's action while its label still identifies the screen. */
#relicTab .relic-tab-btn.active.feature-locked {
    color: #000 !important;
}

#relicTab .relic-tab-btn.active.feature-locked::after {
    display: none;
}

#relicTab .relic-tab-btn.active.feature-locked > * {
    visibility: visible !important;
}

/* Give Add New Path a wider hint ring in Enter Relic only. */
.tutorial-action-hint.tutorial-action-hint-spaced {
    outline-offset: 9px;
    box-shadow: 0 0 0 11px rgba(61, 220, 132, 0.12), 0 0 24px rgba(61, 220, 132, 0.35) !important;
}

/* The workspace starts hidden in HTML, independently of startup JS timing. */
body[data-workspace-visible="false"] #tabsContent,
body[data-workspace-visible="false"] #bottomNav,
body[data-workspace-visible="false"] .tabs-main,
body[data-workspace-visible="false"] [data-feature-panel] {
    display: none !important;
}

#onboardingBasics {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #000;
    align-items: center;
    justify-content: center;
}

#onboardingBasicsSkip,
#onboardingIntroSkip {
    position: absolute;
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    z-index: 1;
    width: auto;
    margin: 0;
    padding: 8px 12px;
    pointer-events: auto;
}

#onboardingIntroSkip {
    top: calc(24px + env(safe-area-inset-top, 0px));
}

/* Tutorial presentation reuses the onboarding portrait and dialogue styles. */
#onboardingBasics {
    z-index: 100030;
}

/* Keep the portrait editor below tutorial narration while guidance is active. */
body[data-tutorial-running="live"] #avatarOverlay {
    z-index: 100029;
}

/* Scene backgrounds are rendered on #onboardingBasics by the tutorial engine. */
#onboardingBasics .reclaimer-preview-scene {
    background: transparent;
}

#onboardingBasics [hidden],
#tutorialArchiveOverlay[hidden] {
    display: none !important;
}

#onboardingBasics[data-presentation="app-portrait"],
#onboardingBasics[data-presentation="guided"] {
    background: transparent;
    pointer-events: none;
}

#onboardingBasics[data-presentation="app-portrait"] .reclaimer-preview-dialogue {
    pointer-events: auto;
}

#onboardingBasics[data-presentation="guided"] .reclaimer-preview-scene {
    max-width: none;
    background: transparent;
    overflow: visible;
}

#onboardingBasics[data-presentation="guided"] .onboarding-intro-images {
    width: 110px;
    height: 150px;
    left: auto;
    right: 10px;
    top: 48px;
    bottom: auto;
    transform: none;
}

#onboardingBasics[data-presentation="guided"] .reclaimer-preview-dialogue {
    top: 8px;
    bottom: auto;
    left: 8px;
    right: 130px;
    max-width: 360px;
    max-height: 40vh;
    overflow-y: auto;
    pointer-events: auto;
    gap: 8px;
    border-radius: 14px;
}

/* A scene can keep its dialogue at the bottom while the live app stays visible. */
#onboardingBasics[data-presentation="guided"][data-dialogue-position="bottom"] .reclaimer-preview-dialogue {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 50vh;
    gap: 18px;
    border-radius: 14px 14px 0 0;
}

/* Pin narration to the top; Skip remains clickable in the layer above it. */
#onboardingBasics[data-presentation="guided"][data-dialogue-position="top-overlay"] .reclaimer-preview-dialogue,
#onboardingBasics[data-dialogue-position="top-below-skip"] .reclaimer-preview-dialogue {
    top: env(safe-area-inset-top, 0px);
    bottom: auto;
    left: 8px;
    right: 8px;
    margin: 0 auto;
}

/* One shared clearance for narration placed below Skip; the app stays in place. */
#onboardingBasics[data-dialogue-position="top-below-skip"] .reclaimer-preview-dialogue {
    top: calc(56px + env(safe-area-inset-top, 0px));
}

#onboardingBasics[data-dialogue-position="top-overlay"] #onboardingBasicsSkip {
    z-index: 2;
}

#tutorialReplayDemo h2,
#tutorialReplayDemo p {
    margin: 0;
    font-size: 14px;
}

#onboardingBasics button {
    min-height: 36px;
}

#tutorialExampleFrame,
#tutorialReplayFrame {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 100025;
    pointer-events: none;
    background: #000;
}

#tutorialExampleImage {
    position: absolute;
    top: 30vh;
    left: 0;
    width: 100%;
    height: 65vh;
    object-fit: contain;
    pointer-events: none;
}

#onboardingBasicsClose {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: 78px;
    z-index: 100032;
    pointer-events: auto;
}

#tutorialArchiveOverlay {
    position: fixed;
    inset: 0;
    z-index: 100020;
    background: #121212;
    color: #fff;
    overflow-y: auto;
    padding: 16px;
}

.tutorial-archive-window {
    max-width: 480px;
    margin: 0 auto;
    padding-top: 35vh;
}

body:not([data-tutorial-running]) .tutorial-archive-window,
body[data-tutorial-dialogue-position="bottom"] .tutorial-archive-window {
    padding-top: 10px;
}

#tutorialArchiveList details {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 10px;
    margin: 12px 0;
}

#tutorialArchiveList summary {
    cursor: pointer;
}

.tutorial-archive-block {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    margin: 12px 0;
}

.log-card[data-tutorial-moment] {
    outline: 2px solid #64b8e9;
}

/* Reserve space only when tutorial narration occupies the top of the screen. */
body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] #tabsContent {
    padding-top: 42vh;
}

body[data-tutorial-running="replay"] #tabsContent,
body[data-tutorial-running="replay"] #bottomNav {
    visibility: hidden;
}

/* Keep the actual form below the narration during guided practice. */
body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] #pathOverlay,
body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] #aspectPickerOverlay,
body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] #pathDetailsOverlay,
body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] #editLogNoteOverlay,
body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] #finishScreen {
    padding-top: 42vh;
    box-sizing: border-box;
}

body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] #pathOverlay .overlay-content,
body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] #editLogNoteOverlay .overlay-content,
body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] #pathDetailsOverlay .overlay-content {
    max-height: 55vh;
    overflow-y: auto;
}

body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] #pathPickerOverlay {
    padding-top: 42vh;
    box-sizing: border-box;
}

body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] .path-picker-window,
body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] .path-overlay-content,
body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] .path-details-card,
body[data-tutorial-running="live"][data-tutorial-dialogue-position="top"] #finishScreen .finish-content {
    max-height: 54vh;
    overflow-y: auto;
}