/* kheloaurseekho.in — one stylesheet for every page */
:root{
  --bg:#fffaf0;--card:#ffffff;--ink:#1d2433;--muted:#566070;--line:#e8e1d3;
  --brand:#e85d04;--brand-ink:#ffffff;--green:#15803d;--blue:#1d4ed8;--pink:#be185d;--yellow:#fde68a;
  --ok:#15803d;--bad:#b91c1c;--focus:#1d4ed8;
  --m0:#fde2b3;--m1:#c7e9c0;--m2:#c6dbef;--m3:#f6c4d6;--m4:#e2d4f0;--m5:#fff3a3;
  --r:16px;--shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.06);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Devanagari","Nirmala UI",sans-serif;
  color-scheme:light;
}
/* dark theme only when the visitor picks it (light is the default) */
:root[data-theme=dark]{
  --bg:#14161c;--card:#1d212b;--ink:#eef1f6;--muted:#a9b2c2;--line:#2f3542;
  --brand:#fb8c3c;--brand-ink:#1a1206;--green:#4ade80;--blue:#93b4ff;--pink:#f9a8d4;--yellow:#5c4a10;
  --ok:#4ade80;--bad:#fca5a5;--focus:#93b4ff;
  --m0:#6b4a1c;--m1:#2e5a2a;--m2:#2b4a6e;--m3:#6a2c45;--m4:#4b3a6b;--m5:#5f5718;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font)}
a{color:var(--blue)}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;background:var(--card);padding:8px 12px;z-index:9}

/* header */
.top{background:var(--card);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;min-height:60px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.15rem;line-height:1.1}
.logo small{display:block;font-weight:600;color:var(--muted);font-size:.78rem}
.logo svg{width:38px;height:38px;flex:none}
.nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--ink);font-weight:600;padding:8px 12px;border-radius:999px;font-size:.95rem}
.nav a:hover,.nav a[aria-current]{background:var(--yellow)}

/* type */
h1{font-size:clamp(1.7rem,4.5vw,2.5rem);line-height:1.15;margin:.6em 0 .3em}
h2{font-size:1.45rem;line-height:1.25;margin:1.6em 0 .5em}
h3{font-size:1.15rem;margin:1.2em 0 .4em}
.lead{font-size:1.1rem;color:var(--muted);max-width:60ch;margin-top:0}
.crumbs{font-size:.9rem;color:var(--muted);margin-top:14px}
.crumbs a{color:var(--muted)}
.hi{font-family:var(--font)}
.note{font-size:.92rem;color:var(--muted)}
main{padding-bottom:40px}
section{scroll-margin-top:12px}

/* hero + cards */
.hero{padding:28px 0 8px}
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px;padding:0;list-style:none}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:700}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);display:block}
a.card:hover{border-color:var(--brand)}
.card h3{margin:.2em 0}
.card p{margin:.2em 0;color:var(--muted);font-size:.95rem}
.card .big{font-size:2.2rem;line-height:1}
.tag{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--yellow);color:var(--ink)}

/* tabs: Learn / Play / Print */
.tabs{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap;position:sticky;top:0;background:var(--bg);padding:8px 0;z-index:3}
.tabs a{flex:1 1 0;min-width:90px;text-align:center;text-decoration:none;font-weight:800;padding:10px 12px;border-radius:12px;border:2px solid var(--line);color:var(--ink);background:var(--card)}
.tabs a:hover{border-color:var(--brand)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:700;border:2px solid transparent;border-radius:12px;padding:10px 16px;background:var(--brand);color:var(--brand-ink);cursor:pointer;text-decoration:none;min-height:44px}
.btn.alt{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.alt[aria-pressed=true]{border-color:var(--brand);background:var(--yellow)}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
select,input[type=text],input[type=number]{font:inherit;padding:9px 12px;border-radius:10px;border:2px solid var(--line);background:var(--card);color:var(--ink);min-height:44px}
label{font-weight:600}

/* letter / item tiles */
.tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.tile{font:inherit;color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center;cursor:pointer;box-shadow:var(--shadow)}
.tile:hover{border-color:var(--brand)}
.tile b{display:block;font-size:2.2rem;line-height:1.15}
.tile span{display:block;font-size:.95rem}
.tile i{display:block;font-style:normal;font-size:1.6rem;line-height:1.2}
.tile.small b{font-size:1.8rem}
.c0{background:var(--m0)}.c1{background:var(--m1)}.c2{background:var(--m2)}.c3{background:var(--m3)}.c4{background:var(--m4)}.c5{background:var(--m5)}

/* tables */
.tbl{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden}
.tbl th,.tbl td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.tbl th{background:var(--yellow)}
.scroll{overflow-x:auto}

/* quiz */
.quiz{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.quiz .q{font-size:1.35rem;font-weight:800;margin:.2em 0 .6em}
.quiz .q big{font-size:2.6rem}
.opts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.opt{font:inherit;font-size:1.2rem;font-weight:700;padding:14px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;min-height:56px}
.opt:hover{border-color:var(--brand)}
.opt.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 18%,var(--card))}
.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 15%,var(--card))}
.score{display:flex;gap:16px;flex-wrap:wrap;font-weight:700;color:var(--muted);margin-bottom:8px}
.fb{min-height:1.6em;font-weight:700;margin:.6em 0 0}
.fb.ok{color:var(--ok)}.fb.no{color:var(--bad)}
.stars{font-size:2rem}

