/* contactgain.xyz/assets/css/contest.css
   Referral Contest — intentionally a different visual language from the
   rest of the app (dark + gold "prize event" theme vs. the green dashboard
   shell) so it reads as a special event, not another settings screen. */

.contest-page {
  --gold: #f0b429;
  --gold-deep: #c98f0a;
  --ink: #0f1216;
  --ink-2: #1b2029;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

/* ---- inactive state ---- */
.contest-empty {
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
  border-radius: 20px;
  padding: 56px 28px;
  text-align: center;
  color: #eef0f3;
}
.contest-empty-icon {
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(240,180,41,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--gold);
  margin: 0 auto 18px;
}
.contest-empty h1 { font-size: 1.7rem; font-weight: 800; margin-bottom: 10px; }
.contest-empty p { color: #aab1bd; max-width: 480px; margin: 0 auto; }
.contest-empty-results {
  margin: 28px auto 0; max-width: 480px; text-align: left;
  background: rgba(255,255,255,.04); border-radius: 14px; padding: 18px 20px;
}
.contest-empty-results-head { font-weight: 700; color: var(--gold); margin-bottom: 10px; font-size: .92rem; }
.contest-mini-list { display: flex; flex-direction: column; gap: 8px; }
.contest-mini-row { display: flex; align-items: center; gap: 10px; font-size: .88rem; }
.contest-mini-rank { color: var(--gold); font-weight: 700; width: 28px; }
.contest-mini-name { flex: 1; color: #e7e9ec; }
.contest-mini-count { color: #9aa1ac; font-size: .8rem; }
.contest-mini-amt { color: #7be08a; font-weight: 700; }

.contest-btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #26200a; font-weight: 700; border: none; border-radius: 10px;
  padding: 10px 22px; text-decoration: none; display: inline-block;
}
.contest-btn-gold:hover { color: #26200a; filter: brightness(1.05); }

.contest-coming-soon {
  margin-top: 28px; display: flex; align-items: center; gap: 12px;
  background: rgba(240,180,41,.08); border: 1px dashed rgba(240,180,41,.4);
  border-radius: 12px; padding: 14px 18px; font-size: .85rem; color: #cbb579;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.contest-coming-soon i { font-size: 1.3rem; color: var(--gold); }

/* ---- active state: hero ---- */
.contest-hero {
  background: radial-gradient(circle at 20% 20%, #22283a 0%, var(--ink) 60%);
  border-radius: 20px; padding: 44px 24px; text-align: center; color: #fff;
}
.contest-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(240,180,41,.15); color: var(--gold);
  border-radius: 999px; padding: 5px 14px; font-size: .75rem; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; margin-bottom: 14px;
}
.contest-hero-badge i { font-size: .6rem; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.contest-hero-badge-soon { background: rgba(96,165,250,.15); color: #60a5fa; }
.contest-hero-badge-soon i { animation: none; }
.contest-hero-upcoming { background: radial-gradient(circle at 80% 20%, #1e2a3f 0%, var(--ink) 60%); }
.contest-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: 8px; }
.contest-hero-desc { color: #b7bdc9; max-width: 560px; margin: 0 auto 22px; font-size: .95rem; }
.contest-pool { margin: 18px 0 26px; }
.contest-pool-amount {
  font-size: 3rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--gold) 0%, #fff2c9 60%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.contest-pool-label { color: #9aa1ac; font-size: .85rem; margin-top: 6px; text-transform: uppercase; letter-spacing: .5px; }

/* ---- glass timer (animated hourglass) — pure CSS/HTML, no SVG ---- */
.hourglass-stage {
  position: relative;
  width: 120px; height: 150px;
  margin: 4px auto 14px;
  display: flex; align-items: center; justify-content: center;
  perspective: 600px;
}
.hourglass-glow {
  position: absolute; inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,180,41,.35) 0%, rgba(240,180,41,0) 70%);
  animation: hgPulse 2.4s ease-in-out infinite;
}
@keyframes hgPulse { 0%,100%{opacity:.55; transform:scale(.94);} 50%{opacity:1; transform:scale(1.06);} }

.hourglass-ring {
  position: absolute; width: 108px; height: 108px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, var(--gold) 18%, transparent 40%, transparent 60%, var(--gold) 78%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: hgRingSpin 3.2s linear infinite;
  opacity: .8;
}
@keyframes hgRingSpin { to { transform: rotate(360deg); } }

.hourglass-3d {
  position: relative; width: 74px; height: 104px;
  display: flex; flex-direction: column; align-items: center;
  transform-style: preserve-3d;
  animation: hgFlip 6s cubic-bezier(.65,-0.35,.35,1.35) infinite;
  filter: drop-shadow(0 6px 14px rgba(240,180,41,.35));
}
@keyframes hgFlip {
  0%, 34%  { transform: rotateX(0deg); }
  50%, 84% { transform: rotateX(180deg); }
  100%     { transform: rotateX(360deg); }
}

.hg-cap { width: 74px; height: 7px; border-radius: 3.5px; background: linear-gradient(180deg, var(--gold), #b8860f); flex-shrink: 0; }

.hg-bulb {
  position: relative; width: 74px; height: 44px; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.hg-bulb-top    { clip-path: polygon(4% 0%, 96% 0%, 58% 100%, 42% 100%); }
.hg-bulb-bottom { clip-path: polygon(42% 0%, 58% 0%, 96% 100%, 4% 100%); }

.hg-sand { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #ffd76a, var(--gold)); }
.hg-sand-top    { height: 100%; animation: hgSandTop 6s linear infinite; }
.hg-sand-bottom { height: 12%;  animation: hgSandBottom 6s linear infinite; }
@keyframes hgSandTop {
  0%, 32%   { height: 100%; opacity: 1; }
  48%, 50%  { height: 4%;   opacity: .5; }
  84%, 100% { height: 100%; opacity: 1; }
}
@keyframes hgSandBottom {
  0%, 32%  { height: 12%; }
  48%      { height: 100%; }
  50%, 82% { height: 12%; }
  98%      { height: 100%; }
  100%     { height: 12%; }
}

.hg-neck { position: relative; width: 6px; height: 8px; flex-shrink: 0; display: flex; justify-content: center; }
.hg-stream { width: 1.5px; height: 100%; background: var(--gold); animation: hgStream .5s linear infinite; }
@keyframes hgStream { 0%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;} }

.sand-particle {
  position: absolute; top: 68px; left: 50%; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 4px rgba(240,180,41,.8);
  animation: hgParticleFall 1.4s linear infinite;
}
.sand-particle.p2 { animation-delay: .45s; left: 49%; }
.sand-particle.p3 { animation-delay: .9s; left: 51%; }
@keyframes hgParticleFall {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(22px) scale(.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hourglass-3d, .hourglass-ring, .hourglass-glow, .hg-sand-top, .hg-sand-bottom, .hg-stream, .sand-particle { animation: none; }
}

.contest-countdown { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.cd-box {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 10px 14px; min-width: 62px;
}
.cd-num { display: block; font-size: 1.4rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.cd-label { display: block; font-size: .68rem; color: #8a90a0; text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.contest-window { color: #7d8493; font-size: .82rem; }

/* ---- my link box ---- */
.contest-mylink {
  margin-top: 20px; background: var(--ink-2); border-radius: 16px;
  padding: 20px 22px; color: #fff;
}
.contest-mylink-label { font-size: .85rem; color: #cfd3db; margin-bottom: 10px; }
.contest-mylink-label i { color: var(--gold); }
.contest-mylink-row { display: flex; gap: 10px; }
.contest-mylink-row input {
  flex: 1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 10px 14px; color: #fff; font-size: .88rem;
}
.contest-mylink-guest {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  text-align: center; font-size: .9rem; color: #cfd3db;
}
.contest-mylink-guest i { font-size: 1.3rem; color: var(--gold); }
.contest-mylink-guest a { color: var(--gold); font-weight: 600; }

/* ---- opt-in join box ---- */
.contest-join-box {
  margin-top: 20px; background: var(--ink-2); border: 1px dashed rgba(240,180,41,.5);
  border-radius: 16px; padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: #e7e9ec; font-size: .92rem;
}
.contest-join-box i { color: var(--gold); }

/* ---- linked (both-scope) contest badge ---- */
.contest-linked-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.08); color: #cfd3db;
  border-radius: 999px; padding: 4px 12px; font-size: .72rem; font-weight: 600;
  margin-bottom: 10px;
}
.contest-linked-badge i { color: var(--gold); }

/* ---- role chip: distinguishes Worker vs Team entries on a linked board ---- */
.contest-role-chip {
  display: inline-block; font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; border-radius: 999px; padding: 1px 7px; margin-left: 5px; vertical-align: middle;
}
.contest-role-chip--user        { background: #dcfce7; color: #166534; }
.contest-role-chip--team_member { background: #ede9fe; color: #5b21b6; }

/* ---- leaderboard ---- */
.contest-board { margin-top: 32px; }
.contest-board-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.contest-board-head h2 { font-size: 1.25rem; font-weight: 800; color: var(--ink); margin: 0; }
.contest-empty-board {
  text-align: center; padding: 40px 20px; color: #8a90a0;
  background: #f7f8fa; border-radius: 14px;
}

.contest-podium {
  display: flex; align-items: flex-end; justify-content: center; gap: 14px;
  margin-bottom: 26px; padding: 0 10px;
}
.podium-col { display: flex; flex-direction: column; align-items: center; width: 110px; }
.podium-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.2rem; color: #fff; margin-bottom: 8px;
}
.podium-1 .podium-avatar { background: linear-gradient(135deg,#f0b429,#c98f0a); width: 64px; height: 64px; font-size: 1.4rem; }
.podium-2 .podium-avatar { background: linear-gradient(135deg,#9aa4b2,#6b7280); }
.podium-3 .podium-avatar { background: linear-gradient(135deg,#c9793f,#9c5a26); }
.podium-name { font-weight: 700; font-size: .85rem; color: var(--ink); text-align: center; max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-count { font-size: .75rem; color: #8a90a0; margin-bottom: 8px; }
.podium-stand {
  width: 100%; border-radius: 10px 10px 0 0;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 6px;
  font-weight: 900; color: #fff;
}
.podium-1 .podium-stand { height: 76px; background: linear-gradient(180deg,#f0b429,#c98f0a); }
.podium-2 .podium-stand { height: 56px; background: linear-gradient(180deg,#9aa4b2,#6b7280); }
.podium-3 .podium-stand { height: 42px; background: linear-gradient(180deg,#c9793f,#9c5a26); }
.podium-me .podium-name { color: #166534; }

.contest-list { display: flex; flex-direction: column; gap: 6px; }
.contest-list-row {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #eceff2; border-radius: 12px;
  padding: 10px 16px;
}
.contest-list-row.in-money { border-color: #f5dfa3; background: #fffdf6; }
.contest-list-row.is-me { outline: 2px solid #166534; outline-offset: -2px; }
.cl-rank { width: 28px; font-weight: 800; color: #8a90a0; }
.contest-list-row.in-money .cl-rank { color: var(--gold-deep); }
.cl-name { flex: 1; font-weight: 600; color: var(--ink); }
.cl-you { background: #166534; color: #fff; font-size: .65rem; font-weight: 700; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; }
.cl-count { color: #8a90a0; font-size: .85rem; }
.cl-medal { color: var(--gold-deep); }

@media (max-width: 576px) {
  .contest-pool-amount { font-size: 2.2rem; }
  .cd-box { min-width: 50px; padding: 8px 10px; }
  .podium-col { width: 86px; }
  .contest-hero h1 { font-size: 1.5rem; }
}