/* public/css/ezlan-live-tunnel.css — ویجت «تونل بازی EzLan» (شبیه‌سازی تعاملی صفحهٔ اصلی)
   همهٔ سلکتورها زیر .ezlan-live-tunnel هستن. رنگ‌ها از توکن‌های سایت (ezlan-tokens.css) می‌آن،
   پس در حالت روشن و تیره خودکار هماهنگ می‌شن. دادهٔ ویجت نمونه‌ست و از سرور واقعی نمی‌آد. */

.ezlan-live-tunnel {
  --elt-signal: #52b788; /* نقطهٔ آنلاین و packet */
  --elt-shadow: #1b4332;
  color: var(--ink);
  direction: rtl;
  width: 100%;
  max-width: var(--page-w);
  margin-inline: auto;
  padding: 0;
  font-family: var(--font);
  isolation: isolate;
  box-sizing: border-box;
}
:root[data-theme="dark"] .ezlan-live-tunnel {
  --elt-signal: #6cc597;
  --elt-shadow: #000000;
}
.ezlan-live-tunnel *,
.ezlan-live-tunnel *::before,
.ezlan-live-tunnel *::after {
  box-sizing: border-box;
}
.ezlan-live-tunnel button {
  font: inherit;
}

/* ---------- قاب دیاگرام ---------- */
.elt-visual-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
.elt-visual-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
}
.elt-visual-meta > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}
.elt-visual-meta .elt-status-dot {
  width: 6px;
  height: 6px;
}
.elt-mono,
.elt-port-label {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  font-size: 10px;
  color: var(--ink-3);
}
.elt-diagram {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* موبایل/تبلت: دیاگرام عمودی (با سقف عرض)؛ از ۱۰۲۴px به بالا: دیاگرام افقی */
.elt-diagram--desktop {
  display: none;
}
.elt-diagram--mobile {
  max-width: 470px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .elt-diagram--desktop {
    display: block;
  }
  .elt-diagram--mobile {
    display: none;
  }
}

/* گرادیانت مسیر و سایهٔ کارت‌ها از طریق CSS تا با تم عوض بشن */
.ezlan-live-tunnel linearGradient stop:first-child {
  stop-color: var(--line-strong);
}
.ezlan-live-tunnel linearGradient stop:last-child {
  stop-color: var(--elt-signal);
}
.ezlan-live-tunnel feDropShadow {
  flood-color: var(--elt-shadow);
  flood-opacity: 0.07;
}
:root[data-theme="dark"] .ezlan-live-tunnel feDropShadow {
  flood-opacity: 0.45;
}

/* ---------- عناصر SVG ---------- */
.elt-route-base {
  stroke: var(--line-strong);
  stroke-width: 2.4;
}
.elt-route-dash {
  stroke: url(#elt-line-grad-d);
  stroke-width: 2;
  stroke-dasharray: 3 10;
  opacity: 0.95;
  animation: elt-dash-flow 9s linear infinite;
}
.elt-diagram--mobile .elt-route-dash {
  stroke: url(#elt-line-grad-m);
}
.elt-packet {
  fill: var(--elt-signal);
  stroke: var(--surface);
  stroke-width: 1.5;
}
.elt-node-card {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 1.2;
}
.elt-avatar-bg {
  fill: var(--accent-soft-2);
  stroke: var(--accent-line);
  stroke-width: 1;
}
.elt-avatar-line {
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.elt-online-dot {
  fill: var(--elt-signal);
  stroke: var(--surface);
  stroke-width: 1.5;
}
.elt-player-name {
  fill: var(--ink);
  font-size: 15px;
  font-weight: 800;
}
.elt-player-city {
  fill: var(--ink-3);
  font-size: 11.5px;
  font-weight: 600;
}
.elt-ping-pill {
  fill: var(--accent-soft);
  stroke: var(--line);
  stroke-width: 0.8;
}
.elt-ping-value {
  fill: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 800;
}
.elt-core-card {
  fill: var(--surface);
  stroke: var(--accent-line);
  stroke-width: 1.4;
}
.elt-core-icon-bg {
  fill: var(--accent-soft-2);
  stroke: var(--accent-line);
  stroke-width: 1;
}
.elt-game-icon {
  color: var(--accent-ink);
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.elt-core-title {
  fill: var(--ink);
  font-size: 18px;
  font-weight: 800;
}
.elt-core-subtitle {
  fill: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
}
.elt-core-divider {
  stroke: var(--line);
  stroke-width: 1;
}
.elt-stat-value {
  fill: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
}
.elt-stat-value,
.elt-stat-label,
.elt-core-title,
.elt-ping-value {
  direction: ltr;
  unicode-bidi: isolate;
}
.elt-stat-encryption {
  font-size: 10.5px;
}
.elt-stat-label {
  fill: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
}
/* دیاگرام دسکتاپ (viewBox ۶۸۸×۴۴۴) داخل ستون هیرو حدود ۰٫۷۵ تا ۰٫۸۵ مقیاس می‌شه */
.elt-diagram--desktop .elt-player-name {
  font-size: 17px;
}
.elt-diagram--desktop .elt-player-city {
  font-size: 12px;
}
.elt-diagram--desktop .elt-ping-value {
  font-size: 12px;
}
.elt-diagram--desktop .elt-core-title {
  font-size: 20px;
}
.elt-diagram--desktop .elt-core-subtitle {
  font-size: 13.5px;
}
.elt-diagram--desktop .elt-stat-value {
  font-size: 14.5px;
}
.elt-diagram--desktop .elt-stat-encryption {
  font-size: 11.5px;
}
.elt-diagram--desktop .elt-stat-label {
  font-size: 9.5px;
}

.elt-diagram--desktop {
  padding: 6px 10px 12px;
}

@keyframes elt-dash-flow {
  to {
    stroke-dashoffset: -104;
  }
}

/* ---------- موبایل ---------- */
@media (max-width: 720px) {
  .elt-diagram--mobile .elt-player-city {
    font-size: 10.5px; /* «Player 4 · بازیکن شما» توی کارت باریک جا بشه */
  }
  .elt-visual-meta {
    padding: 11px 11px 0;
  }
}
@media (max-width: 380px) {
  .elt-visual-meta {
    align-items: flex-start;
  }
}

/* کاهش حرکت: انیمیشن‌ها و packetها خاموش، داده‌ها همچنان خوانا */
@media (prefers-reduced-motion: reduce) {
  .ezlan-live-tunnel *,
  .ezlan-live-tunnel *::before,
  .ezlan-live-tunnel *::after {
    animation: none !important;
    transition: none !important;
  }
  .ezlan-live-tunnel .elt-packets {
    display: none;
  }
}