@font-face{font-family:"Marcellus";src:url(fonts/marcellus-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-variable.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Basle Thaana";src:url(fonts/thaana-waheed.woff2) format("woff2");size-adjust:118%;unicode-range:U+0780-07BF,U+060C,U+061B,U+061F,U+FDF2;font-display:block}
/* Layout: one-screen game column (board over a two-step Thaana keyboard); on wide screens a notes panel sits beside it. English or Dhivehi (right to left) interface. */
:root{
  --bg:#F0EDE6; --surface:#FBF9F4; --ink:#2A2224; --muted:#6E6461; --line:#D9D2C7;
  --accent:#8C363F; --on-accent:#F6F1E7; --scrim:rgba(42,34,36,.45);
  --g:#4E7D59; --y:#BF8F28; --x:#8D8681; --r:#2E6A98; --on-tile:#FFFDF8;
  --key:#E3DDD2; --key-ink:#2A2224; --tried:#CBC4B9; --tried-ink:#7B726D;
  --f-display:'Marcellus', Georgia, serif;
  --f-body:'Newsreader', Georgia, serif;
  --f-ui:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-thaana:'Basle Thaana','MV Waheed', sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1B1718; --surface:#262022; --ink:#EDE6DA; --muted:#A79D96; --line:#3C3436;
    --accent:#B9545F; --on-accent:#FFF8EE; --scrim:rgba(0,0,0,.6);
    --g:#5C976A; --y:#C99F42; --x:#4F4846; --r:#5A92C3; --on-tile:#FFFDF8;
    --key:#3A3335; --key-ink:#EDE6DA; --tried:#2A2426; --tried-ink:#7D736E; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1B1718; --surface:#262022; --ink:#EDE6DA; --muted:#A79D96; --line:#3C3436;
  --accent:#B9545F; --on-accent:#FFF8EE; --scrim:rgba(0,0,0,.6);
  --g:#5C976A; --y:#C99F42; --x:#4F4846; --r:#5A92C3; --on-tile:#FFFDF8;
  --key:#3A3335; --key-ink:#EDE6DA; --tried:#2A2426; --tried-ink:#7D736E; color-scheme:dark;
}
body[data-bt="sail"]{
  --bg:#F0EDE6; --surface:#FBF9F4; --ink:#2A2224; --muted:#6E6461; --line:#D9D2C7;
  --accent:#8C363F; --on-accent:#F6F1E7; --scrim:rgba(42,34,36,.45);
  --g:#4E7D59; --y:#BF8F28; --x:#8D8681; --r:#2E6A98;
  --key:#E3DDD2; --key-ink:#2A2224; --tried:#CBC4B9; --tried-ink:#7B726D; color-scheme:light;
}
body[data-bt="dark"]{
  --bg:#1B1718; --surface:#262022; --ink:#EDE6DA; --muted:#A79D96; --line:#3C3436;
  --accent:#B9545F; --on-accent:#FFF8EE; --scrim:rgba(0,0,0,.6);
  --g:#5C976A; --y:#C99F42; --x:#4F4846; --r:#5A92C3;
  --key:#3A3335; --key-ink:#EDE6DA; --tried:#2A2426; --tried-ink:#7D736E; color-scheme:dark;
}
body[data-bt="canopus"]{
  --bg:#000; --surface:#0E0D0C; --ink:#F0EDE6; --muted:#A8A196; --line:#2A2825;
  --accent:#E8DCC4; --on-accent:#000; --scrim:rgba(0,0,0,.7);
  --g:#55906A; --y:#C49A3E; --x:#3E3B38; --r:#6A9DCB;
  --key:#1D1C1A; --key-ink:#F0EDE6; --tried:#121110; --tried-ink:#6E685F; color-scheme:dark;
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%; margin:0}
img{max-width:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--f-ui);
  font-variant-numeric:lining-nums tabular-nums;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  overflow:hidden;
}
button,a{font:inherit; color:inherit; font-variant-numeric:lining-nums tabular-nums}
button:focus-visible,a:focus-visible,.chip:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.th{font-family:var(--f-thaana)}

#sky{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.app{position:relative; z-index:1; height:100%; display:grid; grid-template-columns:minmax(0,480px); grid-template-rows:minmax(0,100%); justify-content:center; gap:56px}
@media (min-width:920px){ .app{grid-template-columns:minmax(0,460px) 320px} }

/* ---- game column ---- */
.game{
  --rows:6;
  --tile:clamp(28px, min(calc((100vh - 444px) / (var(--rows) + .3)), calc((100vw - 64px) / 4)), 62px);
  height:100%; min-height:0; overflow:hidden; display:flex; flex-direction:column; min-width:0; position:relative;
}
@supports (height:100dvh){ .game{--tile:clamp(28px, min(calc((100dvh - 444px) / (var(--rows) + .3)), calc((100vw - 64px) / 4)), 62px)} }
.game{--tile:clamp(28px, min(calc((100vh - 444px - var(--extra, 0px)) / (var(--rows) + .3)), calc((100vw - 64px) / 4)), 62px)}
@supports (height:100dvh){ .game{--tile:clamp(28px, min(calc((100dvh - 444px - var(--extra, 0px)) / (var(--rows) + .3)), calc((100vw - 64px) / 4)), 62px)} }
.bar{display:grid; grid-template-columns:96px 1fr 96px; align-items:center; padding-block:6px 2px}
.side{display:flex; gap:4px; position:relative}
.side.end{justify-content:flex-end}
.iconbtn{width:44px; height:44px; border:0; background:transparent; border-radius:12px; display:grid; place-items:center; cursor:pointer; color:var(--ink); position:relative; flex:none}
.iconbtn:hover{background:var(--key)}
.iconbtn svg{width:22px; height:22px}
.langbtn{font-size:12px; font-weight:700; letter-spacing:.02em}
.langbtn .th{font-size:15px; font-weight:400}
.badge{position:absolute; top:4px; inset-inline-end:3px; min-width:16px; height:16px; border-radius:8px; background:var(--accent); color:var(--on-accent); font-size:10px; font-weight:700; display:grid; place-items:center; padding:0 4px; font-family:var(--f-ui)}
.mark{text-align:center; line-height:1; direction:ltr}
.mark b{display:block; font-family:var(--f-display); font-weight:400; font-size:26px; letter-spacing:.16em; color:var(--accent); padding-left:.16em}
.mark small{display:block; font-family:var(--f-display); font-size:10px; letter-spacing:.3em; color:var(--muted); margin-top:3px; padding-left:.3em}
.meta{display:flex; justify-content:center; align-items:center; gap:4px 8px; flex-wrap:wrap; font-size:13px; color:var(--muted); min-height:30px; text-align:center}
.meta b{color:var(--ink)}
.meta .tag{font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line); border-radius:99px; padding:2px 8px}
.linkbtn{border:0; background:none; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:6px 2px; font-size:13px}
.levels{display:flex; justify-content:center; padding-block:2px 4px}
.seg{display:inline-grid; grid-template-columns:1fr 1fr; background:var(--key); border-radius:13px; padding:3px; gap:3px}
.seg button{border:0; background:transparent; border-radius:10px; min-height:44px; padding:0 14px; cursor:pointer; font-size:14px; color:var(--key-ink); display:flex; gap:6px; align-items:center; justify-content:center}
.seg button small{color:var(--muted); font-size:12px}
.seg button[aria-checked="true"]{background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.15); font-weight:600}

