/* Panjak PWA styles. Same family as Vajehrooz: teal, saffron, Vazirmatn and Lalezar. */
@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-soft:#fbe7b0; --bad:#c2410c; --good:#15803d;
  --c:#0d7a80; --c-ink:#ffffff; --p:#f0b429; --p-ink:#16222b; --a:#7d8b93; --a-ink:#ffffff;
  --tile:#fbfcfd; --tile-line:#bcc7ce; --tile-full:#56656e; --key:#dde3e7; --key-a:#7d8b93; --key-a-ink:#e9eef1;
  --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-soft:#4a3a12; --bad:#fb923c; --good:#4ade80;
  --c:#1f9a9f; --c-ink:#ffffff; --p:#e0a321; --p-ink:#16222b; --a:#3a4a53; --a-ink:#e6eef1;
  --tile:#152129; --tile-line:#33464f; --tile-full:#7f939b; --key:#2c3e48; --key-a:#091014; --key-a-ink:#4d5d65; 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-soft:#4a3a12; --bad:#fb923c; --good:#4ade80;
  --c:#1f9a9f; --c-ink:#ffffff; --p:#e0a321; --p-ink:#16222b; --a:#3a4a53; --a-ink:#e6eef1;
  --tile:#152129; --tile-line:#33464f; --tile-full:#7f939b; --key:#2c3e48; --key-a:#091014; --key-a-ink:#4d5d65; 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)}
*{box-sizing:border-box}
[hidden]{display:none!important}
.wrap{max-width:560px;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 the first row, the day bar under them. */
header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px}
.brand{grid-column:1;grid-row:1;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{grid-column:2;grid-row:1;display:flex;gap:6px;align-items:center}
.daybar{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:8px}
.daybar .date{flex:1;text-align:center;font-weight:700}
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}
.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)}

/* Board: six rows of five tiles; the first letter is on the right. */
.play{display:flex;flex-direction:column;gap:10px}
.stage{position:relative;display:flex;justify-content:center;padding-block:4px}
.board{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;width:min(100%,330px)}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;direction:rtl}
.tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:2px solid var(--tile-line);background:var(--tile);border-radius:8px;font-weight:800;font-size:clamp(1.3rem,7.5vw,2rem);line-height:1;color:var(--ink);user-select:none;position:relative}
.tile.full{border-color:var(--tile-full)}
.tile.ghost{color:var(--muted);opacity:.55}
.tile.c{background:var(--c);border-color:var(--c);color:var(--c-ink)}
.tile.p{background:var(--p);border-color:var(--p);color:var(--p-ink)}
.tile.a{background:var(--a);border-color:var(--a);color:var(--a-ink)}
.tile.hinted::after{content:"";position:absolute;bottom:4px;left:4px;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.row.mini{width:min(100%,220px);gap:4px}
.row.mini .tile{font-size:1.15rem;border-radius:6px}
@media (prefers-reduced-motion:no-preference){
  .tile.pop{animation:pop .1s ease-out}
  .tile.flip{animation:flip .5s ease-in-out both;animation-delay:calc(var(--i) * 220ms)}
  .row.shake{animation:shake .4s}
  .row.win .tile{animation:hop .4s ease-out both;animation-delay:calc(var(--i) * 90ms)}
}
@keyframes pop{50%{transform:scale(1.08)}}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes hop{40%{transform:translateY(-10px)}}
.msgbox{color:var(--muted);padding:40px 12px;text-align:center;max-width:34ch;display:flex;flex-direction:column;gap:10px;align-items:center}
.msgbox button{font-weight:700}
.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}
.toast.show{opacity:1}
.tools{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.status{color:var(--muted);font-size:.85rem}

/* Keyboard: same key order as the standard Persian phone keyboard. */
.kbd{display:flex;flex-direction:column;gap:6px;direction:ltr;user-select:none}
.kbd .krow{display:flex;gap:4px;justify-content:center}
.kbd button{flex:1;max-width:42px;min-width:0;padding:11px 0;font-size:1.1rem;font-weight:700;border-radius:7px;background:var(--key);border-color:transparent}
.kbd button.wide{max-width:66px;flex:1.6;font-size:.9rem}
.kbd button.c{background:var(--c);color:var(--c-ink)}
.kbd button.p{background:var(--p);color:var(--p-ink)}
.kbd button.a{background:var(--key-a);color:var(--key-a-ink)}

.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 .ex{display:flex;flex-direction:column;gap:6px}
.helpp .ex p{font-size:.9rem;color:var(--muted);margin-bottom:6px}
.helpp>button{align-self:center;font-weight:700;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.nums b{display:block;font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.nums span{font-size:.75rem;color:var(--muted)}
.dist{display:flex;flex-direction:column;gap:4px}
.dist .bar{display:grid;grid-template-columns:1.2em minmax(0,1fr);gap:8px;align-items:center;font-variant-numeric:tabular-nums}
.dist .bar i{display:block;font-style:normal;background:var(--a);color:var(--a-ink);border-radius:4px;padding:1px 8px;min-width:2em;font-weight:700;font-size:.85rem;text-align:left}
.dist .bar.cur i{background:var(--c);color:var(--c-ink)}
.note{color:var(--muted);font-size:.82rem;text-align:center}

.result{align-items:center;text-align:center}
.result h3{font-size:1.8rem}
.result.lost h3{color:var(--muted)}
.answer{display:flex;gap:5px;direction:rtl}
.answer .tile{width:44px;font-size:1.4rem}
.meaning{font-weight:500;max-width:36ch}
.restxt{color:var(--muted);font-size:.9rem}
.streak{font-weight:700}
.share{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.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{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}
.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}
.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.lost{background:var(--bad);border-color:var(--bad)}
.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}
.lockacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.lockacts button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}

.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)}
.price{display:inline-flex;align-items:center;gap:3px;margin-inline-start:6px;font-size:.8rem;color:var(--muted);font-weight:700}
.price::before{content:"";width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fbe7b0,#f0b429 60%,#b98510)}
.price:empty{display:none}
.hintmsg{background:var(--sel-soft);border:1px solid var(--sel);border-radius:10px;padding:8px 12px;font-size:.9rem}
.hintmsg a{color:var(--ink);font-weight:700}
.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}
  .kbd button{padding:10px 0;font-size:1rem}
}

/* Splash: shown while the first word loads, like Vajehrooz. */
.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-tiles{display:flex;gap:6px;margin-top:26px;direction:rtl}
.splash-tiles i{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--tile-line);background:var(--tile)}
@media (prefers-reduced-motion:no-preference){
  .splash-tiles i{animation:sptile 1.6s ease-in-out infinite}
  .splash-tiles i:nth-child(2){animation-delay:.14s}.splash-tiles i:nth-child(3){animation-delay:.28s}.splash-tiles i:nth-child(4){animation-delay:.42s}.splash-tiles i:nth-child(5){animation-delay:.56s}
}
/* A guess being revealed: empty, then yellow, then green. */
@keyframes sptile{0%,15%,100%{background:var(--tile);border-color:var(--tile-line)}35%{background:var(--p);border-color:var(--p)}60%,85%{background:var(--c);border-color:var(--c)}}
.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}