/* Updated CSS for Spuds Rhythm Rave */
/* Copied from original style (2).css with mapper styles removed and minor fixes for responsiveness */

/* ===== Brand Theme ===== */
 :root {
  --ink:#e6f0ff;
  --muted:#a8b3c7;
  --accent:#C0FF1C;   /* neon brand */
  --accent-2:#3EFE51; /* brand green */
  --accent-3:#b78bfa; /* space purple */
  --bg-0:#050814;     /* deep space */
  --bg-1:#0a1024;     /* nebula panel */
  --border:#2a3558;
  --glow: 0 0 12px rgba(192,255,28,.75), 0 0 28px rgba(62,254,81,.25);
  --radius:14px;

  --text: var(--ink);
  --panel: var(--bg-1);
  --neon: var(--accent);
  --warn:#ffd400;
  --chip:#0c132e;
  --cover-fallback1:#0b1b2f;
  --cover-fallback2:#090f24;
}

/* Reset / Base */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% 10%, #0b0f24 0%, rgba(0,0,0,0) 60%),
    radial-gradient(900px 600px at 90% 0%, #140a2b 0%, rgba(0,0,0,0) 60%),
    linear-gradient(160deg, #000010, #03040e 40%, #000 100%);
  /* Use Orbitron for a space‑themed neon vibe; fall back to system fonts */
  font-family: 'Orbitron', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Trebuchet MS', sans-serif;
  overflow:hidden;
}

/* Space FX overlays */
.space-layers{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.nebula{ position:absolute; width:60vmax; height:60vmax; filter:blur(40px) saturate(140%);
  opacity:.28; mix-blend-mode:screen; border-radius:50%; }
.nebula.n1{ left:-15vmax; top:-10vmax; background:radial-gradient(closest-side, var(--accent-2) 0%, transparent 70%); }
.nebula.n2{ right:-20vmax; top:-12vmax; background:radial-gradient(closest-side, var(--accent) 0%, transparent 70%); }
.nebula.n3{ left:10vmax; bottom:-20vmax; background:radial-gradient(closest-side, var(--accent-3) 0%, transparent 70%); opacity:.22; }
.aurora{ position:absolute; inset:0; mask-image:radial-gradient(60% 60% at 50% 20%, #0000 40%, #000 100%);
  background: conic-gradient(from 0deg, #3EFE51aa, #C0FF1C66, #b78bfa55, #3EFE51aa);
  filter: blur(60px) saturate(130%); opacity:.12; }

/* Background canvases */
#bgStars, #bgEQ{ position:fixed; inset:0; width:100vw; height:100vh; display:block; pointer-events:none; }
#bgStars{ z-index:-3; }
#bgEQ{ z-index:-1; opacity:1; transition:opacity .25s ease; }

/* Screens */
.screen{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;
}
#game-container.screen{ flex-direction:column; gap:12px; }
.hidden{ display:none !important; }

/* Panels */
.panel{
  width:min(980px,94vw);
  max-height:92vh;
  overflow:hidden;
  /* Give panels a frosted‑glass look with subtle blur and transparency */
  background: linear-gradient(180deg, rgba(8,12,28,.75), rgba(8,12,28,.45));
  backdrop-filter: blur(6px);
  border:1px solid #14334a;
  border-radius:var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(0,255,255,.06) inset;
  padding:22px;
}

/* Allow the song select panel to scroll on small screens so bottom buttons
   remain accessible. This applies only to the song-select page. */
#song-select .panel {
  max-height: 88vh;
  overflow-y: auto;
}

/* Info row inside the game header containing the guest flag and instructions */
.game-header .info-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.game-header .guest-flag {
  /* Override absolute positioning for guest flag when placed in the header */
  position: static;
  font-size: 12px;
  color: var(--neon);
  font-weight: 800;
  pointer-events: none;
}
.game-header .info-row .hint {
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
}

/* Hide the info row on touch devices to reduce clutter on mobile */
@media (hover: none) and (pointer: coarse) {
  .game-header .info-row {
    display: none;
  }

  /* Hide the song-select keyboard hint on mobile (touch devices) */
  #song-select .panel .hint {
    display: none;
  }

  /* Hide the title-screen and song-select hints on mobile; touch players
     don't need keyboard instructions. */
  #title-screen .hint,
  #song-select .hint {
    display: none;
  }
  /* Hide any elements marked desktop-only on touch devices */
  .desktop-only {
    display: none !important;
  }
}

/* Also hide desktop-only elements on very small screens (as a fallback for browsers
   that do not correctly report pointer/hover capabilities) */
@media screen and (max-width: 700px) {
  .desktop-only {
    display: none !important;
  }
}

/* As an additional safeguard, hide keyboard hints on narrow screens (mobile) even if
   the browser does not correctly report pointer/hover capabilities. */
@media screen and (max-width: 700px) {
  #title-screen .hint,
  #song-select .hint {
    display: none !important;
  }
}

