/* ═══════════════════════════════════════════════════════════════
   Discover & Dashboard — Modern Dark Theme
   ═══════════════════════════════════════════════════════════════ */
:root {
  --ht-d-bg:     #0f0f13;
  --ht-d-card:   #1a1a24;
  --ht-d-card2:  #22222f;
  --ht-d-border: #2a2a3a;
  --ht-d-text:   #e8e8f0;
  --ht-d-muted:  #6b6b85;
  --ht-d-accent: #6c63ff;
  --ht-d-green:  #00d4a4;
  --ht-d-gold:   #f5a623;
  --ht-d-radius: 12px;
  --ht-d-radius-sm: 8px;
  --ht-d-shadow: 0 4px 24px rgba(0,0,0,.4);
}

#ht-discover-root, #ht-dashboard-root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── DISCOVER ─────────────────────────────────────────────────── */
#ht-discover-root {
  color: var(--ht-d-text); background: var(--ht-d-bg);
  min-height: 400px; padding: 24px 16px; max-width: 1100px; margin: 0 auto;
}
.htd-header { text-align: center; margin-bottom: 28px; }
.htd-title {
  font-size: clamp(22px,4vw,32px); font-weight: 800;
  background: linear-gradient(135deg,#6c63ff,#00d4a4);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin: 0 0 6px;
}
.htd-sub { color: var(--ht-d-muted); font-size: 14px; margin: 0; }

.htd-filters { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.htd-search {
  flex: 1; min-width: 200px; background: var(--ht-d-card);
  border: 1px solid var(--ht-d-border); border-radius: var(--ht-d-radius-sm);
  padding: 11px 14px; color: var(--ht-d-text); font-size: 14px; outline: none;
}
.htd-search:focus { border-color: var(--ht-d-accent); }
.htd-search::placeholder { color: var(--ht-d-muted); }
.htd-select {
  background: var(--ht-d-card); border: 1px solid var(--ht-d-border);
  border-radius: var(--ht-d-radius-sm); padding: 11px 14px; color: var(--ht-d-text);
  font-size: 14px; outline: none; cursor: pointer; min-width: 130px;
}

.htd-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 16px; }

.htd-card {
  background: var(--ht-d-card); border: 1px solid var(--ht-d-border);
  border-radius: var(--ht-d-radius); overflow: hidden;
  transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column;
}
.htd-card:hover { transform: translateY(-3px); box-shadow: var(--ht-d-shadow); }
.htd-card-stripe { height: 4px; width: 100%; }
.htd-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 9px; }
.htd-card-top { display: flex; align-items: center; justify-content: space-between; }
.htd-card-type { font-size: 22px; }
.htd-card-tag { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 18px; text-transform: uppercase; letter-spacing: .05em; }
.htd-card-name { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.3; }
.htd-card-q { font-size: 12px; color: var(--ht-d-muted); margin: 0; font-style: italic; }
.htd-card-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--ht-d-muted); }
.htd-card-meta span { background: var(--ht-d-card2); padding: 3px 9px; border-radius: 18px; }
.htd-card-owner { font-size: 11px; color: var(--ht-d-muted); margin-top: auto; }
.htd-card-footer { padding: 14px 18px; border-top: 1px solid var(--ht-d-border); }
.htd-status-row { display: flex; gap: 6px; margin-top: 2px; }

