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

:root {
--bg: #09090c;
--surface: #131318;
--surface-2: #1a1a21;
--border: #2a2a33;
--border-light: #38383f;
--text: #f0f0f2;
--text-muted: #8c8c99;
--text-dim: #55555f;
--gold: #ffcc33;
--gold-dim: #b8912a;
--danger: #eb4b4b;
--c-milspec: #4b69ff;
--c-restricted: #8847ff;
--c-classified: #d32ce6;
--c-covert: #eb4b4b;
--c-gold: #ffcc33;
--font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', 'JetBrains Mono', Consolas, monospace;
}

html {
background: var(--bg);
}

body {
background: var(--bg);
color: var(--text);
font-family: var(--font-mono);
font-size: 15px;
line-height: 1.5;
min-height: 100vh;
display: flex;
flex-direction: column;
}

a {
color: inherit;
text-decoration: none;
}

img {
display: block;
max-width: 100%;
}

button {
font-family: inherit;
cursor: pointer;
border: none;
}

input {
font-family: inherit;
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 26px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: 2px;
transition: transform 0.12s ease, filter 0.12s ease;
white-space: nowrap;
}

.btn:active {
transform: scale(0.97);
}

.btn-gold {
background: var(--gold);
color: #0a0a0c;
}

.btn-gold:hover {
filter: brightness(1.08);
}

.btn-gold:disabled {
background: var(--border-light);
color: var(--text-dim);
cursor: not-allowed;
}

.btn-ghost {
background: transparent;
border-color: var(--border-light);
color: var(--text);
}

.btn-ghost:hover {
border-color: var(--gold);
color: var(--gold);
}

.btn-sell {
background: var(--surface-2);
border: 1px solid var(--border-light);
color: var(--text);
padding: 9px 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 2px;
width: 100%;
margin-top: 10px;
}

.btn-sell:hover {
border-color: var(--danger);
color: var(--danger);
}

.section-title {
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 20px;
padding-left: 14px;
border-left: 3px solid var(--gold);
}

.nickname-overlay {
position: fixed;
inset: 0;
background: rgba(6, 6, 8, 0.92);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}

.nickname-box {
background: var(--surface);
border: 1px solid var(--border-light);
padding: 40px 34px;
width: 100%;
max-width: 360px;
text-align: center;
}

.nickname-eyebrow {
font-size: 11px;
letter-spacing: 0.2em;
color: var(--gold);
margin-bottom: 12px;
}

.nickname-box h2 {
font-size: 22px;
margin-bottom: 10px;
}

.nickname-box p {
color: var(--text-muted);
font-size: 13px;
margin-bottom: 22px;
}

.nickname-box input {
width: 100%;
background: var(--surface-2);
border: 1px solid var(--border-light);
color: var(--text);
padding: 12px 14px;
font-size: 14px;
margin-bottom: 16px;
outline: none;
}

.nickname-box input:focus {
border-color: var(--gold);
}

.nickname-box .btn {
width: 100%;
}

.auth-tabs {
display: flex;
gap: 8px;
margin-bottom: 22px;
}

