@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Russo+One&display=swap');

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

:root {
    --primary: #f59e0b;
    --primary-hover: #d97706;
    --primary-glow: rgba(245,158,11,0.25);
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --bg-deep: #08090d;
    --bg-dark: #0b0c10;
    --bg-card: #13141a;
    --bg-surface: #1a1b23;
    --bg-elevated: #21222c;
    --text: #e8e6e3;
    --text-dim: #8a8a9a;
    --text-muted: #5a5a6a;
    --border: rgba(255,255,255,0.06);
    --border-light: rgba(255,255,255,0.1);

    --rarity-consumer: #b0b0b0;
    --rarity-industrial: #5e98d9;
    --rarity-mil-spec: #4b69ff;
    --rarity-restricted: #8847ff;
    --rarity-classified: #d32ce6;
    --rarity-covert: #eb4b4b;
    --rarity-rare-special: #ffd700;
    --rarity-extraordinary: #ffd700;
    --rarity-contraband: #ffaa00;

    /* backwards compat */
    --primary-color: var(--primary);
    --primary-hover: #d97706;
    --success-color: var(--success);
    --danger-color: var(--danger);
    --warning-color: var(--warning);
    --bg-dark: var(--bg-deep);
    --bg-card: #13141a;
    --bg-light: var(--bg-surface);
    --text-primary: var(--text);
    --text-secondary: var(--text-dim);
    --border-color: var(--border);
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    
    --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}

