/* =========================================================
   BLASTER CARTOON ARCADE 3D THEME (EXACT MATCH MOCKUP)
   Replicates media_1789144292584.jpg
   ========================================================= */

:root {
  --cartoon-font-head: 'Fredoka', 'Impact', sans-serif;
  --cartoon-font-body: 'Nunito', -apple-system, sans-serif;
  --cartoon-blue: #155DFC;
  --cartoon-blue-dark: #0F3CA8;
  --cartoon-blue-light: #93C5FD;
  --cartoon-orange: #EA580C;
  --cartoon-orange-dark: #9A3412;
  --cartoon-orange-light: #FDBA74;
  --cartoon-green: #22C55E;
  --cartoon-green-dark: #15803D;
  --cartoon-yellow: #FBBF24;
  --cartoon-card-bg: #FFFFFF;
}

/* Background Scene */
html, body {
  margin: 0;
  height: 100%;
  background: #000000 !important;
  font-family: var(--cartoon-font-body) !important;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

/* In lobby: body shows cartoon stadium */
body:has(.screen.launch-screen.show),
body.in-lobby {
  background: url('/ui/cartoon/hub-bg-clean.jpg') center center / cover no-repeat fixed #38bdf8 !important;
}

/* 3D Canvas:
   - Hidden ONLY when on the main launch lobby so stadium wallpaper is shown behind the hub card
   - 100% visible and interactive everywhere else (gameplay, pause, game over) */
canvas#c {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

body:has(.screen.launch-screen.show) canvas#c,
body.in-lobby canvas#c {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* In gameplay: canvas is definitely visible */
body.in-game canvas#c,
body:not(:has(.screen.launch-screen.show)):not(.in-lobby) canvas#c {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Top Account Bar:
   - Visible in lobby / launcher
   - Hidden during gameplay so it never covers the game HUD */
body.in-game .cp-account-bar,
body:not(:has(.screen.launch-screen.show)):not(.in-lobby) .cp-account-bar {
  display: none !important;
  pointer-events: none !important;
}

/* Floating Mobile HUD:
   - Hidden in lobby so fullscreen button never overlaps settings gear
   - Visible in-game */
body:has(.screen.launch-screen.show) .top-mobile-hud,
body.in-lobby .top-mobile-hud {
  display: none !important;
  pointer-events: none !important;
}

body.in-game .top-mobile-hud,
body:not(:has(.screen.launch-screen.show)):not(.in-lobby) .top-mobile-hud {
  display: flex !important;
  pointer-events: auto !important;
}

/* Base Panels & Reset of notebook theme on main launcher */
.screen.launch-screen {
  background: transparent !important;
  padding: 66px 16px 12px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

.panel.launch-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 960px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.panel.launch-panel::before,
.panel.launch-panel::after,
.panel.launch-panel .window-strip,
.panel.launch-panel .launch-nav {
  display: none !important;
}

.panel .launch.notebook-home {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 960px !important;
  margin: 0 auto !important;
}

.panel .notebook-home .launch-body.home-body {
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
}

.home-start-unified {
  display: none !important;
}

/* =========================================================
   TOP HEADER BAR (#cp-account-bar)
   ========================================================= */
.cp-account-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 66px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 36px 6px 30px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

.cartoon-header-left {
  display: flex !important;
  align-items: center !important;
}

.cartoon-brand {
  cursor: pointer !important;
  transition: transform 0.15s ease !important;
}
.cartoon-brand:hover {
  transform: scale(1.02) !important;
}
.cartoon-brand-img {
  height: 58px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)) !important;
  display: block !important;
}

