/* ============================================================
   VEEV Music Tiles — MAIN SCREEN overlays (styles).
   These were previously injected from main-screen.js; extracted here so the
   overlay presentation lives in a real stylesheet. The JS only builds the DOM
   and drives the state machine now.
   Load this AFTER duo-event.css / duo-led.css (it is the last stylesheet, matching
   the old runtime-injected order). Colours come from the CSS variables on .duo-page.
   ============================================================ */

/* the per-player "Ready"/countdown from app.js is replaced by the shared ones */
.duo-page .countdown-overlay{display:none !important;}
/* VS sits BEHIND the lanes/tiles */
.duo-vs{z-index:-1 !important;}

.ms-ov{position:fixed;inset:0;z-index:130;display:none;opacity:0;transition:opacity .3s ease;
  color:#fff;font-family:Inter,system-ui,sans-serif;}
.ms-ov.show{display:grid;opacity:1;}

/* preparation + countdown share a centred look */
/* unified, semi-transparent backdrop so the track (πίστα) shows through — no split, no opaque wall */
#ms-prep,#ms-countdown{place-items:center;text-align:center;
  background:radial-gradient(130% 90% at 50% 45%, rgba(var(--p1-rgb),.10), transparent 62%),
             radial-gradient(130% 90% at 50% 55%, rgba(var(--p2-rgb),.09), transparent 62%),
             rgba(5,7,15,.5);}
#ms-prep .ready img{display:block;margin:0 auto;width:min(62vmin,460px);height:auto;
  /* filter:drop-shadow(0 0 30px rgba(var(--p1-rgb),.45)) drop-shadow(0 0 44px rgba(var(--p2-rgb),.3)); */ }
#ms-prep .vs{margin-top:2.4vmin;display:flex;align-items:center;justify-content:center;gap:4vmin;flex-wrap:wrap;min-height:1em;}
#ms-prep .who{font-size:clamp(1.2rem,4.4vw,2.6rem);font-weight:900;letter-spacing:.04em;max-width:40vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#ms-prep .p1{color:var(--p1-light);text-shadow:0 0 22px rgba(var(--p1-rgb),.7);}
#ms-prep .p2{color:var(--p2-main);text-shadow:0 0 22px rgba(var(--p2-rgb),.7);}
#ms-prep .x{color:#fff;font-style:italic;font-weight:1000;opacity:.8;}
#ms-prep .wait{margin-top:2.4vmin;color:#93a4bd;letter-spacing:.28em;text-transform:uppercase;font-size:clamp(.7rem,2vw,1rem);font-weight:800;}
#ms-prep .wait.loading{animation:mswait 1.15s ease-in-out infinite;}
@keyframes mswait{0%,100%{opacity:.22;}50%{opacity:1;}}
#ms-countdown b{font-size:clamp(6rem,26vw,18rem);font-weight:1000;letter-spacing:-.04em;line-height:.9;
  text-shadow:0 0 50px rgba(var(--p1-rgb),.6),0 0 90px rgba(var(--p2-rgb),.4);animation:mscd .55s ease;}
@keyframes mscd{0%{opacity:0;transform:scale(.5);filter:blur(10px);}45%{opacity:1;transform:scale(1);filter:blur(0);}100%{opacity:.85;transform:scale(1.12);}}

#ms-screensaver{background:#000;}
#ms-screensaver video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* the video always covers the overlay; the idle text is only a fallback if no <video> exists */
#ms-screensaver video ~ .idle{display:none;}
#ms-screensaver .idle{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  background:radial-gradient(120% 80% at 50% 30%, rgba(var(--p1-rgb),.20), transparent 60%),
             radial-gradient(120% 80% at 50% 70%, rgba(var(--p2-rgb),.16), transparent 60%),#05070f;}
#ms-screensaver .idle b{font-size:clamp(2rem,7vw,5rem);font-weight:1000;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 0 34px rgba(var(--p1-rgb),.6),0 0 60px rgba(var(--p2-rgb),.35);}
#ms-screensaver .idle span{display:block;margin-top:1rem;color:#93a4bd;letter-spacing:.3em;font-size:.9rem;text-transform:uppercase;}

/* leaderboard — same premium look as leaderboard.html, pinned to the top */
#ms-leaderboard{justify-items:center;align-content:start;padding:2.2vmin 4vmin;overflow:hidden;
  background:#05070f url("art/bg.jpg") center center / cover no-repeat;}