.htd-btn {
  display: inline-block; width: 100%; padding: 10px 14px; border-radius: var(--ht-d-radius-sm);
  font-size: 13px; font-weight: 700; cursor: pointer; border: none; text-align: center;
  transition: opacity .15s, transform .1s; letter-spacing: .03em;
}
.htd-btn:active { transform: scale(.98); }
.htd-btn--join { color: #fff; }
.htd-btn--join:hover { opacity: .88; }
.htd-btn--joined { background: rgba(0,212,164,.15); color: var(--ht-d-green); border: 1px solid rgba(0,212,164,.3); }
.htd-btn--joined:hover { background: rgba(255,80,80,.15); color: #ff5050; border-color: rgba(255,80,80,.3); }
.htd-btn--owner { background: rgba(108,99,255,.15); color: var(--ht-d-accent); border: 1px solid rgba(108,99,255,.3); cursor: default; }
.htd-btn:disabled { opacity: .5; cursor: not-allowed; }

.htd-loading { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px; gap: 16px; color: var(--ht-d-muted); }
.htd-empty   { grid-column: 1/-1; text-align: center; padding: 56px; color: var(--ht-d-muted); font-size: 14px; }
.htd-spinner { width: 30px; height: 30px; border: 3px solid var(--ht-d-border); border-top-color: var(--ht-d-accent); border-radius: 50%; animation: htd-spin .7s linear infinite; }
@keyframes htd-spin { to { transform: rotate(360deg); } }

.htd-pages { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 26px; }
.htd-page-btn { background: var(--ht-d-card); border: 1px solid var(--ht-d-border); color: var(--ht-d-text); padding: 8px 18px; border-radius: var(--ht-d-radius-sm); cursor: pointer; font-size: 13px; }
.htd-page-btn:hover { border-color: var(--ht-d-accent); }
.htd-page-info { color: var(--ht-d-muted); font-size: 13px; }

/* Toast (shared) */
.ht-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #1a1a24; color: #e8e8f0; border: 1px solid #2a2a3a;
  padding: 12px 22px; border-radius: 8px; font-size: 13px;
  z-index: 99999; animation: htd-toast .2s ease; pointer-events: none;
  white-space: nowrap; box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
@keyframes htd-toast { from { transform: translateX(-50%) translateY(10px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }

/* ── DASHBOARD ────────────────────────────────────────────────── */
#ht-dashboard-root {
  color: var(--ht-d-text); background: var(--ht-d-bg);
  min-height: 400px; max-width: 1100px; margin: 0 auto; padding: 24px 16px;
}
.htdb-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px; gap: 18px; color: var(--ht-d-muted); }
.htdb-spinner { width: 34px; height: 34px; border: 3px solid var(--ht-d-border); border-top-color: var(--ht-d-accent); border-radius: 50%; animation: htd-spin .7s linear infinite; }
.htdb-error { text-align: center; padding: 36px; color: #ff5050; background: rgba(255,80,80,.08); border-radius: var(--ht-d-radius); border: 1px solid rgba(255,80,80,.2); }

.htdb-section { margin-bottom: 36px; }
.htdb-section-header { margin-bottom: 18px; }
.htdb-section-title { font-size: 21px; font-weight: 800; margin: 0 0 4px; }
.htdb-section-sub { color: var(--ht-d-muted); font-size: 13px; margin: 0; }

.htdb-race-cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(290px,1fr)); gap: 14px; margin-bottom: 20px; }
.htdb-race-card {
  background: var(--ht-d-card); border: 1px solid var(--ht-d-border);
  border-radius: var(--ht-d-radius); overflow: hidden; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.htdb-race-card:hover { transform: translateY(-2px); box-shadow: var(--ht-d-shadow); }
.htdb-race-card-header { padding: 13px 18px; display: flex; align-items: center; justify-content: space-between; }
.htdb-race-title { font-size: 14px; font-weight: 700; color: #fff; }
.htdb-race-rank  { font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,.3); padding: 2px 9px; border-radius: 18px; }
.htdb-race-track { padding: 14px 18px; }
.htdb-track-wrap { display: flex; flex-direction: column; gap: 7px; }
.htdb-track-bar  { height: 34px; background: var(--ht-d-card2); border-radius: 17px; overflow: hidden; position: relative; }
.htdb-track-fill {
  height: 100%; border-radius: 17px; display: flex; align-items: center;
  justify-content: flex-end; padding-right: 8px;
  transition: width .8s cubic-bezier(.25,.46,.45,.94); min-width: 34px;
}
.htdb-track-racer { font-size: 18px; line-height: 1; }
.htdb-track-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--ht-d-muted); }
.htdb-race-empty  { background: var(--ht-d-card); border: 1px solid var(--ht-d-border); border-radius: var(--ht-d-radius); padding: 36px; text-align: center; color: var(--ht-d-muted); }

.htdb-summary-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 14px; margin-bottom: 18px; }
.htdb-stat-card { background: var(--ht-d-card); border: 1px solid var(--ht-d-border); border-radius: var(--ht-d-radius); padding: 18px 14px; text-align: center; }
.htdb-stat-icon { font-size: 26px; margin-bottom: 6px; }
.htdb-stat-value { font-size: 28px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.htdb-stat-label { font-size: 12px; color: var(--ht-d-muted); margin-bottom: 2px; }
.htdb-stat-sub   { font-size: 10px; color: var(--ht-d-muted); }

.htdb-card { background: var(--ht-d-card); border: 1px solid var(--ht-d-border); border-radius: var(--ht-d-radius); padding: 18px; margin-bottom: 14px; }
.htdb-card-title { font-size: 14px; font-weight: 700; margin: 0 0 14px; }

.htdb-weekly-chart { display: flex; gap: 8px; align-items: flex-end; height: 84px; padding-top: 12px; }
.htdb-week-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.htdb-week-bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; }
.htdb-week-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 4px; position: relative; transition: height .4s ease; }
.htdb-week-count { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--ht-d-muted); }
.htdb-week-day { font-size: 10px; color: var(--ht-d-muted); }

