/*
========================================================================
Totals - Main Stylesheet
Primary Responsibility: Core layout design including CSS Grid for the 
                        overlapping "zipper" panels, animations, modals, 
                        and glassmorphic dark-mode palette.
Dependencies: index.html
Author: Antigravity AI
Date: June 2026
========================================================================
*/
:root {
  --bg-primary: #0f111a;
  --bg-secondary: #181b28;
  --bg-glass: rgba(24, 27, 40, 0.7);
  --border-glass: rgba(255, 255, 255, 0.08);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  
  /* Digit & Panel Colors */
  --tile-bg-empty: transparent;
  --tile-border-empty: rgba(255, 255, 255, 0.2);
  --tile-border-active: rgba(255, 255, 255, 0.5);
  
  --color-absent: #334155; /* Soft slate gray */
  --color-present: #06b6d4; /* Premium vibrant cyan */
  --color-correct: #059669; /* Soft emerald green */
  
  --panel-bg-default: rgba(51, 65, 85, 0.2);
  --panel-border-default: rgba(51, 65, 85, 0.4);
  
  --panel-bg-correct: rgba(5, 150, 105, 0.25);
  --panel-border-correct: rgba(5, 150, 105, 0.5);
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Win state vertical alignment translation offset */
  --zipper-win-translate: 5.5px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-primary);
  background-image: 
    radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 40%);
  color: var(--text-main);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Scrollbar customization */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--color-absent);
  border-radius: 3px;
}

.game-container {
  width: 100%;
  max-width: 480px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 10px calc(18px + env(safe-area-inset-bottom)) 10px;
  position: relative;
  overflow: hidden;
}

/* Header */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  border-bottom: 1px solid var(--border-glass);
}

.logo {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  background: linear-gradient(135deg, #6366f1, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.target-sum-badge {
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  padding: 3px 10px;
  border-radius: 20px;
  color: #a5b4fc;
  display: inline-block;
  margin-top: 4px;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.35rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.icon-btn:active {
  transform: scale(0.95);
}

/* Grid Container */
.grid-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}

/* Guess Row using CSS Grid for 9 columns */
.guess-row {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: 100%;
  max-width: 400px;
  height: 64px;
  position: relative;
  align-items: center;
}

/* Digit Tiles (floating on top) */
.digit-tile {
  grid-row: 1;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background-color: var(--tile-bg-empty);
  border: 2px solid var(--tile-border-empty);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-main);
  z-index: 10;
  user-select: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.1s ease, transform 0.1s ease;
  justify-self: center;
}

.digit-tile.pop-in {
  transform: scale(1.1);
  border-color: var(--tile-border-active);
}

.digit-tile[data-col="0"] { grid-column: 1; }
.digit-tile[data-col="1"] { grid-column: 3; }
.digit-tile[data-col="2"] { grid-column: 5; }
.digit-tile[data-col="3"] { grid-column: 7; }
.digit-tile[data-col="4"] { grid-column: 9; }

/* Submitted state colors */
.digit-tile.submitted.absent {
  background-color: var(--color-absent);
  border-color: var(--color-absent);
}

.digit-tile.submitted.present {
  background-color: var(--color-present);
  border-color: var(--color-present);
}

.digit-tile.submitted.correct {
  background-color: var(--color-correct);
  border-color: var(--color-correct);
  box-shadow: 0 0 10px rgba(5, 150, 105, 0.4);
}

/* Zipper Panels (floating behind digits) */
.zipper-panel {
  grid-row: 1;
  z-index: 5;
  height: 53px;
  display: flex;
  justify-content: center;
  position: relative;
  background-color: var(--panel-bg-default);
  border: 1px solid var(--panel-border-default);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy zipper zip-up animation */
  overflow: hidden;
  border-radius: 8px;
}

/* Zipper column spans to overlap behind adjacent digit pairs with diagonal intersecting clip-paths */
.zipper-panel[data-panel="0"] {
  grid-column: 1 / span 3;
  align-self: start;
  align-items: flex-start;
  padding-top: 5px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 20.75%, 66.67% 100%, 0% 100%);
}
.zipper-panel[data-panel="1"] {
  grid-column: 3 / span 3;
  align-self: end;
  align-items: flex-end;
  padding-bottom: 5px;
  clip-path: polygon(0% 100%, 100% 100%, 100% 79.25%, 66.67% 0%, 33.33% 0%, 0% 79.25%);
}
.zipper-panel[data-panel="2"] {
  grid-column: 5 / span 3;
  align-self: start;
  align-items: flex-start;
  padding-top: 5px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 20.75%, 66.67% 100%, 33.33% 100%, 0% 20.75%);
}
.zipper-panel[data-panel="3"] {
  grid-column: 7 / span 3;
  align-self: end;
  align-items: flex-end;
  padding-bottom: 5px;
  clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 33.33% 0%, 0% 79.25%);
}

