/* ==========================================================================
   کوزه‌شکن — پوستهٔ یکتا (ALL-GAMES §۳ · §۶)
   پالت: خاکِ کورهٔ گرم #1a120c · سفالِ سوخته #b3552a · فیروزه #2aa6b8 · طلاییِ پول #e8b93b
   ========================================================================== */
@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-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --bg:#1a120c; --bg2:#241910; --card:#2d2015; --line:#4a3624;
  --red:#b3552a; --red2:#d9935a; --candle:#2aa6b8; --gold:#e8b93b; --ink:#f1e6dc; --dim:#a08f96;
  --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; background:var(--bg); color:var(--ink);
  font-family:'Vazirmatn',system-ui,sans-serif; font-size:16px; user-select:none; -webkit-user-select:none; }
button{ font-family:inherit; font-size:inherit; color:inherit; border:0; background:none; cursor:pointer; }
h1,h2,h3,p{ margin:0; }
a{ color:var(--candle); }

/* ---------- آیکون ---------- */
.ic{ width:1em; height:1em; display:inline-block; vertical-align:-.125em; fill:currentColor; flex:0 0 auto; pointer-events:none; }
.ic.lg{ width:1.6em; height:1.6em; } .ic.xl{ width:2.4em; height:2.4em; } .ic.sm{ width:.85em; height:.85em; }