.boardwrap{flex:1; display:grid; place-items:center; min-height:0; position:relative}
.board{display:grid; gap:6px}
.row{display:grid; grid-template-columns:repeat(var(--n, 4), var(--tile-w, var(--tile))); gap:6px; direction:rtl}
.tile{position:relative; width:var(--tile-w, var(--tile)); height:var(--tile); border-radius:10px; border:2px solid var(--line); background:var(--surface); display:grid; place-items:center}
.tile .gl{font-family:var(--f-thaana); font-size:calc(var(--tile) * .6); line-height:1; direction:rtl; transform:translateY(-4%)}
.tile.filled{border-color:var(--muted)}
.tile.pending{border-color:var(--accent); border-style:dashed}
.tile.pending .gl{opacity:.75}
.tile.pending::before{content:'+'; position:absolute; bottom:1px; font-size:11px; color:var(--accent); font-family:var(--f-ui)}
.tile.g{background:var(--g); border-color:var(--g); color:var(--on-tile)}
.tile.y{background:var(--y); border-color:var(--y); color:var(--on-tile)}
.tile.x{background:var(--x); border-color:var(--x); color:var(--on-tile)}
.tile.l{background:var(--surface); border:3px solid var(--y); color:var(--ink)}
.tile.r{background:color-mix(in srgb, var(--r) 16%, var(--surface)); border-color:var(--r); color:var(--ink)}
.tile.r::after{content:''; position:absolute; inset:7% auto; left:50%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%; border:3px solid var(--r)}
.row.reveal .tile{animation:flip .5s ease both; animation-delay:calc(var(--i) * 230ms)}
.row.reveal .tile.r::after{animation:ringin .5s ease both; animation-delay:calc(var(--i) * 230ms)}
@keyframes flip{
  0%{transform:rotateX(0); background:var(--surface); border-color:var(--muted); color:var(--ink)}
  49%{transform:rotateX(90deg); background:var(--surface); border-color:var(--muted); color:var(--ink)}
  50%{transform:rotateX(90deg)}
  100%{transform:rotateX(0)}
}
@keyframes ringin{0%,50%{opacity:0} 100%{opacity:1}}
.row.shake{animation:shake .38s ease}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

