/* Layout concept: dark green reading room. One gold voice, quiet surfaces, the waffle of the text as the hero object. */
:root{
  --bg:#0b241e;          /* page */
  --s1:#102f27;          /* surface */
  --s2:#173b31;          /* raised surface */
  --s3:#1d463a;          /* hover / selected */
  --line:rgba(224,185,94,.22);
  --line-soft:rgba(243,234,214,.10);
  --gold:#e0b95e;
  --gold-dim:#b9954a;
  --ivory:#f3ead6;
  --mut:#9fb5a9;
  --ok:#86d3a3;
  --bad:#ee9482;
  --f-display:"CG","Cormorant Garamond",Georgia,serif;
  --f-body:"SS3","Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-ar:"AmiriQ","Amiri","Noto Naskh Arabic","Geeza Pro",serif;
  --f-tr:"Amiri","Cormorant Garamond",Georgia,serif;
  --r1:6px;--r2:12px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:auto}
body{margin:0;background:var(--bg);color:var(--ivory);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--gold);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.ar{font-family:var(--f-ar);direction:rtl}
.tr{font-family:var(--f-tr);font-style:italic}
.wrap{max-width:1080px;margin-inline:auto;padding-inline:16px}
.eyebrow{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim);font-weight:600}
h1,h2,h3{font-family:var(--f-display);font-weight:700;margin:0;text-wrap:balance;line-height:1.05}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(11,36,30,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ivory);font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:.01em;background:none;border:0;padding:0}
.brand svg{width:26px;height:26px;color:var(--gold)}
.nav{display:none;gap:4px}
.nav a{padding:8px 12px;border-radius:var(--r1);color:var(--mut);text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:hover{color:var(--ivory)}
.nav a[aria-current="page"]{color:var(--gold);background:var(--s1)}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(11,36,30,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line-soft);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 8px;color:var(--mut);text-decoration:none;font-size:.7rem;font-weight:600;letter-spacing:.04em}
.tabs a svg{width:22px;height:22px}
.tabs a[aria-current="page"]{color:var(--gold)}
main{padding-bottom:96px;min-height:70vh}
@media(min-width:760px){.nav{display:flex}.tabs{display:none}main{padding-bottom:48px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r1);border:1px solid var(--gold);background:transparent;color:var(--gold);font-weight:700;font-size:1rem;text-decoration:none;transition:background .15s,transform .1s}
.btn:hover{background:rgba(224,185,94,.12)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--gold);color:#1a2a1f}
.btn.pri:hover{background:#ecc873}
.btn.sm{min-height:38px;padding:0 14px;font-size:.9rem}
.btn.ghost{border-color:var(--line-soft);color:var(--ivory)}
.btn[disabled]{opacity:.4;pointer-events:none}

/* home */
.hero{display:grid;gap:32px;padding-block:36px 24px}
.hero h1{font-size:clamp(2.5rem,8.5vw,5rem);letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p.lead{font-size:1.15rem;color:#d9cfb6;max-width:34em;margin:18px 0 26px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.waffle-box{background:var(--s1);border:1px solid var(--line-soft);border-radius:var(--r2);padding:18px}
.waffle-box h2{font-size:1.35rem;margin-bottom:4px}
.waffle-box .sub{color:var(--mut);font-size:.9rem;margin:0 0 14px}
.waffle{display:grid;grid-template-columns:repeat(20,1fr);gap:3px}
.waffle i{aspect-ratio:1;border-radius:2px;background:var(--c);transition:opacity .2s,transform .2s}
.waffle.dim i:not(.on){opacity:.18}
.legend{display:grid;gap:2px;margin-top:14px}
.legend button{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;background:none;border:0;padding:7px 4px;text-align:left;border-radius:var(--r1);color:var(--ivory)}
.legend button:hover,.legend button.on{background:var(--s2)}
.legend .sw{width:14px;height:14px;border-radius:3px;background:var(--c)}
.legend .pc{font-variant-numeric:tabular-nums;font-weight:700;color:var(--gold)}
.legend .lb{font-size:.92rem}
@media(min-width:900px){.hero{grid-template-columns:1.1fr .9fr;align-items:center;padding-block:64px 40px;gap:56px}}
.section{padding-block:40px}
.section>h2{font-size:clamp(1.8rem,5vw,2.6rem);margin-bottom:8px}
.section>p.intro{color:var(--mut);max-width:38em;margin:0 0 26px}
.trio{display:grid;gap:14px}
@media(min-width:760px){.trio{grid-template-columns:repeat(3,1fr)}}
.pane{background:var(--s1);border:1px solid var(--line-soft);border-radius:var(--r2);padding:20px}
.pane h3{font-size:1.4rem;margin-bottom:6px}
.pane p{margin:0;color:#d4cab2;font-size:.98rem}
.pane .big-ar{font-family:var(--f-ar);font-size:2.4rem;color:var(--gold);direction:rtl;line-height:1.5;margin-bottom:4px}
.split{display:grid;gap:22px;align-items:center}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr;gap:48px}}
.row-note{display:flex;gap:12px;align-items:flex-start;color:var(--mut);font-size:.9rem}
.foot{border-top:1px solid var(--line-soft);padding-block:28px 40px;color:var(--mut);font-size:.88rem}
.foot p{margin:0 0 8px;max-width:60em}

/* the word card (used in lists, flashcards, dialogs) */
.wcard{background:var(--s1);border:1px solid var(--line-soft);border-radius:var(--r2);overflow:hidden}
.wcard .hd{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:center;padding:18px 18px 14px;border-bottom:1px solid var(--line)}
.wcard .no{font-family:var(--f-display);font-weight:700;color:var(--gold);font-size:1.5rem;align-self:start}
.wcard .lem{font-family:var(--f-ar);color:var(--gold);font-size:3.2rem;line-height:1.5;text-align:center;direction:rtl}
.wcard .tr{font-size:1.2rem;text-align:center;grid-column:1/-1;margin-top:-6px}
.wcard .meaning{grid-column:1/-1;text-align:center;font-family:var(--f-display);font-weight:700;font-size:1.7rem;line-height:1.1;color:var(--ivory)}
.tag{display:inline-block;font-family:var(--f-body);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#1a2a1f;background:var(--gold-dim);padding:1px 7px;border-radius:99px;margin-left:8px;vertical-align:middle}
.wcard .fq{padding:10px 18px;color:var(--mut);font-size:.88rem;text-align:center}
.wcard .fq b{color:var(--ivory)}
.vers{padding:6px 18px 20px;text-align:center}
.vers .lab{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dim);font-weight:600;margin-bottom:4px}
.vers .va{font-family:var(--f-ar);font-size:1.9rem;line-height:1.9;direction:rtl}
.vers .va .hl,.hl{color:var(--gold)}
.vers .vi{font-style:italic;color:#e3d9c0;font-size:1rem;line-height:1.4;margin-top:4px}
.vers .vi mark{background:none;color:var(--gold);font-weight:600;font-style:normal}
.vers .ref{font-style:normal;color:var(--mut);font-size:.82rem}

/* words list */
.pagehead{padding-block:28px 12px}
.pagehead h1{font-size:clamp(2rem,6vw,3.2rem)}
.pagehead p{color:var(--mut);margin:6px 0 0}
.tools{position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:10;background:var(--bg);padding-block:10px;border-bottom:1px solid var(--line-soft)}
.search{width:100%;height:46px;border-radius:var(--r1);border:1px solid var(--line);background:var(--s1);color:var(--ivory);padding:0 14px;font:inherit;font-size:1rem}
.search::placeholder{color:var(--mut)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:34px;padding:0 14px;border-radius:99px;border:1px solid var(--line-soft);background:transparent;color:var(--mut);font-weight:600;font-size:.88rem;font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--gold);color:#1a2a1f;border-color:var(--gold)}
.list{display:grid;gap:0;margin-top:6px}
.row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-soft);padding:12px 4px;color:inherit}
.row:hover{background:var(--s1)}
.row .n{font-family:var(--f-display);font-weight:700;color:var(--gold-dim);font-size:1.1rem;font-variant-numeric:tabular-nums}
.row .m{min-width:0}
.row .m b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .m span{font-family:var(--f-tr);font-style:italic;color:var(--mut);font-size:.98rem}
.row .a{font-family:var(--f-ar);font-size:1.9rem;color:var(--ivory);direction:rtl;display:flex;align-items:center;gap:10px;line-height:1.5}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line-soft);flex:none}
.dot.mid{background:var(--gold-dim)}.dot.ok{background:var(--ok)}
.empty{padding:40px 8px;color:var(--mut);text-align:center}