/* ---------- صفحه‌ها ---------- */
.screen{ position:absolute; inset:0; display:none; flex-direction:column; max-width:520px; margin:0 auto; background:var(--bg); }
.screen.on{ display:flex; }
.screen.scroll .page{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
.page{ flex:1; padding:12px 14px calc(20px + var(--safe-b)); display:flex; flex-direction:column; gap:12px; }
.page.center{ align-items:center; justify-content:center; }
.topbar{ display:flex; align-items:center; gap:8px; padding:calc(8px + var(--safe-t)) 10px 8px; background:var(--bg2); border-bottom:1px solid var(--line); min-height:56px; }
.bar-mid{ flex:1; min-width:0; text-align:center; }
.bar-mid h2{ font-size:16px; } .bar-mid p{ font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chip{ min-width:44px; min-height:44px; border-radius:12px; background:var(--card); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:18px; }
.chip:active{ transform:translateY(2px); }
.pill{ display:inline-flex; align-items:center; gap:4px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:14px; min-height:32px; }
.pill small{ color:var(--dim); font-size:11px; }
.wallet{ display:flex; gap:6px; flex:1; justify-content:center; flex-wrap:wrap; }
.dim{ color:var(--dim); font-size:14px; }

/* ---------- دکمه ---------- */
.btn{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 18px; border-radius:14px;
  background:var(--red); color:#fff; font-weight:700; font-size:17px; box-shadow:0 4px 0 #6b2f14; transition:transform .06s; }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #6b2f14; }
.btn.king{ min-height:64px; font-size:20px; background:linear-gradient(180deg,#f3c95a,var(--gold)); color:#2a1d00; box-shadow:0 5px 0 #8a6a12; }
.btn.gold{ background:linear-gradient(180deg,#f3c95a,var(--gold)); color:#2a1d00; box-shadow:0 4px 0 #8a6a12; }
.btn.ghost{ background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.btn.small{ min-height:44px; font-size:14px; font-weight:400; } .btn.tiny{ min-height:44px; font-size:13px; color:var(--dim); }
.btn.sm{ min-height:44px; padding:0 14px; font-size:14px; }
.btn.toggle{ min-width:92px; } .btn.toggle.yes{ background:#2f6b3a; color:#fff; box-shadow:0 4px 0 #1b4022; }
.btn:disabled{ opacity:.45; filter:grayscale(.6); }
.btn.pulse{ animation:pulse 1.2s infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.04) } }

/* ---------- اسپلش ---------- */
#scr-splash{ z-index:50; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 60%, #3a2412 0%, var(--bg) 70%); transition:opacity .5s, filter .5s; }
#scr-splash.out{ opacity:0; filter:blur(6px); pointer-events:none; }
.splash-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px; animation:fadeUp .7s ease-out; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px) scale(.96) } to{ opacity:1; transform:none } }
.logo{ width:min(46vw,190px); height:auto; filter:drop-shadow(0 0 22px rgba(42,166,184,.35)); }
.logo.sm{ width:78px; }
#scr-splash h1{ font-size:44px; letter-spacing:.02em; color:#fff; text-shadow:0 0 18px rgba(42,166,184,.6); }
#scr-splash .sub{ color:var(--candle); font-size:18px; }
.dots{ display:flex; gap:6px; margin-top:8px; } .dots i{ width:8px; height:8px; border-radius:50%; background:var(--candle); opacity:.3; animation:dot 1.2s infinite; }
.dots i:nth-child(2){ animation-delay:.2s } .dots i:nth-child(3){ animation-delay:.4s }
@keyframes dot{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }
#splash-enter{ margin-top:6px; min-width:140px; }
.mb-brand-note{ margin-top:14px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- منو ---------- */
.menu-inner{ flex:1; overflow-y:auto; display:flex; flex-direction:column; align-items:center; gap:14px; padding:12px 18px calc(24px + var(--safe-b)); background:radial-gradient(ellipse at 50% 20%, #3a2412 0%, transparent 60%); }
.brand{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; }
.brand h1{ font-size:36px; color:#fff; text-shadow:0 0 14px rgba(42,166,184,.5); }
.brand .tag{ color:var(--dim); font-size:14px; }
.brand .logo{ display:none; }           /* لوگوی منو را کیتِ موبایل‌بازی از icons/icon-192.png می‌گذارد؛ نسخهٔ درون‌خطی فقط در اسپلش */
.menu-btns{ width:100%; max-width:360px; display:flex; flex-direction:column; gap:10px; }
.btn-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.btn-row .btn{ flex-direction:column; gap:4px; font-size:13px; padding:8px 4px; min-height:64px; font-weight:400; }
.starter-card{ width:100%; max-width:360px; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; min-height:54px;
  background:linear-gradient(90deg,#3b2a10,#5a3b12); border:1px solid var(--gold); color:#ffe8a3; animation:pulse 1.6s infinite; }
.starter-card span{ display:flex; flex-direction:column; text-align:start; } .starter-card small{ color:var(--gold); }

/* ---------- نقشه ---------- */
.map-list{ flex:1; overflow-y:auto; padding:14px 18px calc(20px + var(--safe-b)); display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg,var(--bg) 0%,#160e12 100%); }
.night{ --acc:var(--red); position:relative; display:grid; grid-template-columns:56px 1fr auto; grid-template-rows:auto auto; align-items:center; gap:2px 10px;
  width:88%; min-height:74px; padding:10px 12px; border-radius:16px; background:var(--card); border:1px solid var(--line); border-inline-start:6px solid var(--acc); text-align:start; color:var(--ink); }
.night.odd{ margin-inline-start:auto; }
.night.cur{ box-shadow:0 0 0 2px var(--acc), 0 0 18px rgba(42,166,184,.25); }
.night.locked{ opacity:.55; filter:grayscale(.5); }
.n-num{ grid-row:1/3; font-size:30px; font-weight:700; color:var(--acc); text-align:center; }
.n-name{ font-weight:700; font-size:16px; } .n-new{ grid-column:2/4; font-size:12px; color:var(--dim); line-height:1.5; }
.n-stars{ font-size:15px; color:#5a4a50; } .n-stars .got{ color:var(--gold); }
.n-boss{ position:absolute; top:-8px; inset-inline-end:10px; color:var(--red2); font-size:18px; }
.map-foot{ display:flex; justify-content:space-between; align-items:center; padding:8px 16px calc(8px + var(--safe-b)); background:var(--bg2); border-top:1px solid var(--line); font-size:14px; color:var(--gold); }

/* ---------- گیم‌پلی ---------- */
#scr-play{ background:#0b0a10; }
.hud{ padding:calc(6px + var(--safe-t)) 10px 4px; display:flex; flex-direction:column; gap:6px; }
.hud-top{ display:flex; align-items:center; gap:8px; }
.hud-night{ font-size:13px; color:var(--dim); } .hud-keys{ flex:1; text-align:center; font-weight:700; color:var(--gold); font-size:15px; display:inline-flex; justify-content:center; gap:4px; }
.hud-caught{ display:flex; gap:4px; } .hud-caught i{ width:12px; height:12px; border-radius:50%; border:2px solid var(--red); } .hud-caught i.x{ background:var(--red); }
.bar{ height:10px; border-radius:6px; background:#2a1c22; overflow:hidden; }
.bar i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,#5b3fa0,#8fb3ff); transition:width .25s linear; }
.bar.time i{ background:linear-gradient(90deg,#3b2a6a,#8fb3ff); } .bar.time i.low{ background:var(--red2); animation:pulse .6s infinite; }
.bar.hp i{ background:linear-gradient(90deg,#b3552a,#d9935a); } .bar.hp i.crack{ background:linear-gradient(90deg,#2aa6b8,#7fd0f0); animation:pulse .8s infinite; }
.hp-wrap{ flex:1; display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--dim); }
.ammo-row{ display:flex; align-items:center; gap:6px; font-size:13px; } .ammo-row b{ color:var(--gold); font-size:16px; } .chip.swap{ min-width:44px; min-height:44px; margin-inline-start:auto; }
.fire-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:104px; height:84px; border-radius:24px; touch-action:none; background:radial-gradient(circle at 50% 30%, #d9935a, #7a3f22); border:2px solid #f2b45c; color:#fff3e0; font-size:14px; font-weight:700; box-shadow:0 5px 0 #3a1c0c; }
.fire-btn.on{ transform:translateY(4px); box-shadow:0 1px 0 #3a1c0c; background:radial-gradient(circle at 50% 30%, #ffd36b, #d9935a); color:#2a1d00; }
#stage{ flex:1; display:flex; align-items:center; justify-content:center; min-height:0; padding:0 6px; }
#cv{ width:100%; height:auto; max-height:100%; aspect-ratio:3/5; touch-action:none; border-radius:10px; background:#0a0608; box-shadow:0 0 0 1px var(--line); image-rendering:auto; }
#banner{ position:absolute; top:40%; left:0; right:0; text-align:center; pointer-events:none; opacity:0; transition:opacity .25s;
  font-weight:700; font-size:20px; color:#fff; text-shadow:0 2px 10px #000; }
#banner.on{ opacity:1; }
.hud-bottom{ display:flex; align-items:center; gap:12px; padding:8px 12px calc(10px + var(--safe-b)); }
/* ---------- کارت‌ها ---------- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.card.row{ flex-direction:row; align-items:center; gap:10px; } .card.row > div{ flex:1; display:flex; flex-direction:column; min-width:0; } .card.row small{ color:var(--dim); font-size:12px; }
.card h3, .page h3{ font-size:17px; }
.c-head{ display:flex; align-items:center; gap:8px; } .c-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.card.starter{ background:linear-gradient(135deg,#3b2a10,#241a1e); border-color:var(--gold); }
.badge{ background:var(--red); color:#fff; border-radius:999px; padding:2px 10px; font-size:12px; }
.rewards{ display:flex; gap:10px; flex-wrap:wrap; } .rewards span{ display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,.25); border-radius:10px; padding:6px 10px; font-size:14px; }
.packs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.pack{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; border-radius:14px; background:var(--card); border:1px solid var(--line); min-height:44px; }
.pack b{ font-size:16px; } .pack em{ font-size:11px; color:var(--gold); font-style:normal; } .pack .price{ font-size:12px; background:var(--gold); color:#2a1d00; border-radius:8px; padding:3px 6px; font-weight:700; }
.pack:nth-child(2){ border-color:var(--gold); box-shadow:0 0 12px rgba(232,185,59,.25); }
.row{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 12px; }
.row > div{ flex:1; display:flex; flex-direction:column; min-width:0; } .row small{ color:var(--dim); font-size:12px; }
.row2{ display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid var(--line); font-size:14px; }
.about p{ font-size:14px; line-height:1.7; color:var(--dim); }
.pv-card{ margin-top:6px; } .pv-card button, .pv-b{ min-height:44px !important; }   /* دکمه‌های کیتِ حریم خصوصی ۳۳px بودند — کفِ لمسیِ §۶.۲ */

/* ---------- آماده‌سازی ---------- */
.boost{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px; background:var(--bg2); border:1px solid var(--line); margin-bottom:8px; }
.boost.on{ border-color:#7fe0c8; background:#16302c; }
.b-mid{ flex:1; display:flex; flex-direction:column; min-width:0; text-align:start; } .b-mid small{ color:var(--dim); font-size:12px; } .b-have{ color:var(--gold) !important; }

/* ---------- قهرمان ---------- */
.hero-art{ display:flex; align-items:center; justify-content:center; gap:14px; padding:10px; }
.parnia{ width:110px; height:150px; border-radius:60px 60px 30px 30px; background:linear-gradient(180deg,#f1d3b3 0 32%, #2d2a4a 32%); position:relative; box-shadow:0 0 30px rgba(42,166,184,.25); }
.parnia::before{ content:''; position:absolute; top:0; left:12px; right:12px; height:36px; border-radius:50% 50% 20% 20%; background:#1a1220; }
.parnia::after{ content:''; position:absolute; bottom:-6px; inset-inline-end:-10px; width:10px; height:34px; border-radius:3px; background:#f4e2b8; box-shadow:0 -14px 10px 2px rgba(242,166,90,.8); }
.parnia.small{ width:70px; height:96px; margin:0 auto; }
.saboo{ background:radial-gradient(circle at 40% 35%, #d9935a, #7a3f22) !important; border-radius:50% 50% 45% 45% / 35% 35% 60% 60% !important; box-shadow:0 0 30px rgba(42,166,184,.3) !important; }
.saboo::before{ background:#2a1a10 !important; height:22px !important; border-radius:6px !important; left:30px !important; right:30px !important; top:-6px !important; }
.saboo::after{ display:none !important; }
.bak-face.shards{ background:radial-gradient(circle at 50% 40%, #d9935a, #3a2412) !important; border-radius:40% 60% 50% 50% !important; box-shadow:0 0 24px rgba(217,147,90,.5) !important; }
.bak-face.shards::before,.bak-face.shards::after{ background:#ffe08a !important; box-shadow:none !important; }
.branch{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.b-head{ display:flex; justify-content:space-between; } .b-head span{ color:var(--dim); font-size:13px; }
.branch small{ color:var(--dim); font-size:12px; } .branch .bar i{ background:linear-gradient(90deg,var(--red),var(--candle)); }
.b-btns{ display:flex; gap:8px; justify-content:flex-end; } .max{ color:var(--gold); font-weight:700; }

/* ---------- چراغ‌دان ---------- */
.skin{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:10px; }
.skin.on{ border-color:var(--candle); box-shadow:0 0 14px rgba(42,166,184,.25); }
.skin > div:not(.lamp){ flex:1; display:flex; flex-direction:column; min-width:0; } .skin small{ color:var(--dim); font-size:12px; }
.lamp{ width:48px; height:60px; border-radius:8px; position:relative; flex:0 0 auto; }
.lamp::after{ content:''; position:absolute; top:-8px; left:50%; width:14px; height:18px; margin-left:-7px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; }
/* لعاب‌ها */ .glaze-clay{ background:radial-gradient(circle at 40% 35%, #c9a27a, #7a5a3a); border-radius:50% 50% 45% 45%/35% 35% 60% 60%; } .glaze-clay::after{ display:none; }
.glaze-turquoise{ background:radial-gradient(circle at 40% 35%, #7fd0f0, #1d7f8c); border-radius:50% 50% 45% 45%/35% 35% 60% 60%; } .glaze-turquoise::after{ display:none; }
.glaze-cobalt{ background:radial-gradient(circle at 40% 35%, #5b7ce0, #1a2a6a); border-radius:50% 50% 45% 45%/35% 35% 60% 60%; } .glaze-cobalt::after{ display:none; }
.glaze-gold{ background:radial-gradient(circle at 40% 35%, #ffe08a, #a8741a); border-radius:50% 50% 45% 45%/35% 35% 60% 60%; } .glaze-gold::after{ display:none; }
.lamp-candle{ background:linear-gradient(#f4e2b8,#d9c39a); } .lamp-candle::after{ background:#f2a65a; box-shadow:0 0 14px #f2a65a; }
.lamp-lantern{ background:linear-gradient(#5a3b26,#3f2a18); border:2px solid #d9a441; } .lamp-lantern::after{ background:#ffd36b; box-shadow:0 0 16px #ffd36b; }
.lamp-oil{ background:linear-gradient(#7a2a30,#4a171c); border:2px solid #b3261e; } .lamp-oil::after{ background:#ff9a3c; box-shadow:0 0 16px #ff9a3c; }
.lamp-moon{ background:radial-gradient(circle at 40% 40%, #fff, #8fb3ff 60%, #2d2a4a); border-radius:50%; } .lamp-moon::after{ display:none; }

/* ---------- قرعه ---------- */
.wheel{ position:relative; width:min(78vw,300px); height:min(78vw,300px); border-radius:50%; border:6px solid var(--red); background:radial-gradient(#3a2412,#100c0e); box-shadow:0 0 30px rgba(42,166,184,.3); }
.wslot{ position:absolute; top:50%; left:50%; width:74px; height:44px; margin:-22px -37px; display:flex; align-items:center; justify-content:center; font-size:13px; border-radius:10px; background:var(--card); border:1px solid var(--line);
  transform:rotate(calc(var(--i) * 45deg)) translateY(calc(min(78vw,300px) / -2 + 40px)) rotate(calc(var(--i) * -45deg)); }
.wslot span{ display:inline-flex; align-items:center; gap:3px; } .wslot.lit{ background:var(--gold); color:#2a1d00; box-shadow:0 0 16px var(--gold); }
.wheel-result{ min-height:28px; font-weight:700; color:var(--gold); display:flex; gap:6px; align-items:center; justify-content:center; }

/* ---------- تنظیمات ---------- */
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; border-bottom:1px solid var(--line); }
.set-row > span{ display:inline-flex; align-items:center; gap:6px; }
.set-row input[type=range]{ width:140px; accent-color:var(--candle); min-height:44px; }
.code{ width:100%; font-family:monospace; font-size:11px; padding:8px; border-radius:8px; background:#0a0608; color:var(--dim); border:1px solid var(--line); direction:ltr; }

/* ---------- اورلی ---------- */
.ov{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(5,3,6,.8); z-index:40; }
.ov.on{ display:flex; }
.ov .card{ position:relative; width:100%; max-width:380px; max-height:calc(100% - 20px); overflow-y:auto; text-align:center; align-items:center; padding:20px 18px; gap:10px; animation:fadeUp .3s ease-out; }
.ov .card p{ font-size:15px; line-height:1.8; }
.ov .x{ position:absolute; top:8px; inset-inline-end:8px; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:18px; }
.ov.story .card{ background:linear-gradient(180deg,#2a1e16,#1a1216); border-color:#6b4a2e; color:#f4e2b8; }
.ov.fire .card{ background:radial-gradient(circle at 50% 0%, #4a1410, var(--card) 70%); border-color:var(--red2); }
.ov.ad .card{ background:#111; } .big{ font-size:48px; color:var(--gold); }
.c-btns{ display:flex; gap:10px; width:100%; } .c-btns .btn{ flex:1; }
.stars{ font-size:34px; color:#4a3a40; letter-spacing:.1em; } .stars .got{ color:var(--gold); text-shadow:0 0 14px rgba(232,185,59,.6); }
.reward b{ color:var(--gold); } .pity{ color:#7fe0c8; font-size:14px; }
.bak-face{ width:70px; height:80px; border-radius:50% 50% 40% 40%; background:radial-gradient(circle at 50% 35%, #2a1a22, #08040a); position:relative; box-shadow:0 0 24px rgba(217,147,90,.5); }
.bak-face::before,.bak-face::after{ content:''; position:absolute; top:30px; width:8px; height:8px; border-radius:50%; background:#ff3b3b; box-shadow:0 0 8px #ff3b3b; }
.bak-face::before{ left:22px } .bak-face::after{ right:22px }
.daily{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:100%; }
.dcard{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px; border-radius:12px; background:var(--bg2); border:1px solid var(--line); font-size:12px; min-height:64px; }
.dcard small{ color:var(--dim); } .dcard span{ display:inline-flex; align-items:center; gap:2px; }
.dcard.past{ opacity:.4; } .dcard.today{ border-color:var(--gold); box-shadow:0 0 14px rgba(232,185,59,.35); background:#3b2a10; }
.dcard:last-child{ grid-column:span 1; }
.help p{ text-align:start; font-size:14px; line-height:1.8; color:var(--dim); padding:6px 0; border-bottom:1px solid var(--line); }
.credits{ font-size:13px; color:var(--dim); }
#toast{ position:fixed; bottom:calc(24px + var(--safe-b)); left:50%; transform:translate(-50%,20px); background:#fff; color:#111; padding:10px 18px; border-radius:12px; font-weight:700; opacity:0; pointer-events:none; transition:.25s; z-index:90; max-width:90vw; text-align:center; }
#toast.on{ opacity:1; transform:translate(-50%,0); }

/* ---------- راهنمای فلش‌دار (tutor.css) ---------- */
.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 #ffd97a; border-radius:16px; pointer-events:none; box-shadow:0 0 18px rgba(255,217,122,.9); animation:tutPulse 1.1s infinite; }
.tut-ring.dim { border-color:rgba(255,217,122,.55); 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:#ffd97a; font-size:28px; line-height:28px; text-align:center; animation:tutBob .9s infinite; }
.tut-arrow::before { content:'▼'; }
@keyframes tutBob { 0%,100%{ margin-top:0 } 50%{ margin-top:8px } }
.tut-hand { position:fixed; font-size:34px; pointer-events:none; filter:drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.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(.78) } }
@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:#fff; color:#222; border-radius:14px; padding:10px 14px; font-size:16px; font-weight:bold; text-align:center; pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.5); }
.tut-skip { position:fixed; bottom:14px; inset-inline-end:14px; background:rgba(255,255,255,.16); color:#fff; border:none; border-radius:12px; padding:7px 14px; font-size:13px; font-family:inherit; cursor:pointer; pointer-events:auto; min-height:44px; }

/* ---------- ریسپانسیو ---------- */
@media (max-width:340px){ .btn-row .btn{ font-size:12px } .packs{ grid-template-columns:repeat(2,1fr) } .brand h1{ font-size:30px } .night{ width:94% } }
@media (min-width:700px){ .screen{ max-width:520px; box-shadow:0 0 0 1px var(--line); } }