.cartoon-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Pills (Profile & Coins) */
.cartoon-pill-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border-radius: 9999px !important;
  padding: 4px 14px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.14), inset 0 1px 0 #ffffff !important;
  border: 2px solid #e2e8f0 !important;
  font-family: var(--cartoon-font-head) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, border-color 0.15s ease !important;
  text-decoration: none !important;
  color: #1e293b !important;
}
.cartoon-pill-badge:hover {
  transform: translateY(-2px) !important;
  border-color: #93c5fd !important;
}
.pill-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1.5px solid #3b82f6 !important;
}
.pill-name {
  color: #1e293b !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
.pill-arrow {
  color: #2563eb !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.coins-pill {
  padding: 4px 6px 4px 12px !important;
  cursor: pointer !important;
}
.pill-coin-icon {
  font-size: 20px !important;
  line-height: 1 !important;
}
.pill-coin-val {
  color: #1e293b !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}
.pill-add-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 0 #15803d !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: transform 0.1s ease !important;
}
.pill-add-btn:hover {
  background: #16a34a !important;
  transform: scale(1.08) !important;
}

/* Blue 3D Header Buttons: AJUDA ? and Settings */
.cartoon-header-btn {
  background: #155dfc !important;
  color: #ffffff !important;
  font-family: var(--cartoon-font-head) !important;
  font-weight: 900 !important;
  border: 2px solid #0f3ca8 !important;
  box-shadow: 0 4px 0 #0f3ca8 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-transform: uppercase !important;
}
.cartoon-header-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 #0f3ca8 !important;
  background: #1d4ed8 !important;
}
.cartoon-header-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #0f3ca8 !important;
}
.btn-ajuda {
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  border-radius: 9999px !important;
  padding: 8px 18px !important;
  height: 38px !important;
}
.btn-settings {
  font-size: 20px !important;
  border-radius: 12px !important;
  width: 40px !important;
  height: 38px !important;
  padding: 0 !important;
}
.btn-fullscreen {
  font-size: 19px !important;
  border-radius: 12px !important;
  width: 40px !important;
  height: 38px !important;
  padding: 0 !important;
}

/* =========================================================
   CENTRAL FLOATING WHITE CARD (.cartoon-hub-card)
   ========================================================= */
.cartoon-hub-card {
  background: #ffffff !important;
  border-radius: 36px !important;
  box-shadow: 0 20px 48px rgba(0, 32, 90, 0.22), 0 2px 8px rgba(0,0,0,0.06) !important;
  padding: 16px 26px 18px !important;
  width: 100% !important;
  max-width: 940px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Header inside Card */
.cartoon-card-header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  padding: 0 0 2px 0 !important;
}

.cartoon-title-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.cartoon-main-title {
  font-family: var(--cartoon-font-head) !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #155dfc !important;
  letter-spacing: 1.2px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-shadow: 1px 1px 0 rgba(21, 93, 252, 0.15) !important;
  line-height: 1.1 !important;
}

.cartoon-sub-title {
  font-family: var(--cartoon-font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #4b5563 !important;
  margin: 3px 0 0 0 !important;
}

.sparkle-dash {
  color: #fbbf24 !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: -2px !important;
}

/* Speech bubble with robot head */
.cartoon-speech-wrapper {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: block !important;
}

.cartoon-speech-bubble-img {
  height: 38px !important;
  width: auto !important;
  display: block !important;
  filter: drop-shadow(0 2px 6px rgba(250, 204, 21, 0.25)) !important;
}

/* =========================================================
   TWO GAME CARDS GRID (.cartoon-games-grid)
   ========================================================= */
.cartoon-games-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 630px !important;
  margin: 4px auto 0 auto !important;
}
@media (max-width: 600px) {
  .cartoon-games-grid {
    grid-template-columns: 1fr !important;
  }
}

.cartoon-game-card {
  border-radius: 16px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  border: 3px solid transparent !important;
  max-height: 145px !important;
  aspect-ratio: 378 / 200 !important;
}

.cartoon-game-card.card-shot {
  border-color: #3b82f6 !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.2) !important;
}
.cartoon-game-card.card-shot:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35) !important;
}
.cartoon-game-card.card-shot.selected {
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px #bfdbfe, 0 10px 28px rgba(29, 78, 216, 0.4) !important;
}

.cartoon-game-card.card-car {
  border-color: #f59e0b !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2) !important;
}
.cartoon-game-card.card-car:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35) !important;
}
.cartoon-game-card.card-car.selected {
  border-color: #d97706 !important;
  box-shadow: 0 0 0 3px #fde68a, 0 10px 28px rgba(217, 119, 6, 0.4) !important;
}

