/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
  /* Color Variables */
  --primary-brown: #3e1f0d;
  --accent-cream: #ffde9e;
  --border-tan: #a67c52;
  --dark-brown: #2a1408;
  --hover-brown: #5a2f1a;
  --active-brown: #c89968;
  --slot-bg: #444;
  --slot-border: #888;
  --dark-bg: #333;
  --popup-bg: #22222296;
  --border-light: #aaa;
  --border-dark: #666;
  --progress-green: limegreen;
  --progress-red: rgb(205, 50, 50);
  --text-white: #fff;
  --text-black: #000;
  --shadow-black: #000;

  /* Font Variables */
  --font-family: 'Press Start 2P', monospace;

  /* Default Cursor */
  --default-cursor: url('icons/01.png') 0 0, auto;
  --spell-cursor: url('icons/14.png') 16 16, auto;
  --skill-cursor: url('icons/15.png') 16 16, auto;
  --current-cursor: var(--default-cursor);

  /* Joystick Styles */
  --joy-size: 120px;
  /* container size */
  --joy-base: rgba(20, 20, 28, .6);
  --joy-border: rgba(255, 255, 255, .18);
  --joy-glow: 180 100% 60%;
  /* HSL hue/sat/light for glow */
  --joy-accent: 200 90% 60%;
  /* secondary hue for ring */

  --status-poison: lightgreen;
  --status-burned: orange;
  --status-chilled: lightblue;

  --status-square-size: 12px;
}

/* ========================================
   BASE STYLES
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: var(--current-cursor);
}

button,
.button {
  cursor: var(--current-cursor) !important;
}

/* Ensure html and body take full viewport */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--text-black);
  /* Prevent scrollbars */
}

canvas {
  border: 1px solid var(--text-black);
  background-color: var(--text-black);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hidden {
  display: none;
}

/* ========================================
   LAYOUT CONTAINERS
   ======================================== */

#game-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
}

#gameCanvas-container {
  position: relative;
}

/* ========================================
   BUTTONS
   ======================================== */

/* Common button styles */
#start-game,
#toggle-inventory,
#toggle-stats,
.save-load-buttons button,
#options-buttons button,
#loot-buttons button,
.popup-ok {
  font-family: var(--font-family);
  background: var(--primary-brown);
  color: var(--accent-cream);
  border: 2px solid var(--border-tan);
  /* cursor: pointer; */
  padding: 8px 12px;
  font-size: 10px;
}

/* Button variations */
#loot-buttons button.active {
  background: var(--accent-cream);
  color: var(--primary-brown);
}

#options-buttons button {
  padding: 4px 6px;
}

/* Button containers */
.save-load-buttons {
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 10px;
}

#options-buttons {
  position: fixed;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
  z-index: 1000;
}

/* Positioned buttons */
#start-game {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

/* ========================================
   FORM CONTROLS
   ======================================== */

#sfx-volume-slider,
#volume-slider {
  position: relative;
  width: calc(100% - 20px);
  z-index: 10;
}

/* ========================================
   PANELS & GRIDS
   ======================================== */
.options-panel {
  display: none;
  background: var(--popup-bg);
  color: var(--text-white);
  padding: 8px;
  border: 2px solid var(--border-light);
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 10px;
  box-shadow: 0 0 8px var(--shadow-black);
  position: fixed;
}

.options-panel.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.options-panel h3 {
  font-size: 14px;
  margin: 4px 0;
  text-align: center;
}

/* Grid layouts */
.inventory-grid,
.equipment-grid,
.tools-grid,
.loot-grid,
.crafting-grid,
.hotbar-grid {
  display: grid;
  grid-template-columns: repeat(4, 36px);
  gap: 5px;
  margin: 6px 0;
}

.inventory-grid,
.loot-grid {
  grid-template-columns: repeat(4, 36px);
  grid-template-rows: repeat(4, 36px);
  gap: 5px;
  /* margin: 0px 0; */
  overflow-y: scroll;
  /* Always show scrollbar space */
  overflow-x: hidden;
  scrollbar-gutter: stable;
  /* Reserve space even when not needed */
}

.equipment-grid {
  grid-template-rows: repeat(2, 36px);
}