.zipper-panel.submitted {
  animation: none !important; /* Release animation lock on transform properties */
}

/* Zipper Panel Feedback Colors */
.zipper-panel.submitted.incorrect {
  background-color: var(--panel-bg-default);
  border-color: var(--panel-border-default);
}

.zipper-panel.submitted.correct {
  background-color: var(--panel-bg-correct);
  border-color: var(--panel-border-correct);
}

/* On Win, make all panels solid green and pop */
.zipper-panel.submitted.win-active {
  background-color: var(--color-correct);
  border: 1px solid rgba(255,255,255,0.2);
  z-index: 6;
}

/* Win state morphing: align panels vertically to center and scale/morph clip-paths to full rectangles */
.zipper-panel[data-panel="0"].win-active {
  transform: translateY(var(--zipper-win-translate));
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%);
  align-items: center;
  padding-top: 0;
}
.zipper-panel[data-panel="1"].win-active {
  transform: translateY(calc(-1 * var(--zipper-win-translate)));
  clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 100% 0%, 0% 0%, 0% 0%);
  align-items: center;
  padding-bottom: 0;
}
.zipper-panel[data-panel="2"].win-active {
  transform: translateY(var(--zipper-win-translate));
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%);
  align-items: center;
  padding-top: 0;
}
.zipper-panel[data-panel="3"].win-active {
  transform: translateY(calc(-1 * var(--zipper-win-translate)));
  clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 100%);
  align-items: center;
  padding-bottom: 0;
}

.zipper-panel .sum-text {
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  user-select: none;
  transition: color 0.3s ease, font-size 0.3s ease;
}

.zipper-panel.submitted.correct .sum-text {
  color: #6ee7b7;
}

.zipper-panel.submitted.win-active .sum-text {
  color: var(--text-main);
  font-size: 0.85rem;
}

/* Animations */
.digit-tile.flip {
  animation: flipTile 0.5s ease forwards;
}

.zipper-panel.fade-in {
  animation: panelReveal 0.4s ease forwards;
}

@keyframes flipTile {
  0% { transform: rotateX(0deg); }
  45% { transform: rotateX(90deg); }
  55% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes panelReveal {
  0% { opacity: 0; transform: scaleY(0.8); }
  100% { opacity: 1; transform: scaleY(1); }
}

.shake {
  animation: shakeRow 0.5s ease-in-out;
}

@keyframes shakeRow {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-8px); }
  30%, 60%, 90% { transform: translateX(8px); }
}

.dance {
  animation: danceTile 0.5s ease-in-out;
}

@keyframes danceTile {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  60% { transform: translateY(-10px); }
}

/* Virtual Keyboard */
.keyboard-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 5px;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.key-btn {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  height: 52px;
  border: none;
  border-radius: 8px;
  background-color: var(--color-absent);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.1s ease, transform 0.05s ease;
  user-select: none;
}

.key-btn.action-key {
  flex-grow: 1.5;
  font-size: 0.85rem;
  background-color: #475569;
}

.key-btn:hover {
  background-color: #475569;
}

.key-btn.action-key:hover {
  background-color: #64748b;
}

.key-btn:active {
  transform: scale(0.92);
}

/* Toasts */
.toast-container {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  background-color: rgba(248, 250, 252, 0.95);
  color: #0f172a;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  animation: toastAppear 0.2s ease forwards, toastDisappear 0.2s ease 2s forwards;
  pointer-events: none;
}

@keyframes toastAppear {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toastDisappear {
  to { opacity: 0; transform: translateY(-10px); }
}

/* Modal Dialog Styles */
.modal-dialog {
  border: none;
  border-radius: 16px;
  background-color: var(--bg-secondary);
  color: var(--text-main);
  max-width: 400px;
  width: 90%;
  margin: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(20px);
  outline: none;
}

.modal-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.modal-content {
  padding: 24px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
}

.modal-close-btn:hover {
  color: var(--text-main);
}

.modal-body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #cbd5e1;
}

.modal-body p {
  margin-bottom: 12px;
}

.modal-body hr {
  border: 0;
  border-top: 1px solid var(--border-glass);
  margin: 16px 0;
}

.modal-body h3 {
  font-family: 'Outfit', sans-serif;
  color: var(--text-main);
  font-size: 1.1rem;
  margin: 15px 0 8px 0;
}

