/* ===================================
   GAME PROGRESS BARS & UI ELEMENTS
   =================================== */

/* Level & Experience Bars */
.progress-container {
  position: relative;
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.4); /* More transparent background */
  border-radius: 10px;
  padding: 2px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 0, 0, 0.3);
  margin: 5px 0;
  border: 1px solid rgba(68, 68, 68, 0.7);
  overflow: hidden;
}
.level-bar {
  background: linear-gradient(to right, #FFD700, #FFA500);
  position: relative;
  height: 100%;
  width: 50%; /* Example width - will be set dynamically */
  border-radius: 8px;
  transition: width 0.5s ease;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

.level-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
              rgba(255, 255, 255, 0.5), 
              rgba(255, 255, 255, 0) 50%, 
              rgba(0, 0, 0, 0) 50%, 
              rgba(0, 0, 0, 0.2));
  border-radius: 8px;
}

.exp-bar {
  background: linear-gradient(to right, #00BFFF, #1E90FF);
  position: relative;
  height: 100%;
  width: 75%; /* Example width - will be set dynamically */
  border-radius: 8px;
  transition: width 0.5s ease;
  box-shadow: 0 0 10px rgba(30, 144, 255, 0.7);
}

.exp-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
              rgba(255, 255, 255, 0.5), 
              rgba(255, 255, 255, 0) 50%, 
              rgba(0, 0, 0, 0) 50%, 
              rgba(0, 0, 0, 0.2));
  border-radius: 8px;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 0 0 3px #000, 0 0 5px #000;
  z-index: 5;
  font-family: 'Arial', sans-serif;
  white-space: nowrap;
}

/* Progress Bar Animations */
@keyframes progressPulse {
  0% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.7); }
  50% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.9); }
  100% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.7); }
}

@keyframes progressShine {
  0% { background-position: -100px 0; }
  100% { background-position: 100px 0; }
}

.level-bar.animate {
  animation: progressPulse 1s infinite, progressShine 2s infinite;
  background: linear-gradient(to right, #FFD700, #FFA500);
  background-size: 200px 100%;
}

.exp-bar.animate {
  animation: progressPulse 1s infinite, progressShine 2s infinite;
  background: linear-gradient(to right, #00BFFF, #1E90FF);
  background-size: 200px 100%;
}

/* Level Up Effect */
.level-up {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  color: #FFD700;
  font-weight: bold;
  animation: levelUpAnimation 1s ease-out forwards;
  text-shadow: 0 0 5px #000, 0 0 10px #FFD700;
  opacity: 0;
  pointer-events: none;
}

@keyframes levelUpAnimation {
  0% { opacity: 0; transform: translate(-50%, 0); }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50px); }
}

/* Combo Bar System */
.combo-container {
  position: relative;
  width: 200px;
  height: 15px;
  background: rgba(0, 0, 0, 0.4); /* More transparent background */
  border-radius: 8px;
  padding: 2px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4), 0 0 3px rgba(0, 0, 0, 0.3);
  margin: 5px auto;
  border: 1px solid rgba(68, 68, 68, 0.7);
  overflow: hidden;
}

.combo-bar {
  height: 100%;
  width: 100%; /* Will decrease over time */
  border-radius: 6px;
  transition: width 0.1s linear;
  background: linear-gradient(to right, #FF4500, #FF0000);
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}

.combo-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
              rgba(255, 255, 255, 0.3), 
              rgba(255, 255, 255, 0) 50%, 
              rgba(0, 0, 0, 0) 50%, 
              rgba(0, 0, 0, 0.3));
  border-radius: 6px;
}

.combo-counter {
  position: absolute;
  right: -40px;
  top: -2px;
  font-size: 16px;
  font-weight: bold;
  color: #FF4500;
  text-shadow: 0 0 5px #000;
}