.hotbar-grid,
.tools-grid {
  grid-template-rows: repeat(1, 36px);
}


.hotbar-grid {
  display: grid;
  grid-template-columns: repeat(6, 40px);
  /* Slightly larger for better visibility */
  grid-template-rows: repeat(1, 40px);
  gap: 6px;
  margin: 0;
  /* Remove margin since parent has padding */
}


.hotbar-slot img.used {
  filter: grayscale(50%) brightness(1.0);
  opacity: 0.6;
}


/* Inventory slots */
.inventory-slot {
  width: 36px;
  height: 36px;
  background-color: var(--slot-bg);
  border: 1px solid var(--slot-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.inventory-slot img {
  width: 28px;
  height: 28px;
}

.inventory-slot.selected {
  border: 2px solid yellow;
}



/* Hot Bar slots */
.hotbar-slot {
  width: 40px;
  height: 40px;
  background-color: var(--slot-bg);
  border: 1px solid var(--slot-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hotbar-slot img {
  width: 32px;
  height: 32px;
}

.hotbar-slot.selected {
  border: 2px solid yellow;
}

/* ========================================
   PROGRESS BARS
   ======================================== */

.progress-bar {
  width: 70%;
  height: 8px;
  background: var(--dark-bg);
  border: 1px solid var(--border-dark);
  margin: 0 auto 8px auto;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--progress-green);
  border-radius: 8px;
  transition: width 0.3s ease;
}

.progress-fill-h {
  height: 100%;
  border-radius: 8px;
  background: var(--progress-red);
  transition: width 0.3s ease;
}


.progress-bar-big {
  width: 80%;
  /* or whatever width you prefer */
  height: 20px;
  border-radius: 8px;
  position: relative;
  background: var(--dark-bg);
  border: 1px solid var(--border-dark);
  margin: 15px auto 10px auto;
  /* Changed from 0 to 15px for top margin */
}

.progress-bar-big-positioned {
  position: fixed;
  height: 120px;
  width: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ========================================
   INPUT TEXT
   ======================================== */
/* .popup-input {
  width: 20%;
  padding: 4px;
  border: 1px solid #888;
  border-radius: 4px;
  background: #333;
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
} */

.popup-input {
  font-family: var(--font-family);
  background: var(--dark-bg);
  color: var(--text-white);
  padding: 6px 8px;
  font-size: 10px;
  width: 40px;
  text-align: center;
  border-radius: 4px;
  outline: none;
}

.popup-input:focus {
  box-shadow: 0 0 8px rgba(255, 222, 158, 0.3);
}

.popup-input[type=number] {
  appearance: textfield
}

/* ========================================
   OVERLAYS & TOOLTIPS
   ======================================== */
.item-cooldown,
.item-stack,
.tool-tip {
  position: absolute;
  bottom: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 6px;
  font-weight: bold;
  pointer-events: none;
}

.hotkey-label {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 6px;
  font-weight: bold;
  /* pointer-events: none; */
}

.item-stack {
  background-color: transparent;
}

.tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 1000;
  max-width: 200px;
}

.tooltip-general {
  position: fixed;       /* fixed so it tracks the viewport */
  pointer-events: none;  /* prevents blocking clicks */
  background: black;
  color: white;
  padding: 4px 6px;
  border-radius: 6px;
  font-family: var(--font-family);
  font-size: 10px;
  z-index: 10000;
}


/* ========================================
   POPUPS
   ======================================== */

.popup {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -30%);
  background: var(--popup-bg);
  color: var(--text-white);
  padding: 8px;
  border: 2px solid var(--border-light);
  border-radius: 8px;
  font-family: var(--font-family);
  font-size: 10px;
  box-shadow: 0 0 8px var(--shadow-black);
  max-width: 500px;
  z-index: 9999;
  text-align: center;
}

.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}

#popup-message {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Button row (default: inline row) */
.popup-actions {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  justify-content: center;
}

/* only dialogue stacks */
.popup-content.dialogue-mode .popup-actions {
  flex-direction: column;
  align-items: center;
}


/* ========================================
   STATUS SQUARES
   ======================================== */


.status-effect {
  width: var(--status-square-size);
  height: var(--status-square-size);
  border: 2px solid black;
}

/* ========================================
   POSITIONED PANELS
   ======================================== */

#stats-effect-panel {
  position: fixed;
  left: 10px;
  top: 140px;
  width: 250px;
  flex-direction: row;
  gap: 3px;
}