.auth-tab {
flex: 1;
background: var(--surface-2);
border: 1px solid var(--border-light);
color: var(--text-muted);
padding: 10px;
font-family: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.auth-tab.active {
background: var(--gold);
color: #0a0a0c;
border-color: var(--gold);
}

.auth-panel input {
width: 100%;
background: var(--surface-2);
border: 1px solid var(--border-light);
color: var(--text);
padding: 12px 14px;
font-size: 14px;
margin-bottom: 12px;
outline: none;
font-family: inherit;
}

.auth-panel input:focus {
border-color: var(--gold);
}

.auth-panel .btn {
width: 100%;
}

.auth-hint {
color: var(--text-muted);
font-size: 12px;
margin-bottom: 16px;
}

.auth-error {
color: var(--danger);
font-size: 12px;
margin-top: 12px;
min-height: 14px;
}

.topbar {
border-bottom: 1px solid var(--border);
background: var(--bg);
position: sticky;
top: 0;
z-index: 50;
}

.topbar-inner {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
height: 68px;
display: flex;
align-items: center;
gap: 40px;
}

.topbar-right {
display: flex;
align-items: center;
gap: 12px;
}

.brand {
font-size: 18px;
font-weight: 800;
letter-spacing: 0.02em;
}

.brand span {
color: var(--gold);
}

.mainnav {
display: flex;
gap: 28px;
flex: 1;
}

.mainnav a {
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
padding: 6px 0;
border-bottom: 2px solid transparent;
}

.mainnav a:hover {
color: var(--text);
}

.mainnav a.active {
color: var(--gold);
border-bottom-color: var(--gold);
}

.mute-btn {
background: var(--surface);
border: 1px solid var(--border-light);
color: var(--text-muted);
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
flex-shrink: 0;
}

.mute-btn:hover {
color: var(--gold);
border-color: var(--gold);
}

.user-chip {
display: flex;
align-items: center;
gap: 12px;
background: var(--surface);
border: 1px solid var(--border-light);
padding: 8px 12px 8px 16px;
border-radius: 2px;
}

.user-nick {
font-size: 12px;
color: var(--text-muted);
}

.user-balance {
font-size: 13px;
font-weight: 700;
color: var(--gold);
}

.logout-btn {
background: transparent;
border: 1px solid var(--border-light);
color: var(--text-dim);
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
flex-shrink: 0;
}

.logout-btn:hover {
color: var(--danger);
border-color: var(--danger);
}

.page {
flex: 1;
max-width: 1180px;
margin: 0 auto;
padding: 0 24px 80px;
width: 100%;
}

.ticker-wrap {
display: flex;
align-items: center;
background: var(--surface);
border-bottom: 1px solid var(--border);
margin: 0 -24px 40px;
padding: 0;
overflow: hidden;
position: relative;
}

.ticker-label {
background: var(--gold);
color: #0a0a0c;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
padding: 12px 16px;
flex-shrink: 0;
z-index: 2;
}

.ticker-track {
display: flex;
gap: 14px;
padding: 10px 16px;
overflow-x: auto;
scrollbar-width: none;
}

.ticker-track::-webkit-scrollbar {
display: none;
}

.ticker-empty {
color: var(--text-dim);
font-size: 12px;
padding: 8px 0;
}

.ticker-item {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface-2);
border: 1px solid var(--rc, var(--border-light));
box-shadow: 0 0 10px -4px var(--rc, transparent);
padding: 6px 10px 6px 6px;
flex-shrink: 0;
}

.ticker-item img {
width: 34px;
height: 34px;
object-fit: contain;
}

.ticker-meta {
display: flex;
flex-direction: column;
line-height: 1.25;
}

.ticker-nick {
font-size: 10px;
color: var(--text-muted);
}

.ticker-item-name {
font-size: 11px;
white-space: nowrap;
}

.hero {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 40px;
padding: 40px 0 60px;
border-bottom: 1px solid var(--border);
margin-bottom: 50px;
align-items: center;
}

.hero-eyebrow {
font-size: 11px;
letter-spacing: 0.16em;
color: var(--gold);
margin-bottom: 16px;
}

.hero h1 {
font-size: 38px;
line-height: 1.15;
margin-bottom: 18px;
letter-spacing: -0.01em;
}

.hero-text p {
color: var(--text-muted);
font-size: 14px;
max-width: 480px;
margin-bottom: 26px;
}

.hero-actions {
display: flex;
gap: 12px;
}

.hero-stat-grid {
display: grid;
gap: 14px;
}

.hero-stat {
background: var(--surface);
border: 1px solid var(--border);
padding: 20px 22px;
display: flex;
justify-content: space-between;
align-items: baseline;
}

.hero-stat-num {
font-size: 26px;
font-weight: 800;
color: var(--gold);
}

.hero-stat-label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}

.cases-section {
margin-bottom: 60px;
}

.cases-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}

.case-card {
background: var(--surface);
border: 1px solid var(--border);
display: flex;
flex-direction: column;
transition: border-color 0.15s ease, transform 0.15s ease;
}

.case-card:hover {
border-color: var(--gold);
transform: translateY(-3px);
}

.case-card-img {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: radial-gradient(circle at 50% 50%, rgba(255, 204, 51, 0.08), transparent 70%);
}

.case-card-img img {
max-height: 100%;
}

.case-card-body {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
border-top: 1px solid var(--border);
}

.case-card-name {
font-size: 12px;
font-weight: 700;
}

.case-card-price {
font-size: 12px;
color: var(--gold);
font-weight: 700;
}

