/* rd-arcade.css — shared chrome for Rent's Due 3D arcade games (rd3d.js).
   The neon top bar, HUD, veils, buttons and toast — lifted from the 2D games so
   every three.js game looks like it belongs in the same arcade. Per-game markup
   lives in each game's HTML; this only styles the shared shell. */
:root{ --cyan:#00e6ff; --mag:#ff2bd6; --gold:#ffd166; --pur:#7a5cff; --hot:#ff3b6b; --bg:#05060d; }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; background:var(--bg); color:#eaf2ff; overflow:hidden;
  font-family:'Poppins',system-ui,sans-serif; user-select:none; }
#stage{ position:fixed; inset:0; }
#cv{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.arc{ font-family:'Orbitron','Poppins',sans-serif; letter-spacing:.06em; }

/* ---- top bar ---- */
#top{ position:absolute; top:0; left:0; right:0; z-index:20; display:flex; gap:12px; align-items:center;
  padding:14px 16px; pointer-events:none; }
#top .left{ display:flex; align-items:center; gap:10px; pointer-events:auto; flex:1 1 auto; min-width:0; }
#top .back{ flex:0 0 auto; }
#ctrls{ flex:0 0 auto; display:flex; gap:8px; pointer-events:auto; }
.ic{ cursor:pointer; width:38px; height:38px; border-radius:999px; border:1px solid #22314f;
  background:rgba(10,16,30,.66); color:#eaf2ff; font-size:16px; line-height:1; backdrop-filter:blur(6px); }
.ic:hover{ border-color:var(--cyan); }
.ic.off{ color:#7f93bb; }
.ic svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
a.back{ color:#9fb2d6; text-decoration:none; font-size:14px; border:1px solid #22314f; border-radius:999px;
  padding:7px 13px; background:rgba(10,16,30,.6); backdrop-filter:blur(6px); }
a.back:hover{ color:#fff; border-color:var(--cyan); }

/* ---- song picker ---- */
.songsel{ pointer-events:auto; display:flex; gap:5px; align-items:center; flex-wrap:nowrap; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; }
.songsel::-webkit-scrollbar{ display:none; }
.songsel .sl{ font-size:11px; letter-spacing:.1em; color:#7f93bb; text-transform:uppercase; margin-right:2px; }
.songsel button{ flex:0 0 auto; cursor:pointer; width:30px; height:30px; border-radius:999px; border:1px solid #2a3a5c;
  background:rgba(10,16,30,.66); color:#c3d3f0; font-family:'Orbitron','Poppins',sans-serif; font-weight:700; font-size:13px;
  backdrop-filter:blur(6px); transition:all .12s; }
.songsel button:hover{ border-color:var(--cyan); color:#fff; }
.songsel button.on{ color:#04121a; border-color:transparent; background:linear-gradient(90deg,var(--cyan),#7ef9ff); box-shadow:0 0 16px rgba(0,230,255,.5); }

/* ---- HUD ---- */
#hud{ position:absolute; z-index:4; left:0; right:0; top:60px; display:flex; justify-content:center;
  gap:26px; pointer-events:none; text-align:center; }
#hud .k{ font-size:11px; letter-spacing:.16em; color:#7f93bb; text-transform:uppercase; }
#hud .v{ font-size:25px; font-weight:900; }
#hud .v.score{ color:#fff; text-shadow:0 0 18px rgba(0,230,255,.5); }
#hud .v.notes{ color:var(--gold); text-shadow:0 0 18px rgba(255,209,102,.55); }
#hud .v.combo{ color:var(--mag); text-shadow:0 0 18px rgba(255,43,214,.55); }
#hud .v.best{ color:var(--pur); text-shadow:0 0 18px rgba(122,92,255,.55); }
#hud .v.lives{ letter-spacing:2px; }
#hud .v.lives .hf{ color:var(--hot); text-shadow:0 0 14px rgba(255,59,107,.8); }
#hud .v.lives .he{ color:#33405c; text-shadow:none; }

/* ---- centred call-outs (countdown, hit flash, combo pops) ---- */
#count{ position:absolute; z-index:8; left:50%; top:48%; transform:translate(-50%,-50%);
  font-weight:900; font-size:clamp(84px,18vw,190px); line-height:1; pointer-events:none; opacity:0;
  color:#fff; text-shadow:0 0 40px rgba(0,230,255,.8), 0 0 80px rgba(255,43,214,.6); }
#flash{ position:absolute; z-index:9; left:50%; top:42%; transform:translate(-50%,-50%); pointer-events:none; opacity:0;
  font-weight:900; font-size:clamp(28px,6.4vw,66px); line-height:1; letter-spacing:.05em; white-space:nowrap; color:#ffd166;
  text-shadow:0 0 22px currentColor, 0 0 46px currentColor; }

/* ---- veils (title / pause / game-over) ---- */
.veil{ position:absolute; inset:0; z-index:10; display:flex; flex-direction:column; align-items:center;
  justify-content:safe center; text-align:center; gap:15px; padding:64px 24px 26px; overflow-y:auto;
  background:radial-gradient(120% 90% at 50% 40%, rgba(10,14,28,.42), rgba(5,6,13,.84)); }
#endVeil, #pauseVeil{ background:radial-gradient(120% 90% at 50% 38%, rgba(9,11,24,.94), rgba(3,4,10,.985));
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.veil h1{ font-size:clamp(30px,7.5vw,68px); margin:0; line-height:.95;
  background:linear-gradient(90deg,var(--mag),var(--gold)); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 26px rgba(255,43,214,.35)); }
.veil p{ margin:0; color:#a9bbdd; max-width:540px; font-size:15px; }
.difflabel{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#7f93bb; margin-top:4px; }
.diffrow{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; pointer-events:auto; }
.diffrow button{ cursor:pointer; border:1px solid #2a3a5c; background:rgba(12,18,34,.6); color:#cddcff;
  border-radius:999px; padding:9px 16px; font-family:'Orbitron','Poppins',sans-serif; font-weight:700;
  font-size:13px; letter-spacing:.04em; transition:all .12s; }
.diffrow button:hover{ border-color:var(--cyan); color:#fff; }
.diffrow button.on{ background:linear-gradient(90deg,var(--cyan),#7ef9ff); color:#04121a; border-color:transparent;
  box-shadow:0 0 22px rgba(0,230,255,.5); }
.btn{ pointer-events:auto; cursor:pointer; border:0; border-radius:999px; padding:15px 38px;
  font-family:'Orbitron','Poppins',sans-serif; font-weight:900; font-size:18px; letter-spacing:.08em; color:#210018;
  background:linear-gradient(90deg,var(--mag),#ff86e6); box-shadow:0 0 34px rgba(255,43,214,.55); }
.btn:hover{ transform:translateY(-1px); box-shadow:0 0 46px rgba(255,43,214,.85); }
.btn.sm{ padding:12px 26px; font-size:15px; }
.btn.cy{ color:#04121a; background:linear-gradient(90deg,var(--cyan),#7ef9ff); box-shadow:0 0 30px rgba(0,230,255,.5); }
.btn.cy:hover{ box-shadow:0 0 42px rgba(0,230,255,.8); }
.btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-2px; margin-right:6px; }
.endbtns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.hint{ color:#8296bb; font-size:13px; }
.hint b{ color:#c3d3f0; }
.keys{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.keys span{ border:1px solid #2a3a5c; border-radius:8px; padding:6px 12px; font-size:13px; color:#c3d3f0;
  background:rgba(12,18,34,.6); font-family:'Orbitron','Poppins',sans-serif; }
.stat{ display:flex; gap:22px; margin-top:2px; flex-wrap:wrap; justify-content:center; }
.stat .b{ font-size:12px; letter-spacing:.14em; color:#7f93bb; text-transform:uppercase; }
.stat .n{ font-family:'Orbitron','Poppins',sans-serif; font-size:30px; font-weight:900; color:#fff; }
.muschip{ font-size:12px; color:#7fe0c0; border:1px solid #1e4a3e; background:rgba(10,30,24,.5); border-radius:999px; padding:5px 12px; }
.hidden{ display:none !important; }

/* ---- toast ---- */
.gtoast{ position:absolute; z-index:30; left:50%; bottom:26px; transform:translateX(-50%) translateY(10px);
  background:rgba(10,16,30,.92); color:#eaf2ff; border:1px solid #2a3a5c; border-radius:999px; padding:10px 18px;
  font-size:14px; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; backdrop-filter:blur(6px); }
.gtoast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* landscape nudge for phones held upright */
.landcue{ display:none; }
@media (max-width:820px) and (orientation:portrait){ .landcue{ display:block; } }
@media (max-width:520px){ #shareBtn{ display:none; } #top{ gap:8px; padding:12px 12px; } #hud{ gap:16px; top:56px; } #hud .v{ font-size:21px; } }

/* fat-finger targets on touch */
@media (pointer:coarse){
  .ic{ width:42px; height:42px; }
  .songsel button{ width:34px; height:34px; font-size:14px; }
  .diffrow button{ padding:11px 18px; }
}