/* Combo text label inside the combo bar */
.combo-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: #FFF;
  font-weight: bold;
  text-shadow: 0 0 3px #000, 0 0 3px #000;
  z-index: 10;
  font-family: 'Arial', sans-serif;
  letter-spacing: 1px;
  pointer-events: none;
}

/* Combo counter animation */
@keyframes comboCountUp {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.combo-counter.increment {
  animation: comboCountUp 0.3s ease-out;
}

/* MapleStory-like Side Notifications */
.side-notification {
  position: fixed;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #FFCC00;
  padding: 10px 20px;
  border-radius: 10px 0 0 10px;
  font-family: 'Arial', sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7), inset 0 0 8px rgba(255, 255, 255, 0.3);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  border-left: 4px solid rgba(255, 204, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  max-width: 300px;
  text-overflow: ellipsis;
  pointer-events: none;
  animation: sparkleEffect 1.5s infinite;
}

/* Damage and Regen Indicators */
.damage-indicator, .regen-indicator {
  position: absolute;
  animation: floatUp 2s ease-out forwards;
  font-weight: bold;
  z-index: 1000;
  pointer-events: none;
  text-shadow: 2px 2px 0px #000000;
  font-family: 'Arial', sans-serif;
}

@keyframes floatUp {
  0% { opacity: 0; transform: translateY(0) scale(0.8); }
  10% { opacity: 1; transform: translateY(-5px) scale(1.2); }
  20% { transform: translateY(-10px) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-40px) scale(0.8); }
}

@keyframes sparkleEffect {
  0% { box-shadow: 0 0 5px rgba(255, 204, 0, 0.3); }
  50% { box-shadow: 0 0 15px rgba(255, 204, 0, 0.9); }
  100% { box-shadow: 0 0 5px rgba(255, 204, 0, 0.3); }
}

/* Add a more noticeable glow effect for special notifications */
.side-notification {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out, box-shadow 0.3s ease;
}

/* Specific style for level up notification */
.side-notification[style*="rgb(0, 255, 255)"] {
  animation: levelUpSparkle 2s infinite !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.8) !important;
}

@keyframes levelUpSparkle {
  0% { box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); text-shadow: 2px 2px 3px #000; }
  50% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.9); text-shadow: 2px 2px 5px #000, 0 0 15px cyan; }
  100% { box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); text-shadow: 2px 2px 3px #000; }
}

