/* =========================
   DAILY PROGRESS
========================= */

.daily-screen {
  display: none;
  min-height: 100vh;
  padding: 20px;
  text-align: center;

  background:
    radial-gradient(
      circle at top,
      rgba(255, 210, 120, 0.4),
      transparent 45%
    ),
    #fff8e7;
}

.daily-content {
  max-width: 600px;
  margin: 25px auto;
}

.daily-icon {
  font-size: 48px;
  margin: 10px 0;
}

.daily-content h2 {
  font-size: 32px;
  color: #8b4a16;
}

/* ...rest of your Daily CSS... */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff8e7;
  color: #3d2817;
  min-height: 100vh;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
}

/* =========================
   HOME
========================= */

.app {
  min-height: 100vh;
  padding: 25px 16px 50px;
  background:
    radial-gradient(circle at top, rgba(255, 210, 120, 0.35), transparent 40%),
    #fff8e7;
}

h1 {
  text-align: center;
  font-size: 42px;
  margin-top: 20px;
  color: #8b4a16;
}

.subtitle {
  text-align: center;
  margin: 8px 0 30px;
  color: #795548;
}

/* =========================
   CHANT CARDS
========================= */

.chant-grid {
  max-width: 900px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.chant-card {
  min-height: 170px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(139, 74, 22, 0.12);
  box-shadow: 0 8px 25px rgba(100, 60, 20, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-align: center;
  color: #3d2817;
}

.chant-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(100, 60, 20, 0.18);
}

.chant-card:active {
  transform: scale(0.97);
}

.chant-card h2 {
  margin-top: 12px;
  font-size: 20px;
}

.chant-icon {
  font-size: 42px;
}

/* =========================
   MANTRA CARD
========================= */

.mantra-card {
  max-width: 900px;
  margin: 20px auto;
  padding: 25px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 25px rgba(100, 60, 20, 0.12);
  text-align: center;
}

.mantra-card h2 {
  margin-top: 10px;
  color: #8b4a16;
}

.mantra-card p {
  margin-top: 12px;
  line-height: 1.8;
  font-size: 18px;
}

/* =========================
   JAP SCREEN
========================= */

.jap-screen {
  display: none;
  min-height: 100vh;
  padding: 20px;
  text-align: center;
  background:
    radial-gradient(circle at top, rgba(255, 210, 120, 0.4), transparent 45%),
    #fff8e7;
}

.jap-content {
  max-width: 600px;
  margin: 20px auto;
}

.back-btn {
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  color: #6d3b13;
  box-shadow: 0 4px 15px rgba(80, 50, 20, 0.12);
}

.jap-image {
  width: 190px;
  height: 190px;
  margin: 20px auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 35px rgba(120, 70, 20, 0.18);
}

.jap-content h2 {
  font-size: 30px;
  margin: 15px 0;
  color: #8b4a16;
}

/* =========================
   COUNTER
========================= */

.counter-circle {
  width: 220px;
  height: 220px;
  margin: 25px auto;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border: 5px solid rgba(180, 110, 30, 0.25);
  box-shadow: 0 12px 40px rgba(100, 60, 20, 0.15);
}

#count {
  font-size: 55px;
  font-weight: 700;
  color: #8b4a16;
}

.counter-circle small {
  color: #795548;
}

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

.progress-area {
  max-width: 450px;
  margin: auto;
}

.progress-bar {
  height: 14px;
  background: rgba(120, 80, 40, 0.15);
  border-radius: 20px;
  overflow: hidden;
}

#progressBar {
  width: 0%;
  height: 100%;
  border-radius: 20px;
  background: #c47a24;
  transition: width 0.25s ease;
}

#progressText {
  margin-top: 8px;
  color: #795548;
}

/* =========================
   JAPA BUTTON
========================= */

.jap-button {
  width: 105px;
  height: 105px;
  margin-top: 30px;
  border-radius: 50%;
  background: #c47a24;
  color: white;
  font-size: 42px;
  box-shadow: 0 10px 25px rgba(120, 70, 20, 0.25);
  transition: transform 0.15s ease;
}

.jap-button:active {
  transform: scale(0.92);
}

.tap-text {
  margin-top: 10px;
  color: #795548;
}