.cartoon-game-card.card-motobox {
  border-color: #ea580c !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.2) !important;
}
.cartoon-game-card.card-motobox:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.4) !important;
}
.cartoon-game-card.card-motobox.selected {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px #fecaca, 0 10px 28px rgba(220, 38, 38, 0.45) !important;
}

.cartoon-game-card.card-bomberboy {
  border-color: #9333ea !important;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.2) !important;
}
.cartoon-game-card.card-bomberboy:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(147, 51, 234, 0.4) !important;
}
.cartoon-game-card.card-bomberboy.selected {
  border-color: #7e22ce !important;
  box-shadow: 0 0 0 3px #e9d5ff, 0 10px 28px rgba(126, 34, 206, 0.45) !important;
}

.game-card-full-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 13px !important;
}

.game-card-preview-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important;
  border-radius: 13px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.cartoon-game-card:hover .game-card-preview-video {
  opacity: 1 !important;
}

.preview-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: #fbbf24 !important;
  font-family: var(--cartoon-font-head) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(251, 191, 36, 0.6) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  pointer-events: none !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
}
.cartoon-game-card:hover .preview-badge {
  opacity: 1 !important;
}

.hub-hint-footer {
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  padding: 4px 0 !important;
  font-family: var(--cartoon-font-body) !important;
}

/* =========================================================
   DEDICATED MODE SELECTION SCREEN
   ========================================================= */
.cartoon-mode-select-screen {
  gap: 12px !important;
}

.mode-screen-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding-bottom: 6px !important;
  border-bottom: 2px solid #f1f5f9 !important;
}

.mode-screen-title-group {
  text-align: right !important;
}

.back-to-lobby-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #f8fafc !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 9999px !important;
  padding: 6px 16px !important;
  font-family: var(--cartoon-font-head) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}
.back-to-lobby-btn:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  transform: translateY(-1px) !important;
  color: #0f172a !important;
}

.mode-screen-content {
  display: flex !important;
  gap: 16px !important;
  width: 100% !important;
  align-items: stretch !important;
}
@media (max-width: 700px) {
  .mode-screen-content {
    flex-direction: column !important;
  }
}

.mode-card-preview {
  flex: 0 0 240px !important;
  max-width: 240px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
  display: flex !important;
  align-items: center !important;
}

.mode-preview-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 16px !important;
}

.mode-selection-drawer {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #f8fafc !important;
  border-radius: 18px !important;
  padding: 12px 18px !important;
  border: 2px solid #e2e8f0 !important;
}

.mode-screen-actions {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  padding-top: 6px !important;
  border-top: 2px solid #f1f5f9 !important;
}