.toast{
  position:absolute; top:6px; left:0; right:0; margin:0 auto; width:fit-content; max-width:min(520px, calc(100% - 16px));
  background:var(--ink); color:var(--bg); border-radius:14px; padding:9px 14px; font-size:14px; text-align:center;
  opacity:0; transform:translateY(-6px); transition:opacity .18s, transform .18s; pointer-events:none; z-index:5;
}
.toast.on{opacity:1; transform:none}

.hintline{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; font-size:13.5px; color:var(--muted); padding-block:6px 0; min-height:26px; align-items:center}
.hintline .h{display:inline-flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--y) 16%, var(--surface)); border:1px solid color-mix(in srgb, var(--y) 45%, var(--line)); color:var(--ink); border-radius:99px; padding:2px 10px; white-space:nowrap}
.hintline .th{font-size:18px; line-height:1.2}

/* ---- keyboard ---- */
.kb{padding-block:8px 10px; display:grid; gap:6px; direction:rtl}
.krow{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:6px}
.key{height:48px; min-width:0; border:0; border-radius:10px; background:var(--key); color:var(--key-ink); cursor:pointer; position:relative; display:grid; place-items:center; touch-action:manipulation}
.key:active{transform:translateY(1px)}
.key .gl{font-family:var(--f-thaana); font-size:24px; line-height:1}
.key .lat{position:absolute; top:3px; inset-inline-start:5px; font-size:9.5px; opacity:.6; direction:ltr; line-height:1}
.key.syll .gl{transform:translateY(4px)}
body.dv .key .lat{display:none}
body.dv .key.syll .gl{transform:none}
.key.g{background:var(--g); color:var(--on-tile)}
.key.y{background:var(--y); color:var(--on-tile)}
.key.x{background:var(--x); color:var(--on-tile)}
.key.r{background:color-mix(in srgb, var(--r) 18%, var(--key)); box-shadow:inset 0 0 0 3px var(--r)}
.key.l{box-shadow:inset 0 0 0 3px var(--y)}
.key.t{background:var(--tried); color:var(--tried-ink)}
.kfoot{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.wide{height:46px; border:0; border-radius:10px; cursor:pointer; font-size:15px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; direction:ltr; text-decoration:none}
body.dv .wide{direction:rtl; font-weight:400}
.wide.go{background:var(--accent); color:var(--on-accent)}
.wide.plain{background:var(--key); color:var(--key-ink)}
.wide[disabled]{opacity:.5; cursor:default}
.wide svg{width:22px; height:22px}
.fhead{direction:ltr; display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; color:var(--muted); min-height:24px}
body.dv .fhead{direction:rtl}
.fhead .gl{font-family:var(--f-thaana); font-size:22px; color:var(--ink)}

/* ---- notes panel ---- */
.notes{display:none; padding-block:28px; overflow:auto; min-width:0}
@media (min-width:920px){ .notes{display:block} }
.notes h2,.panel h2{font-family:var(--f-display); font-weight:400; font-size:22px; margin:0 0 6px; letter-spacing:.02em; text-wrap:balance}
.notes h3,.panel h3{font-family:var(--f-ui); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:22px 0 10px}
.notes p,.panel p{font-family:var(--f-body); font-size:16px; line-height:1.5; margin:0 0 10px; max-width:60ch}
.notes ul{font-family:var(--f-body); font-size:15.5px; line-height:1.45; padding-inline-start:18px; margin:0}
.notes li{margin-bottom:6px}
.legend{display:grid; gap:10px}
.lg{display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:center; font-family:var(--f-body); font-size:15px; line-height:1.3}
.lg .tile{--tile:34px; border-radius:8px}
.lg .tile .gl{font-size:17px}
.chips{display:flex; flex-wrap:wrap; gap:8px; direction:rtl}
.chip{border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:6px 10px 4px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; min-height:44px; min-width:64px}
.chip .gl{font-family:var(--f-thaana); font-size:20px; line-height:1.15}
.chip small{font-size:11px; color:var(--muted); direction:ltr}
.chip:hover{border-color:var(--accent)}
.switch{display:flex; align-items:center; gap:12px; font-family:var(--f-body); font-size:15px; line-height:1.35; cursor:pointer; min-height:44px}
.switch input{width:22px; height:22px; accent-color:var(--accent); flex:none}

/* ---- sheets ---- */
.sheet{position:fixed; inset:0; z-index:40; background:var(--scrim); display:flex; align-items:flex-end; justify-content:center}
@media (min-width:640px){ .sheet{align-items:center} }
.panel{
  background:var(--surface); color:var(--ink); width:min(520px, 100%); max-height:90%; overflow:auto;
  border-radius:20px 20px 0 0; padding-block:18px calc(20px + env(safe-area-inset-bottom, 0px));
  padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px));
  box-shadow:0 -10px 40px rgba(0,0,0,.18);
}
@media (min-width:640px){ .panel{border-radius:20px} }
.phead{display:flex; justify-content:space-between; align-items:center; gap:12px}
.ex{display:grid; gap:6px; margin:6px 0 4px}
.ex .row{--tile:44px}
.ex .tile .gl{font-size:22px}
.excap{font-family:var(--f-body); font-size:15px; line-height:1.4; color:var(--muted); margin:6px 0 14px}
.excap .th{color:var(--ink); font-size:17px}
/* result sheet */
.result .phead{align-items:flex-start}
.rhead{min-width:0}
.result .eyebrow{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.result h2{font-family:var(--f-display); font-weight:400; font-size:30px; line-height:1.15; margin:4px 0 2px}
.rsub{margin:0; font-size:14px; color:var(--muted)}
.wordcard{margin-top:16px; padding:18px 16px 16px; border-radius:16px; text-align:center;
  background:color-mix(in srgb, var(--g) 9%, var(--surface)); border:1px solid color-mix(in srgb, var(--g) 28%, var(--line))}
.wordcard .wordrow{--tile:58px; --tile-w:62px; justify-content:center; margin-bottom:12px}
.wordcard .wordrow .tile{border-radius:12px}
.wordcard .wordrow .gl{font-size:36px}
.wordcard .lat{font-family:var(--f-body); font-style:italic; font-size:17px; color:var(--muted); line-height:1.3}
.wordcard .enl{display:block; font-size:13px; color:var(--muted)}
.wordcard .en{font-family:var(--f-body); font-size:19px; line-height:1.35; margin-top:2px; text-wrap:balance}
.sharecard{width:100%; font:inherit; color:inherit; cursor:pointer; display:grid; justify-items:center; gap:10px; padding:16px; border-radius:16px; border:1px dashed var(--line); background:var(--bg)}
.shead{font-size:14px; font-weight:600; letter-spacing:.01em}
.mgrid{display:grid; gap:5px}
.mrow{display:flex; gap:5px; direction:rtl}
.mrow i{width:24px; height:24px; border-radius:6px; background:var(--x); position:relative; display:block}
.mrow i.g{background:var(--g)} .mrow i.y{background:var(--y)}
.mrow i.l{background:transparent; box-shadow:inset 0 0 0 3px var(--y)}
.mrow i.r{background:transparent; box-shadow:inset 0 0 0 0 var(--r)}
.mrow i.r::after{content:''; position:absolute; inset:3px; border-radius:50%; border:3px solid var(--r)}
.surl{font-size:12.5px; color:var(--muted); letter-spacing:.02em}
.snote{text-align:center; font-family:var(--f-body); font-size:14px; color:var(--muted); margin:8px 0 0}
.actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; position:sticky; bottom:calc(-20px - env(safe-area-inset-bottom, 0px)); z-index:2;
  background:var(--surface); padding-block:10px calc(10px + env(safe-area-inset-bottom, 0px)); margin-inline:-4px; padding-inline:4px}