.reset-button {
  margin-top: 25px;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(120, 80, 40, 0.1);
  color: #6d3b13;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

  h1 {
    font-size: 34px;
  }

  .chant-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .chant-card {
    min-height: 145px;
    padding: 15px;
  }

  .chant-card h2 {
    font-size: 17px;
  }

  .chant-icon {
    font-size: 34px;
  }

  .mantra-card p {
    font-size: 16px;
  }
}

@media (max-width: 420px) {
  .target-options {
  gap: 7px;
}

.target-options button {
  min-width: 55px;
  padding: 9px 10px;
}

.custom-target-area {
  flex-direction: column;
}

.custom-target-area input,
.custom-target-area button {
  width: 100%;
  max-width: 260px;
}

  .chant-grid {
    grid-template-columns: 1fr;
  }

  .jap-image {
    width: 160px;
    height: 160px;
  }

  .counter-circle {
    width: 190px;
    height: 190px;
  }

  #count {
    font-size: 48px;
  }
    }
/* =========================
   RESET CONFIRMATION MODAL
========================= */

.reset-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;

  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(60, 40, 20, 0.35);
  backdrop-filter: blur(6px);
}

.reset-box {
  width: min(100%, 360px);

  padding: 28px 22px;

  border-radius: 28px;

  text-align: center;

  background:
    radial-gradient(
      circle at top,
      rgba(255, 220, 150, 0.45),
      transparent 60%
    ),
    #fffaf0;

  box-shadow:
    0 20px 60px rgba(70, 45, 20, 0.22);

  border: 1px solid rgba(180, 120, 50, 0.15);

  animation: resetPopup 0.2s ease-out;
}

.reset-symbol {
  font-size: 42px;
  margin-bottom: 10px;
}

.reset-box h3 {
  font-size: 24px;
  color: #7b461c;
  margin-bottom: 8px;
}

.reset-box p {
  color: #795548;
  font-size: 15px;
  line-height: 1.5;
}

.reset-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.reset-actions button {
  flex: 1;
  padding: 12px 10px;

  border-radius: 16px;

  font-weight: 600;

  transition: transform 0.15s ease;
}

.reset-actions button:active {
  transform: scale(0.96);
}

.reset-cancel {
  background: #f3eadc;
  color: #6d4c35;
}

.reset-confirm {
  background: #d6a15c;
  color: white;
}

@keyframes resetPopup {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* =========================
   JAP TARGET
========================= */

.target-section {
  max-width: 500px;
  margin: 10px auto 25px;
  text-align: center;
}

.target-title {
  margin-bottom: 14px;
  color: #795548;
  font-size: 16px;
}

.target-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.target-options button {
  min-width: 58px;
  padding: 10px 13px;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.82);
  color: #6d421e;

  border: 1px solid rgba(139, 74, 22, 0.12);

  box-shadow: 0 4px 14px rgba(100, 60, 20, 0.08);

  transition:
    transform 0.15s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.target-options button:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(100, 60, 20, 0.12);
}

.target-options button:active {
  transform: scale(0.95);
}

.target-options .target-selected {
  background: #d6a15c;
  color: white;
  box-shadow: 0 6px 18px rgba(180, 120, 50, 0.22);
}

.custom-target-area {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 14px;
}

.custom-target-area input {
  width: 145px;
  padding: 11px 13px;

  border-radius: 15px;

  border: 1px solid rgba(139, 74, 22, 0.18);

  outline: none;

  background: rgba(255, 255, 255, 0.9);

  color: #4e342e;

  font-size: 16px;
}

.custom-target-area input:focus {
  border-color: rgba(180, 120, 50, 0.5);

  box-shadow:
    0 0 0 3px rgba(214, 161, 92, 0.14);
}

.custom-target-area button {
  padding: 11px 15px;

  border-radius: 15px;

  background: #c58a45;
  color: white;

  box-shadow: 0 5px 15px rgba(120, 70, 20, 0.15);
}

.custom-target-area button:active {
  transform: scale(0.96);
}
/* =========================
   DAILY PROGRESS
========================= */

.daily-screen {
  display: none;
  min-height: 100vh;
  padding: 20px;

  text-align: center;

  background:
    radial-gradient(
      circle at top,
      rgba(255, 210, 120, 0.4),
      transparent 45%
    ),
    #fff8e7;
}

.daily-content {
  max-width: 600px;
  margin: 25px auto;
}

