/* ==========================================================================
   برجِ نمک — پوستهٔ بازی (ALL-GAMES §۶ موبایل‌فرست · §۳ تمِ یکتا)
   پالتِ یکتا: شبِ کویرِ نمک — فیروزه‌ای سرد + اخگرِ نارنجی روی زمینهٔ لاجوردیِ تیره.
   قابِ مرجع ۳۷۵×۸۱۲ · بازه‌ی تست ۳۲۰ / ۳۷۵ / ۴۳۰
   ========================================================================== */

@font-face{
  font-family:'Vazirmatn'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
}

:root{
  --bg:#0b1a1f;            /* شبِ کویر */
  --bg2:#123037;
  --bg3:#1b4a4a;
  --ink:#eaf6f4;
  --dim:#9dbdbd;
  --line:rgba(127,227,212,.18);
  --card:#12292f;
  --card2:#173940;
  --acc:#4fd6c8;           /* نمکِ فیروزه‌ای — رنگِ امضای بازی */
  --acc2:#7fe3d4;
  --fire:#ff7a3c;          /* اخگر */
  --gold:#e8b93b;          /* زبانِ پول — استانداردِ کارگاه (§۳.۳) */
  --bad:#ff5f6d;
  --ok:#67e08f;
  --r:16px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; overflow:hidden; }
body{
  font-family:'Vazirmatn',system-ui,sans-serif;
  background:radial-gradient(120% 80% at 50% 0%, var(--bg2) 0%, var(--bg) 60%);
  color:var(--ink); user-select:none; -webkit-user-select:none;
  font-size:16px; line-height:1.7;
}
button{ font-family:inherit; color:inherit; }
h1,h2,h3{ margin:0 0 6px; line-height:1.4; }
p{ margin:0 0 10px; }
.dim{ color:var(--dim); font-size:14px; }

/* ------------------------------ اسپلش ------------------------------ */
#splash{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 20%, #17454a 0%, #0b1a1f 65%);
  transition:opacity .5s ease, visibility .5s;
}
#splash.gone{ opacity:0; visibility:hidden; pointer-events:none; }
.sp-wrap{ text-align:center; padding:24px; max-width:340px; }
.sp-logo{ width:132px; height:132px; animation:spIn .8s ease both; }
@keyframes spIn{ from{ transform:scale(.82); opacity:0; filter:blur(6px);} to{ transform:none; opacity:1; filter:none;} }
.sp-name{ font-size:30px; font-weight:700; margin-top:8px; letter-spacing:.5px; }
.sp-tag{ color:var(--acc2); font-size:15px; }
.sp-bar{ height:5px; border-radius:5px; background:rgba(255,255,255,.09); overflow:hidden; margin:14px auto 10px; width:180px; }
.sp-bar i{ display:block; height:100%; width:40%; border-radius:5px; background:linear-gradient(90deg,var(--acc),var(--gold));
           animation:spBar 1.1s ease-in-out infinite alternate; }
@keyframes spBar{ from{ transform:translateX(-60%);} to{ transform:translateX(180%);} }
.sp-brand{ color:#6f9a9a; font-size:12px; margin-bottom:14px; }
@media (prefers-reduced-motion:reduce){
  .sp-logo,.sp-bar i{ animation:none; }
}

/* ------------------------------ صفحه‌ها ------------------------------ */
.screen{
  position:fixed; inset:0; display:none; flex-direction:column;
  padding:calc(var(--safe-t) + 8px) 14px calc(var(--safe-b) + 12px);
  overflow-y:auto; overscroll-behavior:contain;
}
.screen.on{ display:flex; }
.scr-title{ font-size:20px; text-align:center; margin-top:6px; }
.scr-sub{ text-align:center; color:var(--dim); font-size:13px; margin-bottom:12px; }
.scr-foot{ margin-top:auto; padding-top:10px; color:var(--dim); font-size:13px; text-align:center; }

.topbar{ display:flex; align-items:center; gap:8px; min-height:44px; }
.topbar > span{ width:44px; }
.ic-btn{
  width:44px; height:44px; flex:0 0 auto; border:none; border-radius:14px;
  background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center;
  font-size:20px; cursor:pointer; transition:transform .1s, background .2s;
}
.ic-btn.sm{ width:44px; height:44px; border-radius:12px; font-size:17px; }   /* ≥۴۴px — §۶.۲ */
.ic-btn:active{ transform:translateY(2px); background:rgba(255,255,255,.13); }
.chip{
  border:none; border-radius:12px; background:rgba(255,255,255,.07); color:var(--ink);
  padding:8px 12px; font-size:13px; min-height:44px; cursor:pointer;
}
.chip.lang{ font-weight:700; letter-spacing:.5px; }

/* کیف پول */
.wallet{ display:flex; gap:6px; flex:1; justify-content:center; flex-wrap:wrap; }
.w-chip{
  display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.06);
  border:1px solid var(--line); border-radius:12px; padding:5px 9px; font-size:13px; font-weight:700;
}
.w-chip .ic{ color:var(--acc2); }
.w-chip.gem .ic{ color:var(--gold); }
.w-chip.life .ic{ color:var(--fire); }
.w-chip small{ color:var(--dim); font-weight:400; font-size:11px; }

