/* Gita Quiz - four option questions built from Gita Setu's own verses */

:root {
  --bg: #0a0a14;
  --panel: #15152a;
  --panel-2: #1c1c36;
  --line: #2a2a4a;
  --text: #eceaf6;
  --muted: #9a9ac0;
  --accent: #5858FD;
  --saffron: #f2851c;
  --teal: #2ec4b6;
  --green: #2ec46b;
  --red: #e23b3b;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { touch-action: manipulation; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

[lang="sa"] {
  font-family: "Nirmala UI", "Noto Sans Devanagari", "Noto Serif Devanagari",
               "Devanagari Sangam MN", "Kohinoor Devanagari", "Mangal", serif;
  font-feature-settings: "kern" 1, "liga" 1;
}

button, kbd, .board, .opt, .lang-opt, summary {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 18px 16px 40px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
  background: rgba(10, 10, 20, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand { margin: 0; font-weight: 700; letter-spacing: 0.5px; font-size: 16px; white-space: nowrap; }
.icon-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; color: var(--muted); text-decoration: none;
}
.icon-back:hover { color: var(--text); background: var(--panel-2); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.hud-btn {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.hud-btn:hover { color: var(--text); border-color: var(--accent); }
.hud-btn[aria-pressed="true"] { color: #ff8c8c; border-color: rgba(255, 140, 140, 0.35); }
.hud-btn.icon-only { width: 40px; padding: 0; }
.hud-btn.icon-only[aria-expanded="true"] { color: var(--saffron); border-color: var(--saffron); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.beta {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid rgba(242, 133, 28, 0.4);
  border-radius: 10px;
  background: rgba(242, 133, 28, 0.08);
  color: #ffd9a8;
  font-size: 13px;
  line-height: 1.55;
}

.intro-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(120% 130% at 8% 0%, rgba(46, 196, 182, 0.16), rgba(0, 0, 0, 0) 60%),
    radial-gradient(120% 130% at 95% 100%, rgba(88, 88, 253, 0.18), rgba(0, 0, 0, 0) 58%),
    var(--panel);
}
.kicker { margin: 0 0 6px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); }
h1 { margin: 0 0 10px; font-size: 28px; letter-spacing: -0.6px; }
.lede { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 60ch; }

.field-label { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.lang-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.lang-opt {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.lang-opt.is-on { border-color: var(--accent); background: rgba(88, 88, 253, 0.18); }
.lang-opt:hover { border-color: var(--accent); }

.lang-pick-compact { display: flex; gap: 4px; margin: 0; }
.lang-opt-compact {
  min-height: 40px;
  min-width: 36px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.daily-card {
  margin: 4px 0 20px;
  padding: 14px 16px;
  border: 1px solid rgba(46, 196, 182, 0.4);
  border-radius: 12px;
  background: rgba(46, 196, 182, 0.08);
}
.daily-label { margin: 0 0 4px; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--teal); font-weight: 700; }
.daily-note { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; }
.daily-card .actions { margin-top: 0; }

.best-line { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; }

.btn {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary { border-color: var(--accent); background: linear-gradient(135deg, var(--accent), #8a5cff); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.btn-icon { display: inline-flex; align-items: center; gap: 7px; }
.btn-icon svg { flex: 0 0 auto; }

.play-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: 13.5px; color: var(--muted); }

.verse-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  margin-bottom: 16px;
}
.verse-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.verse-title { margin: 0; font-size: 13px; color: var(--teal); letter-spacing: 0.3px; }
.btn-share-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: -6px -6px 0 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.btn-share-icon:hover { color: var(--text); border-color: var(--accent); }
.verse-line { margin: 0 0 6px; font-size: 20px; line-height: 1.6; color: var(--text); }
.verse-line:last-child { margin-bottom: 0; }
.question-intro { margin: 0 0 12px; color: var(--muted); font-size: 14px; }

.options { display: grid; gap: 10px; margin: 0 0 16px; }
.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.opt:hover:not(:disabled) { border-color: var(--accent); }
.opt:disabled { cursor: default; }
.opt-mark { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); }
.opt.is-right { border-color: var(--green); background: rgba(46, 196, 107, 0.12); }
.opt.is-right .opt-mark { border-color: var(--green); background: var(--green); }
.opt.is-wrong { border-color: var(--red); background: rgba(226, 59, 59, 0.12); }
.opt.is-wrong .opt-mark { border-color: var(--red); background: var(--red); }

.explain {
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
}
.explain.is-right { border: 1px solid rgba(46, 196, 107, 0.4); background: rgba(46, 196, 107, 0.08); }
.explain.is-wrong { border: 1px solid rgba(226, 59, 59, 0.4); background: rgba(226, 59, 59, 0.08); }
.explain h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.3px; color: var(--text); }
.explain p { margin: 0 0 8px; color: var(--text); }
.explain p:last-child { margin-bottom: 0; }
.apply-line { color: var(--muted); font-size: 13.5px; }
.apply-line::before { content: "In daily life: "; color: var(--teal); font-weight: 600; }

.done-card { text-align: center; padding: 28px 18px; }
.done-score { margin: 0 0 6px; font-size: 40px; font-weight: 800; }
.done-stars { margin: 0 0 6px; color: var(--saffron); font-size: 16px; font-weight: 600; }
.done-best { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; }

.rules { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.rules h2 { font-size: 16px; margin: 0 0 8px; }
.rules p { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.rules kbd {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin: 0 1px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 12px; text-align: center;
}
body.has-touch [data-input="key"] { display: none !important; }
[data-input="touch"] { display: none; }
body.has-touch [data-input="touch"] { display: block !important; }

.foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.foot p { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.foot a { color: var(--teal); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

@media (pointer: coarse) {
  .btn, .hud-btn, .lang-opt, .opt { min-height: 44px; }
  .btn-share-icon { width: 40px; height: 40px; }
}

/* THEME START - generated by tools/gen-theme.js, do not edit here */
/* Light theme. Every game was drawn dark first, and every one of them names
   its colours through the same handful of variables, so the light theme is
   mostly those variables redefined. What follows the variables are the few
   surfaces that carry a colour of their own. A game's own light fixes sit
   below the END marker, in that game's stylesheet. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4f8;
  --panel: #ffffff;
  --panel-2: #eceef6;
  --line: #d6d8e6;
  --text: #1c1c2b;
  --muted: #585a74;
  --accent: #4a4ae8;
  --amber: #b86a00;
  --teal: #0b8a80;
  --saffron: #c25f00;
  --green: #17864a;
  --red: #c42b2b;
  --rose: #c9365a;
}
:root[data-theme="light"] body { background: var(--bg); color: var(--text); }
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .hud { background: rgba(255, 255, 255, 0.94); }
:root[data-theme="light"] .hud-btn[aria-pressed="true"] { color: #b3261e; border-color: rgba(179, 38, 30, 0.35); }
:root[data-theme="light"] .overlay { background: rgba(28, 28, 43, 0.45); }
:root[data-theme="light"] .modal,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .intro-card,
:root[data-theme="light"] .done-card { background: var(--panel); box-shadow: 0 18px 50px rgba(28, 28, 60, 0.14); }
:root[data-theme="light"] .btn-primary { color: #fff; }
:root[data-theme="light"] kbd { background: var(--panel-2); color: var(--text); border-color: var(--line); }
:root[data-theme="light"] .beta { background: #fff4e5; border-color: #f0c48a; color: #5c3a0b; }
:root[data-theme="light"] .beta a { color: #8a4b00; }
:root[data-theme="light"] .feedback.is-right { color: #146b3a; }
:root[data-theme="light"] .feedback.is-wrong { color: #a4231f; }
:root[data-theme="light"] .foot-bar a,
:root[data-theme="light"] .cross a { color: #0b7a71; }
:root[data-theme="light"] .foot-steps a.is-here .step-n { color: #fff; }

/* The toggle itself: a sun in the dark, a moon in the light, so it always
   shows what pressing it will do - the icon alone says that, so the label
   is announced to a screen reader (title/aria-label, set in the script
   below) rather than spelled out next to it on every single page. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.theme-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; }
.theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: inline; }
.theme-toggle .theme-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The Play button. Every game's way into play is the same button: the widest,
   tallest thing on its start screen, with a play triangle, so nobody has to
   work out which of the options starts the game. It lives in this block
   because this block already goes into every game. */
.btn-play:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 54px !important;
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 22px rgba(74, 74, 232, 0.35);
}
/* On a Sanskrit start screen it is the whole width of the card. */
.intro-card .btn-play:not([hidden]) { display: flex !important; width: 100%; margin-top: 6px; }
.btn-play::before {
  content: "";
  width: 14px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.btn-play:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .btn-play { animation: btn-play-glow 2.4s ease-in-out infinite; }
  .btn-play:hover, .btn-play:focus-visible { animation: none; }
}
@keyframes btn-play-glow {
  0%, 100% { box-shadow: 0 8px 22px rgba(74, 74, 232, 0.35); }
  50% { box-shadow: 0 8px 30px rgba(74, 74, 232, 0.6); }
}
/* THEME END */