.daily-icon {
  font-size: 48px;
  margin: 10px 0;
}

.daily-content h2 {
  font-size: 32px;
  color: #8b4a16;
}

.daily-date {
  margin-top: 6px;
  color: #795548;
}

/* Total */

.daily-total {
  width: 190px;
  height: 190px;

  margin: 25px auto;

  border-radius: 50%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.85);

  border: 5px solid rgba(180, 110, 30, 0.22);

  box-shadow:
    0 12px 40px rgba(100, 60, 20, 0.14);
}

#dailyTotal {
  font-size: 48px;
  font-weight: 700;
  color: #8b4a16;
}

.daily-total small {
  margin-top: 4px;
  color: #795548;
}

/* Individual Naam */

.daily-list {
  display: flex;
  flex-direction: column;
  gap: 12px;

  margin-top: 20px;
}

.daily-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 18px;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.82);

  border: 1px solid rgba(139, 74, 22, 0.1);

  box-shadow:
    0 5px 18px rgba(100, 60, 20, 0.08);

  color: #5d4037;

  text-align: left;
}

.daily-item strong {
  color: #8b4a16;
  font-size: 18px;
}

.empty-daily {
  padding: 25px;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.7);

  color: #795548;
}

/* Daily button on Home */

.daily-open-btn {
  display: block;

  width: min(900px, 100%);

  margin: 25px auto 0;

  padding: 15px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.85);

  color: #7b461c;

  border: 1px solid rgba(139, 74, 22, 0.12);

  box-shadow:
    0 7px 22px rgba(100, 60, 20, 0.1);

  font-weight: 600;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.daily-open-btn:hover {
  transform: translateY(-2px);

  box-shadow:
    0 10px 28px rgba(100, 60, 20, 0.14);
}

.daily-open-btn:active {
  transform: scale(0.98);
}

/* Mobile */

@media (max-width: 420px) {

  .daily-content h2 {
    font-size: 28px;
  }

  .daily-total {
    width: 170px;
    height: 170px;
  }

  #dailyTotal {
    font-size: 42px;
  }

  .daily-item {
    padding: 14px;
  }
}
/* =========================
   DARK MODE
========================= */

.theme-toggle {
  display: block;
  margin: 15px auto 20px;
  padding: 10px 18px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.8);
  color: #6d421d;

  border: 1px solid rgba(139, 74, 22, 0.15);

  box-shadow: 0 5px 18px rgba(80, 50, 20, 0.1);

  font-weight: 600;

  transition:
    transform 0.2s ease,
    background 0.3s ease;
}

.theme-toggle:active {
  transform: scale(0.96);
}

/* Dark theme */

body.dark-mode {
  background: #17130f;
  color: #f5e9d2;
}

body.dark-mode .app {
  background: transparent;
}

body.dark-mode .chant-card,
body.dark-mode .mantra-card,
body.dark-mode .daily-open-btn {
  background: rgba(45, 36, 28, 0.9);
  color: #f5e9d2;
  border-color: rgba(255, 220, 170, 0.12);
}

body.dark-mode .chant-card h3,
body.dark-mode .mantra-card h3 {
  color: #f5d59a;
}

body.dark-mode .theme-toggle {
  background: #30261d;
  color: #f5d59a;
  border-color: rgba(255, 220, 170, 0.15);
}
/* =========================
   THEME SETTINGS
========================= */

.theme-settings {
  width: min(900px, 100%);
  margin: 25px auto 10px;
  padding: 20px;

  text-align: center;

  background: rgba(255, 255, 255, 0.65);

  border: 1px solid rgba(139, 74, 22, 0.1);
  border-radius: 22px;

  box-shadow:
    0 7px 22px rgba(100, 60, 20, 0.08);
}

.theme-title {
  margin-bottom: 14px;

  color: #7b461c;
  font-weight: 600;
}

