/* ============================================================
   VEEV Music Tiles — Event "premium glassmorphism" skin
   Scoped to .duo-page only. Layered ON TOP of styles.css.
   Visual-only: gameplay geometry in app.js is untouched.
   Left = Player 1 = PURPLE · Right = Player 2 = RED (matches the design art)
   ============================================================ */
.duo-page{
  /* ================= BRAND PALETTE — single source of truth =================
     Change a colour ONCE here: it updates the whole duo/LED skin, the shared
     overlays (Ready/results/leaderboard) AND the canvas effects (read in JS).
     Keep each hex and its rgb-triplet in sync. ============================== */
  --p1-deep:#2a0a4d; --p1-main:#9218fd; --p1-accent:#a846fd; --p1-light:#c380fe;   /* purple (left) — brand #9218fd */
  --p2-deep:#4d0f14; --p2-main:#f6323e; --p2-accent:#f85761; --p2-light:#fa888f;   /* red (right) — brand #f6323e */
  /* rgb triplets for rgba(var(--x), alpha) glows */
  --p1-rgb:146,24,253;--p1-rgb-light:226,193,254; --p1-accent-rgb:168,70,253; --p1-light-rgb:195,128,254;
  --p2-rgb:246,50,62;--p2-rgb-light:253,210,213;  --p2-accent-rgb:248,87,97;  --p2-light-rgb:250,136,143;
  --dark-bg:#03050A; --cyan-hitline:#5FFBF1;
}

/* very dark split background */
body.duo-page{
  background:
    radial-gradient(120% 75% at 25% 32%, rgba(var(--p1-rgb),0.10), transparent 52%),
    radial-gradient(120% 75% at 75% 32%, rgba(var(--p2-rgb),0.10), transparent 52%),
    var(--dark-bg) !important;
}
.duo-page .ambient-glow{opacity:.32;}
/* fit everything in the viewport — no scrolling, hit zone always visible */
body.duo-page{overflow:hidden;}

/* ---- header: slimmer, controls kept usable ---- */
.duo-page .duo-header h1{font-size:clamp(1.6rem,3vw,2.4rem);}
.duo-page .duo-header .eyebrow{color:var(--p1-light);}
.duo-page .duo-layout{width:min(1880px,calc(100% - 30px));padding-top:34px;padding-bottom:48px;
  height:100vh;display:flex;flex-direction:column;}

/* ---- grid + columns flex so the board fills the leftover height (no overflow) ---- */
.duo-page .duo-grid{gap:0;position:relative;flex:1;min-height:0;align-items:stretch;}
.duo-page .duo-player{padding:0 30px;display:flex;flex-direction:column;min-height:0;position: relative;}

/* ---- big neon player name ---- */
.duo-page .duo-title-row{justify-content:center;margin-bottom:20px;}
.duo-page .duo-title-row .key-strip{display:none;}
.duo-page .duo-title-row h2{
  font-size:clamp(2.6rem,4.4vw,4.4rem);letter-spacing:.16em;font-weight:900;text-transform:uppercase;
  min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.duo-page .player-one .duo-title-row h2{color:var(--p1-main);/* text-shadow:0 0 26px rgba(var(--p1-rgb),.75); */ }
.duo-page .player-two .duo-title-row h2{color:var(--p2-main);/* text-shadow:0 0 26px rgba(var(--p2-rgb),.75); */ }

/* ---- HUD as a hexagonal glass stat bar (full width) ----
   clip-path clips a normal border on the angled edges, so the border is drawn
   with two stacked layers: ::before = accent rim, ::after = glass fill inset by 1.5px. */
.duo-page .compact-hud{
  width:90%;max-width:none;margin:0 0 16px;isolation:isolate;
  background:transparent;border:none;backdrop-filter:none;
  position: absolute;
  top: 80px;}
.duo-page .compact-hud::before,
.duo-page .compact-hud::after{
  content:"";position:absolute;clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%);}
.duo-page .compact-hud::before{inset:0;z-index:-2;}                /* rim layer */
.duo-page .compact-hud::after{inset:1.5px;z-index:-1;             /* glass fill, 1.5px smaller = even border */
  background:rgba(255,255,255,0.07);backdrop-filter:blur(14px);}
.duo-page .player-one .compact-hud::before{background:rgba(var(--p1-rgb),.5);box-shadow:0 0 30px rgba(var(--p1-rgb),.28);}
.duo-page .player-two .compact-hud::before{background:rgba(var(--p2-rgb),.5);box-shadow:0 0 30px rgba(var(--p2-rgb),.28);}
.duo-page .compact-hud div{background:transparent;text-align:center;}
.duo-page .compact-hud span{letter-spacing:.18em;}
.duo-page .player-one .compact-hud span{color:var(--p1-light);}
.duo-page .player-two .compact-hud span{color:var(--p2-light);}

/* ---- board: taller, transparent, perspective container ---- */
.duo-page .compact-board{
  flex:1;min-height:0;border-radius:24px;overflow:visible;
  }

