:root {
  --bg-from: #1e3c72;
  --bg-to: #2a5298;
  --accent: #8ab4ff;
  --title-color: #ffffff;
  --title-font: 'Montserrat', sans-serif;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, var(--bg-from), var(--bg-to));
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

body.overlay {
  background: transparent;
}

body.no-session {
  background: transparent;
}

@media (max-width: 600px) {
  body {
    font-size: 24px;
  }
  .game {
    font-size: 32px;
  }
}

#container {
  padding: 30px 60px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  animation: fadeIn 1s ease-out;
}

/* Enhanced overlay styles for better visibility */
#container.overlay-dark {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(2px);
}

#container.overlay-darker {
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(3px);
}

#container.overlay-solid {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(1px);
}

#container.overlay-blur {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

#container.overlay-gradient {
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.8) 0%, 
    rgba(0, 0, 0, 0.6) 50%, 
    rgba(0, 0, 0, 0.8) 100%);
  backdrop-filter: blur(2px);
}

#container.overlay-outline {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.3);
}

#container.overlay-glow {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  box-shadow: 
    0 0 20px rgba(0, 0, 0, 0.6),
    0 0 40px var(--accent),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  border: 1px solid var(--accent);
}

/* Enhanced text shadows for better contrast */
body.enhanced-contrast .game,
body.enhanced-contrast .score {
  text-shadow: 
    0 0 4px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(0, 0, 0, 0.6),
    2px 2px 4px rgba(0, 0, 0, 0.8);
}

body.enhanced-contrast .label i {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8)) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.6));
}

/* Optional: Text stroke for extreme visibility */
body.text-stroke .game,
body.text-stroke .value {
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.8);
  text-stroke: 1px rgba(0, 0, 0, 0.8);
}

/* Text-level overlay backgrounds */
body.text-overlay .game {
  background: rgba(0, 0, 0, 0.7);
  padding: 8px 16px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.text-overlay .score {
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 12px;
  border-radius: 6px;
  backdrop-filter: blur(3px);
  margin: 4px 0;
}

body.text-overlay .value {
  background: rgba(0, 0, 0, 0.8);
  padding: 2px 8px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}

/* Text overlay variants */
body.text-overlay-light .game {
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  padding: 8px 16px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

body.text-overlay-light .score {
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  padding: 4px 12px;
  border-radius: 6px;
  backdrop-filter: blur(3px);
  margin: 4px 0;
}

body.text-overlay-light .value {
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}

body.text-overlay-light .label i {
  color: #333;
}

body.text-overlay-glow .game {
  background: rgba(0, 0, 0, 0.8);
  padding: 8px 16px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  border: 1px solid var(--accent);
  box-shadow: 0 0 15px var(--accent);
}

body.text-overlay-glow .score {
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 12px;
  border-radius: 6px;
  backdrop-filter: blur(3px);
  margin: 4px 0;
  border: 1px solid rgba(138, 180, 255, 0.3);
  box-shadow: 0 0 8px rgba(138, 180, 255, 0.3);
}

body.text-overlay-glow .value {
  background: rgba(0, 0, 0, 0.9);
  padding: 2px 8px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
  border: 1px solid var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* Text overlay with theme colors */
body.text-overlay-theme .game {
  background: linear-gradient(135deg, var(--bg-from), var(--bg-to));
  padding: 8px 16px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  border: 1px solid var(--accent);
  opacity: 0.95;
}

body.text-overlay-theme .score {
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 12px;
  border-radius: 6px;
  backdrop-filter: blur(3px);
  margin: 4px 0;
  border: 1px solid var(--accent);
}

body.text-overlay-theme .value {
  background: var(--accent);
  color: var(--bg-from);
  padding: 2px 8px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
  font-weight: bold;
}

/* Individual text element overlays */
body.text-overlay-individual .game {
  display: inline-block;
  background: rgba(0, 0, 0, 0.8);
  padding: 6px 12px;
  border-radius: 6px;
  backdrop-filter: blur(3px);
}

body.text-overlay-individual .label {
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}

body.text-overlay-individual .value {
  background: rgba(0, 0, 0, 0.9);
  padding: 4px 8px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
  margin-left: 8px;
}

/* Minimal text overlay - just behind text */
body.text-overlay-minimal .game,
body.text-overlay-minimal .value {
  text-shadow: 
    0 0 8px rgba(0, 0, 0, 0.9),
    0 0 12px rgba(0, 0, 0, 0.8),
    0 0 16px rgba(0, 0, 0, 0.7);
  background: linear-gradient(180deg, 
    rgba(0, 0, 0, 0.1) 0%, 
    rgba(0, 0, 0, 0.6) 50%, 
    rgba(0, 0, 0, 0.1) 100%);
  padding: 2px 6px;
  border-radius: 3px;
}

/* Custom text overlay */
body.text-overlay-custom .game {
  background: var(--custom-text-bg, rgba(0, 0, 0, 0.8));
  padding: var(--custom-text-padding, 8px 16px);
  border-radius: var(--custom-text-radius, 8px);
  backdrop-filter: var(--custom-text-blur, blur(4px));
  border: var(--custom-text-border, 1px solid rgba(255, 255, 255, 0.1));
}

body.text-overlay-custom .score {
  background: var(--custom-score-bg, rgba(0, 0, 0, 0.6));
  padding: var(--custom-score-padding, 4px 12px);
  border-radius: var(--custom-score-radius, 6px);
  backdrop-filter: var(--custom-score-blur, blur(3px));
  margin: 4px 0;
}

body.text-overlay-custom .value {
  background: var(--custom-value-bg, rgba(0, 0, 0, 0.8));
  padding: var(--custom-value-padding, 2px 8px);
  border-radius: var(--custom-value-radius, 4px);
  backdrop-filter: var(--custom-value-blur, blur(2px));
}

/* Border control for container overlays */
body.hide-border #container {
  border: none !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6) !important;
}

body.show-border #container {
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* Override specific overlay borders when border control is used */
body.hide-border #container.overlay-outline {
  border: none !important;
}