.theme-options {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.theme-option {
  padding: 10px 18px;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.8);

  color: #6d421d;

  border: 1px solid rgba(139, 74, 22, 0.12);

  font-weight: 600;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.theme-option:hover {
  transform: translateY(-2px);

  box-shadow:
    0 5px 15px rgba(100, 60, 20, 0.1);
}

.theme-option:active {
  transform: scale(0.96);
}

/* Dark mode appearance */

body.dark-mode .theme-settings {
  background: rgba(45, 36, 28, 0.9);
  border-color: rgba(255, 220, 170, 0.12);
}

body.dark-mode .theme-title {
  color: #f5d59a;
}

body.dark-mode .theme-option {
  background: #30261d;
  color: #f5d59a;
  border-color: rgba(255, 220, 170, 0.15);
}
/* Selected Theme */

.theme-option.theme-selected {
  background: #8b4a16;
  color: white;
  box-shadow:
    0 6px 18px rgba(100, 60, 20, 0.18);

  transform: translateY(-1px);
}

body.dark-mode .theme-option.theme-selected {
  background: #c58b45;
  color: #20160e;
}
/* =========================
   DARK MODE — ALL SCREENS
========================= */

body.dark-mode .jap-screen,
body.dark-mode .daily-screen {
  background:
    radial-gradient(
      circle at top,
      rgba(120, 85, 45, 0.28),
      transparent 45%
    ),
    #17130f;
}

body.dark-mode .back-btn {
  background: rgba(48, 38, 29, 0.9);
  color: #f5d59a;
}

body.dark-mode .jap-image {
  background: rgba(45, 36, 28, 0.9);
}

body.dark-mode .counter-circle {
  background: rgba(45, 36, 28, 0.9);
  color: #f5e9d2;
  border-color: rgba(255, 220, 170, 0.18);
}

body.dark-mode .counter-circle small {
  color: #cdbb9e;
}

body.dark-mode .progress-area {
  color: #f5e9d2;
}

body.dark-mode .jap-button {
  background: #8b5a2b;
  color: #fff4df;
}

body.dark-mode .reset-button {
  background: rgba(48, 38, 29, 0.9);
  color: #f5d59a;
}

body.dark-mode .daily-content h2 {
  color: #f5d59a;
}

body.dark-mode .daily-date {
  color: #cdbb9e;
}

body.dark-mode .daily-total {
  background: rgba(45, 36, 28, 0.9);
  border-color: rgba(255, 220, 170, 0.18);
}

body.dark-mode #dailyTotal {
  color: #f5d59a;
}

body.dark-mode .daily-total small {
  color: #cdbb9e;
}

body.dark-mode .daily-item {
  background: rgba(45, 36, 28, 0.9);
  color: #f5e9d2;
}

body.dark-mode .daily-item strong {
  color: #f5d59a;
}
/* =========================
   SOULBEADS DARK THEME
========================= */

body.dark-mode {
  background: #17130f;
  color: #f5e9d2;
}

/* Home */

body.dark-mode .app {
  background: transparent;
}

body.dark-mode .chant-card,
body.dark-mode .mantra-card {
  background: rgba(45, 36, 28, 0.92);
  color: #f5e9d2;
  border-color: rgba(255, 220, 170, 0.12);
}

body.dark-mode .chant-card h3,
body.dark-mode .mantra-card h3 {
  color: #f5d59a;
}

/* Theme settings */

body.dark-mode .theme-settings {
  background: rgba(45, 36, 28, 0.92);
  color: #f5e9d2;
}

body.dark-mode .theme-title {
  color: #f5d59a;
}

body.dark-mode .theme-option {
  background: #30261d;
  color: #f5d59a;
  border-color: rgba(255, 220, 170, 0.15);
}

body.dark-mode .theme-option.theme-selected {
  background: #c58b45;
  color: #20160e;
}

/* Jap screen */

body.dark-mode .jap-screen {
  background: #17130f;
  color: #f5e9d2;
}

body.dark-mode .jap-screen h2 {
  color: #f5d59a;
}

body.dark-mode .target-section {
  background: rgba(45, 36, 28, 0.92);
  color: #f5e9d2;
}

body.dark-mode .target-title {
  color: #f5d59a;
}

body.dark-mode .target-options button {
  background: #30261d;
  color: #f5d59a;
}

body.dark-mode .counter-circle {
  background: rgba(45, 36, 28, 0.95);
  color: #f5e9d2;
  border-color: rgba(255, 220, 170, 0.2);
}

/* Daily Progress */

body.dark-mode .daily-screen {
  background: #17130f;
  color: #f5e9d2;
}

body.dark-mode .daily-content h2 {
  color: #f5d59a;
}

body.dark-mode .daily-item,
body.dark-mode .daily-total {
  background: rgba(45, 36, 28, 0.92);
  color: #f5e9d2;
}

