:root {
  --comp-purple: #7657ff;
  --comp-pink: #f04482;
  --comp-lime: #c8f35a;
  --comp-ink: #11131a;
  --comp-muted: #697080;
  --comp-line: rgba(20, 22, 32, .1);
  --comp-panel: #fff;
  --comp-shadow: 0 20px 55px rgba(31, 20, 82, .12);
}

.competitions-page,
.comp-detail-wrap,
.create-competition-page,
.competition-fund-page {
  position: relative;
  isolation: isolate;
}

.competitions-page::before,
.comp-detail-wrap::before,
.create-competition-page::before,
.competition-fund-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(42vw, 520px);
  height: 360px;
  top: 10px;
  right: -80px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(118,87,255,.18), transparent 68%);
  filter: blur(8px);
}

.competitions-hero h1,
.comp-detail-header h1,
.create-competition-page h1,
.page-title { text-wrap: balance; }

.competitions-hero { position: relative; overflow: hidden; min-height: 280px; padding: 34px; border-radius: 30px; background: radial-gradient(circle at 82% 20%, rgba(200,243,90,.2), transparent 24%), linear-gradient(125deg, #171326 0%, #33205f 58%, #812655 100%); color: #fff; box-shadow: 0 24px 70px rgba(45,21,91,.2); }
.competitions-hero::after { content: ""; position:absolute; inset:auto -3% 18px 42%; height:70px; opacity:.25; background: repeating-linear-gradient(90deg, transparent 0 8px, #c8f35a 8px 11px, transparent 11px 19px); transform: skewX(-20deg); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.competitions-hero > div:first-child { position:relative; z-index:2; }
.competitions-hero h1 { color:#fff; max-width:640px; }
.competitions-hero p { color:rgba(255,255,255,.72); }
.competitions-hero .competitions-eyebrow { color:#d9ff7e; }
.competition-battle-coach { position:absolute; z-index:2; right:120px; bottom:7px; display:grid; grid-template-columns:148px 1fr; align-items:end; gap:8px; width:300px; color:rgba(255,255,255,.82); font-size:11px; line-height:1.35; }
.competition-battle-coach img { position:relative; z-index:1; width:148px; height:auto; filter:drop-shadow(0 12px 16px rgba(0,0,0,.35)); animation:comp-coach-float 4s ease-in-out infinite; }
.competition-battle-coach span { padding:10px 12px; border:1px solid rgba(255,255,255,.18); border-radius:14px 14px 14px 3px; background:rgba(9,7,22,.38); backdrop-filter:blur(9px); }
.competition-battle-coach b { display:block; color:#e7ff9b; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.competition-coach-orbit { position:absolute; width:98px; height:34px; left:0; bottom:9px; border:1px solid rgba(200,243,90,.5); border-radius:50%; transform:rotate(-14deg); }
@keyframes comp-coach-float { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-6px) rotate(2deg)} }

.competitions-eyebrow,
.eyebrow,
.competition-category {
  color: var(--comp-purple);
}

.create-competition-link,
.competition-submit,
.primary {
  background: linear-gradient(110deg, var(--comp-purple), var(--comp-pink));
  box-shadow: 0 12px 28px rgba(118, 87, 255, .22);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.create-competition-link:hover,
.competition-submit:hover,
.primary:hover { transform: translateY(-2px); filter: saturate(1.12) brightness(1.05); box-shadow: 0 17px 34px rgba(118,87,255,.28); }

.competition-grid { align-items: stretch; }
.competition-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--comp-line);
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(255,255,255,.98), rgba(248,247,255,.96));
  box-shadow: 0 8px 25px rgba(25, 22, 45, .05);
}
.competition-card::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  top: -88px;
  right: -45px;
  border-radius: 50%;
  background: conic-gradient(from 30deg, var(--comp-purple), var(--comp-pink), var(--comp-lime), var(--comp-purple));
  opacity: .16;
  transition: transform .35s ease, opacity .25s ease;
}
.competition-card:hover::before { transform: translate(-16px, 20px) rotate(25deg); opacity: .3; }
.competition-card-link { position: relative; z-index: 1; }
.competition-card h2 { letter-spacing: -.035em; }
.competition-category { background: linear-gradient(100deg, #eeeaff, #ffe8f1); }
.competition-meta { position: relative; z-index: 1; }
.competition-card .competition-creator { position: relative; z-index: 2; }
.competition-avatar { flex: 0 0 auto; width:36px; height:36px; box-shadow: 0 0 0 3px rgba(118,87,255,.12); }
.competitions-page .competition-avatar { width:36px !important; height:36px !important; }
.comp-host-link { display:inline-flex !important; align-items:center !important; width:auto !important; }
.comp-host-link .competition-avatar { display:block !important; flex:0 0 30px !important; width:30px !important; min-width:30px !important; height:30px !important; min-height:30px !important; border-radius:50% !important; }
.comp-host-link .competition-avatar img { display:block; width:100% !important; height:100% !important; border-radius:50%; object-fit:cover; }
.comp-detail-header .competition-avatar { width:34px; height:34px; }

.competition-empty { position: relative; overflow: hidden; border-style: solid; box-shadow: var(--comp-shadow); }
.competition-empty::after {
  content: "♪ )))  ♪  )))";
  position: absolute;
  right: 7%;
  bottom: 12%;
  color: rgba(118,87,255,.14);
  font-size: 36px;
  letter-spacing: .25em;
  transform: rotate(-8deg);
}

.comp-detail-wrap { max-width: 1120px; gap: 24px; padding-top: 38px; }
.comp-detail-header {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 30px;
  background: linear-gradient(125deg, #171326 0%, #30205d 52%, #8a285c 100%);
  color: #fff;
  box-shadow: 0 25px 70px rgba(45, 21, 91, .25);
}
.comp-detail-header::after {
  content: "";
  position: absolute;
  inset: auto -4% -42px 38%;
  height: 130px;
  opacity: .22;
  background: repeating-linear-gradient(90deg, transparent 0 10px, var(--comp-lime) 10px 13px, transparent 13px 24px);
  transform: skewX(-18deg);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.comp-detail-header > * { position: relative; z-index: 1; }
.comp-detail-header h1 { max-width: 760px; margin-top: 14px; font-size: clamp(34px, 5vw, 64px); letter-spacing: -.05em; }
.comp-detail-description { max-width: 720px; color: rgba(255,255,255,.78); font-size: 16px; }
.comp-host-link { color: #fff; }
.comp-host-link small { color: rgba(255,255,255,.62); }
.comp-detail-header .competition-category { background: rgba(255,255,255,.14); color: #e3dfff; }
.comp-detail-stats { border: 1px solid rgba(255,255,255,.15); background: rgba(10,7,24,.34); backdrop-filter: blur(12px); }
.comp-detail-stats small { color: rgba(255,255,255,.62); }
.competition-detail-coach { grid-column: 1 / -1; display:flex; align-items:center; gap:10px; width:fit-content; margin-top:4px; padding:7px 14px 7px 8px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(10,7,24,.3); }
.competition-detail-coach img { width:56px; height:54px; object-fit:contain; filter:drop-shadow(0 7px 10px rgba(0,0,0,.25)); }
.competition-detail-coach div { display:grid; gap:2px; }
.competition-detail-coach strong { font-size:12px; color:#edffad; }
.competition-detail-coach small { color:rgba(255,255,255,.62); font-size:11px; }
.comp-detail-card { border: 1px solid var(--comp-line); border-radius: 24px; background: var(--comp-panel); box-shadow: 0 8px 28px rgba(31,20,82,.055); }
.comp-detail-card h2 { letter-spacing: -.025em; }
.comp-prize-list li { background: linear-gradient(100deg, #f7f4ff, #fff2f7); }
.comp-entry-card { min-width: 0; border-radius: 18px; background: linear-gradient(145deg, #fff, #f7f6ff); }
.comp-entry-card h3, .comp-entry-card p { overflow-wrap: anywhere; }
.comp-entry-card video, .comp-entry-card audio { display: block; max-width: 100%; }
.comp-entry-form input, .comp-entry-form textarea { min-width: 0; }
.competition-actions { flex-wrap: wrap; }
.competition-action { min-height: 40px; transition: transform .2s ease, background .2s ease; }
.competition-action:hover { transform: translateY(-1px); }

.create-competition-page > div,
.competition-fund-page > div { position: relative; z-index: 1; }
.competition-form, .create-competition-page .card { box-shadow: var(--comp-shadow); }
.competition-form-row { min-width: 0; }

@media (max-width: 760px) {
  .competitions-page { width: min(100% - 28px, 620px); padding-top: 28px; }
  .competitions-hero { gap: 22px; margin-bottom: 26px; }
  .competitions-hero h1 { font-size: clamp(42px, 13vw, 60px); }
  .competitions-hero { min-height:0; padding:25px 21px 20px; border-radius:24px; }
  .competitions-hero::after { left:15%; bottom:95px; }
  .competition-battle-coach { position:relative; right:auto; bottom:auto; width:min(100%,300px); margin:7px 0 10px auto; grid-template-columns:140px 1fr; }
  .competition-battle-coach img { width:140px; }
  .competition-card { padding: 19px; border-radius: 22px; }
  .comp-detail-wrap { width: min(100% - 24px, 620px); padding: 18px 0 70px; }
  .comp-detail-header { grid-template-columns: 1fr; padding: 25px 21px 30px; border-radius: 24px; }
  .comp-detail-header h1 { font-size: clamp(34px, 11vw, 52px); }
  .competition-detail-coach { grid-column:auto; max-width:100%; }
  .competition-detail-coach small { max-width:180px; }
  .comp-detail-stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; padding: 13px; }
  .comp-detail-stats div { display: grid; gap: 3px; }
  .comp-detail-stats strong { font-size: 13px; overflow-wrap: anywhere; }
  .comp-detail-card { padding: 18px; border-radius: 20px; }
  .comp-entry-grid { grid-template-columns: 1fr; }
  .competition-form-row { grid-template-columns: 1fr !important; }
  .competition-submit, .competition-cancel { width: 100%; min-height: 48px; }
}

.theme-dark .competition-card,
.theme-dark .comp-detail-card,
.theme-dark .comp-entry-card { border-color: rgba(255,255,255,.1); background: linear-gradient(145deg, #1d1b29, #171722); }
.theme-dark .competition-card { box-shadow: 0 12px 35px rgba(0,0,0,.24); }
.theme-dark .competition-category { background: linear-gradient(100deg, #2b2356, #482339); color: #d5cdff; }
.theme-dark .comp-prize-list li { background: linear-gradient(100deg, #27213f, #38202f); }
.theme-dark .comp-detail-card { color: #f5f3fa; }
.theme-dark .comp-entry-card p, .theme-dark .comp-muted { color: #a8a5b5; }
.theme-dark .competition-empty { border-color: rgba(255,255,255,.16); }

/* The illustration has its own grid column, so it never covers the copy or CTA. */
.competitions-page .competitions-hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:28px; padding:32px 38px; background:#30285d; }
.competitions-page .competitions-hero::after,.competitions-page::before { display:none; }
.competitions-page .competitions-hero h1 { font-family:inherit; font-weight:850; font-size:clamp(32px,4vw,58px); line-height:1.05; letter-spacing:-.045em; }
.competitions-page .competitions-hero p { color:#ded8ef; font-size:16px; line-height:1.65; margin:18px 0 22px; }
.competitions-page .competitions-hero .create-competition-link { position:relative; z-index:3; width:auto; min-height:48px; background:#d8f58b; color:#25203f; box-shadow:none; }
.competitions-page .competition-battle-coach { position:relative; inset:auto; display:block; width:100%; margin:0; min-width:0; }
.competitions-page .competition-battle-coach img { display:block; width:100%; height:auto; max-height:370px; object-fit:contain; border-radius:24px; animation:none; filter:none; }
@media(max-width:650px) {
 .competitions-page .competitions-hero { grid-template-columns:minmax(0,1fr); padding:26px 22px; gap:16px; }
 .competitions-page .competitions-hero h1 { font-size:38px; }
 .competitions-page .competition-battle-coach { max-width:280px; margin:auto; }
}
@media(prefers-reduced-motion:reduce) { .competition-battle-coach img { animation:none; } }

/* Detail hero shares the competition artwork; stats remain a separate readable row. */
.comp-detail-wrap::before,.comp-detail-wrap .comp-detail-header::after { display:none; }
.comp-detail-wrap .comp-detail-header { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); grid-template-areas:"copy art" "stats stats"; align-items:center; background:#30285d; gap:24px; }
.comp-detail-header > div:first-child { grid-area:copy; min-width:0; }
.comp-detail-header h1 { font-size:clamp(30px,4vw,54px); overflow-wrap:anywhere; line-height:1.1; }
.comp-detail-header .comp-detail-description { color:#ded8ef; white-space:normal; overflow-wrap:anywhere; }
.comp-detail-header .competition-detail-coach { grid-area:art; display:block; width:100%; min-width:0; margin:0; padding:0; border:0; border-radius:24px; background:none; }
.comp-detail-header .competition-detail-coach img { display:block; width:100%; height:auto; max-height:340px; object-fit:contain; border-radius:24px; filter:none; }
.comp-detail-header .comp-detail-stats { grid-area:stats; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.comp-detail-header .comp-detail-stats > div { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.comp-detail-header .comp-detail-stats strong { overflow-wrap:anywhere; }
.comp-detail-header .comp-host-link { max-width:100%; gap:10px; }
.comp-detail-header .comp-host-link > span:last-child { min-width:0; overflow-wrap:anywhere; }
.comp-detail-header .comp-host-link .competition-avatar { overflow:hidden; display:grid !important; place-items:center; max-width:30px; max-height:30px; background:#514579; color:#fff; font-size:11px; }
.comp-detail-header .comp-host-link .competition-avatar img { max-width:30px; max-height:30px; }
.comp-detail-header .comp-host-link small { color:#d0c8e3; }
@media(max-width:720px) {
 .comp-detail-wrap .comp-detail-header { grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "art" "stats"; gap:18px; }
 .comp-detail-header .competition-detail-coach { max-width:260px; justify-self:center; }
 .comp-detail-header .comp-detail-stats { gap:10px; }
}