:root{
  --bg1:#FCE9FF;
  --bg2:#E6F4FF;
  --ink:#3B2A4A;
  --ink-soft:#6B5C7C;

  --pink-base:#FFE1F0;
  --pink-deep:#D6336C;

  --blue-base:#DFF4FF;
  --blue-deep:#0284C7;

  --purple-base:#F0E4FF;
  --purple-deep:#7C3AED;

  --gold:#F4C542;
  --gold-deep:#C9971E;
  --silver:#C7CEDA;
  --bronze:#D99B6C;

  --glass-fill: rgba(255,255,255,0.42);
  --glass-fill-strong: rgba(255,255,255,0.62);
  --glass-border: rgba(255,255,255,0.75);
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  font-family:'Quicksand', sans-serif;
  background:
    radial-gradient(circle at 12% 8%, #FFE3F3 0%, transparent 40%),
    radial-gradient(circle at 88% 12%, #DDF2FF 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, #EFE1FF 0%, transparent 50%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:64px 20px;
  overflow-x:hidden;
  position:relative;
}

.ambient{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.ambient span{
  position:absolute;
  border-radius:50%;
  filter:blur(1px);
  opacity:.5;
  animation:drift 14s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{ transform:translateY(0) translateX(0) rotate(0deg); }
  50%{ transform:translateY(-24px) translateX(10px) rotate(12deg); }
}

/* ============ LANGUAGE TOGGLE ============ */
.lang-toggle{
  position:relative;
  z-index:2;
  display:flex;
  gap:4px;
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);
  padding:4px;
  border-radius:999px;
  margin-bottom:20px;
}
.lang-btn{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.04em;
  border:none;
  background:transparent;
  color:var(--ink-soft);
  padding:7px 18px;
  border-radius:999px;
  cursor:pointer;
  transition: all .25s ease;
}
.lang-btn.active{
  background:linear-gradient(100deg, var(--pink-deep), var(--purple-deep));
  color:#fff;
  box-shadow:0 4px 12px rgba(140,60,150,0.3);
}

.eyebrow{
  position:relative; z-index:1;
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:13px;
  color:var(--ink-soft);
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  padding:8px 18px;
  border-radius:999px;
  backdrop-filter:blur(10px);
  margin-bottom:18px;
}

h1.title{
  position:relative; z-index:1;
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:clamp(32px, 5vw, 52px);
  text-align:center;
  margin:0 0 8px 0;
  background:linear-gradient(100deg, var(--pink-deep), var(--purple-deep) 55%, var(--blue-deep));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

p.sub{
  position:relative; z-index:1;
  text-align:center;
  color:var(--ink-soft);
  font-weight:600;
  margin:0 0 44px 0;
  font-size:15px;
}

/* ============ CAROUSEL ============ */
.stage{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1100px;
  height:540px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1400px;
  touch-action:pan-y;
  cursor:grab;
}
.stage.grabbing{cursor:grabbing;}

.track{ position:relative; width:100%; height:100%; }

.card{
  position:absolute;
  top:50%; left:50%;
  width:340px;
  min-height:470px;
  border-radius:32px;
  padding:28px 26px 26px;
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    0 8px 30px rgba(90,50,110,0.14),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition: transform .55s cubic-bezier(.22,.9,.3,1), opacity .55s ease, filter .55s ease;
  user-select:none;
}

.card.theme-pink{ background:linear-gradient(160deg, var(--pink-base), var(--glass-fill)); }
.card.theme-blue{ background:linear-gradient(160deg, var(--blue-base), var(--glass-fill)); }

/* Top Prize card: extra poppy gradient + animated shine */
.card.theme-purple{
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,0.55), transparent 45%),
    linear-gradient(150deg, #C9A6FF 0%, #E7A8E0 42%, #FFC9A8 78%, #FFE29E 100%);
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:
    0 14px 38px rgba(140,60,190,0.35),
    0 0 0 1px rgba(255,255,255,0.4) inset,
    inset 0 1px 0 rgba(255,255,255,0.9);
}
.card.theme-purple::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:32px;
  overflow:hidden;
  background:linear-gradient(
    115deg,
    transparent 20%,
    rgba(255,255,255,0.65) 34%,
    rgba(255,255,255,0.15) 42%,
    transparent 55%
  );
  background-size:220% 220%;
  animation: shine-sweep 3.6s ease-in-out infinite;
  pointer-events:none;
}
.card.theme-purple h2{
  background:linear-gradient(95deg, #7C2FD1, #C0389A);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.card.theme-purple .rank-row{
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.85);
}
.card.theme-purple .card-icon-badge{
  background:linear-gradient(150deg, #FFD97A, #F472B6 60%, #A855F7);
  box-shadow:0 10px 20px rgba(180,60,150,0.4), inset 0 1px 0 rgba(255,255,255,0.7);
}
.card.theme-purple .rank-row.gold{
  background:linear-gradient(100deg, rgba(255,241,196,0.85), rgba(255,255,255,0.6));
  box-shadow:0 4px 16px rgba(244,197,66,0.45);
}

@keyframes shine-sweep{
  0%{ background-position:130% -30%; opacity:0; }
  15%{ opacity:1; }
  45%{ background-position:-30% 130%; opacity:1; }
  60%{ opacity:0; }
  100%{ background-position:-30% 130%; opacity:0; }
}

.card-icon-badge{
  width:58px; height:58px;
  border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
  position:relative;
  background:linear-gradient(150deg, #B48CFB, #F08FCB);
  box-shadow:0 8px 16px rgba(160,80,180,0.28), inset 0 1px 0 rgba(255,255,255,0.5);
  animation: badgewiggle 4.5s ease-in-out infinite;
}
.card-icon-badge svg{ width:32px; height:32px; }
.card-icon-badge .sparkle{
  position:absolute;
  font-size:14px;
  top:-8px; right:-8px;
  animation: sparkle-pop 2.4s ease-in-out infinite;
}

@keyframes badgewiggle{
  0%,100%{ transform:rotate(-3deg); }
  50%{ transform:rotate(3deg); }
}
@keyframes sparkle-pop{
  0%,100%{ transform:scale(0.85) rotate(0deg); opacity:.75; }
  50%{ transform:scale(1.15) rotate(15deg); opacity:1; }
}

.card h2{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:21px;
  margin:0 0 4px 0;
}
.theme-pink h2{ color:var(--pink-deep); }
.theme-blue h2{ color:var(--blue-deep); }
.theme-purple h2{ color:var(--purple-deep); }

.card .tagline{
  font-size:13px;
  color:var(--ink-soft);
  font-weight:600;
  margin:0 0 20px 0;
}

.rank-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  background:var(--glass-fill-strong);
  border:1px solid rgba(255,255,255,0.7);
  margin-bottom:10px;
  position:relative;
  overflow:hidden;
}
.rank-row.gold{ box-shadow:0 4px 14px rgba(244,197,66,0.35); }

.medal{
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  margin-top:1px;
  position:relative;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.5), 0 3px 6px rgba(0,0,0,0.15);
}
.medal svg{ width:20px; height:20px; }
.medal .num{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:15px;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,0.15);
}
.medal.m1{ background:radial-gradient(circle at 32% 28%, #FFEDA8, var(--gold) 55%, var(--gold-deep)); }
.medal.m2{ background:radial-gradient(circle at 32% 28%, #F3F6FA, var(--silver) 55%, #9AA4B2); }
.medal.m3{ background:radial-gradient(circle at 32% 28%, #F3D4B8, var(--bronze) 55%, #B06A3C); }

.rank-info{ flex:1; min-width:0; }
.rank-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:.75;
  margin-bottom:1px;
}
.studio-name{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:15.5px;
  color:var(--ink);
  line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.reward-text{
  font-size:12px;
  font-weight:600;
  color:var(--ink-soft);
  margin-top:2px;
  line-height:1.25;
}
.reward-text b{ color:var(--ink); font-weight:700; }

.floating-coin{
  position:absolute;
  z-index:0;
  filter:drop-shadow(0 3px 6px rgba(196,145,20,0.35));
  animation:coinfloat 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes coinfloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(10deg); }
}

.dots{ position:relative; z-index:1; display:flex; gap:10px; margin-top:28px; }
.dot{
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(120,90,140,0.25);
  cursor:pointer;
  transition: all .35s ease;
  border:none;
  padding:0;
}
.dot.active{ width:30px; border-radius:6px; }
.dot.active[data-theme="pink"]{ background:var(--pink-deep); }
.dot.active[data-theme="blue"]{ background:var(--blue-deep); }
.dot.active[data-theme="purple"]{ background:var(--purple-deep); }

.arrow{
  position:absolute;
  top:50%; transform:translateY(-50%);
  z-index:2;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--glass-fill-strong);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(90,50,110,0.14);
  transition: transform .2s ease, background .2s ease;
}
.arrow:hover{ transform:translateY(-50%) scale(1.08); background:#fff; }
.arrow.left{ left:6px; }
.arrow.right{ right:6px; }
.arrow svg{ width:18px; height:18px; }

/* ============ DISCOVER MORE WINNERS ============ */
.more-section{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1100px;
  margin-top:70px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.more-eyebrow{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--ink-soft);
  background:var(--glass-fill);
  border:1px solid var(--glass-border);
  padding:7px 16px;
  border-radius:999px;
  backdrop-filter:blur(10px);
  margin-bottom:12px;
}

h2.more-title{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:clamp(26px, 4vw, 38px);
  text-align:center;
  margin:0 0 6px 0;
  background:linear-gradient(100deg, var(--gold-deep), var(--blue-deep));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

p.more-sub{
  text-align:center;
  color:var(--ink-soft);
  font-weight:600;
  margin:0 0 34px 0;
  font-size:14.5px;
}

.boxes-grid{
  width:100%;
  display:flex;
  gap:26px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
}

.reward-box{
  flex:1 1 400px;
  max-width:480px;
  border-radius:30px;
  padding:22px 20px 24px;
  border:1px solid var(--glass-border);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 32px rgba(90,50,110,0.14), inset 0 1px 0 rgba(255,255,255,0.7);
}

.reward-box.yellow{
  background:linear-gradient(165deg, #FFF3D6, rgba(255,255,255,0.5) 60%);
  border:1px solid rgba(255,220,140,0.8);
}
.reward-box.blue{
  background:linear-gradient(165deg, #DBF1FF, rgba(255,255,255,0.5) 60%);
  border:1px solid rgba(150,210,255,0.8);
}

.box-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.box-icon{
  width:44px; height:44px;
  border-radius:16px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);
}
.box-icon svg{ width:24px; height:24px; }
.reward-box.yellow .box-icon{ background:linear-gradient(150deg, #FFD97A, #F4A93A); }
.reward-box.blue .box-icon{ background:linear-gradient(150deg, #8FE0FF, #3FA9E8); }

.box-heading{ flex:1; min-width:0; }
.box-heading h3{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:18px;
  margin:0;
}
.reward-box.yellow h3{ color:#B4791A; }
.reward-box.blue h3{ color:var(--blue-deep); }

.box-count{
  font-size:11px;
  font-weight:700;
  color:var(--ink-soft);
  opacity:.8;
}

.reward-list{
  max-height:440px;
  overflow-y:auto;
  padding-right:6px;
  scrollbar-width:thin;
}
.reward-box.yellow .reward-list{ scrollbar-color:#F0B94A transparent; }
.reward-box.blue .reward-list{ scrollbar-color:#5EBFEF transparent; }
.reward-list::-webkit-scrollbar{ width:6px; }
.reward-list::-webkit-scrollbar-track{ background:transparent; }
.reward-box.yellow .reward-list::-webkit-scrollbar-thumb{ background:#F0B94A; border-radius:6px; }
.reward-box.blue .reward-list::-webkit-scrollbar-thumb{ background:#5EBFEF; border-radius:6px; }

.reward-list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 13px;
  border-radius:14px;
  background:rgba(255,255,255,0.55);
  margin-bottom:8px;
}
.reward-list-row:last-child{ margin-bottom:0; }
.rlr-name{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:13.5px;
  color:var(--ink);
  white-space:nowrap;
  letter-spacing:.02em;
}
.rlr-reward{
  font-size:11.5px;
  font-weight:600;
  color:var(--ink-soft);
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:58%;
}

@media (max-width: 720px){
  .stage{ height:580px; }
  .card{ width:280px; min-height:450px; padding:22px 18px 20px; }
  .arrow{ display:none; }
  .reward-box{ flex:1 1 100%; max-width:100%; }
}