body.hide-border #container.overlay-glow {
  border: none !important;
}

body.hide-border #container.overlay-blur {
  border: none !important;
}

/* Specific controls for overlay-glow border */
body.hide-glow-border #container.overlay-glow {
  border: none !important;
}

body.show-glow-border #container.overlay-glow {
  border: 1px solid var(--accent) !important;
}

/* Glow border thickness control */
body.glow-border-thin #container.overlay-glow {
  border-width: 1px !important;
}

body.glow-border-thick #container.overlay-glow {
  border-width: 2px !important;
}

body.glow-border-extra-thick #container.overlay-glow {
  border-width: 3px !important;
}

/* Glow border style control */
body.glow-border-dashed #container.overlay-glow {
  border-style: dashed !important;
}

body.glow-border-dotted #container.overlay-glow {
  border-style: dotted !important;
}

body.glow-border-double #container.overlay-glow {
  border-style: double !important;
  border-width: 2px !important;
}

/* Glow border color control */
body.glow-border-white #container.overlay-glow {
  border-color: rgba(255, 255, 255, 0.8) !important;
}

body.glow-border-theme #container.overlay-glow {
  border-color: var(--title-color) !important;
}

/* Outline border controls */
body.hide-outline-border #container.overlay-outline {
  border: none !important;
}

body.outline-border-thin #container.overlay-outline {
  border-width: 1px !important;
}

body.outline-border-thick #container.overlay-outline {
  border-width: 3px !important;
}

body.outline-border-extra-thick #container.overlay-outline {
  border-width: 4px !important;
}

/* Blur border controls */
body.hide-blur-border #container.overlay-blur {
  border: none !important;
}

body.show-blur-border #container.overlay-blur {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

body.show-border #container.overlay-dark,
body.show-border #container.overlay-darker,
body.show-border #container.overlay-solid,
body.show-border #container.overlay-gradient {
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* Border control for text overlays */
body.hide-text-border .game,
body.hide-text-border .score,
body.hide-text-border .value {
  border: none !important;
}

body.show-text-border .game {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

body.show-text-border .score {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

body.show-text-border .value {
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* Override specific text overlay borders when border control is used */
body.hide-text-border .game,
body.hide-text-border .score,
body.hide-text-border .value {
  border: none !important;
  box-shadow: none !important;
}

/* Custom border styles */
body.border-style-dashed #container {
  border-style: dashed !important;
}

body.border-style-dotted #container {
  border-style: dotted !important;
}

body.border-style-double #container {
  border-style: double !important;
  border-width: 3px !important;
}

body.text-border-style-dashed .game,
body.text-border-style-dashed .score,
body.text-border-style-dashed .value {
  border-style: dashed !important;
}

body.text-border-style-dotted .game,
body.text-border-style-dotted .score,
body.text-border-style-dotted .value {
  border-style: dotted !important;
}

body.text-border-style-double .game,
body.text-border-style-double .score,
body.text-border-style-double .value {
  border-style: double !important;
  border-width: 2px !important;
}