.sharecard:active{transform:scale(.985)}
.kfoot.done .sharego{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); animation:sharepulse 2.4s ease-out 1s 3}
@keyframes sharepulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent)} 70%,100%{box-shadow:0 0 0 12px transparent}}
.actions #shareBtn{grid-column:1 / -1; height:50px; font-size:16px}
.cdcard{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:grid; justify-items:center; gap:2px}
.cdcard .cdl{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.cdcard b{font-size:28px; font-weight:600; letter-spacing:.03em; font-family:var(--f-ui)}
.cdcard .cdw{font-size:13px; color:var(--muted)}
body.dv .result .eyebrow, body.dv .cdcard .cdl{letter-spacing:0; text-transform:none; font-size:14px}
body.dv .result h2{font-family:var(--f-thaana); font-size:26px; line-height:1.6}
body.dv .rsub, body.dv .snote, body.dv .cdcard .cdw{line-height:1.8}
body.dv .shead, body.dv .surl{font-family:var(--f-ui)}
.onlyphone{display:block}
@media (min-width:920px){ .onlyphone{display:none} }
.hlist{display:grid; gap:10px; margin:10px 0 4px; padding:0; list-style:none}
.hlist li{display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:center; font-family:var(--f-body); font-size:16px; line-height:1.4; border:1px solid var(--line); border-radius:12px; padding:10px 12px}
.hlist .n{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--key); font-family:var(--f-ui); font-size:13px; font-weight:700}
.hlist li.open .n{background:var(--y); color:var(--on-tile)}
.hlist li.locked{color:var(--muted)}
.hlist .th{font-size:22px; color:var(--ink)}

