/* ==========================================================================
   glass.css — تمِ شیشه‌ایِ iOS (بدونِ حاشیه) + انیمیشن‌ها
   بعد از style.css / game.css / arena.css لود میشه و رویِ همه‌شون سوار میشه.
   برای برگشت به تمِ قبلی: لینکِ این فایل و glass.js رو از قالب‌ها بردار.
   ========================================================================== */

:root {
  --g-fill: rgba(255, 255, 255, .07);
  --g-fill-2: rgba(255, 255, 255, .11);
  --g-fill-3: rgba(255, 255, 255, .16);
  --g-blur: blur(28px) saturate(180%);
  --g-spec: inset 0 1px 0 rgba(255, 255, 255, .16);
  --g-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --g-ease: cubic-bezier(.32, .72, 0, 1);
  --g-spring: cubic-bezier(.34, 1.4, .5, 1);
  --g-r-lg: 24px;
  --g-r-md: 18px;
  --g-r-sm: 13px;
}

/* ---------- ۱) حذفِ همه‌ی حاشیه‌ها ---------- */
.card, .tabs, .field input, .topbar, .stat-chip, .logout-btn, .tabbar, .tabbtn, .glass-panel,
.bar, .chip-btn, .qty-input, .amount-input, .subtab, .mapsub, .item-card, .target-card, .rank-list li,
.gun-card, .toast, .modal-card, .hamburger-btn, .sidebar-panel, .sidebar-head, .acct-card, .group-row,
.sidebar-form input, .group-view-head, .news-panel, .am-section, .am-field-grid input, .am-row select,
.am-row input, .chat-msg, .chat-box, .chat-reply-quote, .exchange-card, .map-wrap, .map-zoom button,
.map-legend span, .map-card, .map-list .ml-row, .event-banner, .hub-tile, .item-art, .thumb, .mission,
.res-item, .eco-card, .eco-trouble, .missile-pick-item, .atk-box, .atk-quick button, .ground-hud,
.gh-stat, .tg-card, .tg-av, .tg-act .mini, .mc-head, .mc-swatch, .mc-chip, .map-tip, .fx-modal,
.tabbar.mainnav, .kv-row, .log-entry, .report-kv, .alliance-pick-banner .glass-panel, .table-wrap,
.invite-box, .am-inv-chip, .live-war-item, .radar-screen, .boss-hp-bar-wrap, .chal-btn-wrap,
.chat-reply-preview, .badge, input, select, textarea {
  border: 0 !important;
  border-image: none !important;
  outline: 0;
}
.sidebar-close, .chat-del-btn, .chat-reply-btn { border: 0 !important; }

/* ---------- ۲) سطحِ شیشه‌ایِ مشترک ---------- */
.card, .glass-panel, .modal-card, .sidebar-panel, .acct-card, .news-panel, .map-card, .mc-body,
.atk-box, .ground-hud, .tg-card, .exchange-card, .event-banner, .fx-modal, .alliance-pick-banner .glass-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .045)) !important;
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  box-shadow: var(--g-spec), var(--g-shadow) !important;
  border-radius: var(--g-r-lg);
}
.glass-panel::before, .glass-panel::after, .card::before { display: none !important; }   /* خطِ HUD و براکت‌ها */
.glass-panel:hover { transform: none; box-shadow: var(--g-spec), 0 16px 40px rgba(0, 0, 0, .4) !important; }

.item-card, .gun-card, .target-card, .rank-list li, .mission, .res-item, .eco-card, .missile-pick-item,
.group-row, .chat-msg, .log-entry, .report-kv, .hub-tile, .gh-stat, .am-inv-chip, .live-war-item, .map-list .ml-row {
  background: var(--g-fill) !important;
  box-shadow: var(--g-spec) !important;
  border-radius: var(--g-r-md);
}
.item-card:hover, .gun-card:hover, .hub-tile:hover, .group-row:hover, .map-list .ml-row:hover, .tg-card:hover {
  background: var(--g-fill-2) !important;
  box-shadow: var(--g-spec), 0 12px 28px rgba(0, 0, 0, .35) !important;
}
.kv-row { background: none !important; box-shadow: none !important; border-radius: 0; }