.case-card-preview {
display: flex;
gap: 5px;
padding: 0 14px 14px;
}

.preview-dot {
width: 8px;
height: 8px;
background: var(--rc);
box-shadow: 0 0 6px -1px var(--rc);
}

.back-link {
display: inline-block;
font-size: 12px;
color: var(--text-muted);
margin-bottom: 20px;
}

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

.case-hero {
display: grid;
grid-template-columns: 340px 1fr;
gap: 40px;
padding: 30px 0 50px;
border-bottom: 1px solid var(--border);
margin-bottom: 40px;
}

.case-hero-img {
background: var(--surface);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
background: radial-gradient(circle at 50% 40%, rgba(255, 204, 51, 0.1), transparent 70%), var(--surface);
}

.case-hero-info h1 {
font-size: 28px;
margin-bottom: 14px;
}

.case-price-tag {
display: inline-block;
background: var(--surface-2);
border: 1px solid var(--border-light);
color: var(--gold);
font-weight: 700;
padding: 8px 16px;
font-size: 14px;
margin-bottom: 26px;
}

.case-open-actions {
display: flex;
gap: 12px;
margin-bottom: 16px;
}

.case-open-status {
font-size: 12px;
color: var(--text-muted);
min-height: 18px;
}

.reel-section {
margin-bottom: 50px;
}

.reel-viewport-wrap {
display: flex;
flex-direction: column;
gap: 14px;
}

.reel-viewport {
position: relative;
height: 130px;
background: var(--surface);
border: 1px solid var(--border-light);
overflow: hidden;
}

.reel-viewport::before,
.reel-viewport::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 60px;
z-index: 3;
pointer-events: none;
}

.reel-viewport::before {
left: 0;
background: linear-gradient(90deg, var(--surface), transparent);
}

.reel-viewport::after {
right: 0;
background: linear-gradient(270deg, var(--surface), transparent);
}

.reel-pointer {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: var(--gold);
z-index: 4;
transform: translateX(-50%);
box-shadow: 0 0 10px var(--gold);
}

.reel-strip {
position: absolute;
top: 0;
left: 0;
display: flex;
height: 100%;
will-change: transform;
}

.reel-item {
width: 110px;
height: 100%;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
border-right: 1px solid var(--border);
background: linear-gradient(180deg, var(--rc, var(--surface-2)) 0%, transparent 40%);
padding: 8px;
}

.reel-item img {
width: 60px;
height: 60px;
object-fit: contain;
}

.reel-item-name {
font-size: 9px;
text-align: center;
color: var(--text-muted);
line-height: 1.2;
}

.result-section {
margin-bottom: 50px;
}

.result-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
margin-bottom: 24px;
}

.result-item {
background: var(--surface);
border: 1px solid var(--rc, var(--border));
box-shadow: 0 0 20px -8px var(--rc, transparent);
padding: 16px 12px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
}

.result-item img {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: 4px;
}

.result-item-name {
font-size: 11px;
font-weight: 700;
}

.result-item-rarity {
font-size: 9px;
color: var(--rc);
text-transform: uppercase;
letter-spacing: 0.05em;
}

.result-item-value {
font-size: 12px;
color: var(--gold);
font-weight: 700;
}

.result-actions {
display: flex;
gap: 12px;
}

.contents-section {
margin-bottom: 40px;
}

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

.content-item {
background: var(--surface);
border: 1px solid var(--border);
border-top: 2px solid var(--rc);
padding: 14px 10px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
}

.content-item img {
width: 64px;
height: 64px;
object-fit: contain;
margin-bottom: 6px;
}

.content-item-name {
font-size: 10px;
line-height: 1.3;
min-height: 26px;
}

.content-item-chance {
font-size: 10px;
color: var(--text-dim);
}

.content-item-value {
font-size: 11px;
color: var(--gold);
font-weight: 700;
}

.inv-header {
padding: 30px 0;
border-bottom: 1px solid var(--border);
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}

.inv-header h1 {
font-size: 26px;
}

.inv-stats {
display: flex;
gap: 20px;
flex: 1;
}

.inv-stat {
display: flex;
flex-direction: column;
gap: 2px;
}

.inv-stat-num {
font-size: 18px;
font-weight: 800;
color: var(--gold);
}

.inv-stat-label {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
}

.empty-state {
text-align: center;
padding: 80px 20px;
color: var(--text-muted);
}