/* Type + FX */
.title-card{text-align:center}
.neon{ color:var(--neon); text-shadow:0 0 8px var(--neon), 0 0 26px var(--neon); }
.neon.big{ font-size: clamp(34px, 7vw, 64px); }
.neon.small{ letter-spacing:.5px; }
.blink{ animation: blink 1.1s infinite; } @keyframes blink{ 50%{ opacity:.25 } }
.float{ animation: float 3s ease-in-out infinite; } @keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.hint{ color:var(--muted); }

/* Dramatic entrance for each title line on the home screen */
.title-card h1{
  opacity:0;
  transform: translateY(20px);
  /* Combine the floating animation with our custom fade‑in */
  animation: float 4s ease-in-out infinite, titleFadeIn 1.2s forwards;
}
/* Stagger the fade in for each line */
.title-card h1:nth-child(1){ animation-delay: 0.0s, 0.0s; }
.title-card h1:nth-child(2){ animation-delay: 0.0s, 0.4s; }
.title-card h1:nth-child(3){ animation-delay: 0.0s, 0.8s; }

@keyframes titleFadeIn{
  to{ opacity:1; transform: translateY(0); }
}

/* Hide keyboard instructions on touch devices (phones/tablets) */
@media (hover: none) and (pointer: coarse) {
  .hud .hint{
    display:none;
  }
}

/* Carousel */
.carousel-wrap{ margin:8px 0 6px; }
.carousel{
  display:flex; gap:14px; padding:6px 8px 10px; margin:0; list-style:none;
  overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none;
  mask-image:linear-gradient(to right,transparent 0,black 4%,black 96%,transparent 100%);
}
.carousel::-webkit-scrollbar{ height:0; }
.carousel .card{
  position:relative; flex:0 0 240px; height:240px; border-radius:12px; overflow:hidden;
  border:2px solid rgba(0,255,240,.18);
  background: radial-gradient(600px 300px at 30% 0%, var(--cover-fallback1), var(--cover-fallback2));
  box-shadow: inset 0 0 20px rgba(0,255,240,.06);
  cursor:pointer; transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.carousel .card.active{
  transform: scale(1.06); border-color:var(--accent);
  box-shadow: var(--glow), inset 0 0 24px rgba(0,255,240,.12);
}
.card img{ width:100%; height:100%; object-fit:cover; display:block; }
.card .caption{
  position:absolute; left:0; right:0; bottom:0; padding:8px 10px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7));
  font-weight:900; letter-spacing:.4px;
}

