/* Truck Race - thema-kleuren voor bord, stand en baan (zie truckrace-themes.js voor de rest).
   Elk thema overschrijft de variabelen uit truckrace.css :root. */

body.theme-halloween {
  --accent: #ff8a2a;
  --accent-rgb: 255, 138, 42;
  --accent-dim: #8e5bb8;
  --panel-top: #1a1222;
  --panel-bottom: #0b070f;
  --panel-border: #3b2650;
  --road-top: #2e2a38;
  --asphalt-2: #221f2a;
  --asphalt: #17141d;
  --road-edge: #6b2fa3;
  --bulb-glow: #ff9a3c;
}

body.theme-sintmaarten {
  --accent: #ffb347;
  --accent-rgb: 255, 179, 71;
  --accent-dim: #9a7a4a;
  --panel-top: #1a1726;
  --panel-bottom: #0b0a12;
  --panel-border: #3a3150;
  --road-top: #2c2c3a;
  --road-edge: #ff8a1a;
  --bulb-glow: #ffb347;
}

body.theme-sinterklaas {
  --accent: #ffcf4a;
  --accent-rgb: 255, 207, 74;
  --accent-dim: #b07a2a;
  --panel-top: #1e1012;
  --panel-bottom: #0d0607;
  --panel-border: #8f1d24;
  --road-edge: #c8102e;
  --bulb-glow: #ffd36b;
}

body.theme-kerst {
  --accent: #ffd25e;
  --accent-rgb: 255, 210, 94;
  --accent-dim: #3f9a5a;
  --panel-top: #10201a;
  --panel-bottom: #06100c;
  --panel-border: #1f5a36;
  --road-edge: #d62839;
  --bulb-glow: #fff3c4;
}

body.theme-oudnieuw {
  --accent: #f5d77a;
  --accent-rgb: 245, 215, 122;
  --accent-dim: #8a8fb0;
  --panel-top: #141628;
  --panel-bottom: #070812;
  --panel-border: #3a3f5c;
  --road-top: #2b2e40;
  --road-edge: #c9a64a;
  --bulb-glow: #ffe8a0;
}

body.theme-valentijn {
  --accent: #ff7aa8;
  --accent-rgb: 255, 122, 168;
  --accent-dim: #a8507a;
  --panel-top: #1f0f17;
  --panel-bottom: #0e060a;
  --panel-border: #6a2446;
  --road-edge: #e8335f;
  --bulb-glow: #ff8fb4;
}

body.theme-carnaval {
  --accent: #ffd23f;
  --accent-rgb: 255, 210, 63;
  --accent-dim: #3fae5a;
  --panel-top: #1c1410;
  --panel-bottom: #0c0806;
  --panel-border: #2e7a3a;
  --road-edge: #e8453c;
  --bulb-glow: #ffd24a;
}

body.theme-stpatrick {
  --accent: #5fe08a;
  --accent-rgb: 95, 224, 138;
  --accent-dim: #c9a43a;
  --panel-top: #0f1d14;
  --panel-bottom: #060d09;
  --panel-border: #1f6b3a;
  --road-edge: #1f9a4a;
  --bulb-glow: #7ad66b;
}

body.theme-pasen {
  --accent: #ffe07a;
  --accent-rgb: 255, 224, 122;
  --accent-dim: #8fb87a;
  --panel-top: #1a1d14;
  --panel-bottom: #0b0d08;
  --panel-border: #6a8f5a;
  --road-edge: #8fd14f;
  --bulb-glow: #fff3c4;
}

body.theme-koningsdag {
  --accent: #ff8a1a;
  --accent-rgb: 255, 138, 26;
  --accent-dim: #c2662a;
  --panel-top: #1f140b;
  --panel-bottom: #0d0804;
  --panel-border: #c2560a;
  --road-edge: #ff7a00;
  --bulb-glow: #ffa64d;
}

