@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

:root {
  --candy-bg-top: #0d0005;
  --candy-bg-bottom: #650080;
  --candy-gradient: linear-gradient(180deg, var(--candy-bg-top) 0%, #2c0038 35%, var(--candy-bg-bottom) 100%);
  --badge-gradient: linear-gradient(135deg, #4aa3ff, #d149ff);
  --badge-gradient-locked: linear-gradient(135deg, #344353, #5d2d6d);
  --badge-shadow: 0 6px 18px -4px rgba(0,0,0,.6), 0 0 14px rgba(147,51,234,.6);
  --neon-outline: 0 0 0 2px rgba(255,255,255,.3), 0 0 12px rgba(236,72,153,.8), 0 0 28px rgba(99,46,185,.6);
  --text-glow: 0 2px 16px #7b2cbf, 0 0 8px #38bdf8;
  --curve-speed: 140s;
}

html,body {height:100%; margin:0; padding:0; overflow-x:hidden; background: var(--candy-gradient);} 
body.no-select {user-select:none; -webkit-user-select:none;}

.campaign-info-box {position:relative; margin:0 auto; margin-top:120px; max-width:780px; padding:1.1rem 2rem; font-family:'Lilita One'; font-size:1.3rem; text-align:center; color:#fff; background:linear-gradient(135deg,#2b1f46,#3d1d52,#471c62); border:2px solid rgba(255,255,255,.18); border-radius:22px; box-shadow:0 6px 22px -6px rgba(0,0,0,.8),0 0 18px rgba(123,44,191,.45); letter-spacing:.04em; text-shadow:0 2px 8px #7b2cbf,0 0 6px #38bdf8;}
.campaign-lock-icon {color:#fff; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); padding:.45rem .8rem; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.25),0 0 16px rgba(236,72,153,.55);}

.level-map-wrapper {position:relative; width:100%; max-width:1100px; margin:0 auto; padding:140px 2rem 6rem;  box-sizing:border-box;}
.level-map {position:relative; display:flex; flex-direction:column; gap:1.2rem; width:100%;}

.back-modes-btn {margin-top:1rem; text-decoration:none; font-family:'Lilita One'; font-size:1.1rem; background:linear-gradient(90deg,#632eb9,#7b2cbf); color:#fff; padding:.85rem 1.6rem; border-radius:2em; letter-spacing:.05em; box-shadow:0 0 18px rgba(56,189,248,.7),0 0 8px rgba(236,72,153,.8); transition:.35s;}
.back-modes-btn:hover {transform:translateY(-4px) scale(1.05); background:linear-gradient(90deg,#ec4899,#8f199e);}

.level-row {position:relative; width:100%; height:95px;}
.level-row-inner {position:absolute; top:0; left:0; right:0; height:100%; display:flex; align-items:center;}
.level-row-inner.left {justify-content:flex-start;}
.level-row-inner.right {justify-content:flex-end;}

.level-node {--size:84px; position:relative; width:var(--size); height:var(--size); display:flex; align-items:center; justify-content:center; font-family:'Lilita One'; font-size:2.2rem; color:#fff; text-shadow:0 3px 6px rgba(0,0,0,.5); text-decoration:none; border-radius:50%; filter:drop-shadow(0 3px 10px rgba(0,0,0,.55)); cursor:pointer; transition:.45s cubic-bezier(.65,.05,.36,1); z-index:5;} 
.level-node, .level-node * { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.level-node .level-node-hit { pointer-events: none; }
.level-node::before, .level-node::after {content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;}
.level-node::before {background:var(--badge-gradient); box-shadow:var(--badge-shadow);}
.level-node::after {background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(255,255,255,.25) 35%, rgba(255,255,255,0) 70%); mix-blend-mode:overlay; opacity:.7;}
.level-node.locked::before {background:linear-gradient(135deg,#1d2330,#392c46); filter:grayscale(.35) brightness(.6) contrast(.9); box-shadow:0 2px 10px -2px rgba(0,0,0,.8),0 0 6px rgba(40,40,60,.5);} 
.level-node.locked {cursor:default; opacity:.8;}
.level-node.locked .level-badge-number {opacity:.55; filter:drop-shadow(0 0 2px rgba(0,0,0,.8));}
.mini-lock {position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); background:linear-gradient(145deg,#312b40,#141820); border:1px solid rgba(255,255,255,.15); width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:10px; box-shadow:0 4px 10px -2px rgba(0,0,0,.7),0 0 8px rgba(123,44,191,.4); pointer-events:none;}
.mini-lock svg {opacity:.9; pointer-events:none;}

.level-node.unlocked:hover {transform:translateY(-10px) rotate(-4deg) scale(1.1); box-shadow:var(--neon-outline);} 
.level-node.current {animation:pulse-current 2.2s ease-in-out infinite; will-change: transform;}
.level-node.completed::before {background:linear-gradient(135deg,#32ffc7,#6a00ff);} 
.level-node.completed {outline:3px solid rgba(255,255,255,.35) !important; outline-offset:4px !important;}
.level-node.completed .completed-check {position:absolute; bottom:-6px; right:-6px; background:#32ffc7; color:#051622; font-size:.9rem; padding:.3rem .45rem .35rem; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.6),0 0 14px rgba(50,255,199,.85); font-family:'Audiowide'; pointer-events:none; z-index:10;}
.milestone-star {position:absolute; top:-8px; left:50%; transform:translateX(-50%); font-size:1.1rem; filter:drop-shadow(0 0 6px rgba(255,215,0,.9)) drop-shadow(0 0 12px rgba(255,170,0,.6)); color:#ffe56d; pointer-events:none; will-change:auto;}
@keyframes twinkle {0%,100%{transform:translateX(-50%) scale(1);} 50%{transform:translateX(-50%) scale(1.25);} }
.current-pulse {position:absolute; inset:-8px; border-radius:50%; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%); animation:currentPulse 1.8s ease-in-out infinite; mix-blend-mode:overlay; pointer-events:none; will-change: transform, opacity;}
@keyframes currentPulse {0%,100%{transform:scale(.9); opacity:.65;} 50%{transform:scale(1.25); opacity:1;}}

@keyframes pulse-current {0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-6px) scale(1.08);} }

.level-badge-number {position:relative; z-index:5; filter:drop-shadow(0 4px 8px rgba(236,72,153,.6)) drop-shadow(0 0 6px rgba(123,44,191,.5)); pointer-events:none;}
.lock-overlay {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(0,0,0,.25); backdrop-filter:blur(3px); border-radius:50%; font-size:1.4rem;}

.connector {position:absolute; left:0; right:0; top:-50px; height:100px; pointer-events:none;}
.connector svg {width:100%; height:100%; overflow:visible;}
.connector path {fill:none; stroke:#ffffff; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:8 12; opacity:.78; filter:drop-shadow(0 0 3px rgba(255,255,255,.35)) drop-shadow(0 0 5px rgba(236,72,153,.2)); animation:dashFlow 15s linear infinite;}
.connector.completed path {stroke:#32ffc7; opacity:.88; filter:drop-shadow(0 0 5px rgba(50,255,199,.5)) drop-shadow(0 0 8px rgba(123,44,191,.35)); animation:dashFlow 15s linear infinite;}
@keyframes dashFlow {from{stroke-dashoffset:20;}to{stroke-dashoffset:0;}}

.separator-dashed {width:100%; max-width:1000px; margin:40px auto 10px; height:22px; position:relative; display:flex; align-items:center; justify-content:center;}
.separator-dashed::before {content:""; position:absolute; left:4%; right:4%; top:50%; height:0; border-top:3px dashed rgba(255,255,255,.55); filter:drop-shadow(0 0 6px rgba(236,72,153,.65)) drop-shadow(0 0 10px rgba(123,44,191,.6));}
.separator-dashed::after {content:"★"; position:relative; z-index:2; font-size:1.1rem; color:#ffe56d; padding:.2rem .9rem; background:radial-gradient(circle at 50% 50%, rgba(60,0,80,.9), rgba(20,0,30,.4)); border:2px solid rgba(255,255,255,.15); border-radius:40px; box-shadow:0 0 10px rgba(236,72,153,.6),0 0 18px rgba(123,44,191,.5); letter-spacing:2px; text-shadow:0 0 6px rgba(255,215,0,.9), 0 0 10px rgba(255,170,0,.6);} 

.mode-image.survival-wide {height:260px; max-width:820px; width:100%; border-radius:26px;}
.mode-image.survival-wide .overlay {padding:1.6rem 2.2rem;}
.mode-image.survival-wide .overlay-title h2 {font-size:2.6rem;}
.mode-image.survival-wide .button {width:50%;}
@media (max-width:880px){
  .mode-image.survival-wide {height:240px;}
  .mode-image.survival-wide .overlay-title h2 {font-size:2.2rem;}
}
@media (max-width:640px){
  .mode-image.survival-wide {height:210px;}
  .mode-image.survival-wide .overlay {padding:1.2rem 1.4rem;}
  .mode-image.survival-wide .button {width:65%; font-size:1.2rem;}
}
@media (max-width:460px){
  .mode-image.survival-wide {height:190px;}
  .mode-image.survival-wide .overlay-title h2 {font-size:1.9rem;}
  .mode-image.survival-wide .button {width:70%; font-size:1.1rem;}
}

.end-marker {position:relative; margin:2rem auto 0; font-size:3rem; filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(236,72,153,.7)); animation:flagwave 4s ease-in-out infinite; will-change: transform;}
@keyframes flagwave {0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }

body::after {content:""; position:fixed; left:0; top:0; width:4px; height:0; background:linear-gradient(180deg,#ec4899,#8f199e); z-index:200; box-shadow:0 0 10px rgba(236,72,153,.8); animation:growHeight linear both; animation-timeline:scroll(Y);}

@supports not (animation-timeline: scroll(Y)) { body::after{display:none;} }

@media (max-width:900px){
  .campaign-title{font-size:2rem;}
  .campaign-top-bar{padding:.9rem .6rem .6rem; top:60px;} 
  .level-row{height:78px;}
  .level-node{--size:70px; font-size:1.9rem;}
}
@media (max-width:620px){
  .level-map-wrapper{padding:1.4rem 1rem 5rem;}
  .level-node{--size:64px; font-size:1.7rem;}
  .connector-wrapper{height:64px;}
  .campaign-locked-overlay p{font-size:1.2rem;}
}
@media (max-width:430px){
  .level-node{--size:58px; font-size:1.45rem;}
  .level-row{height:70px;}
  .connector-wrapper{height:54px;}
  .campaign-title{font-size:1.7rem;}
}

::-webkit-scrollbar{width:10px;}::-webkit-scrollbar-track{background:#1a0b28;}::-webkit-scrollbar-thumb{background:linear-gradient(#632eb9,#8f199e); border-radius:8px;}