/* ===== THEME VARIABLES ===== */
:root {
  --bg1: #ff0000;
  --bg2: #ff4d00;
  --bg3: #ff7b00;
  --bg4: #ffb300;
  --accent: #ff4d00;
  --accent-dark: #ff0000;
  --text-dark: #2b0000;
  --glow: rgba(255,140,0,0.2);
}

body.theme-ocean {
  --bg1: #03045e;
  --bg2: #0077b6;
  --bg3: #00b4d8;
  --bg4: #90e0ef;
  --accent: #0096c7;
  --accent-dark: #023e8a;
  --text-dark: #001219;
  --glow: rgba(0,180,216,0.2);
}

body.theme-forest {
  --bg1: #1b4332;
  --bg2: #2d6a4f;
  --bg3: #40916c;
  --bg4: #95d5b2;
  --accent: #2a9d8f;
  --accent-dark: #1b4332;
  --text-dark: #081c15;
  --glow: rgba(42,157,143,0.2);
}

body.theme-royal {
  --bg1: #3c096c;
  --bg2: #5a189a;
  --bg3: #7b2cbf;
  --bg4: #c77dff;
  --accent: #6a4c93;
  --accent-dark: #240046;
  --text-dark: #10002b;
  --glow: rgba(106,76,147,0.2);
}

body.theme-pink {
  --bg1: #880e4f;
  --bg2: #c2185b;
  --bg3: #e91e63;
  --bg4: #f8bbd0;
  --accent: #e91e63;
  --accent-dark: #880e4f;
  --text-dark: #4a0e2b;
  --glow: rgba(233,30,99,0.2);
}

/* ===== BASE STYLES ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans Tamil', sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: 0.4s;
}

/* ===== HEADER ===== */
.header {
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
  color: #fff;
  padding: 20px;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
  transition: background 0.4s;
}

/* ===== NAVIGATION ===== */
.nav {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

/* ===== BUTTONS ===== */
.btn {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  transition: 0.3s;
  border: none;
}

.btn:hover {
  transform: scale(1.05);
}

.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== CONTAINER ===== */
.container {
  max-width: 700px;
  margin: auto;
  padding: 15px;
}

/* ===== VERSE CARD ===== */
.verse {
  position: relative;
  background: #ffffff;
  margin: 12px;
  padding: 18px 20px;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  line-height: 1.9;
  font-size: 17px;
  color: #2c2c2c;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: 0.3s;
}

/* Hover effect */
.verse:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

/* Verse number */
.verse span {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 10px;
  border-radius: 50px;
  margin-right: 10px;
  transition: background 0.4s;
}

/* Left theme line */
.verse::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 5px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  transition: background 0.4s;
}