/* Song details */
.song-details{ margin-top:8px; text-align:left; }
.song-details h3{ margin:6px 0 2px; }
.diff-rows .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0; }
.stars{ display:flex; gap:4px; }
.star{ font-size:18px; color:#243042; }
.star.filled{ color:var(--accent); text-shadow:0 0 6px var(--accent); }

/* Auth */
.auth-card{ width:min(460px,92vw); text-align:center; }
.tabs{ display:flex; gap:10px; justify-content:center; margin:10px 0; }
.tab-btn{
  padding:10px 18px; border-radius:10px; border:1px solid var(--border);
  background:#0c132e; color:#dbe7ff; cursor:pointer; font-weight:700;
}
.tab-btn.active{ background:var(--accent); color:#051600; box-shadow: var(--glow); }
.tab.hidden{ display:none !important; }
.tab input{
  width:100%; padding:12px 14px; margin:8px 0; border-radius:10px;
  border:1px solid var(--border); background:#0f1522; color:#e8f4ff; font-weight:600;
}
.tab button{
  width:100%; padding:12px 14px; margin-top:8px; border:none; border-radius:10px;
  background:var(--accent); color:#031b1f; font-weight:900; cursor:pointer; box-shadow: var(--glow);
}
.divider{ position:relative; margin:10px 0; }
.divider span{ color:#8fb; font-size:12px; opacity:.8; }
.guest-btn{
  width:100%; padding:12px 14px; border-radius:10px; border:2px dashed rgba(0,255,240,.25);
  background:#0b1320; color:#e8f4ff; font-weight:800; cursor:pointer;
}

/* Buttons */
.actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.actions.center{ justify-content:center; }
.ghost{
  background:#0c1322; color:#dbe7ff; border:1px solid var(--border);
  border-radius:10px; padding:10px 14px; cursor:pointer; box-shadow:none;
}
.ghost:hover{ box-shadow: var(--glow); }

/* Game */
/* Layout for the header on the game screen */
.game-header{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Groupings within the header */
/* Rows inside the game header */
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
/* Top row: spreads title/difficulty on the left and star bar + controls on the right */
.top-row .header-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.top-row .header-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
/* Stats row: groups score, combo and multiplier */
.stats-row{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  font-weight:900;
}
.stats-row > div{ font-size: clamp(14px, 3vw, 22px); }

/* Position the game frame relative so that child elements can be absolutely positioned */
.game-frame{ position:relative; }

/* HUD containers inside the header.  They simply group stats and the star bar. */
.hud-left{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
}
.hud-right{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
}
/* Guest flag appears near the bottom of the game box */
/* Instruction hint pinned to the bottom of the game box */
/* Hint/instructions inside the game box are pinned to the bottom */
#game-box .hint{
  position:absolute;
  bottom:6px;
  left:0;
  right:0;
  text-align:center;
  font-size:12px;
  color:var(--muted);
  pointer-events:none;
}
.user-controls{ display:flex; align-items:center; gap:8px; }
.welcome{ color:#bfe; font-weight:800; }

/* Player level indicator shown in the header when a user is logged in.  It
   uses the lime neon accent colour and a subtle glow to stand out. */
.player-level{
  color:#C0FF1C;
  font-size:0.85rem;
  font-weight:bold;
  text-shadow: 0 0 4px rgba(192,255,28,0.8);
}

#game-box{
  position:relative; margin:12px auto;
  width:100%; max-width:800px;
  aspect-ratio:4/3;
  background:#000; border:1px solid var(--border); border-radius:12px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.6);
}
#gameCanvas{ width:100%; height:100%; display:block; background:#0e1119; border-radius:10px; }

/* Popup layer inside game box */
.popup-layer{ position:absolute; inset:0; pointer-events:none; }
.popup{
  position:absolute; transform:translate(-50%,-50%); font-weight:900;
  color:#fff; text-shadow:0 0 10px #fff; letter-spacing:.05em;
  animation: fly 900ms ease forwards;
}
.popup.judge{ font-size:18px; }
.popup.big{ font-size:22px; }
.popup.huge{ font-size:28px; }
@keyframes fly{
  from{opacity:0; transform:translate(-50%, 10px) scale(.9);}  
  20%{opacity:1;}  
  to{opacity:0; transform:translate(-50%, -40px) scale(1);}  
}

/* Start hint overlay shown before the game begins */
.start-hint {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:clamp(20px, 4vw, 40px);
  color:var(--accent);
  text-shadow:0 0 10px var(--accent), 0 0 25px var(--accent);
       animation: blink 1.2s infinite;
       /* Allow pointer/touch interaction so tapping the hint can start the game */
       pointer-events:auto;
       user-select:none;
}

/* Bounce animation for score and combo numbers */
@keyframes scoreBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Apply bounce animation via the .bounce class */
.bounce {
  animation: scoreBounce 0.3s ease;
}

/* Star bar pulsing effect when star power is ready or active */
.starbar.pulsing .starbar-fill,
.starbar.pulsing .starbar-active {
  animation: starPulse 1.5s infinite;
}

@keyframes starPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.6); }
}