/* Different combo levels */
.combo-bar[data-level="1"] { background: linear-gradient(to right, #FF4500, #FF0000); }
.combo-bar[data-level="2"] { background: linear-gradient(to right, #FF8C00, #FF4500); }
.combo-bar[data-level="3"] { background: linear-gradient(to right, #FFD700, #FFA500); }
.combo-bar[data-level="4"] { background: linear-gradient(to right, #7FFF00, #32CD32); }
.combo-bar[data-level="5"] { background: linear-gradient(to right, #00FFFF, #1E90FF); }
.combo-bar[data-level="max"] { 
  background: linear-gradient(to right, #FF00FF, #8A2BE2);
  animation: maxComboGlow 1s infinite alternate;
}

@keyframes maxComboGlow {
  0% { box-shadow: 0 0 5px rgba(255, 0, 255, 0.7); }
  100% { box-shadow: 0 0 15px rgba(255, 0, 255, 0.9), 0 0 30px rgba(255, 0, 255, 0.5); }
}

/* 8-bit style pixelated progress bars */
.pixel-progress-container {
  position: relative;
  width: 100%;
  height: 20px;
  background: #111;
  padding: 4px;
  border: 2px solid #444;
  image-rendering: pixelated;
  box-shadow: 0 0 0 2px #000;
}

.pixel-level-bar {
  height: 100%;
  background: repeating-linear-gradient(
    to right,
    #FFD700,
    #FFD700 5px,
    #FFA500 5px,
    #FFA500 10px
  );
  transition: width 0.3s steps(10);
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.pixel-exp-bar {
  height: 100%;
  background: repeating-linear-gradient(
    to right,
    #00BFFF,
    #00BFFF 5px,
    #1E90FF 5px,
    #1E90FF 10px
  );
  transition: width 0.3s steps(10);
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Pixel Combo Bar */
.pixel-combo-container {
  position: relative;
  width: 200px;
  height: 15px;
  background: #111;
  padding: 2px;
  border: 2px solid #444;
  image-rendering: pixelated;
  margin: 5px auto;
  box-shadow: 0 0 0 2px #000;
}

.pixel-combo-bar {
  height: 100%;
  background: repeating-linear-gradient(
    to right,
    #FF4500,
    #FF4500 4px,
    #FF0000 4px,
    #FF0000 8px
  );
  transition: width 0.1s steps(25);
  image-rendering: pixelated;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Pixelated font for combo counter */
.pixel-combo-counter {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  position: absolute;
  right: -35px;
  top: 0;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

/* UI Frames & Containers */
.game-ui-container {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #555;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 0 0 5px rgba(255, 255, 255, 0.1);
  padding: 10px;
  margin: 5px;
}

.game-ui-header {
  color: #FFD700;
  font-size: 18px;
  margin-bottom: 10px;
  text-shadow: 0 0 5px #000;
  text-align: center;
  border-bottom: 1px solid rgba(255, 215, 0, 0.5);
  padding-bottom: 5px;
}

.game-ui-footer {
  color: #ccc;
  font-size: 12px;
  margin-top: 10px;
  text-shadow: 0 0 3px #000;
  text-align: center;
  border-top: 1px solid rgba(204, 204, 204, 0.2);
  padding-top: 5px;
}

/* Draggable Window Handle */
.ui-handle {
  background: rgba(80, 80, 80, 0.8);
  height: 15px;
  border-radius: 5px 5px 0 0;
  cursor: grab;
  position: relative;
  margin-bottom: 5px;
}

.ui-handle:active {
  cursor: grabbing;
}

.ui-handle::before {
  content: '••••';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 8px;
  letter-spacing: 3px;
}

/* HP Bar Styling */
.hp-bar {
  background: linear-gradient(to right, #FF3333, #FF6666);
  position: relative;
  height: 100%;
  border-radius: 8px;
  transition: width 0.5s ease;
  box-shadow: 0 0 10px rgba(255, 51, 51, 0.7);
}

.hp-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
            rgba(255, 255, 255, 0.5), 
            rgba(255, 255, 255, 0) 50%, 
            rgba(0, 0, 0, 0) 50%, 
            rgba(0, 0, 0, 0.2));
  border-radius: 8px;
}

/* Mana Bar Styling */
.mana-bar {
  background: linear-gradient(to right, #3366FF, #66AAFF);
  position: relative;
  height: 100%;
  border-radius: 8px;
  transition: width 0.5s ease;
  box-shadow: 0 0 10px rgba(51, 102, 255, 0.7);
}

.mana-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
            rgba(255, 255, 255, 0.5), 
            rgba(255, 255, 255, 0) 50%, 
            rgba(0, 0, 0, 0) 50%, 
            rgba(0, 0, 0, 0.2));
  border-radius: 8px;
}

/* Level indicator styling */
.level-indicator {
  background: rgba(0, 0, 0, 0.4); /* More transparent background */
  padding: 5px 10px;
  border-radius: 15px;
  border: 2px solid rgba(255, 215, 0, 0.8);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.level-text {
  color: #FFD700;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 3px #000;
  font-family: 'Arial', sans-serif;
}

/* Enhanced combo counter display */
.combo-counter-display {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.combo-number {
  font-size: 24px;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 0 0 5px #000, 0 0 10px #FFD700;
  font-family: 'Arial', sans-serif;
}

/* Damage indicator */
.damage-indicator {
  position: absolute;
  color: #FF3333;
  font-weight: bold;
  font-size: 16px;
  text-shadow: 0 0 3px #000;
  animation: floatUp 1s forwards ease-out;
  pointer-events: none;
}

@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}

/* HP/MP regeneration indicators */
.regen-indicator {
  position: absolute;
  color: #33FF33;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 0 0 3px #000;
  animation: floatUpSlow 2s forwards ease-out;
  pointer-events: none;
}

@keyframes floatUpSlow {
  0% { opacity: 1; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* Low HP warning effect */
.hp-bar.low-hp {
  animation: pulseLowHp 0.8s infinite alternate;
}

@keyframes pulseLowHp {
  0% { box-shadow: 0 0 10px rgba(255, 0, 0, 0.7); }
  100% { box-shadow: 0 0 20px rgba(255, 0, 0, 1); }
}

/* Add more transparent styling for UI containers */
.semi-transparent {
  opacity: 0.8 !important;
  backdrop-filter: blur(2px);
}

/* Enhanced Combo Bar System with Gamer Vibes */
@keyframes pulse-glow {
  0% { opacity: 0.4; }
  50% { opacity: 0.8; }
  100% { opacity: 0.4; }
}

@keyframes flash-text {
  0% { text-shadow: 0 0 4px #fff, 0 0 10px #fff, 0 0 15px #fff; }
  50% { text-shadow: 0 0 4px #fff, 0 0 5px #fff, 0 0 7px #fff; }
  100% { text-shadow: 0 0 4px #fff, 0 0 10px #fff, 0 0 15px #fff; }
}

@keyframes flow-energy {
  0% { background-position: 0% center; }
  100% { background-position: -200% center; }
}

@keyframes energy-surge {
  0% { transform: scaleY(0.3); opacity: 0.3; }
  30% { transform: scaleY(1.0); opacity: 0.7; }
  100% { transform: scaleY(0.3); opacity: 0.3; }
}

.combo-container {
  position: relative;
  border-radius: 8px;
  background: rgba(0,0,0,0.5);
  box-shadow: 0 0 5px rgba(0,0,0,0.8), inset 0 0 2px rgba(255,255,255,0.3);
  overflow: hidden;
}

.combo-outer-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 10px;
  opacity: 0;
  z-index: -1;
  transition: all 0.3s ease;
  pointer-events: none;
}

.combo-container.active .combo-outer-glow {
  box-shadow: 0 0 10px #4488ff, 0 0 15px #4488ff;
  opacity: 0.6;
  animation: pulse-glow 1.5s infinite;
}

.combo-container.high-combo .combo-outer-glow {
  box-shadow: 0 0 15px #ffaa00, 0 0 25px #ff5500;
  opacity: 0.8;
  animation: pulse-glow 0.8s infinite;
}

.combo-bar {
  transition: width 0.2s ease, background-color 0.5s ease;
  height: 100%;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
}

.combo-energy-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.3) 10%,
    rgba(255,255,255,0.8) 20%,
    rgba(255,255,255,0.3) 30%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  transition: opacity 0.3s ease;
}

.combo-container.active .combo-energy-particles {
  opacity: 0.7;
  animation: flow-energy 2s linear infinite;
}

.combo-container.high-combo .combo-energy-particles {
  opacity: 1;
  animation: flow-energy 0.8s linear infinite;
}

.combo-bar[data-level="1"] {
  background: linear-gradient(90deg, #4488ff, #66aaff);
}

.combo-bar[data-level="2"] {
  background: linear-gradient(90deg, #44aaff, #22ccff);
}

.combo-bar[data-level="3"] {
  background: linear-gradient(90deg, #22ccff, #00ffcc);
  background-size: 200% 100%;
  animation: flow-energy 3s linear infinite;
}

.combo-bar[data-level="4"] {
  background: linear-gradient(90deg, #00ffaa, #66ff66, #00ffaa);
  background-size: 200% 100%;
  animation: flow-energy 2s linear infinite;
}

.combo-bar[data-level="5"] {
  background: linear-gradient(90deg, #66ff66, #ffff00, #66ff66);
  background-size: 200% 100%;
  animation: flow-energy 2s linear infinite;
}

.combo-bar[data-level="max"] {
  background: linear-gradient(90deg, #ffaa00, #ff5500, #ff0000, #ff5500, #ffaa00);
  background-size: 200% 100%;
  animation: flow-energy 1s linear infinite;
  box-shadow: 0 0 10px #ffaa00, inset 0 0 8px rgba(255,255,255,0.5);
}

.combo-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: white;
  text-shadow: 0 0 2px #000;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.combo-container.active .combo-text {
  color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 8px #fff;
}

.combo-container.high-combo .combo-text {
  color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 8px #ff5500, 0 0 12px #ffaa00;
  animation: flash-text 1s infinite;
}

.combo-counter {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 2px #000;
  transition: all 0.2s ease;
}

.combo-counter.increment {
  animation: bounce-scale 0.3s ease;
}

/* Individual energy particles/bars that appear at higher combos */
.energy-bar {
  position: absolute;
  bottom: 0;
  width: 3px;
  background: rgba(255,255,255,0.8);
  border-radius: 3px 3px 0 0;
  animation: energy-surge 1s infinite;
}

/* Add glowing neon text effect to low HP warning */
.hp-bar.low-hp {
  background: linear-gradient(90deg, #ff3838, #ff7070) !important;
  box-shadow: 0 0 10px #ff3838, inset 0 0 5px rgba(255,255,255,0.5) !important;
  animation: pulse-glow 0.8s infinite !important;
}
/* Browser-only single-player command console, styled like a classic MMORPG panel. */
.local-command-console {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 10000;
  width: min(440px, calc(100vw - 24px));
  color: #eef7ff;
  font: 13px "Trebuchet MS", Arial, sans-serif;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.local-command-header {
  display: flex;
  align-items: stretch;
  width: fit-content;
  min-height: 31px;
  border: 1px solid #40566f;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(#31465c, #1a2939);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16);
  pointer-events: auto;
}

.local-command-console.is-open .local-command-header {
  width: 100%;
}

.local-command-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 112px;
  padding: 5px 11px;
  border: 0;
  border-radius: 6px 0 0 0;
  background: transparent;
  color: #f5fbff;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}

.local-command-status {
  width: 8px;
  height: 8px;
  border: 1px solid #d7ff9d;
  border-radius: 50%;
  background: #83d94b;
  box-shadow: 0 0 5px rgba(131, 217, 75, 0.9);
}

.local-command-minimize {
  margin-left: auto;
  width: 34px;
  border: 0;
  border-left: 1px solid rgba(151, 181, 208, 0.25);
  border-radius: 0 6px 0 0;
  background: transparent;
  color: #d9e8f5;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.local-command-toggle:hover,
.local-command-minimize:hover {
  background: rgba(255, 255, 255, 0.08);
}

.local-command-panel {
  padding: 0 8px 7px;
  border: 1px solid #40566f;
  border-top: 0;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(rgba(21, 34, 47, 0.92), rgba(12, 21, 30, 0.95));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: auto;
}

.local-command-panel[hidden] {
  display: none;
}

.local-command-tabs {
  display: flex;
  align-items: center;
  height: 29px;
  margin: 0 -8px;
  padding: 0 9px;
  border-bottom: 1px solid rgba(122, 156, 186, 0.34);
  background: rgba(4, 11, 17, 0.3);
}

.local-command-tab {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 7px;
  font-size: 11px;
  font-weight: bold;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #91a7b8;
  cursor: pointer;
}

.local-command-tab.active {
  border-bottom-color: #80c7ff;
  color: #fff;
}

.local-command-scope-status {
  margin-left: auto;
  color: #94a9b9;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.local-command-player-count {
  margin-left: 9px;
  color: #8fcb91;
  font-size: 10px;
}

.local-command-output {
  height: 112px;
  padding: 8px 4px;
  overflow-y: auto;
  scrollbar-color: #547494 rgba(0, 0, 0, 0.15);
  scrollbar-width: thin;
  line-height: 1.35;
  text-shadow: 0 1px 1px #000;
}

.local-command-line {
  padding: 1px 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.local-command-line::before {
  color: #7cb9e8;
  content: "[System] ";
}

.local-command-line.command {
  color: #ffe394;
}

.local-command-line.command::before {
  color: #8fcaff;
  content: "[You] ";
}

.local-command-line.chat::before {
  content: "";
}

.local-command-author {
  color: #9bdcff;
  font-weight: bold;
}

.local-command-line.chat.guest .local-command-author {
  color: #ffe08a;
}

.local-command-line.chat.self .local-command-author {
  color: #a9ed86;
}

.local-command-line.chat.scope-global .local-command-author {
  color: #d9b2ff;
}

.local-command-console[data-chat-scope="local"] .local-command-line.chat.scope-global,
.local-command-console[data-chat-scope="global"] .local-command-line.chat.scope-local {
  display: none;
}

.local-command-line.system {
  color: #aeea83;
}

.local-command-entry {
  display: flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid #516a80;
  border-radius: 4px;
  background: rgba(4, 9, 14, 0.84);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

.local-command-input {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  padding: 6px 9px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f7fbff;
  font: inherit;
  font-size: 14px;
}

.local-command-input::placeholder {
  color: #758594;
}

.local-command-send {
  align-self: stretch;
  min-width: 58px;
  margin: 3px;
  border: 1px solid #6688a5;
  border-radius: 3px;
  background: linear-gradient(#54799b, #31516e);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.local-command-hint {
  padding: 5px 2px 0;
  color: #8295a6;
  font-size: 10px;
  text-align: right;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (pointer: coarse), (max-width: 600px) {
  .local-command-console {
    left: 50%;
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(440px, calc(100vw - 16px));
  }

  .local-command-console:not(.is-open) .local-command-header {
    margin-inline: auto;
  }

  .local-command-header {
    min-height: 42px;
  }

  .local-command-output {
    height: min(24dvh, 128px);
  }

  .local-command-entry {
    min-height: 44px;
  }

  .local-command-input {
    min-height: 42px;
    font-size: 16px;
  }

  .local-command-send {
    min-width: 68px;
  }
}

/* Supabase-backed player accounts. */
.online-auth-ui {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
  color: #eef7ff;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

.online-player-badge {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 7px 5px 10px;
  border: 1px solid #57728a;
  border-radius: 7px;
  background: rgba(13, 25, 36, 0.9);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), inset 0 1px rgba(255, 255, 255, 0.1);
  pointer-events: auto;
}

.online-player-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #78d950;
  box-shadow: 0 0 5px #78d950;
}

.online-player-name {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

.online-player-kind {
  padding: 2px 5px;
  border-radius: 3px;
  background: #2f6f9f;
  color: #dff3ff;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.08em;
}

.online-player-kind.guest {
  background: #946514;
  color: #fff2bf;
}

.online-player-badge button {
  padding: 4px 7px;
  border: 1px solid #58728a;
  border-radius: 4px;
  background: #263c50;
  color: #e8f5ff;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.online-auth-toast {
  position: absolute;
  top: max(58px, calc(env(safe-area-inset-top) + 58px));
  left: max(10px, env(safe-area-inset-left));
  display: grid;
  gap: 2px;
  min-width: min(330px, calc(100vw - 20px));
  padding: 12px 15px;
  border: 1px solid #73c858;
  border-radius: 7px;
  background: rgba(18, 52, 28, 0.97);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.12);
  color: #eaffdf;
  pointer-events: none;
}

.online-auth-ui [hidden] { display: none; }

.online-auth-toast strong {
  color: #baff9e;
  font-size: 14px;
}

.online-auth-toast span {
  font-size: 12px;
}

.online-auth-gate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 7, 13, 0.73);
  backdrop-filter: blur(5px);
  pointer-events: auto;
}

.online-auth-card {
  width: min(430px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid #5f7e98;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(30, 49, 66, 0.98), rgba(11, 22, 32, 0.98));
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), inset 0 1px rgba(255, 255, 255, 0.13);
}

.online-auth-brand {
  color: #83cdff;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.16em;
  text-align: center;
}

.online-auth-card h2 {
  margin: 7px 0 5px;
  color: #fff;
  font-size: 24px;
  text-align: center;
}

.online-auth-description,
.online-guest-note {
  color: #b9cad8;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.online-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 18px 0 14px;
  border-bottom: 1px solid #455e73;
}

.online-auth-tab {
  padding: 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #93a9ba;
  font-weight: bold;
  cursor: pointer;
}

.online-auth-tab.active {
  border-bottom-color: #76c8ff;
  color: #fff;
}

.online-auth-form {
  display: grid;
  gap: 10px;
}

.online-auth-form label {
  display: grid;
  gap: 4px;
  color: #d7e7f3;
  font-size: 11px;
  font-weight: bold;
}

.online-auth-form input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #516c83;
  border-radius: 5px;
  outline: 0;
  background: rgba(4, 10, 16, 0.78);
  color: #fff;
  font-size: 16px;
}

.online-auth-form input:focus {
  border-color: #7ccfff;
  box-shadow: 0 0 0 2px rgba(124, 207, 255, 0.16);
}

.online-auth-submit,
.online-guest-button {
  min-height: 42px;
  border: 1px solid #72b6df;
  border-radius: 5px;
  background: linear-gradient(#4d99c8, #286b96);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.online-guest-button {
  width: 100%;
  border-color: #8da661;
  background: linear-gradient(#708d3f, #496326);
}

.online-auth-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  color: #718797;
  font-size: 10px;
  text-transform: uppercase;
}

.online-auth-divider::before,
.online-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #3b5367;
}

.online-auth-message {
  min-height: 18px;
  margin-top: 9px;
  color: #ffd18c;
  font-size: 12px;
  text-align: center;
}

.online-auth-message[data-tone="error"] { color: #ff9c9c; }
.online-auth-message[data-tone="success"] { color: #a9ed86; }

@media (max-width: 600px) {
  .online-auth-card { padding: 18px; }
  .online-player-badge { max-width: calc(100vw - 20px); }
  .online-player-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
}

/* UTC-day top-five leaderboards for Levels 1-10. */
.daily-leaderboard-ui {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 11000;
  color: #eef7ff;
  font-family: "Trebuchet MS", Arial, sans-serif;
  pointer-events: none;
}

.daily-leaderboard-toggle,
.daily-leaderboard-close,
.daily-leaderboard-minimize,
.daily-leaderboard-levels button {
  border: 1px solid #6688a5;
  background: linear-gradient(#4e7898, #284a66);
  color: #fff;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  touch-action: manipulation;
}

/* Compact in-level layout. JavaScript anchors this beside the scaled timer. */
.daily-leaderboard-ui.in-level {
  right: auto;
  width: min(300px, calc(100vw - 16px));
}

.daily-leaderboard-ui.in-level[hidden],
.daily-leaderboard-ui.in-level [hidden] {
  display: none;
}

.daily-leaderboard-ui.in-level .daily-leaderboard-panel {
  width: 100%;
  margin-top: 0;
  padding: 10px;
  border-radius: 6px;
}

.daily-leaderboard-ui.in-level .daily-leaderboard-header h2 {
  margin-top: 1px;
  font-size: 15px;
}

.daily-leaderboard-actions {
  display: flex;
  gap: 4px;
}

.daily-leaderboard-minimize,
.daily-leaderboard-ui.in-level .daily-leaderboard-close {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
}

.daily-leaderboard-ui.in-level .daily-leaderboard-panel > p {
  margin: 4px 0 5px;
  font-size: 9px;
}

.daily-leaderboard-ui.in-level .daily-leaderboard-status {
  min-height: 21px;
  padding: 5px 1px 3px;
  font-size: 9px;
}

.daily-leaderboard-ui.in-level .daily-leaderboard-list {
  gap: 3px;
}

.daily-leaderboard-ui.in-level .daily-leaderboard-list li {
  grid-template-columns: 31px minmax(0, 1fr) auto;
  gap: 5px;
  min-height: 27px;
  padding: 4px 6px;
}

.daily-leaderboard-ui.in-level .daily-leaderboard-rank,
.daily-leaderboard-ui.in-level .daily-leaderboard-name,
.daily-leaderboard-ui.in-level .daily-leaderboard-list time {
  font-size: 10px;
}

.daily-leaderboard-ui.in-level .daily-leaderboard-toggle {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 9px;
}

.daily-leaderboard-toggle {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.14);
  font-size: 11px;
  letter-spacing: 0.08em;
  pointer-events: auto;
}

.daily-leaderboard-panel {
  width: min(390px, calc(100vw - 20px));
  margin-top: 7px;
  padding: 15px;
  border: 1px solid #58758e;
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(27, 45, 61, 0.98), rgba(8, 18, 27, 0.98));
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.66), inset 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: auto;
}

.daily-leaderboard-panel[hidden] { display: none; }

.daily-leaderboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.daily-leaderboard-header span {
  color: #77caff;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.16em;
}

.daily-leaderboard-header h2 {
  margin: 3px 0 0;
  color: #fff;
  font-size: 21px;
}

.daily-leaderboard-close {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  font-size: 20px;
  line-height: 1;
}

.daily-leaderboard-panel > p {
  margin: 7px 0 12px;
  color: #9fb5c6;
  font-size: 11px;
}

.daily-leaderboard-levels {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}

.daily-leaderboard-levels button {
  min-width: 0;
  height: 30px;
  padding: 0;
  border-color: #415e75;
  border-radius: 4px;
  background: #1c3041;
  color: #9fb4c3;
  font-size: 11px;
}

.daily-leaderboard-levels button.active {
  border-color: #85d0ff;
  background: #397ca7;
  color: #fff;
  box-shadow: 0 0 7px rgba(99, 195, 255, 0.38);
}

.daily-leaderboard-status {
  min-height: 30px;
  padding: 10px 2px 5px;
  color: #b5c7d5;
  font-size: 11px;
}

.daily-leaderboard-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.daily-leaderboard-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgba(111, 151, 181, 0.28);
  border-radius: 5px;
  background: rgba(9, 19, 28, 0.68);
}

.daily-leaderboard-list li.is-self {
  border-color: rgba(137, 217, 91, 0.7);
  background: rgba(43, 77, 30, 0.45);
}

.daily-leaderboard-rank {
  color: #ffd36f;
  font-size: 13px;
  font-weight: bold;
}

.daily-leaderboard-name {
  overflow: hidden;
  color: #f6fbff;
  font-size: 13px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-leaderboard-name small {
  padding: 2px 4px;
  border-radius: 3px;
  background: #4d842e;
  color: #eaffde;
  font-size: 8px;
}

.daily-leaderboard-list time {
  color: #9fd8ff;
  font: bold 12px Consolas, monospace;
}

@media (max-width: 600px) {
  .daily-leaderboard-ui {
    top: max(56px, calc(env(safe-area-inset-top) + 56px));
  }

  .daily-leaderboard-panel {
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
  }

  .daily-leaderboard-levels {
    grid-template-columns: repeat(5, 1fr);
  }
}