/* ==========================================================================
   Escobar Bonus Empire — shared visual system
   Background stage, buttons, cards, badges, forms, dialogs, tables.
   Used by the public landing page, the member area and the streams page.
   Requires escobar-tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Background effect stage (code generated — never a full screen photo)
   -------------------------------------------------------------------------- */
.eb-stage {
  position: fixed;
  inset: 0;
  z-index: var(--eb-z-canvas);
  overflow: hidden;
  pointer-events: none;
}

/* The particle canvas draws the roulette, dice, USDT glyph, chips, card suits
   and light trails. Its opacity is independent of --eb-fx so the reduced-motion
   static frame stays visible. */
.eb-stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.eb-stage[data-reduced="1"] .eb-stage__canvas { opacity: 0.62; }

.eb-aurora {
  position: absolute;
  width: 46vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(140px);
  opacity: calc(0.24 * var(--eb-fx));
  mix-blend-mode: screen;
  will-change: transform;
}

.eb-aurora--gold { right: -14vw; top: -18vw; background: var(--eb-gold); animation: eb-drift 26s var(--eb-ease) infinite alternate; }
.eb-aurora--electric { left: -20vw; top: 34vh; background: var(--eb-electric); animation: eb-drift 34s var(--eb-ease) infinite alternate-reverse; }
.eb-aurora--violet { left: 46vw; bottom: -24vw; background: var(--eb-violet); animation: eb-drift 30s var(--eb-ease) infinite alternate; }

@keyframes eb-drift { to { transform: translate3d(-10vw, 12vh, 0) scale(1.18); } }

.eb-mesh {
  position: absolute;
  inset: -10%;
  opacity: calc(0.7 * var(--eb-fx));
  background:
    radial-gradient(28% 22% at 18% 24%, rgba(69, 184, 255, 0.2), transparent 70%),
    radial-gradient(24% 20% at 82% 18%, rgba(255, 159, 46, 0.17), transparent 70%),
    radial-gradient(30% 26% at 62% 78%, rgba(160, 107, 255, 0.18), transparent 70%),
    radial-gradient(26% 24% at 88% 62%, rgba(217, 170, 50, 0.12), transparent 72%);
}

.eb-perspective-grid {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -14%;
  height: 60%;
  opacity: calc(0.44 * var(--eb-fx));
  transform: perspective(680px) rotateX(69deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(rgba(69, 184, 255, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 170, 50, 0.16) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 78%);
  mask-image: linear-gradient(to top, #000 5%, transparent 78%);
  animation: eb-terrain 16s linear infinite;
}

@keyframes eb-terrain { to { background-position: 0 148px, 148px 0; } }

.eb-noise {
  position: absolute;
  inset: -50%;
  opacity: calc(0.032 * var(--eb-fx));
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eb-spotlight {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 44% at 50% 6%, rgba(255, 255, 255, 0.055), transparent 72%),
    radial-gradient(38% 30% at 78% 34%, rgba(217, 170, 50, 0.07), transparent 74%);
}

@keyframes eb-spin { to { transform: rotate(360deg); } }

.eb-rings {
  position: absolute;
  left: 50%;
  top: 22vh;
  width: min(74vw, 900px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  opacity: calc(0.5 * var(--eb-fx));
}

.eb-rings i { position: absolute; inset: 0; border: 1px solid rgba(217, 170, 50, 0.16); border-radius: 50%; }
.eb-rings i:nth-child(2) { inset: 16%; border-style: dashed; border-color: rgba(69, 184, 255, 0.2); animation: eb-spin 46s linear infinite; }
.eb-rings i:nth-child(3) { inset: 32%; border-color: rgba(160, 107, 255, 0.24); animation: eb-spin 34s linear infinite reverse; }
.eb-rings i:nth-child(4) { inset: 46%; border-color: rgba(242, 198, 91, 0.2); box-shadow: 0 0 70px rgba(217, 170, 50, 0.12); }

/* Scene tinting driven by IntersectionObserver */
.eb-stage[data-scene="electric"] .eb-aurora--electric { opacity: calc(0.3 * var(--eb-fx)); }
.eb-stage[data-scene="violet"] .eb-aurora--violet { opacity: calc(0.3 * var(--eb-fx)); }
.eb-stage[data-scene="amber"] .eb-aurora--gold { opacity: calc(0.3 * var(--eb-fx)); }
.eb-stage .eb-aurora { transition: opacity var(--eb-dur-scene) var(--eb-ease); }

.eb-stage[data-paused="1"] * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .eb-stage * { animation: none !important; }
}

@media (max-width: 768px) {
  .eb-rings { top: 16vh; width: 132vw; }
  .eb-perspective-grid { height: 44%; }
  .eb-aurora { filter: blur(90px); }
}

/* --------------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------------- */
.eb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eb-s-2);
  min-height: 46px;
  padding: 0 var(--eb-s-5);
  border: 1px solid var(--eb-line-strong);
  border-radius: var(--eb-r-sm);
  background: var(--eb-surface-2);
  color: var(--eb-ink);
  font: inherit;
  font-weight: 800;
  font-size: var(--eb-fs-sm);
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--eb-dur-fast) var(--eb-ease), box-shadow var(--eb-dur-base) var(--eb-ease),
    border-color var(--eb-dur-fast) var(--eb-ease), background var(--eb-dur-fast) var(--eb-ease);
}

