/* TypeFlowUltra — exam simulator (exam-format typing test engine)
   tf-content.css ke upar lagti hai. Design tokens wahin se aate hain. */

.exam-wrap{margin:2rem 0 2.5rem}

/* config bar */
.ex-cfg{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:flex-end;
  background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1rem 1.1rem;margin-bottom:1rem}
.ex-field{display:flex;flex-direction:column;gap:.35rem}
.ex-field>span{font:700 .68rem/1 'JetBrains Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.ex-seg{display:flex;background:#0a1226;border:1px solid var(--line);border-radius:.6rem;padding:.2rem;gap:.2rem}
.ex-seg button{appearance:none;background:transparent;border:0;cursor:pointer;color:var(--ink-2);
  font:700 .84rem/1 'Plus Jakarta Sans',sans-serif;padding:.45rem .8rem;border-radius:.45rem;
  transition:background .15s,color .15s}
.ex-seg button:hover{color:#fff}
.ex-seg button[aria-pressed="true"]{background:var(--sky);color:#031326}
.ex-seg button:disabled{opacity:.35;cursor:not-allowed}
.ex-cfg .ex-spacer{margin-left:auto}
.ex-note{font-size:.82rem;color:var(--ink-3);max-width:34ch;line-height:1.5}

/* hud */
.ex-hud{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));gap:.6rem;margin-bottom:.9rem}
.ex-stat{background:#0a1226;border:1px solid var(--line);border-radius:.8rem;padding:.65rem .8rem}
.ex-stat b{display:block;font:800 1.35rem/1.15 'JetBrains Mono',monospace;color:#fff}
.ex-stat span{font:600 .66rem/1.3 'JetBrains Mono',monospace;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.ex-stat.is-time b{color:var(--sky-2)}
.ex-stat.is-low b{color:var(--amber)}

/* passage */
.ex-passage{background:#070e1e;border:1px solid var(--line);border-radius:1rem;
  padding:1.15rem 1.25rem;max-height:17rem;overflow-y:auto;font-size:1.12rem;line-height:2.05;
  letter-spacing:.005em;scroll-behavior:smooth}
.ex-passage.is-hi{font-family:'Noto Sans Devanagari','Plus Jakarta Sans',sans-serif;line-height:2.3}
.ex-passage span{white-space:pre-wrap}
.ex-passage .ok{color:#7ee3a7}
.ex-passage .bad{color:#ff8f9b;background:rgba(255,80,100,.14);border-radius:.15rem}
.ex-passage .rest{color:var(--ink-3)}
.ex-passage .cur{background:rgba(56,189,248,.28);border-radius:.15rem;
  box-shadow:inset 2px 0 0 var(--sky)}

/* input */
.ex-input{width:100%;margin-top:.9rem;min-height:9rem;resize:vertical;
  background:#0a1226;border:1px solid var(--line);border-radius:1rem;color:var(--ink);
  padding:1rem 1.15rem;font:400 1.08rem/1.95 'Plus Jakarta Sans',sans-serif}
.ex-input.is-hi{font-family:'Noto Sans Devanagari','Plus Jakarta Sans',sans-serif}
.ex-input:focus{outline:0;border-color:var(--sky)}
.ex-input:disabled{opacity:.55}
.ex-input::placeholder{color:#5a6b8c}

.ex-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem;align-items:center}
.ex-btn{appearance:none;cursor:pointer;border:1px solid var(--line);background:#101c33;color:#fff;
  font:800 .9rem/1 'Plus Jakarta Sans',sans-serif;padding:.75rem 1.25rem;border-radius:.7rem;
  transition:border-color .15s,transform .15s,background .15s}
.ex-btn:hover{border-color:var(--sky);transform:translateY(-1px)}
.ex-btn.primary{background:var(--sky);border-color:var(--sky);color:#031326}
.ex-btn.primary:hover{background:var(--sky-2)}
.ex-hint{font-size:.84rem;color:var(--ink-3);margin-left:auto}

/* result */
.ex-result{margin-top:1.1rem;border:1px solid var(--line);border-radius:1rem;overflow:hidden}
.ex-verdict{padding:1.1rem 1.25rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline}
.ex-verdict b{font:800 1.5rem/1.1 'Plus Jakarta Sans',sans-serif}
.ex-verdict span{color:var(--ink-2);font-size:.95rem}
.ex-result.pass .ex-verdict{background:rgba(52,211,153,.12);border-bottom:1px solid rgba(52,211,153,.3)}
.ex-result.pass .ex-verdict b{color:#5eead4}
.ex-result.fail .ex-verdict{background:rgba(248,113,113,.12);border-bottom:1px solid rgba(248,113,113,.3)}
.ex-result.fail .ex-verdict b{color:#fca5a5}
.ex-rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1px;background:var(--line)}
.ex-rgrid div{background:#0a1226;padding:.85rem 1rem}
.ex-rgrid b{display:block;font:800 1.2rem/1.2 'JetBrains Mono',monospace;color:#fff}
.ex-rgrid span{font:600 .66rem/1.3 'JetBrains Mono',monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.ex-math{padding:1rem 1.25rem;background:#070e1e;border-top:1px solid var(--line);
  font-size:.92rem;color:var(--ink-2)}
.ex-math code{font:600 .88rem/1.8 'JetBrains Mono',monospace;color:var(--sky-2);
  display:block;white-space:pre-wrap}

/* attempt history */
.ex-hist{margin-top:1.2rem;font-size:.9rem;color:var(--ink-3)}
.ex-hist table{min-width:26rem}

/* on-screen hindi key helper */
.ex-kbd{margin-top:.9rem;background:#070e1e;border:1px solid var(--line);border-radius:1rem;padding:.9rem 1rem}
.ex-kbd-rows{display:flex;flex-direction:column;gap:.35rem;overflow-x:auto}
.ex-krow{display:flex;gap:.3rem}
.ex-key{flex:none;min-width:2.45rem;padding:.3rem .25rem;border:1px solid var(--line);
  border-radius:.4rem;background:#101c33;text-align:center;line-height:1.25}
.ex-key i{display:block;font:600 .6rem/1 'JetBrains Mono',monospace;color:var(--ink-3);font-style:normal}
.ex-key em{display:block;font:600 .95rem/1.25 'Noto Sans Devanagari',sans-serif;color:#fff;font-style:normal}
.ex-key em small{display:block;font-size:.72rem;color:var(--sky-2)}
.ex-key.live{border-color:var(--sky);background:#13284a}

/* ad slots — sirf tab dikhte hain jab publisher id set ho */
.tf-ad{margin:2rem 0;min-height:0}
.tf-ad:empty{display:none}
.tf-ad-label{font:600 .62rem/1 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#4a5878;margin-bottom:.4rem}

@media (max-width:40rem){
  .ex-passage{font-size:1.04rem;max-height:14rem;padding:1rem}
  .ex-input{font-size:1.02rem;min-height:8rem}
  .ex-stat b{font-size:1.15rem}
  .ex-hint{margin-left:0;flex-basis:100%}
}

/* backspace blocked feedback */
@keyframes ex-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ex-input.shake{animation:ex-shake .15s ease;border-color:#f87171}

/* ============================================================
   v6.1 — shiny, clickable buttons (glossy + 3D + shine sweep)
   ============================================================ */
.ex-btn{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#1e2d4d 0%,#142038 55%,#0f1a2f 100%);
  border:1px solid rgba(125,211,252,.28);color:#eaf2ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 0 #070d1b,0 8px 18px rgba(0,0,0,.35);
  transition:transform .12s ease,box-shadow .12s ease,border-color .15s,filter .15s;
  -webkit-tap-highlight-color:transparent;user-select:none}
.ex-btn::before{content:"";position:absolute;inset:0 0 50% 0;border-radius:inherit;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));pointer-events:none}
.ex-btn::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-20deg);pointer-events:none;transition:none}
.ex-btn:hover{border-color:rgba(125,211,252,.7);transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 5px 0 #070d1b,0 14px 26px rgba(0,0,0,.42)}
.ex-btn:hover::after{left:130%;transition:left .65s ease}
.ex-btn:active{transform:translateY(2px);filter:brightness(.97);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 #070d1b,0 4px 10px rgba(0,0,0,.3)}
.ex-btn:focus-visible{outline:2px solid #7dd3fc;outline-offset:3px}
.ex-btn:disabled{cursor:not-allowed;filter:saturate(.4) brightness(.8);transform:none}
.ex-btn:disabled::after{display:none}

.ex-btn.primary{color:#04172c;border-color:#7dd3fc;
  background:linear-gradient(180deg,#8be0ff 0%,#38bdf8 48%,#0ea5e9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 0 #0369a1,0 10px 24px rgba(14,165,233,.38)}
.ex-btn.primary:hover{background:linear-gradient(180deg,#a5e8ff 0%,#4cc6fb 48%,#0ea5e9 100%);border-color:#bae6fd;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 5px 0 #0369a1,0 16px 32px rgba(14,165,233,.5)}
.ex-btn.primary:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 0 #0369a1,0 5px 12px rgba(14,165,233,.35)}
.ex-btn.primary:not(:disabled){animation:ex-pulse 2.6s ease-in-out infinite}
@keyframes ex-pulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 0 #0369a1,0 10px 24px rgba(14,165,233,.3)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 3px 0 #0369a1,0 10px 30px rgba(14,165,233,.6)}}
.ex-btn.primary:hover,.ex-btn.primary:active{animation:none}
.ex-btn.success{color:#022c1d;border-color:#6ee7b7;
  background:linear-gradient(180deg,#86efac 0%,#34d399 50%,#10b981 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 0 #047857,0 10px 22px rgba(16,185,129,.3)}
.ex-btn.success:hover{border-color:#a7f3d0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 5px 0 #047857,0 16px 30px rgba(16,185,129,.42)}
.ex-btn.success:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 0 #047857,0 4px 10px rgba(16,185,129,.3)}
.ex-btn.violet{border-color:rgba(196,181,253,.45);color:#ede9fe;
  background:linear-gradient(180deg,#3b2a6b 0%,#2a1f52 55%,#1f1740 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 0 #140e2b,0 8px 18px rgba(0,0,0,.35)}
.ex-btn.violet:hover{border-color:#c4b5fd;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 5px 0 #140e2b,0 14px 26px rgba(76,29,149,.4)}
.ex-btn.violet:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 #140e2b,0 4px 10px rgba(0,0,0,.3)}

/* segmented (language / time / keyboard) */
.ex-seg{background:linear-gradient(180deg,#070d1d,#0b1429);box-shadow:inset 0 2px 6px rgba(0,0,0,.45);padding:.25rem;gap:.25rem}
.ex-seg button{position:relative;overflow:hidden;border:1px solid transparent;
  transition:background .15s,color .15s,transform .12s,box-shadow .15s,border-color .15s}
.ex-seg button:not([aria-pressed="true"]):not(:disabled):hover{color:#fff;border-color:rgba(125,211,252,.3);
  background:linear-gradient(180deg,rgba(56,189,248,.16),rgba(56,189,248,.06));transform:translateY(-1px)}
.ex-seg button:active:not(:disabled){transform:translateY(1px)}
.ex-seg button[aria-pressed="true"]{color:#04172c;border-color:#7dd3fc;
  background:linear-gradient(180deg,#9be5ff 0%,#38bdf8 55%,#0ea5e9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 0 #0369a1,0 6px 14px rgba(14,165,233,.35)}
.ex-seg button[aria-pressed="true"]::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);
  animation:ex-shine 3.2s ease-in-out infinite;pointer-events:none}
@keyframes ex-shine{0%,60%{left:-70%}100%{left:140%}}
.ex-seg button:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}

/* sound toggle header me (mobile: cta ke saath right me) */
@media (max-width:40rem){
  header.top #tf-sound-toggle{margin-left:auto !important}
  header.top #tf-sound-toggle + .cta{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .ex-btn,.ex-btn::after,.ex-seg button::after,.ex-btn.primary{animation:none !important;transition:none !important}
}