/* Add swirling galactic layers to the background for extra atmosphere */
.galaxy {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120vmax;
  height: 120vmax;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(192,255,28,0.15) 0%, rgba(62,254,81,0.08) 40%, transparent 70%);
  transform-origin: center;
  pointer-events: none;
}
.galaxy.gl1 {
  animation: rotateGalaxy 50s linear infinite;
}
.galaxy.gl2 {
  animation: rotateGalaxy 70s linear infinite reverse;
}
@keyframes rotateGalaxy {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.countdown{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:clamp(48px, 10vw, 120px); color:var(--neon);
  text-shadow:0 0 10px var(--neon), 0 0 30px var(--neon);
  animation:pop .6s ease both; pointer-events:none;
}
@keyframes pop{ 0%{transform:scale(.8); opacity:0} 40%{opacity:1} 100%{transform:scale(1); opacity:1} }

/* removed duplicate HUD flex definitions; the overlay HUD is defined above */
.mult{ color:var(--accent); text-shadow: var(--glow); }

/* Difficulty label shown during game */
.diff-display{
  font-weight:900;
  color:var(--accent);
  text-shadow: var(--glow);
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#0b1320;
}

/* Modal overlay for game menu */
.menu-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.6);
  z-index:999;
}
.menu-modal.hidden{ display:none !important; }
.menu-content{
  width:min(420px,92vw);
  max-height:90vh;
  overflow-y:auto;
}

