/*
  Antika: the BZ Huddle site format (glass cards, aurora glows, glowing gold) re-cut for old coins.
  Bronze-black instead of felt green, verdigris (the green patina of old bronze) instead of emerald,
  copper instead of violet, and real coins drifting up the backdrop instead of card suits.
  Same-origin, system fonts only: nothing is fetched from anywhere else (Google is blocked in Iran).
  With prefers-reduced-motion everything stops and the page reads the same.
*/
:root{
  --base:#0b0705; --surface:#1c130c;
  --gold:#D4AF37; --gold-bright:#F0D67A; --gold-glow:rgba(240,214,122,.55);
  --patina:#3fb39a; --patina-glow:rgba(63,179,154,.42); --copper:#c4733a;
  --ink:#F5EEDF; --muted:#b9a891; --line:rgba(240,214,122,.15);
  --glass:rgba(34,22,13,.58); --glass-strong:rgba(22,14,8,.82);
  --radius:20px;
  --font:Vazirmatn,"Noto Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Tahoma,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--base)}
body{margin:0;min-height:100vh;background:var(--base);color:var(--ink);font-family:var(--font);
  line-height:1.75;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(240,214,122,.35);color:#fff}
a{color:var(--gold-bright)}
.wrap{max-width:760px;margin:0 auto;padding:92px 16px 56px;position:relative;z-index:1}

/* ── backdrop: aurora glows, a faint hammered-metal grain, drifting coins ── */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg::before{content:"";position:absolute;inset:0;background:
  radial-gradient(1000px 600px at 50% -12%, rgba(212,175,55,.20), transparent 65%),
  radial-gradient(circle at 1px 1px, rgba(255,230,180,.035) 1px, transparent 0) 0 0/22px 22px}
.blob{position:absolute;border-radius:50%;opacity:.55;will-change:transform}
.blob.b1{width:70vmax;height:70vmax;left:-25vmax;top:-30vmax;
  background:radial-gradient(circle, rgba(63,179,154,.30), transparent 62%);animation:drift1 26s ease-in-out infinite alternate}
.blob.b2{width:60vmax;height:60vmax;right:-25vmax;top:10vh;
  background:radial-gradient(circle, rgba(212,175,55,.30), transparent 62%);animation:drift2 32s ease-in-out infinite alternate}
.blob.b3{width:55vmax;height:55vmax;left:10vw;bottom:-35vmax;
  background:radial-gradient(circle, rgba(196,115,58,.26), transparent 62%);animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18vw,14vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-20vw,22vh) scale(.9)}}
@keyframes drift3{to{transform:translate(16vw,-18vh) scale(1.1)}}
.coin{position:absolute;bottom:-14vh;width:64px;height:64px;border-radius:50%;opacity:0;
  filter:sepia(.35) saturate(1.2) drop-shadow(0 0 14px rgba(240,214,122,.45));animation:float 24s linear infinite}
.coin.c1{left:5%;animation-delay:0s}
.coin.c2{left:24%;width:44px;height:44px;animation-delay:-8s;animation-duration:28s}
.coin.c3{left:46%;width:78px;height:78px;animation-delay:-15s;animation-duration:32s}
.coin.c4{left:66%;width:50px;height:50px;animation-delay:-3s;animation-duration:26s}
.coin.c5{left:84%;width:58px;height:58px;animation-delay:-19s;animation-duration:30s}
.coin.c6{left:93%;width:38px;height:38px;animation-delay:-11s;animation-duration:22s}
@keyframes float{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:.2}85%{opacity:.14}
  100%{transform:translateY(-128vh) rotate(160deg);opacity:0}}