#ms-leaderboard .inner{width:min(1100px,96%);}
#ms-leaderboard h2{text-align:center;margin:0 0 1.8vmin;}
#ms-leaderboard h2 img{display:block;margin:0 auto;width:min(56vmin,430px);height:auto;
  /* filter:drop-shadow(0 0 22px rgba(var(--p1-rgb),.45)) drop-shadow(0 0 34px rgba(var(--p2-rgb),.28)); */}
#ms-leaderboard .rows{display:grid; gap:5px; }
#ms-leaderboard .r{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2.2vmin;position:relative;
  padding:10px 130px;animation:mspop .5s ease both;}   /* frame = designer's neon box SVG (no border/fill of our own) */
#ms-leaderboard .r:nth-child(odd){background:url("art/red_lead_box.svg?v=2") center center / 90% 120% no-repeat;}
#ms-leaderboard .r:nth-child(even){background:url("art/purple_lead_box.svg?v=2") center center / 90% 120% no-repeat;}
#ms-leaderboard .r .medal{display:grid;place-items:center;width:clamp(1.9rem,4.4vw,2.7rem);height:clamp(1.9rem,4.4vw,2.7rem);border-radius:50%;
  font-size:clamp(.85rem,2.4vw,1.3rem);font-weight:1000;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#93a4bd;}
#ms-leaderboard .r .n{font-size:clamp(1rem,3vw,1.7rem);font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#ms-leaderboard .r .s{font-size:clamp(1.05rem,3.2vw,1.8rem);font-weight:1000;text-align:right;font-variant-numeric:tabular-nums;}
/* (accent bars removed — the box SVG is the whole frame now) */
/*#ms-leaderboard .r.r1{filter:drop-shadow(0 0 16px rgba(255,212,95,.55));}   !* highlight #1 with a gold glow around the box *!*/
#ms-leaderboard .r.r1 .medal{color:#221a00;background:linear-gradient(135deg,#ffe487,#f5b301);border-color:rgba(255,212,95,.8);}
#ms-leaderboard .r.r1 .s{color:#ffd45f;}
#ms-leaderboard .r.r2 .medal{color:#0d1320;background:linear-gradient(135deg,#f4f8ff,#c3cede);}
#ms-leaderboard .r.r3 .medal{color:#241206;background:linear-gradient(135deg,#f0c39a,#c9824f);}
#ms-leaderboard .empty{color:#93a4bd;text-align:center;font-size:1.3rem;margin-top:8vmin;}
@keyframes mspop{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* RESULTS — centred, semi-transparent so the track shows behind */
#ms-results{place-items:center;text-align:center;
  background:radial-gradient(130% 90% at 50% 45%, rgba(var(--p1-rgb),.10), transparent 62%),
             radial-gradient(130% 90% at 50% 55%, rgba(var(--p2-rgb),.09), transparent 62%),
             rgba(5,7,15,.5);}
#ms-results .rw{display:flex;align-items:flex-start;justify-content:space-around;gap:2vmin;width:100%;padding:0 2vmin;}
#ms-results .rp{flex:1 1 0;min-width:0;max-width:46%;}   /* no overflow:hidden -> gold glow/shadows not clipped (ellipsis lives on .rn) */
#ms-results .tr{min-height:1.1em;font-size:clamp(2rem,7vw,4.6rem);line-height:1;margin-bottom:1vmin;}
#ms-results .win .tr{filter:drop-shadow(0 0 22px rgba(255,212,95,.85));animation:mstroph .7s ease both;}
#ms-results .rn{font-size:clamp(1rem,3.6vw,2.1rem);font-weight:900;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#ms-results .rp1 .rn{color:var(--p1-light);} #ms-results .rp2 .rn{color:var(--p2-main);}
#ms-results .rs{font-size:clamp(1.4rem,6vw,3.4rem);font-weight:1000;font-variant-numeric:tabular-nums;line-height:1;margin-top:1vmin;white-space:nowrap;}
#ms-results .rp.win .rn,#ms-results .rp.win .rs{color:#ffd45f !important;}
#ms-results .rp.win .rs{text-shadow:0 0 30px rgba(255,212,95,.6);}
#ms-results .rp.lose{opacity:.68;} #ms-results .rp.lose .rs{color:#cdd6e6;}
#ms-results .rvs{flex:0 0 auto;align-self:center;font-style:italic;font-weight:1000;font-size:clamp(1.1rem,3.2vw,1.9rem);color:#fff;opacity:.5;}
@keyframes mstroph{0%{opacity:0;transform:translateY(14px) scale(.6);}60%{opacity:1;transform:translateY(0) scale(1.14);}100%{transform:translateY(0) scale(1);}}