.eb-btn:disabled, .eb-btn.is-busy { opacity: 0.55; cursor: not-allowed; }

.eb-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.3) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform var(--eb-dur-slow) var(--eb-ease);
}

.eb-btn:hover::before, .eb-btn:focus-visible::before { transform: translateX(130%); }
.eb-btn:active { transform: translateY(1px) scale(0.985); }

.eb-btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--eb-gold-bright), var(--eb-gold) 46%, var(--eb-amber));
  color: var(--eb-gold-ink);
  box-shadow: var(--eb-glow-2), var(--eb-shadow-2);
}

.eb-btn--primary::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -2;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--eb-gold), var(--eb-electric), var(--eb-violet), var(--eb-amber), var(--eb-gold));
  opacity: 0;
  transition: opacity var(--eb-dur-base) var(--eb-ease);
  animation: eb-spin 5s linear infinite;
}

.eb-btn--primary:hover, .eb-btn--primary:focus-visible {
  box-shadow: var(--eb-glow-4), var(--eb-shadow-3);
  animation: eb-shake-strong 0.42s var(--eb-ease) 1;
}

.eb-btn--primary:hover::after, .eb-btn--primary:focus-visible::after { opacity: 0.95; }

.eb-btn--secondary {
  border-color: var(--eb-line-gold);
  background: linear-gradient(140deg, rgba(217, 170, 50, 0.14), rgba(69, 184, 255, 0.05));
  color: var(--eb-gold-bright);
}

.eb-btn--secondary:hover, .eb-btn--secondary:focus-visible {
  border-color: var(--eb-gold);
  box-shadow: var(--eb-glow-2);
  animation: eb-shake-soft 0.36s var(--eb-ease) 1;
}

.eb-btn--ghost {
  min-height: 40px;
  padding: 0 var(--eb-s-4);
  border-color: var(--eb-line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--eb-ink-soft);
  font-size: var(--eb-fs-xs);
}

.eb-btn--ghost:hover, .eb-btn--ghost:focus-visible {
  border-color: var(--eb-line-electric);
  color: var(--eb-ink);
  box-shadow: var(--eb-glow-electric);
}

.eb-btn--danger {
  border-color: rgba(255, 59, 77, 0.42);
  background: rgba(255, 59, 77, 0.1);
  color: var(--eb-red-soft);
}

.eb-btn--danger:hover, .eb-btn--danger:focus-visible { border-color: var(--eb-red); box-shadow: var(--eb-glow-danger); }
.eb-btn--danger::before { background: linear-gradient(105deg, transparent 34%, rgba(255, 137, 147, 0.22) 50%, transparent 66%); }

.eb-btn--block { width: 100%; }
.eb-btn--sm { min-height: 34px; padding: 0 var(--eb-s-3); font-size: var(--eb-fs-xs); }

.eb-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px var(--eb-gold-bright);
  pointer-events: none;
  animation: eb-spark-out 620ms var(--eb-ease-out) forwards;
}

