/* ============================================================
   DOPE ARENA — Frontend CSS
   Paleta: Gold #C8A84B | Teal #4DC8C8 | BG #1C1C1E
   ============================================================ */

:root {
  --da-gold:      #C8A84B;
  --da-gold-dim:  #8a7434;
  --da-teal:      #4DC8C8;
  --da-teal-dim:  #2d7878;
  --da-bg:        #1C1C1E;
  --da-surface:   #222224;
  --da-surface-2: #2a2a2c;
  --da-line:      #333336;
  --da-text:      #ebebeb;
  --da-text-dim:  #9a9a9a;
  --da-text-faint:#6a6a6a;
  --da-danger:    #ff4757;
  --da-ok:        #2ed573;
  --da-grad:      linear-gradient(90deg, var(--da-gold) 0%, var(--da-teal) 100%);
  --da-font-display: 'Bebas Neue', sans-serif;
  --da-font-body:    'Rajdhani', sans-serif;
  --da-font-mono:    'JetBrains Mono', monospace;
}

/* ===== BASE ===== */
.da-arena-wrap, .da-single-wrap, .da-leaderboard-wrap,
.da-profile-wrap, .da-dispute-wrap {
  font-family: var(--da-font-body);
  color: var(--da-text);
  background: var(--da-bg);
  padding: 24px 0;
}

.da-grad-text {
  background: var(--da-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.da-gold  { color: var(--da-gold); }
.da-teal  { color: var(--da-teal); }
.da-ok    { color: var(--da-ok); }
.da-danger{ color: var(--da-danger); }
.mono     { font-family: var(--da-font-mono); }

/* ===== TABS ===== */
.da-tabs {
  display: flex;
  border-bottom: 1px solid var(--da-line);
  margin-bottom: 32px;
  overflow-x: auto;
}
.da-tab {
  font-family: var(--da-font-display);
  font-size: 20px;
  letter-spacing: .08em;
  color: var(--da-text-dim);
  padding: 14px 24px;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  transition: color .2s;
}
.da-tab:hover { color: var(--da-text); }
.da-tab--active { color: var(--da-gold); }
.da-tab--active::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 3px; background: var(--da-grad);
}
.da-tab__count {
  display: inline-block; margin-left: 8px;
  background: var(--da-surface-2); color: var(--da-teal);
  font-family: var(--da-font-mono); font-size: 12px;
  padding: 2px 8px; border: 1px solid var(--da-line);
}

/* ===== SECTION TITLE ===== */
.da-section-title {
  font-family: var(--da-font-display);
  font-size: 36px; letter-spacing: .04em;
  background: var(--da-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 24px;
}

/* ===== GRID ===== */
.da-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* ===== CARD ===== */
.da-card {
  background: var(--da-surface);
  border: 1px solid var(--da-line);
  overflow: hidden;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  position: relative;
}
.da-card:hover {
  transform: translateY(-4px);
  border-color: var(--da-teal);
  box-shadow: 0 20px 40px -20px rgba(77,200,200,.25);
}
.da-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--da-grad); opacity: 0; transition: opacity .25s;
}
.da-card:hover::before { opacity: 1; }

.da-card__banner {
  position: relative; height: 170px;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; padding: 14px;
}
.da-card__banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(34,34,36,.95));
}
.da-card__badges {
  display: flex; gap: 6px; flex-wrap: wrap; position: relative; z-index: 2;
}

