/* ==========================================================
   Vedic Maths page — crosswise hero, Trick Visualizer,
   Speed Challenge, Abacus vs Vedic table.
   Shared bits live in course-page.css.
   ========================================================== */

/* ---------- Hero ---------- */
.vm-hero{ width:100%; max-width:500px; display:block; margin:0 auto; overflow:visible; }
.vm-hero .floater{ font-family: var(--font-display); font-weight:800; font-size:26px; fill: rgba(255,255,255,.3); text-anchor:middle; }
.vm-hero .vm-num{ font-family: var(--font-display); font-weight:800; font-size:64px; fill:#fff; text-anchor:middle; }
.vm-hero .vm-op{ font-family: var(--font-display); font-weight:700; font-size:44px; fill: var(--gold); text-anchor:middle; }
.vm-hero .vm-lines line{ stroke: var(--gold); stroke-width:5; stroke-linecap:round; }
.vm-hero .vm-ans{ font-family: var(--font-display); font-weight:800; font-size:60px; fill: var(--gold); text-anchor:middle; }
.vm-hero .vm-note{ font-family: var(--font-display); font-weight:700; font-size:15px; fill:#FBE6D4; text-anchor:middle; }

/* ---------- Trick visualizer ---------- */
.tv-tabs{ display:grid; grid-template-columns: repeat(4, 1fr); gap:.6rem; }
.tv-tab{
  border:2px solid var(--line); background:#fff; border-radius: var(--radius-md); padding:.75rem .6rem; text-align:left;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.tv-tab b{ display:block; font-family: var(--font-display); font-size:1.25rem; color: var(--navy); }
.tv-tab span{ font-size:.78rem; font-weight:600; color: var(--slate); }
.tv-tab:hover{ border-color: var(--coaching-accent); transform: translateY(-2px); }
.tv-tab.is-active{ border-color: var(--coaching-accent); background: rgba(217,114,44,.07); }
.tv-tab.is-active b{ color: var(--coaching-accent); }
.tv-sutra{ font-family: var(--font-accent); font-style:italic; color: var(--gold-deep); font-size:1rem; margin-bottom:1rem; }
.tv-inputs{ display:flex; gap:.6rem; margin-bottom:.4rem; }
.tv-field{ flex:1; }
.tv-field span{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--slate); margin-bottom:.2rem; }
.tv-field .form-control{ font-family: var(--font-display); font-weight:800; font-size:1.3rem; text-align:center; }
.tv-rule{ font-size:.78rem; color: var(--slate); margin-bottom:.9rem; }
.tv-diagram{ width:100%; max-width:260px; display:block; margin:1.2rem auto 0; }
.tv-diagram .dg-d{ font-family: var(--font-display); font-weight:800; font-size:40px; fill: var(--navy); text-anchor:middle; }
.tv-diagram .dg-l{ stroke: var(--line); stroke-width:4; stroke-linecap:round; transition: stroke .3s ease; }
.tv-diagram .dg-l.is-on{ stroke: var(--coaching-accent); stroke-width:5; }
.tv-diagram .dg-l.is-done{ stroke: rgba(217,114,44,.35); }

.tv-question{
  font-family: var(--font-display); font-weight:800; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); color: var(--navy);
  background: var(--paper); border-radius: var(--radius-md); padding:.7rem 1.1rem; margin-bottom:1rem; text-align:center;
}
.tv-question .tv-ans{ color: transparent; background: var(--paper-dim); border-radius:10px; padding:0 .5rem; transition: color .4s ease, background .4s ease; }
.tv-question.is-solved .tv-ans{ color: var(--study-accent); background: rgba(31,122,99,.1); }
.tv-steps{ list-style:none; padding:0; margin:0; }
.tv-steps li{
  display:flex; gap:.8rem; align-items:flex-start; padding:.65rem .8rem; border-radius: var(--radius-sm); margin-bottom:.45rem;
  background:#fff; border:1px solid var(--line); font-size:.95rem; color: var(--ink);
  opacity:0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease;
}
.tv-steps li.is-shown{ opacity:1; transform:none; }
.tv-steps li b{ color: var(--coaching-accent); }
.tv-steps li:last-child.is-shown{ border-color: var(--study-accent); background: rgba(31,122,99,.06); }
.tv-steps li:last-child b{ color: var(--study-accent); }
.tv-n{ flex:none; width:1.6rem; height:1.6rem; border-radius:50%; background: var(--coaching-accent); color:#fff; font-size:.75rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.tv-err{ color:#B8422E !important; border-color:#E8B4A8 !important; }

/* ---------- Speed challenge ---------- */
.sp-stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap:.4rem; }
.sp-stats div{ background: var(--paper); border-radius: var(--radius-sm); padding:.55rem .2rem; text-align:center; }
.sp-stats b{ display:block; font-family: var(--font-display); font-weight:800; font-size:1.35rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.sp-stats span{ font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--slate); }
.sp-stage{ background: var(--navy); border-radius: var(--radius-md); padding:1.4rem; text-align:center; transition: box-shadow .2s ease; }
.sp-card.is-playing .sp-stage{ box-shadow: 0 0 0 4px rgba(217,164,65,.45); }
.sp-card.flash-right .sp-stage{ box-shadow: 0 0 0 6px rgba(79,209,165,.6); }
.sp-card.flash-wrong .sp-stage{ box-shadow: 0 0 0 6px rgba(217,65,44,.6); }
.sp-question{ font-family: var(--font-display); font-weight:800; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); color:#fff; }
.sp-trick{ font-size:.78rem; font-weight:700; color: var(--gold); min-height:1.2em; margin-bottom:.8rem; }
.sp-answer{ display:flex; gap:.5rem; max-width:320px; margin:0 auto; }
.sp-answer .form-control{ font-family: var(--font-display); font-weight:800; font-size:1.3rem; text-align:center; }
.sp-stage .game-msg{ color:#C7CEE2; }
.sp-stage .game-msg.ok{ color:#7FE0BE; }
.sp-stage .game-msg.err{ color:#FFB4A6; }

/* ---------- Abacus vs Vedic ---------- */
.compare-card{ padding:1.2rem; overflow-x:auto; }
.compare-table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:460px; }
.compare-table th{ font-family: var(--font-display); font-size:1rem; color: var(--navy); padding:.6rem .7rem; border-bottom:2px solid var(--line); text-align:left; }
.compare-table th .bi{ color: var(--coaching-accent); }
.compare-table td{ padding:.65rem .7rem; border-bottom:1px solid var(--line); color: var(--ink); vertical-align:top; }
.compare-table td:first-child{ font-weight:700; color: var(--slate); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; width:26%; }
.compare-table tr:last-child td{ border-bottom:none; }

@media (max-width: 767.98px){
  .tv-tabs{ grid-template-columns: 1fr 1fr; }
  .sp-stats{ grid-template-columns: repeat(4, 1fr); }
}