/*.duo-page .player-one .compact-board{box-shadow:inset 0 0 80px rgba(var(--p1-rgb),.10);}*/
/*.duo-page .player-two .compact-board{box-shadow:inset 0 0 80px rgba(var(--p2-rgb),.10);}*/

/* ---- lanes tilted into the depth (visual only) ---- */
.duo-page .compact-board .lane-wrapper{
  /* IMPORTANT: keep the real lane height — the engine measures it for hit timing.
     Fill the height with a gentler perspective, NOT by stretching the lane. */
  inset:8px 16px 0;gap:14px;
  transform:perspective(1600px) rotateX(26deg);transform-origin:50% 100%;transform-style:preserve-3d;}
.duo-page .lane{
  border-radius:5px;background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.06));}
.duo-page .player-one .lane{border:1px solid rgba(var(--p1-rgb-light),1); /* border-bottom:none; */ box-shadow:inset 0 0 34px rgba(var(--p1-rgb),.12);}
.duo-page .player-two .lane{border:1px solid rgba(var(--p2-rgb-light),1); /* border-bottom:none; */ box-shadow:inset 0 0 34px rgba(var(--p2-rgb),.12);}
/* remove the old horizontal hit line; use a soft vertical bloom instead */
.duo-page .lane::before{
  background:none !important;left:50%;top:0;bottom:0;right:auto;width:100%;transform:translateX(-50%);}
.duo-page .player-one .lane::before{background:linear-gradient(180deg,transparent,rgba(var(--p1-rgb),.20)) !important;}
.duo-page .player-two .lane::before{background:linear-gradient(180deg,transparent,rgba(var(--p2-rgb),.20)) !important;}
.duo-page .lane.active{box-shadow:inset 0 0 60px var(--lc,rgba(255,255,255,.25)),0 0 40px var(--lc,rgba(255,255,255,.2));}
.duo-page .player-one .lane{--lc:rgba(var(--p1-rgb),.5);}
.duo-page .player-two .lane{--lc:rgba(var(--p2-rgb),.5);}

/* hide key labels + old round hit-zone (keys are on the controller) */
.duo-page .lane-key,
.duo-page .hit-zone{display:none !important;}

/* ---- target pad: keep its geometry (hit window) but show only a subtle lying bar ---- */
/* visible "landing zone" rectangle lying on the lane (the real hit window) */
.duo-page .target-pad{
  bottom:55px !important;   /* moved a bit lower (engine reads this -> hit point follows) */
  border-radius:10px !important;border:1px solid rgba(255,255,255,.10) !important;}
.duo-page .player-one .target-pad{
  /* background:linear-gradient(180deg,rgba(var(--p1-accent-rgb),.04),rgba(var(--p1-accent-rgb),.16)) !important; */
  border-color:rgba(var(--p1-rgb-light),1) !important;/* box-shadow:0 0 20px rgba(var(--p1-accent-rgb),.22),inset 0 0 18px rgba(var(--p1-accent-rgb),.12) !important; */}
.duo-page .player-two .target-pad{
  /* background:linear-gradient(180deg,rgba(var(--p2-accent-rgb),.04),rgba(var(--p2-accent-rgb),.16)) !important; */
  border-color:rgba(var(--p2-rgb-light),1) !important;/* box-shadow:0 0 20px rgba(var(--p2-accent-rgb),.22),inset 0 0 18px rgba(var(--p2-accent-rgb),.12) !important; */}
/* bright hit-line at the pad centre = exact moment to tap */
.duo-page .target-pad::after{
  content:"";position:absolute;left:6%;right:6%;top:50%;bottom:auto;transform:translateY(-50%);height:5px;border-radius:5px;background:none;}
.duo-page .player-one .target-pad::after{background:linear-gradient(90deg,transparent,rgba(var(--p1-rgb-light),1),transparent);box-shadow:0 0 16px var(--p1-accent);}
.duo-page .player-two .target-pad::after{background:linear-gradient(90deg,transparent,rgba(var(--p2-rgb-light),1),transparent);box-shadow:0 0 16px var(--p2-accent);}
.duo-page .target-pad.judge-good{filter:brightness(1.7);}

/* ---- tiles: glossy neon capsules, purple left / red right ---- */
.duo-page .duo-player.player-one .tile,
.duo-page .duo-player.player-one .tile.hold-tile{
  background:linear-gradient(145deg,var(--p1-accent),var(--p1-main)) !important;
  box-shadow:0 0 22px rgba(var(--p1-rgb),.7),inset 0 7px 10px rgba(255,255,255,.35),inset 0 -7px 12px rgba(0,0,0,.3) !important;}
.duo-page .duo-player.player-two .tile,
.duo-page .duo-player.player-two .tile.hold-tile{
  background:linear-gradient(145deg,var(--p2-accent),var(--p2-main)) !important;
  box-shadow:0 0 22px rgba(var(--p2-rgb),.7),inset 0 7px 10px rgba(255,255,255,.35),inset 0 -7px 12px rgba(0,0,0,.3) !important;}