.htdb-streaks-list { display: flex; flex-direction: column; gap: 10px; }
.htdb-streak-name  { font-size: 12px; color: var(--ht-d-muted); margin-bottom: 4px; }
.htdb-streak-bar-wrap { background: var(--ht-d-card2); border-radius: 20px; height: 26px; overflow: hidden; }
.htdb-streak-bar   { height: 100%; border-radius: 20px; display: flex; align-items: center; padding: 0 11px; transition: width .6s ease; min-width: 50px; }
.htdb-streak-val   { font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }

.htdb-recent-list { display: flex; flex-direction: column; }
.htdb-recent-item { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--ht-d-border); }
.htdb-recent-item:last-child { border-bottom: none; }
.htdb-recent-dot  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.htdb-recent-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.htdb-recent-name { font-size: 13px; color: var(--ht-d-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htdb-recent-val  { font-size: 11px; color: var(--ht-d-green); }
.htdb-recent-date { font-size: 11px; color: var(--ht-d-muted); flex-shrink: 0; }

/* Leaderboard */
.htdb-lb-wrap { background: var(--ht-d-card); border: 1px solid var(--ht-d-border); border-radius: var(--ht-d-radius); padding: 18px; margin-top: 14px; }
.htdb-lb-loading { padding: 36px; display: flex; align-items: center; justify-content: center; }
.htdb-lb-title { font-size: 15px; font-weight: 700; margin: 0 0 18px; }
.htdb-lb-list { display: flex; flex-direction: column; gap: 7px; }
.htdb-lb-row { display: flex; align-items: center; gap: 11px; padding: 11px; background: var(--ht-d-card2); border-radius: var(--ht-d-radius-sm); }
.htdb-lb-row--me { background: rgba(108,99,255,.13); border: 1px solid rgba(108,99,255,.3); }
.htdb-lb-rank { font-size: 18px; width: 30px; text-align: center; flex-shrink: 0; }
.htdb-lb-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--ht-d-border); }
.htdb-lb-info { flex: 1; min-width: 0; }
.htdb-lb-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.htdb-lb-you  { font-size: 11px; color: var(--ht-d-accent); font-weight: 400; }
.htdb-lb-bar-wrap { height: 4px; background: var(--ht-d-card); border-radius: 2px; overflow: hidden; }
.htdb-lb-bar { height: 100%; border-radius: 2px; transition: width .6s ease; }
.htdb-lb-streak { text-align: center; min-width: 44px; flex-shrink: 0; font-size: 16px; font-weight: 800; color: var(--ht-d-gold); }
.htdb-lb-streak span { display: block; font-size: 9px; color: var(--ht-d-muted); font-weight: 400; }
.htdb-lb-empty { color: var(--ht-d-muted); text-align: center; padding: 20px; }

/* ════════════════════════════════════════════════════════════════
   ROUND ANIMATION — Wrestling style
   ════════════════════════════════════════════════════════════════ */
