html, body { margin: 0; padding: 0; }

/* ==========================
   CARBON FIBRE BACKGROUND
   ========================== */
:root{
  --bg-main: #0f1115;
  --bg-card: rgba(24, 27, 33, 0.92);
  --bg-soft: #22262e;
  --text-main: #f2f4f8;
  --text-muted: #c5ccd6;

  --accent-red: #d62828;
  --accent-yellow: #f1c40f;
  --accent-blue: #1f6feb;
}

body{
  color: var(--text-main);
  background-color: var(--bg-main);

  background-image:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,255,255,0.06), rgba(0,0,0,0) 55%),
    radial-gradient(1200px 700px at 50% 110%, rgba(0,0,0,0.55), rgba(0,0,0,0) 60%),
    linear-gradient(45deg, rgba(255,255,255,0.04) 25%, rgba(0,0,0,0) 25% 50%, rgba(255,255,255,0.04) 50% 75%, rgba(0,0,0,0) 75%),
    linear-gradient(45deg, rgba(0,0,0,0) 25%, rgba(255,255,255,0.02) 25% 50%, rgba(0,0,0,0) 50% 75%, rgba(255,255,255,0.02) 75%),
    linear-gradient(135deg, rgba(255,255,255,0.02), rgba(0,0,0,0) 55%);

  background-size: auto, auto, 18px 18px, 18px 18px, auto;
  background-position: center, center, 0 0, 9px 9px, center;
  background-attachment: fixed;
}

/* Lighter text everywhere */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color:#ffffff !important; }
.text-muted, .small.text-muted { color: var(--text-muted) !important; }
label, .form-label { color: #eef1f5 !important; }

/* ==========================
   TITLE SCREEN
   ========================== */
.title-screen{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 2000;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  background: rgba(10,12,16,0.45);
}
.title-card{
  width: min(560px, 95vw);
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.title-card h1{
  font-weight: 900;
  letter-spacing: 0.5px;
}
.learn-btn{
  font-weight: 900;
  letter-spacing: 0.6px;
}

/* Center radio check alignment on title */
#titleScreen .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
}
#titleScreen .form-check-input { margin-top: 0; }

/* ==========================
   CARDS / PANELS
   ========================== */
.card{
  background: var(--bg-card) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}
.card-body { color: var(--text-main) !important; }

/* ==========================
   INPUTS
   ========================== */
.form-control, .form-select{
  background: var(--bg-soft) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--text-main) !important;
}
.form-control::placeholder{
  color: rgba(235,240,246,0.60) !important;
}
.form-control:focus, .form-select:focus{
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 0.15rem rgba(31,111,235,0.35) !important;
}

/* Stop iOS zoom */
input, select, textarea, button { font-size: 16px; }

/* ==========================
   BUTTONS (lighter on dark)
   ========================== */
.btn-primary{
  background: linear-gradient(135deg, #1f6feb, #144fa3) !important;
  border: none !important;
  color: #fff !important;
}
.btn-success{
  background: linear-gradient(135deg, #2ecc71, #1e9e54) !important;
  border: none !important;
  color: #fff !important;
}
.btn-danger{
  background: linear-gradient(135deg, #d62828, #9b1c1c) !important;
  border: none !important;
  color: #fff !important;
}
.btn-warning{
  background: linear-gradient(135deg, #ffd54a, #ffb300) !important;
  border: none !important;
  color: #1a1d22 !important;
  font-weight: 800;
}

/* Outline dark on dark theme */
.btn-outline-dark{
  color: #f2f4f8 !important;
  border-color: rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.06) !important;
}
.btn-outline-dark:hover,
.btn-outline-dark:focus{
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.45) !important;
  background: rgba(255,255,255,0.12) !important;
}

/* btn-dark readable */
.btn-dark{
  color: #f7f9fb !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}
.btn-dark:hover,
.btn-dark:focus{
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.34) !important;
}

/* Disabled obvious */
.btn:disabled, button:disabled{
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* ==========================
   GAME IMAGE + WRAP
   ========================== */
.image-wrap{
  margin-top: 6px;
  margin-bottom: 10px;
}
.car-img{
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  object-fit: contain;
  background: #111;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Prevent drag/long press menus */
.car-img, .modalImg, .learn-thumb{
  -webkit-user-drag: none;
  -user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* ==========================
   LEARN GRID UNIFORM THUMBNAILS
   ========================== */
.learn-thumb{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #0b0f19;
}
@supports not (aspect-ratio: 4 / 3) {
  .learn-thumb{ height: 140px; }
}

/* Learn card hover + tap */
.learn-card{
  border: 1px solid rgba(255,255,255,0.10) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
}
.learn-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  cursor: pointer;
}

/* Make the car name under thumbnails readable */
#learnScreen .learn-card .card-body{
  background: rgba(0,0,0,0.45);
}
#learnScreen .learn-card .card-body .small{
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* A–Z nav buttons readable */
#learnAlphaNav .btn{
  color: #f2f4f8 !important;
  border-color: rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.05) !important;
}
#learnAlphaNav .btn:hover{
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.40) !important;
}