/* ---- feedback labels = the designer's PNGs (engine sets .fb-perfect/.fb-good/.fb-late/.fb-miss) ---- */
.duo-page .feedback{z-index:9;top:30%;color:transparent !important;text-shadow:none !important;
  /* all labels share ONE height; box aspect = the widest label (PERFECT 2521x512) so it reaches
     max 80% width and the narrower ones stay the same height, just shorter in length */
  width:66%;aspect-ratio:2521 / 512;height:auto;
  background-repeat:no-repeat;background-position:center;background-size:contain;}
.duo-page .feedback.fb-perfect{background-image:url("art/fx-perfect.png");}
.duo-page .feedback.fb-good{background-image:url("art/fx-good.png");}
.duo-page .feedback.fb-late{background-image:url("art/fx-late.png");}
.duo-page .feedback.fb-miss{background-image:url("art/fx-miss.png");}

/* ---- countdown overlay: glassy ---- */
/*.duo-page .countdown-overlay{background:rgba(10,15,31,.66);}*/

/* ---- injected by duo-effects.js ---- */
.duo-fx-canvas{position:fixed;inset:0;z-index:40;pointer-events:none;}
.duo-haze{position:fixed;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none;
  mix-blend-mode:screen;animation:duoDrift 9s ease-in-out infinite alternate;}
.duo-haze.p{background:radial-gradient(circle,rgba(var(--p1-rgb),.26),transparent 70%);}
.duo-haze.r{background:radial-gradient(circle,rgba(var(--p2-rgb),.26),transparent 70%);}
@keyframes duoDrift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(20px,-50px) scale(1.12);}}

.duo-vs{position:fixed;left:50%;top:54%;transform:translate(-50%,-50%) skewX(-8deg);z-index:30;
  font-weight:1000;font-style:italic;letter-spacing:-.05em;font-size:clamp(3rem,6vw,6.5rem);pointer-events:none;}
.duo-vs b{color:#fff;text-shadow:0 0 34px rgba(255,255,255,.65),0 0 70px rgba(255,255,255,.3);}
.duo-vs i{color:var(--p2-main);text-shadow:0 0 34px rgba(var(--p2-rgb),.9),0 0 70px rgba(var(--p2-rgb),.5);}

.duo-levelup{position:fixed;top:48%;transform:translateX(-50%);z-index:42;font-weight:1000;
  font-size:2.1rem;letter-spacing:.14em;color:#fff;pointer-events:none;white-space:nowrap;
  animation:duoLevelup 1.3s ease forwards;}
.duo-levelup img{display:block;height:min(28vmin,200px);width:auto;filter:drop-shadow(0 0 16px rgba(0,0,0,.55));}
.duo-levelup.p{text-shadow:0 0 26px rgba(var(--p1-rgb),.95),0 0 60px rgba(var(--p1-accent-rgb),.6);}
.duo-levelup.r{text-shadow:0 0 26px rgba(var(--p2-rgb),.95),0 0 60px rgba(var(--p2-accent-rgb),.6);}
@keyframes duoLevelup{0%{opacity:0;transform:translate(-50%,30px) scale(.7);}
  20%{opacity:1;transform:translate(-50%,0) scale(1);}100%{opacity:0;transform:translate(-50%,-240px) scale(1.12);}}
.duo-player.zap{animation:duoZap .45s ease;}
@keyframes duoZap{0%,100%{filter:none;}20%{filter:brightness(2) saturate(1.5);}55%{filter:brightness(1.3);}}

.player-one h2 {
  text-shadow: /* white border */ 1px 0 rgb(var(--p1-rgb-light)),
  -1px 0 rgb(var(--p1-rgb-light)),
  0 1px rgb(var(--p1-rgb-light)),
  0 -1px rgb(var(--p1-rgb-light)),
  1px 1px rgb(var(--p1-rgb-light)),
  -1px -1px rgb(var(--p1-rgb-light)),
  1px -1px rgb(var(--p1-rgb-light)),
  -1px 1px rgb(var(--p1-rgb-light)),
    /* red glow */ 0 0 2px rgb(var(--p1-rgb)),
  0 0 4px rgb(var(--p1-rgb)),
  0 0 6px rgb(var(--p1-rgb)),
  0 0 6px rgb(var(--p1-rgb));
  overflow: visible !important;
}
.player-two h2 {
  text-shadow: /* white border */ 1px 0 rgb(var(--p2-rgb-light)),
  -1px 0 rgb(var(--p2-rgb-light)),
  0 1px rgb(var(--p2-rgb-light)),
  0 -1px rgb(var(--p2-rgb-light)),
  1px 1px rgb(var(--p2-rgb-light)),
  -1px -1px rgb(var(--p2-rgb-light)),
  1px -1px rgb(var(--p2-rgb-light)),
  -1px 1px rgb(var(--p2-rgb-light)),
    /* red glow */ 0 0 2px rgb(var(--p2-rgb)),
  0 0 4px rgb(var(--p2-rgb)),
  0 0 6px rgb(var(--p2-rgb)),
  0 0 6px rgb(var(--p2-rgb));
}