/* --- Algemene Styles --- */
@font-face {
    font-family: 'Arial Bold Italic';
    src: url('/frontend/themes/man-excitement-hill-climb/assets/fonts/Arial-BoldItalicMT.eot');
    src: url('/frontend/themes/man-excitement-hill-climb/assets/fonts/Arial-BoldItalicMT.eot?#iefix') format('embedded-opentype'),
        url('/frontend/themes/man-excitement-hill-climb/assets/fonts/Arial-BoldItalicMT.woff2') format('woff2'),
        url('/frontend/themes/man-excitement-hill-climb/assets/fonts/Arial-BoldItalicMT.woff') format('woff'),
        url('/frontend/themes/man-excitement-hill-climb/assets/fonts/Arial-BoldItalicMT.ttf') format('truetype'),
        url('/frontend/themes/man-excitement-hill-climb/assets/fonts/Arial-BoldItalicMT.svg#Arial-BoldItalicMT') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

.dm-mono-regular {
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: normal;
}


body {
    background-color: #030303 !important;
    margin: 0;
    padding: 0;
    font-family: 'DM Mono' !important;
    text-transform: uppercase !important;
    overflow: hidden !important;
}

h1, h2, h3, h4, h5{
    font-family: 'Arial Bold Italic' !important;
}

p.lead{
    font-size: 1.5rem;
}

.fs-6 small{
    font-size: 0.76em !important;
}

.auth-pages {
    background-image: url('/frontend/themes/man-excitement-hill-climb/assets/images/background.jpg');
    background-color: rgba(0, 0, 0, 0.6);
    background-blend-mode: multiply;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.auth-pages h1{
    font-family: 'Arial' !important;
    font-weight: bold !important;
}

.bg-green {
    background-color: #1D2E25 !important;
}

.bg-gold {
    background-color: #C4A652 !important;
}

.bg-body-green{
    background-color: #0C1A15 !important;
}

.btn-red{
    background-color: #E30614 !important;
    color: white !important;
    text-transform: uppercase !important;
    font-family: 'Arial' !important;
    font-weight: bold !important;
}

label{
    font-family: 'Arial' !important;
    color: #808080 !important;
}

input{
    background-color: #0C1A15 !important;
    border: 1px solid #24312C !important;
    padding: 15px !important;
    font-family: 'Arial' !important;
    color: white !important;
}

.text-white {
    color: white !important;
}

.text-gold {
    color: #C4A652 !important;
}

.text-grey{
    color: #808080 !important;
}

.text-green{
    color: #60776C !important;
}

.text-right {
    text-align: right !important;
}

.title-box{
    position: absolute !important;
    top: 0px !important;
    left: 15px !important;
}

.logo-image{
    position: absolute !important;
    right: 15px !important;
    bottom: 15px !important;
    z-index: 999 !important;
}

.ranking{
    overflow-y: scroll !important;
}

.auth-pages .card{
    border: 1px solid #38412D !important;
}

.border-left-red{
    border-left: 2px solid #F11923 !important;
}

.border-left-gold{
    border-left: 2px solid #C4A652 !important;
}

.border-left-white{
    border-left: 2px solid white !important;
}

/* --- Scoreboard & UI --- */
.card {
    background-color: #162A22 !important;
    border: 2px solid #39422D;
}

.score-row {
    border: 2px solid #434E41 !important;
    border-top: 2px solid #434E41 !important;
    
}

.score-row ~ .score-row {
    border-top: 0px !important;
}

.live-circle, .live-circle-small {
    border-radius: 50%;
    display: inline-block;
    aspect-ratio: 1 / 1;
}

.live-circle {
    width: 10px;
    height: 10px;
    background-color: red;
    animation: fade 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.live-circle-small {
    width: 6px;
    height: 6px;
    margin: 0 5px;
    background-color: #C4A652 !important;
}

@keyframes fade {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* --- Racer & Animatie --- */
.racer {
    offset-path: path("M 230 660 c -25 -34.6 -50 -69.8 -58 -104.4 c -5 -41.7 4.5 -80.6 16.5 -112.5 c 15 -40 60 -50 83.5 -59.8 c 35 -15 86 -5.7 125 11.1 l 3.3 2.4 c 2.6 1.2 6 2.8 11 5.3 c 28 15.1 76 40.6 127 55.1 c 33 9.2 66 11.2 99 6 c 33 -6.3 66 -23.2 94 -50.2 c 17 -23 33 -50.1 39 -80.4 c 6 -25.8 6 -54.8 6 -86 c 2.5 -57.2 -6 -111.2 -11 -146.9 c -3.3 -13.3 -6 -21.9 -7 -29 l -0.4 -1.8");
    offset-rotate: auto 0deg; 
    offset-distance: 0%;
    transition: offset-distance 3s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

/* De truck volgt het pad en roteert mee */
.truck-rotates {
    offset-rotate: auto 0deg; 
}

/* Het label volgt exact hetzelfde pad, maar blijft superstrak rechtop! */
.label-fixed {
    offset-rotate: 0deg; 
}

.racer.go {
    offset-distance: var(--target);
}

.racer-inner {
    transform: translateY(var(--side-offset, 0px));
    transition: transform 1s ease-in-out;
}

.truck-label-box {
    fill: rgba(0, 0, 0, 0.8);
    stroke: #C4A652;
    stroke-width: 1.5px;
}

.truck-label-text {
    font-size: 7px;
    font-weight: bold;
    fill: #C4A652;
    font-family: 'DM Mono', sans-serif;
    text-transform: uppercase;
    pointer-events: none;
}

.notontrack{
    opacity: 0.5 !important;
}