body.dark-mode #dailyTotal,
body.dark-mode .daily-item strong {
  color: #f5d59a;
}
/* =========================
   JAP COMPLETE MODAL
========================= */

.complete-modal {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(35, 22, 12, 0.45);

  backdrop-filter: blur(8px);

  z-index: 9999;
}

.complete-box {
  width: min(420px, 100%);

  padding: 35px 25px;

  text-align: center;

  background: rgba(255, 248, 235, 0.96);

  border: 1px solid rgba(139, 74, 22, 0.12);

  border-radius: 28px;

  box-shadow:
    0 20px 60px rgba(70, 40, 15, 0.2);

  animation: completeAppear 0.35s ease;
}

.complete-icon {
  font-size: 55px;

  margin-bottom: 12px;
}

.complete-box h2 {
  margin: 0 0 10px;

  color: #7b461c;

  font-size: 28px;
}

.complete-box p {
  margin: 0 auto 25px;

  color: #765b43;

  line-height: 1.6;

  max-width: 320px;
}

.complete-button {
  padding: 12px 24px;

  border: none;

  border-radius: 22px;

  background: #8b5a2b;

  color: #fff8eb;

  font-weight: 600;

  font-size: 15px;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.complete-button:active {
  transform: scale(0.96);
}

@keyframes completeAppear {

  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* Dark mode */

body.dark-mode .complete-box {
  background: rgba(45, 36, 28, 0.97);

  border-color:
    rgba(255, 220, 170, 0.14);
}

body.dark-mode .complete-box h2 {
  color: #f5d59a;
}

body.dark-mode .complete-box p {
  color: #cdbb9e;
}

body.dark-mode .complete-button {
  background: #a87335;
  color: #fff4df;
}
/* =========================
   COUNTER TAP ANIMATION
========================= */

#count {
  display: inline-block;
  transition: transform 0.15s ease;
}

.count-pop {
  animation: countPop 0.2s ease;
}

@keyframes countPop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}
/* =========================
   MALA PROGRESS
========================= */

.mala-progress {
  width: min(900px, 100%);
  margin: 20px auto;
  padding: 18px;

  text-align: center;
}

.mala-beads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;

  max-width: 650px;
  margin: 0 auto;
}