#stats-panel-short {
  position: fixed;
  left: 10px;
  top: 50px;
  width: 300px;
  flex-direction: row;
  align-items: center;
  /* Optional: vertically center items */
}

.stats-text-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  /* Optional: take remaining space */
}

#stats-image {
  width: 64px;
  height: 64px;
  margin-right: 10px;
  flex-shrink: 0;
  /* Optional: prevent image from shrinking */
}

#stance-image {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  flex-shrink: 0;
  /* Optional: prevent image from shrinking */
}

.level-stance {
  display: flex;
  justify-content: space-between; /* pushes text left, image right */
  align-items: center;           /* vertically centers them */
}


/* #inventory-panel {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 250px;
  max-height: 550px;
  z-index: 100;
} */

#stats-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  max-height: 750px;
  z-index: 1000;
}

#game-log {
  position: fixed;
  left: 10px;
  bottom: 10px;
  width: 300px;
  max-height: 400px;
  z-index: 100;
}

#game-quest-panel,
#game-options-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  max-height: 500px;
  z-index: 1000;
}

.object-viewer {
  position: fixed;
  left: 10px;
  top: 150px;
  width: 300px;
  max-height: 300px;
  z-index: 100;
}

.object-viewer-sell {
  position: fixed;
  right: 0px;
  top: 50%;
  transform: translate(-90%, -50%);
  width: 300px;
  max-height: 300px;
  z-index: 100;
}

.purchase-panel-positioned {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  max-height: 400px;
  z-index: 100;
  /* position: relative;
  width: 250px;
  max-height: 300px; */
}

#inventory-panel {
  position: relative;
  width: 250px;
  max-height: 550px;
}

#quest-log {
  position: relative;
  width: 250px;
  max-height: 300px;
}

#ride-side-panel {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 250px;
  gap: 10px;
  max-height: 80vh;
  z-index: 10001;
}

.enemy-panel-positioned {
  position: fixed;
  right: 10px;
  top: 22px;
  width: 300px;
  max-height: 300px;
  z-index: 100;
}

.loot-panel-positioned {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-150%, -50%);
  width: 250px;
  max-height: 300px;
  z-index: 100;
}

#hot-bar {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  /* width: 80%;
  max-width: 600px;
  height: 60px; */
  justify-content: center;
}

/* #quest-log {
  position: fixed;
  right: 10px;
  top: 240px;
  width: 250px;
  max-height: 300px;
  z-index: 100;
} */


.spell-grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Single column layout */
  gap: 5px;
  margin: 6px 0;
  justify-content: center;
}

#spell-popup,
#spell-purchase-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  max-height: 400px;
  z-index: 100;
}

#spell-grid {
  justify-content: center;
  width: 270px;
  max-height: 200px;
  overflow: auto;
}



/* Spell list slots */
.spell-card {
  width: 250px;
  height: 50px;
  background-color: var(--slot-bg);
  border: 1px solid var(--slot-border);
  display: flex;
  flex-direction: row;
  align-items: center;
  /* This should center both elements vertically */
  padding: 0;
  /* No padding to ensure perfect left alignment */
  /* cursor: pointer; */
}

.spell-slot {
  padding: 0 0 0 10px;
  /* Only left padding for spacing */
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spell-text {
  margin: 0;
  /* Remove default paragraph margin */
  padding: 0 10px 0 0;
  /* Only left padding for spacing */
  background-color: var(--slot-bg);
  font-size: 8px;
  color: white;
  flex: 1;
  line-height: 1.2;
}

.spell-slot img {
  width: 28px;
  height: 28px;
}


.spell-card.selected {
  border: 2px solid yellow;
}

.banking-grid {
  display: grid;
  grid-template-columns: repeat(6, 36px);
  gap: 5px;
  margin: 6px 0;
  justify-content: center;
}

#banking-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  max-height: 400px;
  z-index: 100;
}

#banking-grid {
  justify-content: center;
  width: 270px;
  max-height: 200px;
  overflow: auto;
}

/* ========================================
   IMAGES
   ======================================== */

