:root{
  --cyan:#13c9df;
  --pink:#ff3d92;
  --purple:#8e52ff;
  --orange:#ffad2e;
  --mint:#18d3bd;
  --gold:#ffc34a;
  --ink:#1d1d24;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;background:transparent}
body{color:#fff;overflow:hidden}

/*
IMPORTANT
---------
These are the real HUD layers only.
The large white/purple rounded frames seen in MCAStar marketing screenshots
are showcase/magnification frames and are intentionally not reproduced here.
*/

.overlay-root{
  position:relative;
  width:100%;
  height:100%;
  background:transparent;
}

.overlay-stage{
  position:relative;
  transform-origin:center;
  background:transparent;
}

.overlay-stage--wide{width:min(96vw,1100px)}
.overlay-stage--compact{width:min(92vw,390px)}
.overlay-stage--solo{width:min(92vw,720px)}

.gift-icon{
  width:58px;
  height:58px;
  object-fit:contain;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.16));
}

/* =========================================================
   PK TEAM
   ========================================================= */
.pk-hud{
  width:100%;
  padding:8px 4px 4px;
  background:transparent;
}

.pk-topline{
  display:grid;
  grid-template-columns:1fr 230px 1fr;
  gap:18px;
  align-items:end;
}

.team-block{
  text-align:center;
  color:#fff;
  text-shadow:0 2px 5px rgba(0,0,0,.56);
}