/* first-game coach */
/* the tip floats over the board's empty bottom rows, so it never shrinks the tiles (it only shows in the first game) */
.coach{position:absolute; left:0; right:0; bottom:6px; z-index:4; box-shadow:0 6px 18px rgba(0,0,0,.12); display:flex; align-items:center; gap:10px; padding:8px 8px 8px 14px; border-radius:14px; background:color-mix(in srgb, var(--accent) 10%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); font-size:14.5px; line-height:1.35}
.coach .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; animation:pulse 1.6s ease-in-out infinite}
.coach span{flex:1; min-width:0}
.coach button{border:0; background:var(--accent); color:var(--on-accent); border-radius:10px; min-height:36px; padding:0 12px; cursor:pointer; font-size:13px; font-weight:600; white-space:nowrap}
@keyframes pulse{50%{transform:scale(1.6); opacity:.5}}
.key.nudge{box-shadow:0 0 0 3px var(--accent)}
body.dv .coach{font-size:16px; line-height:1.7}

/* walkthrough */
.tour .stage{min-height:150px; display:grid; place-items:center; padding-block:10px 4px}
.tour h2{margin-top:4px}
.tour .steps{display:flex; justify-content:center; gap:6px; margin:14px 0 2px}
.tour .steps i{width:8px; height:8px; border-radius:50%; background:var(--line)}
.tour .steps i.on{background:var(--accent); width:22px; border-radius:4px}
.tour .count{font-size:12px; color:var(--muted); text-align:center; margin-top:6px}
.tour .nav{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.tour .skip{display:block; margin:10px auto 0; border:0; background:none; color:var(--muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:36px; font-size:14px}
.flow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center}
.flow .arrow{font-size:20px; color:var(--muted)}
.flow .key{width:52px; height:52px}
.flow .cap{display:block; font-size:11.5px; color:var(--muted); text-align:center; margin-top:6px}
.mini, .mini .row, .flow .mini{--tile:46px}
.mini .tile{width:46px; height:46px}
.mini .tile .gl{font-size:23px}
.tour .legend{margin-top:12px; width:100%}
.minibulb{display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap}
.minibulb .bulb{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--y) 22%, var(--surface)); border:1px solid color-mix(in srgb, var(--y) 50%, var(--line))}
.minibulb .bulb svg{width:28px; height:28px}