body.theme-bevrijdingsdag {
  --accent: #8fb8ff;
  --accent-rgb: 143, 184, 255;
  --accent-dim: #c9545e;
  --panel-top: #10162a;
  --panel-bottom: #060912;
  --panel-border: #21468b;
  --road-edge: #ae1c28;
  --bulb-glow: #fff3c4;
}

body.theme-truckstar {
  --accent: #ffb21a;
  --accent-rgb: 255, 178, 26;
  --accent-dim: #9aa3ad;
  --panel-top: #1a1d21;
  --panel-bottom: #08090b;
  --panel-border: #9aa3ad;
  --road-edge: #c0c7cf;
  --bulb-glow: #ffd24a;
}

body.theme-sneeuw {
  --accent: #a8e4ff;
  --accent-rgb: 168, 228, 255;
  --accent-dim: #6a8fa8;
  --panel-top: #121b24;
  --panel-bottom: #070c11;
  --panel-border: #3c5266;
  --road-top: #4a5562;
  --asphalt-2: #2e353e;
  --asphalt: #222830;
  --road-edge: #e8f4fb;
  --bulb-glow: #cdeeff;
}

body.theme-lente {
  --accent: #a6ec74;
  --accent-rgb: 166, 236, 116;
  --accent-dim: #c2668a;
  --panel-top: #131c12;
  --panel-bottom: #080c07;
  --panel-border: #3d5a2a;
  --road-edge: #e8457a;
  --bulb-glow: #fff3c4;
}

body.theme-zomer {
  --accent: #ffd23f;
  --accent-rgb: 255, 210, 63;
  --accent-dim: #3fa8c2;
  --panel-top: #0f1c22;
  --panel-bottom: #060c10;
  --panel-border: #1f6d8c;
  --road-edge: #f2a23a;
  --bulb-glow: #fff3c4;
}

body.theme-herfst {
  --accent: #ff9a3c;
  --accent-rgb: 255, 154, 60;
  --accent-dim: #a8743a;
  --panel-top: #1e150f;
  --panel-bottom: #0d0906;
  --panel-border: #5a3a22;
  --road-edge: #a8461a;
  --bulb-glow: #ffcf7a;
}

/* ----- Sneeuwkap op bord en stand (winter + kerst) ----- */

body.theme-sneeuw .tr-sign::before,
body.theme-kerst .tr-sign::before,
body.theme-sneeuw .tr-standings::before,
body.theme-kerst .tr-standings::before {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: -16px;
  height: 22px;
  border-radius: 12px 12px 6px 6px;
  background:
    radial-gradient(circle at 10% 100%, #f4fbff 0 9px, transparent 10px),
    radial-gradient(circle at 28% 90%, #f4fbff 0 13px, transparent 14px),
    radial-gradient(circle at 52% 100%, #f4fbff 0 11px, transparent 12px),
    radial-gradient(circle at 74% 85%, #f4fbff 0 14px, transparent 15px),
    radial-gradient(circle at 92% 100%, #f4fbff 0 10px, transparent 11px),
    linear-gradient(#f4fbff, #f4fbff) 0 100% / 100% 8px no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

/* Sneeuwranden langs de weg in de winter. */
body.theme-sneeuw .tr-road::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 10px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(244, 251, 255, 0.85) 0 60%, transparent 62%) 0 0 / 46px 10px repeat-x;
  pointer-events: none;
}

/* Halloween: spinnenweb in de hoek van het bord. */
body.theme-halloween .tr-sign::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -6px;
  width: 56px;
  height: 56px;
  border-radius: 0 14px 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23d9d2e6' stroke-opacity='.55' stroke-width='1'%3E%3Cpath d='M56 0 L0 0 M56 0 L8 30 M56 0 L28 50 M56 0 L56 56'/%3E%3Cpath d='M42 0 Q46 8 52 12 Q56 14 56 14'/%3E%3Cpath d='M26 0 Q34 14 44 22 Q52 26 56 28'/%3E%3Cpath d='M10 0 Q22 20 36 34 Q48 42 56 44'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
  pointer-events: none;
}