.ht-round-overlay {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85); animation: ht-round-in .25s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter: blur(4px); cursor: pointer;
}
.ht-round-overlay.ht-round-exit { animation: ht-round-out .35s ease forwards; }
.ht-round-card {
  position: relative; width: min(420px,92vw);
  background: #0f0f13; border: 2px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 44px 28px; text-align: center; overflow: hidden;
}
.ht-round-bg   { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.ht-round-glow { position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; }
.ht-round-corner { position: absolute; width: 22px; height: 22px; border-color: rgba(255,255,255,.25); border-style: solid; }
.ht-round-corner--tl { top: 10px; left: 10px;  border-width: 2px 0 0 2px; }
.ht-round-corner--tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; }
.ht-round-corner--bl { bottom: 10px; left: 10px;  border-width: 0 0 2px 2px; }
.ht-round-corner--br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }
.ht-round-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.ht-round-bell  { font-size: 42px; animation: ht-bell .4s cubic-bezier(.36,.07,.19,.97) both; }
.ht-round-label { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.ht-round-title {
  font-size: clamp(19px,5vw,26px); font-weight: 900; color: #fff;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1.2;
  animation: ht-punch .3s cubic-bezier(.36,.07,.19,.97) .1s both;
}
.ht-round-streak { font-size: 17px; font-weight: 800; color: #f5a623; letter-spacing: .05em; text-transform: uppercase; animation: ht-punch .3s cubic-bezier(.36,.07,.19,.97) .2s both; }
.ht-round-fire   { animation: ht-fire .5s ease infinite alternate; display: inline-block; }
.ht-round-vs {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg,#00d4a4,#6c63ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; color: #fff;
  animation: ht-pop .4s cubic-bezier(.34,1.56,.64,1) .3s both;
  box-shadow: 0 0 28px rgba(0,212,164,.5);
}
.ht-round-tap { font-size: 10px; letter-spacing: .14em; color: rgba(255,255,255,.3); text-transform: uppercase; margin-top: 6px; animation: ht-blink 1s ease infinite; }

.ht-round-countdown-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0; }
.ht-round-countdown-num  { font-size: 74px; font-weight: 900; line-height: 1; animation: ht-pop .5s cubic-bezier(.34,1.56,.64,1) .2s both; }
.ht-round-countdown-unit { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.5); text-transform: uppercase; }

.ht-round-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.ht-particle { position: absolute; top: 50%; left: 50%; animation: ht-particle-fly var(--dur,1s) ease var(--delay,0s) both; }
@keyframes ht-particle-fly {
  0%   { transform: translate(-50%,-50%) rotate(0) scale(0); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px))) rotate(var(--r,180deg)) scale(var(--s,1)); opacity: 0; }
}

.ht-fight-intro {
  position: fixed; inset: 0; z-index: 999998;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; animation: ht-fight .9s cubic-bezier(.36,.07,.19,.97) forwards;
}
.ht-fight-intro span {
  font-size: clamp(56px,14vw,110px); font-weight: 900; text-transform: uppercase;
  letter-spacing: .04em; text-shadow: 0 0 36px currentColor, 0 4px 0 rgba(0,0,0,.5); font-style: italic;
}

@keyframes ht-round-in  { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }
@keyframes ht-round-out { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(1.1); } }
@keyframes ht-punch     { 0% { transform:scale(1.4) rotate(-3deg); opacity:0; } 100% { transform:scale(1) rotate(0); opacity:1; } }
@keyframes ht-pop       { 0% { transform:scale(0); } 100% { transform:scale(1); } }
@keyframes ht-bell      { 0%,100% { transform:rotate(0); } 25% { transform:rotate(15deg); } 75% { transform:rotate(-15deg); } }
@keyframes ht-fire      { from { transform:scale(1); } to { transform:scale(1.3) translateY(-2px); } }
@keyframes ht-blink     { 0%,100% { opacity:.3; } 50% { opacity:.7; } }
@keyframes ht-fight {
  0%   { opacity:0; transform:scale(.3); }
  20%  { opacity:1; transform:scale(1.2); }
  40%  { transform:scale(1); }
  70%  { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(1.5); }
}

/* ── Status badges (shared with discover cards) ─────────────────── */
.ht-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px; font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.ht-status-badge--active    { background: rgba(0,212,164,.15);  color: #00d4a4; }
.ht-status-badge--upcoming  { background: rgba(108,99,255,.15); color: #6c63ff; }
.ht-status-badge--completed { background: rgba(245,166,35,.15); color: #f5a623; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .htd-filters { flex-direction: column; }
  .htd-search, .htd-select { width: 100%; min-width: unset; }
  .htdb-summary-grid { grid-template-columns: repeat(2,1fr); }
  .htdb-race-cards { grid-template-columns: 1fr; }
}

/* ─── Discover Tabs ─────────────────────────────────── */
.htd-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  background: var(--ht-d-card); border-radius: var(--ht-d-radius);
  padding: 4px;
}
.htd-tab {
  flex: 1; padding: 10px 16px; border: none; border-radius: calc(var(--ht-d-radius) - 2px);
  font-size: 14px; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--ht-d-muted); transition: all .2s;
}
.htd-tab--active {
  background: var(--ht-d-card2); color: var(--ht-d-text);
}

/* ─── Race Card Expand Button ─────────────────────── */
.htdb-race-expand-btn {
  transition: background .15s;
  letter-spacing: .04em; text-transform: uppercase;
}
.htdb-race-expand-btn:hover { background: rgba(0,0,0,.2) !important; }
.htdb-race-lb { border-radius: 0 0 var(--ht-d-radius) var(--ht-d-radius); }