/* ── top bar ── */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  background:rgba(11,7,5,.6);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:17px;min-width:0}
.brand img{width:34px;height:34px;border-radius:50%;box-shadow:0 0 16px var(--gold-glow),0 0 2px var(--gold-glow)}
.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{color:var(--muted);font-weight:500;font-size:12px;letter-spacing:2px;direction:ltr}
.navr{display:flex;align-items:center;gap:8px;flex-shrink:0}
.navlink{text-decoration:none;color:#dccdb5;font-size:14px;font-weight:550;padding:7px 10px;border-radius:999px;transition:color .2s,text-shadow .2s}
.navlink:hover{color:var(--gold-bright);text-shadow:0 0 10px var(--gold-glow)}
.navcta{text-decoration:none;font-weight:700;font-size:14px;color:#1c1405;padding:8px 15px;border-radius:999px;
  background:linear-gradient(160deg,var(--gold-bright),var(--gold));box-shadow:0 0 18px rgba(240,214,122,.35);transition:box-shadow .25s,transform .25s}
.navcta:hover{box-shadow:0 0 28px rgba(240,214,122,.65);transform:translateY(-1px)}

/* ── hero ── */
.hero{text-align:center;padding:26px 0 8px}
.logo{width:136px;height:136px;margin:0 auto 24px;border-radius:50%;position:relative;
  box-shadow:0 0 0 2px rgba(240,214,122,.55),0 0 44px var(--patina-glow),0 0 100px rgba(212,175,55,.3);animation:breathe 5s ease-in-out infinite}
.logo img{width:100%;height:100%;border-radius:50%;display:block}
.logo::after{content:"";position:absolute;inset:-10px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg,transparent,rgba(240,214,122,.85),transparent 30%,rgba(63,179,154,.8),transparent 60%,rgba(196,115,58,.7),transparent 85%);
  filter:blur(10px);opacity:.8;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes breathe{50%{box-shadow:0 0 0 2px rgba(240,214,122,.75),0 0 60px var(--patina-glow),0 0 130px rgba(212,175,55,.4)}}
h1{margin:0;font-size:clamp(42px,9vw,68px);letter-spacing:-.5px;line-height:1.2;color:#fff4d6;
  text-shadow:0 0 10px rgba(240,214,122,.55),0 0 30px rgba(212,175,55,.35),0 0 70px rgba(63,179,154,.3)}
.latin{color:var(--muted);font-size:13px;letter-spacing:4px;direction:ltr;margin-top:4px}
.tag{margin:14px auto 0;color:#e3d6c0;font-size:clamp(16px,2.4vw,19px);max-width:600px}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:28px auto 0;max-width:460px}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.pills li{margin:0;padding:5px 13px;border-radius:999px;font-size:13px;color:#eadfca;
  background:rgba(255,255,255,.04);border:1px solid rgba(63,179,154,.38);box-shadow:0 0 14px rgba(63,179,154,.15)}

/* ── buttons ── */
.btn{position:relative;overflow:hidden;display:block;flex:1 1 190px;text-align:center;text-decoration:none;cursor:pointer;
  font:inherit;font-weight:750;font-size:17px;padding:15px;border-radius:14px;border:0;color:#1c1405;
  background:linear-gradient(160deg,var(--gold-bright),var(--gold));
  box-shadow:0 0 0 1px rgba(255,240,190,.4) inset,0 10px 30px -10px rgba(212,175,55,.7),0 0 26px rgba(240,214,122,.3);
  transition:transform .2s,box-shadow .2s,opacity .2s}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:rgba(255,255,255,.04);border:1px solid rgba(240,214,122,.55);color:var(--gold-bright);font-weight:650;box-shadow:0 0 20px rgba(240,214,122,.12)}
.btn.ghost::after{display:none}
.btn:disabled{opacity:.45;cursor:wait;transform:none}
.btn:disabled::after{display:none}

/* ── cards ── */
.card{position:relative;border-radius:var(--radius);padding:22px;margin-bottom:18px;border:1px solid transparent;
  background:linear-gradient(var(--glass),var(--glass)) padding-box,
    linear-gradient(140deg,rgba(240,214,122,.5),rgba(240,214,122,.06) 38%,rgba(63,179,154,.08) 62%,rgba(63,179,154,.5)) border-box;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9),0 0 40px -18px rgba(63,179,154,.35)}
.card h2{margin:0 0 4px;font-size:19px;display:flex;align-items:center;gap:10px;line-height:1.4}
.ic{font-size:20px;width:38px;height:38px;flex-shrink:0;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 25%,rgba(240,214,122,.28),rgba(63,179,154,.12));
  box-shadow:inset 0 0 0 1px rgba(240,214,122,.25),0 0 18px rgba(63,179,154,.25)}
