root
4489 lines
91 KiB
CSS
4489 lines
91 KiB
CSS
@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);
|
|
} |