.target-image-small {
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* ========================================
   GAME LOG
   ======================================== */

#game-log ul {
  list-style: none;
  padding: 0;
  max-height: 150px;
  overflow-y: auto;
  font-size: 10px;
}


/* ========================================
   Tab Navigation
   ======================================== */

.tab-nav {
  display: flex;
  gap: 5px;
  margin-bottom: 15px;
  justify-content: center;
}

.tab-btn {
  font-family: var(--font-family);
  background: var(--primary-brown);
  color: var(--accent-cream);
  border: 2px solid var(--border-tan);
  /* cursor: pointer; */
  padding: 6px 10px;
  font-size: 8px;
  transition: all 0.2s;
}

.tab-btn:hover {
  background: var(--hover-brown);
}

.tab-btn.active {
  background: var(--accent-cream);
  color: var(--primary-brown);
}

/* Tab Content */
.tab-content {
  display: none;
  padding: 10px 5px;
  max-height: 300px;
  overflow-y: auto;
}

.tab-content.active {
  display: block;
}

.tab-content p {
  margin: 8px 0;
}

.tab-content h3 {
  margin: 15px 0 8px 0;
}



/* ========================================
   MOBILE CONTROLS - JOYSTICK
   ======================================== */
#mobile-controls {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;
  display: none;
}

@media (max-width: 768px),
(pointer: coarse) {
  #mobile-controls {
    display: block;
  }
}

.joystick-container {
  width: var(--joy-size);
  height: var(--joy-size);
  contain: layout paint;
  /* perf hint */
  -webkit-tap-highlight-color: transparent;
}


.joystick-base {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
  border-radius: 50%;
  border: 3px solid #555;
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Optional: Add directional indicators */
.joystick-base::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.joystick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(200, 200, 200, 0.9));
  border-radius: 50%;
  border: 2px solid #777;
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
  touch-action: none;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
  transition: transform 0.2s ease-out;
}

.joystick-base,
.joystick-knob {
  touch-action: none;
}

.joystick-knob:active {
  cursor: grabbing;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Optional: Add subtle directional guides */
.joystick-base::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 60%;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent 100%);
  pointer-events: none;
}

.joystick-base {
  position: relative;
}

.joystick-base .guide-horizontal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent 100%);
  pointer-events: none;
}

.joystick-base .guide-vertical {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 60%;
  background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 80%, transparent 100%);
  pointer-events: none;
}

/* Direction display styling (optional) */
#direction-display {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-family: var(--font-family, Arial, sans-serif);
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}


/* Lay out joystick + T button side-by-side on mobile */
@media (max-width: 768px),
(pointer: coarse) {
  #mobile-controls {
    display: flex;
    /* override earlier block */
    gap: 12px;
    align-items: center;
  }
}

/* Container (future-proof if you add more buttons) */
.mobile-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* T button styled to match your theme */
.mobile-action-btn {
  --btn-size: 64px;
  width: var(--btn-size);
  height: var(--btn-size);
  padding: 0;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1;
  color: var(--accent-cream);
  background: var(--primary-brown);
  border: 2px solid var(--border-tan);
  border-radius: 6px;
  /* small radius like other controls */
  box-shadow: 0 2px 0 var(--dark-brown);
  /* subtle raised feel */
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: var(--current-cursor) !important;
  transition: background .12s ease, transform .08s ease, box-shadow .08s ease;
}

.mobile-action-btn:hover {
  background: var(--hover-brown);
}

.mobile-action-btn:active,
.mobile-action-btn.is-pressed {
  /* JS adds .is-pressed while held */
  background: var(--active-brown);
  color: var(--text-black);
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--dark-brown);
}

.mobile-action-btn:focus {
  outline: none;
  box-shadow: 0 2px 0 var(--dark-brown), 0 0 8px rgba(255, 222, 158, 0.3);
}

/* ========================================
   PRELOADER
   ======================================== */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--text-black);
  color: var(--text-white);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-size: 14px;
  z-index: 9999;
}


/* ========================================
   CUSTOM SCROLLBAR STYLING - GLOBAL
   ======================================== */

/* Global scrollbar styling for all elements */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  /* For horizontal scrollbars */
  background: var(--primary-brown);
}