/* نوارهای وضعیت (قبلاً خطِ رنگیِ کنارِ کارت بود) → رنگِ ملایمِ پس‌زمینه */
.log-entry.hit { background: rgba(41, 200, 255, .13) !important; }
.log-entry.blocked { background: rgba(90, 169, 255, .13) !important; }
.log-entry.warded, .log-entry.research { background: rgba(176, 107, 255, .14) !important; }
.log-entry.admin, .log-entry.siren { background: rgba(255, 176, 32, .13) !important; }
.log-entry.ground, .log-entry.sabotage { background: rgba(255, 138, 61, .14) !important; }
.log-entry.group, .log-entry.world_boss { background: rgba(55, 224, 122, .12) !important; }
.log-entry.radar { background: rgba(90, 223, 255, .12) !important; }
.log-entry.doomsday, .log-entry.world_war { background: rgba(255, 45, 45, .17) !important; }
.rank-list li:nth-child(1) { background: linear-gradient(90deg, rgba(255, 210, 77, .22), var(--g-fill)) !important; }
.rank-list li:nth-child(2) { background: linear-gradient(90deg, rgba(201, 201, 201, .20), var(--g-fill)) !important; }
.rank-list li:nth-child(3) { background: linear-gradient(90deg, rgba(205, 127, 50, .22), var(--g-fill)) !important; }
.map-list .ml-row.mine { background: rgba(255, 176, 32, .20) !important; }
.mc-chip.nbr { background: rgba(255, 74, 43, .20) !important; }
.mc-chip.me { background: rgba(255, 194, 71, .18) !important; }
.mc-chip.occ { background: rgba(166, 107, 255, .20) !important; }
.mc-chip, .map-legend span, .tg-av { background-color: var(--g-fill-2); }
.map-wrap { box-shadow: var(--g-shadow) !important; border-radius: var(--g-r-lg); }
.item-art, .thumb { background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--tone, #29c8ff) 22%, transparent), rgba(255, 255, 255, .03) 72%) !important; }

/* ---------- ۳) نوارِ بالا و ناوبری ---------- */
.topbar {
  background: rgba(10, 20, 40, .55) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .3) !important;
}
.stat-chip, .logout-btn, .hamburger-btn {
  background: var(--g-fill-2) !important;
  box-shadow: var(--g-spec) !important;
}
.logout-btn { color: #ff9a8a; }
.logout-btn:hover { background: rgba(255, 74, 43, .28) !important; }
.tabbar:not(.mainnav) { background: rgba(10, 20, 40, .45); }
.tabbtn { background: var(--g-fill) !important; border-radius: 999px; }
.tabbtn.active {
  background: rgba(255, 255, 255, .22) !important; color: #fff;
  box-shadow: var(--g-spec), 0 6px 18px rgba(0, 0, 0, .3) !important;
}

/* دسکتاپ: ریلِ کناری شیشه‌ایِ شناور */
.tabbar.mainnav {
  background: rgba(14, 26, 50, .50) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: -8px 0 40px rgba(0, 0, 0, .3) !important;
}
.mainnav .tabbtn { background: transparent !important; border-radius: 16px; box-shadow: none !important; }
.mainnav .tabbtn.active {
  background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 34%, transparent), rgba(255, 255, 255, .08)) !important;
  box-shadow: var(--g-spec), 0 6px 20px color-mix(in srgb, var(--tone) 30%, transparent) !important;
}
.mainnav .tabbtn::after { display: none; }

/* موبایل: نوارِ پایینِ شناورِ iOS */
@media (max-width: 760px) {
  .tabbar.mainnav {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto; border-radius: 26px; padding: 8px;
    box-shadow: var(--g-spec), 0 14px 40px rgba(0, 0, 0, .5) !important;
  }
  .game-stage { padding-bottom: 110px; }
}