.card .sub{color:var(--muted);font-size:14px;margin:6px 0 16px}

/* ── the identifier ── */
#try{margin-top:48px;scroll-margin-top:84px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.tip{font-size:13px;color:var(--muted);margin:12px 2px 0}
#status{min-height:1.6em;margin:14px 2px 6px;color:var(--gold-bright);font-weight:600}
.loadbar{height:4px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin:0 2px}
.loadbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--patina),var(--gold-bright));box-shadow:0 0 12px var(--gold-glow);transition:width .3s}
.loadbar.done{display:none}
#query{display:flex;justify-content:center;margin-top:10px}
#query canvas{max-width:100%;max-height:200px;border-radius:14px;box-shadow:0 0 0 1px rgba(240,214,122,.35),0 0 30px rgba(212,175,55,.25)}
.res{display:flex;gap:12px;padding:14px;margin:12px 0 0;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid var(--line);animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
.res.first{border-color:rgba(240,214,122,.6);box-shadow:0 0 30px -8px rgba(240,214,122,.4)}
.res:nth-child(2){animation-delay:.08s}.res:nth-child(3){animation-delay:.16s}
.rank{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#1c1405;
  background:linear-gradient(160deg,var(--gold-bright),var(--gold))}
.res:not(.first) .rank{background:rgba(255,255,255,.08);color:var(--gold-bright)}
.rbody{flex:1;min-width:0}
.head{display:flex;justify-content:space-between;gap:8px}
.ruler{font-size:19px;font-weight:800;line-height:1.4}
.lat{font-size:13px;color:var(--muted);text-align:right}
.dyn{font-size:14px;color:var(--patina)}
.pct{text-align:center;flex:none}.pct b{display:block;font-size:22px;color:var(--gold-bright)}.pct span{font-size:12px;color:var(--muted)}
.bar{height:6px;background:rgba(255,255,255,.08);border-radius:4px;margin:8px 0}
.bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--gold-bright))}
.refs{display:flex;gap:8px;overflow-x:auto}
.refs a{flex:none;position:relative;display:block}
.refs img{height:84px;border-radius:8px;display:block;background:#000}
.refs span{position:absolute;bottom:4px;left:4px;background:#000b;font-size:11px;padding:0 5px;border-radius:6px;color:#fff}
.res details{margin-top:8px;font-size:13px;color:var(--muted)}.res summary{cursor:pointer}
.lic{font-size:11px}
#samples{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
#samples img{height:76px;border-radius:12px;cursor:pointer;background:#000;border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
#samples img:hover{transform:translateY(-3px);box-shadow:0 0 20px rgba(240,214,122,.35)}

/* ── how it works ── */
.h2{text-align:center;margin:64px 0 6px;font-size:clamp(24px,4vw,32px);color:#fff4d6;text-shadow:0 0 16px rgba(240,214,122,.4);scroll-margin-top:84px}
.h2 + .lead{text-align:center;color:var(--muted);margin:0 auto 26px;max-width:560px;font-size:15px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.features .card{margin:0}
.features .card h2{font-size:17px}
.features .card p{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.7}
.note{margin-top:22px;padding:13px 15px;border-radius:12px;font-size:13.5px;
  background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(212,175,55,.04));border:1px solid rgba(212,175,55,.28);color:#eadfbd}
footer{text-align:center;color:var(--muted);font-size:12.5px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
footer a{color:var(--muted)}

.page > *{animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
.page > :nth-child(2){animation-delay:.05s}.page > :nth-child(3){animation-delay:.1s}
.page > :nth-child(4){animation-delay:.15s}.page > :nth-child(n+5){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

@media (max-width:520px){
  .card{padding:18px}
  .wrap{padding-top:84px}
  .hero{padding-top:12px}
  .navlink,.brand small{display:none}
  .res{padding:12px;gap:10px}
}
@media (hover:none){.btn:hover,#samples img:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .coin{display:none}
}