.team-name{
  font-size:32px;
  line-height:1.1;
  margin-bottom:8px;
}
.team-avatar{width:58px;height:58px;margin:0 auto 7px;border:3px solid rgba(255,255,255,.88);border-radius:50%;object-fit:cover;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.team-supporters{display:block;margin-top:5px;color:rgba(255,255,255,.82);font-weight:700}
.pk-round{margin-bottom:5px;color:#bffcf8;font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 2px 5px rgba(0,0,0,.56)}

.gift-strip{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-height:62px;
}

.pk-center{text-align:center}

.streak{
  font-size:28px;
  line-height:1;
  margin-bottom:12px;
  color:#fff;
  text-shadow:0 2px 5px rgba(0,0,0,.56);
}

.streak span{color:#a8fff6}

.timer-big{
  font-size:55px;
  line-height:1;
  font-weight:800;
  letter-spacing:2px;
  text-shadow:0 2px 5px rgba(0,0,0,.62);
}

.duel-bar{
  --left:50%;
  position:relative;
  margin-top:22px;
  height:48px;
  border-radius:24px;
  display:grid;
  grid-template-columns:var(--left) calc(100% - var(--left));
  overflow:hidden;
  box-shadow:0 3px 9px rgba(0,0,0,.12);
}

.duel-side{
  display:flex;
  align-items:center;
  font-size:28px;
  color:#202027;
}

.duel-left{
  background:linear-gradient(90deg,#10abc8,#17dfe7);
  padding-left:25px;
}

.duel-right{
  background:linear-gradient(90deg,#ff64bd,#ff2388);
  justify-content:flex-end;
  padding-right:25px;
}

.duel-chevron{
  position:absolute;
  left:calc(var(--left) - 92px);
  top:0;
  width:184px;
  height:100%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.06) 0 22px,
      rgba(255,255,255,.26) 22px 44px
    );
  clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%,12% 50%);
  pointer-events:none;
}

/* =========================================================
   SOLO / FREEDOM
   Actual dark gameplay panel retained; showcase frame removed.
   ========================================================= */
.solo-panel{
  position:relative;
  width:100%;
  border-radius:25px;
  background:rgba(67,67,70,.60);
  overflow:hidden;
  text-align:center;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.solo-name{
  width:min(245px,46%);
  margin:auto;
  padding:15px 10px 8px;
  border-radius:0 0 18px 18px;
  background:rgba(55,55,58,.70);
  font-size:28px;
}
.solo-fever{position:absolute;right:18px;top:16px;padding:6px 10px;border-radius:999px;background:linear-gradient(135deg,#ff6b31,#ff258d);font-size:13px;font-weight:900;letter-spacing:.08em;box-shadow:0 0 24px rgba(255,60,110,.4)}

.solo-timer{
  font-size:64px;
  line-height:1;
  font-weight:800;
  padding:22px 20px 20px;
  text-shadow:0 2px 4px rgba(0,0,0,.18);
}

.solo-scorebar{
  height:54px;
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative;
  align-items:center;
  background:linear-gradient(90deg,#ff2088,#ff57b2);
  font-size:28px;
  color:#2c1530;
}

.solo-scorebar>span{
  position:relative;
  z-index:2;
}

.solo-scorebar span:first-child{
  text-align:left;
  padding-left:34px;
}

.solo-scorebar span:last-child{
  text-align:right;
  padding-right:34px;
}

.pink-arrows{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:45%;
  height:100%;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.18) 0 22px,
      transparent 22px 44px
    );
  clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%,12% 50%);
}
.solo-stages{display:flex;gap:8px;justify-content:center;padding:11px 14px 14px;background:rgba(20,20,24,.54)}
.solo-stages span{padding:5px 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:rgba(255,255,255,.66);font-size:12px;font-weight:800}
.solo-stages span.is-done{border-color:#44f0c3;background:rgba(68,240,195,.16);color:#aaffeb}

/* =========================================================
   RANKING
   Purple showcase outline removed.
   ========================================================= */
.rank-shell{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  background:rgba(26,26,29,.92);
  box-shadow:0 10px 28px rgba(0,0,0,.24);
  padding:48px 18px 18px;
}

.rank-shell:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 12% 6%,rgba(255,255,255,.14),transparent 35%);
  pointer-events:none;
}

.rank-head{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 16px;
  border-radius:9px 9px 0 0;
  background:linear-gradient(90deg,#ffe0a5,#ffb940);
  color:#b65b00;
  font-weight:800;
  font-size:18px;
}

.trophy{
  font-size:34px;
  margin-top:-34px;
}

.rank-list{
  position:relative;
  background:linear-gradient(180deg,#422b20,#271d19);
  padding:5px 10px 8px;
}

.rank-row{
  display:grid;
  grid-template-columns:38px 1fr 110px;
  align-items:center;
  min-height:47px;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:17px;
}

.rank-row.is-current{
  background:linear-gradient(90deg,#d49c4a,#bd7f30);
  border-radius:7px;
}

.rank-num{text-align:center}
.rank-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rank-score{text-align:right}
.rank-score small{
  display:block;
  font-size:10px;
  color:#d6d0ca;
}
.rank-score b{font-size:21px}

/* =========================================================
   MULTI PK
   ========================================================= */
.multi-hud{
  width:100%;
  padding:4px;
  background:transparent;
}

.multi-grid{
  display:grid;
  grid-template-columns:repeat(var(--count),minmax(0,1fr));
  gap:10px;
}

.multi-col{min-width:0}
.multi-col.is-leader{filter:drop-shadow(0 0 14px rgba(255,195,74,.78));transform:translateY(-5px)}
.multi-col.is-leader .creator-chip:after{content:"♛";margin-left:auto;color:#ffe4a6}

.creator-chip{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 7px 7px;
  padding:5px 13px;
  border-radius:22px;
  background:var(--lane);
  font-size:19px;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}

.creator-chip img{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  background:#eee;
}

.lane{
  position:relative;
  height:44px;
  overflow:hidden;
  border-radius:5px;
  background:rgba(255,255,255,.72);
}

.lane:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--fill);
  background:linear-gradient(90deg,var(--lane),rgba(255,255,255,.32));
  box-shadow:inset -10px 0 15px rgba(255,255,255,.42);
}

.lane span{
  position:relative;
  z-index:1;
  padding-left:10px;
  font-size:30px;
  font-weight:800;
  text-shadow:0 1px 4px rgba(0,0,0,.28);
}

.multi-gifts{
  display:flex;
  justify-content:center;
  gap:5px;
  margin:8px 8px 0;
  padding:5px;
  border-radius:12px;
  background:rgba(60,60,65,.25);
}

.multi-gift{
  width:42px;
  height:42px;
  object-fit:contain;
}

.multi-footer{
  margin-top:34px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.round-pill,.timer-pill{
  border-radius:28px;
  background:rgba(75,75,80,.50);
  padding:10px 24px;
  font-size:28px;
  text-shadow:0 2px 4px rgba(0,0,0,.2);
}

.timer-pill{
  padding:5px 30px;
  font-size:48px;
  font-weight:800;
}

/* =========================================================
   STICKER DANCE
   ========================================================= */
.sticker-hud{
  width:100%;
  padding:4px;
  background:transparent;
}

.sticker-grid{
  display:grid;
  grid-template-columns:repeat(var(--count),minmax(0,1fr));
  gap:13px;
  align-items:end;
}

.sticker-person{
  position:relative;
  min-width:0;
  padding:4px 10px 14px;
  border-radius:18px;
  background:rgba(92,92,98,.48);
  text-align:center;
  text-shadow:0 2px 3px rgba(0,0,0,.6);
}

.sticker-person img{
  width:100px;
  height:85px;
  object-fit:contain;
  margin-top:-38px;
}

.sticker-person strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:23px;
}

.score-pill{
  display:block;
  width:max-content;
  max-width:100%;
  margin:-4px auto 7px;
  padding:2px 11px;
  border-radius:15px;
  background:#53545a;
  font-size:22px;
}

.sticker-targets{
  margin-top:46px;
  display:flex;
  justify-content:space-between;
}

.target-card{
  width:160px;
  height:132px;
  border-radius:22px;
  background:rgba(48,48,52,.50);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.target-card img{
  width:100px;
  height:85px;
  object-fit:contain;
  margin-top:-28px;
}

.target-card b{
  color:#ffe743;
  font-size:22px;
  text-shadow:0 2px 4px #333;
}

/* =========================================================
   VOTING
   Purple showcase outline removed.
   ========================================================= */
.vote-shell{
  position:relative;
  padding:28px 22px 22px;
  border-radius:18px;
  background:rgba(24,24,27,.94);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

.vote-shell h2{
  margin:0 0 6px;
  text-align:center;
  font-size:28px;
}

.vote-status{
  margin-bottom:18px;
  text-align:center;
  font-size:20px;
}

.vote-list{
  display:grid;
  gap:10px;
}

.vote-row{
  position:relative;
  height:48px;
  overflow:hidden;
  border-radius:10px;
  background:#541411;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  font-size:16px;
}

.vote-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--vote);
  background:linear-gradient(90deg,rgba(173,70,70,.72),rgba(120,20,18,.62));
}

.vote-row>span,
.vote-row>strong{
  position:relative;
  z-index:1;
}

.vote-row em{
  font-style:normal;
  font-weight:400;
  font-size:14px;
}

/* =========================================================
   FULL-SCREEN DUEL EFFECT LAYER
   Loaded as a second independent Browser Source.
   ========================================================= */
.scene-effects{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;overflow:hidden}
.scene-effects.is-idle{display:none}
.scene-effects__left,.scene-effects__right{position:absolute;inset:0 50% 0 0;opacity:.42}
.scene-effects__right{inset:0 0 0 50%}
.scene-effects--neon-split .scene-effects__left{background:radial-gradient(circle at 30% 50%,rgba(19,201,223,.45),transparent 58%)}
.scene-effects--neon-split .scene-effects__right{background:radial-gradient(circle at 70% 50%,rgba(255,61,146,.45),transparent 58%)}
.scene-effects--freeze .scene-effects__left,.scene-effects--freeze .scene-effects__right{background:repeating-linear-gradient(120deg,rgba(138,230,255,.18) 0 12px,transparent 12px 44px)}
.scene-effects--flame .scene-effects__left,.scene-effects--flame .scene-effects__right{background:radial-gradient(circle at 50% 90%,rgba(255,83,25,.62),transparent 62%)}
.scene-effects__divider{position:absolute;left:50%;top:var(--divider-top);bottom:var(--divider-bottom);width:4px;transform:translateX(-50%);border-radius:999px;background:var(--divider);box-shadow:0 0 18px var(--divider)}

/* Responsive */
@media(max-width:800px){
  .gift-icon{width:40px;height:40px}
  .pk-topline{grid-template-columns:1fr 140px 1fr}
  .team-name{font-size:22px}
  .timer-big{font-size:42px}

  .sticker-person img{width:70px}
  .sticker-person strong{font-size:16px}
  .score-pill{font-size:15px}

  .creator-chip{
    padding:4px 8px;
    font-size:14px;
  }
  .creator-chip img{width:26px;height:26px}
  .lane span{font-size:22px}
  .multi-gift{width:28px;height:28px}
}

/* Readable Sticker cards: one real gift + one Idol label, no overlapping demo targets. */
.sticker-grid{align-items:stretch;gap:12px}.sticker-person{display:grid;grid-template-rows:minmax(76px,1fr) auto auto;align-items:center;min-height:154px;padding:12px 10px;border:1px solid rgba(255,255,255,.14);background:rgba(32,35,42,.82);backdrop-filter:blur(7px)}.sticker-person img{width:92px;height:76px;margin:0 auto;object-fit:contain}.sticker-person .score-pill{margin:5px auto 6px;font-size:19px}.sticker-person strong{font-size:19px;line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip}.sticker-targets{display:none}