.mala-bead {
  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: rgba(139, 74, 22, 0.16);

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.mala-bead.bead-filled {
  background: #8b5a2b;

  transform: scale(1.15);

  box-shadow:
    0 2px 6px rgba(100, 60, 20, 0.2);
}

.mala-text {
  margin-top: 12px;

  font-size: 14px;
  font-weight: 600;

  color: #7b461c;
}


/* Dark mode */

body.dark-mode .mala-bead {
  background: rgba(255, 220, 170, 0.14);
}

body.dark-mode .mala-bead.bead-filled {
  background: #c58b45;
}

body.dark-mode .mala-text {
  color: #f5d59a;
}


/* Mobile */

@media (max-width: 480px) {

  .mala-progress {
    padding: 12px;
  }

  .mala-beads {
    gap: 5px;
  }

  .mala-bead {
    width: 8px;
    height: 8px;
  }
}
/* =========================
   JAP HISTORY
========================= */

.history-screen {
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;

  background:
    radial-gradient(
      circle at top,
      rgba(255, 230, 190, 0.45),
      transparent 45%
    );
}

.history-content {
  width: min(700px, 100%);
  margin: 30px auto;
  text-align: center;
}

.history-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.history-content h2 {
  margin: 0;

  color: #7b461c;
  font-size: 28px;
}

.history-subtitle {
  margin: 8px 0 25px;
  color: #876b50;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 20px;

  background: rgba(255, 255, 255, 0.75);

  border: 1px solid rgba(139, 74, 22, 0.1);
  border-radius: 18px;

  box-shadow:
    0 5px 18px rgba(100, 60, 20, 0.07);

  text-align: left;
}

.history-item strong {
  color: #7b461c;
}

.history-item span {
  color: #876b50;
  font-weight: 600;
}

.history-empty {
  padding: 25px;

  color: #876b50;

  background: rgba(255, 255, 255, 0.65);
  border-radius: 20px;
}


/* Dark mode */

body.dark-mode .history-screen {
  background:
    radial-gradient(
      circle at top,
      rgba(120, 85, 45, 0.28),
      transparent 45%
    ),
    #17130f;
}

body.dark-mode .history-content h2 {
  color: #f5d59a;
}

body.dark-mode .history-subtitle,
body.dark-mode .history-empty {
  color: #cdbb9e;
}

body.dark-mode .history-item,
body.dark-mode .history-empty {
  background: rgba(45, 36, 28, 0.92);
}

body.dark-mode .history-item strong {
  color: #f5d59a;
}

body.dark-mode .history-item span {
  color: #cdbb9e;
}


/* Mobile */

@media (max-width: 480px) {

  .history-screen {
    padding: 15px;
  }

  .history-item {
    padding: 14px 16px;
  }
}
/* =========================
   HISTORY BUTTON
========================= */

.history-open-btn {
  display: block;

  width: min(700px, 90%);
  margin: 12px auto;

  padding: 13px 20px;

  border: 1px solid rgba(139, 74, 22, 0.12);
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.75);
  color: #6d421d;

  font-size: 15px;
  font-weight: 600;

  cursor: pointer;

  box-shadow:
    0 5px 18px rgba(100, 60, 20, 0.07);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.history-open-btn:hover {
  transform: translateY(-2px);

  box-shadow:
    0 8px 22px rgba(100, 60, 20, 0.1);
}

.history-open-btn:active {
  transform: scale(0.97);
}


/* Dark mode */

body.dark-mode .history-open-btn {
  background: rgba(45, 36, 28, 0.92);

  color: #f5d59a;

  border-color:
    rgba(255, 220, 170, 0.15);
}


/* Mobile */

@media (max-width: 480px) {

  .history-open-btn {
    width: 90%;
    padding: 12px 16px;
  }
}
/* History chant spacing */

.history-chant {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  padding: 8px 0;
}

.history-chant span {
  flex: 1;
  text-align: left;
}

.history-chant strong {
  white-space: nowrap;
  text-align: right;
}
/* =========================
   JAP STATISTICS
========================= */

.statistics-screen {
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;

  background:
    radial-gradient(
      circle at top,
      rgba(255, 230, 190, 0.45),
      transparent 45%
    );
}

.statistics-content {
  width: min(700px, 100%);
  margin: 30px auto;
  text-align: center;
}

.statistics-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.statistics-content h2 {
  margin: 0;

  color: #7b461c;
  font-size: 28px;
}

.statistics-subtitle {
  margin: 8px 0 25px;
  color: #876b50;
}

.stats-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 15px;
}