.back-btn-secondary {
  background: #f1f5f9 !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 9999px !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.back-btn-secondary:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

.mode-info-box {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  font-family: var(--cartoon-font-body) !important;
}

.maps-preview-row.mini {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}
.maps-preview-row.mini .cartoon-map-thumb {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 4px !important;
  border-radius: 10px !important;
  border: 2px solid #e2e8f0 !important;
  background: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #475569 !important;
  transition: all 0.15s ease !important;
}
.maps-preview-row.mini .cartoon-map-thumb.selected,
.maps-preview-row.mini .cartoon-map-thumb:hover {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  transform: scale(1.04) !important;
}
.maps-preview-row.mini .map-card-img {
  width: 68px !important;
  height: 40px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

/* =========================================================
   VEJA OS MAPAS SECTION
   ========================================================= */
.cartoon-maps-section {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin-top: 2px !important;
}

.cartoon-maps-title {
  font-family: var(--cartoon-font-head) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #155dfc !important;
  text-align: center !important;
  margin: 2px 0 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  letter-spacing: 1px !important;
}

.cartoon-maps-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  width: 100% !important;
}

.cartoon-maps-box {
  border-radius: 18px !important;
  padding: 6px 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.cartoon-maps-box.box-shot {
  border: 1.5px solid #93c5fd !important;
  background: #f0f9ff !important;
}
.cartoon-maps-box.box-car {
  border: 1.5px solid #fdba74 !important;
  background: #fff7ed !important;
}

.maps-box-title {
  font-family: var(--cartoon-font-head) !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin: 0 !important;
  letter-spacing: 0.8px !important;
}
.box-shot .maps-box-title { color: #1d4ed8 !important; }
.box-car .maps-box-title { color: #c2410c !important; }

.maps-preview-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
}

.cartoon-map-thumb {
  display: block !important;
  cursor: pointer !important;
  transition: transform 0.15s ease !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.cartoon-map-thumb:hover {
  transform: translateY(-2px) !important;
}
.map-card-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* =========================================================
   OPTIONS / MODES DRAWER (WHEN GAME IS SELECTED)
   ========================================================= */
.cartoon-game-options-drawer {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 6px 12px !important;
  margin-top: 2px !important;
}

.options-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.options-label {
  font-family: var(--cartoon-font-head) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #475569 !important;
  letter-spacing: 0.5px !important;
}

.drawer-pill-btn {
  background: #ffffff !important;
  color: #334155 !important;
  font-family: var(--cartoon-font-head) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  border: 1.5px solid #cbd5e1 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.drawer-pill-btn:hover {
  border-color: #93c5fd !important;
  transform: translateY(-1px) !important;
}
.drawer-pill-btn.active {
  background: #155dfc !important;
  color: #ffffff !important;
  border-color: #0f3ca8 !important;
  box-shadow: 0 2px 0 #0f3ca8 !important;
}
.drawer-pill-btn.blue.active {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
}
.drawer-pill-btn.orange.active {
  background: #ea580c !important;
  color: #ffffff !important;
  border-color: #c2410c !important;
}

/* =========================================================
   BOTTOM ACTION BUTTON BAR
   ========================================================= */
.cartoon-bottom-action-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 2px !important;
}

.speed-dash {
  font-family: var(--cartoon-font-head) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #94a3b8 !important;
}

.cartoon-action-btn {
  font-family: var(--cartoon-font-head) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  border-radius: 9999px !important;
  padding: 10px 40px !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-transform: uppercase !important;
  min-height: 48px !important;
}

.cartoon-action-btn.idle-btn {
  background: #cbd5e1 !important;
  color: #475569 !important;
  border: 2px solid #94a3b8 !important;
  box-shadow: 0 4px 0 #94a3b8 !important;
}
.cartoon-action-btn.idle-btn:hover {
  background: #d8e1ea !important;
  transform: translateY(-1px) !important;
}

.cartoon-action-btn.shot-launch-btn {
  background: #155dfc !important;
  color: #ffffff !important;
  border: 2.5px solid #0f3ca8 !important;
  box-shadow: 0 5px 0 #0f3ca8 !important;
}
.cartoon-action-btn.shot-launch-btn:hover {
  background: #1d4ed8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 #0f3ca8 !important;
}
.cartoon-action-btn.shot-launch-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #0f3ca8 !important;
}

.cartoon-action-btn.car-launch-btn {
  background: #ea580c !important;
  color: #ffffff !important;
  border: 2.5px solid #9a3412 !important;
  box-shadow: 0 5px 0 #9a3412 !important;
}
.cartoon-action-btn.car-launch-btn:hover {
  background: #f97316 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 0 #9a3412 !important;
}
.cartoon-action-btn.car-launch-btn:active {
  transform: translateY(2px) !important;
  box-shadow: 0 2px 0 #9a3412 !important;
}

/* =========================================================
   ROOM SCREENS (ENTRAR NA SALA / LOBBY) & MODALS
   ========================================================= */
.panel.utility-panel {
  background: #ffffff !important;
  border-radius: 32px !important;
  box-shadow: 0 24px 60px rgba(0, 40, 100, 0.28) !important;
  border: 3.5px solid #bfdbfe !important;
  padding: 24px !important;
  font-family: var(--cartoon-font-body) !important;
  max-width: 680px !important;
}

.menu-utility header {
  border-bottom: 2px solid #e2e8f0 !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
}
.menu-utility h1 {
  font-family: var(--cartoon-font-head) !important;
  color: #155dfc !important;
  font-size: 26px !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
}
.menu-utility header button {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: 0 3px 0 #cbd5e1 !important;
  border-radius: 9999px !important;
  font-family: var(--cartoon-font-head) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 6px 18px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.menu-utility header button:hover {
  background: #e2e8f0 !important;
  transform: translateY(-1px) !important;
}

.option-card {
  background: #f8fafc !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
}
.option-card.featured {
  border-color: #3b82f6 !important;
  background: #eff6ff !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.15) !important;
}
.option-card h2 {
  font-family: var(--cartoon-font-head) !important;
  font-size: 16px !important;
  color: #1e293b !important;
}
.option-card button {
  background: #155dfc !important;
  color: #ffffff !important;
  border: 2px solid #0f3ca8 !important;
  box-shadow: 0 4px 0 #0f3ca8 !important;
  border-radius: 9999px !important;
  font-family: var(--cartoon-font-head) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 8px 20px !important;
  cursor: pointer !important;
}
.option-card button:hover {
  background: #1d4ed8 !important;
  transform: translateY(-1px) !important;
}
.option-card button.primary,
.option-card.featured button {
  background: #22c55e !important;
  border-color: #15803d !important;
  box-shadow: 0 4px 0 #15803d !important;
}
.option-card button.primary:hover,
.option-card.featured button:hover {
  background: #16a34a !important;
}

.online input[type=text] {
  border: 2.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-family: var(--cartoon-font-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  color: #1e293b !important;
  outline: none !important;
  transition: border-color 0.15s ease !important;
}
.online input[type=text]:focus {
  border-color: #155dfc !important;
  box-shadow: 0 0 0 3px rgba(21, 93, 252, 0.2) !important;
}

.code-card .code {
  color: #155dfc !important;
  font-family: var(--cartoon-font-head) !important;
  font-size: 40px !important;
  letter-spacing: 6px !important;
  background: #eff6ff !important;
  border: 2px dashed #93c5fd !important;
  border-radius: 14px !important;
  padding: 6px 14px !important;
  display: inline-block !important;
  text-align: center !important;
}

/* =========================================================
   PAUSE MENU (PAUSAR O JOGO)
   ========================================================= */
.cs-clean-pause {
  background: #ffffff !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 60px rgba(0, 32, 80, 0.35) !important;
  border: 3.5px solid #bfdbfe !important;
  padding: 24px 28px !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  font-family: var(--cartoon-font-body) !important;
}

.cs-pause-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 4px !important;
  text-align: center !important;
}

.cs-pause-header .pause-heading .launch-kicker {
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-family: var(--cartoon-font-head) !important;
  letter-spacing: 1px !important;
}

.cs-pause-header .pause-heading h1 {
  font-family: var(--cartoon-font-head) !important;
  font-size: 28px !important;
  color: #155dfc !important;
  margin: 2px 0 0 0 !important;
  letter-spacing: 1px !important;
}

.cs-pause-options {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 10px !important;
}

.cs-pause-options button,
.cs-pause-header button.primary {
  width: 100% !important;
  border-radius: 9999px !important;
  padding: 12px 20px !important;
  font-family: var(--cartoon-font-head) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

#resumeBtn {
  background: #22c55e !important;
  color: #ffffff !important;
  border: 2.5px solid #15803d !important;
  box-shadow: 0 4px 0 #15803d !important;
}
#resumeBtn:hover {
  background: #16a34a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 #15803d !important;
}

#teamBtn {
  background: #155dfc !important;
  color: #ffffff !important;
  border: 2.5px solid #0f3ca8 !important;
  box-shadow: 0 4px 0 #0f3ca8 !important;
}
#teamBtn:hover {
  background: #1d4ed8 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 #0f3ca8 !important;
}