/* ==========================
   MODAL
   ========================== */
.image-modal{
  display: none;
  position: fixed;
  z-index: 9998;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(5, 7, 10, 0.95);
  padding-top: 40px;
}
.image-modal.show{ display: block; }

.modalImg{
  margin: auto;
  display: block;
  width: auto;
  max-width: 92vw;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* BIGGER tap target for X on mobile + keeps it above everything */
.modalClose{
  position: fixed;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 44px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
  user-select: none;
  z-index: 10000;

  padding: 14px 16px;          /* big tap zone */
  border-radius: 14px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Caption centered */
#modalCaption{
  color: var(--accent-yellow);
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  width: 100%;
}

/* ==========================
   LEARN LOADING OVERLAY
   ========================== */
.learn-loading{
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.learn-loading.d-none{
  display: none !important;
  pointer-events: none !important;
}

/* Car-themed loader */
.car-loader{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.wheel-row{
  display: flex;
  gap: 18px;
  font-size: 44px;
  line-height: 1;
}
.wheel{
  display: inline-block;
  animation: wheelSpin 0.7s linear infinite;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.55));
}
@keyframes wheelSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.car-loader-text{
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #f2f4f8;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* ==========================
   SCOREBOARD MORE OBVIOUS
   ========================== */
#history, #endHistory{
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
}
#history h5, #endHistory h5{
  color: #ffffff !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 800;
}
#history thead th, #endHistory thead th{
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
}
#history tbody td, #endHistory tbody td{
  color: #f2f4f8 !important;
  border-color: rgba(255,255,255,0.10) !important;
}
#history tbody tr:hover, #endHistory tbody tr:hover{
  background: rgba(255,255,255,0.08) !important;
}

/* Mobile tweaks */
@media (max-width: 576px){
  .car-img{ max-height: 46vh; }
  .modalImg{ max-height: 78vh; max-width: 96vw; }
}
/* ==========================
   FIX: TABLES ON DARK THEME (Scoreboard)
   ========================== */

#history .table,
#endHistory .table {
  background: transparent !important;
  color: #f2f4f8 !important;
}

#history .table thead th,
#endHistory .table thead th {
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.16) !important;
}

#history .table tbody td,
#endHistory .table tbody td {
  background: transparent !important;
  color: #f2f4f8 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

#history .table-striped > tbody > tr:nth-of-type(odd) > *,
#endHistory .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(255,255,255,0.05) !important;
  color: #f2f4f8 !important;
}

#history .table-striped > tbody > tr:nth-of-type(even) > *,
#endHistory .table-striped > tbody > tr:nth-of-type(even) > * {
  background: rgba(255,255,255,0.02) !important;
  color: #f2f4f8 !important;
}

#history .table tbody tr:hover > *,
#endHistory .table tbody tr:hover > * {
  background: rgba(255,255,255,0.08) !important;
}
/* ===== Make the concept/prototype badge easier to notice (mobile) ===== */
#carTypeBadge{
  font-size: 1rem;
  font-weight: 800;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  letter-spacing: 0.2px;

  /* keep bootstrap badge colors but make it pop */
  box-shadow: 0 10px 26px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
}

@media (max-width: 576px){
  #carTypeBadge{
    font-size: 1.08rem;
    padding: 0.7rem 1.05rem;
  }
}

/* subtle "hey look here" animation when it appears */
.car-type-badge-pop{
  animation: carTypePulse 0.9s ease-out 1;
}

@keyframes carTypePulse{
  0%   { transform: scale(0.98); filter: brightness(1); }
  45%  { transform: scale(1.06); filter: brightness(1.12); }
  100% { transform: scale(1.0);  filter: brightness(1); }
}
@media (max-width: 576px){
  #carTypeBadge{
    font-size: 1.05rem !important;
    padding: 10px 14px !important;
    font-weight: 800 !important;
  }
}