/* ------------------------------ دکمه‌ها ------------------------------ */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:48px; padding:12px 16px; margin:6px 0;
  border:1px solid var(--line); border-radius:14px; background:var(--card2);
  color:var(--ink); font-size:16px; font-weight:700; cursor:pointer;
  transition:transform .1s, filter .2s; box-shadow:0 3px 0 rgba(0,0,0,.35);
}
.btn:active{ transform:translateY(3px); box-shadow:none; }
.btn.gold{ background:linear-gradient(180deg,#f3c85a,#d99f22); color:#2a1c05; border-color:#f6d98a; }
.btn.big{ min-height:60px; font-size:19px; }
.btn.sm{ min-height:40px; font-size:14px; font-weight:400; }
.btn.ghost{ background:transparent; box-shadow:none; color:var(--dim); }
.btn:disabled{ opacity:.45; }
.btn.pulse{ animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.035);} }
.acts{ display:flex; gap:8px; }
.acts.col{ flex-direction:column; }

/* ------------------------------- منو ------------------------------- */
.menu-body{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top:4px; }
.menu-logo{ width:96px; height:96px; }
.salt-cast{width:min(100%,330px);height:138px;object-fit:cover;object-position:center 48%;border-radius:24px;border:2px solid rgba(255,255,255,.42);box-shadow:0 14px 32px rgba(0,0,0,.35);margin:-7px auto 5px}
.enemy-parade{display:flex;justify-content:center;gap:6px;margin:-2px 0 5px}.enemy-parade img{width:48px;height:48px;object-fit:cover;border-radius:14px;border:2px solid #f1bd68;background:#16323b;box-shadow:0 6px 14px #0006}
.brand{ font-size:27px; margin-top:2px; }
.tag{ color:var(--acc2); font-size:14px; margin-bottom:14px; }
#menu-play{ max-width:320px; }
.menu-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; max-width:340px; margin-top:12px; }
.tile{
  border:1px solid var(--line); border-radius:14px; background:var(--card);
  padding:10px 4px; display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:11px; cursor:pointer; min-height:74px; justify-content:center;
}
.tile:active{ transform:translateY(2px); }
.tile .ic{ color:var(--acc2); }
.tile b{ font-weight:400; }
.extras{ width:100%; max-width:340px; margin-top:10px; }
.extra-card{
  display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:10px 12px; margin-top:8px; text-align:start;
}
.extra-card .ic{ color:var(--gold); flex:0 0 auto; }
.extra-card b{ font-size:14px; display:block; }
.extra-card small{ color:var(--dim); font-size:11px; }
.extra-card button{
  margin-inline-start:auto; border:none; border-radius:10px; padding:8px 12px;
  min-height:44px; background:var(--gold); color:#2a1c05; font-weight:700; font-size:13px; cursor:pointer;
}
.extra-card input{
  flex:1; min-width:0; background:rgba(0,0,0,.25); border:1px solid var(--line);
  border-radius:10px; padding:8px; color:var(--ink); font-family:inherit; font-size:14px;
}

