/* فونت Ray — فایل‌ها را در assets/fonts قرار دهید (راهنما: assets/fonts/README.txt) */
@font-face{font-family:'Ray';src:local('Ray'),url('../fonts/Ray-Regular.woff2') format('woff2'),url('../fonts/Ray-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Ray';src:local('Ray Bold'),url('../fonts/Ray-Bold.woff2') format('woff2'),url('../fonts/Ray-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}

:root{
  --gold:#ba973b;--gold-l:#e0cb86;--gold-d:#74601f;
  --teal:#42a6a3;--teal-l:#86d4d1;--teal-d:#25605e;
  --dark:#484848;--dark-d:#202020;--dark-dd:#0d0d0d;--dark-l:#5c5c5c;
  --ink:#f7f2e2;
  --ch:6.2rem;--rw:11rem;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}

/* مقیاس سیال: روی موبایل، تبلت، دسکتاپ، تلویزیون و استند عمودی/افقی */
html{font-size:clamp(11px,min(calc(100vw / 80),calc(100vh / 45)),80px);-webkit-text-size-adjust:100%}
@media (orientation:portrait){
  html{font-size:clamp(11px,min(calc(100vw / 27),calc(100vh / 58)),60px)}
  :root{--ch:5.6rem;--rw:6.8rem}
}

body{
  font-family:'Ray','Vazirmatn',Tahoma,'Segoe UI',sans-serif;
  background:var(--dark-dd);color:var(--ink);
  min-height:100vh;min-height:100dvh;overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  line-height:1.6;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}
button:focus-visible{outline:.2rem solid var(--teal-l);outline-offset:.2rem}

.bg{position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(48rem 34rem at 85% 8%,rgba(66,166,163,.30),transparent 62%),
    radial-gradient(46rem 34rem at 8% 92%,rgba(186,151,59,.30),transparent 62%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 .08rem,transparent .08rem 3rem),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 .08rem,transparent .08rem 3rem),
    linear-gradient(160deg,var(--dark) 0%,var(--dark-d) 70%,var(--dark-dd) 100%)}

/* ───── چیدمان ───── */
.app{min-height:100vh;min-height:100dvh;display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"top top" "main main" "foot foot";
  gap:.8rem 2rem;padding:1.1rem 2.4rem}
.top{grid-area:top;display:flex;align-items:center;gap:1.2rem}
.stage-main{grid-area:main;display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:2rem;align-items:center}
.notice{grid-area:foot;text-align:center;font-size:1.05rem;color:var(--gold-l);padding:.2rem 0}
@media (orientation:portrait){
  .app{padding:.8rem 1rem;gap:.6rem}
  .stage-main{grid-template-columns:1fr;gap:.8rem;align-content:start}
}

.logo{height:3.4rem;max-width:13rem;object-fit:contain;background:#fff;border-radius:.7rem;padding:.3rem .7rem;box-shadow:0 .2rem 1rem rgba(0,0,0,.4)}
.titles{flex:1;min-width:0}
.titles h1{font-size:1.8rem;line-height:1.25;color:var(--gold-l);font-weight:700}
.titles p{font-size:1.05rem;color:var(--teal-l)}
.tools{display:flex;gap:.5rem;align-items:center}
.icon-btn{width:2.8rem;height:2.8rem;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center}
.icon-btn svg{fill:var(--ink);width:1.4rem;height:1.4rem}
.icon-btn .off{display:none}
.icon-btn.muted .on{display:none}.icon-btn.muted .off{display:block}
.badge-demo{font-size:.9rem;padding:.2rem .7rem;border-radius:2rem;background:var(--teal-d);color:#fff}

/* ───── ماشین ───── */
.machine-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem;justify-self:center;width:100%;padding-top:1.4rem}
.machine{position:relative;padding:.9rem 1.1rem 1rem;border-radius:2rem;
  background:linear-gradient(145deg,var(--gold-l),var(--gold) 42%,var(--gold-d));
  box-shadow:0 1.4rem 3.6rem rgba(0,0,0,.6),inset 0 0 0 .15rem rgba(255,255,255,.28);
  transition:filter .5s,transform .5s}
.plate{display:flex;justify-content:center;margin:-2.2rem 0 .4rem}
.plate span{font-weight:700;font-size:1.5rem;padding:.25rem 2.2rem;border-radius:2rem;
  background:linear-gradient(var(--dark),var(--dark-dd));color:var(--gold-l);
  box-shadow:0 .25rem 1rem rgba(0,0,0,.5),inset 0 0 0 .12rem var(--gold)}
.lights{display:flex;justify-content:space-between;padding:.2rem .5rem}
.lights i{width:.65rem;height:.65rem;border-radius:50%;background:#fff6cf;box-shadow:0 0 .6rem #ffe28a;animation:blink 1.3s infinite;animation-delay:calc(var(--i) * .09s)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.st-spin .lights i{animation-duration:.45s}

.reels-frame{position:relative;display:flex;gap:.5rem;padding:.55rem;border-radius:1.2rem;background:var(--dark-dd);box-shadow:inset 0 0 1.5rem #000}
.reel{position:relative;width:var(--rw);height:calc(var(--ch) * 3);overflow:hidden;border-radius:.8rem;
  background:linear-gradient(#f4efde,#fff 22%,#fff 78%,#efe8d0)}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(rgba(0,0,0,.5),transparent 30%,transparent 70%,rgba(0,0,0,.5))}
.reel-cells{position:absolute;inset:0}
.cell{position:absolute;top:0;left:0;right:0;height:33.3333%;will-change:transform}
.sym{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.3rem}
.sym img{max-width:76%;max-height:58%;object-fit:contain}
.sym .nm{font-weight:700;font-size:1.05rem;color:var(--dark);line-height:1.2;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell.only-name .nm{font-size:1.7rem;color:var(--dark)}
.payline{position:absolute;left:.3rem;right:.3rem;top:50%;height:.2rem;transform:translateY(-50%);z-index:3;pointer-events:none;
  background:var(--teal);box-shadow:0 0 .8rem var(--teal-l)}
.payline::before,.payline::after{content:"";position:absolute;top:50%;transform:translateY(-50%);border:.55rem solid transparent}
.payline::before{right:-.1rem;border-right-color:var(--teal);border-left-width:0}
.payline::after{left:-.1rem;border-left-color:var(--teal);border-right-width:0}
.reel.hit{animation:hit .55s infinite alternate}
@keyframes hit{from{box-shadow:0 0 0 .22rem var(--teal),0 0 1rem var(--teal-l)}to{box-shadow:0 0 0 .3rem var(--gold-l),0 0 2.4rem var(--gold-l)}}
.machine.win{animation:glow .8s infinite alternate}
@keyframes glow{from{filter:brightness(1)}to{filter:brightness(1.25) saturate(1.2)}}
.machine.lose{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-.5rem)}40%{transform:translateX(.5rem)}60%{transform:translateX(-.3rem)}80%{transform:translateX(.3rem)}}
body.st-attract .machine{filter:blur(.15rem) brightness(.6)}

/* ───── کنترل‌ها ───── */
.controls{min-height:7.2rem;width:100%;display:flex;justify-content:center;align-items:center}
.panel-ready,.panel-spin{display:none}
.st-ready .panel-ready{display:flex}
.st-spin .panel-spin{display:flex}
.panel-ready{flex-direction:column;align-items:center;gap:.4rem;text-align:center;max-width:44rem}
.ready-msg{font-size:1.1rem;color:var(--ink);line-height:1.7}
.chances{font-size:1rem;color:var(--teal-l)}
.btn-spin{display:flex;align-items:center;gap:1rem;padding:.55rem 2.6rem;border-radius:4rem;font-weight:700;font-size:1.9rem;color:var(--dark-dd);
  background:linear-gradient(var(--gold-l),var(--gold) 55%,var(--gold-d));
  box-shadow:0 .35rem 0 var(--gold-d),0 .8rem 2rem rgba(0,0,0,.5),0 0 0 .2rem rgba(255,255,255,.2);
  animation:pulse 1.4s ease-in-out infinite}
.btn-spin:active{transform:translateY(.25rem);box-shadow:0 .1rem 0 var(--gold-d)}
.spin-hint{display:flex;align-items:center;gap:.3rem;font-size:1rem;font-weight:400;background:rgba(0,0,0,.18);padding:.15rem .7rem;border-radius:2rem;direction:ltr}
.spin-hint svg{fill:currentColor}
@keyframes pulse{50%{transform:scale(1.045)}}
.panel-spin{align-items:center;gap:.8rem;font-size:1.4rem;color:var(--gold-l);font-weight:700}
.dots{display:flex;gap:.35rem}
.dots i{width:.7rem;height:.7rem;border-radius:50%;background:var(--teal);animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-.5rem);background:var(--gold)}}

/* ───── ورود شماره ───── */
.panel-phone{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:5}
.st-attract .panel-phone{display:flex}
.phone-card{width:min(100%,24rem);display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.1rem 1.3rem 1.2rem;border-radius:1.6rem;
  background:linear-gradient(rgba(20,20,20,.94),rgba(10,10,10,.96));box-shadow:0 1rem 3rem rgba(0,0,0,.7),inset 0 0 0 .12rem var(--gold)}
.phone-card h2{font-size:1.45rem;color:var(--gold-l);text-align:center;line-height:1.3}
.welcome-text{font-size:.98rem;text-align:center;color:#ddd;line-height:1.55}
.phone-display{direction:ltr;width:100%;text-align:center;font-weight:700;font-size:2rem;letter-spacing:.12rem;min-height:3.1rem;
  border-bottom:.15rem solid var(--gold);color:#fff}
.phone-display .ph{color:rgba(255,255,255,.28)}
.phone-display .caret{display:inline-block;width:.12rem;height:1.6rem;background:var(--teal-l);vertical-align:middle;margin-inline-start:.1rem;animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
.phone-err{min-height:1.4rem;font-size:.95rem;color:#ff9d8f;text-align:center;line-height:1.4}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;width:100%;direction:ltr}
.key{height:3rem;border-radius:.9rem;font-size:1.5rem;font-weight:700;background:linear-gradient(var(--dark-l),var(--dark));box-shadow:0 .18rem 0 var(--dark-dd)}
.key:active{transform:translateY(.15rem);box-shadow:none;background:var(--teal-d)}
.key-fn svg{fill:var(--gold-l)}
.key-fn{display:grid;place-items:center}
.btn-go{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;width:100%;padding:.6rem 1.4rem;border-radius:1rem;font-weight:700;font-size:1.25rem;color:var(--dark-dd);
  background:linear-gradient(var(--gold-l),var(--gold));box-shadow:0 .22rem 0 var(--gold-d)}
.btn-go:active{transform:translateY(.15rem);box-shadow:none}
.kbd{font-size:.85rem;font-weight:400;background:rgba(0,0,0,.2);padding:.05rem .6rem;border-radius:.5rem;direction:ltr}

/* ───── جعبه‌ی آموزش / ثبت‌نام ───── */
.promo{min-height:14rem;display:flex;flex-direction:column;justify-content:center;gap:.8rem}
.pitem{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;padding:1.3rem 1.2rem;border-radius:1.4rem;
  background:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:inset 0 0 0 .1rem rgba(186,151,59,.55);animation:fadein .6s}
@keyframes fadein{from{opacity:0;transform:translateY(.6rem)}}
.ptag{font-size:.9rem;padding:.1rem .9rem;border-radius:2rem;color:#fff;background:var(--teal-d)}
.ptag.t-register{background:var(--gold-d)}.ptag.t-buy{background:#7b4a6e}
.pitem h3{font-size:1.45rem;color:var(--gold-l);line-height:1.35}
.pitem p{font-size:1.02rem;color:#e6e0cf;line-height:1.7}
.qrbox{background:#fff;padding:.5rem;border-radius:.8rem;display:inline-block;line-height:0}
.qrbox canvas{width:10rem;height:10rem;image-rendering:pixelated}
.pdots{display:flex;gap:.4rem;justify-content:center}
.pdots i{width:.55rem;height:.55rem;border-radius:50%;background:rgba(255,255,255,.25)}
.pdots i.on{background:var(--gold)}
@media (orientation:portrait){
  .promo{min-height:0}
  .pitem{flex-direction:row;text-align:right;gap:.9rem;padding:.8rem}
  .pitem .ptxt{flex:1;display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}
  .qrbox canvas{width:6.6rem;height:6.6rem}
}
@media (orientation:landscape){.pitem .ptxt{display:flex;flex-direction:column;align-items:center;gap:.5rem}}

/* ───── نتیجه ───── */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(8,8,8,.82);animation:fadein .4s}
.res-card{width:min(100%,50rem);max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center;padding:1.6rem 1.8rem;border-radius:2rem;
  background:linear-gradient(rgba(34,34,34,.97),rgba(14,14,14,.98));box-shadow:0 1.5rem 4rem #000,inset 0 0 0 .15rem var(--teal)}
.res-card.win{box-shadow:0 1.5rem 4rem #000,0 0 4rem rgba(224,203,134,.55),inset 0 0 0 .25rem var(--gold-l);animation:winpop .7s}
@keyframes winpop{from{transform:scale(.8);opacity:0}60%{transform:scale(1.04)}}
.res-card h2{font-size:2.5rem;line-height:1.3;color:var(--teal-l)}
.res-card.win h2{color:var(--gold-l);text-shadow:0 0 1.4rem rgba(224,203,134,.6)}
.res-msg{font-size:1.3rem;line-height:1.8;max-width:40rem}
.res-combo{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.chip{width:5.2rem;height:4.2rem;border-radius:.8rem;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.2rem}
.chip img{max-width:80%;max-height:60%;object-fit:contain}
.chip span{font-size:.8rem;color:var(--dark);font-weight:700;line-height:1.1}
.res-qrs{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.rq{display:flex;flex-direction:column;align-items:center;gap:.3rem;max-width:9.5rem;font-size:.9rem;color:var(--gold-l)}
.rq .qrbox canvas{width:7rem;height:7rem}
.res-note{font-size:1rem;color:var(--gold-l)}
.res-actions{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:min(100%,24rem)}
.res-count{font-size:.95rem;color:#aaa}
@media (orientation:portrait){
  .res-card h2{font-size:1.9rem}.res-msg{font-size:1.1rem}.rq .qrbox canvas{width:5.6rem;height:5.6rem}.rq{max-width:7.5rem}
}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}

@media (prefers-reduced-motion:reduce){
  .btn-spin,.lights i,.machine.win,.reel.hit{animation:none}
}

/* سه QR صفحه‌ی اول */
.pgrid{display:flex;flex-direction:column;gap:.8rem}
.pcard{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;border-radius:1.2rem;background:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:inset 0 0 0 .1rem rgba(186,151,59,.55);animation:fadein .6s}
.pcard h3{font-size:1.3rem;color:var(--gold-l);line-height:1.3}
.pcard p{font-size:.9rem;color:#e6e0cf;line-height:1.5}
.pcard .qrbox canvas{width:7rem;height:7rem}
@media (orientation:portrait){
  .pgrid{flex-direction:row;gap:.5rem}
  .pcard{flex:1;min-width:0;flex-direction:column;text-align:center;padding:.5rem;gap:.4rem}
  .pcard h3{font-size:1.05rem}.pcard p{font-size:.78rem}
  .pcard .qrbox canvas{width:6.2rem;height:6.2rem}
}