/* Border width control */
body.border-thin #container {
  border-width: 1px !important;
}

body.border-thick #container {
  border-width: 3px !important;
}

body.border-extra-thick #container {
  border-width: 4px !important;
}

body.text-border-thin .game,
body.text-border-thin .score,
body.text-border-thin .value {
  border-width: 1px !important;
}

body.text-border-thick .game,
body.text-border-thick .score,
body.text-border-thick .value {
  border-width: 2px !important;
}

/* Border color control */
body.border-color-white #container {
  border-color: rgba(255, 255, 255, 0.8) !important;
}

body.border-color-accent #container {
  border-color: var(--accent) !important;
}

body.border-color-theme #container {
  border-color: var(--title-color) !important;
}

body.text-border-color-white .game,
body.text-border-color-white .score,
body.text-border-color-white .value {
  border-color: rgba(255, 255, 255, 0.8) !important;
}

body.text-border-color-accent .game,
body.text-border-color-accent .score,
body.text-border-color-accent .value {
  border-color: var(--accent) !important;
}

body.text-border-color-theme .game,
body.text-border-color-theme .score,
body.text-border-color-theme .value {
  border-color: var(--title-color) !important;
}

/* Custom overlay colors */
#container.overlay-custom {
  background: var(--custom-overlay-bg, rgba(0, 0, 0, 0.8));
  backdrop-filter: var(--custom-overlay-blur, blur(2px));
  border: var(--custom-overlay-border, none);
}

body.square #container {
  padding: 12px;
}

body.horizontal #container {
  padding: 15px 30px;
}

#container.transparent {
  opacity: 0;
  pointer-events: none;
}

.game {
  font-weight: bold;
  font-size: 48px;
  margin-bottom: 20px;
  text-align: center;
  min-height: 58px; /* Fixed height to prevent layout shifts */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--title-color);
  font-family: var(--title-font);
}

.score {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  gap: 10px;
}

.label {
  opacity: 0.85;
  width: 60px;
  text-align: center;
}

.label i {
  margin-right: 0;
  color: var(--accent);
  font-size: 1.6em;
}

.value {
  font-weight: bold;
  transition: color 0.3s ease;
  font-size: 2em;
}

.value-wrapper {
  position: relative;
  display: inline-block;
}

.delta {
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  font-size: 0.6em;
  color: var(--accent);
  pointer-events: none;
  opacity: 0;
  transform: translateY(0);
}

.delta.show {
  animation: deltaMove 1.5s forwards;
}

.score-text {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  font-size: 0.5em;
  color: var(--accent);
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.score-text.flying {
  animation: textFly 1.5s ease-out forwards;
}

@keyframes textFly {
  0% { 
    opacity: 0; 
    transform: translateX(-50%) translateY(0) scale(0.6); 
  }
  20% { 
    opacity: 1; 
    transform: translateX(-50%) translateY(-15px) scale(1.2); 
  }
  80% { 
    opacity: 1; 
    transform: translateX(-50%) translateY(-25px) scale(1); 
  }
  100% { 
    opacity: 0; 
    transform: translateX(-50%) translateY(-35px) scale(0.8); 
  }
}

.value.updated {
  color: var(--accent);
}

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

@keyframes deltaMove {
  0% { opacity: 1; transform: translateY(0); }
  60% { opacity: 1; transform: translateY(-15px); }
  100% { opacity: 0; transform: translateY(-25px); }
}

body.horizontal #container {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: repeat(4, minmax(100px, max-content));
  gap: 10px 10px;
  align-items: center;
  justify-content: center;
}

body.horizontal .game {
  grid-column: 1 / -1; /* Span all columns */
  margin: 0;
  min-height: 50px; /* Consistent height in horizontal layout */
  justify-self: center;
}

body.horizontal .score {
  flex-direction: column;
  margin: 0;
  align-items: center;
  justify-self: center;
}

body.horizontal .label {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.horizontal .label::before {
  content: attr(data-name);
  font-size: 0.6em;
  margin-bottom: 4px;
}

body:not(.horizontal) .score {
  margin-bottom: 12px;
}

body:not(.horizontal) .label {
  width: 70px;
}

body:not(.horizontal) .label i {
  font-size: 1.8em;
}

body:not(.horizontal) .value {
  font-size: 2.5em;
}

/* Right alignment for vertical layout */
body.align-right:not(.horizontal):not(.square) #container {
  align-items: flex-end;
}

body.align-right:not(.horizontal):not(.square) .game {
  text-align: right;
}