/* ------------------------------ نقشه ------------------------------ */
.road{ display:flex; flex-direction:column; gap:10px; padding:4px 0 10px; }
.node{
  display:flex; align-items:center; gap:10px; width:86%;
  border:1px solid var(--line); border-radius:16px; background:var(--card);
  padding:10px 12px; cursor:pointer; position:relative;
}
.node:nth-child(even){ align-self:flex-end; }
.node:nth-child(odd){ align-self:flex-start; }
.node:active{ transform:translateY(2px); }
.node.lock{ opacity:.5; }
.node.now{ border-color:var(--acc); box-shadow:0 0 0 2px rgba(79,214,200,.22); }
.node .n-num{
  width:38px; height:38px; flex:0 0 auto; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-weight:700; background:rgba(255,255,255,.07);
}
.node .n-txt{ flex:1; min-width:0; }
.node .n-txt b{ display:block; font-size:15px; }
.node .n-txt small{ color:var(--dim); font-size:11px; }
.node .n-stars{ display:flex; gap:2px; color:var(--gold); font-size:12px; }
.node .n-stars .ic.off{ color:rgba(255,255,255,.18); }
.node.boss .n-num{ background:linear-gradient(180deg,#f3c85a,#d99f22); color:#2a1c05; }

/* ----------------------------- گیم‌پلی ----------------------------- */
#play{ padding:0; }
#cv{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
#hud{ position:absolute; inset:0; pointer-events:none; display:flex; flex-direction:column;
      padding:calc(var(--safe-t) + 8px) 10px calc(var(--safe-b) + 10px); }
#hud button{ pointer-events:auto; }
.hud-top{ display:flex; align-items:center; gap:8px; }
.hud-gate{ flex:1; display:flex; align-items:center; gap:6px; background:rgba(4,16,20,.55);
           border-radius:12px; padding:6px 10px; }
.hud-gate .ic{ color:var(--acc2); }
.bar{ flex:1; height:9px; border-radius:6px; background:rgba(255,255,255,.13); overflow:hidden; }
.bar i{ display:block; height:100%; width:100%; border-radius:6px;
        background:linear-gradient(90deg,#4fd6c8,#67e08f); transition:width .25s; }
.bar i.low{ background:linear-gradient(90deg,#ff9f6b,#ff5f6d); }
.hud-chip{ display:flex; align-items:center; gap:5px; background:rgba(4,16,20,.55);
           border-radius:12px; padding:6px 10px; font-weight:700; font-size:14px; }
.hud-chip .ic{ color:var(--gold); }

.hud-bottom{ margin-top:auto; display:flex; align-items:flex-end; gap:10px; }
.fuel{ flex:1; display:flex; align-items:center; gap:7px; background:rgba(4,16,20,.55);
       border-radius:14px; padding:8px 12px; }
.fuel .ic{ color:var(--fire); }
.fuelbar i{ background:linear-gradient(90deg,#ffcf6b,#ff7a3c); }
.fuel b{ font-size:14px; min-width:22px; text-align:center; }
.salt-btn{
  width:66px; height:66px; border-radius:20px; border:1px solid var(--line);
  background:rgba(4,16,20,.7); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1px; cursor:pointer;
}
.salt-btn .ic{ color:var(--acc2); }
.salt-btn b{ font-size:13px; }
.salt-btn:disabled{ opacity:.4; }
.salt-btn.armed{ border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,214,200,.3); }

.combo{ position:absolute; inset-inline-end:14px; top:96px; font-weight:700; color:var(--gold);
        font-size:15px; opacity:0; transition:opacity .2s; }
.combo.on{ opacity:1; }
.banner{ position:absolute; inset-inline:0; top:38%; text-align:center; font-size:22px;
         font-weight:700; opacity:0; transition:opacity .3s, transform .3s; transform:translateY(8px); }
.banner.on{ opacity:1; transform:none; }

/* --------------------------- کارت‌ها/ردیف‌ها --------------------------- */
.cards{ display:flex; flex-direction:column; gap:10px; padding-bottom:16px; }
.card-row{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line);
  border-radius:16px; background:var(--card); padding:12px;
}
.card-row.hi{ border-color:var(--gold); background:linear-gradient(180deg,#26313a,#182a30); }
.card-row .ic{ color:var(--acc2); flex:0 0 auto; }
.card-row.hi .ic{ color:var(--gold); }
.card-row .txt{ flex:1; min-width:0; }
.card-row .txt b{ display:block; font-size:15px; }
.card-row .txt small{ color:var(--dim); font-size:12px; display:block; }
.price{
  border:none; border-radius:12px; padding:10px 12px; min-width:82px; min-height:44px;
  background:linear-gradient(180deg,#f3c85a,#d99f22); color:#2a1c05; font-weight:700;
  font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px;
}
.price.flat{ background:rgba(255,255,255,.1); color:var(--ink); }
.price:disabled{ opacity:.45; }
.rows{ display:flex; flex-direction:column; gap:8px; padding-bottom:16px; }
.row{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line);
  border-radius:14px; background:var(--card); padding:11px 12px; font-size:14px;
}
.row b{ flex:1; font-weight:400; }
.row .val{ color:var(--acc2); font-weight:700; }
.tag-off{ background:var(--bad); color:#fff; border-radius:8px; padding:1px 7px; font-size:11px; font-weight:700; }
.timer{ color:var(--fire); font-weight:700; }

/* گذرنامه */
.pass-head{ border:1px solid var(--line); border-radius:16px; background:var(--card); padding:12px; margin-bottom:10px; }
.pass-list{ display:flex; flex-direction:column; gap:8px; padding-bottom:16px; }
.pass-row{ display:grid; grid-template-columns:44px 1fr 1fr; gap:8px; align-items:center;
           border:1px solid var(--line); border-radius:14px; background:var(--card); padding:8px; }
.pass-row .lv{ text-align:center; font-weight:700; }
.pass-cell{ border-radius:10px; padding:8px; text-align:center; font-size:12px; background:rgba(255,255,255,.05); }
.pass-cell.gold{ background:rgba(232,185,59,.14); }
.pass-cell button{ margin-top:5px; width:100%; min-height:44px; border:none; border-radius:8px; padding:6px;
                   font-family:inherit; font-size:12px; cursor:pointer; background:var(--acc); color:#04262a; font-weight:700; }
.pass-cell button:disabled{ background:rgba(255,255,255,.1); color:var(--dim); }

/* گردونه */
.wheel-wrap{ position:relative; width:min(78vw,300px); aspect-ratio:1; margin:8px auto 12px; }
.wheel-disc{ width:100%; height:100%; border-radius:50%; border:6px solid var(--card2);
             transition:transform 3.6s cubic-bezier(.17,.67,.21,1); position:relative; overflow:hidden; }
.wheel-slice{ position:absolute; inset:0; clip-path:polygon(50% 50%, 50% 0, 85.4% 14.6%); transform-origin:50% 50%;
              display:flex; align-items:flex-start; justify-content:center; }
.wheel-slice span{ margin-top:12%; font-size:12px; font-weight:700; color:#04262a; }
.wheel-pin{ position:absolute; top:-6px; inset-inline-start:calc(50% - 9px); width:18px; height:26px;
            background:var(--gold); clip-path:polygon(50% 100%, 0 0, 100% 0); }

/* فانوس/قهرمان */
.hero-wrap{ display:flex; flex-direction:column; gap:10px; padding-bottom:16px; }
.hero-top{ display:flex; align-items:center; gap:12px; border:1px solid var(--line);
           border-radius:16px; background:var(--card); padding:14px; }
.hero-face{ width:74px; height:74px; border-radius:20px; background:linear-gradient(180deg,#1d6f74,#0e3238);
            display:flex; align-items:center; justify-content:center; }
.hero-face .ic{ color:var(--gold); }
.up-bar{ height:7px; border-radius:5px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:5px; }
.up-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--acc),var(--gold)); }

/* اردوگاه */
.camp{ display:flex; flex-direction:column; gap:10px; padding-bottom:16px; }
.camp-bubble{ border:1px solid var(--line); border-radius:16px; background:var(--card);
              padding:14px; position:relative; }
.camp-bubble b{ color:var(--acc2); }
.camp-opt{ text-align:start; }
.camp-opt.wrong{ animation:shake .3s; border-color:var(--bad); }
@keyframes shake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-6px);} 75%{ transform:translateX(6px);} }

/* ------------------------------ اورلی ------------------------------ */
.ov{
  position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center;
  background:rgba(3,12,15,.78); padding:18px; backdrop-filter:blur(2px);
}
.ov.on{ display:flex; }
.ov .card{
  width:100%; max-width:360px; max-height:88vh; overflow-y:auto; text-align:center;
  border:1px solid var(--line); border-radius:22px; padding:20px 16px 16px;
  background:linear-gradient(180deg,var(--card2),var(--card)); position:relative;
  animation:ovIn .25s ease both;
}
@keyframes ovIn{ from{ transform:translateY(14px) scale(.97); opacity:0; } to{ transform:none; opacity:1; } }
.ov.hot .card{ border-color:var(--fire); box-shadow:0 0 40px rgba(255,122,60,.22); }
.ov-x{
  position:absolute; inset-inline-end:10px; top:10px; width:36px; height:36px; border:none;
  border-radius:12px; background:rgba(255,255,255,.08); cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.gold-i{ color:var(--gold); }
.fire-i{ color:var(--fire); }
.story{ font-size:16px; line-height:2; }
.stars{ display:flex; gap:6px; justify-content:center; color:var(--gold); font-size:26px; margin-bottom:6px; }
.stars .ic.off{ color:rgba(255,255,255,.16); }
.big-num{ font-size:36px; font-weight:700; color:var(--gold); }
.daily{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:10px 0; }
.day-cell{ border:1px solid var(--line); border-radius:12px; padding:8px 3px; font-size:11px; background:rgba(255,255,255,.04); }
.day-cell.done{ opacity:.42; }
.day-cell.today{ border-color:var(--gold); background:rgba(232,185,59,.15); }
.day-cell b{ display:block; font-size:12px; color:var(--gold); }

.toast{
  position:fixed; inset-inline:0; bottom:calc(var(--safe-b) + 22px); z-index:95;
  display:flex; justify-content:center; pointer-events:none; opacity:0; transition:opacity .25s;
}
.toast.on{ opacity:1; }
.toast span{
  background:rgba(6,22,26,.94); border:1px solid var(--line); border-radius:14px;
  padding:10px 16px; font-size:14px; max-width:86%;
}
#ad-banner{ position:fixed; inset-inline:0; bottom:0; height:50px; background:#04161a; z-index:40; }

/* --------------------- راهنمای فلش‌دار (§۷) --------------------- */
.tut{ position:fixed; inset:0; z-index:80; display:none; pointer-events:none; }
.tut.on{ display:block; }
.tut-mask{ position:fixed; background:rgba(0,0,0,.72); pointer-events:auto; }
.tut-ring{ position:fixed; border:3px solid var(--gold); border-radius:16px; pointer-events:none;
           box-shadow:0 0 18px rgba(232,185,59,.85); animation:tutPulse 1.1s infinite; }
.tut-ring.dim{ border-color:rgba(232,185,59,.5); box-shadow:none; animation:none; }
@keyframes tutPulse{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.06); opacity:.75;} }
.tut-arrow{ position:fixed; width:28px; height:28px; pointer-events:none; color:var(--gold); }
.tut-arrow::before{
  content:''; display:block; width:0; height:0; margin:4px auto;
  border-inline-start:10px solid transparent; border-inline-end:10px solid transparent;
  border-top:14px solid currentColor; animation:tutBob .9s infinite;
}
@keyframes tutBob{ 0%,100%{ margin-top:2px;} 50%{ margin-top:10px;} }
.tut-hand{ position:fixed; width:30px; height:30px; pointer-events:none; color:#fff;
           filter:drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.tut-hand::before{
  content:''; display:block; width:20px; height:20px; border-radius:50%;
  border:3px solid #fff; background:rgba(255,255,255,.25);
}
.tut-hand.tap{ animation:tutTap 1.2s infinite; }
.tut-hand.drag{ animation:tutDrag 1.8s infinite; }
@keyframes tutTap{ 0%,100%{ transform:scale(1);} 45%{ transform:scale(.72);} }
@keyframes tutDrag{ 0%{ transform:translate(0,0) scale(1);} 15%{ transform:translate(0,0) scale(.8);}
                    70%{ transform:translate(var(--dx),var(--dy)) scale(.8);}
                    85%,100%{ transform:translate(var(--dx),var(--dy)) scale(1); opacity:0;} }
.tut-bubble{
  position:fixed; width:240px; background:#f4fbfa; color:#0b1a1f; border-radius:14px;
  padding:10px 14px; font-size:15px; font-weight:700; text-align:center; line-height:1.6;
  pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.tut-skip{
  position:fixed; bottom:calc(var(--safe-b) + 14px); inset-inline-end:14px;
  background:rgba(255,255,255,.16); color:#fff; border:none; border-radius:12px;
  padding:8px 15px; font-size:13px; font-family:inherit; cursor:pointer; pointer-events:auto;
}

/* --------------------------- ریسپانسیو --------------------------- */
@media (max-width:340px){
  body{ font-size:15px; }
  .brand{ font-size:23px; }
  .menu-logo{ width:78px; height:78px; }
  .btn.big{ min-height:54px; font-size:17px; }
  .tile{ min-height:66px; font-size:10px; }
  .salt-btn{ width:58px; height:58px; }
  .hud-chip{ padding:6px 7px; font-size:13px; }
}
@media (min-height:760px){
  .menu-logo{ width:112px; height:112px; }
}
@media (min-width:520px){                    /* دسکتاپ هدف نیست، ولی نباید بشکند */
  .screen, #splash{ max-width:460px; margin-inline:auto; inset-inline:0; box-shadow:0 0 60px rgba(0,0,0,.5); }
}