/* ===== BADGES ===== */
.da-badge {
  font-family: var(--da-font-display);
  font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 10px;
  border: 1px solid;
}
.da-badge--mode   { background: var(--da-gold); color: var(--da-bg); border-color: var(--da-gold); }
.da-badge--map    { background: rgba(28,28,30,.8); color: var(--da-teal); border-color: var(--da-teal); }
.da-badge--pov    { background: transparent; color: #fff; border-color: #fff; }
.da-badge--gold   { background: var(--da-gold); color: var(--da-bg); border-color: var(--da-gold); }
.da-badge--teal   { background: var(--da-teal); color: var(--da-bg); border-color: var(--da-teal); }
.da-badge--danger { background: var(--da-danger); color: #fff; border-color: var(--da-danger); }
.da-badge--ok     { background: var(--da-ok); color: #fff; border-color: var(--da-ok); }
.da-badge--dim    { background: var(--da-surface-2); color: var(--da-text-dim); border-color: var(--da-line); }

/* ===== STATUS ===== */
.da-status {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--da-font-display); font-size: 11px;
  letter-spacing: .14em; padding: 4px 10px; z-index: 3;
}
.da-status--ongoing  { background: var(--da-danger); color: #fff; }
.da-status--upcoming { background: var(--da-grad); color: var(--da-bg); }
.da-status--finished { background: var(--da-surface-2); color: var(--da-text-dim); border: 1px solid var(--da-line); }
.da-status__dot {
  display: inline-block; width: 6px; height: 6px;
  background: #fff; border-radius: 50%; margin-right: 6px;
  animation: da-pulse 1s infinite;
}
@keyframes da-pulse { 50% { opacity: .3; } }

/* ===== CARD BODY ===== */
.da-card__body { padding: 16px; }
.da-card__title {
  font-family: var(--da-font-display); font-size: 20px; letter-spacing: .02em; margin-bottom: 6px;
}
.da-card__title a { color: var(--da-text); text-decoration: none; }
.da-card__title a:hover { color: var(--da-teal); }
.da-card__meta {
  font-size: 13px; color: var(--da-text-dim); display: flex;
  gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.da-sep { width: 3px; height: 3px; background: var(--da-text-faint); border-radius: 50%; align-self: center; }

.da-card__stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1px; background: var(--da-line);
  border: 1px solid var(--da-line); margin-bottom: 12px;
}
.da-card__stat { background: var(--da-surface-2); padding: 10px 6px; text-align: center; }
.da-card__stat-k { display: block; font-size: 10px; color: var(--da-text-dim); letter-spacing: .14em; text-transform: uppercase; }
.da-card__stat-v { display: block; font-family: var(--da-font-display); font-size: 19px; margin-top: 2px; }
.da-card__stat-v--gold { color: var(--da-gold); }
.da-card__stat-v--teal { color: var(--da-teal); }

/* ===== SLOTS BAR ===== */
.da-slots { font-size: 13px; color: var(--da-text-dim); margin-bottom: 12px; }
.da-slots strong { color: var(--da-text); }
.da-slots__bar { height: 3px; background: var(--da-bg); margin-top: 5px; }
.da-slots__fill { height: 100%; background: var(--da-grad); }

/* ===== CARD FOOTER ===== */
.da-card__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.da-ref { font-family: var(--da-font-mono); font-size: 12px; color: var(--da-text-faint); }

/* ===== BUTTONS ===== */
.da-btn {
  font-family: var(--da-font-display); letter-spacing: .1em;
  font-size: 14px; padding: 10px 18px;
  background: var(--da-grad); color: var(--da-bg);
  border: none; cursor: pointer; text-decoration: none;
  display: inline-block; text-align: center;
  transition: filter .2s, transform .1s;
}
.da-btn:hover { filter: brightness(1.15); color: var(--da-bg); }
.da-btn:active { transform: translateY(1px); }
.da-btn--ghost {
  background: transparent; color: var(--da-teal);
  border: 2px solid var(--da-teal);
}
.da-btn--ghost:hover { background: var(--da-teal); color: var(--da-bg); }
.da-btn--ghost-gold {
  background: transparent; color: var(--da-gold);
  border: 2px solid var(--da-gold);
}
.da-btn--ghost-gold:hover { background: var(--da-gold); color: var(--da-bg); }
.da-btn--discord {
  background: #5865F2; color: #fff; border: none;
}
.da-btn--discord:hover { background: #4752c4; color: #fff; }
.da-btn--lg { padding: 14px 24px; font-size: 18px; }
.da-btn--sm { padding: 6px 12px; font-size: 13px; }
.da-btn--block { width: 100%; display: block; }

/* ===== EMPTY STATE ===== */
.da-empty {
  padding: 60px 20px; text-align: center; color: var(--da-text-dim); font-size: 18px;
  border: 1px dashed var(--da-line);
}

/* ===== PANEL ===== */
.da-panel {
  background: var(--da-surface); border: 1px solid var(--da-line); padding: 24px;
  position: relative; margin-bottom: 24px;
}
.da-panel--accent::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--da-grad);
}
.da-panel--grow { flex: 1 1 auto; }
.da-panel__title {
  font-family: var(--da-font-display); font-size: 26px; letter-spacing: .04em;
  margin-bottom: 16px; color: var(--da-text);
}
.da-panel__badge {
  font-size: 16px; margin-left: 10px; color: var(--da-teal);
}

/* ===== SINGLE HERO ===== */
.da-single__hero {
  position: relative; min-height: 260px;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; padding: 24px;
  margin-bottom: 24px; border: 1px solid var(--da-line);
  overflow: hidden;
}
.da-single__hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--da-grad); z-index: 3;
}
.da-single__hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(28,28,30,.95));
}
.da-single__hero-content { position: relative; z-index: 2; }
.da-single__title {
  font-family: var(--da-font-display); font-size: clamp(32px, 5vw, 52px);
  letter-spacing: .02em; margin: 8px 0 6px; line-height: 1;
}