body.align-right:not(.horizontal):not(.square) .score {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* Square Layout */
body.square #container {
  display: grid;
  grid-template-rows: auto 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  align-items: center;
  justify-content: center;
  max-width: 300px;
}

body.square .game {
  grid-column: 1 / -1; /* Span both columns */
  grid-row: 1;
  margin: 0 0 5px 0;
  min-height: 30px;
  justify-self: center;
  font-size: 28px;
}

body.square .score {
  flex-direction: column;
  margin: 0;
  align-items: center;
  justify-self: center;
  align-self: center;
  text-align: center;
  padding: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-width: 70px;
  min-height: 60px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

body.square .score:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

body.square .score:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

body.square .score:nth-child(4) {
  grid-column: 1;
  grid-row: 3;
}

body.square .score:nth-child(5) {
  grid-column: 2;
  grid-row: 3;
}

body.square .label {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0px;
}

body.square .label::before {
  content: attr(data-name);
  font-size: 0.35em;
  margin-bottom: -2px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.9;
  line-height: 1;
}

body.square .label i {
  display: none;
}

body.square .value {
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1;
  margin-top: -1px;
}

body.square .value-wrapper {
  margin-top: 0px;
}

/* Ultra-compact mobile view for square layout */
@media (max-width: 400px) {
  body.square #container {
    max-width: 250px;
    padding: 8px;
    gap: 3px;
  }
  
  body.square .game {
    font-size: 22px;
    min-height: 25px;
    margin: 0 0 3px 0;
  }
  
  body.square .score {
    min-width: 55px;
    min-height: 45px;
    padding: 5px;
  }
  
  body.square .value {
    font-size: 1.1em;
  }
}

/* Themes */
body.theme-red {
  --bg-from: #591f1f;
  --bg-to: #a32424;
  --accent: #ffd1d1;
  --title-color: #ff6b6b;
  --title-font: 'Montserrat', sans-serif;
}

body.theme-green {
  --bg-from: #1f5920;
  --bg-to: #24a33a;
  --accent: #d1ffd3;
  --title-color: #32cd32;
  --title-font: 'Montserrat', sans-serif;
}

body.theme-purple {
  --bg-from: #311e66;
  --bg-to: #6441a5;
  --accent: #d8c4ff;
  --title-color: #ba68c8;
  --title-font: 'Montserrat', sans-serif;
}

body.theme-dark {
  --bg-from: #1a1a1a;
  --bg-to: #2d2d2d;
  --accent: #ffffff;
  --title-color: #f0f0f0;
  --title-font: 'Consolas', 'Monaco', monospace;
}

body.theme-light {
  --bg-from: #f8f9fa;
  --bg-to: #e9ecef;
  --accent: #495057;
  color: #212529;
  text-shadow: none;
  --title-color: #2c3e50;
  --title-font: 'Georgia', serif;
}

body.theme-neon {
  --bg-from: #0d1117;
  --bg-to: #161b22;
  --accent: #00ff88;
  --title-color: #00ff88;
  --title-font: 'Courier New', monospace;
}

body.theme-ocean {
  --bg-from: #006994;
  --bg-to: #0892d0;
  --accent: #87ceeb;
  --title-color: #87ceeb;
  --title-font: 'Montserrat', sans-serif;
}

body.theme-sunset {
  --bg-from: #ff6b35;
  --bg-to: #f7931e;
  --accent: #fff5e6;
  --title-color: #fff5e6;
  --title-font: 'Montserrat', sans-serif;
}

body.theme-galaxy {
  --bg-from: #2c1810;
  --bg-to: #5d4e75;
  --accent: #e6ccff;
  --title-color: #e6ccff;
  --title-font: 'Orbitron', sans-serif;
}

body.theme-forest {
  --bg-from: #2d5016;
  --bg-to: #4a7c59;
  --accent: #90ee90;
  --title-color: #90ee90;
  --title-font: 'Montserrat', sans-serif;
}

body.theme-arctic {
  --bg-from: #4a90e2;
  --bg-to: #7bb3f0;
  --accent: #ffffff;
  --title-color: #ffffff;
  --title-font: 'Montserrat', sans-serif;
}

body.theme-cyberpunk {
  --bg-from: #0f0f23;
  --bg-to: #1a1a2e;
  --accent: #ff00ff;
  --title-color: #ff00ff;
  --title-font: 'Orbitron', sans-serif;
}

body.theme-ember {
  --bg-from: #8b0000;
  --bg-to: #dc143c;
  --accent: #ffa07a;
  --title-color: #ffa07a;
  --title-font: 'Montserrat', sans-serif;
}