/* theme menu */
.menu{position:absolute; top:52px; inset-inline-end:0; z-index:30; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.18); min-width:180px}
.menu button{width:100%; display:flex; align-items:center; gap:10px; border:0; background:none; padding:10px; border-radius:10px; cursor:pointer; font-size:15px; min-height:44px; text-align:start}
.menu button:hover{background:var(--key)}
.menu svg{width:20px; height:20px; flex:none}
.menu .tick{margin-inline-start:auto; color:var(--accent); visibility:hidden}
.menu button[aria-checked="true"] .tick{visibility:visible}

/* ---- Dhivehi interface: MV Waheed, no capitals or letter-spacing, roomier lines ---- */
body.dv :is(.notes, .panel, .meta, .toast, .hintline, .seg, .menu, .wide, .fhead, .countdown, .switch, .linkbtn) :is(p, li, h2, h3, span, b, small, button, a, label, div, strong),
body.dv :is(.toast, .wide, .linkbtn, .seg button, .menu button){font-family:var(--f-thaana), var(--f-ui)}
body.dv :is(.notes, .panel) h3{letter-spacing:0; text-transform:none; font-size:15px}
body.dv :is(.notes, .panel) h2{font-size:26px; letter-spacing:0}
body.dv :is(.notes, .panel) :is(p, li){font-size:17px; line-height:1.9}
body.dv .excap{line-height:1.9}
body.dv .meta{font-size:15px}
body.dv .meta .tag{letter-spacing:0; font-size:13px}
body.dv .toast{font-size:16px; line-height:1.7}
body.dv .seg button{font-size:16px}
body.dv .hlist li{font-size:17px; line-height:1.8}
body.dv .wordcard .lat, body.dv .chip small, body.dv .cdcard b{font-family:var(--f-ui)}

/* shorter phones: give the board more room (the date line comes back as the countdown once you finish) */
@media (max-height: 820px){
  .meta.quiet{display:none}
  .bar{padding-block:2px 0}
  .levels{padding-block:0 2px}
  .board, .row{gap:5px}
  .kb{gap:5px; padding-block:6px 8px}
  .krow{gap:5px}
  .key{height:46px}
  .wide{height:44px}
  .coach{padding-block:6px; font-size:14px}
}
@media (prefers-reduced-motion: reduce){
  .row.reveal .tile,.row.reveal .tile.r::after,.row.shake,.coach .dot,.kfoot.done .sharego{animation:none}
  .toast{transition:none}
}