/* ===== SINGLE LAYOUT ===== */
.da-single__layout { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
@media (max-width: 900px) { .da-single__layout { grid-template-columns: 1fr; } }

/* ===== INFO GRID ===== */
.da-info-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--da-line); border: 1px solid var(--da-line);
  margin-bottom: 24px;
}
.da-info-cell { background: var(--da-surface); padding: 14px 16px; }
.da-info-k { display: block; font-size: 11px; letter-spacing: .14em; color: var(--da-text-dim); text-transform: uppercase; }
.da-info-v { display: block; font-family: var(--da-font-display); font-size: 24px; margin-top: 4px; }

/* ===== MATCH SCHEDULE ===== */
.da-match-schedule { display: flex; flex-direction: column; gap: 12px; }
.da-match-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px; background: var(--da-surface-2); border: 1px solid var(--da-line);
}
.da-match-row--live    { border-color: var(--da-danger); }
.da-match-row--finished{ opacity: .7; }
.da-match-circle {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--da-grad); color: var(--da-bg);
  font-family: var(--da-font-display); font-size: 18px; flex-shrink: 0;
}
.da-match-info { flex: 1; }
.da-match-map { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.da-match-status-tag {
  font-family: var(--da-font-display); font-size: 11px;
  letter-spacing: .12em; padding: 2px 8px; border: 1px solid;
}
.da-match-status-tag--pending  { color: var(--da-text-dim); border-color: var(--da-line); }
.da-match-status-tag--live     { color: var(--da-danger); border-color: var(--da-danger); }
.da-match-status-tag--finished { color: var(--da-ok); border-color: var(--da-ok); }
.da-match-time { font-size: 13px; color: var(--da-text-dim); }

/* ===== CRED BOXES ===== */
.da-cred-block { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--da-line); }
.da-cred-block:last-child { border-bottom: none; }
.da-cred-box {
  background: var(--da-bg); border: 2px dashed var(--da-gold);
  padding: 12px; text-align: center;
}
.da-cred-box--teal { border-color: var(--da-teal); }
.da-cred-lbl { display: block; font-size: 10px; color: var(--da-gold); letter-spacing: .18em; text-transform: uppercase; }
.da-cred-box--teal .da-cred-lbl { color: var(--da-teal); }
.da-cred-val { display: block; font-family: var(--da-font-mono); font-size: 20px; color: var(--da-text); margin-top: 4px; }
.da-cred-locked { color: var(--da-text-dim); font-size: 13px; padding: 10px; }
.da-match-creds { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.da-match-creds--locked { color: var(--da-text-faint); font-size: 13px; }

/* ===== TABLES ===== */
.da-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
.da-table th { text-align: left; padding: 8px 12px; font-size: 11px; letter-spacing: .14em; color: var(--da-text-dim); text-transform: uppercase; }
.da-table td { padding: 12px; background: var(--da-surface); border-top: 1px solid var(--da-line); border-bottom: 1px solid var(--da-line); vertical-align: middle; }
.da-table tr td:first-child { border-left: 1px solid var(--da-line); }
.da-table tr td:last-child  { border-right: 1px solid var(--da-line); }
.da-table tr:hover td { background: var(--da-surface-2); }
.da-table--lb .da-lb-row--top td { border-top-color: var(--da-gold); }

/* ===== RANK ===== */
.da-rank { font-family: var(--da-font-display); font-size: 24px; display: inline-block; width: 36px; }
.da-rank--gold   { color: var(--da-gold); }
.da-rank--silver { color: #bbb; }
.da-rank--bronze { color: #c47c3d; }

/* ===== PLAYER ROW ===== */
.da-player { display: flex; align-items: center; gap: 12px; }
.da-player__av {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--da-surface-2); border: 1px solid var(--da-line);
  display: grid; place-items: center;
  font-family: var(--da-font-display); font-size: 14px; color: var(--da-gold);
}
.da-player__av--teal { color: var(--da-teal); }
.da-player__name { font-weight: 600; }
.da-player__ref { font-family: var(--da-font-mono); font-size: 11px; color: var(--da-text-dim); }
.da-points { font-family: var(--da-font-display); font-size: 22px; background: var(--da-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== JOIN CARD ===== */
.da-join-card { position: sticky; top: 80px; }
.da-price-lbl { font-size: 11px; letter-spacing: .18em; color: var(--da-text-dim); text-transform: uppercase; }
.da-price-big { font-family: var(--da-font-display); font-size: 52px; line-height: 1; background: var(--da-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.da-wallet-preview { background: var(--da-bg); border: 1px solid var(--da-line); padding: 12px; margin-bottom: 14px; }
.da-wallet-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.da-wallet-row:last-child { margin-bottom: 0; }
.da-join-msg { padding: 16px; text-align: center; font-size: 16px; border: 1px solid; }
.da-join-msg--ok     { color: var(--da-ok);      border-color: var(--da-ok); }
.da-join-msg--closed { color: var(--da-text-dim); border-color: var(--da-line); }
.da-join-msg--done   { color: var(--da-gold);     border-color: var(--da-gold); }

/* ===== FORM FIELDS ===== */
.da-field { margin-bottom: 14px; }
.da-field label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--da-text-dim); margin-bottom: 5px; }
.da-field input, .da-field select, .da-field textarea {
  width: 100%; padding: 11px 13px; background: var(--da-bg); color: var(--da-text);
  border: 1px solid var(--da-line); font-family: var(--da-font-body); font-size: 14px; transition: border-color .2s;
}
.da-field input:focus, .da-field select:focus, .da-field textarea:focus { outline: none; border-color: var(--da-teal); }
.da-field--inline { flex: 1; }
.da-member-row { display: flex; gap: 10px; flex-wrap: wrap; }
.da-members-header { font-weight: 600; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; }
.da-members-hint { color: var(--da-text-dim); font-size: 13px; }
.da-form-messages { margin: 10px 0; font-size: 14px; }
.da-form-messages .da-success { color: var(--da-ok); }
.da-form-messages .da-error   { color: var(--da-danger); }
.da-form-hint { font-size: 12px; color: var(--da-text-faint); text-align: center; margin-top: 10px; }
.da-copy-input { font-family: var(--da-font-mono); font-size: 12px; background: var(--da-bg); color: var(--da-text); border: 1px solid var(--da-line); padding: 8px; width: 100%; }

/* ===== PROFILE ===== */
.da-profile-head {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 24px; background: var(--da-surface); border: 1px solid var(--da-line);
  position: relative; overflow: hidden; margin-bottom: 20px;
}
.da-profile-head::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--da-grad); }
.da-profile-av {
  width: 80px; height: 80px; border-radius: 50%; background: var(--da-grad);
  display: grid; place-items: center; font-family: var(--da-font-display);
  font-size: 36px; color: var(--da-bg); flex-shrink: 0;
}
.da-profile-name { font-family: var(--da-font-display); font-size: 32px; letter-spacing: .02em; }
.da-profile-wallet { margin-left: auto; text-align: right; }

.da-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--da-line); border: 1px solid var(--da-line); margin-bottom: 20px; }
@media (max-width: 700px) { .da-stats-grid { grid-template-columns: repeat(2,1fr); } }
.da-stat-tile { background: var(--da-surface); padding: 20px; border-top: 3px solid transparent; }
.da-stat-tile--gold { border-top-color: var(--da-gold); }
.da-stat-tile--teal { border-top-color: var(--da-teal); }
.da-stat-icon { font-size: 20px; margin-bottom: 10px; }
.da-stat-v { font-family: var(--da-font-display); font-size: 36px; line-height: 1; }
.da-stat-k { font-size: 11px; letter-spacing: .16em; color: var(--da-text-dim); text-transform: uppercase; margin-top: 4px; }