#menuBtn {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 2.5px solid #b91c1c !important;
  box-shadow: 0 4px 0 #b91c1c !important;
}
#menuBtn:hover {
  background: #dc2626 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 #b91c1c !important;
}

/* =========================================================
   MOBILE RESPONSIVE RULES (< 768px)
   ========================================================= */
@media (max-width: 768px) {
  .screen.launch-screen {
    padding: 60px 8px 10px !important;
    align-items: flex-start !important;
  }
  .cp-account-bar {
    height: 52px !important;
    padding: 4px 10px !important;
  }
  .cartoon-brand-img {
    height: 42px !important;
  }
  .cartoon-pill-badge {
    padding: 3px 8px !important;
  }
  .pill-avatar {
    width: 24px !important;
    height: 24px !important;
  }
  .pill-name {
    font-size: 11.5px !important;
  }
  .pill-coin-icon {
    font-size: 16px !important;
  }
  .pill-coin-val {
    font-size: 13px !important;
  }
  .btn-ajuda {
    font-size: 11.5px !important;
    padding: 6px 12px !important;
    height: 32px !important;
  }
  .btn-settings {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
  .btn-fullscreen {
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
  }
  .cartoon-hub-card {
    border-radius: 24px !important;
    padding: 12px 14px 16px !important;
    gap: 8px !important;
  }
  .cartoon-main-title {
    font-size: 19px !important;
  }
  .cartoon-sub-title {
    font-size: 11px !important;
  }
  .cartoon-speech-wrapper {
    display: none !important;
  }
  .cartoon-games-grid {
    gap: 8px !important;
  }
  .cartoon-game-card {
    border-radius: 14px !important;
  }
  .cartoon-maps-columns {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .cartoon-action-btn {
    font-size: 14px !important;
    padding: 8px 24px !important;
    min-height: 42px !important;
  }
  .speed-dash {
    display: none !important;
  }
}

/* =========================================================
   BLASTER GAMES CARTOON 3D LOADING SCREEN
   ========================================================= */
#loading {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: url('/ui/cartoon/hub-bg-clean.jpg') center center / cover no-repeat fixed, #0f172a !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s ease !important;
}

#loading::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.72) 0%, rgba(10, 15, 30, 0.9) 100%) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 1 !important;
}

