/* ============================================
   SHARED 3D UI — Premium depth & polish
   Injected into all games for consistent look
   ============================================ */

/* ---- START SCREEN ---- */
#start-screen,
[id*="startScreen"],
.start-screen {
  background: linear-gradient(180deg, rgba(0,0,20,0.95) 0%, rgba(0,0,0,0.92) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Start screen panels/cards */
#start-screen > div,
#start-screen .panel,
#startScreen > div,
.start-screen > div {
  background: linear-gradient(145deg, rgba(40,40,60,0.95) 0%, rgba(20,20,35,0.98) 100%) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 20px !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset,
    0 0 0 1px rgba(255,255,255,0.04) !important;
  padding: 28px 24px !important;
}

/* ---- 3D BUTTONS ---- */
#start-screen button,
#startScreen button,
.start-screen button,
.play-btn,
#start-btn,
#startBtn,
#restartBtn,
.restart-btn,
button.start,
button.play {
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.1) 100%),
              linear-gradient(135deg, #4a90d9 0%, #357abd 50%, #2a6ab0 100%) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-bottom: 2px solid rgba(0,0,0,0.3) !important;
  border-radius: 14px !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
  box-shadow:
    0 4px 15px rgba(0,0,0,0.3),
    0 2px 4px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
  position: relative !important;
}

/* Button 3D press effect */
#start-screen button:active,
.play-btn:active,
#start-btn:active,
#startBtn:active,
#restartBtn:active,
.restart-btn:active {
  transform: translateY(2px) scale(0.98) !important;
  box-shadow:
    0 1px 4px rgba(0,0,0,0.3),
    0 1px 2px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.1) !important;
  border-bottom-width: 1px !important;
}

/* ---- BACK BUTTON 3D ---- */
#game-back-btn {
  background: linear-gradient(145deg, rgba(60,60,80,0.7) 0%, rgba(30,30,50,0.8) 100%) !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  border-bottom: 2px solid rgba(0,0,0,0.3) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.4),
    0 1px 3px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
#game-back-btn:active {
  transform: scale(0.92) translateY(1px) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* ---- HELP / ? BUTTON 3D ---- */
button[id*="help"],
button[id*="Help"],
#htpBtn {
  background: linear-gradient(145deg, rgba(60,60,80,0.7) 0%, rgba(30,30,50,0.8) 100%) !important;
  border: 1.5px solid rgba(255,255,255,0.15) !important;
  border-bottom: 2px solid rgba(0,0,0,0.3) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ---- GAME OVER / MODAL PANELS ---- */
#gameOver,
#game-over,
[id*="gameOver"],
[id*="game-over"],
.game-over {
  background: linear-gradient(180deg, rgba(0,0,20,0.92) 0%, rgba(0,0,0,0.95) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

#gameOver > div,
#game-over > div,
#gameOver .panel,
.game-over .panel,
[id*="gameOver"] > div:first-child,
[id*="game-over"] > div:first-child {
  background: linear-gradient(145deg, rgba(40,40,55,0.97) 0%, rgba(20,20,30,0.99) 100%) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 20px !important;
  box-shadow:
    0 25px 80px rgba(0,0,0,0.6),
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(255,255,255,0.04) !important;
  padding: 28px !important;
}

/* ---- HELP OVERLAY PANELS ---- */
#helpOverlay .content,
#htpOverlayBox,
[id*="helpOverlay"] .content,
.help-overlay .content {
  background: linear-gradient(145deg, rgba(40,40,60,0.97) 0%, rgba(22,22,38,0.99) 100%) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 20px !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.08) inset !important;
}

/* ---- SCORE / HUD DISPLAYS ---- */
#scoreDisplay,
#score,
.score,
[id*="score"]:not(button):not(input) {
  text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 20px rgba(255,255,255,0.1) !important;
}

/* ---- TOP BAR GLASS EFFECT ---- */
#topBar,
.top-bar,
#hud {
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 100%) !important;
}