::-webkit-scrollbar-track {
  background: var(--dark-brown);
  border: 1px solid var(--border-tan);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-tan);
  border: 1px solid var(--accent-cream);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--active-brown);
}

::-webkit-scrollbar-thumb:active {
  background: #8a5a38;
}

/* Corner where horizontal and vertical scrollbars meet */
::-webkit-scrollbar-corner {
  background: var(--primary-brown);
}

/* Firefox scrollbar styling - Global */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-tan) var(--primary-brown);
}

/* ========================================
   SLIDER STYLING
   ======================================== */

/* Range slider base styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: var(--dark-bg);
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  outline: none;
  /* cursor: pointer; */
}

/* Webkit slider track */
input[type="range"]::-webkit-slider-track {
  width: 100%;
  height: 8px;
  background: transparent;
  border-radius: 4px;
}

/* Webkit slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--border-tan);
  border: 2px solid var(--accent-cream);
  border-radius: 3px;
  /* cursor: pointer; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--active-brown);
  transform: scale(1.1);
}

input[type="range"]::-webkit-slider-thumb:active {
  background: var(--hover-brown);
  transform: scale(0.95);
}

/* Firefox slider track */
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8px;
  background: var(--dark-bg);
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  /* cursor: pointer; */
}

/* Firefox progress fill */
input[type="range"]::-moz-range-progress {
  background: var(--border-tan);
  height: 8px;
  border-radius: 4px;
}

/* Firefox slider thumb */
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--border-tan);
  border: 2px solid var(--accent-cream);
  border-radius: 3px;
  /* cursor: pointer; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

input[type="range"]::-moz-range-thumb:hover {
  background: var(--active-brown);
}

/* ========================================
   CHECKBOX STYLING
   ======================================== */

/* Hide default checkbox */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  background: var(--dark-bg);
  border: 2px solid var(--border-tan);
  border-radius: 3px;
  /* cursor: pointer; */
  position: relative;
  outline: none;
  transition: all 0.2s ease;
  margin-right: 8px;
}

input[type="checkbox"]:hover {
  background: var(--slot-bg);
  border-color: var(--accent-cream);
}

input[type="checkbox"]:checked {
  background: var(--primary-brown);
  border-color: var(--accent-cream);
}

/* Checkbox checkmark */
input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: -2px;
  left: 2px;
  color: var(--accent-cream);
  font-size: 12px;
  font-weight: bold;
  font-family: var(--font-family);
  line-height: 1;
}

input[type="checkbox"]:focus {
  box-shadow: 0 0 8px rgba(255, 222, 158, 0.3);
}

/* Alternative pixel-style checkmark */
input[type="checkbox"].pixel-style:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: solid var(--accent-cream);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ========================================
   LABELED CONTROLS
   ======================================== */

/* Container for checkbox/slider with label */
.control-group {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-family: var(--font-family);
  font-size: 10px;
  color: var(--text-white);
}

.control-group label {
  /* cursor: pointer; */
  user-select: none;
  flex: 1;
}

/* Slider with value display */
.slider-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  font-family: var(--font-family);
  font-size: 10px;
  color: var(--text-white);
}

.slider-group label {
  min-width: 80px;
  user-select: none;
}

.slider-group input[type="range"] {
  flex: 1;
  min-width: 100px;
}

.slider-value {
  min-width: 30px;
  text-align: center;
  background: var(--primary-brown);
  color: var(--accent-cream);
  padding: 2px 6px;
  border: 1px solid var(--border-tan);
  border-radius: 3px;
  font-size: 8px;
}

/* JavaScript helper for updating slider fill */
/* Add this JavaScript to update the fill dynamically:

function updateSliderFill(slider) {
  const value = slider.value;
  const min = slider.min || 0;
  const max = slider.max || 100;
  const percentage = ((value - min) / (max - min)) * 100;
  
  slider.style.background = `linear-gradient(to right, var(--border-tan) 0%, var(--border-tan) ${percentage}%, var(--dark-bg) ${percentage}%, var(--dark-bg) 100%)`;
}

// Example usage:
document.querySelectorAll('input[type="range"]').forEach(slider => {
  updateSliderFill(slider); // Initial fill
  slider.addEventListener('input', () => updateSliderFill(slider));
});

*/