:root {
  /* --- Core Colors (Mature/Industrial) --- */
  --game-bg-app: #050505;
  /* Deepest black */
  --game-bg-panel: rgba(18, 18, 24, 0.98);
  /* Almost solid panels */
  --game-bg-glass: rgba(10, 10, 15, 0.9);
  /* Overlays */
  --game-bg-slot: rgba(0, 0, 0, 0.6);
  /* Item slots */
  --game-bg-slot-hover: rgba(255, 255, 255, 0.1);
  --game-bg-tooltip: #151515;
  --game-bg-card: #050505;

  /* --- Borders & Separators --- */
  --game-border-color: rgba(255, 255, 255, 0.12);
  --game-border-active: rgba(255, 255, 255, 0.4);
  --game-border-highlight: #ff6b6b;
  /* Red accent border */

  /* --- Dimensions --- */
  --game-radius-xs: 0px;
  --game-radius-sm: 0px;
  --game-radius-md: 0px;
  --game-clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --game-clip-path-sm: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  --game-clip-path-no-br: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);

  /* --- Gaps and paddings --- */
  --game-padding-xs: 0.25rem;
  --game-padding-sm: 0.5rem;
  --game-padding-md: 0.75rem;
  --game-padding-lg: 1rem;
  --game-padding-xl: 1.5rem;

  --game-gap-xs: 0.25rem;
  --game-gap-sm: 0.5rem;
  --game-gap-md: 0.75rem;
  --game-gap-lg: 1rem;
  --game-gap-xl: 1.5rem;

  /* --- Typography --- */
  --game-font-main: 'Saira Condensed', system-ui, sans-serif;
  --game-text-primary: #e0e0e0;
  --game-text-secondary: #94a3b8;
  --game-text-highlight: #fbbf24;
  --game-text-danger: #ef4444;

  /* --- Semantic Colors --- */
  --game-color-primary: #e11d48;
  /* Blood Red */
  --game-color-stamina: #d97706;
  /* Amber */
  --game-color-magic: #3b82f6;
  /* Blue */
  --game-color-success: #10b981;
  /* Emerald */
  --game-color-warning: #f59e0b;
  /* Amber */

  /* --- Rarity --- */
  --rarity-common: #9ca3af;
  --rarity-uncommon: #ffffff;
  --rarity-rare: #34d399;
  --rarity-epic: #60a5fa;
  --rarity-legendary: #fbbf24;

  /* --- Effects --- */
  --game-shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.8);
  --game-shadow-tooltip: 0 4px 12px rgba(0, 0, 0, 0.8);
  --game-shadow-glow: 0 0 15px rgba(225, 29, 72, 0.3);

  font-family: var(--game-font-main);
  line-height: 1.5;
  font-weight: 400;
  color-scheme: dark;
  color: var(--game-text-primary);
  background-color: var(--game-bg-app);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Responsive Location Widths */
  --location-content-width: 600px;
  /* Default (1080p and below) */
}

/* --- Reusable Game Classes --- */

/* Panels */
.game-panel {
  background: var(--game-bg-panel);
  border: 1px solid var(--game-border-color);
  box-shadow: var(--game-shadow-panel);
  backdrop-filter: blur(8px);
  clip-path: var(--game-clip-path);
}

.game-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Buttons */
.game-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--game-border-color);
  color: var(--game-text-primary);
  padding: 0.6em 1.2em;
  font-family: var(--game-font-main);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  clip-path: var(--game-clip-path-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.game-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--game-text-secondary);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

.game-btn:active {
  transform: translateY(1px);
}

.game-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.game-btn-primary {
  background: rgba(225, 29, 72, 0.2);
  border-color: rgba(225, 29, 72, 0.5);
  color: #ffcccc;
}

.game-btn-primary:hover {
  background: rgba(225, 29, 72, 0.3);
  border-color: var(--game-color-primary);
  box-shadow: var(--game-shadow-glow);
}

.game-btn-icon {
  padding: 0.5rem;
  /* Or keep square for industrial look */
  line-height: 1;
}

/* Slots */
.game-slot {
  background: var(--game-bg-slot);
  border: 1px solid var(--game-border-color);
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  clip-path: var(--game-clip-path);
}

.game-slot:hover {
  background: var(--game-bg-slot-hover);
  border-color: var(--game-border-active);
}



/* Twemoji styles */
img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 0.05em 0 0.1em;
  vertical-align: -0.1em;
  display: inline-block;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb {
  background-color: var(--game-border-active);
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--game-text-secondary);
  border: 2px solid transparent;
}

/* Firefox support */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--game-border-active) rgba(0, 0, 0, 0.4);
}