/* ---------- ۴) دکمه‌ها ---------- */
.chip-btn, .btn-launch, .atk-quick button, .tg-act .mini, .map-zoom button, .subtab, .mapsub, .m-go {
  background: var(--g-fill-2) !important;
  color: var(--ink);
  box-shadow: var(--g-spec) !important;
  border-radius: var(--g-r-sm);
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--g-spring), background .25s ease, box-shadow .3s ease, filter .25s ease !important;
}
.chip-btn:hover, .atk-quick button:hover, .tg-act .mini:hover, .map-zoom button:hover, .subtab:hover, .mapsub:hover {
  background: var(--g-fill-3) !important; transform: translateY(-1px);
}
.chip-btn:active, .btn-launch:active, .atk-quick button:active, .tg-act .mini:active, .tabbtn:active,
.hub-tile:active, .item-card:active, .group-row:active, .subtab:active, .mapsub:active, .map-zoom button:active {
  transform: scale(.95) !important; transition-duration: .12s !important;
}
.chip-btn::before, .btn-launch::before { display: none; }          /* برقِ عبوری حذف؛ جاش موجِ لمس */
.chip-btn.ghost { background: transparent !important; box-shadow: none !important; color: var(--ink-dim); }
.chip-btn.ghost:hover { background: var(--g-fill) !important; color: #fff; }
.chip-btn.danger, .chip-btn[data-sell], .chip-btn[data-gv-delete] { background: rgba(255, 74, 43, .24) !important; color: #ffb3a4; }
.btn-launch, .atk-go {
  background: linear-gradient(180deg, #ff7a4a, #e0322a) !important; color: #fff;
  box-shadow: var(--g-spec), 0 10px 26px rgba(255, 74, 43, .38) !important; border-radius: 16px;
}
.atk-box.liberate .atk-go { background: linear-gradient(180deg, #4cee92, #1ea04a) !important; box-shadow: var(--g-spec), 0 10px 26px rgba(55, 224, 122, .35) !important; }
.atk-quick button.on, .subtab.active, .mapsub.active { background: rgba(255, 255, 255, .26) !important; color: #fff; }
.map-zoom button.on { background: rgba(255, 194, 71, .30) !important; }
.chip-btn:disabled, .btn-launch:disabled, .atk-go:disabled { opacity: .45; filter: none; transform: none !important; }
.fx-ripple { background: rgba(255, 255, 255, .32); }

/* ---------- ۵) ورودی‌ها (متن، عدد، لیست، اسلایدر) ---------- */
input, select, textarea, .qty-input, .amount-input, .field input {
  background: var(--g-fill) !important;
  color: var(--ink);
  border-radius: var(--g-r-sm);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25) !important;
  transition: background .25s ease, box-shadow .3s var(--g-ease), transform .3s var(--g-spring) !important;
  -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus, .qty-input:focus, .amount-input:focus {
  background: var(--g-fill-2) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2), 0 0 0 4px rgba(120, 190, 255, .20) !important;
}
input:focus-visible, select:focus-visible, button:focus-visible, .tabbtn:focus-visible { outline: 0 !important; }
button:focus-visible, .tabbtn:focus-visible { box-shadow: 0 0 0 3px rgba(120, 190, 255, .45) !important; }
input[type="number"], .qty-input, .amount-input { font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, .30); }
select { padding-inline-end: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffffaa' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: left 12px center !important; }
input.shake { animation: g-shake .4s ease; box-shadow: 0 0 0 4px rgba(255, 92, 92, .30) !important; }
@keyframes g-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* اسلایدر: شستیِ سفیدِ iOS بدونِ حاشیه */
.atk-slider { height: 6px; }
.atk-slider::-webkit-slider-thumb { border: 0 !important; background: #fff; width: 26px; height: 26px; box-shadow: 0 3px 10px rgba(0, 0, 0, .45) !important; }
.atk-slider::-moz-range-thumb { border: 0 !important; background: #fff; width: 26px; height: 26px; box-shadow: 0 3px 10px rgba(0, 0, 0, .45) !important; }

/* نوارهای پیشرفت */
.bar, .pw-track, .tg-bar, .cd-track, .fx-prog-track, .boss-hp-bar-wrap { background: rgba(255, 255, 255, .12) !important; border-radius: 999px; box-shadow: none !important; }
.bar-fill, .pw-fill, .tg-bar i, .fx-prog-track i { border-radius: 999px; }

/* ---------- ۶) اسکرول‌بارِ نازکِ iOS (بدونِ ریل و فلش) ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-width: auto; scrollbar-color: auto; }
  *::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
  *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; border: 0; }
  *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  *::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .0); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
    transition: background .3s ease;
  }
  *:hover::-webkit-scrollbar-thumb, .g-scrolling::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .28); }
  *::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .45); }
}
.tabbar, .tabbar.mainnav, .tabbar:not(.mainnav) { scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }

/* ---------- ۷) توست، مودال، منو (ورقِ iOS) ---------- */
.toast {
  background: rgba(28, 36, 56, .72) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-radius: 20px; padding: 13px 20px 13px 44px; box-shadow: var(--g-spec), 0 14px 40px rgba(0, 0, 0, .45) !important;
  animation: g-toast-in .6s var(--g-spring) both, g-toast-out .4s ease 3.5s forwards !important;
}
.toast::before {
  content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
.toast.ok::before { background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.toast.err::before { background: var(--err); box-shadow: 0 0 12px var(--err); }
.toast::after { height: 2px; opacity: .55; }
@keyframes g-toast-in { from { opacity: 0; transform: translateY(-26px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes g-toast-out { to { opacity: 0; transform: translateY(-16px) scale(.94); } }

.fx-backdrop, .modal-backdrop, .sidebar-backdrop, .group-view-backdrop {
  background: rgba(6, 10, 22, .45) !important; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.fx-modal, .modal-card { border-radius: 30px; animation: g-sheet .6s var(--g-spring) both; }
@keyframes g-sheet { from { opacity: 0; transform: translateY(60px) scale(.92); } to { opacity: 1; transform: none; } }
.fx-modal::before { opacity: .6; }
.sidebar-panel { border-radius: 28px 0 0 28px; transition: transform .55s var(--g-ease) !important; }
.sidebar-head, .group-view-head, .am-section { background: none !important; box-shadow: none !important; }
.map-tip { background: rgba(24, 34, 56, .78) !important; -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--g-shadow) !important; border-radius: 14px; }

/* ---------- ۸) انیمیشن‌ها ---------- */
.page.active { animation: g-page .55s var(--g-ease) both !important; }
@keyframes g-page { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ورودِ پلکانیِ کارت‌ها هنگامِ باز شدنِ هر تب (glass.js کلاسِ g-enter و --gi رو میذاره) */
.g-enter :is(.glass-panel, .item-card, .gun-card, .target-card, .tg-card, .rank-list li, .mission, .eco-card, .hub-tile, .res-item, .exchange-card, .map-list .ml-row) {
  animation: g-rise .6s var(--g-spring) both; animation-delay: calc(var(--gi, 0) * 45ms);
}
@keyframes g-rise { from { opacity: 0; transform: translateY(22px) scale(.95); } to { opacity: 1; transform: none; } }

/* نبضِ نرمِ شیشه روی چیپ‌های بالا هنگامِ تغییرِ مقدار */
.stat-chip.flash { animation: g-pop .7s var(--g-spring); }
@keyframes g-pop { 0% { transform: scale(1); } 35% { transform: scale(1.12); background: rgba(255, 255, 255, .26); } 100% { transform: scale(1); } }

/* برقِ آهسته‌ی نورِ شیشه روی دکمه‌ی حمله */
.atk-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); animation: g-sheen 3.6s ease-in-out infinite; pointer-events: none; }
.atk-go:disabled::after { display: none; }
@keyframes g-sheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ورودِ نرمِ پیام‌ها و لاگ‌ها */
.chat-msg, .log-entry { animation: g-rise .5s var(--g-spring) both; }

@media (hover: none) { .item-card:hover, .hub-tile:hover, .gun-card:hover, .tg-card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}