/* ---- app only: version line, What's new, update bar ---- */
.small{font-size:13.5px; color:var(--muted)}
.ver{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; margin-top:18px; font-size:13.5px; color:var(--muted)}
.ver button{border:0; background:none; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:6px 0; font-size:13.5px}
.keys{display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0; font-size:15px}
.keys dt{margin:0} .keys dd{margin:0; color:var(--muted)}
kbd{font-family:var(--f-ui); font-size:12px; border:1px solid var(--line); border-bottom-width:2px; border-radius:6px; padding:1px 6px; background:var(--surface)}
.changes section{border-top:1px solid var(--line); padding-block:12px}
.changes .vh{display:flex; gap:10px; align-items:baseline; font-family:var(--f-ui); font-size:13px; color:var(--muted)}
.changes .vh b{color:var(--ink); font-size:15px}
.changes h3{margin:4px 0 8px!important}
.changes ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.changes li{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:baseline; font-family:var(--f-body); font-size:15.5px; line-height:1.45}
body.dv .changes li{font-size:17px; line-height:1.8}
.kind{font-family:var(--f-ui); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:6px; padding:2px 7px; background:var(--key)}
.kind.k-new{background:color-mix(in srgb, var(--g) 22%, var(--surface))}
.kind.k-fixed{background:color-mix(in srgb, var(--y) 22%, var(--surface))}
body.dv .kind{text-transform:none; letter-spacing:0; font-size:13px}
.updbar{position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); margin:0 auto; width:fit-content; max-width:min(520px, calc(100vw - 32px)); z-index:60; display:flex; align-items:center; gap:16px; background:var(--ink); color:var(--bg); padding:10px 10px 10px 18px; border-radius:14px; font-size:15px; line-height:1.4; box-shadow:0 8px 24px rgba(0,0,0,.25); box-sizing:border-box}
.updbar>span{flex:1 1 auto; min-width:0}
.updbar button{flex:none; white-space:nowrap; min-height:44px; border-radius:10px; padding:0 18px; border:0; background:var(--bg); color:var(--ink); font-weight:600; cursor:pointer}
.preview{margin-top:14px; padding:12px; border:1px dashed var(--line); border-radius:12px; display:grid; gap:8px}
.preview .row2{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.preview button{min-height:40px; padding:0 12px; border:0; border-radius:10px; background:var(--key); color:var(--key-ink); cursor:pointer}

/* ---------- motion, 1.0.3 ---------- */
/* hidden switch for the iPhone tap (see feel() in app.js) */
.hap{position:fixed; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none}
/* the newest tile pops in */
.tile.pop{animation:pop .16s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.82)} 100%{transform:scale(1)}}
/* the winning row hops, one tile after another */
.row.win .tile{animation:hop .5s cubic-bezier(.3,.7,.4,1) both; animation-delay:calc(var(--i) * 90ms)}
@keyframes hop{0%,100%{transform:translateY(0)} 40%{transform:translateY(-28%)} 70%{transform:translateY(4%)}}
/* keys sink a little under the finger */
.key,.wide{transition:transform .08s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease}
.key:active,.wide:active{transform:scale(.94)}
/* sheets rise, the scrim fades */
.sheet:not([hidden]){animation:fadein .2s ease both}
.sheet:not([hidden]) .panel{animation:rise .34s cubic-bezier(.2,.9,.3,1) both}
@keyframes fadein{from{background:transparent}}
@keyframes rise{from{transform:translateY(40px); opacity:0}}
@media (min-width:640px){ @keyframes rise{from{transform:translateY(16px) scale(.98); opacity:0}} }
/* on the result: the word's tiles land, the shared squares fill in, row by row */
#result:not([hidden]) .wordrow .tile{animation:land .42s cubic-bezier(.3,1.4,.5,1) both; animation-delay:calc(.12s + var(--i) * 70ms)}
@keyframes land{from{transform:translateY(-14px) scale(.9); opacity:0}}
#result:not([hidden]) .mrow i{animation:sq .3s ease both; animation-delay:calc(.3s + var(--d, 0) * 40ms)}
@keyframes sq{from{transform:scale(.4); opacity:0}}
/* sound and vibrate switches in the theme menu */
.msep{height:1px; background:var(--line); margin:6px 4px}
.menu .tog{margin-inline-start:auto; width:34px; height:20px; border-radius:10px; background:var(--line); position:relative; flex:none; transition:background .2s}
.menu .tog::after{content:''; position:absolute; top:2px; inset-inline-start:2px; width:16px; height:16px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .2s}
.menu button[aria-checked="true"] .tog{background:var(--g)}
.menu button[aria-checked="true"] .tog::after{transform:translateX(14px)}
body.dv .menu button[aria-checked="true"] .tog::after{transform:translateX(-14px)}
@media (prefers-reduced-motion: reduce){
  .tile.pop,.row.win .tile,.sheet:not([hidden]),.sheet:not([hidden]) .panel,#result:not([hidden]) .wordrow .tile,#result:not([hidden]) .mrow i{animation:none}
  .key,.wide,.menu .tog,.menu .tog::after{transition:none}
}

/* 1.0.4: one button on the fili screen; menu headings; keep sounds on? */
.kfoot.one{grid-template-columns:1fr}
body.dv .kfoot.one svg{transform:scaleX(-1)}
.mhead{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:8px 10px 2px}
body.dv .mhead{letter-spacing:0; text-transform:none; font-size:14px; font-family:var(--f-thaana), var(--f-ui)}
.soundask{margin-top:14px; padding:10px 10px 10px 12px; border-radius:14px; background:var(--bg); border:1px solid var(--line)}
.soundask .sq{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600}
.soundask .sq svg{width:20px; height:20px; flex:none}
.soundask .sq span{flex:1}
.soundask .mini-b{min-height:44px; padding:0 14px; border:0; border-radius:10px; background:var(--key); color:var(--key-ink); cursor:pointer; font-weight:600}
.soundask .mini-b.keep{background:var(--accent); color:var(--on-accent)}
.soundask small{display:block; margin-top:6px; font-size:13px; color:var(--muted)}
body.dv .soundask small{line-height:1.8}
.coach button{min-height:44px}