/* dialog / sheet */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,16,13,.72)}
.sheet[hidden]{display:none}
.sheet .box{width:100%;max-width:560px;max-height:92svh;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--r2) var(--r2) 0 0;padding:14px 14px calc(18px + env(safe-area-inset-bottom,0px))}
@media(min-width:700px){.sheet{align-items:center}.sheet .box{border-radius:var(--r2)}}
.sheet .bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.iconbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:var(--s1);display:grid;place-items:center;color:var(--ivory)}
.iconbtn:hover{background:var(--s2)}
.iconbtn svg{width:18px;height:18px}
.sheet .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* train hub */
.levels{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.levels::-webkit-scrollbar{display:none}
.lv{flex:none;min-width:88px;padding:10px 12px;border-radius:var(--r1);border:1px solid var(--line-soft);background:var(--s1);text-align:left}
.lv small{display:block;color:var(--mut);font-size:.72rem;font-variant-numeric:tabular-nums}
.lv b{font-family:var(--f-display);font-size:1.15rem;font-variant-numeric:tabular-nums}
.lv .bar{height:3px;background:var(--line-soft);border-radius:3px;margin-top:8px;overflow:hidden}
.lv .bar i{display:block;height:100%;background:var(--gold)}
.lv[aria-pressed="true"]{border-color:var(--gold);background:var(--s2)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stat{background:var(--s1);border:1px solid var(--line-soft);border-radius:var(--r2);padding:12px 14px}
.stat b{display:block;font-family:var(--f-display);font-size:2rem;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:.78rem;color:var(--mut)}
.cov{background:var(--s1);border:1px solid var(--line-soft);border-radius:var(--r2);padding:14px 16px}
.cov .t{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;margin-bottom:8px}
.cov .t b{color:var(--gold);font-variant-numeric:tabular-nums}
.meter{height:8px;border-radius:99px;background:var(--bg);overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));border-radius:99px;transition:width .6s}
.games{display:grid;gap:12px;margin-top:18px}
@media(min-width:640px){.games{grid-template-columns:repeat(2,1fr)}}
.game{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;text-align:left;width:100%;background:var(--s1);border:1px solid var(--line-soft);border-radius:var(--r2);padding:16px;transition:border-color .15s,background .15s}
.game:hover{border-color:var(--gold);background:var(--s2)}
.game .ic{width:64px;height:64px;border-radius:var(--r1);background:var(--bg);display:grid;place-items:center;color:var(--gold);font-family:var(--f-ar);font-size:1.7rem;direction:rtl;line-height:1}
.game h3{font-size:1.35rem}
.game p{margin:2px 0 0;color:var(--mut);font-size:.92rem;line-height:1.35}
.game .rec{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;background:var(--gold);color:#1a2a1f;border-radius:99px;padding:1px 7px;font-weight:700;margin-left:8px;vertical-align:middle;font-family:var(--f-body)}

/* game overlay */
.play{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.play[hidden]{display:none}
.ph{display:flex;align-items:center;gap:12px;padding:10px 14px}
.ph .meter{flex:1}
.ph .ttl{font-weight:600;font-size:.9rem;color:var(--mut);min-width:0;white-space:nowrap}
.pb{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:8px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.pin{width:100%;max-width:560px;display:flex;flex-direction:column;gap:14px;flex:1}
.q{text-align:center;padding:18px 8px 6px}
.q .qa{font-family:var(--f-ar);font-size:clamp(3.6rem,18vw,5.4rem);color:var(--gold);line-height:1.5;direction:rtl}
.q .qt{font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,10vw,3.2rem);line-height:1.1}
.q .qh{color:var(--mut);font-size:.88rem;margin-top:2px;min-height:1.4em}
.opts{display:grid;gap:10px}
.opt{min-height:60px;padding:10px 16px;border-radius:var(--r1);border:1px solid var(--line);background:var(--s1);text-align:center;font-size:1.1rem;font-weight:600;transition:background .12s,border-color .12s,transform .1s;display:flex;align-items:center;justify-content:center}
.opt.arb{font-family:var(--f-ar);font-size:2rem;font-weight:400;direction:rtl}
.opt:hover{background:var(--s2)}
.opt.ok{background:rgba(134,211,163,.16);border-color:var(--ok);color:var(--ok)}
.opt.bad{background:rgba(238,148,130,.14);border-color:var(--bad);color:var(--bad)}
.opt:disabled{cursor:default}
.fb{min-height:52px;text-align:center;color:var(--mut);font-size:.95rem}
.fb b{color:var(--ivory)}
.fb .ar{font-size:1.5rem;color:var(--gold);vertical-align:middle}
.nextbar{margin-top:auto;padding-top:6px}
.nextbar .btn{width:100%}
.verse-q{background:var(--s1);border:1px solid var(--line-soft);border-radius:var(--r2);padding:18px 14px;text-align:center}
.verse-q .va{font-family:var(--f-ar);font-size:clamp(1.7rem,7vw,2.3rem);line-height:2;direction:rtl}
.blank{display:inline-block;min-width:3.2em;border-bottom:2px solid var(--gold);color:transparent;margin-inline:.1em;transition:color .2s}
.blank.shown{color:var(--gold);border-color:transparent}
.verse-q .vi{font-style:italic;color:#e3d9c0;margin-top:6px;line-height:1.4}
.opts.two{grid-template-columns:1fr 1fr}
.opts.two .opt.arb{font-size:1.7rem}
/* flashcard */
.flip{perspective:1200px;flex:1;min-height:340px;display:flex}
.flip .in{position:relative;width:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.7,.2,1)}
.flip.turned .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r2);border:1px solid var(--line);background:var(--s1);overflow:auto}
.face.front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.face.front .qa{font-family:var(--f-ar);font-size:clamp(4.4rem,22vw,7rem);color:var(--gold);line-height:1.4;direction:rtl}
.face.front .hint{color:var(--mut);font-size:.85rem;letter-spacing:.08em}
.face.back{transform:rotateY(180deg);background:var(--s1)}
.face.back .wcard{border:0;background:none}
.face.back .wcard .lem{font-size:2.6rem;line-height:1.35}
.face.back .wcard .hd{padding:12px 14px 8px}
.face.back .meaning{font-size:1.5rem}
.face.back .vers .va{font-size:1.55rem;line-height:1.8}
.rate{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.rate .btn{min-height:54px}
.rate[hidden]{display:none}
.res{text-align:center;padding:30px 8px;display:flex;flex-direction:column;gap:14px;align-items:center}
.res h2{font-size:2.4rem}
.res .big{font-family:var(--f-display);font-weight:700;font-size:4.2rem;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.res p{margin:0;color:var(--mut)}
.res .btns{display:flex;flex-direction:column;gap:10px;width:100%;max-width:360px;margin-top:8px}
/* pairs */
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pairs .col{display:grid;gap:10px;align-content:start}
.tile{min-height:64px;padding:8px;border-radius:var(--r1);border:1px solid var(--line);background:var(--s1);display:flex;align-items:center;justify-content:center;text-align:center;font-weight:600;line-height:1.2;transition:background .12s,opacity .3s,border-color .12s}
.tile.arb{font-family:var(--f-ar);font-size:1.9rem;font-weight:400;direction:rtl}
.tile.sel{border-color:var(--gold);background:var(--s3)}
.tile.done{opacity:.28;pointer-events:none;border-color:var(--ok)}
.tile.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.pairs-info{display:flex;justify-content:space-between;color:var(--mut);font-size:.9rem}

/* book */
.bookwrap{display:flex;flex-direction:column;min-width:0}
.bookbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding-block:8px 12px}
.bookbar .grp{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pin-num{width:64px;height:40px;border-radius:var(--r1);border:1px solid var(--line);background:var(--s1);color:var(--ivory);text-align:center;font:inherit;font-variant-numeric:tabular-nums}
.bookstage{position:relative;display:flex;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#16392f 0,#0b241e 70%);border-radius:var(--r2);border:1px solid var(--line-soft);padding:14px 0;overflow:hidden}
#flip{width:100%;height:min(calc(100svh - 280px),820px);min-height:380px}
.fp{background:#0e2b24;overflow:hidden}
.fp .ph-load{position:absolute;inset:0;display:grid;place-items:center;color:var(--mut);font-size:.8rem}
.booknote{color:var(--mut);font-size:.85rem;margin:10px 0 0}

/* install */
.steps{margin:10px 0 0;padding-left:1.1em;color:#d4cab2}
.steps li{margin:4px 0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--s3);border:1px solid var(--line);padding:10px 16px;border-radius:99px;z-index:90;font-size:.92rem}
.toast[hidden]{display:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.flip .in{transition:none}}

/* ===== Revision: less template, more point of view ===== */
:root{--r1:3px;--r2:6px;--f-display:"Amiri","CG",Georgia,serif}
h1,h2,h3{font-weight:700;line-height:1.14;letter-spacing:0}
.top,.tabs{backdrop-filter:none;background:var(--bg)}
.eyebrow,.no small,.mean small,.vers .lab,.tag,.rec{text-transform:none;letter-spacing:.01em}
.eyebrow{font-size:.9rem;font-weight:400;color:var(--mut)}
.vers .lab,.no small,.mean small{font-size:.78rem}
.tag,.rec{font-size:.72rem}
.brand{font-size:1.2rem}
.home{padding-block:clamp(28px,6vw,72px) 0}
.hero2{display:grid;gap:28px}
.hero-copy{grid-area:copy}.hero-book{grid-area:book;min-width:0}.hero-word{grid-area:word}
.hero2{grid-template-areas:"copy" "book" "word"}
@media(min-width:880px){.hero2{grid-template-columns:7fr 5fr;gap:36px 64px;grid-template-areas:"copy word" "book book";align-items:center}}
.hero-copy h1{font-size:clamp(2.3rem,6.2vw,3.9rem);max-width:14em}
.hero-copy p{max-width:32em;font-size:1.1rem;color:#d4cab2;margin:18px 0 26px}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.lnk{background:none;border:0;padding:0;color:var(--gold);text-decoration:underline;text-underline-offset:5px;font:inherit;font-weight:600;cursor:pointer}
.hero-word{border:1px solid var(--line);border-radius:var(--r2);background:linear-gradient(180deg,var(--s1),rgba(255,255,255,0)) ,#0e2b24;padding:16px 22px 18px;display:flex;flex-direction:column;gap:2px;box-shadow:inset 0 0 0 1px rgba(201,162,75,.08)}
.hw-lab{font-size:.82rem;color:var(--mut);padding-bottom:2px}
.hw-ar{font-family:var(--f-ar);font-size:clamp(4.4rem,17vw,7rem);line-height:1.5;padding-top:.25em;color:var(--gold);direction:rtl;text-align:right;transition:opacity .45s}
.hw-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;transition:opacity .45s}
.hw-gl{font-family:var(--f-display);font-weight:700;font-size:1.9rem}
.hw-tr{font-family:var(--f-tr);font-style:italic;color:var(--mut);font-size:1.15rem}
.hw-n{color:var(--mut);font-size:.88rem;font-variant-numeric:tabular-nums;transition:opacity .45s}
.hero-word.out .hw-ar,.hero-word.out .hw-meta,.hero-word.out .hw-n{opacity:0}
.sec{padding-block:72px 0}
.sec h2{font-size:clamp(1.7rem,4.5vw,2.4rem);margin-bottom:8px}
.sec .lede{color:var(--mut);max-width:38em;margin:0 0 30px}
.wf-grid{display:grid;gap:30px}
@media(min-width:820px){.wf-grid{grid-template-columns:minmax(0,380px) 1fr;gap:64px;align-items:start}}
.legend{margin-top:0}
.legend button{border-bottom:1px solid var(--line-soft);border-radius:0;padding:11px 0}
.legend button:first-child{border-top:1px solid var(--line)}
.legend button:hover,.legend button.on{background:none;color:var(--gold)}
.fine{color:var(--mut);font-size:.9rem;max-width:34em;margin:16px 0 0}
.rows3{border-top:1px solid var(--line)}
.r3{display:grid;grid-template-columns:minmax(0,10rem) 1fr auto;gap:8px 28px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit}
.r3 .k{font-family:var(--f-display);font-weight:700;font-size:1.6rem}
.r3 .d{color:#d4cab2}
.r3 .go{color:var(--gold)}
.r3:hover .k{color:var(--gold)}
@media(max-width:600px){.r3{grid-template-columns:1fr auto}.r3 .d{grid-column:1/-1;order:3}}
.top10{display:grid;column-gap:64px}
@media(min-width:760px){.top10{grid-template-columns:1fr 1fr}}
.t10{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:11px 0;border:0;border-bottom:1px solid var(--line-soft);background:none;text-align:left;color:inherit;width:100%}
.t10:hover b{color:var(--gold)}
.t10 .n{color:var(--gold-dim);font-variant-numeric:tabular-nums}
.t10 b{font-weight:600}.t10 i{font-family:var(--f-tr);color:var(--mut);margin-left:8px}
.t10 .a{font-family:var(--f-ar);font-size:1.8rem;direction:rtl;line-height:1.3}
.colo{margin-top:80px;border-top:1px solid var(--line);padding-block:26px 56px;display:grid;gap:22px;color:var(--mut);font-size:.92rem}
@media(min-width:820px){.colo{grid-template-columns:1fr 1fr;gap:64px}}
.colo p{margin:0 0 8px;max-width:36em}.colo b{color:var(--ivory)}
.colo .links{display:flex;flex-wrap:wrap;gap:6px 22px}
.statline{font-size:1.02rem;margin:18px 0 16px;color:var(--mut)}
.statline b{font-family:var(--f-display);font-size:1.7rem;color:var(--gold);font-weight:700;margin-right:3px}
.cov{background:none;border:0;border-top:1px solid var(--line-soft);border-radius:0;padding:14px 0}
.games{gap:0;border-top:1px solid var(--line);margin-top:22px}
.game{background:none;border:0;border-bottom:1px solid var(--line-soft);border-radius:0;padding:20px 0}
.game:hover{background:none}.game:hover h3{color:var(--gold)}
.game .ic{background:none;border:1px solid var(--line)}
.game h3{font-size:1.5rem}
.pagehead h1{font-size:clamp(2.1rem,6vw,3.2rem)}
.wcard{border-radius:var(--r2)}
.stat{display:none}

/* book fullscreen */
.iconbtn .i-exit{display:none}
.bookwrap.fs .iconbtn .i-exit{display:block}.bookwrap.fs .iconbtn .i-enter{display:none}
.bookwrap.fs{position:fixed;inset:0;z-index:100;background:#0b241e;padding:calc(10px + env(safe-area-inset-top,0px)) 14px calc(10px + env(safe-area-inset-bottom,0px))}
.bookwrap.fs .bookstage{flex:1;min-height:0;border-radius:var(--r1);padding:6px 0}
.bookwrap.fs #flip{height:100%;min-height:0}
.bookwrap.fs .bookdl,.bookwrap.fs .booknote,.bookwrap.fs .wl{display:none}
body.fs-lock{overflow:hidden}
@media(max-width:560px){.bookbar .wl,.bookbar #wordgo{display:none}.bookbar{flex-wrap:nowrap}.bookbar .grp{flex-wrap:nowrap}}
.btn .ico{width:18px;height:18px;margin-right:8px;vertical-align:-3px}

/* pronuncia */
.spk{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--s1);color:var(--gold);cursor:pointer;flex:none;padding:0;vertical-align:middle}
.spk svg{width:20px;height:20px}
.spk:hover{background:var(--s2)}
.spk.on{background:var(--gold);color:#0b241e;border-color:var(--gold)}
html.nospeech .spk{display:none!important}
.hw-lab{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hw-lab .spk{width:44px;height:44px}
.wcard .hd{position:relative}
.wcard .hd .spk{position:absolute;top:14px;right:14px}
.q .spk,.face.front .spk{display:grid;place-items:center;margin:6px auto 0}
.spk svg{display:block;margin:auto;transform:translateX(1px)}
.fb .spk{width:34px;height:34px;margin:0 4px;vertical-align:middle}.fb .spk svg{width:17px;height:17px}
.toast[hidden]{display:none}

/* aspetto "app": solo quando il sito e' aperto dalla schermata Home */
.appstat{display:none}
.app .appstat{display:block;background:var(--s1);border:1px solid var(--line-soft);border-radius:var(--r2);padding:14px 16px;margin:0 0 16px}
.appstat .as-row{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:.95rem;color:var(--mut)}
.appstat .as-row b{color:var(--gold);font-size:1.3rem;font-family:var(--f-display)}
.appstat .as-row #as-due{color:var(--ivory)}
.app .hero-copy p,.app .hero-copy .lnk,.app .home .sec,.app footer.colo,.app .top .nav,.app .bookdl,.app .booknote,.app [data-install]{display:none!important}
.app .hero-copy h1{font-size:clamp(1.6rem,6.4vw,2.2rem);margin-bottom:14px}
.app .hero-copy .acts .btn{width:100%}
.app .home{padding-block:14px 0}
.app .hero2{grid-template-columns:1fr;grid-template-areas:"copy" "word" "book";gap:18px}
.app .hero-word{padding:12px 18px 14px}
.app .top{padding-top:env(safe-area-inset-top,0px)}
.app main{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}

/* schermata iniziale: solo quando aperto come app */
.splash{display:none;position:fixed;inset:0;z-index:300;background:radial-gradient(ellipse at 50% 40%,#16392f 0,#0b241e 70%);color:var(--gold);flex-direction:column;align-items:center;justify-content:center;gap:14px;animation:splOut .55s ease 1.7s forwards}
@media (display-mode: standalone){.splash{display:flex}}
.app .splash{display:flex}
.splash svg{width:96px;height:96px;animation:splIn 1.1s cubic-bezier(.2,.7,.2,1) both}
.splash .sp-t{font-family:var(--f-display);font-weight:700;font-size:1.7rem;color:var(--ivory);animation:splUp .8s .25s both}
.splash .sp-s{font-size:.9rem;color:var(--mut);animation:splUp .8s .45s both}
@keyframes splIn{from{opacity:0;transform:scale(.7) rotate(-30deg)}to{opacity:1;transform:none}}
@keyframes splUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes splOut{to{opacity:0;visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.splash{animation-duration:.01s;animation-delay:1.2s}.splash *{animation:none!important}}