.empty-state p {
margin-bottom: 20px;
}

.empty-state-inline {
color: var(--text-dim);
font-size: 13px;
padding: 20px;
}

.inv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 14px;
}

.inv-item {
background: var(--surface);
border: 1px solid var(--border);
border-top: 2px solid var(--rc);
padding: 16px 12px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
position: relative;
}

.inv-item img {
width: 72px;
height: 72px;
object-fit: contain;
margin-bottom: 6px;
}

.inv-item-name {
font-size: 11px;
line-height: 1.3;
}

.inv-item-value {
font-size: 12px;
color: var(--gold);
font-weight: 700;
}

.inv-item-tag {
position: absolute;
top: 8px;
right: 8px;
font-size: 8px;
background: var(--gold);
color: #0a0a0c;
padding: 2px 5px;
font-weight: 800;
}

.battles-header {
padding: 30px 0;
border-bottom: 1px solid var(--border);
margin-bottom: 40px;
}

.battles-header h1 {
font-size: 26px;
margin-bottom: 10px;
}

.battles-header p {
color: var(--text-muted);
font-size: 13px;
max-width: 560px;
}

.battle-create {
margin-bottom: 50px;
}

.battle-create-form {
background: var(--surface);
border: 1px solid var(--border);
padding: 26px;
display: grid;
gap: 20px;
}

.form-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}

.form-row label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
width: 90px;
flex-shrink: 0;
}

.form-row select {
background: var(--surface-2);
border: 1px solid var(--border-light);
color: var(--text);
padding: 10px 14px;
font-family: inherit;
font-size: 13px;
flex: 1;
min-width: 200px;
}

.pill-select {
display: flex;
gap: 8px;
}

.pill {
background: var(--surface-2);
border: 1px solid var(--border-light);
color: var(--text-muted);
padding: 9px 16px;
font-size: 12px;
font-family: inherit;
}

.pill:hover {
border-color: var(--gold);
}

.pill.active {
background: var(--gold);
color: #0a0a0c;
border-color: var(--gold);
font-weight: 700;
}

.battle-cost-label {
font-size: 13px;
color: var(--text-muted);
margin-right: auto;
}

.battle-cost-label span {
color: var(--gold);
font-weight: 700;
}

.battle-open-list {
margin-bottom: 50px;
}

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

.open-battle-card {
background: var(--surface);
border: 1px solid var(--border);
padding: 14px;
display: flex;
align-items: center;
gap: 14px;
}

.open-battle-card img {
width: 50px;
height: 50px;
object-fit: contain;
flex-shrink: 0;
}

.open-battle-info {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
min-width: 0;
}

.open-battle-name {
font-size: 12px;
font-weight: 700;
}

.open-battle-meta {
font-size: 11px;
color: var(--text-muted);
}

.recent-battles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
}

.recent-battle-card {
background: var(--surface);
border: 1px solid var(--border);
padding: 14px;
display: flex;
align-items: center;
gap: 12px;
}

.recent-battle-card:hover {
border-color: var(--gold);
}

.recent-battle-card img {
width: 40px;
height: 40px;
object-fit: contain;
flex-shrink: 0;
}

.recent-battle-info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}

.recent-battle-case {
font-size: 11px;
font-weight: 700;
}

.recent-battle-winner {
font-size: 10px;
color: var(--gold);
}

.battle-room {
padding: 30px 0 60px;
}

.battle-room-head {
display: flex;
align-items: center;
gap: 20px;
padding-bottom: 26px;
border-bottom: 1px solid var(--border);
margin-bottom: 30px;
}

.battle-room-head img {
width: 60px;
height: 60px;
object-fit: contain;
}

.battle-room-head h1 {
font-size: 22px;
margin-bottom: 6px;
}

.battle-room-meta {
font-size: 12px;
color: var(--text-muted);
}

.battle-room-status {
margin-left: auto;
background: var(--surface-2);
border: 1px solid var(--border-light);
padding: 8px 16px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
}

.battle-room-status.finished {
border-color: var(--gold);
color: var(--gold);
}

.battle-players-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 16px;
}

.battle-player-col {
background: var(--surface);
border: 1px solid var(--border);
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
}

.battle-player-col.is-winner {
border-color: var(--gold);
box-shadow: 0 0 24px -10px var(--gold);
}

.battle-player-head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}

