* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0a0a12;
    color: #d4c9a8;
    min-height: 100vh;
}

#app {
    max-width: 1300px;
    margin: 0 auto;
    padding: 15px;
}

/* === HEADER === */
header {
    text-align: center;
    padding: 15px 0 20px;
}

header h1 {
    font-size: 2em;
    color: #e8d5a3;
    text-shadow: 0 0 20px rgba(232, 213, 163, 0.3);
}

.header-info {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 8px;
    font-size: 0.85em;
    color: #8a7e65;
}
.header-with-tip {
    position: relative;
    cursor: default;
}
.header-tip {
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    background: #12121e;
    border: 1px solid #2a2a4a;
    border-radius: 8px;
    padding: 0;
    font-size: 0.82em;
    color: #aaa;
    white-space: normal;
    width: 240px;
    z-index: 100;
    margin-top: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    overflow: hidden;
}
.header-with-tip:hover .header-tip {
    display: block;
}
.tip-flavor {
    padding: 8px 10px;
    border-left: 3px solid #666;
    color: #c8c0a8;
    font-size: 0.92em;
    line-height: 1.35;
    background: #1a1a2a;
}
.tip-mods {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 10px;
}
.tip-mod {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.88em;
    font-weight: 600;
}
.tip-mod-good { background: #1a2a1a; color: #6aea8a; }
.tip-mod-bad { background: #2a1a1a; color: #ee7a7a; }
.tip-mod-neutral { color: #888; }
.stat-sub {
    margin-top: -2px;
}
.stat-bonus-text {
    font-size: 0.78em;
    color: #6aea8a;
}

/* === LAYOUT === */
.main-layout {
    display: grid;
    grid-template-columns: 230px 1fr 300px;
    gap: 15px;
}

.center-panel { min-width: 0; }

.panel {
    background: #12121e;
    border: 1px solid #2a2a3a;
    border-radius: 10px;
    padding: 15px;
}

.panel h2 {
    color: #c4a44e;
    font-size: 1.1em;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #2a2a3a;
}

.panel h3 {
    color: #9a8a5e;
    font-size: 0.9em;
    margin: 12px 0 8px;
}

/* === STATS === */
.stat-group { margin-bottom: 8px; }

.stat {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 0.85em;
}

.stat-label { color: #8a7e65; flex-shrink: 0; }
.stat-value { color: #d4c9a8; font-weight: 600; text-align: right; margin-left: 6px; }
.realm-name { text-shadow: 0 0 8px rgba(232, 213, 163, 0.4); }

.save-group {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.save-group .btn { flex: 1; font-size: 0.8em; padding: 6px 8px; }

/* === TABS === */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 15px;
    border-bottom: 1px solid #2a2a3a;
    padding-bottom: 8px;
}

.tab-btn {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: #8a7e65;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9em;
    transition: all 0.2s;
}

.tab-btn:hover { color: #d4c9a8; }

.tab-badge { font-size: 0.7em; margin-left: 4px; }
#breakthrough-badge { color: #6aea8a; }
.tab-btn.active {
    color: #e8d5a3;
    border-color: #2a2a3a;
    border-bottom-color: #12121e;
    background: #12121e;
}

.badge {
    font-size: 0.75em;
    background: #2a2a3a;
    padding: 1px 6px;
    border-radius: 8px;
    color: #8a7e65;
    margin-left: 4px;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* === QI BAR === */
.qi-section { text-align: center; margin-bottom: 15px; }

.qi-bar-container {
    position: relative;
    width: 100%;
    height: 28px;
    background: #1a1a2e;
    border-radius: 14px;
    border: 1px solid #2a2a3a;
    overflow: hidden;
    margin: 8px 0;
}

.qi-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2a4a8a, #4a7acc, #6aaaff);
    border-radius: 14px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(74, 122, 204, 0.5);
}

.qi-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8em;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* === DAO BAR === */
.dao-bar-section { margin-top: 6px; position: relative; }
.dao-bar-tip { white-space: nowrap; max-width: none; font-size: 0.75em; line-height: 1.4; left: 0; transform: none; text-align: left; }
.dao-desc { font-size: 0.75em; color: #888; font-style: italic; text-align: center; margin-top: 3px; }
.dao-bar-container {
    position: relative;
    width: 100%;
    height: 22px;
    background: #1a1a2e;
    border-radius: 11px;
    border: 1px solid #2a2a3a;
    overflow: hidden;
    margin: 4px 0;
}
.dao-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6a4a8a, #8a6acc, #aa8aff);
    border-radius: 11px;
    transition: width 0.3s ease;
}
.dao-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75em;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    white-space: nowrap;
}

.qi-per-sec { color: #6aaaff; font-size: 0.8em; display: inline-block; }
.qi-rate-under-bar { font-size: 0.75em; color: #6aaaff; text-align: center; margin-top: 2px; }

.stat-progress-speed {
    color: #6a8a5a;
    font-size: 0.85em;
    font-weight: 600;
    margin-top: 4px;
}
.stat-progress-breakdown {
    color: #888;
    font-size: 0.85em;
    margin-top: 2px;
}

/* === BUTTONS === */
.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 15px;
}
.btn-tip-wrap {
    display: inline-block;
}

.btn {
    padding: 8px 16px;
    border: 1px solid #3a3a4a;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85em;
    font-family: inherit;
    transition: all 0.2s;
    color: #d4c9a8;
    background: #1a1a2e;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-primary {
    background: linear-gradient(135deg, #1a3a6a, #2a5a9a);
    border-color: #3a6aaa;
    font-size: 1em;
    padding: 10px 24px;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #2a4a7a, #3a6aaa);
    box-shadow: 0 0 15px rgba(42, 90, 154, 0.4);
}

.btn-breakthrough {
    background: linear-gradient(135deg, #6a3a1a, #aa6a2a);
    border-color: #cc8a3a;
}

.btn-breakthrough:hover:not(:disabled) {
    box-shadow: 0 0 15px rgba(170, 106, 42, 0.4);
}

.btn-pill {
    background: linear-gradient(135deg, #1a5a3a, #2a8a5a);
    border-color: #3aaa6a;
}
.btn-pill.pill-t2 {
    background: linear-gradient(135deg, #2a4a7a, #3a6aaa);
    border-color: #4a8acc;
}
.btn-pill.pill-t3 {
    background: linear-gradient(135deg, #5a2a7a, #7a3aaa);
    border-color: #9a5acc;
}
.btn-pill.pill-t4 {
    background: linear-gradient(135deg, #7a5a1a, #aa8a2a);
    border-color: #ccaa3a;
}
/* Pill table */
.pill-table { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.pill-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}
.pill-name {
    width: 90px;
    font-size: 0.88em;
    font-weight: 600;
    color: #8acea8;
}
.pill-name.pill-t2 { color: #7aaaee; }
.pill-name.pill-t3 { color: #aa8aee; }
.pill-name.pill-t4 { color: #eebb44; }
.pill-count {
    width: 36px;
    font-size: 0.88em;
    color: #aaa;
    text-align: right;
}
.pill-use-btns { display: flex; gap: 3px; }
.pill-use-btns .btn-pill { font-size: 0.82em; padding: 3px 8px; }
.pill-use-btns .pill-multi { font-size: 0.72em; padding: 2px 5px; opacity: 0.8; }
.pill-extra { opacity: 0.7; font-size: 0.9em; }
.pill-refine { display: flex; gap: 3px; margin-left: auto; }
.pill-refine .btn { font-size: 0.75em; padding: 2px 5px; }
.pill-refine .pill-multi { font-size: 0.68em; padding: 1px 4px; opacity: 0.8; }
.stat-value-sub { font-size: 0.8em; color: #999; }

.btn-secondary {
    background: #1e1e30;
    border-color: #3a3a5a;
}

/* === STAT TIPS === */
.stat-with-tip {
    position: relative;
    cursor: help;
}

.stat-with-tip .stat-tip {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    background: #1a1a2e;
    border: 1px solid #3a3a5a;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.85em;
    color: #aad4aa;
    white-space: normal;
    max-width: 300px;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.stat-with-tip:hover .stat-tip {
    display: block;
}
.qi-section .stat-tip {
    max-width: none;
    white-space: nowrap;
}
.stat-with-tip.tech-xp-speed .stat-tip {
    max-width: 600px;
    white-space: nowrap;
}

/* === STONE SHOP === */
.stone-shop-section {
    margin-top: 12px;
}

.stone-shop {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.shop-item {
    position: relative;
}

.shop-item .btn {
    font-size: 0.78em;
}

.shop-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    border: 1px solid #4a4a6a;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.75em;
    color: #ccc;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.shop-item:hover .shop-tip {
    display: block;
}

/* === ACTIVITIES === */
.activities-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.activity-row {
    padding: 8px 10px;
    border-radius: 6px;
    background: #1a1a28;
    border: 1px solid #2a2a3a;
    cursor: pointer;
    transition: all 0.2s;

}

.activity-row:hover {
    border-color: #3a3a5a;
    background: #1e1e30;
}

.activity-row.active {
    border-color: #4a7acc;
    background: #161a28;
    box-shadow: 0 0 8px rgba(74, 122, 204, 0.2);
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.activity-name {
    font-size: 0.82em;
    font-weight: 600;
    color: #d4c9a8;
}

.activity-info {
    font-size: 0.72em;
    color: #8a7e65;
}

.activity-bar-container {
    width: 100%;
    height: 6px;
    background: #1a1a2e;
    border-radius: 3px;
    overflow: hidden;
}

.activity-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2a4a8a, #4a7acc);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.bar-strength { background: linear-gradient(90deg, #8a3a2a, #cc5a3a); }
.bar-spirit { background: linear-gradient(90deg, #2a3a8a, #4a5acc); }
.bar-luck { background: linear-gradient(90deg, #8a7a2a, #ccaa3a); }

.debug-speed-list { gap: 4px; flex-wrap: wrap; }
.debug-speed-btn.active { border-color: #eebb44; color: #eebb44; background: #1e1e14; }
.debug-toggles { display: flex; flex-direction: column; gap: 2px; }
.debug-toggles label { font-size: 0.82em; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.debug-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.debug-grid .btn { font-size: 0.75em; }

/* === QI BREAKDOWN === */
.qi-breakdown {
    font-size: 0.68em;
    color: #6a6a5a;
    margin-top: 4px;
    line-height: 1.4;
}

.breakthrough-info {
    font-size: 0.78em;
    font-weight: 600;
    margin-top: 4px;
}

.btn-small { padding: 5px 10px; font-size: 0.8em; }
.btn-tiny { padding: 2px 8px; font-size: 0.75em; margin-left: 4px; }
.btn-scroll { background: #2a4a5a; border-color: #66ccff; color: #66ccff; }
.btn-scroll:hover { background: #3a6a7a; }

.btn-pause {
    width: 100%;
    margin-top: 8px;
    background: #1a1a2e;
    border-color: #444;
    color: #aaa;
}
.btn-pause:hover { background: #2a2a3e; color: #ddd; }
.btn-pause-active {
    background: #1a2e1a;
    border-color: #4a6a4a;
    color: #6aea8a;
}

.btn-danger-btn {
    background: #2a1a1a;
    border-color: #5a3a3a;
    color: #cc7a7a;
}

.btn-equip { border-color: #3a6a3a; color: #6aea8a; }
.btn-unequip { border-color: #6a3a3a; color: #cc8a8a; }
.btn-levelup { border-color: #3a3a6a; color: #8aaaee; }

.auto-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.auto-status { font-size: 0.8em; color: #6aaa6a; }

/* === EVENT LOG === */
.log-panel { display: flex; flex-direction: column; }
.log-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.log-header h2 { margin: 0; }
.log-time-toggle {
    font-size: 0.75em; padding: 2px 8px; cursor: pointer;
    background: #2a2a4a; color: #aab; border: 1px solid #3a3a5a; border-radius: 4px;
}
.log-time-toggle:hover { background: #3a3a5a; color: #dde; }

.event-log {
    flex: 1;
    max-height: 600px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.event-log::-webkit-scrollbar { width: 4px; }
.event-log::-webkit-scrollbar-track { background: #1a1a2e; }
.event-log::-webkit-scrollbar-thumb { background: #3a3a5a; border-radius: 2px; }

.log-entry {
    font-size: 0.78em;
    padding: 5px 7px;
    border-radius: 4px;
    background: #1a1a28;
    border-left: 3px solid #3a3a5a;
    line-height: 1.35;
}

.log-system      { border-left-color: #6a8acc; color: #8aaace; }
.log-cultivation  { border-left-color: #4a7acc; color: #7aaaee; }
.log-breakthrough { border-left-color: #cc8a3a; color: #eeba6a; background: #1e1a14; }
.log-event        { border-left-color: #8a6acc; color: #aa8aee; }
.log-danger       { border-left-color: #cc4a4a; color: #ee7a7a; background: #1e1414; }
.log-reward       { border-left-color: #4acc6a; color: #6aea8a; background: #141e16; }
.log-year         { border-left-color: #8a8a5a; color: #aaa87a; font-style: italic; }

/* === MODAL === */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 100;
    justify-content: center;
    align-items: center;
}

.modal-overlay.active { display: flex; }

.modal {
    background: #14141e;
    border: 1px solid #3a3a5a;
    border-radius: 12px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    text-align: center;
}

.modal h2 {
    color: #e8d5a3;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.modal-desc {
    color: #8a7e65;
    font-size: 0.9em;
    margin-bottom: 20px;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
}

.root-result { min-height: 120px; }

.element-choice-header { font-size: 0.85em; color: #aaa; margin-bottom: 8px; }
.element-choice-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.element-choice-btn { font-size: 0.8em; padding: 4px 10px; border-width: 2px; transition: all 0.2s; }
.element-choice-btn.selected { background: rgba(255,255,255,0.1); border-width: 2px; font-weight: bold; }
.element-choice-hint { font-size: 0.75em; color: #888; }

.modal-root { max-width: 700px; }

.modal-intro {
    max-width: 650px;
    max-height: 85vh;
    overflow-y: auto;
}
.modal-intro .intro-text p {
    margin: 0 0 12px;
    line-height: 1.6;
    color: #ccc;
}
.modal-intro .intro-tips { margin-top: 16px; }
.modal-intro .intro-tips h3 { margin-bottom: 8px; color: #eebb44; }
.modal-intro .intro-tips ul { padding-left: 20px; margin: 0; }
.modal-intro .intro-tips li {
    margin-bottom: 6px;
    line-height: 1.5;
    color: #aaa;
}
.modal-intro .intro-tips li strong { color: #ddd; }

/* FAQ в настройках */
.faq-section { margin-top: 16px; }
.faq-list { display: flex; flex-direction: column; gap: 4px; }
.faq-item {
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 0;
}
.faq-item summary {
    padding: 8px 12px;
    cursor: pointer;
    color: #ddd;
    font-weight: bold;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
    content: "▸ ";
    color: #eebb44;
}
.faq-item[open] summary::before { content: "▾ "; }
.faq-item p {
    padding: 4px 12px 10px;
    margin: 0;
    color: #aaa;
    line-height: 1.5;
}

.name-input-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.name-input-label {
    color: #aaa;
    font-size: 0.95em;
    white-space: nowrap;
}
.name-input {
    background: #1a1a28;
    border: 1px solid #444;
    border-radius: 6px;
    color: #e0d8c8;
    padding: 6px 10px;
    font-size: 1em;
    font-family: inherit;
    width: 200px;
    outline: none;
    transition: border-color 0.2s;
}
.name-input:focus {
    border-color: #8aaaee;
}

.root-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin: 10px 0;
}

.root-card {
    background: #1a1a2e;
    border: 2px solid #3a3a5a;
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.root-card:hover:not(.root-locked) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.root-card.selected {
    border-width: 2px;
    box-shadow: 0 0 15px rgba(106, 234, 138, 0.3);
}

.root-card.root-locked {
    opacity: 0.5;
    cursor: default;
}

.root-card h3 { font-size: 1.1em; margin-bottom: 6px; }
.root-desc { color: #aaa; font-size: 0.82em; margin-bottom: 6px; line-height: 1.3; }
.root-mult { color: #6aea8a; font-size: 0.85em; }
.root-elem-count { color: #8aaaee; font-size: 0.82em; }
.root-stat-bonus { color: #eebb44; font-size: 0.82em; }
.root-tier-label { font-size: 0.75em; margin-bottom: 4px; opacity: 0.7; }
.root-req { color: #ee7a7a; font-size: 0.78em; margin-top: 6px; }

.modal-first-life { color: #aaa; margin-bottom: 12px; font-style: italic; }
.modal-rebirth-hint { color: #8aaaee; margin-bottom: 12px; }

.root-common  { border-color: #aaa; }
.root-uncommon { border-color: #4acc6a; }
.root-rare    { border-color: #4a8acc; }
.root-epic    { border-color: #cc6aee; }
.root-legendary { border-color: #ffaa44; box-shadow: 0 0 15px rgba(255, 170, 68, 0.2); }
.root-trash   { border-color: #555; }

/* === TECHNIQUES === */
.techniques-list { display: flex; flex-direction: column; gap: 4px; }

.empty-msg { color: #666; text-align: center; padding: 30px; font-style: italic; }
.slots-info { color: #8a7e65; font-size: 0.85em; margin-bottom: 8px; }
.insight-section { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.insight-section {
    position: relative;
}
.insight-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: #1a1a2e;
    border: 1px solid #4a4a6a;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.88em;
    color: #ccc;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.insight-section:hover .insight-tip {
    display: block;
}

/* === COMPACT TECH CARDS === */
.tech-card {
    background: #1a1a28;
    border: 1px solid #2a2a3a;
    border-left: 3px solid #2a2a3a;
    border-radius: 6px;
    padding: 6px 10px;
    transition: border-color 0.2s;
}

.tech-card.tech-common    { border-left-color: #555; }
.tech-card.tech-uncommon  { border-left-color: #4acc6a; }
.tech-card.tech-rare      { border-left-color: #4488ff; }
.tech-card.tech-epic      { border-left-color: #aa44cc; }
.tech-card.tech-legendary { border-left-color: #ff8844; }
.tech-card.tech-divine    { border-left-color: #ffe080; }

.tech-card.tech-unequipped {
    opacity: 0.5;
    border-left-style: dashed;
}
.tech-card.tech-unequipped .stat-tip {
    opacity: 2; /* компенсация родительского 0.5 */
}

.tech-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.tech-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.tech-row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}

.tech-name {
    font-weight: 600;
    color: #d4c9a8;
    font-size: 0.85em;
    white-space: nowrap;
    overflow: visible;
}
.tech-desc-tip {
    white-space: normal;
    max-width: 350px;
    font-weight: normal;
    font-size: 0.9em;
}

.btn-tiny {
    font-size: 0.7em;
    padding: 1px 6px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.4;
}

.btn-equip {
    background: #2a4a3a;
    color: #6aea8a;
    border: 1px solid #4acc6a;
}
.btn-equip:hover:not(:disabled) { background: #3a6a4a; }
.btn-equip:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-unequip {
    background: #3a2a2a;
    color: #cc6a6a;
    border: 1px solid #cc4444;
}
.btn-unequip:hover { background: #4a3a3a; }

.tech-paused {
    font-size: 0.75em;
    color: #886644;
}

.tech-tier {
    font-size: 0.65em;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
}

.tech-common .tech-tier  { background: #333; color: #aaa; }
.tech-uncommon .tech-tier { background: #1a3a1a; color: #4acc6a; }
.tech-rare .tech-tier    { background: #1a2a3a; color: #4a8acc; }
.tech-epic .tech-tier    { background: #2a1a3a; color: #cc6aee; }
.tech-legendary .tech-tier { background: #3a2a1a; color: #ffaa44; }
.tech-divine .tech-tier  { background: #3a1a1a; color: #ff6644; }

.tech-level {
    color: #8aaaee;
    font-size: 0.72em;
    white-space: nowrap;
}

.tech-effects-inline {
    font-size: 0.72em;
    color: #6aea8a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tech-xp-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.tech-xp-nums {
    font-size: 0.8em;
    color: #9999bb;
}

.tech-xp-max {
    font-size: 0.8em;
    color: #eebb44;
    font-weight: 600;
}

.tech-ascend-inline {
    font-size: 0.75em;
    color: #666;
    font-style: normal;
    position: relative;
}
.tech-ascend-inline .stat-tip {
    white-space: nowrap;
    max-width: none;
    left: auto;
    right: 0;
}

/* === TECH XP STRIP (тонкая полоска внизу карточки) === */
.tech-xp-strip {
    height: 3px;
    background: #1a1a2e;
    border-radius: 0 0 5px 5px;
    margin: 4px -10px -6px -10px;
    overflow: hidden;
}

.tech-xp-bar {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}
.tech-xp-common    { background: linear-gradient(90deg, #555, #888); }
.tech-xp-uncommon  { background: linear-gradient(90deg, #2a5a2a, #4acc6a); }
.tech-xp-rare      { background: linear-gradient(90deg, #2a3a6a, #4a8acc); }
.tech-xp-epic      { background: linear-gradient(90deg, #4a2a6a, #cc6aee); }
.tech-xp-legendary { background: linear-gradient(90deg, #6a4a1a, #ffaa44); }
.tech-xp-divine    { background: linear-gradient(90deg, #6a2a1a, #ff6644); }

.tech-xp-speed {
    font-size: 0.78em;
    color: #6a8a5a;
    position: relative;
    cursor: default;
    white-space: nowrap;
}
.tech-xp-speed .tech-speed-tip {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #1a1a2e;
    border: 1px solid #4a4a6a;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.85em;
    color: #ccc;
    width: max-content;
    max-width: 500px;
    white-space: normal;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.tech-xp-speed:hover .tech-speed-tip {
    display: block;
}

/* === MILESTONES === */
.milestones-list { display: flex; flex-direction: column; gap: 6px; }
.mile-counter { color: #8a7e65; font-size: 0.85em; margin-bottom: 6px; }

.mile-tier-filters { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.mile-filter {
    padding: 4px 10px; font-size: 0.75em; cursor: pointer;
    background: #1a1a28; border: 1px solid #333; border-radius: 4px; color: #888;
}
.mile-filter:hover { border-color: #555; }
.mile-filter.active { border-color: #eebb44; color: #eebb44; background: #1e1e14; }

.mile-category-section { margin-bottom: 12px; }
.mile-category-header {
    font-size: 0.85em; font-weight: 600; color: #d4c9a8;
    padding: 4px 0; margin-bottom: 4px; border-bottom: 1px solid #2a2a3a;
}
.mile-cat-icon { margin-right: 4px; }
.mile-cat-count { color: #666; font-weight: 400; }

.mile-tier-badge { font-size: 0.65em; font-weight: 700; margin-left: auto; white-space: nowrap; }

.mile-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #1a1a28;
    border: 1px solid #2a2a3a;
}

.mile-item.achieved { border-color: #4a6a2a; background: #161e14; }
.mile-item.locked { opacity: 0.5; }

.mile-icon {
    font-size: 1.1em;
    min-width: 40px;
    flex-shrink: 0;
    text-align: center;
    color: #eebb44;
}

.mile-item.locked .mile-icon { color: #555; }

.mile-name { font-size: 0.85em; font-weight: 600; color: #d4c9a8; }
.mile-desc { font-size: 0.75em; color: #888; }
.mile-reward { font-size: 0.7em; color: #8a8; margin-top: 2px; }
.mile-reward.claimed { color: #686; }

/* === REBIRTH MODAL === */
.rebirth-modal {
    max-width: 95vw;
    width: 900px;
    max-height: 95vh;
    overflow-y: auto;
}

.rebirth-intro {
    color: #aaa;
    font-size: 0.9em;
    margin-bottom: 12px;
}

.karma-summary {
    background: #1a1a28;
    border: 1px solid #fc8;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.karma-earned { font-size: 1.1em; color: #fc8; }
.karma-breakdown { font-size: 0.75em; color: #888; margin: 4px 0; }
.karma-total { font-size: 1em; color: #ec8; margin-top: 6px; }

/* Rebirth accordion */
.rebirth-accordion { margin-bottom: 10px; border: 1px solid #333; border-radius: 6px; overflow: hidden; }
.rebirth-accordion-header {
    padding: 8px 12px; background: #1a1a2e; cursor: pointer; font-size: 1em; font-weight: bold;
    color: #ccc; user-select: none; display: flex; align-items: center; gap: 8px;
}
.rebirth-accordion-header:hover { background: #222244; color: #fff; }
.accordion-arrow { font-size: 0.7em; color: #888; width: 12px; display: inline-block; }
.accordion-hint { font-size: 0.8em; color: #888; font-weight: normal; margin-left: auto; }
.rebirth-accordion-body { padding: 8px 10px; }

/* Karma upgrades */
.karma-shop-section { margin-bottom: 16px; }
.karma-upgrades-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.karma-upgrade {
    background: #1a1a28;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
}

.karma-upgrade.maxed { border-color: #4a4; }
.karma-upgrade.cant-afford { opacity: 0.6; }
.ku-name { font-size: 0.85em; color: #dca; font-weight: bold; }
.ku-desc { font-size: 0.7em; color: #888; margin: 2px 0; }
.ku-level { font-size: 0.75em; color: #aaa; margin-bottom: 4px; }

/* Bodies */
.bodies-section { margin-bottom: 16px; }
.bodies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.body-card {
    background: #1a1a28;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.body-card:hover:not(.locked) { background: #22223a; }
.body-card.selected { background: #22224a; border-width: 2px; }
.body-card.locked { opacity: 0.5; cursor: not-allowed; }
.body-name { font-size: 0.95em; font-weight: bold; }
.body-desc { font-size: 0.75em; color: #999; margin: 4px 0; }
.body-perk { font-size: 0.72em; color: #eebb44; margin: 3px 0; }
.body-asc-desc { font-size: 0.7em; color: #fc8; margin: 2px 0; }
.body-asc-badge { color: #fc8; font-size: 0.85em; }
.body-bonuses { font-size: 0.7em; color: #8a8; }
.body-req { font-size: 0.7em; color: #a88; }
.req-met { color: #6a6; }
.req-unmet { color: #a66; }

/* Тиры тел */
.body-tier-group { margin-bottom: 12px; }
.body-tier-header { font-size: 0.85em; font-weight: bold; color: #aac; margin-bottom: 6px; border-bottom: 1px solid #333; padding-bottom: 3px; }
.tier-req { font-weight: normal; color: #888; font-size: 0.9em; }

/* Вознесение тел */
.body-ascension-section { margin-top: 16px; border-top: 1px solid #444; padding-top: 12px; }
.ascension-hint { font-size: 0.75em; color: #888; margin-bottom: 8px; }
.ascension-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ascension-card { background: #1a1a28; border: 1px solid #444; border-radius: 6px; padding: 8px; }
.ascension-card.maxed { opacity: 0.6; }
.asc-body-name { font-size: 0.85em; font-weight: bold; }
.asc-level { font-size: 0.8em; color: #fc8; }
.asc-next { font-size: 0.72em; color: #aaa; margin: 4px 0; }

.rebirth-actions { text-align: center; margin-top: 12px; }
.btn-rebirth-go { font-size: 1.1em; padding: 10px 30px; }
.btn-rebirth-btn { background: #805020; color: #fc8; border-color: #a06020; }

/* === ARTIFACTS === */
.artifact-slots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.artifact-slot {
    background: #1a1a28;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    padding: 10px;
    min-height: 80px;
}

.artifact-slot-filled { border-width: 2px; }

.artifact-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.artifact-slot-label {
    font-size: 0.75em;
    color: #8a7e65;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.artifact-slot-label .slot-icon {
    font-size: 1.8em;
    line-height: 1;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.3));
}
.artifact-slot-icon {
    font-size: 1.6em;
    line-height: 1;
    vertical-align: middle;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.3));
    margin-right: 2px;
}

.artifact-tier-badge {
    font-size: 0.7em;
    font-weight: 600;
}

.artifact-name {
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 2px;
}

.artifact-level {
    font-size: 0.72em;
    color: #8aaaee;
    margin-bottom: 4px;
}

.artifact-effects {
    font-size: 0.72em;
    color: #6aea8a;
    padding: 3px 6px;
    background: #141e16;
    border-radius: 3px;
    margin-bottom: 6px;
}

.artifact-empty {
    color: #555;
    font-size: 0.82em;
    font-style: italic;
    text-align: center;
    padding: 15px 0;
}

.artifact-slot-actions { text-align: center; }

/* Artifact Inventory — compact list */
.artifact-inv-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.artifact-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    background: #1a1a28;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.82em;
    transition: background 0.15s, border-color 0.15s;
}
.artifact-row:hover { background: #222238; }
.artifact-row-equipped { border-left: 3px solid #4a7acc; }
.artifact-row-selected {
    background: #1e1a2e;
    border-color: #c89aff;
    box-shadow: 0 0 6px rgba(200, 154, 255, 0.2);
}
.artrow-name {
    font-weight: 600;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.artrow-effects {
    flex: 1;
    color: #6aea8a;
    font-size: 0.9em;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.artrow-tier {
    font-size: 0.8em;
    white-space: nowrap;
    opacity: 0.7;
}

/* Forge panel — always visible below inventory */
.artifact-forge-panel {
    margin-top: 10px;
    background: #141420;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    padding: 10px 12px;
    position: relative;
    overflow: hidden;
}
.forge-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.forge-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.95em;
}
.forge-tier { font-size: 0.78em; opacity: 0.7; }
.forge-effects {
    flex: 1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.forge-effect {
    color: #6aea8a;
    font-size: 0.82em;
}
.forge-actions {
    display: flex;
    gap: 6px;
}
.forge-actions .btn { font-size: 0.75em; }

.artifact-max {
    font-size: 0.75em;
    color: #eebb44;
    font-weight: 600;
    text-align: center;
    flex: 1;
    line-height: 28px;
}

/* === FORMATIONS === */
.formations-section {
    margin-top: 15px;
    border-top: 1px solid #2a2a3a;
    padding-top: 10px;
}

.formation-slots-header {
    font-size: 0.9em;
    color: #aaa;
    margin-bottom: 6px;
}
.formation-slot-count {
    color: #8aaaee;
    font-weight: 600;
}
.formation-divider {
    font-size: 0.85em;
    color: #666;
    border-top: 1px solid #2a2a3a;
    padding-top: 8px;
    margin-top: 6px;
}
.formation-selected {
    border-color: #3a3a5a;
}
.formation-available {
    opacity: 0.75;
}
.formation-available:hover {
    opacity: 1;
}
.btn-primary-outline {
    background: transparent;
    border: 1px solid #5a8acc;
    color: #5a8acc;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75em;
}
.btn-primary-outline:hover:not(:disabled) {
    background: #5a8acc22;
}
.btn-primary-outline:disabled {
    opacity: 0.4;
    cursor: default;
}
.btn-danger-outline {
    background: transparent;
    border: 1px solid #cc5a5a;
    color: #cc5a5a;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
}
.btn-danger-outline:hover {
    background: #cc5a5a22;
}

.formations-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.formation-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #1a1a28;
    border: 1px solid #2a2a3a;
    border-radius: 6px;
}

.formation-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.formation-name {
    font-size: 0.95em;
    font-weight: 600;
}

.formation-level {
    font-size: 0.85em;
    color: #8aaaee;
}

.formation-desc {
    font-size: 0.85em;
    color: #999;
}

.formation-effect {
    font-size: 0.85em;
    color: #6aea8a;
}

.formation-action {
    margin-left: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.formation-max {
    font-size: 0.85em;
    color: #eebb44;
    font-weight: 600;
}

/* === OPTIONS === */
.options-section { padding: 10px 0; }
.options-section h3 { margin-bottom: 12px; }
.options-list { display: flex; flex-direction: column; gap: 8px; max-width: 300px; }
.options-hint { font-size: 0.75em; color: #666; margin-top: 6px; }
.debug-section { border-top: 1px solid #333; margin-top: 10px; padding-top: 14px; }
.debug-controls { display: flex; flex-direction: column; gap: 8px; }
.debug-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.debug-label { font-size: 0.85em; color: #888; min-width: 65px; }

/* === SECTS === */
.sect-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sect-card {
    background: #1a1a28;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    padding: 12px;
    transition: border-color 0.2s;
}

.sect-card.sect-locked { opacity: 0.5; }

.sect-name {
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 2px;
}

.sect-path {
    font-size: 0.72em;
    color: #8a7e65;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.sect-desc {
    font-size: 0.8em;
    color: #888;
    margin-bottom: 6px;
    line-height: 1.3;
}

.sect-bonuses {
    font-size: 0.75em;
    color: #6aea8a;
    padding: 4px 8px;
    background: #141e16;
    border-radius: 4px;
    margin-bottom: 6px;
}

.sect-req {
    font-size: 0.72em;
    color: #aaa;
    margin-bottom: 8px;
}

.sect-locked-text {
    font-size: 0.8em;
    color: #666;
    font-style: italic;
}

/* Sect active view */
.sect-active-header {
    margin-bottom: 12px;
}

.sect-rank-info {
    display: flex;
    gap: 12px;
    font-size: 0.82em;
    margin-top: 4px;
}

.sect-rank-name { color: #eebb44; font-weight: 600; }
.sect-contribution { color: #8aaaee; }
.sect-next-rank { color: #888; }
.sect-max-rank { color: #6aea8a; }

.sect-rank-bar-container {
    position: relative;
    width: 100%;
    height: 14px;
    background: #1a1a2e;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid #2a2a3a;
    margin-bottom: 12px;
}

.sect-rank-bar {
    height: 100%;
    background: linear-gradient(90deg, #6a4a1a, #eebb44);
    border-radius: 7px;
    transition: width 0.6s ease-out;
}

.sect-rank-bar-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.65em;
    color: #ddd;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.sect-active-bonuses {
    background: #141e16;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 12px;
}

.sect-active-bonuses h4 { font-size: 0.82em; color: #9a8a5e; margin-bottom: 4px; }

.sect-bonus-item {
    display: inline-block;
    font-size: 0.75em;
    color: #6aea8a;
    margin-right: 10px;
}

.sect-mission-section { margin-bottom: 12px; }
.sect-mission-section h4 { font-size: 0.85em; color: #9a8a5e; margin-bottom: 6px; }
.sect-donate-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.sect-donate-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sect-donate-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sect-donate-label { font-size: 0.85em; color: #ccc; min-width: 180px; }
.sect-donate-rate { color: #888; font-size: 0.8em; }
.sect-donate-have { font-size: 0.8em; color: #999; min-width: 70px; }
.sect-donate-buttons { display: flex; gap: 4px; }
.sect-donate-buttons .btn { font-size: 0.75em; padding: 2px 8px; }

.sect-mission-card {
    background: #1a1a28;
    border: 1px solid #2a2a3a;
    border-radius: 6px;
    padding: 10px;
    min-height: 110px;
}

.sect-mission-text { font-size: 0.82em; color: #aaa; margin-bottom: 4px; }
.sect-mission-desc { font-size: 0.78em; color: #d4c9a8; font-weight: 600; margin-bottom: 4px; }
.sect-mission-reward { font-size: 0.72em; color: #6aea8a; margin-bottom: 8px; }

.sect-leave { margin-top: 15px; text-align: center; }

/* Анимация завершения задания */
.sect-mission-complete-anim {
    animation: sect-mission-complete 1.2s ease-out forwards;
}
@keyframes sect-mission-complete {
    0% { background: #1a1a28; }
    25% { background: #2a3a2a; border-color: #6aea8a; box-shadow: 0 0 12px rgba(106,234,138,0.3); }
    100% { background: #2a3a2a; border-color: #6aea8a; }
}

/* Fly-up текст вклада */
.sect-contrib-flyup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #eebb44;
    font-size: 1.2em;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(238,187,68,0.6);
    pointer-events: none;
    animation: sect-flyup 1.2s ease-out forwards;
    z-index: 20;
}
@keyframes sect-flyup {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -150%) scale(1.4); }
}

/* Оверлей повышения ранга */
.sect-rankup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 20, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    border-radius: 8px;
    animation: sect-rankup-fade 2.5s ease-out forwards;
}
@keyframes sect-rankup-fade {
    0% { opacity: 0; }
    15% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}
.sect-rankup-content {
    text-align: center;
    animation: sect-rankup-scale 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes sect-rankup-scale {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.sect-rankup-icon {
    font-size: 2.5em;
    margin-bottom: 8px;
    animation: sect-rankup-glow 1.5s ease-in-out infinite alternate;
}
@keyframes sect-rankup-glow {
    0% { text-shadow: 0 0 10px rgba(238,187,68,0.5); }
    100% { text-shadow: 0 0 25px rgba(238,187,68,0.9), 0 0 50px rgba(238,187,68,0.3); }
}
.sect-rankup-title {
    color: #eebb44;
    font-size: 1.3em;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(238,187,68,0.4);
    margin-bottom: 4px;
}
.sect-rankup-name {
    color: #ffd700;
    font-size: 1.1em;
    font-weight: 600;
}

/* === EXPEDITIONS === */
.expedition-last-reward {
    background: #1a1a20;
    border: 1px solid #3a3a4a;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.expedition-last-header {
    font-size: 0.85em;
    color: #888;
    margin-bottom: 4px;
}
.expedition-last-items {
    font-size: 0.9em;
    color: #cca;
}

.expedition-active {
    background: #1a1a28;
    border: 2px solid #3a3a5a;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
}

.expedition-active-name {
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 8px;
}

.expedition-bar-container {
    position: relative;
    width: 100%;
    height: 20px;
    background: #1a1a2e;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #2a2a3a;
}

.expedition-bar {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s;
    opacity: 0.7;
}

.expedition-bar-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.72em;
    color: #ddd;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
}

.expedition-card {
    background: #1a1a28;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    transition: border-color 0.2s;
}

.expedition-card.expedition-locked { opacity: 0.45; }
.expedition-card.expedition-current { border-width: 2px; background: #161a28; }

.expedition-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.expedition-name { font-size: 0.9em; font-weight: 600; }
.expedition-duration { font-size: 0.72em; color: #8a7e65; }
.expedition-desc { font-size: 0.78em; color: #888; margin-bottom: 4px; line-height: 1.3; }
.expedition-rewards { font-size: 0.78em; margin: 6px 0; padding: 6px 8px; background: rgba(255,255,255,0.03); border-radius: 4px; border-left: 2px solid #333; }
.reward-item { display: block; padding: 1px 0; }
.reward-stones { color: #eebb44; }
.reward-pills { color: #6aea8a; }
.reward-essence { color: #c89aff; }
.reward-dust { color: #b0a080; }
.reward-artifact { color: #cc7a3a; }
.reward-technique { color: #88ccff; }
.expedition-era-bonus { font-size: 0.95em; font-weight: 600; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.06); position: relative; cursor: default; }
.expedition-bonus-tip { max-width: 450px; white-space: normal; }
.expedition-req { font-size: 0.72em; color: #aaa; margin-bottom: 6px; }
.expedition-danger { font-size: 0.85em; margin: 4px 0; padding: 3px 0; }
.expedition-safe { color: #6aea8a; }
.expedition-risky { color: #ee7a7a; }
.expedition-ascended { font-size: 0.8em; color: #eebb44; font-weight: 600; margin: 2px 0; }

.expedition-ascend-progress { font-size: 0.75em; color: #888; margin-top: 4px; }
.expedition-ascend-ready { font-size: 0.78em; color: #eebb44; font-weight: 600; margin-top: 4px; }
.expedition-actions { text-align: right; display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.expedition-in-progress { font-size: 0.78em; color: #eebb44; font-weight: 600; }
.expedition-busy { font-size: 0.75em; color: #888; font-style: italic; }
.expedition-unavailable { font-size: 0.75em; color: #666; font-style: italic; }

/* === ENHANCEMENT SYSTEM (BDO-style) === */

/* Currencies bar */
.enhance-currencies {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    background: #1a1a28;
    border: 1px solid #2a2a3a;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 0.82em;
    position: sticky;
    top: 0;
    z-index: 10;
}
.currency-row { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.currency-item { display: flex; align-items: center; gap: 4px; }
.currency-icon { font-size: 1.1em; }
.currency-with-tip {
    position: relative;
    cursor: default;
}
.currency-tip {
    display: none;
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    background: #1a1a2e;
    border: 1px solid #2a2a4a;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.9em;
    color: #aaa;
    white-space: nowrap;
    z-index: 100;
    margin-top: 4px;
}
.currency-with-tip:hover .currency-tip {
    display: block;
}

/* Enhancement section in artifact card */
.enhance-section {
    margin-top: 6px;
    padding: 6px 8px;
    background: #141420;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.enhance-info { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.78em; }
.enhance-bonus-preview { color: #c89aff; font-style: italic; }
.enhance-chance { font-weight: 700; }
.chance-good { color: #6aea8a; }
.chance-mid { color: #eebb44; }
.chance-low { color: #ee7a7a; }
.enhance-cost { color: #888; }
.enhance-buttons { display: flex; gap: 4px; }
.enhance-max { color: #ffe080; font-weight: 700; font-size: 0.85em; text-align: center; width: 100%; }

/* Enhancement badge */
.enhance-badge {
    font-size: 0.85em;
    font-weight: 700;
    color: #ffe080;
    margin-left: 4px;
}
.transcend-badge {
    font-size: 0.85em;
    font-weight: 700;
    margin-left: 2px;
    text-shadow: 0 0 6px currentColor;
}

/* Fusion / Transcend section */
.fusion-section {
    margin-top: 6px;
    padding: 8px;
    background: rgba(200, 154, 255, 0.08);
    border: 1px solid rgba(200, 154, 255, 0.25);
    border-radius: 6px;
}
.fusion-header {
    font-weight: 700;
    font-size: 0.9em;
    margin-bottom: 4px;
}
.fusion-desc {
    font-size: 0.75em;
    color: #888;
    margin-bottom: 4px;
}
.fusion-cost {
    font-size: 0.78em;
    color: #aaa;
    margin-bottom: 6px;
}
.fusion-candidates {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.btn-fuse {
    background: rgba(200, 154, 255, 0.1);
    border: 1px solid rgba(200, 154, 255, 0.3);
    color: #ccc;
    text-align: left;
    font-size: 0.8em;
    padding: 4px 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-fuse:hover {
    background: rgba(200, 154, 255, 0.2);
}
.fusion-no-candidates {
    font-size: 0.78em;
    color: #666;
    font-style: italic;
}

/* Enhancement buttons */
.btn-enhance {
    background: linear-gradient(135deg, #3a2a5a, #5a3a8a) !important;
    color: #d4c9ff !important;
    border: 1px solid #6a4aaa !important;
    transition: all 0.2s;
}
.btn-enhance:hover:not(:disabled) {
    background: linear-gradient(135deg, #5a3a8a, #7a4aaa) !important;
    box-shadow: 0 0 12px rgba(138, 100, 200, 0.4);
}
.btn-crone {
    background: linear-gradient(135deg, #3a3a20, #5a5a30) !important;
    color: #eebb44 !important;
    border: 1px solid #887730 !important;
    width: 100%;
}
.enhance-crone-row {
    margin-top: 4px;
    display: flex;
}
.btn-crone:hover:not(:disabled) {
    box-shadow: 0 0 12px rgba(238, 187, 68, 0.3);
}
.btn-disassemble {
    background: #2a1a1a !important;
    color: #aa6666 !important;
    border: 1px solid #442222 !important;
}
.btn-disassemble:hover {
    background: #3a2020 !important;
    color: #cc8888 !important;
}
.disassemble-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 10, 20, 0.92);
    backdrop-filter: blur(4px);
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 10;
    padding: 12px;
}
.bulk-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.bulk-popup {
    background: #1a1a2e;
    border: 2px solid #3a3a5a;
    border-radius: 12px;
    padding: 20px 24px;
    min-width: 360px;
    max-width: 500px;
}
.bulk-popup-header {
    font-size: 1.1em;
    font-weight: 600;
    color: #d4c9a8;
    margin-bottom: 4px;
}
.bulk-popup-hint {
    font-size: 0.75em;
    color: #666;
    margin-bottom: 12px;
}
.bulk-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.bulk-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #141420;
    border-radius: 6px;
    border-left: 3px solid #333;
}
.bulk-row-empty { opacity: 0.4; }
.bulk-tier { font-weight: 600; font-size: 0.85em; min-width: 120px; }
.bulk-count { font-size: 0.8em; color: #888; min-width: 40px; }
.bulk-reward { font-size: 0.75em; flex: 1; }
.bulk-popup-close { width: 100%; margin-top: 4px; }
.disassemble-title {
    font-size: 0.95em;
    font-weight: bold;
    color: #ddd;
}
.disassemble-rewards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 0.9em;
}
.disassemble-buttons {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
/* Breakthrough endgame guide */
.breakthrough-guide {
    background: #1a1a2e;
    border: 1px solid #eebb44;
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 6px;
    font-size: 0.82em;
    color: #eebb44;
    line-height: 1.4;
}
.breakthrough-guide .guide-icon {
    font-size: 1.2em;
}
.breakthrough-guide em {
    color: #aaa;
}

/* Inline confirmation panels (rebirth, leave sect) */
.inline-confirm-panel {
    background: #1a1020;
    border: 1px solid #442244;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 8px;
}
.inline-confirm-panel p { margin: 0 0 4px 0; }
.inline-confirm-warning {
    color: #ee7a7a;
    font-weight: bold;
    font-size: 0.9em;
}
.inline-confirm-detail {
    color: #aaa;
    font-size: 0.82em;
}
.inline-confirm-hint {
    color: #6aea8a;
    font-size: 0.8em;
    font-style: italic;
}
.inline-confirm-losses {
    list-style: none;
    padding: 0;
    margin: 6px 0;
    font-size: 0.85em;
}
.inline-confirm-losses li {
    color: #cc6666;
    padding: 1px 0;
}
.inline-confirm-losses li::before {
    content: "\2717 ";
    color: #cc4444;
    margin-right: 4px;
}
.inline-confirm-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.btn-ascend {
    background: linear-gradient(135deg, #2a1a3a, #4a2a6a) !important;
    color: #d4aaff !important;
    border: 1px solid #7a4acc !important;
    font-weight: 600;
    transition: all 0.3s;
}
.btn-ascend:hover:not(:disabled) {
    background: linear-gradient(135deg, #4a2a6a, #6a3a9a) !important;
    box-shadow: 0 0 20px rgba(200, 154, 255, 0.5);
    transform: scale(1.02);
}

/* Enhancement glow effects on cards */
.enhance-glow-rare {
    box-shadow: 0 0 8px rgba(68, 136, 255, 0.2), inset 0 0 8px rgba(68, 136, 255, 0.05);
}
.enhance-glow-epic {
    box-shadow: 0 0 12px rgba(170, 68, 204, 0.3), inset 0 0 10px rgba(170, 68, 204, 0.08);
    animation: glow-pulse-epic 3s ease-in-out infinite;
}
.enhance-glow-legendary {
    box-shadow: 0 0 18px rgba(255, 136, 68, 0.4), inset 0 0 12px rgba(255, 136, 68, 0.1);
    animation: glow-pulse-legendary 2.5s ease-in-out infinite;
}
.enhance-glow-divine {
    box-shadow: 0 0 25px rgba(255, 224, 128, 0.5), inset 0 0 15px rgba(255, 224, 128, 0.15);
    animation: glow-pulse-divine 2s ease-in-out infinite;
}

@keyframes glow-pulse-epic {
    0%, 100% { box-shadow: 0 0 12px rgba(170, 68, 204, 0.3), inset 0 0 10px rgba(170, 68, 204, 0.08); }
    50% { box-shadow: 0 0 20px rgba(170, 68, 204, 0.5), inset 0 0 15px rgba(170, 68, 204, 0.12); }
}
@keyframes glow-pulse-legendary {
    0%, 100% { box-shadow: 0 0 18px rgba(255, 136, 68, 0.4), inset 0 0 12px rgba(255, 136, 68, 0.1); }
    50% { box-shadow: 0 0 30px rgba(255, 136, 68, 0.6), inset 0 0 18px rgba(255, 136, 68, 0.15); }
}
@keyframes glow-pulse-divine {
    0%, 100% { box-shadow: 0 0 25px rgba(255, 224, 128, 0.5), inset 0 0 15px rgba(255, 224, 128, 0.15); }
    50% { box-shadow: 0 0 40px rgba(255, 224, 128, 0.8), inset 0 0 20px rgba(255, 224, 128, 0.25); }
}

/* Enhancement success animation */
.enhance-success-anim {
    animation: enhance-success 0.3s ease-out !important;
}
@keyframes enhance-success {
    0% { transform: scale(1); filter: brightness(1); }
    10% { transform: scale(1.08); filter: brightness(3); }
    20% { transform: scale(1.04); filter: brightness(2.2); }
    35% { transform: scale(1.02); filter: brightness(1.6); }
    60% { filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Enhancement fail animation */
.enhance-fail-anim {
    animation: enhance-fail 0.25s ease-out !important;
}
@keyframes enhance-fail {
    0% { transform: translateX(0); filter: brightness(1); }
    10% { transform: translateX(-8px); filter: brightness(0.5) saturate(0.3); }
    20% { transform: translateX(8px); }
    30% { transform: translateX(-5px); }
    40% { transform: translateX(5px); filter: brightness(0.7); }
    60% { transform: translateX(0); }
    100% { filter: brightness(1); }
}

/* Particles */
.enhance-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: particle-fly 0.4s ease-out forwards;
}
.ascend-particle {
    width: 8px;
    height: 8px;
    animation: particle-fly 0.5s ease-out forwards;
}

@keyframes particle-fly {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    60% { opacity: 0.8; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}

/* Ascend technique animation */
.ascend-anim {
    animation: ascend-flash 2s ease-out !important;
}
@keyframes ascend-flash {
    0% { transform: scale(1); filter: brightness(1); }
    10% { filter: brightness(3) saturate(1.5); transform: scale(1.03); }
    20% { filter: brightness(4) saturate(2); transform: scale(1.06); box-shadow: 0 0 40px rgba(200, 154, 255, 0.8); }
    40% { filter: brightness(2) saturate(1.3); transform: scale(1.02); }
    70% { filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Enhancement result floating label */
.enhance-result-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    font-size: 2em;
    font-weight: bold;
    pointer-events: none;
    z-index: 100;
    text-shadow: 0 0 20px currentColor, 0 2px 4px rgba(0,0,0,0.8);
    animation: enhance-result-pop 0.4s ease-out forwards;
    white-space: nowrap;
}
.enhance-result-success {
    color: #ffd700;
    text-shadow: 0 0 30px #ffd700, 0 0 60px #ffaa00, 0 2px 4px rgba(0,0,0,0.8);
}
.enhance-result-fail {
    color: #ff4444;
    text-shadow: 0 0 20px #ff4444, 0 0 40px #cc0000, 0 2px 4px rgba(0,0,0,0.8);
}
@keyframes enhance-result-pop {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
    30% { transform: translate(-50%, -50%) scale(1.0); }
    70% { opacity: 1; transform: translate(-50%, -60%) scale(1.0); }
    100% { opacity: 0; transform: translate(-50%, -80%) scale(0.8); }
}

/* Enhancement card flash overlay */
.enhance-flash-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,215,0,0.6) 0%, rgba(255,170,0,0.2) 50%, transparent 80%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 99;
    animation: enhance-flash 0.25s ease-out forwards;
}
@keyframes enhance-flash {
    0% { opacity: 0; }
    10% { opacity: 1; }
    40% { opacity: 0.6; }
    100% { opacity: 0; }
}

/* Technique ascend section */
.tech-ascend-section {
    margin-top: 6px;
    text-align: center;
}
.ascend-locked {
    font-size: 0.75em;
    color: #666;
    font-style: normal;
}

/* Breakthrough animation — success */
.breakthrough-anim {
    animation: breakthrough-flash 2.5s ease-out;
}
@keyframes breakthrough-flash {
    0% { filter: brightness(1); transform: scale(1); }
    5% { filter: brightness(0.6); }
    12% { filter: brightness(2.5) saturate(1.5); transform: scale(1.02); }
    20% { filter: brightness(1.8) saturate(1.3); transform: scale(1.01); box-shadow: 0 0 30px rgba(106, 234, 138, 0.5); }
    40% { filter: brightness(1.4); }
    60% { filter: brightness(1.1); transform: scale(1); }
    100% { filter: brightness(1); }
}

/* Breakthrough animation — great (realm up) */
.breakthrough-great-anim {
    animation: breakthrough-great 3.5s ease-out;
}
@keyframes breakthrough-great {
    0% { filter: brightness(1); transform: scale(1); }
    3% { filter: brightness(0.3); }
    6% { filter: brightness(3.5) saturate(2); transform: scale(1.04); }
    12% { filter: brightness(2.5) saturate(1.8); transform: scale(1.02); box-shadow: 0 0 50px rgba(255, 215, 0, 0.6); }
    20% { filter: brightness(2) saturate(1.5); box-shadow: 0 0 30px rgba(200, 154, 255, 0.4); }
    35% { filter: brightness(1.5) saturate(1.3); box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); }
    60% { filter: brightness(1.2); }
    100% { filter: brightness(1); transform: scale(1); }
}

/* Breakthrough animation — ascension (mortal -> immortal) */
.breakthrough-ascension-anim {
    animation: breakthrough-ascension 4.5s ease-out;
}
@keyframes breakthrough-ascension {
    0% { filter: brightness(1); transform: scale(1); }
    2% { filter: brightness(0.2); }
    5% { filter: brightness(4) saturate(2.5); transform: scale(1.05); }
    10% { filter: brightness(3) saturate(2); transform: scale(1.03); box-shadow: 0 0 60px rgba(136, 204, 255, 0.6), 0 0 100px rgba(255, 215, 0, 0.3); }
    18% { filter: brightness(2.5) saturate(1.8); box-shadow: 0 0 40px rgba(170, 221, 255, 0.5), 0 0 70px rgba(200, 154, 255, 0.3); }
    30% { filter: brightness(1.8) saturate(1.5); transform: scale(1.02); box-shadow: 0 0 30px rgba(255, 224, 128, 0.3); }
    50% { filter: brightness(1.4) saturate(1.3); box-shadow: 0 0 15px rgba(136, 204, 255, 0.2); }
    75% { filter: brightness(1.15); }
    100% { filter: brightness(1); transform: scale(1); box-shadow: none; }
}

/* Breakthrough animation — fail */
.breakthrough-fail-anim {
    animation: breakthrough-fail 1.5s ease-out;
}
@keyframes breakthrough-fail {
    0% { filter: brightness(1); }
    5% { filter: brightness(2) saturate(0.5); }
    10% { filter: brightness(0.6) saturate(0.3); transform: translateX(-6px); }
    15% { transform: translateX(6px); }
    20% { transform: translateX(-4px); filter: brightness(0.5) saturate(0.2); }
    25% { transform: translateX(4px); }
    30% { transform: translateX(-2px); }
    35% { transform: translateX(0); }
    60% { filter: brightness(0.7) saturate(0.5); }
    100% { filter: brightness(1) saturate(1); transform: translateX(0); }
}

/* Breakthrough animation — demon */
.breakthrough-demon-anim {
    animation: breakthrough-demon 2.5s ease-out;
}
@keyframes breakthrough-demon {
    0% { filter: brightness(1); }
    5% { filter: brightness(3) hue-rotate(0deg); }
    10% { filter: brightness(0.3) hue-rotate(300deg) saturate(3); transform: scale(0.98); }
    20% { filter: brightness(0.5) hue-rotate(280deg) saturate(2); transform: scale(0.97) translateX(-4px); }
    30% { transform: scale(0.97) translateX(4px); }
    40% { filter: brightness(0.4) hue-rotate(320deg); transform: translateX(-2px); }
    50% { transform: translateX(0); }
    70% { filter: brightness(0.6) hue-rotate(340deg) saturate(1.5); }
    100% { filter: brightness(1) hue-rotate(0deg) saturate(1); transform: scale(1); }
}

/* Breakthrough screen overlay flash */
.breakthrough-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9999;
    animation: overlay-flash 1.5s ease-out forwards;
}
@keyframes overlay-flash {
    0% { background: rgba(255,255,255,0); }
    10% { background: rgba(255,255,255,0.3); }
    30% { background: rgba(255,215,0,0.12); }
    100% { background: rgba(255,255,255,0); }
}
.breakthrough-overlay.fail {
    animation: overlay-flash-fail 1s ease-out forwards;
}
@keyframes overlay-flash-fail {
    0% { background: rgba(255,0,0,0); }
    10% { background: rgba(255,0,0,0.3); }
    100% { background: rgba(255,0,0,0); }
}
.breakthrough-overlay.demon {
    animation: overlay-flash-demon 2s ease-out forwards;
}
@keyframes overlay-flash-demon {
    0% { background: rgba(0,0,0,0); }
    10% { background: rgba(100,0,0,0.5); }
    30% { background: rgba(50,0,50,0.4); }
    60% { background: rgba(30,0,0,0.2); }
    100% { background: rgba(0,0,0,0); }
}
.breakthrough-overlay.ascension {
    animation: overlay-flash-ascension 3.5s ease-out forwards;
}
@keyframes overlay-flash-ascension {
    0% { background: rgba(0,0,0,0); }
    5% { background: rgba(0,0,0,0.5); }
    10% { background: rgba(255,255,255,0.45); }
    20% { background: rgba(136,204,255,0.25); }
    35% { background: rgba(255,215,0,0.15); }
    55% { background: rgba(170,221,255,0.08); }
    100% { background: rgba(0,0,0,0); }
}

/* === RESPONSIVE === */
/* === DEATH BANNER === */
#death-banner {
    background: linear-gradient(135deg, #1a0a0a 0%, #2a0a0a 50%, #1a0a0a 100%);
    border: 2px solid #cc3333;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    text-align: center;
    animation: death-pulse 2s ease-in-out infinite;
}
@keyframes death-pulse {
    0%, 100% { border-color: #cc3333; box-shadow: 0 0 10px rgba(204,51,51,0.3); }
    50% { border-color: #ff4444; box-shadow: 0 0 20px rgba(255,68,68,0.5); }
}
.death-title {
    font-size: 1.3em;
    font-weight: bold;
    color: #ff4444;
    margin-bottom: 8px;
}
.death-summary {
    font-size: 0.9em;
    color: #d4c9a8;
    margin-bottom: 6px;
}
.death-hint {
    font-size: 0.8em;
    color: #aaa;
    font-style: italic;
    margin-bottom: 10px;
}
.death-rebirth-btn {
    font-size: 1.05em;
    padding: 8px 24px;
    background: #803020 !important;
    border-color: #cc4444 !important;
    color: #ffcc88 !important;
    animation: death-btn-glow 1.5s ease-in-out infinite;
}
@keyframes death-btn-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(204,68,68,0.3); }
    50% { box-shadow: 0 0 15px rgba(255,100,100,0.6); }
}

/* Age warnings */
.age-dead {
    animation: age-blink 1s ease-in-out infinite;
}
@keyframes age-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* === ADVENTURES === */

.adventure-empty { color: #666; font-size: 0.85em; padding: 20px; text-align: center; }

.adventure-last-reward {
    background: #1a1a20;
    border: 1px solid #3a3a4a;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
}
.adventure-last-header { font-size: 0.85em; color: #888; margin-bottom: 4px; }
.adventure-last-items { font-size: 0.82em; color: #bba; }

.adventure-card {
    background: #1a1a28;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}
.adventure-card.adventure-active { border-color: #eebb44; }
.adventure-card.adventure-rumor { border-color: #555; opacity: 0.85; }

.adventure-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.adventure-name { font-size: 0.92em; font-weight: 600; color: #eebb44; }
.adventure-step { font-size: 0.72em; color: #888; }
.adventure-rumor-timer { font-size: 0.72em; color: #888; }
.adventure-desc { font-size: 0.8em; color: #999; margin-bottom: 6px; line-height: 1.4; }
.adventure-reqs-summary { font-size: 0.78em; margin-bottom: 8px; }

.adventure-step-text {
    font-size: 0.85em;
    color: #ccc;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
    border-left: 2px solid #eebb44;
    line-height: 1.4;
}

.adventure-choices { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }

.adventure-choice-btn {
    text-align: left;
    padding: 8px 12px;
    background: #1e2030;
    border: 1px solid #333;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    color: #ddd;
    font-size: 0.85em;
}
.adventure-choice-btn:hover:not(.btn-disabled) {
    border-color: #eebb44;
    background: #252840;
}
.adventure-choice-btn.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.adventure-choice-text { font-weight: 600; margin-bottom: 2px; }
.adventure-choice-desc { font-size: 0.85em; color: #999; margin-bottom: 3px; }
.adventure-choice-duration { font-size: 0.78em; color: #8a7e65; margin-bottom: 3px; }

.adventure-choice-reqs { font-size: 0.8em; margin-top: 3px; }
.adventure-req-met { color: #6aea8a; }
.adventure-req-unmet { color: #ee7a7a; }
.adventure-check-pass { color: #6aea8a; }
.adventure-check-fail { color: #ee7a7a; }

.adventure-progress-container {
    position: relative;
    height: 22px;
    background: #111;
    border-radius: 6px;
    overflow: hidden;
    margin: 8px 0;
}
.adventure-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #eebb44, #cc9933);
    border-radius: 6px;
    transition: width 0.5s;
}
.adventure-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.72em;
    color: #ddd;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
}

.adventure-history {
    margin-bottom: 8px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.02);
    border-radius: 4px;
    font-size: 0.78em;
}
.adventure-history-label { color: #777; margin-bottom: 4px; }
.adventure-history-item { padding: 2px 0; color: #aaa; }
.adventure-history-item.adventure-history-failed { color: #ee7a7a; }
.adventure-history-check { font-weight: 600; margin-right: 4px; }
.adventure-history-note { color: #888; font-style: italic; }

.adventure-abandon { margin-top: 6px; }
.adventure-actions { text-align: right; margin-top: 6px; }
.adventure-busy { font-size: 0.78em; color: #888; font-style: italic; }

/* Компактный состав учеников; помощь и доход работают автоматически. */
.disciples-section { margin: 14px 0; padding: 12px; border: 1px solid #343141; border-radius: 7px; background: #171722; }
.disciples-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.disciples-heading h4 { color: #d4c9a8; font-size: 0.9em; }
.disciples-capacity { font-size: 0.76em; color: #aaa; white-space: nowrap; }
.disciples-help, .disciples-budget { font-size: 0.75em; color: #a9a4b6; line-height: 1.55; margin: 5px 0 9px; }
.disciples-budget { color: #b2c5af; }
.disciple-candidates, .disciple-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); gap: 8px; margin-top: 9px; }
.disciple-candidate, .disciple-card { padding: 10px; border: 1px solid #333344; border-radius: 6px; background: #20202d; min-width: 0; }
.disciple-topline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 5px; margin-bottom: 6px; }
.disciple-name { color: #e0d6be; font-size: 0.87em; font-weight: 600; overflow-wrap: anywhere; }
.disciple-quality { padding: 1px 5px; border-radius: 3px; border: 1px solid currentColor; white-space: nowrap; font-size: 0.68em; }
.disciple-quality-common { color: #c3c3ce; }
.disciple-quality-uncommon { color: #81c49b; }
.disciple-quality-rare { color: #8bb8ed; }
.disciple-meta, .disciple-price, .disciple-age, .disciple-offer-expiry { font-size: 0.76em; color: #b4b0c0; line-height: 1.55; }
.disciple-age { margin: 4px 0 7px; }
.disciple-offer-expiry { color: #aaa1b5; margin: 4px 0 8px; }
.disciples-candidates-heading { margin-top: 15px; }
.disciple-delivery { color: #aaa1b5; font-size: 0.73em; text-align: right; }
.disciple-price { color: #d4c9a8; margin: 8px 0; }
.disciple-candidate .btn { width: 100%; }
.disciple-xp { height: 5px; background: #101019; border-radius: 3px; overflow: hidden; margin: 5px 0 8px; }
.disciple-xp-fill { height: 100%; background: #899c79; transition: width 0.18s linear; }
.disciple-income { color: #8dbe98; font-size: 0.75em; margin: 6px 0; line-height: 1.5; }
.disciple-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.disciple-controls .btn { padding: 3px 7px; font-size: 0.71em; }
.disciple-empty { color: #9390a2; font-size: 0.76em; margin-top: 8px; line-height: 1.5; }
.disciple-unavailable { color: #d4b182; font-size: 0.74em; margin: 6px 0; }
.disciple-training-offer { margin: 9px 0; padding: 8px; border: 1px solid #6a5740; border-radius: 5px; background: #29251f; }

@media (max-width: 950px) {
    .main-layout { grid-template-columns: 1fr; }
    .event-log { max-height: 300px; }
    .actions { flex-direction: column; align-items: stretch; }
    .header-info { flex-direction: column; gap: 4px; }
    .enhance-currencies { flex-direction: column; gap: 4px; }
}