/* குறள் உறியடி · Kural Uriyadi */
:root{
  --ta:"Noto Serif Tamil","Noto Sans Tamil","Nirmala UI","Latha",serif;
  --tas:"Noto Sans Tamil","Nirmala UI","Latha",sans-serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Tamil","Nirmala UI",sans-serif;
  --all:"Noto Sans Devanagari","Noto Sans Bengali","Noto Sans Gurmukhi","Noto Sans Gujarati","Noto Sans Oriya","Noto Sans Telugu",
        "Noto Sans Kannada","Noto Sans Malayalam","Noto Sans Meetei Mayek","Noto Naskh Arabic","Nirmala UI";
  --maroon:#7a2e12; --maroon-2:#5c2009; --turmeric:#f2b631; --kumkum:#c0261c; --leaf:#3d7a3a;
  --cream:#fff6dd; --cream-2:#f6e7bd; --ink:#3a2413; --muted:#7a5a3a; --line:#d9bf86;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#f6cf8a;color:var(--ink);font-family:var(--ui);line-height:1.45;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
[lang="ta"]{font-family:var(--ta)}
button,select{font:inherit;color:inherit}
#stage{position:fixed;inset:0;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grow{flex:1}

/* ---- the game: the row of lamps and score, the time, the palm leaf */
#hud{position:absolute;left:0;right:0;top:0;padding:calc(6px + var(--sat)) calc(10px + var(--sar)) 0 calc(10px + var(--sal));pointer-events:none}
#hud > *{pointer-events:auto}
.hud-row{display:flex;align-items:center;gap:6px;min-height:40px}
.lamps{display:flex;gap:1px;font-size:1.3rem;line-height:1;flex:none}
.lamps span{transition:filter .3s,opacity .3s,transform .3s}
.lamps span.out{filter:grayscale(1);opacity:.3;transform:scale(.85)}
.pill{background:rgba(255,246,221,.92);border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:.8rem;white-space:nowrap;flex:none}
.pill.streak{background:var(--kumkum);border-color:var(--kumkum);color:#fff;font-weight:700}
.score{background:var(--maroon);color:#fff;border-radius:999px;padding:3px 12px;white-space:nowrap;flex:none}
@media (max-width:520px){ .score small{display:none} .icon-btn{width:36px;height:36px} }
.score small{opacity:.8;font-size:.72rem}
.score b{font-size:1.1rem;font-variant-numeric:tabular-nums}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,246,221,.92);cursor:pointer;font-size:1.05rem;
  display:grid;place-items:center;padding:0;flex:none}
.icon-btn:active{transform:scale(.94)}
.timer{height:7px;border-radius:999px;background:rgba(122,46,18,.22);overflow:hidden;margin:5px 2px 6px}
.timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--turmeric),#ffd86b);border-radius:999px;transform-origin:left center}
.timer.low i{background:linear-gradient(90deg,var(--kumkum),#ef6a4c)}

.leaf{background:linear-gradient(180deg,var(--cream),var(--cream-2));border:1.5px solid #b98c45;border-radius:14px;padding:8px 14px 10px;
  box-shadow:0 2px 0 #b98c45,0 6px 18px rgba(92,32,9,.22);text-align:center;position:relative}
.leaf::before,.leaf::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:#b98c45;transform:translateY(-50%)}
.leaf::before{left:5px}.leaf::after{right:5px}
.leaf-head{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.78rem;color:var(--muted);min-height:26px}
.leaf-head #leaf-where{font-family:var(--tas);min-width:0}
.hint-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:1px 10px;font-size:.78rem;cursor:pointer;min-height:26px;white-space:nowrap;flex:none}
.hint-btn[disabled]{opacity:.45;cursor:default}
.kural{margin:0;font-size:1.1rem;font-weight:500;line-height:1.55;color:var(--ink);word-spacing:.1em;white-space:nowrap;overflow:hidden}
.kural.wrap{white-space:normal}
.kural .blank{display:inline-block;border-bottom:3px dashed var(--kumkum);min-width:3.2em;height:1.25em;vertical-align:baseline;margin:0 .1em;
  color:transparent;border-radius:4px 4px 0 0;transition:background .3s,color .3s;font-weight:700;padding:0 .15em}
.kural .blank.filled{color:var(--leaf);border-bottom-style:solid;border-bottom-color:var(--leaf);background:rgba(61,122,58,.12);
  animation:pop .45s ease-out;height:auto}
.kural .blank.shown{color:var(--kumkum);border-bottom-style:solid;background:rgba(192,38,28,.08);height:auto}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
.hint-line{margin:4px 0 0;font-size:.86rem;color:#8a5a12}
.hint-line b{font-weight:700}
.meaning{margin:5px 0 0;font-size:.86rem;color:var(--muted);font-family:var(--ui),var(--all);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.meaning.open{-webkit-line-clamp:unset;display:block}
.meaning[dir="rtl"]{font-family:"Noto Naskh Arabic","Noto Nastaliq Urdu",var(--ui);font-size:1rem}

/* in a low, wide window the leaf stands at the left and the pots hang at the right */
@media (orientation:landscape) and (max-height:560px){
  #hud{right:auto;width:46%;bottom:0;padding-bottom:calc(8px + var(--sab));display:flex;flex-direction:column}
  .hud-row{gap:5px}
  .lamps{font-size:1.2rem}
  .icon-btn{width:34px;height:34px;font-size:.95rem;flex:none}
  .score small{display:none}
  .meaning{-webkit-line-clamp:4}
}

.say{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%) scale(.8);background:rgba(58,36,19,.9);color:#fff;border-radius:14px;
  padding:8px 18px;font-size:1.1rem;font-weight:700;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;text-align:center;
  max-width:86vw;font-family:var(--tas),var(--ui)}
.say.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.say.good{background:rgba(45,110,52,.94)} .say.bad{background:rgba(176,34,24,.94)} .say.blind{background:rgba(59,42,107,.95)}

/* ---- the screens over the scene */
.screen{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:calc(14px + var(--sat)) 14px calc(18px + var(--sab));
  display:flex;justify-content:center;align-items:flex-start;user-select:text;-webkit-user-select:text}
.screen[hidden]{display:none}
.screen.dim{background:rgba(58,36,19,.55);align-items:center}
#home,#chapters{background:rgba(255,234,190,.8)}
.panel{width:100%;max-width:520px;margin:auto 0}
.panel.wide{max-width:860px}
.panel.small{max-width:340px;background:var(--cream);border-radius:18px;padding:18px;text-align:center;border:1.5px solid #b98c45}
#over .panel{background:var(--cream);border-radius:18px;padding:16px;border:1.5px solid #b98c45;margin:auto 0}
.brand{text-align:center;padding:6px 0 10px}
.brand img{display:block;margin:0 auto 2px;filter:drop-shadow(0 4px 8px rgba(92,32,9,.3))}
.brand h1{margin:0;font-size:clamp(2rem,9vw,2.9rem);color:var(--maroon);line-height:1.25;text-shadow:0 2px 0 rgba(255,246,221,.8)}
.brand-en{margin:0;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem;color:var(--maroon-2)}
.tagline{margin:6px auto 0;max-width:30em;color:var(--ink);font-size:.98rem}
.modes{display:grid;gap:10px;margin:8px 0 12px}
.mode{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;text-align:start;border:0;border-radius:16px;padding:12px 16px;cursor:pointer;
  background:var(--maroon);color:#fff;box-shadow:0 3px 0 var(--maroon-2),0 8px 18px rgba(92,32,9,.25);min-height:66px}
.mode:active{transform:translateY(2px);box-shadow:0 1px 0 var(--maroon-2)}
.mode b{grid-row:1 / span 2;font-size:1.7rem;line-height:1}
.mode span{font-weight:700;font-size:1.08rem}
.mode em{font-style:normal;font-size:.8rem;opacity:.85;grid-column:2}
.mode[data-mode="chapters"]{background:#2f6b4a;box-shadow:0 3px 0 #1f4a33,0 8px 18px rgba(31,74,51,.25)}
.mode[data-mode="k108"]{background:#a3531a;box-shadow:0 3px 0 #7a3b0e,0 8px 18px rgba(122,59,14,.25)}
.card{background:rgba(255,246,221,.95);border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;margin:0 0 12px}
.card summary{font-weight:700;cursor:pointer}
.card ol{margin:8px 0 0;padding-inline-start:1.3em;font-size:.92rem}
.card ol li{margin:.25em 0}
.settings h2{margin:0 0 8px;font-size:1rem}
.settings label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:7px 0;font-size:.92rem}
.settings label.check{justify-content:flex-start}
.settings select{border:1.5px solid var(--line);border-radius:10px;padding:7px 8px;background:#fff;min-height:40px;max-width:60%;
  font-family:var(--ui),var(--all)}
.settings input[type=checkbox]{width:20px;height:20px;accent-color:var(--maroon)}
.credits{font-size:.74rem;color:var(--maroon-2);text-align:center;margin:4px 6px 0}
.credits a{color:inherit}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;background:var(--maroon);color:#fff;font-weight:700;
  padding:10px 18px;min-height:46px;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--maroon);border:1.5px solid var(--maroon)}
.btn:active{transform:scale(.97)}
.btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.btn-col{display:grid;gap:10px;margin-top:12px}
.bar{display:flex;align-items:center;gap:12px;margin-bottom:10px;position:sticky;top:0;background:rgba(246,207,138,.96);padding:6px 0;z-index:2;border-radius:0 0 12px 12px}
.bar h2{margin:0;font-size:1.15rem;color:var(--maroon)}
.pal{margin:14px 0 6px;font-size:1rem;color:var(--maroon);font-family:var(--ta)}
.pal small{color:var(--muted);font-family:var(--ui);font-weight:400}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ch{border:1.5px solid var(--line);background:rgba(255,246,221,.96);border-radius:12px;padding:8px 10px;text-align:start;cursor:pointer;min-height:58px;
  display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.ch i{font-style:normal;font-weight:700;color:var(--maroon);font-variant-numeric:tabular-nums}
.ch span{font-family:var(--tas);font-size:.92rem;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.ch em{grid-column:2;font-style:normal;font-size:.74rem;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.ch .st{color:#c8891a;letter-spacing:.05em}
.ch.done{border-color:#c8891a;background:#fff9e6}

#over h2,#pause h2{margin:0 0 6px;text-align:center;color:var(--maroon);font-size:1.35rem}
.stars{text-align:center;font-size:2rem;color:#c8891a;margin:0;letter-spacing:.12em}
.result{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;margin:8px 0}
.result div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 4px}
.result b{display:block;font-size:1.5rem;color:var(--maroon);font-variant-numeric:tabular-nums}
.result span{font-size:.74rem;color:var(--muted)}
#over h3{margin:10px 0 6px;font-size:.95rem;color:var(--muted)}
.rv{border-top:1px solid var(--line);padding:8px 0;display:grid;grid-template-columns:auto 1fr;column-gap:10px}
.rv .mark{font-size:1.1rem;grid-row:1 / span 3}
.rv .mark.ok{color:var(--leaf)} .rv .mark.no{color:var(--kumkum)}
.rv p{margin:0}
.rv .k{font-family:var(--ta);font-size:.95rem}
.rv .k mark{background:rgba(242,182,49,.45);color:inherit;border-radius:4px;padding:0 .12em}
.rv .m{font-size:.82rem;color:var(--muted);font-family:var(--ui),var(--all)}
.rv .w{font-size:.76rem;color:var(--muted)}
.rv .w a{color:var(--maroon)}

.loading{position:absolute;inset:0;display:grid;place-items:center;background:#f6cf8a;font-weight:700;color:var(--maroon);z-index:9}
.loading[hidden]{display:none}

@media (prefers-reduced-motion:reduce){ .kural .blank.filled{animation:none} .say{transition:none} }