/* Vakya - build simple Sanskrit sentences */

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

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

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;
}

/* The device's own Devanagari face. Same reasoning as the other two Sanskrit
   games: every platform ships one that shapes correctly, and a webfont for this
   script is a real download on a phone connection. */
[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;
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  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);
}
.brand { margin: 0; font-weight: 700; letter-spacing: 0.5px; }
.back { color: var(--muted); text-decoration: none; font-size: 13.5px; }
.back::before { content: "< "; }
.back:hover { color: var(--text); }
.hud-btn {
  padding: 8px 14px;
  min-height: 40px;
  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); }

.intro-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(120% 130% at 8% 0%, rgba(168, 119, 255, 0.18), rgba(0, 0, 0, 0) 60%),
    radial-gradient(120% 130% at 95% 100%, rgba(242, 133, 28, 0.14), rgba(0, 0, 0, 0) 58%),
    var(--panel);
}
.kicker {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--violet);
}
h1 { margin: 0 0 10px; font-size: 30px; letter-spacing: -0.7px; }
.lede { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 62ch; }

.beta {
  margin: 18px 0 10px;
  padding: 12px 14px;
  border: 1px solid rgba(242, 133, 28, 0.4);
  border-radius: 12px;
  background: rgba(242, 133, 28, 0.08);
  color: #f6d5b4;
  font-size: 13px;
  line-height: 1.6;
}
.beta a { color: #ffd7ae; }
.cross { margin: 0 0 6px; color: var(--muted); font-size: 13.5px; }
.cross a { color: var(--violet); }

.section-title {
  margin: 26px 0 12px;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Lessons */
.lessons { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lesson {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  flex-wrap: wrap;
}
.lesson.is-complete { border-color: rgba(46, 196, 107, 0.45); }
.lesson-copy { flex: 1 1 240px; min-width: 0; }
.lesson-copy h3 { margin: 0 0 3px; font-size: 16px; }
.lesson-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.lesson-count { margin-top: 6px !important; font-size: 12px !important; }

.btn {
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #4646e0; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); }
.btn:disabled { opacity: 0.45; cursor: default; }

/* The little primer under the lessons */
.primer {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
}
.primer h2 { margin: 0 0 10px; font-size: 15px; }
.primer p { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.primer span[lang="sa"] { color: var(--text); font-size: 19px; }
.primer-eg { margin-bottom: 0 !important; }
.primer-eg span[lang="sa"] { font-size: 24px; }
.primer-eg em { font-style: normal; }

/* Play */
.round-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet), var(--accent));
  transition: width .3s ease;
}
.round-bar { flex: 1 1 auto; }
.round-count { margin: 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

.english {
  margin: 0 0 18px;
  text-align: center;
  font-size: clamp(19px, 5vw, 24px);
  line-height: 1.4;
}

/* Where the sentence is assembled. It is a row, not a set of fixed boxes: a
   two word sentence and a three word one both live here, and an empty box for a
   word that is not needed would be a hint the game should not give. */
.slots {
  min-height: 84px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: rgba(8, 8, 20, 0.5);
}
.slots-empty { margin: 0; color: var(--muted); font-size: 13.5px; text-align: center; }
.slot {
  padding: 10px 16px;
  min-height: 52px;
  border: 1px solid var(--violet);
  border-radius: 12px;
  background: rgba(168, 119, 255, 0.14);
  color: var(--text);
  font: inherit;
  font-size: 25px;
  line-height: 1.25;
  cursor: pointer;
}

.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.tile {
  padding: 12px 18px;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 25px;
  line-height: 1.25;
  cursor: pointer;
}
.tile:hover:not(:disabled) { border-color: var(--accent); }
.tile.is-used { opacity: 0.28; cursor: default; }

.play-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.feedback {
  margin: 16px auto 0;
  max-width: 60ch;
  min-height: 66px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
}
.feedback.is-right { color: #8ff0b5; }
.feedback.is-wrong { color: #ffc7c7; }

/* Result */
.done-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  text-align: center;
}
.done-card h2 { margin: 0 0 6px; font-size: 22px; }
.done-score {
  margin: 0 0 8px;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.view-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.done-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

.foot {
  padding: 22px 16px max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.foot a { color: var(--muted); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 520px) {
  h1 { font-size: 24px; }
  .lesson button { width: 100%; }
  .tile, .slot { font-size: 22px; padding: 10px 14px; }
}

/* ===================================================================
   Touch targets, 12/09/2026.

   A hit test across all seven games found the same defect on every one
   of them: the chrome and the option controls were sized for a mouse.
   The way back to the games list - the single most used control on a
   game page - was 17 to 38px tall depending on the game, the option
   buttons were 34 to 36px, and links inside a sentence were 17px. The
   mark is 44px, and a phone is the main way these are played.

   Gated on a coarse pointer so a desktop keeps its compact chrome
   exactly as it was: this is a phone fix, not a redesign.
   =================================================================== */
@media (pointer: coarse) {

  /* The way out. It is the control a lost player reaches for, so it is
     the last one that should be hard to hit. */
  .back, .link-back, .hud-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px 0 6px;
    margin-left: -6px;
    border-radius: 10px;
  }
  .back:active, .link-back:active { background: rgba(255, 255, 255, 0.06); }

  /* Option rows: level, difficulty, traffic, which mark you play. */
  .segmented button { min-height: 44px; }

  /* Everything already shaped like a button, brought up to the mark. */
  .hud-btn, .ghost-btn, .icon-btn, .btn, .tbtn { min-height: 44px; }
  .icon-btn { min-width: 44px; }

  /* A link inside a sentence cannot be 44px without wrecking the line, so
     the line is opened up instead and the link padded into it. 17px to
     33px is the difference between a miss and a hit. */
  .foot p a, .beta a, .cross a, .intro a, .note a, .tip a {
    display: inline-block;
    padding: 8px 0;
  }
  .foot p, .beta, .cross { line-height: 2.05; }

  /* A disclosure triangle is a control too. */
  summary { min-height: 44px; }
}

/* ------------------------------------------- the course, in the footer
   Every Sanskrit page carries all three games and says which one the reader
   is on. It used to be one sentence with three links threaded through it:
   the order was invisible and each link was a 17px tap target. */
.foot-line { margin: 0 0 12px; }
.foot-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.foot-steps a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
}
.foot-steps a:hover { border-color: var(--teal, #2ec4b6); }
.foot-steps a:focus-visible { outline: 2px solid var(--teal, #2ec4b6); outline-offset: 2px; }
.foot-steps em { font-style: normal; color: var(--muted); }
.step-n {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
/* The page you are already on is a label, not a link you want to take. */
.foot-steps a.is-here {
  border-color: var(--teal, #2ec4b6);
  background: rgba(46, 196, 182, 0.1);
}
.foot-steps a.is-here .step-n { background: var(--teal, #2ec4b6); color: #08131a; }

/* The same bar the hub and milaojobs.tsblack.in carry: who owns the site, and
   who built it. Sits under the course row so every page ends the same way. */
.foot-bar {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.foot-bar p { margin: 0; }
.foot-bar a { color: var(--teal, #2ec4b6); text-decoration: none; }
.foot-bar a:hover { text-decoration: underline; }
.foot-bar a:focus-visible { outline: 2px solid var(--teal, #2ec4b6); outline-offset: 2px; }

@media (min-width: 700px) {
  .foot-bar { flex-direction: row; justify-content: center; gap: 6px 18px; }
}

/* Those two are links inside a sentence, so they get the same treatment as the
   rest of the prose links: a line opened up and the link padded into it. */
@media (pointer: coarse) {
  .foot-bar { line-height: 2.05; }
  .foot-bar a { display: inline-block; padding: 8px 0; }
}


/* Controls are controls, not text: a thumb held on one must not raise a
   selection or an iOS copy callout. Every game here carries the same list, and
   tools/verify.js fails if one of them loses a line of it. Prose is left out on
   purpose - One Over's share card is a textarea a player copies from - and so
   is any text input, which has to stay selectable to be usable. */
button, kbd, canvas, summary, label,
.tbtn, .tbtn-stack, .touch, .touch-left, .touch-right, .touch-row, .touch-pad,
.zone, .stick, .bomb-btn, .board, .tiles, .swatches,
.hud, .hud-btn, .hud-btns, .hud-stats, .chips, .topbar, .topbar-actions,
.segmented, .more-sheet,
a.hud-back, a.icon-back, a.link-back, a.btn,
[role="button"], [role="radio"], [role="gridcell"], [role="checkbox"], [role="switch"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* While a run is on, the page is the game. */
body.is-playing .foot { display: none !important; }

/* In fullscreen the game is the only thing on the screen. The two prefixes
   cannot share a rule: one selector a browser does not know invalidates the
   whole list, so they are written out separately. */
:fullscreen .foot { display: none !important; }
:-webkit-full-screen .foot { display: none !important; }

/* One more button in the bar, so the bar is allowed to wrap rather than push
   its last control off a narrow screen. */
.topbar { flex-wrap: wrap; }
.topbar-actions { flex-wrap: wrap; }

/* ===================================================================
   The way out is one icon button, the same in every game - 14/09/2026.

   It used to be a text link reading "All games" in six games, "Home"
   in Race Dash, each at its own size and with a "< " glued on in CSS.
   A chevron into a line reads as back at any size, costs no width on a
   narrow HUD, and is the same shape on all eight pages.

   It stays a link, not a button, so middle click and open in a new tab
   behave. The label is still in the markup for a screen reader and as
   the tooltip, so nothing is lost by dropping the visible words.
   =================================================================== */
.icon-back {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  opacity: 0.82;
  text-decoration: none;
}
.icon-back:hover { opacity: 1; background: rgba(255, 255, 255, 0.10); }
.icon-back:active { background: rgba(255, 255, 255, 0.16); }
.icon-back svg { display: block; }
/* The old text link glued its arrow on with a pseudo element. */
.icon-back::before, .icon-back::after { content: none !important; }

/* Its own copy of the screen reader label, so the icon carries a name in
   every game whatever that game calls its hidden text class. */
.icon-back .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (pointer: coarse) {
  .icon-back { width: 44px; height: 44px; padding: 0; margin: 0; }
}




/* ===================================================================
   The pictures

   Every word is drawn as well as written. The art comes from the
   generated block at the foot of data.js; see tools/icons.js for why
   it is a copy rather than a shared file.

   An emblem is drawn differently from a picture, on purpose. Ten of
   these words are abstract and there is no honest picture of any of
   them, so they get a ringed, dimmer mark and the word list says
   "emblem, not a picture" beside it. Letting a beginner read a drawn
   balance beam as the meaning of satyam is the exact failure the beta
   notice on this game exists to prevent.
   =================================================================== */
.pic {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}
.pic svg { width: 32px; height: 32px; display: block; }
.pic.is-emblem {
  border: 1px dashed rgba(255, 209, 102, 0.55);
  background: rgba(255, 209, 102, 0.07);
}
.pic.is-emblem svg { opacity: 0.85; }
.pic-lg { width: 64px; height: 64px; border-radius: 14px; }
.pic-lg svg { width: 52px; height: 52px; }

/* The sentence asked for, as pictures: who, what it is done to, and the
   doing. It is the meaning that is drawn, never the Sanskrit, so it gives
   the answer away no more than the English line above it does. */
.meaning {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}
.mean-pic { display: grid; justify-items: center; gap: 4px; }
.mean-pic .pic { width: 52px; height: 52px; border-radius: 12px; }
.mean-pic .pic svg { width: 42px; height: 42px; }
.mean-pic em { font-style: normal; color: var(--muted); font-size: 11.5px; }

/* ===================================================================
   The stage: the sentence that was built, acted out with the icons.
   Every act runs 2.6s, which is STAGE_MS in game.js. The icons move
   by CSS transform on a group whose position is set by the nested
   svg's own x and y, because a CSS transform replaces a transform
   attribute rather than adding to it.
   =================================================================== */
.stage {
  --stage-bg: #1a1636;
  --stage-ground: #2f6b4f;
  margin: 4px 0 12px;
}
.stage svg { display: block; width: 100%; max-width: 480px; margin: 0 auto; border-radius: 14px; }
.stage g { transform-box: fill-box; transform-origin: 50% 100%; }
.stage-cap { margin: 8px 0 0; text-align: center; font-size: 14px; font-weight: 600; }
.stage-cap.is-right { color: #57d77f; }
.stage-cap.is-wrong { color: #ffb4a8; }

.act-consume .st-thing { animation: st-consume 2.6s ease-in-out both; }
.act-consume .st-actor { animation: st-munch 2.6s ease-in-out both; }
.act-see .st-line { animation: st-look 2.6s ease-out both; }
.act-see .st-actor { animation: st-lean 2.6s ease-in-out both; }
.act-hold .st-thing { animation: st-hold 2.6s ease-in-out both; }
.act-carry .st-thing { animation: st-carry-thing 2.6s ease-in-out both; }
.act-carry .st-actor { animation: st-carry 2.6s ease-in-out both; }
.act-go .st-actor { animation: st-go 2.6s ease-in-out both; }
.act-run .st-actor { animation: st-run 2.6s ease-in both; }
.act-stand .st-actor { animation: st-stand 2.6s ease-in-out both; }
.act-laugh .st-actor { animation: st-laugh 2.6s ease-in-out both; }
.act-speak .st-bubble { animation: st-pop 2.6s ease-out both; transform-origin: 20% 100%; }
.act-speak .st-actor { animation: st-lean 2.6s ease-in-out both; }
.act-confused .st-actor, .act-confused .st-thing { animation: st-shrug 2.6s ease-in-out both; }
.act-confused .st-q { animation: st-pop 2.6s ease-out both; transform-origin: 50% 50%; }

@keyframes st-consume {
  0%, 20% { transform: translate(0, 0) scale(1); opacity: 1; }
  70% { transform: translate(-128px, -10px) scale(0.35); opacity: 1; }
  82%, 100% { transform: translate(-138px, -12px) scale(0.05); opacity: 0; }
}
@keyframes st-munch {
  0%, 60% { transform: scale(1); }
  68% { transform: scale(1.08, 0.94); } 76% { transform: scale(0.96, 1.05); }
  84% { transform: scale(1.06, 0.95); } 100% { transform: scale(1); }
}
@keyframes st-look {
  0%, 15% { stroke-dashoffset: 120; opacity: 0; }
  30% { opacity: 1; }
  70%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes st-lean {
  0%, 15% { transform: rotate(0); } 35%, 80% { transform: rotate(6deg); } 100% { transform: rotate(0); }
}
@keyframes st-hold {
  0%, 15% { transform: translate(0, 0); }
  50%, 85% { transform: translate(-96px, -26px) rotate(-6deg); }
  65% { transform: translate(-96px, -30px) rotate(6deg); }
  100% { transform: translate(-96px, -26px) rotate(0); }
}
@keyframes st-carry-thing {
  0%, 15% { transform: translate(0, 0) scale(1); }
  45% { transform: translate(-150px, -54px) scale(0.6); }
  100% { transform: translate(-40px, -54px) scale(0.6); }
}
@keyframes st-carry {
  0%, 45% { transform: translateX(0); }
  100% { transform: translateX(110px); }
}
@keyframes st-go {
  0%, 10% { transform: translateX(0); }
  25% { transform: translate(28px, -6px); } 40% { transform: translate(56px, 0); }
  55% { transform: translate(84px, -6px); } 70%, 100% { transform: translate(112px, 0); }
}
@keyframes st-run {
  0%, 10% { transform: translateX(0); opacity: 1; }
  85% { transform: translateX(260px); opacity: 1; }
  100% { transform: translateX(290px); opacity: 0; }
}
@keyframes st-stand {
  0%, 15% { transform: scale(1, 0.8); } 45% { transform: scale(1, 1.1); } 60%, 100% { transform: scale(1); }
}
@keyframes st-laugh {
  0%, 10%, 100% { transform: rotate(0); }
  20%, 40%, 60%, 80% { transform: rotate(-7deg) translateY(-3px); }
  30%, 50%, 70% { transform: rotate(7deg) translateY(-3px); }
}
@keyframes st-pop {
  0%, 15% { transform: scale(0); opacity: 0; }
  35% { transform: scale(1.15); opacity: 1; }
  45%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes st-shrug {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-6px); }
  30%, 60%, 90% { transform: translateX(6px); }
}

/* 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 */

/* COMPACT PANELS (13/10/2026): start, pause and result panels use less room. Paddings and
   type only; buttons and their 12px spacing are left to the rules above. */
.overlay .modal-head, .overlay .panel-head, .overlay .m-head { padding-top: 10px; padding-bottom: 6px; }
.overlay .modal-head h1, .overlay .panel-head h1 { font-size: 20px; line-height: 1.15; }
.overlay .modal-head h2, .overlay .panel-head h2, .overlay .m-head h2 { font-size: 16px; }
.overlay .modal-body, .overlay .panel-body, .overlay .m-body { padding-top: 4px; padding-bottom: 10px; }
.overlay .modal-body p, .overlay .panel-body p, .overlay .m-body p { margin-bottom: 8px; font-size: 13.5px; line-height: 1.45; }
.overlay .modal-body h2, .overlay .panel-body h2, .overlay .modal-body h3, .overlay .panel-body h3 { margin-top: 10px; margin-bottom: 6px; }
.overlay .modal-foot, .overlay .panel-foot, .overlay .m-foot { padding-top: 8px; padding-bottom: 8px; }

/* A double tap must never zoom the page: manipulation allows scrolling and
   pinching but not the double tap zoom. On html it covers every element. */
html { touch-action: manipulation; }