@keyframes eb-spark-out {
  to { transform: translate3d(var(--eb-spark-x), var(--eb-spark-y), 0) scale(0.2); opacity: 0; }
}

@keyframes eb-shake-strong {
  0%, 100% { transform: translate3d(0, 0, 0); }
  22% { transform: translate3d(-1.6px, 0.6px, 0); }
  46% { transform: translate3d(1.4px, -0.8px, 0); }
  72% { transform: translate3d(-0.8px, 0.4px, 0); }
}

@keyframes eb-shake-soft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  40% { transform: translate3d(-0.9px, 0.4px, 0); }
  74% { transform: translate3d(0.7px, -0.3px, 0); }
}

@keyframes eb-tap-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

.eb-btn.is-tapped { animation: eb-tap-pulse 320ms var(--eb-ease) 1; }

@media (hover: none) {
  .eb-btn:hover { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .eb-btn, .eb-btn:hover, .eb-btn:focus-visible, .eb-btn.is-tapped { animation: none !important; }
  .eb-btn::before { display: none; }
  .eb-btn--primary::after { animation: none; }
  .eb-spark { display: none; }
}

/* --------------------------------------------------------------------------
   3. Cards
   -------------------------------------------------------------------------- */
.eb-card {
  position: relative;
  display: block;
  padding: var(--eb-s-5);
  border: 1px solid var(--eb-line);
  border-radius: var(--eb-r-lg);
  background: linear-gradient(155deg, var(--eb-surface-2), var(--eb-surface-1) 78%);
  box-shadow: var(--eb-shadow-2);
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--eb-dur-base) var(--eb-ease), box-shadow var(--eb-dur-base) var(--eb-ease),
    border-color var(--eb-dur-base) var(--eb-ease);
}

.eb-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(217, 170, 50, 0.6), rgba(69, 184, 255, 0.28) 42%, rgba(160, 107, 255, 0.3) 68%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--eb-dur-base) var(--eb-ease);
}

.eb-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--eb-mx, 50%) var(--eb-my, 50%), rgba(255, 255, 255, 0.08), transparent 62%);
  opacity: 0;
  transition: opacity var(--eb-dur-base) var(--eb-ease);
}

.eb-card:hover, .eb-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--eb-shadow-3), var(--eb-glow-1);
}

.eb-card:hover::before, .eb-card:focus-within::before,
.eb-card:hover::after, .eb-card:focus-within::after { opacity: 1; }

.eb-sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, 0.14) 50%, transparent 64%);
  transform: translateX(-120%);
}

.eb-card:hover .eb-sheen { animation: eb-sweep 900ms var(--eb-ease) 1; }

@keyframes eb-sweep { to { transform: translateX(120%); } }

.eb-card--flat { box-shadow: var(--eb-shadow-1); }
.eb-card--flat:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .eb-card:hover { transform: none; }
  .eb-sheen { display: none; }
}

/* --------------------------------------------------------------------------
   4. Badges, pills, chips
   -------------------------------------------------------------------------- */
.eb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: var(--eb-r-pill);
  font-size: var(--eb-fs-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.eb-badge--ok { color: var(--eb-emerald); background: rgba(58, 211, 154, 0.1); }
.eb-badge--wait { color: var(--eb-amber); background: rgba(255, 159, 46, 0.1); }
.eb-badge--bad { color: var(--eb-red-soft); background: rgba(255, 59, 77, 0.1); }
.eb-badge--warn { color: var(--eb-violet); background: rgba(160, 107, 255, 0.12); }
.eb-badge--neutral { color: var(--eb-ink-muted); background: rgba(255, 255, 255, 0.04); }
.eb-badge--gold { color: var(--eb-gold-bright); background: rgba(217, 170, 50, 0.12); }

/* --------------------------------------------------------------------------
   5. Forms
   -------------------------------------------------------------------------- */
.eb-field { display: grid; gap: var(--eb-s-2); margin-bottom: var(--eb-s-4); }
.eb-field > label, .eb-label { color: var(--eb-ink-soft); font-size: var(--eb-fs-sm); font-weight: 700; }
.eb-field small, .eb-hint { color: var(--eb-ink-muted); font-size: var(--eb-fs-xs); font-weight: 400; }

.eb-input, .eb-select, .eb-textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--eb-line-strong);
  border-radius: var(--eb-r-sm);
  background: rgba(4, 6, 10, 0.72);
  color: var(--eb-ink);
  font: inherit;
  font-size: var(--eb-fs-md);
  outline: none;
  transition: border-color var(--eb-dur-fast) var(--eb-ease), box-shadow var(--eb-dur-fast) var(--eb-ease);
}

