:root {
  --espresso: #1a0f0a;
  --noir: #0d0d0d;
  --burgundy: #6b1c2a;
  --gold: #d4a843;
  --gold-dim: #a8853a;
  --olive: #3a5a2d;
  --blood: #8b1a1a;
  --leather: #2a1a10;
  --smoke: #1e1e1e;
  --ash: #9a9a9a;
  --paper: #c8b89a;
  --cream: #f5e6c8;
}

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

body {
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--noir);
  color: var(--paper);
  min-height: 100vh;
  overflow-x: hidden;
}

.bg-noir { background: var(--noir); }

.font-display { font-family: 'Playfair Display', serif; }

.pinstripe-bg {
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 18px,
    rgba(212, 168, 67, 0.03) 18px,
    rgba(212, 168, 67, 0.03) 19px
  );
}

.leather-bg {
  background: linear-gradient(
    135deg,
    var(--leather) 0%,
    #1f1108 25%,
    var(--leather) 50%,
    #241510 75%,
    var(--leather) 100%
  );
}

.gold-border {
  border: 1px solid rgba(212, 168, 67, 0.3);
}

.gold-glow {
  text-shadow: 0 0 20px rgba(212, 168, 67, 0.3);
}

.money-text {
  color: var(--gold);
  font-family: 'Playfair Display', serif;
}

.honor-bar {
  background: linear-gradient(90deg, var(--burgundy), var(--gold));
}

.heat-bar {
  background: linear-gradient(90deg, #ff4444, #ff0000);
}

.suspicion-bar {
  background: linear-gradient(90deg, #ff69b4, #ff1493);
}

.affair-border {
  border: 1px solid rgba(255, 105, 180, 0.3);
}

.affair-glow {
  box-shadow: 0 0 15px rgba(255, 105, 180, 0.15);
}

.tab-active {
  background: linear-gradient(90deg, rgba(212, 168, 67, 0.15), transparent);
  border-left: 3px solid var(--gold);
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 168, 67, 0.1);
}

.btn-brass {
  background: linear-gradient(180deg, #c9a044, #8b6f2a);
  color: #1a0f0a;
  font-weight: 700;
  border: 2px solid var(--gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s;
  cursor: pointer;
}

.btn-brass:hover {
  background: linear-gradient(180deg, #dbb44e, #a88334);
  box-shadow: 0 0 20px rgba(212, 168, 67, 0.4);
  transform: translateY(-1px);
}

.btn-danger {
  background: linear-gradient(180deg, #8b1a1a, #5a1010);
  color: var(--cream);
  border: 1px solid var(--blood);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-danger:hover {
  background: linear-gradient(180deg, #a82020, #6b1515);
  box-shadow: 0 0 15px rgba(139, 26, 26, 0.4);
}

.btn-olive {
  background: linear-gradient(180deg, #3a5a2d, #2a4020);
  color: var(--cream);
  border: 1px solid var(--olive);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-olive:hover {
  background: linear-gradient(180deg, #4a7038, #3a5a2d);
}

.event-good { border-left: 3px solid var(--olive); }
.event-bad { border-left: 3px solid var(--blood); }
.event-money { border-left: 3px solid var(--gold); }
.event-honor { border-left: 3px solid #9b59b6; }

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: var(--noir); }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }

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

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

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 5px rgba(212, 168, 67, 0.2); }
  50% { box-shadow: 0 0 20px rgba(212, 168, 67, 0.5); }
}

.animate-fade { animation: fadeIn 0.3s ease; }
.animate-slide { animation: slideIn 0.3s ease; }
.animate-pulse-gold { animation: pulse-gold 2s infinite; }

.grid-block {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(212, 168, 67, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 4px;
}

.grid-block:hover {
  border-color: var(--gold);
  background: rgba(212, 168, 67, 0.1);
}

.grid-safe { background: rgba(58, 90, 45, 0.3); }
.grid-danger { background: rgba(139, 26, 26, 0.3); }
.grid-contested { background: rgba(212, 168, 67, 0.2); }
.grid-patrolled { background: rgba(58, 90, 45, 0.5); border-color: var(--olive); }

.newspaper-tear {
  background: linear-gradient(180deg, var(--noir) 0%, rgba(13, 13, 13, 0.95) 100%);
  border-top: 2px solid rgba(200, 184, 154, 0.2);
  position: relative;
}

.newspaper-tear::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 5px,
    rgba(200, 184, 154, 0.15) 5px,
    rgba(200, 184, 154, 0.15) 10px
  );
}

.busted-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.5s ease;
}

.star { color: var(--gold); }
.star-empty { color: rgba(212, 168, 67, 0.2); }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.shake { animation: shake 0.3s ease; }

/* Mobile responsive */
@media (max-width: 768px) {
  .desktop-sidebar { display: none; }
  .mobile-tabs { display: flex !important; }
}

@media (min-width: 769px) {
  .mobile-tabs { display: none !important; }
}