#loading.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.blaster-loading-card {
  position: relative !important;
  z-index: 2 !important;
  background: #ffffff !important;
  border-radius: 36px !important;
  box-shadow: 0 24px 64px rgba(0, 30, 90, 0.45), 0 4px 16px rgba(0,0,0,0.1) !important;
  border: 4px solid #bfdbfe !important;
  padding: 36px 32px 30px !important;
  width: 100% !important;
  max-width: 440px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 16px !important;
  animation: cardPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes cardPopIn {
  0% { transform: scale(0.88); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.blaster-loading-mascot {
  animation: mascotBob 2.2s ease-in-out infinite !important;
}

@keyframes mascotBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.blaster-loading-logo-img {
  height: 64px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.22)) !important;
  display: block !important;
}

.blaster-loading-text-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}

.blaster-loading-kicker {
  font-family: var(--cartoon-font-head) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

.blaster-loading-title {
  font-family: var(--cartoon-font-head) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #155dfc !important;
  margin: 0 !important;
  letter-spacing: 1px !important;
  line-height: 1.1 !important;
}

.blaster-loading-status {
  font-family: var(--cartoon-font-body) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #475569 !important;
  margin: 2px 0 0 0 !important;
}

.blaster-progress-track {
  width: 100% !important;
  max-width: 340px !important;
  height: 22px !important;
  border-radius: 9999px !important;
  background: #e2e8f0 !important;
  border: 3px solid #cbd5e1 !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
  position: relative !important;
}

.blaster-progress-fill {
  height: 100% !important;
  width: 100% !important;
  border-radius: 9999px !important;
  background: repeating-linear-gradient(
    -45deg,
    #22c55e,
    #22c55e 14px,
    #16a34a 14px,
    #16a34a 28px
  ) !important;
  background-size: 56px 100% !important;
  animation: blasterProgressStripe 1s linear infinite !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4) !important;
}

@keyframes blasterProgressStripe {
  0% { background-position: 0 0; }
  100% { background-position: 56px 0; }
}

.blaster-loading-tips {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-family: var(--cartoon-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #64748b !important;
}

.tip-sparkle {
  color: #fbbf24 !important;
  font-size: 14px !important;
}