.eb-textarea { min-height: 120px; resize: vertical; }
.eb-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--eb-gold) 50%), linear-gradient(135deg, var(--eb-gold) 50%, transparent 50%); background-position: right 18px center, right 12px center; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 34px; }
.eb-select option { background: var(--eb-surface-1); color: var(--eb-ink); }

.eb-input:focus, .eb-select:focus, .eb-textarea:focus {
  border-color: var(--eb-gold);
  box-shadow: 0 0 0 3px rgba(217, 170, 50, 0.16);
}

.eb-input[aria-invalid="true"], .eb-select[aria-invalid="true"] {
  border-color: var(--eb-red);
  box-shadow: 0 0 0 3px rgba(255, 59, 77, 0.14);
}

.eb-error { color: var(--eb-red-soft); font-size: var(--eb-fs-xs); }

.eb-check {
  display: flex;
  align-items: flex-start;
  gap: var(--eb-s-3);
  padding: var(--eb-s-3);
  border: 1px solid var(--eb-line);
  border-radius: var(--eb-r-sm);
  background: rgba(255, 255, 255, 0.025);
  color: var(--eb-ink-soft);
  font-size: var(--eb-fs-sm);
  font-weight: 500;
  cursor: pointer;
  margin-bottom: var(--eb-s-2);
}

.eb-check input[type="checkbox"], .eb-check input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--eb-gold);
}

.eb-check:has(input:checked) { border-color: var(--eb-line-gold); background: rgba(217, 170, 50, 0.07); }

.eb-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--eb-s-4); }
@media (max-width: 640px) { .eb-form-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   6. Tables
   -------------------------------------------------------------------------- */
.eb-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--eb-line);
  border-radius: var(--eb-r-lg);
  background: linear-gradient(160deg, var(--eb-surface-2), var(--eb-surface-1));
  -webkit-overflow-scrolling: touch;
}