.battle-player-nick {
font-size: 12px;
font-weight: 700;
}

.battle-player-bot {
font-size: 9px;
color: var(--text-dim);
text-transform: uppercase;
}

.battle-player-total {
font-size: 12px;
color: var(--gold);
font-weight: 700;
}

.battle-player-items {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 40px;
}

.battle-item-row {
display: flex;
align-items: center;
gap: 10px;
border-left: 2px solid var(--rc, var(--border-light));
padding-left: 8px;
min-height: 32px;
}

.battle-item-row.item-reveal {
animation: item-flip-in 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.3);
}

@keyframes item-flip-in {
0% { opacity: 0; transform: scaleX(0.3) scaleY(0.6); }
60% { opacity: 1; transform: scaleX(1.05) scaleY(1.02); }
100% { opacity: 1; transform: scaleX(1) scaleY(1); }
}

.battle-item-row.mystery {
border-left-color: var(--border-light);
opacity: 0.6;
}

.mystery-icon {
width: 32px;
height: 32px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface-2);
color: var(--text-dim);
font-weight: 800;
font-size: 13px;
animation: mystery-pulse 1s ease-in-out infinite;
}

@keyframes mystery-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}

.battle-item-row img {
width: 32px;
height: 32px;
object-fit: contain;
}

.battle-item-row-name {
font-size: 10px;
flex: 1;
color: var(--text-dim);
}

.battle-item-row.item-reveal .battle-item-row-name {
color: var(--text);
}

.battle-item-row-value {
font-size: 10px;
color: var(--gold);
}

.battle-waiting-placeholder {
color: var(--text-dim);
font-size: 11px;
text-align: center;
padding: 20px 0;
}

.pulsing-text {
animation: text-pulse 1.3s ease-in-out infinite;
}

@keyframes text-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}

.winner-badge {
font-size: 9px;
background: var(--gold);
color: #0a0a0c;
padding: 2px 8px;
font-weight: 800;
letter-spacing: 0.04em;
animation: badge-pop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.4);
}

@keyframes badge-pop {
0% { transform: scale(0); opacity: 0; }
70% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); }
}

.battle-player-col.is-winner {
animation: winner-glow-pulse 1.6s ease-in-out infinite;
}

@keyframes winner-glow-pulse {
0%, 100% { box-shadow: 0 0 24px -10px var(--gold); }
50% { box-shadow: 0 0 34px -6px var(--gold); }
}

.sitefooter {
border-top: 1px solid var(--border);
padding: 24px 0;
}

.sitefooter-inner {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
font-size: 11px;
color: var(--text-dim);
text-align: center;
}

.upgrader-header {
padding: 30px 0;
border-bottom: 1px solid var(--border);
margin-bottom: 40px;
}

.upgrader-header h1 {
font-size: 26px;
margin-bottom: 10px;
}

.upgrader-header p {
color: var(--text-muted);
font-size: 13px;
max-width: 560px;
}

.upgrader-section {
margin-bottom: 50px;
}

.upgrader-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 30px;
align-items: start;
margin-bottom: 60px;
}

.upgrader-inv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}

.upg-item {
background: var(--surface);
border: 1px solid var(--border);
border-top: 2px solid var(--rc);
padding: 14px 10px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
position: relative;
cursor: pointer;
transition: transform 0.12s ease, border-color 0.12s ease;
}

.upg-item:hover {
transform: translateY(-2px);
}

.upg-item.selected {
border-color: var(--gold);
box-shadow: 0 0 16px -6px var(--gold);
}

.upg-item img {
width: 60px;
height: 60px;
object-fit: contain;
margin-bottom: 6px;
}

.upg-item-name {
font-size: 10px;
line-height: 1.3;
}

.upg-item-value {
font-size: 11px;
color: var(--gold);
font-weight: 700;
}

.upg-item-check {
position: absolute;
top: 6px;
right: 6px;
width: 18px;
height: 18px;
border: 1px solid var(--border-light);
background: var(--surface-2);
color: transparent;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}

.upg-item.selected .upg-item-check {
background: var(--gold);
border-color: var(--gold);
color: #0a0a0c;
}

.upgrader-panel {
background: var(--surface);
border: 1px solid var(--border);
padding: 22px;
position: sticky;
top: 88px;
display: flex;
flex-direction: column;
gap: 18px;
}