.help-note {
  background-color: rgba(6, 182, 212, 0.1);
  border-left: 3px solid var(--color-present);
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
  color: #e2e8f0;
}

.help-note i {
  color: var(--color-present);
  margin-right: 6px;
}

/* Demo layouts inside modals */
.demo-row {
  display: flex;
  gap: 10px;
  margin: 12px 0;
  align-items: center;
}

.demo-row.wave-demo {
  position: relative;
  height: 60px;
  width: 140px;
}

.demo-zipper {
  width: 65px;
  height: 50px;
  position: absolute;
  display: flex;
  justify-content: center;
  background-color: var(--panel-bg-default);
  border: 1px solid var(--panel-border-default);
  border-radius: 8px;
}

.demo-zipper.left-demo {
  left: 0;
  top: 0;
  align-items: flex-start;
  padding-top: 5px;
}

.demo-zipper.right-demo {
  right: 0;
  bottom: 0;
  align-items: flex-end;
  padding-bottom: 5px;
}

.demo-zipper.correct {
  background-color: var(--panel-bg-correct);
  border-color: var(--panel-border-correct);
}

.demo-zipper.correct .sum-text {
  color: #6ee7b7;
}

.demo-zipper .sum-text {
  font-size: 0.7rem;
  font-weight: 700;
}

.text-cyan { color: #06b6d4; font-weight: 600; }
.text-grey { color: #94a3b8; font-weight: 600; }
.text-green { color: #10b981; font-weight: 600; }

/* Stats grid */
.stats-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  text-align: center;
  margin-bottom: 20px;
}

.stat-box {
  display: flex;
  flex-direction: column;
}

.stat-val {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-main);
}

.stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* Distribution Chart */
.distribution-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 15px 0;
}

.chart-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-label {
  font-size: 0.85rem;
  font-weight: 600;
  width: 15px;
}

.chart-bar-wrapper {
  flex-grow: 1;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  height: 20px;
  overflow: hidden;
}

.chart-bar {
  background-color: var(--color-absent);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-main);
  border-radius: 4px;
  min-width: 20px;
  width: 0%;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.chart-bar.highlight {
  background-color: var(--color-correct);
}

