/* ============================================================ Padi Tamil — visual system Warm palm-leaf parchment, turmeric accent, huge friendly type. Designed for 6-year-olds and 80-year-olds: big targets, high contrast, one decision per screen. ============================================================ */ :root{ --r-lg:22px; --r-md:16px; --r-sm:11px; --shadow:0 2px 0 rgba(16,24,40,.05), 0 10px 28px -18px rgba(16,24,40,.45); --tap:60px; --ta:"Noto Sans Tamil","Nirmala UI","Latha","Tamil Sangam MN",sans-serif; --ui:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif; } /* ============================================================ Themes. Every colour in the app comes from these tokens, so a theme is one block of variables and nothing else. Two independent choices, both stamped on before first paint: data-theme which palette (mayil / malligai / kolam / ink / suvadi) data-scheme light, dark, auto (absent = auto = follow the device) Auto is the default. The device media query is guarded with :not([data-scheme="light"]) so an explicit Light choice survives a phone that is in dark mode - which is most phones. ============================================================ */ /* ---------- Mayil: peacock (default) ---------- */ :root, :root[data-theme="mayil"], [data-theme="mayil"]{ --paper:#F1F6F3; --paper-2:#E3EDE8; --card:#FBFDFC; --ink:#15302A; --ink-2:#456158; --muted:#779188; --line:#D3E2DB; --gold:#12766B; --gold-deep:#0E5C53; --gold-shade:#0A4740; --on-gold:#FFFFFF; --teal:#437A36; --teal-shade:#3E7231; --teal-soft:#EAF4E6; --teal-line:#BEDCB2; --on-teal:#FFFFFF; --red:#AC5039; --red-soft:#FAEFEB; --red-line:#E7C3B6; --hero-a:#E6F2EC; --hero-b:#D6EAE1; --hero-line:#BCDCD0; --shadow:0 2px 0 rgba(21,48,42,.04), 0 10px 28px -18px rgba(21,48,42,.35); } @media (prefers-color-scheme: dark){ :root:not([data-scheme="light"]), :root[data-theme="mayil"]:not([data-scheme="light"]), [data-theme="mayil"]:not([data-scheme="light"]){ --paper:#0E1A18; --paper-2:#162523; --card:#132220; --ink:#DCE9E4; --ink-2:#A6BFB7; --muted:#6F8B83; --line:#22352F; --gold:#4FB79F; --gold-deep:#83D6C0; --gold-shade:#37866F; --on-gold:#07201B; --teal:#7CC46B; --teal-shade:#5FA451; --teal-soft:#132A18; --teal-line:#2A5030; --on-teal:#07201B; --red:#E08A72; --red-soft:#2A1712; --red-line:#4A2A20; --hero-a:#16302B; --hero-b:#0F231F; --hero-line:#24443C; --shadow:0 2px 0 rgba(0,0,0,.28), 0 10px 28px -18px #000; } } :root[data-scheme="dark"], :root[data-theme="mayil"][data-scheme="dark"], [data-theme="mayil"][data-scheme="dark"]{ --paper:#0E1A18; --paper-2:#162523; --card:#132220; --ink:#DCE9E4; --ink-2:#A6BFB7; --muted:#6F8B83; --line:#22352F; --gold:#4FB79F; --gold-deep:#83D6C0; --gold-shade:#37866F; --on-gold:#07201B; --teal:#7CC46B; --teal-shade:#5FA451; --teal-soft:#132A18; --teal-line:#2A5030; --on-teal:#07201B; --red:#E08A72; --red-soft:#2A1712; --red-line:#4A2A20; --hero-a:#16302B; --hero-b:#0F231F; --hero-line:#24443C; --shadow:0 2px 0 rgba(0,0,0,.28), 0 10px 28px -18px #000; } /* ---------- Malligai: jasmine ---------- */ :root[data-theme="malligai"], [data-theme="malligai"]{ --paper:#FBFDF8; --paper-2:#EFF5E9; --card:#FFFFFF; --ink:#16261A; --ink-2:#48604D; --muted:#80947A; --line:#DDE8D6; --gold:#39823C; --gold-deep:#2F6B33; --gold-shade:#255529; --on-gold:#FFFFFF; --teal:#0E7490; --teal-shade:#155E75; --teal-soft:#ECFEFF; --teal-line:#A5DDE9; --on-teal:#FFFFFF; --red:#C0392B; --red-soft:#FDF0EE; --red-line:#EFC0B9; --hero-a:#F0F9EA; --hero-b:#E2F2D8; --hero-line:#C9E3B9; } @media (prefers-color-scheme: dark){ :root[data-theme="malligai"]:not([data-scheme="light"]), [data-theme="malligai"]:not([data-scheme="light"]){ --paper:#08130B; --paper-2:#112016; --card:#0D1A11; --ink:#E8F3E7; --ink-2:#B0C8B2; --muted:#7C9680; --line:#1E3524; --gold:#6EC46F; --gold-deep:#A6E3A1; --gold-shade:#4E9E52; --on-gold:#08210A; --teal:#38BDF8; --teal-shade:#0EA5E9; --teal-soft:#06232E; --teal-line:#0C4A6E; --on-teal:#04161F; --red:#F87171; --red-soft:#2A1414; --red-line:#57221F; --hero-a:#122A17; --hero-b:#0C1D0F; --hero-line:#20422A; --shadow:0 2px 0 rgba(0,0,0,.35), 0 10px 28px -18px #000; } } :root[data-theme="malligai"][data-scheme="dark"], [data-theme="malligai"][data-scheme="dark"]{ --paper:#08130B; --paper-2:#112016; --card:#0D1A11; --ink:#E8F3E7; --ink-2:#B0C8B2; --muted:#7C9680; --line:#1E3524; --gold:#6EC46F; --gold-deep:#A6E3A1; --gold-shade:#4E9E52; --on-gold:#08210A; --teal:#38BDF8; --teal-shade:#0EA5E9; --teal-soft:#06232E; --teal-line:#0C4A6E; --on-teal:#04161F; --red:#F87171; --red-soft:#2A1414; --red-line:#57221F; --hero-a:#122A17; --hero-b:#0C1D0F; --hero-line:#20422A; --shadow:0 2px 0 rgba(0,0,0,.35), 0 10px 28px -18px #000; } /* ---------- Kolam: midnight and saffron ---------- */ :root[data-theme="kolam"], [data-theme="kolam"]{ --paper:#F8F9FC; --paper-2:#ECEFF6; --card:#FFFFFF; --ink:#131A33; --ink-2:#4B5578; --muted:#848DA8; --line:#DDE2EE; --gold:#E8912B; --gold-deep:#A05F13; --gold-shade:#9A5B10; --on-gold:#24160A; --teal:#0F766E; --teal-shade:#115E59; --teal-soft:#ECFDFA; --teal-line:#9BDDD5; --on-teal:#FFFFFF; --red:#D32222; --red-soft:#FEF2F2; --red-line:#F6C6C2; --hero-a:#FFF3E0; --hero-b:#FFE7C4; --hero-line:#F5D3A0; } @media (prefers-color-scheme: dark){ :root[data-theme="kolam"]:not([data-scheme="light"]), [data-theme="kolam"]:not([data-scheme="light"]){ --paper:#070B1A; --paper-2:#111838; --card:#0E1430; --ink:#EDF0FA; --ink-2:#B3BCD8; --muted:#7A85A6; --line:#212A50; --gold:#FFB43D; --gold-deep:#FFC773; --gold-shade:#C9832A; --on-gold:#241505; --teal:#2DD4BF; --teal-shade:#14B8A6; --teal-soft:#06251F; --teal-line:#12564C; --on-teal:#04201C; --red:#FB7185; --red-soft:#2B1018; --red-line:#59202E; --hero-a:#151E46; --hero-b:#0D1330; --hero-line:#2A3566; --shadow:0 2px 0 rgba(0,0,0,.35), 0 10px 28px -18px #000; } } :root[data-theme="kolam"][data-scheme="dark"], [data-theme="kolam"][data-scheme="dark"]{ --paper:#070B1A; --paper-2:#111838; --card:#0E1430; --ink:#EDF0FA; --ink-2:#B3BCD8; --muted:#7A85A6; --line:#212A50; --gold:#FFB43D; --gold-deep:#FFC773; --gold-shade:#C9832A; --on-gold:#241505; --teal:#2DD4BF; --teal-shade:#14B8A6; --teal-soft:#06251F; --teal-line:#12564C; --on-teal:#04201C; --red:#FB7185; --red-soft:#2B1018; --red-line:#59202E; --hero-a:#151E46; --hero-b:#0D1330; --hero-line:#2A3566; --shadow:0 2px 0 rgba(0,0,0,.35), 0 10px 28px -18px #000; } /* ---------- Ink & Paper ---------- */ :root[data-theme="ink"], [data-theme="ink"]{ --paper:#FFFFFF; --paper-2:#F1F4F9; --card:#FFFFFF; --ink:#0F172A; --ink-2:#475569; --muted:#7C8CA3; --line:#E2E8F0; --gold:#4F46E5; --gold-deep:#4338CA; --gold-shade:#3730A3; --on-gold:#FFFFFF; --teal:#047857; --teal-shade:#065F46; --teal-soft:#ECFDF5; --teal-line:#A7E3C8; --on-teal:#FFFFFF; --red:#D32222; --red-soft:#FEF2F2; --red-line:#F6C6C2; --hero-a:#EEF2FF; --hero-b:#E0E7FF; --hero-line:#C7D2FE; } @media (prefers-color-scheme: dark){ :root[data-theme="ink"]:not([data-scheme="light"]), [data-theme="ink"]:not([data-scheme="light"]){ --paper:#0B1020; --paper-2:#161C2D; --card:#131A2A; --ink:#E9EEF7; --ink-2:#AFBACB; --muted:#78889F; --line:#262F42; --gold:#5A51E0; --gold-deep:#A5B4FC; --gold-shade:#4338CA; --on-gold:#FFFFFF; --teal:#10B981; --teal-shade:#059669; --teal-soft:#0B2A22; --teal-line:#155E48; --on-teal:#04160F; --red:#F87171; --red-soft:#2C1416; --red-line:#5B2422; --hero-a:#1B2340; --hero-b:#141A2E; --hero-line:#2B3557; --shadow:0 2px 0 rgba(0,0,0,.3), 0 10px 28px -18px #000; } } :root[data-theme="ink"][data-scheme="dark"], [data-theme="ink"][data-scheme="dark"]{ --paper:#0B1020; --paper-2:#161C2D; --card:#131A2A; --ink:#E9EEF7; --ink-2:#AFBACB; --muted:#78889F; --line:#262F42; --gold:#5A51E0; --gold-deep:#A5B4FC; --gold-shade:#4338CA; --on-gold:#FFFFFF; --teal:#10B981; --teal-shade:#059669; --teal-soft:#0B2A22; --teal-line:#155E48; --on-teal:#04160F; --red:#F87171; --red-soft:#2C1416; --red-line:#5B2422; --hero-a:#1B2340; --hero-b:#141A2E; --hero-line:#2B3557; --shadow:0 2px 0 rgba(0,0,0,.3), 0 10px 28px -18px #000; } /* ---------- Suvadi: palm leaf ---------- */ :root[data-theme="suvadi"], [data-theme="suvadi"]{ --paper:#FDF8F0; --paper-2:#F6EEE1; --card:#FFFFFF; --ink:#2B2118; --ink-2:#6B5B49; --muted:#8B7A66; --line:#E7DBC7; --gold:#E8A33D; --gold-deep:#996314; --gold-shade:#A66A14; --on-gold:#3A2603; --teal:#1C7061; --teal-shade:#14574C; --teal-soft:#E4F1EE; --teal-line:#B9DCD4; --on-teal:#FFFFFF; --red:#B84129; --red-soft:#FBEAE6; --red-line:#F0C8BE; --hero-a:#FFF6E6; --hero-b:#FDECD2; --hero-line:#F0DCB8; } @media (prefers-color-scheme: dark){ :root[data-theme="suvadi"]:not([data-scheme="light"]), [data-theme="suvadi"]:not([data-scheme="light"]){ --paper:#191512; --paper-2:#221C17; --card:#241E19; --ink:#F5EDE2; --ink-2:#C9BAA7; --muted:#9E8D79; --line:#3A3026; --gold:#E8A33D; --gold-deep:#E8A33D; --gold-shade:#A66A14; --on-gold:#241505; --teal:#3FBFA6; --teal-shade:#1F7A6B; --teal-soft:#12312C; --teal-line:#1F5348; --on-teal:#06211C; --red:#E8776A; --red-soft:#3A1E18; --red-line:#5E2E24; --hero-a:#2C2318; --hero-b:#241C13; --hero-line:#3D3020; --shadow:0 2px 0 rgba(0,0,0,.3), 0 10px 28px -18px #000; } } :root[data-theme="suvadi"][data-scheme="dark"], [data-theme="suvadi"][data-scheme="dark"]{ --paper:#191512; --paper-2:#221C17; --card:#241E19; --ink:#F5EDE2; --ink-2:#C9BAA7; --muted:#9E8D79; --line:#3A3026; --gold:#E8A33D; --gold-deep:#E8A33D; --gold-shade:#A66A14; --on-gold:#241505; --teal:#3FBFA6; --teal-shade:#1F7A6B; --teal-soft:#12312C; --teal-line:#1F5348; --on-teal:#06211C; --red:#E8776A; --red-soft:#3A1E18; --red-line:#5E2E24; --hero-a:#2C2318; --hero-b:#241C13; --hero-line:#3D3020; --shadow:0 2px 0 rgba(0,0,0,.3), 0 10px 28px -18px #000; } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent} html,body{margin:0;padding:0} body{ background:var(--paper); color:var(--ink); font-family:var(--ui); font-size:17px; line-height:1.5; padding-top:calc(58px + env(safe-area-inset-top)); padding-bottom:calc(78px + env(safe-area-inset-bottom)); overscroll-behavior-y:contain; } :lang(ta), .ta{font-family:var(--ta)} /* ---------- chrome ---------- */ #topbar{ position:fixed; inset:0 0 auto 0; height:calc(58px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 10px 0; display:flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); z-index:40; } #topTitle{flex:1; text-align:center; font-weight:800; font-size:17px; letter-spacing:.2px} .icon-btn{ width:44px;height:44px;border:0;border-radius:12px;background:transparent; color:var(--ink); font-size:22px; cursor:pointer; display:grid;place-items:center; } .icon-btn:active{background:var(--paper-2)} .icon-btn[hidden]{visibility:hidden;display:grid} #backBtn{font-size:34px;line-height:0;padding-bottom:6px} .muted-icon{opacity:.32} #tabbar{ position:fixed; inset:auto 0 0 0; display:grid; grid-template-columns:repeat(5,1fr); background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); z-index:40; } #tabbar a{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; height:66px; text-decoration:none; color:var(--muted); font-size:11.5px; font-weight:700; position:relative; } #tabbar a{font-size:10.5px} #tabbar a span{font-size:20px;line-height:1} #tabbar a.on{color:var(--gold-deep)} #tabbar em{ position:absolute; top:10px; right:calc(50% - 24px); min-width:9px;height:9px; border-radius:9px; background:var(--red); } #app{padding:16px 16px 40px; max-width:640px; margin:0 auto; outline:none} #toast{ position:fixed; left:50%; bottom:96px; transform:translate(-50%,20px); background:var(--ink); color:var(--paper); padding:11px 18px; border-radius:99px; font-weight:700; font-size:14.5px; opacity:0; pointer-events:none; transition:.25s; z-index:60; max-width:90vw; text-align:center; } #toast.show{opacity:1; transform:translate(-50%,0)} /* ---------- primitives ---------- */ .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow); } .btn{ display:flex;align-items:center;justify-content:center;gap:10px; width:100%; min-height:var(--tap); padding:14px 18px; border:0; border-radius:var(--r-md); background:var(--gold); color:var(--on-gold); font-weight:800; font-size:18px; cursor:pointer; box-shadow:0 3px 0 var(--gold-shade); transition:transform .06s, box-shadow .06s; font-family:var(--ui); } .btn:active{transform:translateY(3px); box-shadow:0 0 0 var(--gold-shade)} .btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:2px solid var(--line)} .btn.ghost:active{transform:none;background:var(--paper-2)} .btn.teal{background:var(--teal);color:var(--on-teal);box-shadow:0 3px 0 var(--teal-shade)} .btn.teal:active{box-shadow:0 0 0 var(--teal-shade)} .btn[disabled]{opacity:.4;pointer-events:none} .btn.sm{min-height:44px;font-size:15px;padding:8px 14px;width:auto} .row{display:flex;gap:10px} .row>*{flex:1} .stack>*+*{margin-top:12px} .center{text-align:center} .h1{font-size:26px;font-weight:800;letter-spacing:-.3px;margin:0 0 4px} .h2{font-size:19px;font-weight:800;margin:26px 0 10px} .sub{color:var(--muted);font-size:15px;margin:0} .kicker{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-deep)} .pill{display:inline-block;background:var(--paper-2);border:1px solid var(--line);border-radius:99px;padding:3px 11px;font-size:13px;font-weight:700;color:var(--ink-2)} /* ---------- glyphs ---------- */ .glyph{font-family:var(--ta); line-height:1.25; font-weight:500} .glyph-xl{font-size:clamp(92px,30vw,170px)} .glyph-lg{font-size:clamp(56px,16vw,86px)} .glyph-md{font-size:38px} .roman{font-weight:800; color:var(--gold-deep); font-size:22px; letter-spacing:.5px} .tag{font-size:13px;color:var(--muted);font-weight:700} /* ---------- home / path ---------- */ .hero{ background:linear-gradient(150deg, var(--hero-a), var(--hero-b)); border:1px solid var(--hero-line); border-radius:var(--r-lg); padding:20px; margin-bottom:8px; } .hero .big{font-size:40px;font-family:var(--ta);line-height:1} .streak{display:flex;gap:18px;margin-top:14px} .streak div{font-size:13px;color:var(--ink-2);font-weight:700} .streak b{display:block;font-size:24px;color:var(--ink);font-weight:800} .unit{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px 16px; margin-bottom:10px; cursor:pointer; box-shadow:var(--shadow); font-family:var(--ui); color:var(--ink); } .unit:active{transform:scale(.99)} .unit .bubble{ width:56px;height:56px;flex:0 0 56px;border-radius:18px;display:grid;place-items:center; background:var(--paper-2); border:1px solid var(--line); font-family:var(--ta); font-size:26px; font-weight:600; color:var(--ink-2); } .unit.done .bubble{background:var(--teal-soft);border-color:var(--teal-line);color:var(--teal)} .unit.next .bubble{background:var(--gold);border-color:var(--gold-deep);color:var(--on-gold)} .unit.locked{opacity:.5} .unit .t{flex:1;min-width:0} .unit .t b{display:block;font-size:17px;font-weight:800} .unit .t small{color:var(--muted);font-size:13.5px;font-weight:600} .unit .chev{color:var(--muted);font-size:26px} .bar{height:7px;background:var(--paper-2);border-radius:9px;overflow:hidden;margin-top:7px} .bar i{display:block;height:100%;background:var(--teal);border-radius:9px;transition:width .4s} /* ---------- lesson ---------- */ .progress-top{height:9px;background:var(--paper-2);border-radius:9px;overflow:hidden;margin-bottom:20px} .progress-top i{display:block;height:100%;background:var(--gold);transition:width .3s} .teach{text-align:center;padding:26px 18px} .teach .glyph-xl{margin:2px 0 6px} .mnemo{ background:var(--paper-2);border:1px dashed var(--line);border-radius:var(--r-md); padding:13px 15px;margin-top:16px;text-align:left;font-size:15.5px;color:var(--ink-2) } .mnemo b{color:var(--ink)} .opt{ display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 16px; background:var(--card);border:2px solid var(--line);border-radius:var(--r-md); font-family:var(--ui);font-size:19px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left; } .opt:active{background:var(--paper-2)} .opt.big{min-height:96px;justify-content:center;font-family:var(--ta);font-size:46px;font-weight:500} .opt small{display:block;font-size:12.5px;color:var(--muted);font-weight:700;font-family:var(--ui)} .opt.ok{border-color:var(--teal);background:var(--teal-soft);color:var(--teal)} .opt.no{border-color:var(--red);background:var(--red-soft);color:var(--red)} .opt.dim{opacity:.42} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .grid1{display:grid;gap:10px} .verdict{ position:sticky; bottom:calc(66px + env(safe-area-inset-bottom)); margin:18px -16px 0; padding:16px; border-radius:var(--r-lg) var(--r-lg) 0 0; border:1px solid var(--line); background:var(--card); box-shadow:0 -10px 30px -20px rgba(43,33,24,.7); } .verdict.ok{background:var(--teal-soft);border-color:var(--teal-line)} .verdict.no{background:var(--red-soft);border-color:var(--red-line)} .verdict .msg{font-weight:800;font-size:18px;margin-bottom:10px;display:flex;align-items:center;gap:8px} .verdict.ok .msg{color:var(--teal)} .verdict.no .msg{color:var(--red)} /* ---------- rule cards (the reveal) ---------- */ .rule{padding:22px} .rule .n{ width:38px;height:38px;border-radius:12px;background:var(--gold);color:var(--on-gold); display:grid;place-items:center;font-weight:800;font-size:18px;margin-bottom:14px } .rule h3{margin:0 0 8px;font-size:21px;font-weight:800;line-height:1.25} .rule p{margin:0;color:var(--ink-2);font-size:16px} .demo{ display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap; background:var(--paper-2);border-radius:var(--r-md);padding:18px 12px;margin:16px 0 4px; font-family:var(--ta);font-size:42px;font-weight:500; align-items:flex-start } .demo .op{font-family:var(--ui);font-size:26px;color:var(--muted);font-weight:800;line-height:1;margin-top:14px} .demo .lbl{font-family:var(--ui);font-size:12px;color:var(--muted);font-weight:800;display:block;text-align:center;margin-top:2px} .demo .u{text-align:center} /* ---------- chart ---------- */ .chart-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);-webkit-overflow-scrolling:touch} table.chart{border-collapse:separate;border-spacing:0;font-family:var(--ta)} table.chart th,table.chart td{ min-width:52px;height:50px;text-align:center;font-size:23px;font-weight:500; border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0; } table.chart thead th{ position:sticky;top:0;background:var(--paper-2);z-index:2;font-size:19px;color:var(--gold-deep);font-weight:600; } table.chart tbody th{ position:sticky;left:0;background:var(--paper-2);z-index:1;color:var(--gold-deep);font-weight:600; } table.chart thead th:first-child{z-index:3;left:0} table.chart td{cursor:pointer;background:var(--card)} table.chart td:active{background:var(--paper-2)} table.chart td.hl{background:var(--teal-soft);color:var(--teal)} .legend{font-size:13px;color:var(--muted);margin:10px 2px} /* ---------- write / trace ---------- */ .trace-box{position:relative;margin:0 auto;touch-action:none;border-radius:var(--r-md);overflow:hidden;background:var(--card);border:2px solid var(--line)} .trace-box canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .trace-box .rule-lines{position:absolute;inset:0;pointer-events:none} .score-ring{font-size:15px;font-weight:800;color:var(--ink-2)} /* ---------- word / sentence ---------- */ .wordcard{text-align:center;padding:24px 16px} .wordcard .w{font-family:var(--ta);font-size:clamp(44px,13vw,68px);font-weight:600;line-height:1.35;word-break:break-word} .wordcard .say{font-size:19px;font-weight:800;color:var(--gold-deep);letter-spacing:.5px;margin-top:2px} .wordcard .mean{font-size:19px;font-weight:700;margin-top:6px} .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px} .chip{ font-family:var(--ta);font-size:30px;font-weight:500;background:var(--paper-2); border:1px solid var(--line);border-radius:12px;padding:6px 14px;min-width:52px;text-align:center; color:var(--ink); cursor:pointer; } .chip small{display:block;font-family:var(--ui);font-size:11px;color:var(--muted);font-weight:800} .chip.used{opacity:.25;pointer-events:none} .slots{ display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:70px;align-items:center; border:2px dashed var(--line);border-radius:var(--r-md);padding:10px;background:var(--paper-2) } .slots .chip{background:var(--card)} .pairbox{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center} .pairbox>div{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 8px} .pairbox .g{font-family:var(--ta);font-size:44px;font-weight:600;line-height:1.2} .pairbox .m{font-size:14px;font-weight:700;color:var(--ink-2)} .pairbox .s{font-size:12.5px;color:var(--muted);font-weight:700} .finish{text-align:center;padding:34px 20px} .finish .em{font-size:64px;line-height:1} .list-clean{list-style:none;padding:0;margin:0} .list-clean li{display:flex;gap:12px;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line)} .list-clean li:last-child{border-bottom:0} .list-clean .g{font-family:var(--ta);font-size:30px;font-weight:600;min-width:64px} .list-clean .m{flex:1;font-weight:700;font-size:15.5px} .list-clean .s{font-size:13px;color:var(--muted);font-weight:700} .speaker{background:none;border:0;font-size:22px;cursor:pointer;padding:6px} .note{font-size:13.5px;color:var(--muted);background:var(--paper-2);border-radius:12px;padding:11px 13px} /* ---------- spoken-variety picker ---------- */ .variety{ display:block; width:100%; text-align:left; font-family:var(--ui); color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:var(--r-lg); padding:16px; margin-bottom:12px; cursor:pointer; box-shadow:var(--shadow); } .variety:active{transform:scale(.99)} .variety.on{border-color:var(--gold)} .variety .eg{ background:var(--paper-2); border-radius:var(--r-md); padding:10px 14px; margin-top:10px; } /* romanisation shown beside Tamil anywhere the reader may not be able to decode the script yet — which, early on, is everywhere */ .rom{ display:inline-block; margin-left:8px; font-family:var(--ui); font-size:13.5px; font-weight:800; color:var(--gold-deep); letter-spacing:.3px; } .unit .t b{display:flex; align-items:baseline; flex-wrap:wrap; gap:0} /* ---------- unit 0 visuals: base letter in ink, added mark in gold ---------- */ .viz{ display:flex; align-items:flex-end; justify-content:center; gap:14px; flex-wrap:wrap; background:var(--paper-2); border-radius:var(--r-md); padding:18px 12px; margin:16px 0 2px; } .viz.wrap{gap:10px 12px} .vcell{display:flex; flex-direction:column; align-items:center; gap:4px} .vcell img{image-rendering:auto} .vlbl{font-family:var(--ui); font-size:11.5px; font-weight:800; color:var(--muted); letter-spacing:.2px} .vnum{font-family:var(--ui); font-size:40px; font-weight:800; line-height:1} .vrow{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; width:100%} .viz .op{font-family:var(--ui); font-size:24px; color:var(--muted); font-weight:800; align-self:center} .rule h3{line-height:1.3} /* ---------- stories ---------- */ .living{font-family:var(--ta); line-height:1.55} .living.big{font-size:23px; font-weight:600} .living .lw{cursor:pointer; border-radius:5px} .living .lw:active{background:var(--paper-2)} .living .kn{color:var(--ink)} .living .un{color:var(--muted); opacity:.42} .sline{display:flex; gap:10px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--line)} .sline:last-child{border-bottom:0} .snum{ flex:0 0 24px; height:24px; border-radius:8px; background:var(--paper-2); display:grid; place-items:center; font-size:12px; font-weight:800; color:var(--muted); } .sen{font-size:14.5px; font-weight:600; color:var(--ink-2); margin-top:4px} .moral{background:var(--teal-soft); border-color:var(--teal-line); text-align:center} .unlock{border-color:var(--gold); cursor:pointer; display:block} .levelup{background:var(--teal-soft); border-color:var(--teal-line); text-align:center} .aathi{display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer} .aathi:last-child{border-bottom:0} .aathi.locked{opacity:.45; cursor:default} .aletter{ flex:0 0 42px; height:42px; border-radius:12px; background:var(--paper-2); border:1px solid var(--line); display:grid; place-items:center; font-family:var(--ta); font-size:22px; font-weight:600; color:var(--gold-deep); } .kural{text-align:left} .kural .kn{font-size:11.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--gold-deep); font-family:var(--ui)} .kural .kl{font-size:20px; font-weight:600; line-height:1.5; margin-top:2px} .xpbar{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px} .goal{display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin-top:10px} .goal.hit{background:var(--teal-soft); border-color:var(--teal-line)} /* ---------- theme picker ---------- */ .theme{ display:block; width:100%; text-align:left; font-family:var(--ui); color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:var(--r-lg); padding:15px; margin-bottom:11px; cursor:pointer; box-shadow:var(--shadow); } .theme.on{border-color:var(--gold)} .theme:active{transform:scale(.99)} .swatches{display:flex; gap:0; flex:0 0 auto; border-radius:9px; overflow:hidden; border:1px solid var(--line)} .swatches i{display:block; width:26px; height:34px} /* close the chart's breakdown panel */ #cellPanel{position:relative} .closex{ position:absolute; top:6px; right:6px; width:34px; height:34px; border:1px solid var(--line); border-radius:10px; background:var(--paper-2); color:var(--ink-2); font-size:21px; line-height:1; cursor:pointer; display:grid; place-items:center; font-family:var(--ui); } .closex:active{background:var(--line)} /* light / auto / dark */ .seg{display:flex; gap:6px; background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:5px} .segbtn{ flex:1; min-height:44px; border:0; border-radius:10px; background:transparent; font-family:var(--ui); font-size:14.5px; font-weight:800; color:var(--ink-2); cursor:pointer; } .segbtn.on{background:var(--card); color:var(--ink); box-shadow:var(--shadow)} .segbtn:active{transform:scale(.98)}