.eb-table { width: 100%; border-collapse: collapse; font-size: var(--eb-fs-sm); }
.eb-table th, .eb-table td { padding: 12px 14px; text-align: left; white-space: nowrap; }
.eb-table th {
  position: sticky;
  top: 0;
  background: rgba(6, 8, 12, 0.94);
  color: var(--eb-gold);
  font-size: var(--eb-fs-xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--eb-line-gold);
}
.eb-table tbody tr { border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: background var(--eb-dur-fast) var(--eb-ease); }
.eb-table tbody tr:last-child { border-bottom: 0; }
.eb-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.eb-table tbody tr.is-me { background: rgba(217, 170, 50, 0.1); box-shadow: inset 3px 0 0 var(--eb-gold); }
.eb-table td.eb-num, .eb-table th.eb-num { text-align: right; font-variant-numeric: tabular-nums; }
.eb-table td.eb-center, .eb-table th.eb-center { text-align: center; }
.eb-rank { font-weight: 900; font-size: var(--eb-fs-lg); color: var(--eb-gold-bright); }
.eb-rank--1 { color: #ffe9a8; text-shadow: 0 0 14px rgba(242, 198, 91, 0.6); }
.eb-rank--2 { color: #dfe4ea; }
.eb-rank--3 { color: #e0a878; }

/* --------------------------------------------------------------------------
   7. Dialogs
   -------------------------------------------------------------------------- */
.eb-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--eb-z-modal);
  display: grid;
  place-items: center;
  padding: var(--eb-s-4);
  background: rgba(3, 5, 9, 0.82);
  backdrop-filter: blur(14px);
}

.eb-dialog[hidden] { display: none; }

.eb-dialog__panel {
  position: relative;
  width: min(620px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: var(--eb-s-6);
  border: 1px solid var(--eb-line-gold);
  border-radius: var(--eb-r-xl);
  background: linear-gradient(155deg, var(--eb-surface-2), var(--eb-surface-1));
  box-shadow: var(--eb-shadow-4);
}

.eb-dialog__close {
  position: absolute;
  top: var(--eb-s-3);
  right: var(--eb-s-3);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--eb-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--eb-ink-soft);
  font-size: 20px;
  cursor: pointer;
}

body.eb-scroll-lock { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. Feedback, empty, loading
   -------------------------------------------------------------------------- */
.eb-flash-stack { display: grid; gap: var(--eb-s-2); margin-bottom: var(--eb-s-5); }

.eb-flash {
  padding: var(--eb-s-3) var(--eb-s-4);
  border: 1px solid var(--eb-line);
  border-left-width: 3px;
  border-radius: var(--eb-r-sm);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--eb-fs-sm);
}

.eb-flash--success { border-left-color: var(--eb-emerald); color: #b9f3dc; background: rgba(58, 211, 154, 0.08); }
.eb-flash--error { border-left-color: var(--eb-red); color: #ffc3c8; background: rgba(255, 59, 77, 0.08); }
.eb-flash--info { border-left-color: var(--eb-electric); color: #c6e6ff; background: rgba(69, 184, 255, 0.08); }
.eb-flash--warning { border-left-color: var(--eb-amber); color: #ffdfae; background: rgba(255, 159, 46, 0.08); }

.eb-empty {
  display: grid;
  justify-items: center;
  gap: var(--eb-s-3);
  padding: var(--eb-s-8) var(--eb-s-4);
  border: 1px dashed var(--eb-line-strong);
  border-radius: var(--eb-r-lg);
  color: var(--eb-ink-muted);
  text-align: center;
}

.eb-empty img { width: min(160px, 40vw); height: auto; aspect-ratio: 320 / 401; opacity: 0.75; }

.eb-skeleton {
  border-radius: var(--eb-r-sm);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 37%, rgba(255, 255, 255, 0.04) 63%);
  background-size: 400% 100%;
  animation: eb-shimmer 1.4s ease infinite;
}

@keyframes eb-shimmer { to { background-position: -135% 0; } }

@media (prefers-reduced-motion: reduce) { .eb-skeleton { animation: none; } }

/* --------------------------------------------------------------------------
   9. Utilities & accessibility
   -------------------------------------------------------------------------- */
.eb-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.eb-skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: var(--eb-z-toast);
  padding: 12px 18px;
  border-radius: var(--eb-r-sm);
  background: var(--eb-gold);
  color: var(--eb-gold-ink);
  font-weight: 800;
}

.eb-skip:focus { top: 16px; }

*:focus-visible { outline: 2px solid var(--eb-gold-bright); outline-offset: 3px; border-radius: var(--eb-r-xs); }

.eb-reveal { opacity: 1; }
html.eb-js .eb-reveal { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity var(--eb-dur-slow) var(--eb-ease), transform var(--eb-dur-slow) var(--eb-ease); }
html.eb-js .eb-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.eb-js .eb-reveal { opacity: 1; transform: none; transition: none; }
}

.eb-stack { display: grid; gap: var(--eb-s-4); }
.eb-row { display: flex; flex-wrap: wrap; gap: var(--eb-s-3); }
.eb-row--between { justify-content: space-between; align-items: center; }
.eb-muted { color: var(--eb-ink-muted); }
.eb-nowrap { white-space: nowrap; }
.eb-num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   10. hidden attribute
   --------------------------------------------------------------------------
   .eb-btn and friends set `display`, which beats the user-agent [hidden] rule.
   Without this a button hidden from JavaScript would stay on screen.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   11. Dialog completion + Contact centre  (güncel v1)
   --------------------------------------------------------------------------
   The landing page, the member area and the streams page now share one modal
   implementation. These rules complete .eb-dialog with the pieces the legal
   dialogs used to have in style.css (backdrop element, icon, rich content, a
   wide variant) and add the contact centre grid on top of it.
   -------------------------------------------------------------------------- */
.eb-dialog {
  /* Always centred in the viewport — never pushed to the bottom of the page. */
  position: fixed;
  place-items: center;
  overscroll-behavior: contain;
}

.eb-dialog__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.eb-dialog__panel {
  z-index: 1;
  animation: eb-dialog-in 260ms var(--eb-ease) 1;
}

.eb-dialog__panel--wide { width: min(820px, 100%); }

@keyframes eb-dialog-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .eb-dialog__panel { animation: none; }
}

.eb-dialog__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(217, 170, 50, 0.13);
  color: var(--eb-gold-bright);
  font-size: 22px;
  font-weight: 900;
}