/* Star Power bar */
.starbar{
  position:relative; width:220px; height:14px; border:1px solid var(--border);
  border-radius:999px; background:#071222; overflow:hidden;
  box-shadow: inset 0 0 12px rgba(0,0,0,.6);
}
.starbar::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(255,255,255,.18) calc(25% - 1px), rgba(255,255,255,.18) 25%);
}
.starbar-fill{ position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(90deg, #b78bfa55, #3EFE5166, #C0FF1Caa); opacity:.8; }
.starbar-active{ position:absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(90deg, #ffffff, #C0FF1C); mix-blend-mode:screen; box-shadow:0 0 14px #C0FF1C88; }

.hud .hint{ width:100%; }

/* Hide keyboard instructions on touch devices; mobile players use on‑screen controls */
@media (hover: none) and (pointer: coarse) {
  /* Hide only the in‑game hint on touch devices; other hints remain visible */
  #game-box .hint {
    display: none;
  }

  /* Hide guest message on mobile to reduce clutter */
  .guest-flag {
    display: none;
  }
}

/* Results modal styling */
.results-panel{
  /* Give results panels a frosted glass appearance */
  text-align:center;
  padding:20px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(8,12,28,.85), rgba(8,12,28,.6));
  backdrop-filter: blur(6px);
  border:1px solid #14334a;
  box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(0,255,255,.1) inset;
}

/* Stats layout inside results */
.results-summary .stat{
  margin:10px 0;
}
.stat-label{
  display:block;
  font-size:14px;
  color:var(--muted);
  margin-bottom:2px;
}
.stat-value{
  display:block;
  font-size:clamp(22px, 6vw, 42px);
  font-weight:900;
  color:var(--accent);
  text-shadow:0 0 8px var(--accent), 0 0 20px var(--accent);
}
.rank-badge{
  display:inline-block;
  padding:6px 16px;
  border-radius:14px;
  font-size:clamp(32px, 8vw, 64px);
  font-weight:900;
  color:#001;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  text-shadow:0 0 12px rgba(255,255,255,.7);
  box-shadow:0 0 20px rgba(0,255,240,.25);
}
.accuracy-bar{
  position:relative;
  height:14px;
  width:100%;
  background:#0c1322;
  border-radius:7px;
  overflow:hidden;
  margin-top:6px;
  box-shadow: inset 0 0 8px rgba(0,0,0,.5);
}
.accuracy-bar .fill{
  height:100%;
  width:0;
  background: linear-gradient(90deg, #b78bfa, #3EFE51, #C0FF1C);
  transition: width .6s ease;
  border-radius:7px;
}

.results-actions button{
  width:100%;
}

/* Boards */
.boards{ margin-top:10px; }
.board-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.board-grid h4{ margin:6px 0; color:var(--neon); }
.board-grid ol{ margin:0; padding-left:18px; text-align:left; color:#ffea6b; }
.board-grid li{ margin:2px 0; }

/* Top scores list on song select */
.top-scores{
  margin-top:10px;
  padding-top:4px;
  border-top:1px solid var(--border);
}
.top-scores h4{
  margin:4px 0;
  color:var(--neon);
}
.top-scores ol{
  margin:0;
  padding-left:18px;
  color:#ffea6b;
  font-size:14px;
}
.top-scores li{
  margin:2px 0;
}

/* Friend toggle button used in leaderboards for adding/removing friends. */
.friend-btn {
  background: none;
  border: none;
  color: #C0FF1C;
  font-size: 1rem;
  cursor: pointer;
  margin-left: 6px;
  transition: transform 0.1s;
}
.friend-btn:hover {
  transform: scale(1.2);
}

/* Leaderboards page styling */
.lb-song-section{
  margin-bottom:24px;
  padding:12px;
  border-radius:8px;
  background:rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
}
.lb-song-section h3{
  margin:4px 0;
  color:var(--neon);
}
.lb-diff-section{
  margin-left:12px;
  margin-top:6px;
}

/* Make the leaderboards panel scrollable on small screens. On devices with
   limited vertical space, allow the leaderboards content to scroll within
   the panel so the PP rankings and all song sections remain accessible. */
.lb-panel{
  /* Use 85vh to leave room for margins and padding on mobile */
  max-height: 85vh;
  overflow-y: auto;
}

/* ===== Profile Page ===== */
/* A responsive grid layout for displaying achievement cards.  Each card
   represents an achievement and shows its icon, name and description.
   Unlocked cards glow with the lime accent colour. */
.achievements-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
  margin-top:8px;
}
.achievement-card{
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  color:#88a;
  transition: transform 0.2s, box-shadow 0.2s;
}
.achievement-card.unlocked{
  background: rgba(40,60,20,0.5);
  border-color: #C0FF1C;
  color:#C0FF1C;
  box-shadow: 0 0 6px rgba(192,255,28,0.6);
}
.achievement-card:hover{
  transform: scale(1.05);
}
.ach-icon{
  font-size:2rem;
  margin-bottom:6px;
}
.ach-title{
  font-weight:bold;
  margin-bottom:4px;
}
.ach-desc{
  font-size:0.75rem;
}
.daily-challenge p{
  margin:4px 0;
  font-size:0.9rem;
}
.daily-challenge p:first-child{
  font-weight:bold;
  color:#C0FF1C;
}

/* ----- Custom Scrollbars ----- */
/* Apply custom scrollbar styling for WebKit browsers (Chrome, Edge, Safari).
   The scrollbar uses our neon green colour palette and glows when hovered.
   These rules will apply to all scrollable elements, including the
   leaderboards panel and song-select panel. */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(192, 255, 28, 0.6);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
}

/* Difficulty chips */
.diff{ display:flex; gap:8px; padding:6px; border-radius:12px; background:#0c1421; border:1px solid var(--border); }
.chip{
  padding:8px 12px; border-radius:10px; border:none; cursor:pointer; font-weight:900;
  background:var(--chip); color:#dff; letter-spacing:.5px;
  box-shadow: inset 0 0 0 2px rgba(0,255,240,.18);
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.chip:hover{ transform: translateY(-1px); }
.chip.active{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#022; box-shadow: var(--glow); }

/* ---- Touch section ---- */
.touch-pad{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  max-width:800px;
  margin:10px auto 0;
  position:relative;
  z-index:10;
}
.touch-pad--small .lane-btn{ height:64px; }
.lane-btn{
  border-radius:14px;
  border:1px solid var(--border);
  background:#0c1322;
  display:grid; place-items:center;
  padding:0;
  touch-action:none; user-select:none; -webkit-user-select:none;
  box-shadow: inset 0 0 14px rgba(0,0,0,.35);
  transition: transform .06s ease, box-shadow .12s ease;
}
.lane-btn img{
  width:68%; height:auto; pointer-events:none;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.35));
}
.lane-btn:active, .lane-btn.active{
  transform: translateY(-2px);
  box-shadow: var(--glow);
}
.touch-ctl{
  display:flex; justify-content:center; gap:10px;
  max-width:800px; margin:8px auto 2px;
  position:relative;
  z-index:10;
}

/* Hide touch controls on devices with hover/mouse input (desktops) */
@media (hover: hover) and (pointer: fine) {
  #touchPad,
  .touch-ctl {
    display: none !important;
  }
}

/* Optional: scale pads on small screens */
@media (max-width:700px){
  .touch-pad--small .lane-btn{ height:16vw; }
}

/* Responsive tweaks */
@media (max-width: 900px){ .carousel .card{ flex-basis:210px; height:210px; } }
@media (max-width: 860px){ .board-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 520px){ .board-grid{ grid-template-columns:1fr; } }

/* Make title screen clearly tappable */
#title-screen { cursor: pointer; }
#title-screen .panel { user-select: none; -webkit-user-select: none; }

/* ===== Player summary table (Profile page) ===== */
.player-summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  color: var(--fg);
  font-size: 14px;
}
.player-summary-table thead th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.player-summary-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.player-summary-table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.03);
}