body {
    font-family: 'Rajdhani', sans-serif;
    background: var(--bg-deep);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .logo, .nav-link, .btn {
    font-family: 'Russo One', sans-serif;
    letter-spacing: 0.03em;
}

::selection { background: var(--primary); color: #000; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* Навигация */
.navbar {
    background: rgba(11,12,16,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0.7rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.logo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.logo:hover {
    color: var(--primary-color);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    transition: all 0.2s;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.nav-link:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.04);
}

.nav-link.active {
    color: #000;
    background: var(--primary);
    font-weight: 600;
    box-shadow: 0 0 12px var(--primary-glow);
}

.user-balance {
    padding: 0.4rem 0.65rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 6px;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-family: 'Rajdhani', sans-serif;
}

/* Кнопки */
.btn {
    padding: 0.5rem 1.1rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all var(--transition);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #d97706);
    color: #000;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px var(--primary-glow);
}

.btn-primary:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-outline {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
}

.btn-outline:hover {
    color: var(--text-primary);
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
}

.btn-large {
    padding: 0.65rem 2rem;
    font-size: 0.95rem;
}

.btn-block {
    width: 100%;
}

.btn-fast {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.25);
    color: #f59e0b;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.btn-fast:hover:not(:disabled) {
    background: rgba(245,158,11,0.2);
    border-color: rgba(245,158,11,0.4);
    transform: scale(1.05);
}
.btn-fast:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-sm {
    padding: 0.25rem 0.65rem;
    font-size: 0.7rem;
}

.btn-success {
    background: var(--success-color);
    color: #0a0b0e;
    border: none;
}

.btn-success:hover {
    background: #059669;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25);
}

/* Главная страница */
.hero {
    padding: 4rem 0;
    text-align: center;
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--primary-color), #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    position: relative;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 3rem 0;
}

.feature-card {
    background: var(--bg-card);
    padding: 1.75rem 1.5rem;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.25s;
}

.feature-card:hover {
    border-color: rgba(245, 158, 11, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.feature-card h3 {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.hero-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 2rem;
}

/* Карточка профиля */
.profile-card,
.auth-card,
.page-card {
    background: rgba(20, 21, 26, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
    backdrop-filter: blur(8px);
}

.form-input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'Rajdhani', sans-serif;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.form-input:focus {
    border-color: rgba(245, 158, 11, 0.3);
}

.form-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-family: 'Russo One', sans-serif;
    color: var(--primary-color);
}

/* Формы авторизации */
.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 73px);
    padding: 2rem;
}

.auth-card {
    background: rgba(20, 21, 26, 0.8);
    border: 1px solid var(--border-color);
    padding: 2rem;
    border-radius: 10px;
    width: 100%;
    max-width: 400px;
    backdrop-filter: blur(8px);
}

.auth-card h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.form-group label {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.form-group input {
    padding: 0.55rem 0.7rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'Rajdhani', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

.form-group input:focus {
    border-color: rgba(245, 158, 11, 0.3);
}

.form-group small {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.error-message {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger-color);
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    text-align: center;
    font-size: 0.85rem;
}

.auth-footer {
    text-align: center;
    margin-top: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.auth-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* Профиль */
.profile-container {
    padding: 2rem 0;
}

.profile-header {
    margin-bottom: 2rem;
}

.profile-header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.profile-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: rgba(20, 21, 26, 0.8);
    border: 1px solid var(--border-color);
    padding: 1.25rem 1rem;
    border-radius: 10px;
    text-align: center;
    transition: border-color 0.2s;
}

.stat-card:hover {
    border-color: rgba(245, 158, 11, 0.12);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
    font-family: 'Russo One', sans-serif;
}

.stat-label {
    color: var(--text-secondary);
    margin-top: 0.35rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.profile-sections {
    display: grid;
    gap: 2rem;
}

.section h2 {
    margin-bottom: 1rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #c8c6d0;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.item-card {
    background: rgba(14, 15, 19, 0.9);
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    border-left: 3px solid;
    border: 1px solid var(--border-color);
    border-left-width: 3px;
    transition: border-color 0.2s;
}

.item-card:hover {
    border-color: rgba(255,255,255,0.08);
    border-left-width: 4px;
}

.item-name {
    font-weight: 600;
    margin-bottom: 0.35rem;
    word-break: break-word;
    font-size: 0.8rem;
}

.item-details {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.history-item {
    background: rgba(14, 15, 19, 0.9);
    border: 1px solid var(--border-color);
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: border-color 0.2s;
}

.history-item:hover {
    border-color: rgba(255,255,255,0.08);
}

.history-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.history-content {
    flex: 1;
    min-width: 0;
}

.history-title {
    font-weight: 600;
    margin-bottom: 0.2rem;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.empty-state {
    color: var(--text-secondary);
    text-align: center;
    padding: 2rem;
    font-size: 0.85rem;
}

/* Кейсы */
.cases-container {
    padding: 1.5rem 0;
}

.cases-container h1 {
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.page-subtitle {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.case-card {
    background: rgba(20, 21, 26, 0.8);
    border: 1px solid var(--border-color);
    padding: 1.25rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s;
}

.case-card:hover {
    transform: translateY(-3px);
    border-color: rgba(245, 158, 11, 0.15);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.case-icon {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 0.75rem;
}

.case-card h3 {
    text-align: center;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.case-stats {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
}

.case-rarities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.rarity-badge {
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Модальные окна */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: rgba(20, 21, 26, 0.95);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    min-width: 300px;
    max-width: 500px;
    backdrop-filter: blur(8px);
}

.case-animation {
    padding: 1.5rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.06);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 0.75rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.case-result, .contract-result {
    padding: 0.75rem;
}

.result-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.result-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.result-item-name {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Контракты */
.contracts-container {
    padding: 1.5rem 0;
}

.contracts-info {
    margin-bottom: 1.5rem;
}

.info-card {
    background: rgba(20, 21, 26, 0.8);
    border: 1px solid var(--border-color);
    padding: 1.25rem;
    border-radius: 10px;
}

.info-card h3 {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-card ol {
    padding-left: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.info-card li {
    margin-bottom: 0.4rem;
}

.contracts-groups {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contract-group {
    background: rgba(20, 21, 26, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.group-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.group-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.group-type {
    padding: 0.2rem 0.45rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.group-count {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.group-items {
    padding: 0.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.4rem;
    max-height: 400px;
    overflow-y: auto;
}

.contract-item {
    background: rgba(14, 15, 19, 0.9);
    border: 1px solid var(--border-color);
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.contract-item:hover {
    background: var(--bg-light);
}

.contract-item.selected {
    border-color: var(--primary-color);
    background: rgba(79, 70, 229, 0.1);
}

.item-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contract-item.selected .item-checkbox {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.contract-item.selected .item-checkbox::after {
    content: "✓";
    color: white;
    font-size: 14px;
}

.contract-slot {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid #8b7355;
    border-radius: 4px;
    padding: 10px;
    min-height: 70px;
}

#contractScribble {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px dashed #8b7355;
    color: #d4c5a9;
    font-family: 'Brush Script MT', cursive;
    font-size: 18px;
    text-align: center;
    margin-bottom: 15px;
    outline: none;
}

#contractScribble:focus {
    border-color: #d4c5a9;
}

/* Контракт в стиле CS:GO */
.contract-paper {
    background: #1a1a1a;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 2px solid #8b7355;
    border-radius: 4px;
    padding: 30px;
    position: relative;
    box-shadow: 
        inset 0 0 50px rgba(0, 0, 0, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.5);
}

.contract-paper::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid rgba(139, 115, 85, 0.3);
    pointer-events: none;
}

.contract-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #8b7355;
    padding-bottom: 15px;
}

.contract-header h2 {
    color: #d4c5a9;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 24px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.contract-items-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin: 30px 0;
}

.contract-slot.filled {
    background: rgba(139, 115, 85, 0.2);
    border-color: #d4c5a9;
}

.contract-slot-content {
    font-family: 'Courier New', monospace;
    color: #d4c5a9;
    font-size: 11px;
    line-height: 1.4;
    word-break: break-word;
}

.contract-signature-line {
    margin-top: 30px;
    border-top: 1px solid #8b7355;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contract-signature {
    font-family: 'Brush Script MT', cursive;
    color: #8b7355;
    font-size: 20px;
}

.contract-stamp {
    width: 80px;
    height: 80px;
    border: 3px double #8b7355;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b7355;
    transform: rotate(-15deg);
    opacity: 0;
    transition: all 0.5s;
}

.contract-stamp.active {
    opacity: 1;
    transform: rotate(-15deg) scale(1.1);
}

/* GLOW эффекты для редкостей */
.glow-consumer-grade { box-shadow: 0 0 40px rgba(176, 176, 176, 0.6); }
.glow-industrial-grade { box-shadow: 0 0 40px rgba(94, 152, 217, 0.6); }
.glow-mil-spec, .glow-mil-spec-grade { box-shadow: 0 0 40px rgba(75, 105, 255, 0.6); }
.glow-restricted { box-shadow: 0 0 40px rgba(136, 71, 255, 0.6); }
.glow-classified { box-shadow: 0 0 40px rgba(211, 44, 230, 0.6); }
.glow-covert { box-shadow: 0 0 40px rgba(235, 75, 75, 0.6); }
.glow-rare-special-item, .glow-extraordinary { box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); }

.item-info {
    flex: 1;
    min-width: 0;
}

.item-info .item-name {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.group-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-count {
    color: var(--text-secondary);
}

.empty-state-large {
    text-align: center;
    padding: 4rem;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state-large h3 {
    margin-bottom: 0.5rem;
}

.empty-state-large p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* Редкости */
.rarity-consumer-grade { border-left-color: var(--rarity-consumer); }
.rarity-industrial-grade { border-left-color: var(--rarity-industrial); }
.rarity-mil-spec, .rarity-mil-spec-grade { border-left-color: var(--rarity-mil-spec); }
.rarity-restricted { border-left-color: var(--rarity-restricted); }
.rarity-classified { border-left-color: var(--rarity-classified); }
.rarity-covert { border-left-color: var(--rarity-covert); }
.rarity-rare-special-item, .rarity-extraordinary { border-left-color: var(--rarity-rare-special); }
.rarity-contraband { border-left-color: var(--rarity-contraband); }

.rarity-consumer-grade { color: var(--rarity-consumer); }
.rarity-industrial-grade { color: var(--rarity-industrial); }
.rarity-mil-spec, .rarity-mil-spec-grade { color: var(--rarity-mil-spec); }
.rarity-restricted { color: var(--rarity-restricted); }
.rarity-classified { color: var(--rarity-classified); }
.rarity-covert { color: var(--rarity-covert); }
.rarity-rare-special-item, .rarity-extraordinary { color: var(--rarity-rare-special); }

.rarity-badge.rarity-consumer-grade { background: var(--rarity-consumer); color: black; }
.rarity-badge.rarity-industrial-grade { background: var(--rarity-industrial); color: white; }
.rarity-badge.rarity-mil-spec { background: var(--rarity-mil-spec); color: white; }
.rarity-badge.rarity-restricted { background: var(--rarity-restricted); color: white; }
.rarity-badge.rarity-classified { background: var(--rarity-classified); color: white; }
.rarity-badge.rarity-covert { background: var(--rarity-covert); color: white; }
.rarity-badge.rarity-rare-special-item { background: var(--rarity-rare-special); color: black; }

/* Инвентарь */
.inventory-container {
    padding: 1.5rem 0;
}

.inventory-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-select {
    padding: 0.4rem 0.7rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    outline: none;
}

.filter-select:focus {
    border-color: rgba(245, 158, 11, 0.3);
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
}

.inventory-grid-detailed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.inventory-skin-card {
    background: rgba(20, 21, 26, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.25s;
    border: 1px solid var(--border-color);
    position: relative;
}

.inventory-skin-card:hover {
    border-color: rgba(245, 158, 11, 0.15);
}

.inventory-item {
    background: rgba(20, 21, 26, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.inventory-item-header {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inventory-skin-card.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
}

.inventory-skin-card .skin-image-container {
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}

.inventory-skin-card .skin-image {
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
}

.inventory-skin-card .item-checkbox {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-dark);
}

.inventory-skin-card.selected .item-checkbox {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.inventory-skin-card.selected .item-checkbox::after {
    content: "✓";
    color: white;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.inventory-item-body {
    padding: 0.75rem;
}

.inventory-item-footer {
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.item-type-badge {
    padding: 0.25rem 0.5rem;
    background: var(--bg-light);
    border-radius: 4px;
    font-size: 0.75rem;
}

.skin-info {
    font-size: 12px;
}

.skin-name {
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skin-details {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
    font-size: 11px;
}

/* Кейс открытие */
.case-opening-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: all;
}

.case-scroll-container {
    width: 100%;
    max-width: 900px;
    height: 280px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    border: 2px solid var(--border-color);
    margin: 0 auto;
}

.case-scroll-track {
    display: flex;
    position: absolute;
    top: 5%;
    transform: translateY(50%);
    will-change: left;
    transition: none;
    left: 0;
}

.scroll-item {
    width: 200px;
    height: 240px;
    margin: 0 10px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 15px;
    border: 2px solid transparent;
    box-sizing: border-box;
}

.scroll-item img {
    width: 140px;
    height: 110px;
    object-fit: contain;
    margin-bottom: 10px;
    pointer-events: none;
}

.scroll-item-name {
    font-size: 11px;
    text-align: center;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}

.scroll-item-rarity {
    font-size: 10px;
    margin-top: 5px;
    text-align: center;
}

.case-center-indicator {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, transparent, #ffd700, #ffd700, transparent);
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: 0 0 30px #ffd700;
    pointer-events: none;
}

.case-center-indicator::before,
.case-center-indicator::after {
    content: '';
    position: absolute;
    left: -8px;
    width: 20px;
    height: 20px;
    background: #ffd700;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.case-center-indicator::before {
    top: -2px;
    transform: rotate(180deg);
}

.case-center-indicator::after {
    bottom: -2px;
}

.case-result-display {
    margin-top: 20px;
    text-align: center;
    animation: fadeInUp 0.5s;
}

.case-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.case-card-link:hover .case-card {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Карточки предметов */
.skin-image {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skin-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.skin-card:hover {
    transform: translateY(-2px);
}

.skin-card .skin-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.skin-card:hover .skin-overlay {
    opacity: 1;
}

/* Анимации */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    0%, 100% { border-color: transparent; }
    50% { border-color: #d4c5a9; }
}

.typewriter-text {
    overflow: hidden;
    border-right: 2px solid #d4c5a9;
    white-space: nowrap;
    animation: 
        typewriter 1s steps(40) 1,
        blink 0.75s step-end infinite;
}

/* Модальные окна с запретом закрытия */
.modal-locked {
    pointer-events: all;
}

.modal-locked .modal-content {
    pointer-events: auto;
}

.modal-loading {
    cursor: wait;
}

.spinner-large {
    width: 60px;
    height: 60px;
    border: 5px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

/* ===== СТИЛИ ДЛЯ CASE_DETAIL ===== */
.case-detail-container { 
    padding: 1rem 0; 
    width: 100%;
    overflow-x: hidden;
}

.back-link { 
    color: var(--text-secondary); 
    text-decoration: none; 
    display: inline-block; 
    margin-bottom: 0.75rem; 
    font-size: 0.9rem; 
}

.back-link:hover { 
    color: var(--text-primary); 
}

.case-header { 
    display: flex; 
    flex-direction: column; 
    margin-bottom: 1rem; 
}

.case-title-row { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    gap: 0.75rem; 
    margin-bottom: 0.75rem; 
}

.case-title-row h1 { 
    font-size: 1.5rem; 
    margin: 0; 
    word-break: break-word;
}

.case-info-badge { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    flex-wrap: wrap;
}

.case-price-tag { 
    background: var(--bg-card); 
    padding: 0.4rem 0.8rem; 
    border-radius: 8px; 
    border: 1px solid var(--success-color); 
    color: var(--success-color); 
    font-weight: bold; 
    font-size: 0.9rem;
}

.case-subtitle { 
    color: var(--text-secondary); 
    font-size: 0.85rem; 
}

.opening-controls { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    flex-wrap: wrap; 
    background: var(--bg-card); 
    padding: 0.75rem 1rem; 
    border-radius: 12px; 
}

.total-price-display { 
    font-size: 1rem; 
    font-weight: bold; 
    color: var(--success-color); 
    margin-left: auto; 
}

.total-price-display span { 
    color: var(--text-secondary); 
    font-size: 0.8rem; 
    font-weight: normal; 
}

.count-selector { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    flex-wrap: wrap;
}

.count-selector label { 
    color: var(--text-secondary); 
    font-size: 0.85rem; 
}

.count-buttons { 
    display: flex; 
    gap: 0.3rem; 
    flex-wrap: wrap;
}

.count-btn { 
    padding: 0.3rem 0.7rem; 
    background: var(--bg-dark); 
    border: 1px solid var(--border-color); 
    color: var(--text-primary); 
    border-radius: 6px; 
    cursor: pointer; 
    font-size: 0.8rem; 
    transition: all 0.2s; 
    min-width: 40px;
}

.count-btn.active { 
    background: var(--primary-color); 
    border-color: var(--primary-color); 
}

.case-opening-section { 
    background: var(--bg-card); 
    border-radius: 12px; 
    padding: 1rem; 
    margin-bottom: 1rem; 
}

.opening-animation-container { 
    width: 100%; 
}

/* Speed lines overlay for scroll */
.scroll-speed-lines {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        rgba(255,255,255,0.015) 2px,
        transparent 4px,
        transparent 40px
    );
    animation: speedLinesMove 0.4s linear infinite;
}

@keyframes speedLinesMove {
    from { transform: translateX(0); }
    to { transform: translateX(40px); }
}

/* Flash overlay on stop */
.scroll-flash {
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s;
    border-radius: 6px;
}

.scroll-flash.burst {
    opacity: 1;
}

.scroll-flash.gold {
    background: radial-gradient(ellipse at center, rgba(255,215,0,0.4) 0%, transparent 70%);
}

.scroll-flash.blue {
    background: radial-gradient(ellipse at center, rgba(75,105,255,0.4) 0%, transparent 70%);
}

.scroll-flash.purple {
    background: radial-gradient(ellipse at center, rgba(136,71,255,0.4) 0%, transparent 70%);
}

.scroll-flash.pink {
    background: radial-gradient(ellipse at center, rgba(211,44,230,0.4) 0%, transparent 70%);
}

.scroll-flash.red {
    background: radial-gradient(ellipse at center, rgba(235,75,75,0.4) 0%, transparent 70%);
}

/* Particle burst */
.particle-burst {
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    overflow: hidden;
}

.particle-burst .pt {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: ptFly 0.8s ease-out forwards;
}

@keyframes ptFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--px), var(--py)) scale(0);
    }
}

/* Slot machine (3 vertical reels) */
.slot-machine {
    position: relative;
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
    padding: 20px 10px 10px;
    background: linear-gradient(135deg, #1a1a2e 0%, #0d0d1a 100%);
    border-radius: 16px;
    border: 2px solid rgba(255,255,255,0.06);
    box-shadow: 0 0 60px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.3);
}

.slot-reels {
    display: flex;
    justify-content: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.slot-reel {
    width: 160px;
    height: 240px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(0,0,0,0.4);
    border: 2px solid rgba(255,255,255,0.08);
    position: relative;
}

.slot-track {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.slot-item {
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    border-left: 3px solid;
    box-sizing: border-box;
    padding: 4px;
    transition: background 0.3s, box-shadow 0.3s;
    flex-shrink: 0;
}

.slot-item img {
    width: 50px;
    height: 40px;
    object-fit: contain;
    pointer-events: none;
}

.slot-item-name {
    font-size: 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-top: 2px;
    color: var(--text-secondary);
}

.slot-item-hit {
    background: rgba(255,215,0,0.12);
    box-shadow: inset 0 0 20px rgba(255,215,0,0.15);
}

.slot-win-line {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    height: 80px;
    border: 2px solid rgba(255,215,0,0.5);
    border-radius: 6px;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(255,215,0,0.15), inset 0 0 20px rgba(255,215,0,0.05);
}

.slot-win-line::before,
.slot-win-line::after {
    content: '';
    position: absolute;
    left: -4px;
    width: calc(100% + 8px);
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, transparent);
}

.slot-win-line::before { top: -2px; }
.slot-win-line::after { bottom: -2px; }

.slot-frame-glow {
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    border: 3px solid transparent;
    z-index: 1;
    pointer-events: none;
    transition: all 0.8s;
}

.slot-result-display {
    text-align: center;
    margin-top: 12px;
    position: relative;
    z-index: 10;
}

.slot-win-banner, .slot-lose-banner {
    padding: 12px 20px;
    border-radius: 10px;
}

.slot-win-banner {
    background: rgba(255,215,0,0.1);
    border: 1px solid rgba(255,215,0,0.3);
    animation: slotBannerIn 0.5s ease-out;
}

.slot-lose-banner {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    animation: slotBannerIn 0.5s ease-out;
}

.slot-win-title {
    font-family: 'Russo One', sans-serif;
    font-size: 1.4rem;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255,215,0,0.4);
    letter-spacing: 0.06em;
}

.slot-win-subtitle, .slot-lose-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.slot-lose-title {
    font-family: 'Russo One', sans-serif;
    font-size: 1.1rem;
    color: var(--danger-color);
}

@keyframes slotBannerIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Slot activation badges */
.slot-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.6rem;
    line-height: 1;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
}
.slot-badge-extra_spin,
.slot-badge-free_spin,
.slot-badge-guaranteed,
.slot-badge-double,
.slot-badge-quintuple {
    padding: 1px 3px;
    border-radius: 3px;
    font-size: 0.55rem;
    font-weight: 700;
}
.slot-badge-extra_spin { color: #8b5cf6; }
.slot-badge-free_spin { color: #10b981; }
.slot-badge-guaranteed { color: #3b82f6; }
.slot-badge-double { color: #f59e0b; }
.slot-badge-quintuple { color: #ef4444; }

/* Slot activation legend */
.slot-legend {
    margin-top: 14px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(30,28,45,0.98) 0%, rgba(25,23,40,0.98) 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.5);
}
.slot-legend::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.5), transparent);
}
.slot-legend::after {
    content: '';
    position: absolute;
    bottom: 0; left: 25%; right: 25%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.2), transparent);
}
.slot-legend-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    position: relative;
}
.slot-legend-header::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 30%;
    right: 30%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.25), transparent);
}
.slot-legend-symbol {
    font-size: 0.6rem;
    color: rgba(245,158,11,0.4);
    letter-spacing: 6px;
}
.slot-legend-label {
    font-family: 'Russo One', sans-serif;
    font-size: 0.7rem;
    color: rgba(245,158,11,0.7);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.slot-legend-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.slot-legend-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 4px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: default;
    transition: background 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
    position: relative;
}
.slot-legend-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.slot-legend-card[data-act="extra_spin"] {
    background: rgba(139,92,246,0.1);
    border-color: rgba(139,92,246,0.18);
}
.slot-legend-card[data-act="extra_spin"]:hover {
    background: rgba(139,92,246,0.18);
    border-color: rgba(139,92,246,0.3);
    box-shadow: 0 4px 20px rgba(139,92,246,0.2);
}
.slot-legend-card[data-act="double"] {
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.18);
}
.slot-legend-card[data-act="double"]:hover {
    background: rgba(245,158,11,0.18);
    border-color: rgba(245,158,11,0.3);
    box-shadow: 0 4px 20px rgba(245,158,11,0.2);
}
.slot-legend-card[data-act="quintuple"] {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.18);
}
.slot-legend-card[data-act="quintuple"]:hover {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.3);
    box-shadow: 0 4px 20px rgba(239,68,68,0.2);
}
.slot-legend-card[data-act="guaranteed"] {
    background: rgba(59,130,246,0.1);
    border-color: rgba(59,130,246,0.18);
}
.slot-legend-card[data-act="guaranteed"]:hover {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.3);
    box-shadow: 0 4px 20px rgba(59,130,246,0.2);
}
.slot-legend-card[data-act="free_spin"] {
    background: rgba(16,185,129,0.1);
    border-color: rgba(16,185,129,0.18);
}
.slot-legend-card[data-act="free_spin"]:hover {
    background: rgba(16,185,129,0.18);
    border-color: rgba(16,185,129,0.3);
    box-shadow: 0 4px 20px rgba(16,185,129,0.2);
}
.slc-icon {
    font-size: 1.1rem;
    line-height: 1;
    font-family: 'Russo One', sans-serif;
    font-weight: 700;
    filter: drop-shadow(0 0 8px currentColor);
    transition: transform 0.25s, filter 0.25s;
}
.slot-legend-card:hover .slc-icon {
    transform: scale(1.2);
    filter: drop-shadow(0 0 14px currentColor);
}
.slc-name {
    font-family: 'Russo One', sans-serif;
    font-size: 0.6rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    transition: color 0.2s;
}
.slc-desc {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
    text-align: center;
    line-height: 1.2;
    transition: color 0.25s;
}
.slot-legend-card:hover .slc-desc {
    color: rgba(255,255,255,0.75);
}

/* Slot machine style frame */
.scroll-container-full {
    position: relative;
    width: 100%;
    height: 220px;
    max-height: 220px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 8px;
    border: 2px solid var(--border-color);
    box-shadow:
        inset 0 0 60px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.3);
}

.scroll-container-full::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 30px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
    z-index: 8;
    pointer-events: none;
}

.scroll-container-full::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    z-index: 8;
    pointer-events: none;
}

/* Target highlight ring */
.target-highlight-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 200px;
    border: 2px solid transparent;
    border-radius: 10px;
    z-index: 9;
    pointer-events: none;
    transition: all 0.3s;
}

.target-highlight-ring.glow {
    border-color: #ffd700;
    box-shadow: 0 0 30px rgba(255,215,0,0.3), inset 0 0 30px rgba(255,215,0,0.1);
}

.scroll-track-full {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.scroll-item-full {
    width: 120px;
    height: 190px;
    margin: 8px 8px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 8px 4px;
    border: 2px solid transparent;
    box-sizing: border-box;
}

.scroll-item-full img { 
    width: 80px; 
    height: 70px; 
    object-fit: contain; 
}

.scroll-item-name-full {
    font-size: 9px;
    text-align: center;
    margin-top: 4px;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}

.scroll-item-rarity-full { 
    font-size: 8px; 
    margin-top: 3px; 
    font-weight: bold; 
}

.center-indicator-full {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, transparent, #ffd700, #ffd700, transparent);
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: 0 0 20px #ffd700;
    pointer-events: none;
}

/* МНОЖЕСТВЕННЫЕ СКРОЛЛЫ */
.multi-scroll-grid {
    display: grid;
    gap: 0.75rem;
    width: 100%;
}

.scroll-wrapper-full {
    width: 100%;
    text-align: center;
}

.scroll-container-mini {
    width: 100%;
    height: 150px;
    max-height: 150px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 8px;
    border: 2px solid var(--border-color);
    box-shadow:
        inset 0 0 30px rgba(0,0,0,0.3),
        0 0 15px rgba(0,0,0,0.2);
}

.scroll-container-mini::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
    z-index: 8;
    pointer-events: none;
}

.scroll-container-mini::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    z-index: 8;
    pointer-events: none;
}

.mini-target-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 140px;
    border: 2px solid transparent;
    border-radius: 6px;
    z-index: 9;
    pointer-events: none;
    transition: all 0.3s;
}

.mini-target-ring.glow {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255,215,0,0.25), inset 0 0 20px rgba(255,215,0,0.08);
}

.scroll-track-mini {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    will-change: transform;
    transform: translateZ(0);
}

.scroll-item-mini {
    width: 70px;
    height: 130px;
    margin: 6px 6px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card);
    border-radius: 6px;
    padding: 5px 3px;
    border: 2px solid transparent;
    box-sizing: border-box;
}

.scroll-item-mini img { 
    width: 45px; 
    height: 45px; 
    object-fit: contain; 
}

.scroll-item-name-mini {
    font-size: 7px;
    text-align: center;
    margin-top: 3px;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.center-indicator-mini {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ffd700;
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: 0 0 15px #ffd700;
    pointer-events: none;
}

.scroll-label { 
    margin-top: 0.3rem; 
    font-size: 0.7rem; 
    color: var(--text-secondary); 
}

/* Результаты */
.results-grid-compact { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 0.4rem; 
    margin-top: 0.75rem; 
}

.result-item-compact { 
    background: var(--bg-dark); 
    padding: 0.4rem; 
    border-radius: 6px; 
    display: flex; 
    align-items: center; 
    gap: 0.4rem; 
    border-left: 3px solid; 
    flex: 1 0 auto; 
    min-width: 160px; 
}

.result-item-compact img { 
    width: 35px; 
    height: 30px; 
    object-fit: contain; 
}

/* Enhanced result cards */
.case-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.case-results-title {
    font-family: 'Russo One', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.case-results-actions {
    display: flex;
    gap: 0.4rem;
}

.results-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
}

.result-card-enhanced {
    background: var(--bg-dark);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color);
    transition: all 0.25s;
    opacity: 0;
    animation: fadeInUp 0.4s ease-out forwards;
}

.result-card-enhanced:hover {
    transform: translateY(-2px);
    border-color: var(--glow, var(--primary-color));
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.result-card-glow {
    position: absolute;
    inset: 0;
    opacity: 0.3;
    pointer-events: none;
}

.result-card-enhanced img {
    width: 100%;
    height: 70px;
    object-fit: contain;
    padding: 0.5rem 0.5rem 0;
    display: block;
    position: relative;
    z-index: 1;
}

.result-card-body {
    padding: 0.35rem 0.5rem 0.4rem;
    position: relative;
    z-index: 1;
}

.result-name-enhanced {
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.1rem;
}

.result-meta-enhanced {
    font-size: 0.55rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.result-footer-enhanced {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.result-price-enhanced {
    font-size: 0.75rem;
    color: var(--success-color);
    font-weight: bold;
}

.result-count-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
    z-index: 2;
}

.result-info-compact { 
    flex: 1; 
    min-width: 0; 
}

.result-name-compact { 
    font-size: 10px; 
    font-weight: 500; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.result-meta-compact { 
    display: flex; 
    gap: 0.5rem; 
    font-size: 9px; 
    color: var(--text-secondary); 
    flex-wrap: wrap;
}

.result-count-badge {
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
    margin-left: 3px;
}

.btn-sell-result {
    padding: 2px 6px;
    background: transparent;
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 8px;
}

.btn-sell-result:hover {
    background: var(--danger-color);
    color: white;
}

/* Список предметов в кейсе */
.case-items-section { 
    margin-top: 1rem; 
}

.case-items-section h2 { 
    font-size: 1.2rem; 
    margin-bottom: 0.75rem; 
}

.rarity-filters { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 0.3rem; 
    margin-bottom: 0.75rem; 
}

.filter-btn { 
    padding: 0.25rem 0.6rem; 
    background: var(--bg-card); 
    border: 1px solid var(--border-color); 
    color: var(--text-secondary); 
    border-radius: 20px; 
    cursor: pointer; 
    font-size: 0.7rem; 
    transition: all 0.2s; 
}

.filter-btn.active { 
    background: var(--primary-color); 
    color: white; 
    border-color: var(--primary-color); 
}

.filter-btn:hover { 
    background: var(--bg-light); 
}

.rarity-section { 
    margin-bottom: 0.75rem; 
}

.rarity-section h3 { 
    font-size: 0.9rem; 
    margin-bottom: 0.4rem; 
    padding-bottom: 0.2rem; 
    border-bottom: 2px solid; 
    display: flex; 
    align-items: center; 
    gap: 0.4rem; 
}

.rarity-count { 
    font-size: 0.7rem; 
    color: var(--text-secondary); 
    font-weight: normal; 
}

.items-grid-compact { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 
    gap: 0.4rem; 
}

.item-card-compact { 
    background: var(--bg-card); 
    border-radius: 6px; 
    padding: 0.4rem; 
    border-left: 3px solid; 
    cursor: pointer; 
    transition: all 0.2s; 
}

.item-card-compact:hover { 
    transform: translateY(-1px); 
    background: var(--bg-light); 
}

.item-card-compact img { 
    width: 100%; 
    height: 60px; 
    object-fit: contain; 
    margin-bottom: 0.2rem; 
}

.item-name-compact { 
    font-size: 9px; 
    font-weight: 500; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    margin-bottom: 0.2rem; 
}

.item-meta-compact { 
    display: flex; 
    justify-content: space-between; 
    font-size: 8px; 
    color: var(--text-secondary); 
    flex-wrap: wrap;
}

.item-price-compact { 
    font-size: 9px; 
    font-weight: bold; 
    color: var(--success-color); 
    margin-top: 0.2rem; 
}

/* ===== СТИЛИ ДЛЯ UPGRADE ===== */
.upgrade-container {
    padding: 0.75rem 0;
    width: 100%;
    overflow-x: hidden;
}

.upgrade-header {
    text-align: center;
    margin-bottom: 1rem;
}

.upgrade-header h1 {
    font-size: 1.5rem;
    background: linear-gradient(135deg, #ffd700, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.25rem;
}

.upgrade-header p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.upgrade-layout {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.inventory-panel, .target-panel {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    max-height: 500px;
}

.panel-header, .target-header {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    border-radius: 12px 12px 0 0;
}

.panel-title {
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inventory-list, .target-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.inventory-item-card, .target-item-card {
    background: var(--bg-dark);
    border-radius: 8px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.inventory-item-card:hover, .target-item-card:hover {
    background: var(--bg-light);
    border-color: var(--primary-color);
}

.inventory-item-card.selected, .target-item-card.selected {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.inventory-item-card.disabled, .target-item-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.inventory-item-card img, .target-item-card img {
    width: 45px;
    height: 40px;
    object-fit: contain;
    background: var(--bg-card);
    border-radius: 4px;
    padding: 3px;
}

.inventory-item-info, .target-item-info {
    flex: 1;
    min-width: 0;
}

.inventory-item-name, .target-item-name {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.15rem;
}

.inventory-item-meta, .target-item-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.inventory-item-price, .target-item-price {
    color: var(--success-color);
    font-weight: bold;
}

.wheel-panel {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.selected-items-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    width: 100%;
}

.selected-item-mini {
    text-align: center;
    flex: 1;
    min-width: 0;
}

.selected-item-mini img {
    width: 60px;
    height: 50px;
    object-fit: contain;
    background: var(--bg-dark);
    border-radius: 6px;
    padding: 5px;
}

.selected-item-mini-name {
    font-size: 0.65rem;
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-item-mini-price {
    font-size: 0.7rem;
    color: var(--success-color);
    font-weight: bold;
}

.arrow-icon {
    font-size: 1.2rem;
    color: var(--primary-color);
}

.wheel-container {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0.5rem 0;
}

.wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #10b981 0deg,
        #10b981 calc(var(--probability) * 3.6deg / 2),
        #2d1b1b calc(var(--probability) * 3.6deg / 2),
        #2d1b1b calc(360deg - var(--probability) * 3.6deg / 2),
        #10b981 calc(360deg - var(--probability) * 3.6deg / 2),
        #10b981 360deg
    );
    border: 3px solid var(--border-color);
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.wheel-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 24px solid #ffd700;
    filter: drop-shadow(0 0 6px #ffd700);
    z-index: 10;
}

.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border-radius: 50%;
    border: 2px solid #ffd700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
    color: #ffd700;
    z-index: 5;
}

.upgrade-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.upgrade-btn {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    flex: 1;
}

.quick-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.quick-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.inv-filter-bar {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin-top: 0.4rem;
}

.inv-search-input {
    flex: 1;
    padding: 0.35rem 0.5rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 0.75rem;
    min-width: 0;
}

.inv-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.inv-sort-group {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.inv-sort-btn {
    padding: 0.3rem 0.4rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.15s;
    line-height: 1;
}

.inv-sort-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.inv-sort-btn:hover {
    border-color: var(--primary-color);
}

.target-search-input {
    width: 100%;
    padding: 0.5rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.target-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.sort-controls {
    display: flex;
    gap: 0.3rem;
}

.sort-btn {
    flex: 1;
    padding: 0.3rem;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.65rem;
}

.sort-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* История апгрейдов */
.history-section {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.history-title {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.history-count {
    font-size: 0.65rem;
    color: var(--text-secondary);
    background: var(--bg-dark);
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    font-weight: normal;
}

.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
}

.history-card {
    background: var(--bg-dark);
    border-radius: 8px;
    padding: 0.4rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.history-card:hover {
    background: var(--bg-light);
}

.history-card.success {
    border-left: 3px solid #10b981;
}

.history-card.fail {
    border-left: 3px solid #ef4444;
}

.history-card img {
    width: 36px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.history-info {
    flex: 1;
    min-width: 0;
}

.history-names {
    font-size: 0.7rem;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--text-secondary);
}

.history-result {
    font-weight: bold;
}

.history-result.success {
    color: #10b981;
}

.history-result.fail {
    color: #ef4444;
}

/* ===== СТИЛИ ДЛЯ CASES ===== */
.cases-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-tab {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
}

.section-cases {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.case-card-new {
    background: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
    color: inherit;
    display: block;
    border: 1px solid var(--border-color);
}

.case-card-new:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border-color: var(--primary-color);
}

.case-image {
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.case-image img {
    max-width: 70%;
    max-height: 90px;
    object-fit: contain;
}

.case-price-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--bg-dark);
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.case-info {
    padding: 0.75rem;
}

.case-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.case-description {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.case-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.case-rarities-mini {
    display: flex;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.rarity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.case-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.case-price {
    font-weight: bold;
    color: var(--success-color);
    font-size: 0.85rem;
}

.btn-open {
    padding: 0.3rem 0.8rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.75rem;
}

.btn-open:hover {
    background: var(--primary-hover);
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 1000px) {
    .upgrade-layout {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .inventory-panel, .target-panel {
        max-height: 350px;
    }
    
    .wheel-container {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 12px;
    }
    
    .navbar .container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .logo {
        text-align: center;
    }
    
    .nav-links {
        justify-content: center;
        gap: 0.25rem;
    }
    
    .nav-link {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .user-balance {
        font-size: 0.8rem;
        padding: 0.4rem 0.5rem;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
    
    .btn-large {
        padding: 0.6rem 1.2rem;
    }
    
    /* Кейсы */
    .case-title-row h1 {
        font-size: 1.2rem;
    }
    
    .opening-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .total-price-display {
        margin-left: 0;
        text-align: center;
    }
    
    .count-selector {
        justify-content: center;
    }
    
    .count-buttons {
        justify-content: center;
    }
    
    .scroll-container-full {
        height: 190px;
    }
    
    .scroll-item-full {
        width: 100px;
        height: 165px;
        margin: 5px 5px;
    }
    
    .scroll-item-full img {
        width: 65px;
        height: 55px;
    }
    
    .scroll-container-mini {
        height: 130px;
    }
    
    .scroll-item-mini {
        width: 60px;
        height: 115px;
        margin: 4px 4px;
    }
    
    .scroll-item-mini img {
        width: 40px;
        height: 40px;
    }
    
    .items-grid-compact {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .multi-scroll-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Контракты */
    .contract-items-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .case-scroll-container {
        height: 250px;
    }
    
    .scroll-item {
        width: 150px;
        height: 200px;
    }
    
    .scroll-item img {
        width: 100px;
        height: 80px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cases-grid {
        grid-template-columns: 1fr;
    }
    
    .group-items {
        grid-template-columns: 1fr;
    }
    
    .group-header {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .group-footer {
        flex-direction: column;
        gap: 1rem;
    }
    
    .section-cases {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.75rem;
    }
    
    .case-image {
        height: 100px;
    }
    
    .case-title {
        font-size: 0.85rem;
    }
    
    .case-description {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-link {
        font-size: 0.75rem;
        padding: 0.3rem 0.4rem;
    }
    
    .hero h1 {
        font-size: 1.5rem;
    }
    
    /* Кейсы */
    .case-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .scroll-container-full {
        height: 170px;
    }
    
    .scroll-item-full {
        width: 90px;
        height: 150px;
    }
    
    .scroll-item-full img {
        width: 55px;
        height: 45px;
    }
    
    .scroll-item-name-full {
        font-size: 8px;
    }
    
    .scroll-container-mini {
        height: 115px;
    }
    
    .scroll-item-mini {
        width: 55px;
        height: 100px;
    }
    
    .items-grid-compact {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .result-item-compact {
        min-width: 130px;
    }
    
    /* Апгрейд */
    .upgrade-header h1 {
        font-size: 1.3rem;
    }
    
    .wheel-container {
        width: 180px;
        height: 180px;
    }
    
    .wheel-center {
        width: 35px;
        height: 35px;
        font-size: 0.7rem;
    }
    
    .selected-item-mini img {
        width: 50px;
        height: 40px;
    }
    
    .history-grid {
        grid-template-columns: 1fr;
    }
    
    /* Кейсы */
    .cases-container h1 {
        font-size: 1.3rem;
    }
    
    .section-cases {
        grid-template-columns: 1fr 1fr;
    }
    
    .case-image {
        height: 90px;
    }
    
    .case-info {
        padding: 0.5rem;
    }
}

/* Общие мобильные фиксы */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    
    input, button, select, textarea {
        font-size: 16px !important;
    }
    
    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    img {
        max-width: 100%;
        height: auto;
    }
}

/* ===== АПГРЕЙД — РЕДИЗАЙН ===== */

body {
    font-family: 'Rajdhani', sans-serif;
}

h1, h2, h3, h4, h5, h6, .logo, .nav-link, .btn {
    font-family: 'Rajdhani', sans-serif;
}

.upgrade-page {
  font-family: 'Rajdhani', sans-serif;
  background: radial-gradient(ellipse at 50% 0%, #14161f 0%, #0a0b0e 100%);
  min-height: 100vh;
}

.upgrade-page .upgrade-header h1 {
  font-family: 'Russo One', sans-serif;
  font-size: 1.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.3));
  margin-bottom: 0.25rem;
}

.upgrade-page .upgrade-header p {
  color: #8a8a9a;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}

.upgrade-page .upgrade-layout {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.upgrade-page .panel-title {
  font-family: 'Russo One', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c8c6d0;
}

/* Панели */
.upgrade-page .inventory-panel,
.upgrade-page .target-panel {
  background: rgba(20, 21, 26, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  max-height: 520px;
  overflow: hidden;
}

.upgrade-page .panel-header,
.upgrade-page .target-header {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.upgrade-page .inventory-list,
.upgrade-page .target-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.upgrade-page .inventory-list::-webkit-scrollbar,
.upgrade-page .target-list::-webkit-scrollbar {
  width: 4px;
}

.upgrade-page .inventory-list::-webkit-scrollbar-track,
.upgrade-page .target-list::-webkit-scrollbar-track {
  background: transparent;
}

.upgrade-page .inventory-list::-webkit-scrollbar-thumb,
.upgrade-page .target-list::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.3);
  border-radius: 2px;
}

/* Карточки предметов */
.upgrade-page .inventory-item-card,
.upgrade-page .target-item-card {
  background: rgba(14, 15, 19, 0.9);
  border-radius: 8px;
  padding: 0.45rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
  position: relative;
}

.upgrade-page .inventory-item-card::before,
.upgrade-page .target-item-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}

.upgrade-page .inventory-item-card:hover,
.upgrade-page .target-item-card:hover {
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(20, 21, 26, 0.9);
}

.upgrade-page .inventory-item-card:hover::before,
.upgrade-page .target-item-card:hover::before {
  background: rgba(245, 158, 11, 0.4);
  width: 3px;
}

.upgrade-page .inventory-item-card.selected {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.06);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.08), inset 0 0 20px rgba(245, 158, 11, 0.03);
}

.upgrade-page .inventory-item-card.selected::before {
  background: #f59e0b;
  width: 3px;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.upgrade-page .inventory-item-card.disabled,
.upgrade-page .target-item-card.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.upgrade-page .inventory-item-card img,
.upgrade-page .target-item-card img {
  width: 42px;
  height: 36px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 2px;
  flex-shrink: 0;
}

.upgrade-page .inventory-item-name,
.upgrade-page .target-item-name {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #d4d2d8;
  letter-spacing: 0.01em;
}

.upgrade-page .inventory-item-meta,
.upgrade-page .target-item-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  color: #6b6b7a;
  margin-top: 0.1rem;
}

.upgrade-page .inventory-item-price,
.upgrade-page .target-item-price {
  color: #f59e0b;
  font-weight: 700;
  font-size: 0.65rem;
}

/* Сортировка и поиск */
.upgrade-page .target-search-input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  color: #e0dde8;
  font-size: 0.8rem;
  font-family: 'Rajdhani', sans-serif;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.upgrade-page .target-search-input:focus {
  border-color: rgba(245, 158, 11, 0.4);
}

.upgrade-page .sort-controls {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.upgrade-page .sort-btn {
  flex: 1;
  padding: 0.25rem 0.3rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  color: #6b6b7a;
  font-size: 0.6rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.upgrade-page .sort-btn:hover {
  color: #c8c6d0;
  border-color: rgba(255, 255, 255, 0.1);
}

.upgrade-page .sort-btn.active {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.08);
}

/* Центральная панель — Колесо */
.upgrade-page .wheel-panel {
  background: rgba(20, 21, 26, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upgrade-page .selected-items-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  width: 100%;
}

.upgrade-page .selected-item-mini {
  text-align: center;
  flex: 1;
  min-width: 0;
}

.upgrade-page .selected-item-mini .item-frame {
  width: 64px;
  height: 52px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: all 0.3s;
}

.upgrade-page .selected-item-mini.selected .item-frame {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
}

.upgrade-page .selected-item-mini img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.upgrade-page .selected-item-mini-name {
  font-size: 0.62rem;
  margin-top: 0.25rem;
  color: #8a8a9a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upgrade-page .selected-item-mini-price {
  font-size: 0.7rem;
  color: #f59e0b;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

.upgrade-page .arrow-icon {
  font-size: 1rem;
  color: #4a4a5a;
  flex-shrink: 0;
  opacity: 0.5;
}

/* Колесо */
.upgrade-page .wheel-container {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0.25rem 0 0.5rem;
}

.upgrade-page .wheel-outer-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(245, 158, 11, 0.08),
    rgba(245, 158, 11, 0.02) 25%,
    rgba(245, 158, 11, 0.08) 50%,
    rgba(245, 158, 11, 0.02) 75%,
    rgba(245, 158, 11, 0.08) 100%
  );
  border: 1px solid rgba(245, 158, 11, 0.15);
}

.upgrade-page .wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from calc(180deg - var(--probability, 0) * 3.6deg / 2),
    #10b981 0deg,
    #10b981 calc(var(--probability, 0) * 3.6deg),
    #2d1b1b calc(var(--probability, 0) * 3.6deg),
    #2d1b1b 360deg
  );
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.6),
    inset 0 0 30px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 1;
}

.upgrade-page .wheel::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Tick marks */
.upgrade-page .wheel-ticks {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}

.upgrade-page .wheel-ticks::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 2deg,
    rgba(255, 255, 255, 0.06) 2deg,
    rgba(255, 255, 255, 0.06) 3deg
  );
}

/* Pointer container — вращается вокруг колеса */
.upgrade-page .wheel-pointer-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  transform-origin: center center;
}

/* Pointer */
.upgrade-page .wheel-pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 24px solid #f59e0b;
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.6)) drop-shadow(0 0 20px rgba(245, 158, 11, 0.3));
}

.upgrade-page .wheel-pointer::after {
  content: '';
  position: absolute;
  top: -28px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.8);
}

/* Center hub */
.upgrade-page .wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  background: radial-gradient(circle at 40% 35%, #1e1f2a, #0a0b0e);
  border-radius: 50%;
  border: 2px solid rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #f59e0b;
  z-index: 5;
  font-family: 'Russo One', sans-serif;
  box-shadow:
    0 0 20px rgba(245, 158, 11, 0.1),
    inset 0 0 15px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.02em;
}



/* Кнопка апгрейда */
.upgrade-page .upgrade-btn {
  padding: 0.65rem 2.5rem;
  font-family: 'Russo One', sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0a0b0e;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  margin-top: 0.25rem;
}

.upgrade-page .upgrade-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

.upgrade-page .upgrade-btn:active:not(:disabled) {
  transform: translateY(0);
}

.upgrade-page .upgrade-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.upgrade-page .upgrade-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
  transition: transform 0.4s;
  transform: translateX(-100%);
}

.upgrade-page .upgrade-btn:hover:not(:disabled)::after {
  transform: translateX(100%);
}

/* Результат */
/* Toast */
.toast-container {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    pointer-events: none;
}

.toast {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    pointer-events: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

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

.toast.success {
    border-color: #10b981;
    box-shadow: 0 4px 20px rgba(16,185,129,0.3);
}

.toast.fail {
    border-color: #ef4444;
    box-shadow: 0 4px 20px rgba(239,68,68,0.2);
}

.upgrade-page .result-item-display img {
  width: 72px;
  height: 60px;
  object-fit: contain;
  animation: resultItemSlide 0.5s ease;
}

.upgrade-page .result-item-display span {
  font-size: 0.65rem;
  color: #8a8a9a;
  text-align: center;
  max-width: 180px;
}

@keyframes resultFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes resultPulse {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes resultItemSlide {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Win sparkles */
.upgrade-page .sparkle-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
  overflow: hidden;
  border-radius: 10px;
}

.upgrade-page .sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #f59e0b;
  border-radius: 50%;
  animation: sparkleFloat 1.5s ease-out forwards;
}

@keyframes sparkleFloat {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx, 50px), var(--dy, -80px)) scale(0);
    opacity: 0;
  }
}

/* История */
.upgrade-page .history-section {
  margin-top: 0.5rem;
}

.upgrade-page .history-title {
  font-family: 'Russo One', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6b7a;
  margin-bottom: 0.6rem;
}

.upgrade-page .history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.5rem;
}

.upgrade-page .history-card {
  background: rgba(20, 21, 26, 0.6);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s;
}

.upgrade-page .history-card:hover {
  border-color: rgba(255, 255, 255, 0.08);
}

.upgrade-page .history-card.success {
  border-left: 3px solid rgba(16, 185, 129, 0.5);
}

.upgrade-page .history-card.fail {
  border-left: 3px solid rgba(239, 68, 68, 0.4);
}

.upgrade-page .history-card img {
  width: 36px;
  height: 30px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 2px;
  flex-shrink: 0;
}

.upgrade-page .history-info {
  flex: 1;
  min-width: 0;
}

.upgrade-page .history-names {
  font-size: 0.68rem;
  color: #b0aeb8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upgrade-page .history-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  color: #6b6b7a;
  margin-top: 0.1rem;
}

.upgrade-page .history-result.success {
  color: #10b981;
  font-weight: 600;
}

.upgrade-page .history-result.fail {
  color: #ef4444;
  font-weight: 600;
}

/* Быстрые фильтры цены */
.upgrade-page .price-filter-bar {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.upgrade-page .pf-btn {
    padding: 0.2rem 0.45rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    color: #6b6b7a;
    font-size: 0.6rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.upgrade-page .pf-btn:hover {
    color: #c8c6d0;
    border-color: rgba(255, 255, 255, 0.1);
}

.upgrade-page .pf-btn.active {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.08);
}

/* Пустое состояние */
.upgrade-page .empty-state {
  text-align: center;
  padding: 1.5rem 0.5rem;
  color: #4a4a5a;
  font-size: 0.8rem;
}

/* Адаптивность */
@media (max-width: 1000px) {
  .upgrade-page .upgrade-layout {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .upgrade-page .inventory-panel,
  .upgrade-page .target-panel {
    max-height: 320px;
  }
  .upgrade-page .wheel-container {
    width: 240px;
    height: 240px;
  }
}

@media (max-width: 768px) {
  .upgrade-page .upgrade-header h1 {
    font-size: 1.3rem;
  }
  .upgrade-page .wheel-container {
    width: 200px;
    height: 200px;
  }
  .upgrade-page .wheel-center {
    width: 44px;
    height: 44px;
    font-size: 0.7rem;
  }
  .upgrade-page .selected-item-mini .item-frame {
    width: 52px;
    height: 42px;
  }
  .upgrade-page .history-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Дополнительные стили для скролла ===== */
.scroll-item-sm.target-item {
    transition: all 0.3s ease;
    z-index: 100;
}

.mini-scroll-item-sm.target-mini-item {
    transition: all 0.3s ease;
    z-index: 100;
}

.scroll-item-sm.target-item[style*="border-color"] {
    box-shadow: 0 0 30px currentColor;
}

.mini-scroll-item-sm.target-mini-item[style*="border-color"] {
    box-shadow: 0 0 20px currentColor;
}

.multi-scroll-container {
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0;
    justify-content: center;
}

.scroll-wrapper {
    text-align: center;
}

.mini-scroll-container {
    width: 100%;
    min-width: 180px;
    height: 200px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 8px;
    border: 2px solid var(--border-color);
}

.mini-scroll-track {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    will-change: transform;
    transition: filter 0.3s;
}

.mini-scroll-item {
    width: 90px;
    height: 180px;
    margin: 10px 10px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card);
    border-radius: 6px;
    padding: 8px 4px;
    border: 2px solid transparent;
}

.mini-scroll-item img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.mini-item-name {
    font-size: 9px;
    text-align: center;
    margin-top: 5px;
    word-break: break-word;
}

.mini-item-rarity {
    font-size: 8px;
    margin-top: 3px;
    font-weight: bold;
}

.mini-center-indicator {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, transparent, #ffd700, #ffd700, transparent);
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: 0 0 20px #ffd700;
    pointer-events: none;
}

.result-count {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.result-item {
    position: relative;
}

.results-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

/* ====== Всеобщий UI-полироль ====== */

/* Плавные скроллбары */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* Стеклянные карточки */
.glass-card, .card, [class*="panel"] {
    background: rgba(20, 21, 26, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.glass-card:hover, .card:hover, [class*="panel"]:hover {
    border-color: rgba(255,255,255,0.1);
}

/* Тени для всех модалок */
.modal, [class*="modal"], [class*="Modal"] {
    background: rgba(10, 11, 14, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Плавные переходы для элементов */
a, button, .btn, .nav-link, .item-card, [class*="btn"] {
    transition: all 0.2s ease;
}

/* Улучшенные кнопки */
.btn {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.btn:active {
    transform: scale(0.97);
}
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #f97316);
    color: white;
}
.btn-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

/* Плавный вход для контента */
main, .container, .crash-layout, .inventory-container {
    animation: contentFadeIn 0.3s ease;
}
@keyframes contentFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Нормализация отступов */
main {
    padding: 1.5rem 1rem;
}
main.container {
    padding: 1.5rem 20px;
}

/* Улучшенный текст */
p, span, div, label {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Красивые инпуты */
input, select, textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 0.6rem 0.8rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1);
}
input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Улучшенные ссылки */
a:not(.btn):not(.nav-link):not(.logo) {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
a:not(.btn):not(.nav-link):not(.logo):hover {
    border-bottom-color: var(--primary-color);
}

/* =============================================
   🍞 Уведомления (Toast + Confirm)
   ============================================= */

.toast-container {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 380px;
    width: 100%;
}

.toast {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    pointer-events: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top right;
    position: relative;
    overflow: hidden;
}

.toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
}

.toast-success::before { background: var(--success); }
.toast-error::before { background: var(--danger); }
.toast-info::before { background: var(--primary); }
.toast-warning::before { background: var(--warning); }

.toast-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 6px;
    font-size: 0.85rem;
}

.toast-success .toast-icon { background: rgba(16,185,129,0.15); }
.toast-error .toast-icon { background: rgba(239,68,68,0.15); }
.toast-info .toast-icon { background: rgba(245,158,11,0.15); }
.toast-warning .toast-icon { background: rgba(245,158,11,0.15); }

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.toast-message {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 2px;
    line-height: 1.3;
}

.toast-close {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    flex-shrink: 0;
    border-radius: 4px;
    transition: all 0.15s;
}

.toast-close:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text);
}

.toast-removing {
    animation: toastSlideOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(100%) scale(0.9); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to { opacity: 0; transform: translateX(100%) scale(0.9); }
}

/* =============================================
   ⚠️ Confirm диалог
   ============================================= */

.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: confirmFadeIn 0.2s ease;
}

.confirm-dialog {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    animation: confirmScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

.confirm-dialog-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.confirm-dialog-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.confirm-dialog-icon-warning { background: rgba(239,68,68,0.15); }
.confirm-dialog-icon-info { background: rgba(245,158,11,0.15); }

.confirm-dialog-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.confirm-dialog-message {
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin-bottom: 20px;
    padding-left: 46px;
}

.confirm-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.confirm-dialog-actions .btn {
    min-width: 90px;
    padding: 0.55rem 1.2rem;
    font-size: 0.8rem;
}

.confirm-dialog .btn-danger {
    background: var(--danger);
    color: white;
    border: none;
}

.confirm-dialog .btn-danger:hover {
    background: #dc2626;
    box-shadow: 0 4px 16px rgba(239,68,68,0.3);
}

@keyframes confirmFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes confirmScaleIn {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}