.eb-dialog__panel h2 { margin: var(--eb-s-3) var(--eb-s-8) var(--eb-s-4) 0; }

.eb-dialog__content { color: var(--eb-ink-soft); font-size: var(--eb-fs-sm); line-height: 1.75; }
.eb-dialog__content p { margin: 0 0 var(--eb-s-3); }
.eb-dialog__content ul { margin: 0 0 var(--eb-s-3); padding-left: 20px; }
.eb-dialog__content li { margin: var(--eb-s-2) 0; }

/* --- Contact centre ------------------------------------------------------ */
.eb-contact-dialog__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(69, 184, 255, 0.12);
  color: var(--eb-electric);
  font-size: 22px;
}

.eb-contact-dialog h2 { margin: var(--eb-s-3) var(--eb-s-8) var(--eb-s-2) 0; }
.eb-contact-dialog__lead { margin: 0 0 var(--eb-s-5); font-size: var(--eb-fs-sm); }

.eb-contact-grid { display: grid; gap: var(--eb-s-3); }

@media (min-width: 620px) {
  .eb-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.eb-contact-card {
  min-height: 64px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  gap: var(--eb-s-3);
  align-items: center;
  padding: var(--eb-s-3);
  border: 1px solid var(--eb-line);
  border-radius: var(--eb-r-lg);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  color: var(--eb-ink);
  text-decoration: none;
  transition: border-color var(--eb-dur-fast) var(--eb-ease), background var(--eb-dur-fast) var(--eb-ease), transform var(--eb-dur-fast) var(--eb-ease);
}

.eb-contact-card:hover,
.eb-contact-card:focus-visible {
  border-color: var(--eb-line-gold);
  background: linear-gradient(140deg, rgba(217, 170, 50, 0.14), rgba(255, 255, 255, 0.02));
  transform: translateY(-2px);
}

.eb-contact-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--eb-line-gold);
  border-radius: var(--eb-r-md);
  color: var(--eb-gold-bright);
  font-size: 19px;
}

.eb-contact-card__copy { min-width: 0; display: grid; gap: 2px; }
.eb-contact-card__copy strong { font-size: var(--eb-fs-sm); }
.eb-contact-card__copy small { color: var(--eb-ink-muted); font-size: var(--eb-fs-xs); line-height: 1.5; }
.eb-contact-card__go { color: var(--eb-gold); font-size: 16px; text-align: right; }

.eb-contact-empty { grid-column: 1 / -1; margin: 0; }

/* Channel-specific accents, so a long list stays scannable. */
.eb-contact-card[data-contact-type="whatsapp"] .eb-contact-card__icon { color: var(--eb-emerald); border-color: rgba(58, 211, 154, 0.4); }
.eb-contact-card[data-contact-type="email"] .eb-contact-card__icon { color: var(--eb-electric); border-color: var(--eb-line-electric); }
.eb-contact-card[data-contact-type="discord"] .eb-contact-card__icon { color: var(--eb-violet); border-color: rgba(160, 107, 255, 0.4); }
.eb-contact-card[data-contact-type="instagram"] .eb-contact-card__icon { color: var(--eb-amber); border-color: rgba(255, 159, 46, 0.4); }

@media (max-width: 520px) {
  .eb-dialog { padding: var(--eb-s-3); }
  .eb-dialog__panel { padding: var(--eb-s-5) var(--eb-s-4); max-height: 90vh; }
  .eb-contact-card { grid-template-columns: 40px minmax(0, 1fr) 18px; }
}