.da-profile-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 900px) { .da-profile-cols { grid-template-columns: 1fr; } }

.da-ref-stats { display: flex; gap: 10px; margin-bottom: 14px; }
.da-ref-stat { flex: 1; background: var(--da-bg); border: 1px solid var(--da-line); padding: 12px; text-align: center; }
.da-ref-stat-v { font-family: var(--da-font-display); font-size: 26px; }
.da-ref-stat-k { font-size: 10px; color: var(--da-text-dim); letter-spacing: .14em; }

.da-kd-bar { height: 4px; background: var(--da-bg); margin-top: 10px; }
.da-kd-fill { height: 100%; background: var(--da-grad); transition: width .5s ease; }

.da-withdraw-form { margin-bottom: 20px; }

/* ===== TEAM STATUS ===== */
.da-team-status { font-family: var(--da-font-display); font-size: 11px; letter-spacing: .12em; padding: 3px 8px; border: 1px solid; }
.da-team-status--confirmed { color: var(--da-ok); border-color: var(--da-ok); }
.da-team-status--pending   { color: var(--da-gold); border-color: var(--da-gold); }
.da-team-status--rejected  { color: var(--da-danger); border-color: var(--da-danger); }

/* ===== DISPUTE ===== */
.da-dispute-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 900px) { .da-dispute-cols { grid-template-columns: 1fr; } }
.da-discord-status { color: var(--da-ok); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.da-discord-dot { width: 8px; height: 8px; background: var(--da-ok); border-radius: 50%; animation: da-pulse 1.4s infinite; }
.da-ticket { padding: 12px 0; border-bottom: 1px solid var(--da-line); }
.da-ticket:last-child { border-bottom: none; }
.da-ticket-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.da-ticket-sub { font-size: 13px; color: var(--da-text-dim); }
.da-ticket-reply { background: var(--da-bg); padding: 8px; margin-top: 8px; border-left: 2px solid var(--da-teal); font-size: 13px; color: var(--da-teal); }

/* ===== LEADERBOARD ===== */
.da-lb-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.da-lb-periods { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== CONTENT ===== */
.da-content { color: var(--da-text-dim); line-height: 1.7; }
.da-content ul { padding-left: 20px; }
.da-content li { margin-bottom: 6px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .da-grid { grid-template-columns: 1fr; }
  .da-single__layout { grid-template-columns: 1fr; }
  .da-profile-head { flex-direction: column; }
  .da-profile-wallet { margin-left: 0; text-align: left; }
  .da-price-big { font-size: 40px; }
}

/* ===== BOX (warn notice) ===== */
.da-box-warn { padding: 14px; border: 1px solid var(--da-gold); color: var(--da-gold); background: var(--da-surface); }