/* Ektu Bangla: an exercise-book page (light) or a school slate (dark) on the left,
   the letter breakdown on the right. */
:root{
  --bg:#eef2f8; --paper:#fbfcff; --ink:#1c2944; --muted:#5d6984; --rule:#c6d4ea; --margin:#e07882;
  --gold:#f2a516; --gold-soft:#fff1cf; --gold-ink:#6b4500; --line:#d9e1ee; --accent:#2b5bd7;
  --ok:#2c8a4b; --err:#c43d3d;
  --font-bn:"Baloo Da 2","Hind Siliguri","Noto Sans Bengali","Vrinda",sans-serif;
  --font-ui:"Hind Siliguri","Noto Sans Bengali",system-ui,sans-serif;
  --fs:5rem;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#171c20; --paper:#242b31; --ink:#eef1ec; --muted:#9ba7ae; --rule:#37414a; --margin:#b75a65;
  --gold:#f5b83a; --gold-soft:#3d3117; --gold-ink:#ffd98a; --line:#333c44; --accent:#8fb0ff; --ok:#6fcf8f; --err:#ff8a8a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#171c20; --paper:#242b31; --ink:#eef1ec; --muted:#9ba7ae; --rule:#37414a; --margin:#b75a65;
  --gold:#f5b83a; --gold-soft:#3d3117; --gold-ink:#ffd98a; --line:#333c44; --accent:#8fb0ff; --ok:#6fcf8f; --err:#ff8a8a; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html,body{height:auto}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:1.5;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1400px;margin:0 auto;padding-inline:16px;padding-block:12px 24px;display:flex;flex-direction:column;gap:16px;min-height:100vh}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:inherit}
.brand b{font-family:var(--font-bn);font-weight:800;font-size:1.9rem;line-height:1}
.brand span{color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
nav{display:flex;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px}
nav a{padding:6px 16px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:500}
nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* board view */
.board{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px;align-items:start}
@media (max-width:900px){.board{grid-template-columns:minmax(0,1fr)}}
.sheet{background:var(--paper);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;min-width:0}
@media (min-width:901px){.sheet{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);max-height:calc(100vh - 24px)}}
.tools{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.85rem}
.tools label{display:flex;align-items:center;gap:6px;cursor:pointer}
.tools input[type=range]{width:110px;accent-color:var(--accent)}
.tools input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px}
.pill{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--gold-soft);color:var(--gold-ink);font-weight:600;white-space:nowrap}
.pill.live{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.pill.off{background:color-mix(in srgb,var(--err) 15%,transparent);color:var(--err)}
.pill.quiet{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.page{position:relative;overflow:auto;padding:8px 20px 24px 56px}
.page::before{content:"";position:absolute;top:0;bottom:0;left:38px;width:2px;background:var(--margin);opacity:.7}
#boardText,.demoText{font-family:var(--font-bn);font-size:var(--fs);line-height:1.8;font-weight:600;white-space:pre-wrap;overflow-wrap:anywhere;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(1.8em - 2px),var(--rule) calc(1.8em - 2px),var(--rule) 1.8em);min-height:3.6em}
.bw{cursor:pointer;border-radius:.12em;transition:background .15s}
.bw:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.bw.sel{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.hl .ak.cj{color:var(--gold)}
:root:not([data-theme="dark"]) .hl .ak.cj{color:#c27c00}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hl .ak.cj{color:var(--gold)}}
.ak.focus{background:var(--gold);color:var(--paper)!important;border-radius:.1em}
.empty{color:var(--muted);font-size:.9rem}
.empty.big{font-size:1rem;font-family:var(--font-ui);font-weight:400;line-height:1.5;display:block;padding-top:.6em}
.empty.big a{font-weight:600}

/* letters panel */
.letters{display:flex;flex-direction:column;gap:14px;min-width:0}
.summary{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.summary h2,.summary h3{margin:0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.stats{display:flex;gap:18px;flex-wrap:wrap}
.stat b{display:block;font-family:var(--font-bn);font-size:1.7rem;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.cchip{font-family:var(--font-bn);font-size:1.5rem;line-height:1.2;padding:4px 12px 2px;border-radius:10px;border:2px solid var(--gold);background:var(--gold-soft);color:var(--ink);cursor:pointer}
.cchip.static{cursor:default}
.cchip small{font-family:var(--font-ui);font-size:.75rem;color:var(--muted);margin-left:4px}
.cchip[aria-pressed="true"]{background:var(--gold);color:#241800}
.cchip[aria-pressed="true"] small{color:#241800}

.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;scroll-margin:16px;transition:box-shadow .2s,border-color .2s}
.card.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.card header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;cursor:pointer}
.card .w{font-family:var(--font-bn);font-size:2rem;font-weight:800;line-height:1.2}
.card .n{color:var(--muted);font-size:.8rem;white-space:nowrap}
.tiles{display:flex;flex-wrap:wrap;gap:8px}
.tile{border:1px solid var(--line);border-radius:12px;padding:6px 10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px;background:var(--bg)}
.tile.conj{border:2px solid var(--gold);background:var(--gold-soft)}
.glyph{font-family:var(--font-bn);font-size:2.6rem;font-weight:600;line-height:1.25}
.snd{font-size:.75rem;color:var(--muted);letter-spacing:.02em}
.recipe{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 4px}
.ch{display:flex;flex-direction:column;align-items:center;font-family:var(--font-bn);font-size:1.4rem;line-height:1.2;padding:2px 6px;border-radius:8px;background:var(--paper);border:1px solid var(--line)}
.ch small{font-family:var(--font-ui);font-size:.68rem;color:var(--muted);line-height:1.2}
.grp{display:flex;align-items:center;gap:4px;padding:3px 6px;border-radius:10px;border:1px dashed var(--gold)}
.plus,.eq{color:var(--muted);font-weight:600}
.eq b{font-family:var(--font-bn);font-size:1.4rem;color:var(--ink)}
.tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.tag{font-size:.7rem;padding:1px 7px;border-radius:999px;background:var(--gold);color:#241800;font-weight:600}
.tag.alt{background:var(--ink);color:var(--paper)}

/* write view */
.admin{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px;align-items:start}
@media (max-width:900px){.admin{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.panel h2{margin:0;font-size:1.15rem}
.panel p{margin:0;color:var(--muted);max-width:60ch}
textarea{width:100%;min-height:220px;resize:vertical;font-family:var(--font-bn);font-size:2rem;line-height:1.5;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;border:1px solid var(--line);background:var(--bg);padding:8px 16px;border-radius:10px;cursor:pointer;font-weight:500;text-decoration:none;color:inherit;line-height:1.5}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600}
.btn.big{font-size:1.15rem;padding:12px 24px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.status{font-size:.9rem;color:var(--muted);min-height:1.4em}
.status.ok{color:var(--ok)}.status.err{color:var(--err)}
.list{display:flex;flex-direction:column;gap:6px}
.list button{text-align:left;font-family:var(--font-bn);font-size:1.15rem;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:8px 12px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list button:hover{border-color:var(--accent)}
.label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* share card */
.share{border:2px solid var(--gold);background:var(--gold-soft)}
.share .linkbox{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.share .linkbox input{flex:1 1 220px;min-width:0;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:var(--paper);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem}
.share .note{font-size:.85rem;color:var(--gold-ink)}
.ended-box{border:1px solid var(--err);border-radius:10px;padding:10px 12px;color:var(--err);background:color-mix(in srgb,var(--err) 8%,transparent)}

/* home */
.home{display:flex;flex-direction:column;gap:20px;max-width:960px;margin:0 auto;width:100%}
.hero{padding:28px 24px;gap:16px}
.hero h1{margin:0;font-size:2rem;line-height:1.15}
.hero h1 .bn{font-family:var(--font-bn);font-weight:800}
.hero p{max-width:62ch;font-size:1.05rem}
.hero .row{margin-top:4px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.step{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.step b{display:block;font-size:1rem;margin-bottom:4px}
.step span{color:var(--muted);font-size:.9rem}
.demo{padding:0;overflow:hidden}
.demo .demoText{--fs:3.2rem;padding:8px 20px 20px 56px;position:relative}
.demo .page{padding:0}
.demo .page::before{left:38px}
.demo .caption{padding:10px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.demo .caption i{font-style:normal;color:#c27c00;font-weight:700}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .demo .caption i{color:var(--gold)}}
:root[data-theme="dark"] .demo .caption i{color:var(--gold)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (max-width:600px){:root{--fs:3rem}.page{padding-left:44px}.page::before{left:28px}.glyph{font-size:2.2rem}.hero h1{font-size:1.6rem}.demo .demoText{--fs:2.4rem;padding-left:44px}}

/* footer */
.foot{margin-top:auto;padding-top:8px;text-align:center;color:var(--muted);font-size:.85rem}
.foot a{color:var(--muted);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.foot a:hover{color:var(--accent)}