/* maps */
.mapbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px;box-shadow:var(--shadow)}
.map{display:block;width:100%;height:auto;max-height:82vh;margin:0 auto}
.map .st{stroke:#555;stroke-width:.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.map .s0{fill:#fdd9a0}.map .s1{fill:#bfe3b4}.map .s2{fill:#bcd5ee}.map .s3{fill:#f5bfd2}.map .s4{fill:#dccbee}.map .s5{fill:#fff0a0}
.map .ol{fill:none;stroke:#222;stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.map .lb{font:600 11px var(--font);fill:#1d2433;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:2.5px;stroke-linejoin:round;pointer-events:none}
.map .lb.sm{font-size:9px}
.map .dot{fill:#1d2433}
.map.quizmap .st{cursor:pointer;fill:#e9e4d8}
.map.quizmap .st:hover{fill:#ffd08a}
.map.quizmap .st.done{fill:#9fd8a0}
.map.quizmap .st.miss{fill:#f3a3a3}
.map.quizmap .st.hint{fill:#ffb347}
.map.quizmap .st.ask{fill:#ff9f43}
.map .hit{fill:transparent;stroke:#1d2433;stroke-width:1;stroke-dasharray:2 2;cursor:pointer;vector-effect:non-scaling-stroke}
.map.quizmap .st.blank{fill:#fff}
.legend{columns:2 220px;font-size:.92rem;padding-left:1.2em}
.mapnote{font-size:.85rem;color:var(--muted);margin:.6em 4px}

/* borders */
.bgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.bcard{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:var(--shadow);text-align:center;font-weight:700}
.bcard svg{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--line);margin-bottom:6px}
.sheet{background:#fff;max-width:520px;margin:0 auto;box-shadow:var(--shadow);border:1px solid var(--line);position:relative;aspect-ratio:210/297}
.sheet svg.border{position:absolute;inset:0;width:100%;height:100%}
.fp{position:absolute;inset:16% 15% 14%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;color:#111;font-family:var(--font)}
.fp .t{font-size:clamp(1.1rem,4.4vw,1.9rem);font-weight:800;line-height:1.2;word-break:break-word}
.fp .sub{font-size:clamp(.8rem,2.6vw,1.1rem);font-weight:600;color:#333}
.fp dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;text-align:left;font-size:clamp(.7rem,2.3vw,1rem);margin:0;width:100%}
.fp dt{font-weight:700}.fp dd{margin:0;border-bottom:1px dotted #777;min-height:1.3em}
.form{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.form label{display:flex;flex-direction:column;gap:4px;font-size:.92rem}

/* footer */
.foot{border-top:1px solid var(--line);background:var(--card);padding:22px 0;font-size:.92rem;color:var(--muted)}
.foot a{color:var(--muted)}
.foot nav{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}

/* print: only the .print-area is printed when a page has one */
.print-only{display:none}
@media print{
  @page{size:A4;margin:10mm}
  body{background:#fff;color:#000;font-size:12pt}
  .top,.foot,.tabs,.no-print,.crumbs,.quiz,.row,.skip{display:none!important}
  body.has-print main > *:not(.print-area){display:none!important}
  .print-only{display:block}
  .print-area{display:block!important}
  .tile,.card,.mapbox{box-shadow:none}
  .map{max-height:none}
  a{color:#000;text-decoration:none}
}
body.print-full{}
@media print{body.print-full{margin:0}body.print-full .print-area{position:fixed;inset:0}}
.opts:empty{display:none}
.quiz .q:empty{display:none}
@media (max-width:480px){.tiles{grid-template-columns:repeat(3,1fr);gap:8px}.tile b{font-size:1.8rem}.tile span{font-size:.85rem}.quiz{padding:12px}.quiz .q{font-size:1.15rem;margin:0}}

:root[data-theme=dark] .mapbox{background:#fbf8f1}
.themebtn{font:inherit;font-size:1.1rem;line-height:1;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;width:40px;height:40px;cursor:pointer;flex:none;margin-left:auto}
.themebtn + .nav{margin-left:0}
.themebtn:hover{border-color:var(--brand)}
@media print{.themebtn{display:none}}

@media (max-width:480px){.nav{gap:0}.nav a{padding:6px 8px;font-size:.9rem}.logo{font-size:1.05rem}}