.upg-stake-box {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}

.upg-stake-label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}

.upg-stake-value {
font-size: 20px;
font-weight: 800;
color: var(--gold);
}

.upg-multi-row {
display: flex;
gap: 6px;
}

.upg-mult {
flex: 1;
background: var(--surface-2);
border: 1px solid var(--border-light);
color: var(--text-muted);
padding: 10px 0;
font-family: inherit;
font-size: 12px;
font-weight: 700;
}

.upg-mult:hover {
border-color: var(--gold);
}

.upg-mult.active {
background: var(--gold);
color: #0a0a0c;
border-color: var(--gold);
}

.upg-stats-row {
display: flex;
justify-content: space-between;
gap: 12px;
}

.upg-stat {
display: flex;
flex-direction: column;
gap: 3px;
}

.upg-stat-label {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}

.upg-stat-value {
font-size: 16px;
font-weight: 800;
}

.upg-stat-value.gold {
color: var(--gold);
}

.upg-gauge-wrap {
padding: 4px 0;
}

.upg-gauge {
position: relative;
height: 14px;
background: linear-gradient(90deg, var(--danger), var(--danger));
overflow: visible;
border: 1px solid var(--border-light);
}

.upg-gauge-win {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: #3ecf6e;
width: 27.6%;
transition: width 0.2s ease;
}

.upg-gauge-needle {
position: absolute;
top: -5px;
bottom: -5px;
left: 0%;
width: 3px;
background: #fff;
box-shadow: 0 0 8px #fff;
transform: translateX(-50%);
}

.upg-go-btn {
width: 100%;
}

.upg-result {
text-align: center;
font-size: 13px;
font-weight: 700;
min-height: 18px;
}

.upg-result.win {
color: #3ecf6e;
}

.upg-result.lose {
color: var(--danger);
}

.lb-header {
padding: 30px 0;
border-bottom: 1px solid var(--border);
margin-bottom: 40px;
}

.lb-header h1 {
font-size: 26px;
margin-bottom: 10px;
}

.lb-header p {
color: var(--text-muted);
font-size: 13px;
max-width: 560px;
}

.lb-section {
margin-bottom: 60px;
}

.lb-table {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
background: var(--surface);
}

.lb-row {
display: grid;
grid-template-columns: 44px 1.3fr 1fr 1fr 1fr 1.6fr;
gap: 10px;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-size: 12px;
}

.lb-row:last-child {
border-bottom: none;
}

.lb-row-head {
color: var(--text-muted);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
background: var(--surface-2);
}

.lb-row-me {
background: rgba(255, 204, 51, 0.06);
border-left: 2px solid var(--gold);
}

.lb-col-rank {
color: var(--text-dim);
font-weight: 800;
}

.lb-col-name {
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.lb-col-num {
color: var(--text-muted);
}

.lb-net-worth {
color: var(--gold);
font-weight: 800;
}

.lb-col-drop {
font-size: 11px;
color: var(--text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.lb-row.rank-gold .lb-col-rank {
color: #ffd700;
}

.lb-row.rank-silver .lb-col-rank {
color: #c8ccd4;
}

.lb-row.rank-bronze .lb-col-rank {
color: #cd7f32;
}

@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 0 rgba(255, 204, 51, 0); }
50% { box-shadow: 0 0 30px -6px var(--gold); }
}

.pulsing {
animation: pulse-glow 1.4s ease-in-out infinite;
}

@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
}
.case-hero {
grid-template-columns: 1fr;
}
.cases-grid {
grid-template-columns: repeat(2, 1fr);
}
.mainnav {
gap: 16px;
}
.topbar-inner {
gap: 16px;
padding: 0 16px;
}
.page {
padding: 0 16px 60px;
}
.ticker-wrap {
margin: 0 -16px 30px;
}
.upgrader-layout {
grid-template-columns: 1fr;
}
.upgrader-panel {
position: static;
}
.lb-row {
grid-template-columns: 32px 1.2fr 1fr 1.2fr;
font-size: 11px;
}
.lb-col-invvalue {
display: none;
}
.lb-col-drop {
display: none;
}
}

@media (max-width: 560px) {
.cases-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.topbar-right {
gap: 6px;
}
.user-nick {
display: none;
}
.user-chip {
padding: 6px 8px 6px 10px;
}
.hero h1 {
font-size: 28px;
}
}