.share-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.game-solution-text {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.game-solution-text strong {
  color: var(--text-main);
  letter-spacing: 0.1em;
  font-size: 1.1rem;
}

.primary-btn {
  background: linear-gradient(135deg, #6366f1, #10b981);
  color: white;
  border: none;
  padding: 12px 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.primary-btn:active {
  transform: translateY(0);
}

/* Animations for Dialogs */
dialog[open] {
  animation: dialogZoomIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dialogZoomIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(15px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Responsive adjustments for smaller devices */
@media (max-height: 780px) {
  :root {
    --zipper-win-translate: 4px;
  }
  .logo { font-size: 1.5rem; }
  .grid-container { gap: 6px; padding: 5px 0; }
  .guess-row { height: 52px; }
  .digit-tile { width: 36px; height: 36px; font-size: 1.2rem; border-radius: 8px; }
  .zipper-panel { height: 44px; }
  .zipper-panel[data-panel="0"] { clip-path: polygon(0% 0%, 100% 0%, 100% 18.18%, 66.67% 100%, 0% 100%); }
  .zipper-panel[data-panel="1"] { clip-path: polygon(0% 100%, 100% 100%, 100% 81.82%, 66.67% 0%, 33.33% 0%, 0% 81.82%); }
  .zipper-panel[data-panel="2"] { clip-path: polygon(0% 0%, 100% 0%, 100% 18.18%, 66.67% 100%, 33.33% 100%, 0% 18.18%); }
  .zipper-panel[data-panel="3"] { clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 33.33% 0%, 0% 81.82%); }
  .zipper-panel .sum-text { font-size: 0.65rem; }
  .key-btn { height: 40px; font-size: 1.05rem; }
}

@media (max-height: 650px) {
  :root {
    --zipper-win-translate: 3.5px;
  }
  .logo { font-size: 1.3rem; }
  .target-sum-badge { font-size: 0.75rem; padding: 2px 8px; margin-top: 2px; }
  .grid-container { gap: 4px; padding: 2px 0; }
  .guess-row { height: 44px; }
  .digit-tile { width: 30px; height: 30px; font-size: 1.05rem; border-radius: 6px; }
  .zipper-panel { height: 37px; border-radius: 6px; }
  .zipper-panel[data-panel="0"] { clip-path: polygon(0% 0%, 100% 0%, 100% 18.92%, 66.67% 100%, 0% 100%); }
  .zipper-panel[data-panel="1"] { clip-path: polygon(0% 100%, 100% 100%, 100% 81.08%, 66.67% 0%, 33.33% 0%, 0% 81.08%); }
  .zipper-panel[data-panel="2"] { clip-path: polygon(0% 0%, 100% 0%, 100% 18.92%, 66.67% 100%, 33.33% 100%, 0% 18.92%); }
  .zipper-panel[data-panel="3"] { clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 33.33% 0%, 0% 81.08%); }
  .zipper-panel .sum-text { font-size: 0.6rem; }
  .key-btn { height: 36px; font-size: 0.95rem; }
  .keyboard-container { gap: 4px; padding: 4px 5px; }
  .keyboard-row { gap: 4px; }
  .game-header { padding: 4px 5px; }
}

@media (max-height: 560px) {
  :root {
    --zipper-win-translate: 3px;
  }
  .logo { font-size: 1.15rem; }
  .target-sum-badge { font-size: 0.7rem; padding: 1px 6px; margin-top: 1px; }
  .grid-container { gap: 3px; padding: 0; }
  .guess-row { height: 38px; }
  .digit-tile { width: 26px; height: 26px; font-size: 0.9rem; border-radius: 5px; }
  .zipper-panel { height: 32px; border-radius: 5px; }
  .zipper-panel[data-panel="0"] { clip-path: polygon(0% 0%, 100% 0%, 100% 18.75%, 66.67% 100%, 0% 100%); }
  .zipper-panel[data-panel="1"] { clip-path: polygon(0% 100%, 100% 100%, 100% 81.25%, 66.67% 0%, 33.33% 0%, 0% 81.25%); }
  .zipper-panel[data-panel="2"] { clip-path: polygon(0% 0%, 100% 0%, 100% 18.75%, 66.67% 100%, 33.33% 100%, 0% 18.75%); }
  .zipper-panel[data-panel="3"] { clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 33.33% 0%, 0% 81.25%); }
  .zipper-panel .sum-text { font-size: 0.55rem; }
  .key-btn { height: 32px; font-size: 0.85rem; }
  .keyboard-container { gap: 3px; padding: 2px 5px; }
  .keyboard-row { gap: 3px; }
  .game-header { padding: 2px 5px; }
}

@media (max-width: 380px) {
  :root {
    --zipper-win-translate: 4px;
  }
  .digit-tile { width: 34px; height: 34px; font-size: 1.1rem; }
  .guess-row { max-width: 320px; height: 50px; }
  .zipper-panel { height: 42px; }
  .zipper-panel[data-panel="0"] { clip-path: polygon(0% 0%, 100% 0%, 100% 19.05%, 66.67% 100%, 0% 100%); }
  .zipper-panel[data-panel="1"] { clip-path: polygon(0% 100%, 100% 100%, 100% 80.95%, 66.67% 0%, 33.33% 0%, 0% 80.95%); }
  .zipper-panel[data-panel="2"] { clip-path: polygon(0% 0%, 100% 0%, 100% 19.05%, 66.67% 100%, 33.33% 100%, 0% 19.05%); }
  .zipper-panel[data-panel="3"] { clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 33.33% 0%, 0% 80.95%); }
}

/* 
========================================================================
Mode Switcher Component
========================================================================
*/
.mode-switcher-container {
  display: flex;
  justify-content: center;
  margin: 8px 0;
  padding: 0 10px;
  width: 100%;
}

.mode-switcher {
  display: flex;
  background-color: var(--bg-glass);
  border: 1px solid var(--border-glass);
  padding: 4px;
  border-radius: 30px;
  width: 100%;
  max-width: 280px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mode-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.mode-btn i {
  font-size: 0.9rem;
}

.mode-btn:hover {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.03);
}

.mode-btn.active {
  background: linear-gradient(135deg, #6366f1, #10b981);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

/* 
========================================================================
Daily Countdown Card (Keyboard replacement)
========================================================================
*/
.countdown-card {
  text-align: center;
  padding: 20px 15px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  margin: 10px 5px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.countdown-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}

.countdown-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.countdown-clock {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #10b981;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.practice-mode-switch-btn {
  margin: 0 auto;
  font-size: 0.9rem;
  padding: 10px 20px;
  background: linear-gradient(135deg, #6366f1, #10b981);
  border-radius: 8px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Countdown container styles inside the stats modal */
.modal-countdown-container {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 14px 0 6px 0;
  text-align: center;
}

.modal-countdown-container span {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: #a5b4fc;
  font-size: 1.1rem;
  margin-left: 4px;
}