/* Kandoo PWA styles. Same family as Vajehrooz and Panjak (teal, saffron, Vazirmatn, Lalezar),
   with its own board: wax tiles in a navy frame, like cells of a hive. */
@font-face{font-family:Vazirmatn;src:url(/fonts/Vazirmatn-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/fonts/Vazirmatn-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/fonts/Vazirmatn-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(/fonts/Vazirmatn-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Lalezar;src:url(/fonts/Lalezar-Arabic.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --bg:#eef1f3; --paper:#fbfcfd; --ink:#16222b; --muted:#5b6a73; --line:#cbd4da;
  --accent:#0d7a80; --accent-ink:#ffffff; --accent-soft:#d3ebe9;
  --sel:#f0b429; --sel-deep:#c48a12; --sel-soft:#fbe7b0; --bad:#c2410c; --bad-soft:#f6cdbd; --bad-deep:#d99a85; --good:#15803d;
  --frame:#2f3f6e; --tile:#fbf2d9; --tile-edge:#e2cc93; --tile-ink:#2f3f6e; --badge:#a86a00;
  --ok:#0d7a80; --ok-ink:#ffffff; --ok-deep:#095a5e; --dup:#c9cfdb; --dup-deep:#a7afc0;
  --path:#0d7a80; --veil:rgba(238,241,243,.86); --chip:#fbfcfd;
  --display:"Lalezar","Vazirmatn",Tahoma,sans-serif;
  --body:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d161c; --paper:#152129; --ink:#e6eef1; --muted:#93a6ae; --line:#2a3b45;
  --accent:#3bb8b5; --accent-ink:#06171d; --accent-soft:#163b44;
  --sel:#e9a825; --sel-deep:#b47e0f; --sel-soft:#4a3a12; --bad:#fb923c; --bad-soft:#e9978b; --bad-deep:#c47165; --good:#4ade80;
  --frame:#070d12; --tile:#efe2bd; --tile-edge:#c9b37a; --tile-ink:#24305a; --badge:#9a5f00;
  --ok:#1f9aa1; --ok-ink:#ffffff; --ok-deep:#136e73; --dup:#8a92a8; --dup-deep:#6b7387;
  --path:#5fd3d8; --veil:rgba(13,22,28,.88); --chip:#152129; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d161c; --paper:#152129; --ink:#e6eef1; --muted:#93a6ae; --line:#2a3b45;
  --accent:#3bb8b5; --accent-ink:#06171d; --accent-soft:#163b44;
  --sel:#e9a825; --sel-deep:#b47e0f; --sel-soft:#4a3a12; --bad:#fb923c; --bad-soft:#e9978b; --bad-deep:#c47165; --good:#4ade80;
  --frame:#070d12; --tile:#efe2bd; --tile-edge:#c9b37a; --tile-ink:#24305a; --badge:#9a5f00;
  --ok:#1f9aa1; --ok-ink:#ffffff; --ok-deep:#136e73; --dup:#8a92a8; --dup-deep:#6b7387;
  --path:#5fd3d8; --veil:rgba(13,22,28,.88); --chip:#152129; color-scheme:dark}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--body);font-size:15px;line-height:1.6;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}
[hidden]{display:none!important}
.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.wrap{max-width:520px;margin:0 auto;padding-inline:max(14px,env(safe-area-inset-left,0px)) max(14px,env(safe-area-inset-right,0px));padding-block:12px 24px;display:flex;flex-direction:column;gap:12px}

/* Header: brand and account on one row. */
header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;row-gap:0;min-width:0}
.brand h1{font-family:var(--display);font-weight:400;font-size:2.2rem;line-height:1;margin:0;color:var(--accent)}
.brand span{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.acct{display:flex;gap:6px;align-items:center}
button{font-family:var(--body);font-size:.95rem;cursor:pointer;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:6px 12px}
@media (hover:hover){button:hover:not(:disabled){border-color:var(--accent)}}
button:disabled{opacity:.35;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.icon-btn{padding:4px 12px;font-size:1.1rem;line-height:1}
.install{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.userbtn{font-weight:700;color:var(--accent);text-decoration:none;border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:4px 12px;max-width:10em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Mode tabs: the daily board and free play. */
.modes{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.modes button{border:0;border-radius:9px;font-weight:800;padding:8px 6px;background:transparent;color:var(--muted)}
.modes button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.daybar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.daybar .date{flex:1;text-align:center;font-weight:700}
.navbar{display:flex;gap:6px;justify-content:center}
.navbar button{flex:1;max-width:9em;font-weight:700}
.navbar button[aria-expanded="true"]{background:var(--accent-soft);border-color:var(--accent)}

/* Round status: time, score, words. */
.play{display:flex;flex-direction:column;gap:10px}
.status{display:grid;grid-template-columns:repeat(3,1fr);background:var(--paper);border:1px solid var(--line);border-radius:12px}
.stat{display:flex;flex-direction:column;align-items:center;padding:4px;line-height:1.25}
.stat+.stat{border-inline-start:1px solid var(--line)}
.stat .k{font-size:.75rem;color:var(--muted)}
.stat .v{font-weight:800;font-size:1.35rem}
.stat .v.low{color:var(--bad)}
@media (prefers-reduced-motion:no-preference){.stat .v.low{animation:pulse 1s ease-in-out infinite}}
@keyframes pulse{50%{opacity:.45}}

/* The word being built, with feedback under it. */
.wordline{position:relative;display:flex;align-items:center;justify-content:center;height:64px}
.wordbox{text-align:center;min-width:0;width:100%}
.word{font-weight:800;font-size:1.6rem;line-height:1.3;min-height:2.1rem;overflow-wrap:anywhere}
.wmsg{font-size:.85rem;min-height:1.4rem;color:var(--muted);display:flex;justify-content:center;align-items:center;gap:8px;white-space:nowrap}
.wmsg[data-kind="ok"]{color:var(--accent);font-weight:700}
.wmsg[data-kind="bad"]{color:var(--bad)}
.wmsg .suggest{border:1px dashed currentColor;background:transparent;color:inherit;border-radius:999px;padding:0 10px;font-size:.78rem}
.tapbtn{position:absolute;top:50%;transform:translateY(-50%);width:64px;visibility:hidden;border-radius:10px;padding:6px 0;font-size:.85rem;font-weight:700}
#tapClear{inset-inline-start:0} #tapSubmit{inset-inline-end:0}
.wordline.tap .tapbtn{visibility:visible}
.tapbtn.go{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* Board: 4×4 wax tiles in a navy frame. Cell 0 is top right. */
.board-wrap{position:relative;width:min(100%,430px);aspect-ratio:1/1;align-self:center}
.board{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:8px;padding:10px;height:100%;background:var(--frame);border-radius:22px;touch-action:none;user-select:none;-webkit-user-select:none}
.tile{position:relative;display:grid;place-items:center;background:var(--tile);color:var(--tile-ink);border-radius:14px;box-shadow:inset 0 -5px 0 var(--tile-edge);font-family:var(--display);font-size:clamp(1.9rem,10vw,2.9rem);line-height:1;padding-bottom:5px}
@media (prefers-reduced-motion:no-preference){.tile{transition:transform .08s ease,background-color .12s ease}}
.tile .bd{position:absolute;top:5px;left:7px;font-family:var(--body);font-size:.72rem;font-weight:800;color:var(--badge)}
.tile.blank .ch::before{content:"";display:block;width:26%;aspect-ratio:1;margin:auto;background:var(--tile-edge);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tile.sel{background:var(--sel);box-shadow:inset 0 -5px 0 var(--sel-deep);transform:scale(.95)}
.board[data-state="valid"] .tile.sel,.board[data-state="ok"] .tile.sel,.board[data-state="show"] .tile.sel{background:var(--ok);color:var(--ok-ink);box-shadow:inset 0 -5px 0 var(--ok-deep)}
.board[data-state="valid"] .tile.sel .bd,.board[data-state="ok"] .tile.sel .bd,.board[data-state="show"] .tile.sel .bd{color:var(--ok-ink)}
.board[data-state="dup"] .tile.sel{background:var(--dup);box-shadow:inset 0 -5px 0 var(--dup-deep)}
.board[data-state="bad"] .tile.sel,.board[data-state="short"] .tile.sel{background:var(--bad-soft);box-shadow:inset 0 -5px 0 var(--bad-deep)}
@media (prefers-reduced-motion:no-preference){.board[data-state="bad"]{animation:shake .28s ease}}
@keyframes shake{25%{transform:translateX(5px)}75%{transform:translateX(-5px)}}
.pathsvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pathsvg polyline{fill:none;stroke:var(--path);stroke-linecap:round;stroke-linejoin:round;opacity:.38}

/* Cover over the board before a round, and for messages. */
.cover{position:absolute;inset:0;display:grid;place-items:center;background:var(--veil);border-radius:22px;padding:18px;text-align:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.covbox{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:32ch}
.covbox h2{font-family:var(--display);font-weight:400;font-size:2rem;margin:0;line-height:1.2;color:var(--accent);text-wrap:balance}
.covbox p{margin:0;color:var(--muted);text-wrap:balance}
.covbox .small{font-size:.8rem}
.covbox .small:empty{display:none}
.covacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.covacts:empty{display:none}
.bigbtn{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);border-radius:14px;padding:11px 28px;font-weight:800;font-size:1.05rem}
.toast{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-weight:700;padding:6px 14px;border-radius:8px;font-size:.9rem;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap;max-width:95%;overflow:hidden;text-overflow:ellipsis;z-index:2}
.toast.show{opacity:1}

/* Word chips. */
.foundsec{display:flex;flex-direction:column;gap:8px}
.section-h,.wordlists h4{font-size:.95rem;font-weight:800;margin:0;display:flex;gap:6px;align-items:baseline}
.count{color:var(--muted);font-weight:500;font-size:.85rem}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:baseline;gap:5px;background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:2px 11px;font-weight:700;font-size:.95rem}
.chip .p{font-size:.72rem;color:var(--muted);font-weight:800}
.chip.rare{border-style:dashed}
.chip.miss{background:transparent;color:var(--muted);font-weight:500}
.chip.on{background:var(--ok);color:var(--ok-ink);border-color:var(--ok)}
.chip.on .p{color:var(--ok-ink)}
.empty{color:var(--muted);font-size:.85rem}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.panel h2{font-family:var(--display);font-weight:400;font-size:1.4rem;margin:0;color:var(--accent)}
.panel h3{font-family:var(--display);font-weight:400;font-size:1.15rem;margin:0;color:var(--accent)}
.panel p{margin:0}
.helpp ul{margin:0;padding-inline-start:1.1em;display:flex;flex-direction:column;gap:4px}
.helpp>button{align-self:center;font-weight:700;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pts{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:.85rem}
.pts div{padding:4px 2px;line-height:1.4}
.pts div:nth-child(-n+5){background:var(--bg);color:var(--muted)}
.pts div:nth-child(n+6){font-weight:800}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.nums b{display:block;font-size:1.45rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.25;overflow-wrap:anywhere}
.nums b.w{font-size:1.05rem;line-height:1.9}
.nums span{font-size:.75rem;color:var(--muted)}
.note{color:var(--muted);font-size:.82rem;text-align:center}

/* Level: title, number and a bar to the next level. */
.levelcard,.levelbox{display:flex;flex-direction:column;gap:6px;width:100%}
.lvhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lvhead b{font-family:var(--display);font-weight:400;font-size:1.3rem;color:var(--ink)}
.lvhead span{color:var(--muted);font-size:.85rem}
.lvbar{height:10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.lvbar i{display:block;height:100%;background:linear-gradient(90deg,var(--sel),var(--sel-deep));border-radius:999px}
.lvnote{font-size:.8rem;color:var(--muted)}

.result{align-items:center;text-align:center}
.result h3{font-size:1.7rem}
.resscore{display:flex;align-items:baseline;gap:8px;justify-content:center}
.resscore b{font-family:var(--display);font-weight:400;font-size:2.8rem;line-height:1}
.resscore span{color:var(--muted)}
.restxt{color:var(--muted);font-size:.9rem}
.restxt:empty{display:none}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;width:100%;max-width:340px;background:var(--bg);border-radius:12px;padding:8px 12px}
.vs div{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.vs b{font-size:1.4rem;font-variant-numeric:tabular-nums}
.vs span{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs em{font-style:normal;color:var(--muted);font-weight:700}
.vs .win b{color:var(--accent)}
.streak{font-weight:700}
.share{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.share:empty{display:none}
.btnlink{font-family:var(--body);font-size:.95rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:6px 12px;text-decoration:none;display:inline-block;text-align:center}
.btnlink.primary,button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.loginbox{display:flex;flex-direction:column;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.loginbox p{color:var(--muted);font-size:.9rem;max-width:40ch}
.msg{color:var(--muted);font-size:.85rem}
.msg:empty{display:none}
.wordlists{display:flex;flex-direction:column;gap:8px;width:100%;text-align:start;border-top:1px solid var(--line);padding-top:10px}
.wordlists .note{text-align:start}
.lbhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lbhead span{color:var(--muted);font-size:.85rem}
.lb ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lb li{display:grid;grid-template-columns:2em minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:5px 8px;border-radius:7px;font-variant-numeric:tabular-nums}
.lb li.me{background:var(--accent-soft);font-weight:700}
.lb li .r,.lb li .h{color:var(--muted)}
.lb li .h{font-size:.8rem}
.lb li .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbmine{font-weight:700}
.lbmine:empty{display:none}
.lb .note{text-align:start}
footer{color:var(--muted);font-size:.78rem;text-align:center}
footer a{color:inherit}

.calp{max-width:460px;width:100%;align-self:center}
.calhead{display:flex;align-items:center;justify-content:space-between}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calgrid .wd{text-align:center;font-size:.75rem;color:var(--muted)}
.calgrid .day{position:relative;border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:5px 0 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:700;font-variant-numeric:tabular-nums}
.calgrid .day:disabled{opacity:.35}
.calgrid .day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.calgrid .day.cur{background:var(--sel-soft);border-color:var(--sel)}
.calgrid .day.locked{color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--muted);display:inline-block}
.dot.on{background:var(--good);border-color:var(--good)}
.dot.part{background:linear-gradient(90deg,var(--sel) 50%,transparent 50%);border-color:var(--sel)}
.calkey{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;font-size:.78rem;color:var(--muted)}
.calkey span{display:inline-flex;align-items:center;gap:4px}
/* A small padlock drawn with CSS, for archive days that need coins or VIP. */
.calgrid .day.locked::after,.lockkey::before{content:"";width:8px;height:6px;border-radius:1.5px;background:var(--muted);box-shadow:0 -4px 0 -1px var(--paper),0 -5px 0 0 var(--muted)}
.calgrid .day.locked::after{position:absolute;top:6px;left:6px}
.lockkey{display:inline-flex;align-items:center;gap:6px}
.lockkey::before{display:inline-block;margin-top:4px}

.coin{width:16px;height:16px;border-radius:50%;flex:none;display:inline-block;background:radial-gradient(circle at 35% 35%,#fbe7b0,#f0b429 60%,#b98510);box-shadow:inset 0 0 0 1.5px #d99a16}
.coinbtn{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-variant-numeric:tabular-nums}
.coinbtn[aria-expanded="true"]{background:var(--sel-soft);border-color:var(--sel)}
.earned{font-weight:700;display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap}
.coinhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.coinbig{display:flex;align-items:center;gap:8px;font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums}
.coinbig .coin{width:24px;height:24px}
.coinp .lead{color:var(--muted);font-size:.9rem}
.vipline{font-weight:700;color:var(--good);font-size:.9rem}
.earn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.9rem}
.earn li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding-block:4px}
.earn li b{white-space:nowrap}
#inviteBox{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px}
input.link{font-family:var(--body);font-size:.85rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 9px;width:100%;text-align:left}
@media (max-width:380px){
  .brand h1{font-size:1.9rem}
  .userbtn{max-width:7em;padding:4px 10px}
  .board{gap:6px;padding:8px}
}

/* Splash: shown while the word list loads, like the other games. */
.splash{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 18vh) 24px calc(env(safe-area-inset-bottom,0px) + 32px);transition:opacity .28s ease}
.splash.out{opacity:0;pointer-events:none}
.splash-main{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.splash-main img{width:104px;height:104px;border-radius:26px;margin-bottom:10px;box-shadow:0 10px 30px rgba(10,75,80,.18)}
.splash-main h1{font-family:var(--display);font-weight:400;font-size:2.8rem;line-height:1.1;margin:0;color:var(--accent)}
.splash-main p{margin:0;color:var(--muted)}
.splash-cells{display:grid;grid-template-columns:repeat(2,18px);gap:5px;margin-top:26px}
.splash-cells i{width:18px;height:18px;border-radius:5px;background:var(--tile);box-shadow:inset 0 -3px 0 var(--tile-edge)}
@media (prefers-reduced-motion:no-preference){
  .splash-cells i{animation:spcell 1.6s ease-in-out infinite}
  .splash-cells i:nth-child(2){animation-delay:.2s}.splash-cells i:nth-child(4){animation-delay:.4s}.splash-cells i:nth-child(3){animation-delay:.6s}
}
/* A word being traced: wax, then saffron, then teal. */
@keyframes spcell{0%,15%,100%{background:var(--tile)}35%{background:var(--sel)}60%,85%{background:var(--ok)}}
.splash-brand{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem}
.splash-brand span{display:flex;flex-direction:column;line-height:1.35}
.splash-brand small{direction:ltr;text-align:right;font-size:.72rem;letter-spacing:.03em}