.stat-card {
  padding: 22px 15px;

  background:
    rgba(255, 255, 255, 0.78);

  border:
    1px solid rgba(139, 74, 22, 0.1);

  border-radius: 22px;

  box-shadow:
    0 8px 24px
    rgba(100, 60, 20, 0.08);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.stat-card:active {
  transform: scale(0.97);
}

.stat-icon {
  font-size: 30px;
  margin-bottom: 8px;
}

.stat-value {
  color: #7b461c;

  font-size: 25px;
  font-weight: 700;

  margin-bottom: 5px;
}

.stat-label {
  color: #876b50;

  font-size: 13px;
  font-weight: 600;
}


/* Dark mode */

body.dark-mode .statistics-screen {
  background:
    radial-gradient(
      circle at top,
      rgba(120, 85, 45, 0.28),
      transparent 45%
    ),
    #17130f;
}

body.dark-mode .statistics-content h2 {
  color: #f5d59a;
}

body.dark-mode .statistics-subtitle {
  color: #cdbb9e;
}

body.dark-mode .stat-card {
  background:
    rgba(45, 36, 28, 0.92);

  border-color:
    rgba(255, 220, 170, 0.14);
}

body.dark-mode .stat-value {
  color: #f5d59a;
}

body.dark-mode .stat-label {
  color: #cdbb9e;
}


/* Mobile */

@media (max-width: 480px) {

  .statistics-screen {
    padding: 15px;
  }

  .stats-grid {
    gap: 12px;
  }

  .stat-card {
    padding: 18px 10px;
  }

  .stat-value {
    font-size: 21px;
  }

  .stat-label {
    font-size: 12px;
  }
}
/* =========================
   STATISTICS BUTTON
========================= */

.stats-open-btn {
  display: block;

  width: min(700px, 90%);
  margin: 12px auto;

  padding: 13px 20px;

  border: 1px solid rgba(139, 74, 22, 0.12);
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.75);
  color: #6d421d;

  font-size: 15px;
  font-weight: 600;

  cursor: pointer;

  box-shadow:
    0 5px 18px rgba(100, 60, 20, 0.07);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.stats-open-btn:hover {
  transform: translateY(-2px);

  box-shadow:
    0 8px 22px rgba(100, 60, 20, 0.1);
}

.stats-open-btn:active {
  transform: scale(0.97);
}


/* Dark mode */

body.dark-mode .stats-open-btn {
  background: rgba(45, 36, 28, 0.92);

  color: #f5d59a;

  border-color:
    rgba(255, 220, 170, 0.15);
}


/* Mobile */

@media (max-width: 480px) {

  .stats-open-btn {
    width: 90%;
    padding: 12px 16px;
  }
}
/* =========================
   JAP STREAK
========================= */

.streak-screen {
  min-height: 100vh;
  padding: 20px;
  box-sizing: border-box;

  background:
    radial-gradient(
      circle at top,
      rgba(255, 230, 190, 0.45),
      transparent 45%
    );
}

.streak-content {
  width: min(700px, 100%);
  margin: 30px auto;
  text-align: center;
}

.streak-icon {
  font-size: 55px;
  margin-bottom: 8px;
}

.streak-content h2 {
  margin: 0;

  color: #7b461c;
  font-size: 28px;
}

.streak-subtitle {
  margin: 8px 0 28px;
  color: #876b50;
}

.streak-cards {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 15px;
}

.streak-card {
  padding: 28px 15px;

  background:
    rgba(255, 255, 255, 0.78);

  border:
    1px solid rgba(139, 74, 22, 0.1);

  border-radius: 24px;

  box-shadow:
    0 8px 24px
    rgba(100, 60, 20, 0.08);
}

.streak-card-icon {
  font-size: 34px;
  margin-bottom: 8px;
}

.streak-value {
  color: #7b461c;

  font-size: 32px;
  font-weight: 700;

  margin-bottom: 5px;
}

.streak-label {
  color: #876b50;

  font-size: 13px;
  font-weight: 600;
}

.streak-note {
  margin-top: 25px;

  color: #876b50;

  font-size: 14px;
}


/* Dark mode */

body.dark-mode .streak-screen {
  background:
    radial-gradient(
      circle at top,
      rgba(120, 85, 45, 0.28),
      transparent 45%
    ),
    #17130f;
}

body.dark-mode .streak-content h2 {
  color: #f5d59a;
}

body.dark-mode .streak-subtitle,
body.dark-mode .streak-note {
  color: #cdbb9e;
}

body.dark-mode .streak-card {
  background:
    rgba(45, 36, 28, 0.92);

  border-color:
    rgba(255, 220, 170, 0.14);
}

body.dark-mode .streak-value {
  color: #f5d59a;
}

body.dark-mode .streak-label {
  color: #cdbb9e;
}


/* Mobile */

@media (max-width: 480px) {

  .streak-screen {
    padding: 15px;
  }

  .streak-cards {
    gap: 12px;
  }

  .streak-card {
    padding: 22px 10px;
  }

  .streak-value {
    font-size: 27px;
  }
}
/* =========================
   STREAK BUTTON
========================= */

.streak-open-btn {
  display: block;

  width: min(700px, 90%);
  margin: 12px auto;

  padding: 13px 20px;

  border: 1px solid rgba(139, 74, 22, 0.12);
  border-radius: 20px;

  background: rgba(255, 255, 255, 0.75);
  color: #6d421d;

  font-size: 15px;
  font-weight: 600;

  cursor: pointer;

  box-shadow:
    0 5px 18px rgba(100, 60, 20, 0.07);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.streak-open-btn:hover {
  transform: translateY(-2px);

  box-shadow:
    0 8px 22px rgba(100, 60, 20, 0.1);
}

.streak-open-btn:active {
  transform: scale(0.97);
}


/* Dark mode */

body.dark-mode .streak-open-btn {
  background: rgba(45, 36, 28, 0.92);

  color: #f5d59a;

  border-color:
    rgba(255, 220, 170, 0.15);
}


/* Mobile */

@media (max-width: 480px) {

  .streak-open-btn {
    width: 90%;
    padding: 12px 16px;
  }
}