/* devstar — a rhythm game over YouTube video.
   Dark stage, one accent, everything else out of the way. */
:root{
  --bg:#0a0910; --panel:#151322e6; --line:#ffffff1a;
  --ink:#e9e6f2; --dim:#9a94ad;
  --hot:#ff3d7f; --cool:#3de0ff; --gold:#ffd166; --good:#7bf1a8;
  --lane:#ffffff0d;
}
*{box-sizing:border-box;margin:0;padding:0}

/* Everything reads a little small at a normal browser zoom, so the page
   carries its own. One factor, applied once: every size in this file is
   written in px and would otherwise have to be touched individually. */
:root{--ui-zoom:1.1}
body{zoom:var(--ui-zoom)}
/* The page is as tall as its content, and the dark it fades into is
   painted behind everything — a fixed height would end the glow one
   screen down and leave the rest of a long page with no floor. */
html{background:var(--bg)}
html,body{min-height:100%}
body{
  background-color:var(--bg);
  background-image:radial-gradient(1200px 800px at 50% -10%,#1c1436,#0a0910 60%);
  background-repeat:no-repeat;
  color:var(--ink);font-family:"IBM Plex Sans Thai",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.screen{display:none;padding:24px 18px 48px;max-width:1160px;margin:0 auto}
.screen.on{display:block}
.hidden{display:none !important}

/* ---- 2-column home layout ---- */
.home-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.home-main{min-width:0}
.home-sidebar{min-width:0;display:flex;flex-direction:column;gap:10px}

.side-multiplayer{
  background:rgba(21,19,34,0.85);border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,0.4);
  backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:12px;
}
.btn-lobby-main{
  width:100%;padding:14px 16px;font-size:15px;font-weight:700;
  background:linear-gradient(135deg, #ff3d7f, #d80056);border:none;
  box-shadow:0 4px 15px rgba(255,61,127,0.4);
}
.join-code-box{display:flex;flex-direction:column;gap:6px}
.join-code-label{font-size:11.5px;color:var(--dim);font-weight:600}
.join-code-row{display:flex;gap:6px}
.join-code-row input{
  flex:1;padding:8px 12px;font:inherit;font-size:13px;color:#fff;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:10px;
  text-transform:uppercase;letter-spacing:0.05em;
}

.popular-list{display:flex;flex-direction:column;gap:10px}
.pop-card{
  display:flex;align-items:center;gap:10px;padding:10px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;color:var(--ink);font:inherit;transition:all 0.15s;
}
.pop-card:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,61,127,0.4);transform:translateX(2px)}
.pop-card img{width:72px;height:54px;object-fit:cover;border-radius:8px;flex-shrink:0}
.pop-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pop-title{font-size:13px;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-sub{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-top-score{
  font-size:11px;font-weight:700;color:var(--gold);
  text-shadow:0 0 6px rgba(255,209,102,0.4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;
}

@media (max-width:850px){
  .home-layout{grid-template-columns:1fr}
}

.brand{text-align:center;margin:28px 0 22px}
.brand h1{font-size:44px;letter-spacing:.06em;font-weight:700}
.brand h1 span{color:var(--hot)}
.brand p{color:var(--dim);margin-top:6px;font-size:14px}

.search{display:flex;gap:8px;margin-bottom:10px}
.search input{
  flex:1;padding:13px 14px;font:inherit;font-size:15px;color:var(--ink);
  background:#ffffff0c;border:1px solid var(--line);border-radius:10px;
}
.search input:focus{outline:none;border-color:var(--hot)}

.btn{
  padding:12px 18px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  color:var(--ink);background:#ffffff0f;border:1px solid var(--line);border-radius:10px;
}
.btn:hover:not(:disabled){background:#ffffff1a}
.btn:disabled{opacity:.4;cursor:default}
.btn.primary{background:var(--hot);border-color:var(--hot);color:#12040c}
.btn.primary:hover:not(:disabled){background:#ff5c95;border-color:#ff5c95}
.btn.primary:active:not(:disabled){background:#e6106a;border-color:#e6106a}
.btn.ghost{background:transparent}
.btn.small{padding:7px 12px;font-size:12.5px}
.back{background:none;border:0;color:var(--dim);font:inherit;cursor:pointer;padding:6px 0;margin-bottom:8px}

.note{color:var(--dim);font-size:13px;line-height:1.55}
.section{font-size:15px;margin:26px 0 10px;color:var(--dim);font-weight:600}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.card{
  display:flex;gap:10px;padding:8px;text-align:left;cursor:pointer;
  background:#ffffff08;border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit;
  overflow:hidden;
}
/* A flex item will not shrink below its own content unless told to, so
   without this the champion's line pushes the text column wider than the
   card and the ellipsis it already has never gets a chance. */
.card > div{flex:1;min-width:0}
.card:hover{background:#ffffff14;border-color:var(--hot)}
.card img{width:88px;height:50px;object-fit:cover;border-radius:7px;flex:0 0 88px;background:#000}
.card .t{font-size:13px;font-weight:600;line-height:1.35;max-height:36px;overflow:hidden}
.card .c{
  font-size:11.5px;color:var(--dim);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-top-score{
  max-width:100%;
  font-size:11px;font-weight:700;color:var(--gold);
  text-shadow:0 0 6px rgba(255,209,102,0.4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px;
}

.song-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.song-head img{width:160px;height:90px;object-fit:cover;border-radius:10px;background:#000}
.song-head h2{font-size:19px;line-height:1.35}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.panel h3{font-size:15px;margin-bottom:8px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.manual{font-size:13px;color:var(--dim);display:flex;align-items:center;gap:8px}
.manual input[type=number]{width:96px;padding:9px;font:inherit;background:#ffffff0c;border:1px solid var(--line);border-radius:8px;color:var(--ink)}
.offset{margin-top:12px}
.offset input{accent-color:var(--hot)}

#bpm-stage{margin:10px 0;border-radius:10px;overflow:hidden;background:#000}
#bpm-stage iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.btn.tap{width:100%;padding:22px;font-size:16px;background:#ffffff12}
.btn.tap:active{background:var(--hot);color:#12040c}
.tap-read{text-align:center;font-size:26px;font-weight:700;margin-top:10px;color:var(--gold)}

.diffs{display:flex;gap:10px}
.diffs .diff{flex:1;display:flex;flex-direction:column;gap:2px;padding:16px 10px;font-size:15px}
.diffs .diff span{font-size:11px;color:var(--dim);font-weight:400}

.board{display:flex;flex-direction:column;gap:4px}
.board .b-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#ffffff08;border-radius:8px;font-size:13.5px}
.board .b-row.me{border:1px solid var(--gold)}
.board .b-rank{width:26px;color:var(--dim);font-weight:700}
.board .b-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .b-acc{color:var(--dim);font-size:12px}
.board .b-score{font-weight:700;color:var(--gold);min-width:74px;text-align:right}

/* ---- multi-difficulty song board table ---- */
.board-diff-table{
  display:flex;flex-direction:column;gap:5px;width:100%;
}
.board-diff-head,
.board-diff-row{
  display:grid;
  grid-template-columns:38px 1fr 100px 100px 100px 110px;
  align-items:center;gap:8px;padding:9px 12px;
  border-radius:8px;font-size:13.5px;
}
.board-diff-head{
  background:rgba(255,255,255,0.05);
  color:var(--dim);font-size:12px;font-weight:700;letter-spacing:0.04em;
  border:1px solid rgba(255,255,255,0.08);
}
.board-diff-row{
  background:#ffffff08;
  border:1px solid transparent;
  transition:background 0.15s, border-color 0.15s;
}
.board-diff-row:hover{
  background:#ffffff12;
}
.board-diff-row.me{
  border-color:var(--gold);
  background:rgba(255,209,102,0.08);
}
.board-diff-cell{
  text-align:right;font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
}
.board-diff-cell.rank,
.board-diff-cell.name{
  display:block;
}
.b-score-val{font-weight:700;line-height:1.2}
.b-meta-val{
  font-size:10px;color:rgba(255,255,255,0.7);line-height:1.15;
  margin-top:2px;font-weight:500;letter-spacing:0.01em;white-space:nowrap;
}
.board-diff-cell.rank{
  text-align:left;color:var(--dim);font-weight:700;
}
.board-diff-cell.name{
  text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:#fff;
}
.board-diff-cell.diff-easy{
  color:#7bf1a8;
}
.board-diff-cell.diff-normal{
  color:#3de0ff;
}
.board-diff-cell.diff-hard{
  color:#ff79b0;
}
.board-diff-cell.diff-total{
  color:var(--gold);font-weight:800;text-shadow:0 0 8px rgba(255,209,102,0.35);
}
.board-diff-cell.zero{
  color:rgba(255,255,255,0.25);font-weight:400;text-shadow:none;
}

@media (max-width:640px){
  .board-diff-head,
  .board-diff-row{
    grid-template-columns:26px 1fr 65px 65px 65px 75px;
    gap:4px;padding:7px 8px;font-size:12px;
  }
  .board-diff-head{
    font-size:10.5px;
  }
  .board-diff-cell.rank{font-size:11px}
  .board-diff-cell.name{font-size:12px}
}

/* ---- the stage ---- */
.screen.play{max-width:none;padding:0;height:calc(100dvh / var(--ui-zoom))}
.screen.play.on{display:block}
#stage{position:relative;width:100%;height:calc(100dvh / var(--ui-zoom));overflow:hidden;background:#000}
#yt{position:absolute;inset:0}
/* the video fills the stage rather than sitting letterboxed in it */
#yt iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:calc(177.78dvh / var(--ui-zoom));height:calc(56.25vw / var(--ui-zoom));
  min-width:calc(100vw / var(--ui-zoom));min-height:calc(100dvh / var(--ui-zoom));border:0;
}
#yt{pointer-events:none}
#veil{position:absolute;inset:0;background:linear-gradient(180deg,#0a0910cc,#0a091066 30%,#0a0910e6);pointer-events:none}
#lanes{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:14px 16px;pointer-events:none}
#hud .btn{pointer-events:auto}
.hud-left{display:flex;flex-direction:column;gap:2px}
#score{font-size:30px;font-weight:700;text-shadow:0 2px 10px #000}
.combo{font-size:15px;color:var(--gold);font-weight:700;min-height:20px}
.hud-right{display:flex;align-items:flex-start;gap:10px}
#countdown{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:74px;font-weight:700;color:#fff;text-shadow:0 4px 30px #000;pointer-events:none;
}
/* ---- Mobile Landscape Touch Controller ---- */
#touchpad{
  position:absolute;inset:0;pointer-events:none;display:none;
  justify-content:space-between;align-items:flex-end;padding:24px 32px;z-index:10;
}

@media (pointer:coarse), (max-height:600px){
  #touchpad{display:flex}
}

.pad-left{pointer-events:auto;margin-bottom:12px;display:flex;flex-direction:column;align-items:center;gap:12px}
.pad-right{pointer-events:auto;margin-bottom:12px}

.pad-chance{
  background:rgba(255,61,93,0.18);border:1.5px solid #ff3d5d;border-radius:20px;
  color:#ff8599;font-size:11px;font-weight:800;letter-spacing:0.04em;padding:5px 12px;
  cursor:pointer;pointer-events:auto;user-select:none;touch-action:manipulation;
  box-shadow:0 2px 10px rgba(0,0,0,0.4);transition:all 0.15s;
}
.pad-chance:active{transform:scale(0.94)}
.pad-chance.active{
  background:#ff3d5d;color:#ffffff;box-shadow:0 0 16px rgba(255,61,93,0.8);
  border-color:#ffffff;
}

/* Left BEAT Diamond Button */
.pad-beat{
  width:96px;height:96px;transform:rotate(45deg);
  background:linear-gradient(135deg, #ff4081, #f50057);
  border:3.5px solid rgba(255,255,255,0.85);border-radius:24px;
  box-shadow:0 0 25px rgba(245,0,87,0.7), inset 0 2px 6px rgba(255,255,255,0.6);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;touch-action:manipulation;
}
.pad-beat:active{
  transform:rotate(45deg) scale(0.92);
  box-shadow:0 0 35px rgba(245,0,87,0.9);
}
.pad-beat-txt{
  display:block;transform:rotate(-45deg);
  font-size:19px;font-weight:900;font-style:italic;color:#ffffff;
  text-shadow:0 2px 6px rgba(0,0,0,0.7);
}

/* Right Diamond D-Pad Layout */
.pad-dpad{
  position:relative;width:150px;height:150px;
}
.pad-btn{
  position:absolute;width:58px;height:58px;transform:rotate(45deg);
  border:3px solid rgba(255,255,255,0.85);border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 15px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.6);
  cursor:pointer;user-select:none;touch-action:manipulation;
}
.pad-btn:active{transform:rotate(45deg) scale(0.92)}

.pad-arrow{
  display:block;transform:rotate(-45deg);
  font-size:24px;font-weight:900;color:#ffffff;line-height:1;
  text-shadow:0 2px 6px rgba(0,0,0,0.8);
}

/* Color-coded Directional Buttons matching reference image */
.pad-btn.dir-up{
  top:0;left:46px;
  background:linear-gradient(135deg, #ff4081, #ff1744);
  box-shadow:0 0 16px rgba(255,23,68,0.6);
}
.pad-btn.dir-left{
  top:46px;left:0;
  background:linear-gradient(135deg, #e040fb, #aa00ff);
  box-shadow:0 0 16px rgba(170,0,255,0.6);
}
.pad-btn.dir-right{
  top:46px;right:0;
  background:linear-gradient(135deg, #40c4ff, #2979ff);
  box-shadow:0 0 16px rgba(41,121,255,0.6);
}
.pad-btn.dir-down{
  bottom:0;left:46px;
  background:linear-gradient(135deg, #b2ff59, #76ff03);
  box-shadow:0 0 16px rgba(118,255,3,0.6);
}

/* ---- Audition-style song status HUD (bottom-left) ---- */
.song-hud{
  position:absolute;left:16px;bottom:16px;z-index:5;width:280px;
  background:linear-gradient(180deg, #512275, #240b3d);
  border:2px solid #9b4dca;border-radius:18px;padding:8px 14px;
  box-shadow:0 4px 20px rgba(155,77,202,0.4), inset 0 1px 1px rgba(255,255,255,0.3);
  color:#fff;backdrop-filter:blur(8px);pointer-events:none;
}
.song-hud-top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12.5px;font-weight:700;margin-bottom:4px;
}
.hud-song-title{
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.hud-song-bpm{
  color:#3de0ff;font-size:11.5px;font-weight:700;flex-shrink:0;
  text-shadow:0 0 6px rgba(61,224,255,0.5);
}
.song-hud-divider{
  height:1px;background:rgba(255,255,255,0.15);margin:4px 0 6px;
}
.song-hud-bottom{
  display:flex;align-items:center;gap:10px;
}
.hud-progress-track{
  flex:1;height:12px;background:rgba(10,5,20,0.8);
  border:1px solid rgba(255,255,255,0.2);border-radius:10px;
  position:relative;overflow:visible;
}
.hud-progress-fill{
  height:100%;width:0%;background:linear-gradient(90deg, #3de0ff, #1fb6f0);
  border-radius:10px;position:relative;box-shadow:0 0 8px rgba(61,224,255,0.6);
  transition:width 0.1s linear;
}
.hud-progress-thumb{
  position:absolute;right:-7px;top:-3px;width:16px;height:16px;
  border-radius:50%;background:radial-gradient(circle, #ffe600, #ff9900);
  border:2px solid #ffffff;box-shadow:0 0 10px #ffcc00;
}
.hud-time-rem{
  font-size:13px;font-weight:800;color:#ffffff;
  letter-spacing:0.05em;font-family:monospace, sans-serif;
  text-shadow:0 1px 4px rgba(0,0,0,0.9);flex-shrink:0;
}
@media (pointer:coarse), (max-height:600px){
  .song-hud{
    position:absolute;top:54px;left:16px;bottom:auto;width:190px;
    padding:4px 8px;border-radius:12px;
  }
  .song-hud-top{font-size:10.5px;margin-bottom:2px}
  .hud-song-bpm{font-size:9.5px}
  .song-hud-divider{margin:2px 0 3px}
  .hud-progress-track{height:8px}
  .hud-progress-thumb{width:12px;height:12px;top:-2px;right:-5px}
  .hud-time-rem{font-size:10.5px}
}

/* ---- result panel redesign ---- */
.result-rank-wrap{position:relative}
.rank-badge{width:72px;height:72px;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:800;border-radius:18px;background:rgba(255,255,255,0.05);border:2px solid var(--gold);color:var(--gold);box-shadow:0 0 20px rgba(255,209,102,0.3);text-shadow:0 0 10px rgba(255,209,102,0.5)}
.rank-badge.rank-S{border-color:#ffd166;color:#ffd166;box-shadow:0 0 25px rgba(255,209,102,0.6);text-shadow:0 0 12px #ffd166}
.rank-badge.rank-A{border-color:#3de0ff;color:#3de0ff;box-shadow:0 0 25px rgba(61,224,255,0.6);text-shadow:0 0 12px #3de0ff}
.rank-badge.rank-B{border-color:#7bf1a8;color:#7bf1a8;box-shadow:0 0 25px rgba(123,241,168,0.6);text-shadow:0 0 12px #7bf1a8}
.rank-badge.rank-C{border-color:#c9a2b0;color:#c9a2b0;box-shadow:0 0 20px rgba(201,162,176,0.4);text-shadow:0 0 10px #c9a2b0}
.rank-badge.rank-D{border-color:#ff3d7f;color:#ff3d7f;box-shadow:0 0 20px rgba(255,61,127,0.4);text-shadow:0 0 10px #ff3d7f}

.result-song-info{flex:1;min-width:0}
.result-song-info h2{font-size:18px;font-weight:700;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}

.result-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.stat-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px 10px;text-align:center}
.stat-label{display:block;font-size:10.5px;letter-spacing:0.1em;color:var(--dim);margin-bottom:4px;font-weight:600}
.stat-value{font-size:22px;font-weight:800;display:block}
.stat-value.gold{color:#ffd166;text-shadow:0 0 10px rgba(255,209,102,0.4)}
.stat-value.cyan{color:#3de0ff;text-shadow:0 0 10px rgba(61,224,255,0.4)}
.stat-value.violet{color:#b388ff;text-shadow:0 0 10px rgba(179,136,255,0.4)}

.result-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:6px;margin:14px 0}
.stat-item{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:8px 4px;font-size:12px}
.stat-item span{font-size:10px;font-weight:700;letter-spacing:0.05em;margin-bottom:2px}
.stat-item b{font-size:16px;font-weight:800}

.stat-item.perfect span{color:#ffd166}
.stat-item.great span{color:#3de0ff}
.stat-item.cool span{color:#7bf1a8}
.stat-item.bad span{color:#c9a2b0}
.stat-item.miss span{color:#ff3d7f}

.result-actions{margin:14px 0}
.btn-ig{width:100%;padding:14px;font-size:15px;font-weight:700;color:#fff;background:linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);border:none;border-radius:12px;box-shadow:0 4px 15px rgba(220,39,67,0.4);cursor:pointer;transition:transform 0.15s, box-shadow 0.15s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-ig:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(220,39,67,0.6)}
.btn-ig:active{transform:translateY(1px)}

#name-form{margin-top:14px}
#name-form input{flex:1;padding:12px;font:inherit;background:#ffffff0c;border:1px solid var(--line);border-radius:10px;color:var(--ink)}

/* ---- lobby and rooms ---- */
.brand.small{margin:6px 0 16px}
.brand.small h1{font-size:26px}
.top-row{margin-bottom:14px}
.lob-list{display:flex;flex-direction:column;gap:4px;max-height:34vh;overflow-y:auto}
.lob-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#ffffff08;border-radius:8px;font-size:13.5px}
.lob-row.me{border:1px solid var(--gold)}
.lob-dot{width:8px;height:8px;border-radius:50%;background:#ffffff33;flex:0 0 8px}
.lob-dot.on{background:var(--good);box-shadow:0 0 8px var(--good)}
.lob-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lob-where{color:var(--dim);font-size:12px}
.room-card{align-items:center}
.btn.wide{width:100%;margin-top:10px}

/* ---- Audition-style live scoreboard during a race ---- */
#scoreboard{
  position:absolute;right:16px;top:70px;width:250px;z-index:6;
  background:rgba(12,10,22,0.85);border:1px solid rgba(255,255,255,0.15);
  border-radius:16px;padding:12px;box-shadow:0 8px 30px rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);
}
#scoreboard.hidden{display:none}
#scoreboard h4{font-size:11px;letter-spacing:.15em;color:rgba(255,255,255,0.5);margin-bottom:10px;font-weight:700;text-transform:uppercase}

#score-rows{display:flex;flex-direction:column;gap:8px}

.sb-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  background:linear-gradient(90deg, rgba(30,25,48,0.8), rgba(15,12,28,0.8));
  border:1px solid rgba(255,255,255,0.08);border-radius:12px;
  position:relative;transition:all 0.2s ease;
}
.sb-row.me{
  border:1px solid #ffd166;background:linear-gradient(90deg, rgba(60,45,20,0.85), rgba(30,22,10,0.85));
  box-shadow:0 0 15px rgba(255,209,102,0.3);
}
.sb-row.done{opacity:.65}

.sb-rank{
  font-size:16px;font-weight:900;font-style:italic;width:34px;text-align:center;
  flex-shrink:0;letter-spacing:-0.03em;
}
.sb-rank.rank-1{color:#ff4d4d;text-shadow:0 0 10px rgba(255,77,77,0.8), 0 0 20px rgba(255,77,77,0.5)}
.sb-rank.rank-2{color:#3de0ff;text-shadow:0 0 10px rgba(61,224,255,0.8), 0 0 20px rgba(61,224,255,0.5)}
.sb-rank.rank-3{color:#2ecc71;text-shadow:0 0 10px rgba(46,204,113,0.8), 0 0 20px rgba(46,204,113,0.5)}
.sb-rank.rank-other{color:rgba(255,255,255,0.4);font-size:14px}

.sb-avatar{
  width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg, #6c5ce7, #a29bfe);
  border:1.5px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,0.4);
}
.sb-row.me .sb-avatar{border-color:#ffd166;background:linear-gradient(135deg, #e17055, #fdcb6e)}

.sb-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sb-name{font-size:12px;font-weight:600;color:rgba(255,255,255,0.9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-score{font-size:16px;font-weight:900;font-family:'IBM Plex Sans Thai', sans-serif;letter-spacing:-0.02em}
.sb-score.gold{color:#ffee58;text-shadow:0 0 8px rgba(255,238,88,0.6)}
.sb-score.cyan{color:#00e5ff;text-shadow:0 0 8px rgba(0,229,255,0.5)}

@media (pointer:coarse){ #scoreboard{width:190px;top:60px;right:8px;padding:8px} .sb-avatar{width:26px;height:26px;font-size:12px} .sb-score{font-size:14px} }

/* ---- Recommended BPM Button & Box ---- */

/* ---- Room Live Chat Box ---- */
.room-chat-panel{margin-top:16px;padding:16px;background:rgba(18,14,32,0.7);border:1px solid rgba(255,255,255,0.1);border-radius:16px}
.chat-messages{
  height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;
  padding:10px;background:rgba(10,8,20,0.6);border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;margin:10px 0;
}
.chat-msg{display:flex;flex-direction:column;gap:2px;padding:6px 10px;background:rgba(255,255,255,0.05);border-radius:8px;font-size:12.5px;max-width:85%}
.chat-msg.me{align-self:flex-end;background:rgba(61,224,255,0.15);border:1px solid rgba(61,224,255,0.25)}
.chat-meta{font-size:10px;color:rgba(255,255,255,0.45);font-weight:600}
.chat-msg.me .chat-meta{color:rgba(61,224,255,0.8)}
.chat-text{color:#fff;word-break:break-word;line-height:1.35}
.chat-form{display:flex;gap:8px}
.chat-form input{flex:1;padding:10px 14px;font:inherit;font-size:13px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:10px;color:#fff}
.btn.small{padding:8px 16px;font-size:13px}

/* ---- profile ------------------------------------------------------- */
.me-chip{
  display:flex;align-items:center;gap:10px;width:100%;margin:0 0 10px;padding:8px 14px 8px 8px;
  background:#ffffff0d;border:1px solid var(--line);border-radius:999px;
  color:var(--ink);font:inherit;cursor:pointer;
}
.me-chip:hover{background:#ffffff1a;border-color:var(--hot)}
.chip-av{border-radius:50%;flex:0 0 auto}
.chip-text{text-align:left;line-height:1.2}
.chip-name{font-size:13.5px;font-weight:600}
.chip-sub{font-size:11px;color:var(--dim)}

/* ---- Profile & Auth Redesign -------------------------------------- */
.profile-screen{max-width:860px;margin:0 auto}
.pf-header{
  display:flex;align-items:center;justify-content:space-between;margin:6px 0 20px;
}
.pf-header .back{margin:0}
.pf-status-badge{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
  border-radius:999px;background:rgba(255,255,255,0.06);border:1px solid var(--line);
  font:inherit;font-size:12.5px;font-weight:600;color:var(--dim);cursor:default;
}
.pf-user-menu-wrap{position:relative}
.pf-status-badge.verified{
  background:rgba(255,209,102,0.12);border-color:rgba(255,209,102,0.35);color:var(--gold);
  cursor:pointer;user-select:none;transition:all 0.15s;
}
.pf-status-badge.verified:hover{
  background:rgba(255,209,102,0.22);border-color:var(--gold);
}
.pf-status-dot{
  width:8px;height:8px;border-radius:50%;background:var(--dim);
}
.pf-status-badge.verified .pf-status-dot{
  background:var(--gold);box-shadow:0 0 8px var(--gold);
}
.pf-badge-arrow{font-size:10px;margin-left:2px;color:var(--gold);transition:transform 0.15s}
.pf-status-badge[aria-expanded="true"] .pf-badge-arrow{transform:rotate(180deg)}
.pf-badge-arrow.hidden{display:none}

/* User Dropdown */
.pf-dropdown{
  position:absolute;top:calc(100% + 8px);right:0;z-index:100;
  min-width:180px;background:rgba(22,18,34,0.96);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,0.55);backdrop-filter:blur(12px);
  padding:6px;animation:dropdownFade 0.15s ease-out;
}
@keyframes dropdownFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.pf-dropdown.hidden{display:none}
.pf-dropdown-header{padding:8px 12px 6px}
.pf-dropdown-tag{display:block;font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.pf-dropdown-user{display:block;font-size:13.5px;font-weight:700;color:var(--gold);margin-top:2px}
.pf-dropdown-divider{height:1px;background:rgba(255,255,255,0.08);margin:4px 0}
.pf-dropdown-item{
  width:100%;display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:transparent;border:none;border-radius:8px;color:var(--ink);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left;
  transition:background 0.15s;
}
.pf-dropdown-item:hover{background:rgba(255,255,255,0.08)}
.pf-dropdown-item.danger{color:#ff5d5d}
.pf-dropdown-item.danger:hover{background:rgba(255,93,93,0.15);color:#ff7878}

/* Nav Tabs */
.pf-nav-tabs{
  display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:12px;
  overflow-x:auto;scrollbar-width:none;
}
.pf-tab-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;
  font:inherit;font-size:14px;font-weight:600;color:var(--dim);background:rgba(255,255,255,0.04);
  border:1px solid transparent;cursor:pointer;transition:all 0.15s;white-space:nowrap;
}
.pf-tab-btn:hover{color:var(--ink);background:rgba(255,255,255,0.08);border-color:var(--line)}
.pf-tab-btn.active{
  color:#fff;background:rgba(255,61,127,0.15);border-color:rgba(255,61,127,0.4);
  box-shadow:0 4px 16px rgba(255,61,127,0.15);
}
.tab-icon{font-size:16px}

/* Tab Content Transitions */
.pf-tab-content{display:none}
.pf-tab-content.active{display:block;animation:fadeInTab 0.2s ease-out}
@keyframes fadeInTab{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Card Styles */
.pf-card{
  background:rgba(18,15,30,0.75);border:1px solid var(--line);border-radius:18px;
  padding:22px;box-shadow:0 12px 36px rgba(0,0,0,0.3);backdrop-filter:blur(10px);
}
.pf-card-head{margin-bottom:18px}
.pf-card-head h3{font-size:17px;font-weight:700;margin:0 0 4px}

/* Avatar & Character Editor */
.pf-top{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.pf-avatar-box{
  display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto;
}
.pf-big{border-radius:50%;box-shadow:0 0 24px rgba(0,0,0,0.5)}
.pf-avatar-hint{font-size:11.5px;color:var(--dim)}
.pf-edit{flex:1;min-width:260px;display:flex;flex-direction:column;gap:14px}
.pf-label{font-size:12.5px;font-weight:600;color:var(--dim);display:block;margin-bottom:6px}
.form-group{display:flex;flex-direction:column}
.form-hint{font-size:11.5px;color:var(--dim);margin-top:4px}

#pf-name{
  padding:12px 14px;font:inherit;font-size:14.5px;color:var(--ink);
  background:rgba(255,255,255,0.06);border:1px solid var(--line);border-radius:10px;
}
#pf-name:focus{outline:none;border-color:var(--hot);box-shadow:0 0 12px rgba(255,61,127,0.25)}
.pf-shapes{display:flex;gap:8px;flex-wrap:wrap}
.pf-shape{
  padding:6px;background:rgba(255,255,255,0.05);border:1px solid var(--line);border-radius:12px;
  cursor:pointer;line-height:0;transition:all 0.15s;
}
.pf-shape:hover{border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.1)}
.pf-shape.on{border-color:var(--gold);background:rgba(255,209,102,0.2);box-shadow:0 0 12px rgba(255,209,102,0.3)}
.pf-colours{display:flex;gap:8px;flex-wrap:wrap}
.pf-colour{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform 0.15s}
.pf-colour:hover{transform:scale(1.15)}
.pf-colour.on{border-color:#fff;box-shadow:0 0 0 2px #000, 0 0 12px rgba(255,255,255,0.5)}
.pf-save-row{display:flex;align-items:center;gap:14px;margin-top:8px}
.pf-feedback{color:var(--good);font-weight:600}

/* Auth Section */
.pf-auth-container{max-width:540px;margin:0 auto}
.auth-switch-bar{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:rgba(255,255,255,0.05);
  border:1px solid var(--line);border-radius:14px;margin-bottom:18px;
}
.auth-switch-btn{
  padding:10px 14px;border:none;border-radius:10px;background:transparent;color:var(--dim);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:8px;transition:all 0.15s;
}
.auth-switch-btn:hover{color:var(--ink)}
.auth-switch-btn.active{
  background:var(--panel);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.35);border:1px solid var(--line);
}
.pf-auth-card{
  background:rgba(18,15,30,0.85);border:1px solid var(--line);border-radius:20px;
  padding:26px;box-shadow:0 16px 40px rgba(0,0,0,0.4);backdrop-filter:blur(12px);
}
.auth-card-banner{
  display:flex;align-items:center;gap:16px;margin-bottom:22px;padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.auth-icon-circle{
  width:48px;height:48px;border-radius:14px;background:rgba(255,61,127,0.15);
  border:1px solid rgba(255,61,127,0.3);display:flex;align-items:center;justify-content:center;
  font-size:22px;flex:0 0 auto;
}
.auth-card-banner h3{margin:0 0 4px;font-size:17px;font-weight:700}
.auth-form{display:flex;flex-direction:column;gap:16px}
.form-label{font-size:12.5px;font-weight:600;color:var(--dim);margin-bottom:6px;display:block}
.input-group{
  position:relative;display:flex;align-items:center;background:rgba(255,255,255,0.06);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color 0.15s;
}
.input-group:focus-within{border-color:var(--hot);box-shadow:0 0 12px rgba(255,61,127,0.25)}
.input-prefix{padding:0 0 0 14px;color:var(--dim);font-weight:700;font-size:15px;user-select:none}
.input-group input{
  flex:1;padding:12px 14px;background:transparent;border:none;color:var(--ink);
  font:inherit;font-size:14.5px;min-width:0;
}
.input-group input:focus{outline:none}
.btn-toggle-pwd{
  background:transparent;border:none;padding:0 14px;font-size:16px;cursor:pointer;
  opacity:0.6;transition:opacity 0.15s;
}
.btn-toggle-pwd:hover{opacity:1}
.full-width{width:100%;justify-content:center;padding:13px;font-size:15px;font-weight:700}
.auth-feedback{
  min-height:20px;font-size:13px;text-align:center;margin-top:4px;
}
.auth-feedback.error{color:#ff5d5d;font-weight:600}
.auth-feedback.success{color:var(--good);font-weight:600}
.auth-footer-link{
  display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;
  color:var(--dim);margin-top:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.06);
}
.link-btn{
  background:transparent;border:none;color:var(--hot);font:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.link-btn:hover{color:#fff}

/* Verified Account Card */
.pf-account-verified-card{
  background:rgba(18,15,30,0.85);border:1px solid rgba(255,209,102,0.3);border-radius:20px;
  padding:26px;box-shadow:0 16px 40px rgba(0,0,0,0.4);max-width:540px;margin:0 auto;
}
.verified-header{display:flex;gap:18px;align-items:flex-start}
.verified-icon{
  width:52px;height:52px;border-radius:16px;background:rgba(255,209,102,0.15);
  border:1px solid rgba(255,209,102,0.35);display:flex;align-items:center;justify-content:center;
  font-size:26px;flex:0 0 auto;
}
.verified-tag{
  font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;
}
.verified-user{margin:4px 0 6px;font-size:22px;font-weight:700;color:#fff}
.verified-actions{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.btn.danger-outline{
  background:rgba(255,93,93,0.1);border:1px solid rgba(255,93,93,0.3);color:#ff5d5d;font-weight:600;
}
.btn.danger-outline:hover{background:rgba(255,93,93,0.25);border-color:#ff5d5d;color:#fff}

/* Stats */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pf-stat{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:rgba(255,255,255,0.05);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:13.5px;
}
.pf-k{color:var(--dim)}
.pf-v{color:var(--gold);font-weight:700}

/* ---- lobby & room, laid out properly ------------------------------- */
.hd{display:flex;align-items:center;gap:12px;margin:6px 0 18px}
.hd .back{margin:0;flex:0 0 auto}
.hd-title{flex:1;font-size:22px;font-weight:700}
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  background:#ffffff0d;border:1px solid var(--line);font-size:12.5px;color:var(--dim);
}
.pill.live .pill-dot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good)}
.pill.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;
  color:var(--gold);border-color:#ffd16640;background:#ffd1661a;cursor:pointer;font-weight:700;
}
.pill.code:hover{background:#ffd16630}

.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.panel-head h3{font-size:15px}
.panel-head.spaced{margin:22px 0 10px}
.intro-panel{max-width:520px}

.lobby-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.lobby-main{min-width:0}
@media (max-width:820px){ .lobby-grid{grid-template-columns:1fr} }

.size-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.size-card{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 0;cursor:pointer;
  background:#ffffff08;border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit;
}
.size-card b{font-size:24px;line-height:1;color:var(--gold)}
.size-card span{font-size:11.5px;color:var(--dim)}
.size-card:hover{background:#ff3d7f1a;border-color:var(--hot)}

.room-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.room-card2{
  display:flex;flex-direction:column;gap:9px;padding:14px;text-align:left;cursor:pointer;
  background:#ffffff08;border:1px solid var(--line);border-radius:14px;color:var(--ink);font:inherit;
}
.room-card2:hover:not(:disabled){background:#ffffff14;border-color:var(--hot);transform:translateY(-1px)}
.room-card2:disabled{opacity:.45;cursor:not-allowed}
.rc-top{display:flex;align-items:center;gap:9px}
.rc-host{flex:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-code{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--dim);letter-spacing:.1em}
.rc-song{font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-seats{display:flex;align-items:center;gap:5px}
.seat{width:9px;height:9px;border-radius:50%;background:#ffffff1f}
.seat.on{background:var(--hot);box-shadow:0 0 7px #ff3d7f80}
.rc-count{margin-left:auto;font-size:11.5px;color:var(--dim)}

.people{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow-y:auto}
.person{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#ffffff08;border-radius:10px;font-size:13.5px}
.person.me{background:#ffd1661a;border:1px solid #ffd16640}
.person canvas{border-radius:50%;flex:0 0 auto}
.person-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-tag{font-size:11px;color:var(--dim);padding:3px 8px;border-radius:999px;background:#ffffff0d}
.person-tag.ready{color:#0a0910;background:var(--good);font-weight:700}
.person-tag.host{color:var(--gold);background:#ffd1661f}
.people-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;max-height:none}

.room-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media (max-width:820px){ .room-layout{grid-template-columns:1fr} }
.song-panel{display:flex;align-items:center;gap:14px;justify-content:space-between}
.song-panel-text{min-width:0}
.song-kicker{font-size:11px;letter-spacing:.12em;color:var(--dim)}
.song-line{font-size:14.5px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.action-bar{
  position:sticky;bottom:0;display:flex;align-items:center;gap:14px;justify-content:space-between;
  margin-top:16px;padding:12px 16px;background:#0f0d1ae6;border:1px solid var(--line);
  border-radius:14px;backdrop-filter:blur(8px);flex-wrap:wrap;
}
.action-buttons{display:flex;gap:10px;margin-left:auto}
.action-buttons .btn{min-width:130px}
.people-cards{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.person-tag.host{padding:3px 7px;color:var(--gold);font-size:12px;line-height:1}
.person-wait{
  width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  border:2px solid #ffffff2e;
}

/* ---- credits: a "?" in the header, spelled out in a modal ---------- */
.brand{position:relative}
.help-btn{
  position:absolute;top:4px;right:4px;width:32px;height:32px;border-radius:50%;
  font:inherit;font-size:16px;font-weight:700;color:var(--dim);cursor:pointer;
  background:#ffffff0c;border:1px solid var(--line);line-height:1;
}
.help-btn:hover{color:var(--ink);border-color:var(--hot);background:#ffffff14}

.modal{
  width:min(620px,92vw);max-height:82dvh;padding:0;margin:auto;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 60px #000000a6;backdrop-filter:blur(12px);overflow:hidden;
}
.modal::backdrop{background:#05040ac9;backdrop-filter:blur(3px)}
.modal-head{
  display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:1px solid var(--line);
}
.modal-head h3{flex:1;min-width:0;font-size:15px;font-weight:700}
.modal-x{
  width:30px;height:30px;border-radius:8px;font:inherit;font-size:14px;
  color:var(--dim);background:#ffffff0c;border:1px solid var(--line);cursor:pointer;
}
.modal-x:hover{color:var(--ink);background:#ffffff18}
.credits-body{
  padding:16px 18px 20px;display:flex;flex-direction:column;gap:9px;
  font-size:12.5px;line-height:1.65;color:var(--dim);
  max-height:calc(82dvh - 60px);overflow-y:auto;
}
.credits-body h4{
  font-size:14px;font-weight:700;color:var(--ink);margin:8px 0 2px;
  display:flex;align-items:center;gap:6px;
}
.credits-body h4:first-child{margin-top:0}
.credits-body ul{
  margin:0 0 4px;padding-left:18px;display:flex;flex-direction:column;gap:5px;
}
.credits-body ul ul{
  margin:3px 0 2px;gap:3px;
}
.credits-body li{
  color:var(--dim);
}
.credits-body code{
  font-family:inherit;font-size:11px;font-weight:700;
  padding:2px 6px;border-radius:5px;background:rgba(255,255,255,0.08);
  border:1px solid var(--line);color:var(--ink);
}
.credits-divider{
  height:1px;background:var(--line);margin:6px 0;
}
.credits-body b{color:var(--ink)}
.credits-body a{color:var(--hot)}
.credits-foot{margin-top:4px;padding-top:9px;border-top:1px solid var(--line);opacity:.8}

/* ---- somebody else's profile --------------------------------------- */
.who-id{flex:1;min-width:0}
.who-id h3{font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:10px;
  max-height:calc(82dvh - 66px);overflow-y:auto}
.who-head{font-size:12px;color:var(--dim);margin-top:6px;font-weight:600}
/* a name you can open reads as a link, wherever it is shown */
.who-link{cursor:pointer;text-decoration:underline;text-decoration-color:#ffffff33;
  text-underline-offset:3px}
.who-link:hover{color:var(--ink);text-decoration-color:var(--hot)}
.person.who-link:hover .person-name{color:var(--ink)}

/* iOS Autoplay Unlock Button */
.btn-ios-play{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:90;
  display:inline-flex;align-items:center;gap:10px;padding:16px 28px;
  background:rgba(255,61,127,0.92);color:#fff;border:2px solid #fff;border-radius:999px;
  font:inherit;font-size:15px;font-weight:700;box-shadow:0 8px 30px rgba(255,61,127,0.6);
  cursor:pointer;animation:pulsePlayBtn 1.2s infinite alternate;backdrop-filter:blur(8px);
}
@keyframes pulsePlayBtn{
  from{transform:translate(-50%,-50%) scale(1)}
  to{transform:translate(-50%,-50%) scale(1.06)}
}
.btn-ios-play.hidden{display:none}
/* The live site's CSP refuses style attributes, so spacing lives here. */
.section.flush{margin:0}
.section.spaced{margin-top:28px}

/* ---- pause ---------------------------------------------------------- */
.pause-veil{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  background:rgba(6,4,12,0.72);backdrop-filter:blur(6px);
}
.pause-veil.hidden{display:none}
.pause-card{
  width:min(420px,86vw);padding:24px;text-align:center;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,0.65);
}
.pause-card h3{font-size:20px;font-weight:800;margin-bottom:8px}
.pause-card .note{margin-bottom:18px;line-height:1.55}
.pause-actions{display:flex;flex-direction:column;gap:9px}

/* On a touch screen the top-left corner is crowded: the score drops to the
   bottom of the stage, between the thumb pads, and the song card keeps the
   corner to itself. */
@media (pointer:coarse), (max-height:600px){
  #hud{inset:0;align-items:flex-start;justify-content:flex-end;padding:10px 14px}
  .hud-left{position:absolute;left:0;right:0;bottom:8px;align-items:center;gap:0}
  #score{font-size:24px;line-height:1.1}
  .combo{font-size:12px;min-height:16px}
}

/* ---- the dancers' board -------------------------------------------- */
.hall{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.hall-row{
  display:flex;align-items:center;gap:12px;padding:9px 14px;
  background:#ffffff08;border:1px solid transparent;border-radius:12px;
}
.hall-row:hover{background:#ffffff12}
.hall-row.me{border-color:var(--gold);background:#ffd1660f}
.hall-rank{
  flex:0 0 42px;font-size:15px;font-weight:800;color:var(--dim);
  text-align:center;font-variant-numeric:tabular-nums;
}
.hall-av{flex:0 0 30px;width:30px;height:30px}
.hall-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.hall-name{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hall-sub{font-size:11px;color:var(--dim)}
.hall-score{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0}
.hall-score b{font-size:15px;color:var(--gold);font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .hall-sub{font-size:10px}
  .hall-rank{flex-basis:32px;font-size:13px}
}
/* a whole row as a link should not underline every number on it — the
   name carries the affordance */
.hall-row.who-link{text-decoration:none}
.hall-row.who-link .hall-name{
  text-decoration:underline;text-decoration-color:#ffffff33;text-underline-offset:3px;
}
.hall-row.who-link:hover .hall-name{text-decoration-color:var(--hot)}

/* ---- a picture of your own ------------------------------------------ */
.pf-photo-pick{display:inline-block;margin-top:10px;cursor:pointer;text-align:center}
.pf-avatar-note{display:block;margin-top:6px;font-size:10.5px;color:var(--dim);text-align:center}
#pf-photo-clear{margin-top:4px;font-size:11px}

/* ---- setting a room up before it exists ----------------------------- */
.setup-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:16px}
.setup-group{display:flex;flex-direction:column;gap:8px}
.size-card.on{border-color:var(--hot);background:#ff3d7f1f;color:var(--ink)}
.toggle-row{
  display:flex;align-items:center;gap:12px;padding:11px 14px;text-align:left;
  background:#ffffff08;border:1px solid var(--line);border-radius:12px;
  color:var(--dim);font:inherit;cursor:pointer;
}
.toggle-row .toggle-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.toggle-row b{font-size:13.5px;color:var(--ink)}
.toggle-dot{
  flex:0 0 18px;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--line);background:transparent;
}
.toggle-row.on{border-color:var(--hot);background:#ff3d7f14}
.toggle-row.on .toggle-dot{background:var(--hot);border-color:var(--hot);box-shadow:0 0 10px #ff3d7f88}
.setup-note{line-height:1.55}

/* ---- a room: talk in the middle, the room itself down the side ------ */
.room-talk .chat-messages{flex:1;min-height:220px}
.song-kicker{display:block;font-size:11px;color:var(--dim);margin-bottom:2px}
.song-line{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.info-block{display:flex;flex-direction:column;gap:10px;margin-bottom:0}
.info-block > h3{font-size:14px;font-weight:700}
.info-block.grow .people{max-height:38dvh;overflow-y:auto}
.info-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.info-row.col{flex-direction:column;align-items:stretch;gap:6px}
.info-k{color:var(--dim)}
.info-k b{color:var(--gold);font-variant-numeric:tabular-nums}
.select{
  padding:8px 10px;font:inherit;font-size:13px;color:var(--ink);
  background:#ffffff0c;border:1px solid var(--line);border-radius:9px;
}
.select:disabled{opacity:.55;cursor:not-allowed}
input[type=range]:disabled{opacity:.5}
.btn.full-width{width:100%}
.person-tag.waiting{background:#ffffff12;color:var(--dim)}

@media (max-width:820px){
  .room-grid{grid-template-columns:1fr}
  .info-block.grow .people{max-height:none}
}
/* the room's sliders in the room's colours, not the browser's */
.info-block input[type=range]{accent-color:var(--hot);width:100%}
.manual.offset input[type=range]{accent-color:var(--hot)}
/* who else is on the page, under the popular list */
.online-people{display:flex;flex-direction:column;gap:4px;max-height:40dvh;overflow-y:auto}
.online-people .person{padding:6px 10px;font-size:13px}
.pill.live{display:inline-flex;align-items:center;gap:6px}

/* ---- choosing a song without leaving the room ----------------------- */
.song-modal-body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:10px;
  max-height:calc(84dvh - 60px);overflow-y:auto}
.cards.one-col{grid-template-columns:1fr}
#modal-tempo .panel{margin-bottom:0}
#modal-tempo #bpm-stage{max-height:170px;overflow:hidden;border-radius:10px}
input.num{
  width:84px;padding:7px 9px;font:inherit;font-size:13px;color:var(--ink);
  background:#ffffff0c;border:1px solid var(--line);border-radius:9px;text-align:right;
}
input.num:disabled{opacity:.55}
.manual.offset input[type=number]{width:86px}
.btn.diff:disabled{opacity:.45;cursor:not-allowed}

/* ---- setting a song up before playing it --------------------------- */
.setup{display:flex;flex-direction:column;gap:16px}
.setup-head{display:flex;gap:14px;align-items:center}
.setup-head img{width:132px;aspect-ratio:16/9;object-fit:cover;border-radius:12px;flex-shrink:0}
.setup-head-text{min-width:0}
.setup-head h2{font-size:20px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chip-line{margin-top:6px;font-size:12px;color:var(--gold)}

.setup-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;align-items:start}
.setup-cols .panel{margin-bottom:0;display:flex;flex-direction:column;gap:12px}
.tempo-stage{border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9}
.tempo-stage iframe{width:100%;height:100%;border:0;display:block}
.tap-read{text-align:center;font-size:26px;font-weight:800;color:var(--gold);
  font-variant-numeric:tabular-nums}
.btn.tap{width:100%;padding:20px;font-size:15px;background:#ffffff12}

/* one way of writing a setting: a label, the control, a line of help */
.fields{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px}
.field-k{color:var(--dim)}
.field-k b{color:var(--gold);font-variant-numeric:tabular-nums}
.field-hint{font-size:11px;color:#8b8499;line-height:1.5}
.field-in{display:flex;align-items:center;gap:0;max-width:190px}
.field-in input{
  flex:1;min-width:0;padding:10px 12px;font:inherit;font-size:15px;color:var(--ink);
  background:#ffffff0c;border:1px solid var(--line);border-right:0;
  border-radius:10px 0 0 10px;font-variant-numeric:tabular-nums;
}
.field-in input:focus{outline:none;border-color:var(--hot)}
.field-in .unit{
  flex:0 0 auto;padding:10px 14px;font-size:12px;color:var(--dim);background:#ffffff08;
  border:1px solid var(--line);border-radius:0 10px 10px 0;white-space:nowrap;
}
.field input[type=range]{width:100%;accent-color:var(--hot)}
.field-row{display:flex;align-items:flex-end;gap:10px}
.field-row .field{flex:1}

/* ---- Dual Range Timeline Slider ---- */
.timeline-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.live-time{
  font-size:11px;font-weight:700;color:#35e6ff;background:rgba(53,230,255,0.12);
  border:1px solid rgba(53,230,255,0.35);padding:2px 8px;border-radius:999px;
  letter-spacing:0.3px;display:inline-flex;align-items:center;gap:4px;
  font-variant-numeric:tabular-nums;
}
.range-slider-wrap{
  position:relative;height:28px;display:flex;align-items:center;margin:4px 0 2px;
  user-select:none;
}
.range-track{
  position:absolute;left:0;right:0;height:6px;background:rgba(255,255,255,0.12);
  border-radius:3px;pointer-events:none;
}
.range-highlight{
  position:absolute;height:6px;background:linear-gradient(90deg, #ff3d7f, #3de0ff);
  border-radius:3px;pointer-events:none;z-index:1;left:0%;width:100%;
}
.range-playhead{
  position:absolute;top:-2px;bottom:-2px;width:2px;background:#ffffff;
  box-shadow:0 0 8px #35e6ff, 0 0 2px #ffffff;pointer-events:none;z-index:2;
  left:0%;transition:left 0.1s linear;
}
.range-playhead::after{
  content:'';position:absolute;top:-2px;left:-3px;width:8px;height:8px;
  border-radius:50%;background:#ffffff;box-shadow:0 0 6px #35e6ff;
}
.range-thumb{
  position:absolute;left:0;top:0;width:100%;height:100%;margin:0;
  background:none !important;pointer-events:none;
  -webkit-appearance:none;appearance:none;z-index:3;
}
.range-thumb::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:all;
  width:18px;height:18px;border-radius:50%;background:#ffffff;
  border:2.5px solid #ff3d7f;box-shadow:0 2px 6px rgba(0,0,0,0.6);
  cursor:grab;margin-top:0;
}
.range-thumb-max::-webkit-slider-thumb{border-color:#3de0ff}
.range-thumb::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.2)}
.range-thumb::-moz-range-thumb{
  pointer-events:all;width:18px;height:18px;border-radius:50%;background:#ffffff;
  border:2.5px solid #ff3d7f;box-shadow:0 2px 6px rgba(0,0,0,0.6);
  cursor:grab;
}
.range-thumb-max::-moz-range-thumb{border-color:#3de0ff}

/* Reverse Chips */
.reverse-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.reverse-chips .chip{
  flex:1;min-width:38px;padding:6px 4px;font:inherit;font-size:11.5px;
  font-weight:600;color:var(--dim);background:rgba(255,255,255,0.05);
  border:1px solid var(--line);border-radius:8px;cursor:pointer;
  text-align:center;transition:all 0.15s ease;
}
.reverse-chips .chip:hover{color:var(--ink);background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.25)}
.reverse-chips .chip.on{
  color:#fff;background:linear-gradient(135deg, #ff3d7f, #a81f4a);
  border-color:#ff3d7f;box-shadow:0 2px 8px rgba(255,61,127,0.4);
}

/* difficulty as a choice you make, not a button that leaves */
.start-panel .panel-head + .fields{margin-top:2px}
.start-panel .panel-head:nth-of-type(2){margin-top:6px}
.start-panel .diffs{display:flex;flex-direction:column;gap:8px}
.start-panel .diff{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:12px 14px;text-align:left;border:1px solid var(--line);background:#ffffff08;
}
.start-panel .diff b{font-size:14px;color:var(--ink)}
.start-panel .diff span{font-size:11.5px;color:var(--dim)}
.start-panel .diff.on{border-color:var(--hot);background:#ff3d7f1a}
.start-panel .diff.on b{color:var(--hot)}
.btn.big{width:100%;padding:16px;font-size:16px}
.btn.big:disabled{opacity:.45;cursor:not-allowed}

@media (max-width:900px){
  .setup-cols{grid-template-columns:1fr}
  .setup-head img{width:96px}
}

/* ---- the result, over the song it came from ------------------------- */
#result.on{position:relative;min-height:100dvh;padding-top:28px}
.result-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#05040a;pointer-events:none}
.result-bg iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:177.78dvh;height:56.25vw;min-width:100vw;min-height:100dvh;border:0;
}
.result-veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,#0a0910b3,#0a0910e6 55%,#0a0910f5);
  backdrop-filter:blur(3px);
}
.result-panel{
  position:relative;z-index:2;width:min(620px,100%);margin:0 auto;
  display:flex;flex-direction:column;gap:14px;text-align:center;padding-bottom:40px;
}

/* the grade, big, at the top of the board */
.result-rank-wrap{display:flex;justify-content:center}
.result-panel .rank-badge{
  width:132px;height:132px;font-size:76px;border-radius:32px;
  display:flex;align-items:center;justify-content:center;
  background:#0a0910b8;border:2px solid var(--gold);color:var(--gold);
  box-shadow:0 0 40px #ffd16640, inset 0 0 30px #ffd16618;
  text-shadow:0 0 24px #ffd16688;
}
.result-song-card{
  display:flex;align-items:center;gap:12px;text-align:left;
  padding:10px;border:1px solid var(--line);border-radius:16px;background:#12101ca8;
  backdrop-filter:blur(8px);
}
.result-song-card img{width:104px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;flex-shrink:0}
.result-song-text{min-width:0}
.result-song-text h2{font-size:16px;line-height:1.35;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* every panel on this screen sits on the video rather than hiding it */
#result .result-stats,#result .result-grid{gap:10px}
#result .stat-card,#result .stat-item,#result .board .b-row,#result .board-diff-row{
  background:#12101ca8;backdrop-filter:blur(8px);
}
#result .section{text-align:left}
.row.centred{justify-content:center}
.note.centred{text-align:center}
#result .board{text-align:left}

/* ---- a room: the song, the people, one button ----------------------- */
.room-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.room-head .hd-title{font-size:18px;font-weight:700;color:var(--ink);margin:0}

/* ---- Room Top Search & Stage Box Layout ---- */
.room-top-search-form{
  display:flex;gap:10px;width:100%;
}
.room-top-search-form input{
  flex:1;min-width:0;padding:12px 16px;font:inherit;font-size:14px;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.2);
}
.room-top-search-form input:focus{outline:none;border-color:var(--hot)}
.room-top-search-form .btn{
  min-width:90px;padding:10px 18px;border-radius:12px;font-weight:700;
}

.room-stage-box{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  min-height:380px;display:flex;flex-direction:column;padding:14px;
  box-shadow:0 4px 20px rgba(0,0,0,0.25);position:relative;
}
.room-empty-view{
  flex:1;width:100%;min-height:350px;background:#090810;
  border:1px solid rgba(255,255,255,0.06);border-radius:12px;
}

.room-search-view{display:flex;flex-direction:column;gap:10px;flex:1;width:100%}
.room-search-results{
  display:flex;flex-direction:column;gap:8px;max-height:330px;overflow-y:auto;padding-right:4px;
}
.room-search-results .card{
  display:flex;align-items:center;gap:12px;padding:10px 12px;min-height:68px;flex-shrink:0;
  border-radius:12px;background:rgba(255,255,255,0.04);border:1px solid var(--line);
  cursor:pointer;transition:all 0.15s ease;
}
.room-search-results .card:hover{
  background:rgba(255,61,127,0.12);border-color:var(--hot);transform:translateX(2px);
}
.room-search-results .card img{
  width:100px;height:56px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;
  flex:0 0 100px;background:#000;
}
.room-search-results .card .t{
  font-size:14px;font-weight:700;color:var(--ink);line-height:1.35;max-height:38px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.room-search-results .card .c{
  font-size:12px;color:var(--dim);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.room-preview-view{display:flex;flex-direction:column;gap:12px;width:100%}
.room-video-stage{
  width:100%;aspect-ratio:16/9;min-height:220px;max-height:300px;background:#000000;
  border-radius:12px;overflow:hidden;position:relative;
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.room-preview-info{
  display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;
  width:100%;gap:16px;margin-top:4px;
}
.room-preview-details{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;gap:4px;
}
.room-preview-title{font-size:16px;font-weight:700;color:var(--ink);line-height:1.35}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.chip{
  padding:4px 10px;font-size:11.5px;border-radius:999px;color:var(--dim);
  background:#ffffff0d;border:1px solid var(--line);white-space:nowrap;
}
.chip.hot{color:var(--gold);border-color:#ffd16659;background:#ffd1661a}

/* the people, read at a glance */
.people-row{display:flex;flex-wrap:wrap;gap:10px}
.person-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;width:104px;
  padding:10px 6px;background:#ffffff08;border:1px solid transparent;border-radius:14px;
}
.person-card canvas{border-radius:50%}
.person-card.is-ready{border-color:var(--good);background:#7bf1a814}
.person-card.is-ready canvas{box-shadow:0 0 0 3px var(--good)}
.person-card.is-host canvas{box-shadow:0 0 0 3px var(--gold)}
.person-card .person-name{
  font-size:12px;color:var(--ink);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-align:center;
}
.person-card .person-state{font-size:10.5px;color:var(--dim)}
.person-card.is-ready .person-state{color:var(--good)}
/* room grid & sidebar layout */
.room-grid{
  display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:stretch;
}
.room-grid .panel,
.room-main .panel,
.room-chat-panel,
.room-sidebar{
  margin-bottom:0 !important;
}
.room-main{display:flex;flex-direction:column;gap:14px;min-width:0;height:100%}
.room-stage-box{flex:0 0 auto}
.room-chat-panel{display:flex;flex-direction:column;gap:10px;padding:14px;flex:1;min-height:0}
.room-main-chat-list{flex:1;min-height:100px;max-height:200px;overflow-y:auto;font-size:13px}
.room-main-chat-form{display:flex;gap:8px}
.room-main-chat-form input{flex:1}

.room-sidebar{
  display:flex;flex-direction:column;justify-content:space-between;
  padding:0;overflow:hidden;min-height:560px;height:100%;
}
.room-sidebar-top{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}

/* Room Info Card */
.room-info-card{
  padding:12px 14px;background:rgba(255,255,255,0.03);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;flex-shrink:0;
}
.room-info-row{display:flex;align-items:center;justify-content:space-between}
.room-info-label{font-size:12px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px}
.room-code-badge{
  background:rgba(255,61,127,0.12);border:1px solid rgba(255,61,127,0.35);color:var(--ink);
  font-family:var(--font-mono,monospace);font-size:13px;font-weight:800;letter-spacing:1.5px;
  padding:4px 10px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;
  gap:6px;transition:all 0.15s ease;
}
.room-code-badge:hover{background:rgba(255,61,127,0.22);border-color:var(--hot)}
.room-info-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--dim)}
.room-status-badge{
  font-size:11px;font-weight:700;color:var(--good);background:rgba(123,241,168,0.1);
  padding:2px 8px;border-radius:999px;
}

.room-sidebar-tabs{display:flex;border-bottom:1px solid var(--line);background:rgba(255,255,255,0.02);flex-shrink:0}
.room-tab-btn{
  flex:1;padding:11px 12px;font:inherit;font-size:12.5px;font-weight:700;color:var(--dim);
  background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.15s ease;
}
.room-tab-btn:hover{color:var(--ink);background:rgba(255,255,255,0.05)}
.room-tab-btn.active{color:var(--ink);border-bottom-color:var(--hot);background:rgba(255,61,127,0.08)}

.room-tab-pane{display:none;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.room-tab-pane.active{display:flex}

#tab-pane-settings{overflow-y:auto}
#tab-pane-settings .settings-body{padding:12px 14px;flex-shrink:0}

#tab-pane-board{flex:1;min-height:0}
.room-board-container{padding:10px 12px;flex:1;min-height:0;overflow-y:auto}

/* Compact 3-Column Leaderboard Table for Sidebar */
.room-diff-board-table{width:100%;border-collapse:collapse;font-size:12px}
.room-diff-board-table th{
  font-size:11px;font-weight:700;color:var(--dim);text-align:left;
  padding:6px 6px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:#141122;z-index:2;
}
.room-diff-board-table th.col-score{text-align:right}
.room-diff-board-table td{
  padding:7px 6px;border-bottom:1px solid rgba(255,255,255,0.04);vertical-align:middle;
}
.room-diff-board-table tr:hover td{background:rgba(255,255,255,0.03)}
.room-diff-board-rank{font-weight:800;color:var(--dim);font-size:11px;width:28px}
.room-diff-board-rank.top1{color:#ffd166}
.room-diff-board-rank.top2{color:#e2e8f0}
.room-diff-board-rank.top3{color:#cd7f32}
.room-diff-board-player{display:flex;align-items:center;gap:6px;max-width:130px;overflow:hidden}
.room-diff-board-name{
  font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.room-diff-board-score{text-align:right}
.room-diff-board-score-val{font-weight:800;color:var(--ink)}
.room-diff-board-score.easy .room-diff-board-score-val{color:#7bf1a8}
.room-diff-board-score.normal .room-diff-board-score-val{color:#3de0ff}
.room-diff-board-score.hard .room-diff-board-score-val{color:#ff3d7f}
.room-diff-board-bpm{font-size:10px;color:var(--dim);display:block;margin-top:1px}

/* Compact Room Members List */
.room-members-section{
  padding:10px 14px;border-top:1px solid var(--line);background:rgba(255,255,255,0.015);
  display:flex;flex-direction:column;gap:8px;flex:1;min-height:100px;
}
.room-members-head{display:flex;align-items:center;justify-content:space-between}
.room-members-title{font-size:12px;font-weight:700;color:var(--dim)}
.ready-count-badge{font-size:11px;color:var(--ink)}
.room-members-table{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto}

.member-row-card{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;border-radius:8px;background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);transition:all 0.15s ease;
}
.member-row-card.me{border-color:rgba(255,61,127,0.4);background:rgba(255,61,127,0.06)}
.member-row-left{display:flex;align-items:center;gap:8px;overflow:hidden}
.member-avatar-cv{width:26px;height:26px;border-radius:50%;flex-shrink:0}
.member-name-txt{
  font-size:12px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px;
}
.member-status-tag{
  font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;flex-shrink:0;
}
.member-status-tag.host{color:var(--gold);background:rgba(255,209,102,0.12)}
.member-status-tag.ready{color:var(--good);background:rgba(123,241,168,0.12)}
.member-status-tag.waiting{color:var(--dim);background:rgba(255,255,255,0.05)}

.room-sidebar-footer{
  padding:12px 14px;border-top:1px solid var(--line);background:rgba(255,255,255,0.02);
  display:flex;flex-direction:column;gap:6px;
}
.room-sidebar-footer .btn.full-width{
  width:100%;min-height:44px;font-size:14.5px;font-weight:700;border-radius:12px;
}
.room-sidebar-note{
  font-size:11px;color:var(--dim);text-align:center;margin-bottom:2px;
}

@media (max-width:900px){
  .room-grid{grid-template-columns:1fr}
  .song-hero-meta-row{flex-direction:column;align-items:flex-start}
  .song-hero-actions{width:100%}
  .song-hero-actions .btn{flex:1}
}

/* A button that brings its own background has to bring its own hover too:
   the plain .btn hover paints a translucent white over it and the colour
   underneath disappears. */
.btn-lobby-main:hover:not(:disabled){
  background:linear-gradient(135deg,#ff5c95,#e30a63);
  box-shadow:0 6px 22px rgba(255,61,127,0.55);
  transform:translateY(-1px);
}
.btn-lobby-main:active:not(:disabled){transform:translateY(1px)}
.btn-ig:hover:not(:disabled){
  background:linear-gradient(45deg,#f5a04a,#ee7a4d,#e63a54,#d93a78,#cc2a9a);
}
/* a song you can go and play */
.b-row.playable{cursor:pointer}
.b-row.playable:hover{background:#ffffff14}
.b-row.playable .b-name{text-decoration:underline;text-decoration-color:#ffffff26;text-underline-offset:3px}
.b-row.playable:hover .b-name{text-decoration-color:var(--hot)}
/* a score you can open again */
.b-score.replayable{cursor:pointer;text-decoration:underline;text-decoration-color:#ffd16640;
  text-underline-offset:3px}
.b-score.replayable:hover{text-decoration-color:var(--gold)}

/* the effects switch: the same setting, wherever it is pressed */
.sfx-btn{padding:7px 10px;line-height:1}
.sfx-btn .sfx-icon{font-size:15px}
.toggle-row[data-sfx-toggle]{width:100%}

/* Drum Tap BPM Button & Modal */
.btn-tap-drum{
  background:rgba(255,61,127,0.12);border:1px solid rgba(255,61,127,0.4);color:var(--ink);
  padding:8px 14px;border-radius:12px;font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  transition:all 0.15s ease;flex-shrink:0;
}
.btn-tap-drum:hover{
  background:rgba(255,61,127,0.25);border-color:var(--hot);
  box-shadow:0 4px 14px rgba(255,61,127,0.35);transform:translateY(-1px);
}
.btn-tap-drum:active{transform:translateY(1px)}
.btn-tap-drum .drum-icon{font-size:16px}

.tap-bpm-dialog{max-width:500px;width:92%}
.tap-modal-body{display:flex;flex-direction:column;gap:16px;padding:16px 20px 20px}
.room-tap-stage{
  width:100%;aspect-ratio:16/9;max-height:200px;background:#000;
  border-radius:12px;overflow:hidden;position:relative;
}
.room-tap-stage iframe, .room-tap-stage #room-tap-yt{width:100%;height:100%;border:none}
.tap-modal-controls{display:flex;flex-direction:column;gap:14px}
.tap-modal-readout{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:rgba(255,255,255,0.04);padding:12px;border-radius:12px;border:1px solid var(--line);
}
.tap-readout-label{font-size:12px;color:var(--dim)}
.tap-readout-val{
  font-size:26px;font-weight:800;color:var(--cyan);text-shadow:0 0 12px rgba(61,224,255,0.4);
}
.btn-tap-beat-lg{
  font-size:16px;padding:14px 20px;font-weight:800;letter-spacing:0.5px;cursor:pointer;
  user-select:none;background:linear-gradient(135deg,#ff3d7f,#b30059);
  box-shadow:0 4px 16px rgba(255,61,127,0.4);
}
.btn-tap-beat-lg:active{transform:scale(0.97)}
.tap-modal-actions{display:flex;justify-content:flex-end;gap:10px}