/* ─── Fonts ─────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

/* ─── Tokens ────────────────────────────────────────────────────── */
:root {
    --accent:      #fdcb6e;
    --accent-dark: #e17055;
    --green:       #2ed573;
    --green-dark:  #27ae60;
    --red:         #ff6b6b;
    --red-dark:    #c0392b;
    --blue:        #74b9ff;
    --purple:      #a29bfe;
    --glass:       rgba(0,0,0,0.45);
    --radius:      18px;
    --tint-color:  transparent;
}

/* ─── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
    font-family: 'Fredoka One', 'Comic Sans MS', cursive, sans-serif;
    background:
        linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.30)),
        url('https://onionmadder.xyz/games/giggle-gears/cover.jpg')
        no-repeat center center / cover fixed;
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
    color: white;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
   SCREENS
   ═══════════════════════════════════════════════════════════════════ */
.screen {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100dvh;
    position: absolute;
    top: 0; left: 0;
    overflow: hidden;
    animation: fadeIn 0.35s ease;
}
.screen.active { display: flex !important; z-index: 10; }

@keyframes fadeIn {
    from { opacity: 0; transform: scale(1.03); }
    to   { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════
   SHARED: SCREEN TITLE
   ═══════════════════════════════════════════════════════════════════ */
.screen-title {
    font-size: clamp(1.7rem, 5vw, 2.8rem);
    background: rgba(0,0,0,0.55);
    padding: 10px 30px;
    border-radius: 50px;
    text-align: center;
    letter-spacing: 1px;
    flex-shrink: 0;
    margin-top: clamp(12px, 2.5dvh, 22px);
}

/* ═══════════════════════════════════════════════════════════════════
   BIG BUTTONS — every tappable thing uses these
   ═══════════════════════════════════════════════════════════════════ */
.btn {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-family: 'Fredoka One', cursive;
    color: #1a1a1a;
    text-align: center;
    line-height: 1.15;
    transition: transform 0.1s, box-shadow 0.1s;
    min-height: 52px;
    min-width: 60px;
}
.btn:active { transform: translateY(4px) !important; }
.btn:disabled { opacity: 0.44; cursor: not-allowed; filter: grayscale(0.6); }

.btn-xl { font-size: clamp(1.9rem, 5.5vw, 2.8rem); padding: clamp(16px,3dvh,24px) clamp(48px,11vw,76px); }
.btn-lg { font-size: clamp(1.4rem, 4vw,   2.0rem);  padding: clamp(14px,2.5dvh,19px) clamp(34px,7.5vw,54px); }
.btn-md { font-size: clamp(1.1rem, 3vw,   1.5rem);  padding: clamp(10px,2dvh,14px) clamp(20px,5vw,32px); }
.btn-sm { font-size: clamp(0.9rem, 2.5vw, 1.2rem);  padding: clamp(8px,1.5dvh,11px) clamp(14px,3.5vw,22px); }

.btn-yellow { background: var(--accent);  box-shadow: 0 7px 0 var(--accent-dark); }
.btn-yellow:active { box-shadow: 0 3px 0 var(--accent-dark) !important; }
.btn-green  { background: var(--green);   box-shadow: 0 7px 0 var(--green-dark);  color: white; }
.btn-green:active  { box-shadow: 0 3px 0 var(--green-dark) !important; }
.btn-red    { background: var(--red);     box-shadow: 0 7px 0 var(--red-dark);    color: white; }
.btn-red:active    { box-shadow: 0 3px 0 var(--red-dark) !important; }
.btn-blue   { background: var(--blue);    box-shadow: 0 7px 0 #2980b9; }
.btn-purple { background: var(--purple);  box-shadow: 0 7px 0 #5649c0; color: white; }

/* ═══════════════════════════════════════════════════════════════════
   MENU SCREEN
   ═══════════════════════════════════════════════════════════════════ */
#screen-menu { justify-content: center; gap: clamp(20px,5dvh,40px); }

/* ═══════════════════════════════════════════════════════════════════
   DRIVER SELECT
   ═══════════════════════════════════════════════════════════════════ */
#screen-driver {
    justify-content: flex-start;
    gap: clamp(10px, 2dvh, 18px);
}

#driver-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 2.5vw, 18px);
    padding: 6px 14px 16px;
    overflow-y: auto;
    max-height: 74dvh;
    width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#driver-grid::-webkit-scrollbar { display: none; }

.driver-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border-radius: var(--radius);
    padding: clamp(8px,2vw,12px);
    background: rgba(0,0,0,0.45);
    border: 3px solid transparent;
    transition: transform 0.14s, border-color 0.14s;
    width: clamp(96px, 22vw, 136px);
    min-height: 44px;
}
.driver-card:active { transform: scale(0.94); }
.driver-card.selected {
    border-color: var(--green);
    background: rgba(46,213,115,0.22);
    box-shadow: 0 0 0 3px rgba(46,213,115,0.35);
}
.driver-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    pointer-events: none;
}
.driver-name {
    font-size: clamp(0.75rem, 2vw, 1rem);
    color: white;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════════
   CUSTOMIZER
   ═══════════════════════════════════════════════════════════════════ */
#screen-custom {
    justify-content: flex-start;
    padding: clamp(10px,2dvh,16px) 10px;
    gap: clamp(8px,1.5dvh,13px);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#screen-custom::-webkit-scrollbar { display: none; }

#car-preview-container {
    position: relative;
    width:  clamp(240px, 70vw, 340px);
    height: clamp(170px, 38vw, 240px);
    flex-shrink: 0;
}

#car-body-wrapper,
.race-body-wrapper {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 58%;
    z-index: 2;
}

#car-png,
.race-car-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}

#driver-slot,
.race-driver-slot {
    position: absolute;
    bottom: 38%;
    left: 50%;
    transform: translateX(-50%);
    width:  clamp(48px, 13vw, 72px);
    height: clamp(48px, 13vw, 72px);
    z-index: 8;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
#driver-slot img,
.race-driver-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

.anchor            { position: absolute; font-size: clamp(1.3rem,3.5vw,1.9rem); z-index: 10; pointer-events: none; }
.slot-roof-rear    { top: 4px;  left: 18%; }
.slot-roof-front   { top: 2px;  left: 50%; }
.slot-front        { right: 6px; bottom: 39%; }

.controls {
    width: 96%;
    max-height: 44dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(6px,1dvh,10px);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.controls::-webkit-scrollbar { display: none; }

.control-group {
    background: rgba(0,0,0,0.50);
    border: 2px solid rgba(255,255,255,0.14);
    border-radius: var(--radius);
    padding: clamp(10px,2vw,16px);
}

.control-label {
    font-size: clamp(1.05rem, 3vw, 1.5rem);
    color: var(--accent);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bank-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6px, 1.5vw, 10px);
}

.bank-btn {
    all: unset;
    cursor: pointer;
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.88rem, 2.4vw, 1.15rem);
    color: #1a1a1a;
    background: var(--accent);
    box-shadow: 0 5px 0 var(--accent-dark);
    border-radius: 13px;
    padding: clamp(7px,1.5vw,10px) clamp(10px,2.5vw,15px);
    min-height: 44px;
    min-width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: transform 0.1s, box-shadow 0.1s;
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
}
.bank-btn:active   { transform: translateY(3px); box-shadow: 0 2px 0 var(--accent-dark); }
.bank-btn:disabled { opacity: 0.44; cursor: not-allowed; filter: grayscale(0.6); }
.bank-btn.selected {
    background: var(--green);
    box-shadow: 0 5px 0 var(--green-dark);
    color: white;
    outline: 3px solid white;
}
.bank-btn .lock-label { font-size: clamp(0.62rem, 1.5vw, 0.8rem); color: #555; }
.bank-btn .buy-label  { font-size: clamp(0.62rem, 1.5vw, 0.8rem); color: #1a6e1a; font-weight: 800; }

.bank-btn.buyable {
    background: #b8f5c8;
    box-shadow: 0 5px 0 #27ae60;
    outline: 2px solid var(--green);
    animation: buyable-ping 1.2s ease-in-out infinite alternate;
}
@keyframes buyable-ping {
    from { outline-color: var(--green); }
    to   { outline-color: transparent; }
}

.car-bank-btn {
    width:  clamp(70px, 17vw, 94px);
    height: clamp(60px, 14vw, 78px);
    padding: 4px 5px;
}
.car-bank-btn img {
    width: 100%;
    height: clamp(32px, 8vw, 44px);
    object-fit: contain;
    display: block;
}
.car-bank-btn .car-name {
    font-size: clamp(0.52rem, 1.3vw, 0.68rem);
    color: #1a1a1a;
    text-align: center;
    line-height: 1.1;
    font-weight: 700;
}

.color-btn {
    width:  clamp(58px, 14vw, 76px);
    height: clamp(72px, 17vw, 92px);
    padding: 5px 4px;
    flex-direction: column;
    gap: 3px;
}
.color-swatch {
    width:  clamp(26px, 6.5vw, 34px);
    height: clamp(26px, 6.5vw, 34px);
    border-radius: 50%;
    border: 3px solid rgba(0,0,0,0.2);
    display: block;
    flex-shrink: 0;
}
.color-label {
    font-size: clamp(0.5rem, 1.3vw, 0.65rem);
    color: #1a1a1a;
    text-align: center;
    font-weight: 700;
    line-height: 1.3;
}

.tool-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════════
   TRACK SELECT
   ═══════════════════════════════════════════════════════════════════ */
#screen-tracks {
    justify-content: flex-start;
    gap: clamp(12px,2dvh,20px);
    transition: background 0.5s ease;
}

.track-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px,2.5vw,16px);
    padding: 4px 14px;
    overflow-y: auto;
    max-height: 72dvh;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.track-grid::-webkit-scrollbar { display: none; }

.track-card {
    cursor: pointer;
    border-radius: var(--radius);
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.28);
    position: relative;
    width:  clamp(130px, 28vw, 195px);
    height: clamp(98px,  21vw, 148px);
    transition: transform 0.14s, border-color 0.14s;
}
.track-card:active { transform: scale(0.94); }
.track-card img {
    width: 100%; height: 72%;
    object-fit: cover; display: block;
}
.track-name {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.70);
    font-size: clamp(0.8rem, 2.4vw, 1.1rem);
    color: white; text-align: center;
    padding: 5px 4px;
    text-transform: uppercase; letter-spacing: 1px;
}

#screen-tracks:has(.track-card[data-track="city"]:hover)       { background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/city-bg.jpg') no-repeat center/cover; }
#screen-tracks:has(.track-card[data-track="desert"]:hover)     { background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/desert-bg.jpg') no-repeat center/cover; }
#screen-tracks:has(.track-card[data-track="space"]:hover)      { background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/space-bg.jpg') no-repeat center/cover; }
#screen-tracks:has(.track-card[data-track="icy"]:hover)        { background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/icy-bg.jpg') no-repeat center/cover; }
#screen-tracks:has(.track-card[data-track="rainforest"]:hover) { background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/rainforest-bg.jpg') no-repeat center/cover; }
#screen-tracks:has(.track-card[data-track="tamil"]:hover)      { background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/tamil-bg.jpg') no-repeat center/cover; }
#screen-tracks:has(.track-card[data-track="block"]:hover)      { background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/block-bg.jpg') no-repeat center/cover; }
#screen-tracks:has(.track-card[data-track="candy"]:hover)      { background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/candy-bg.jpg') no-repeat center/cover; }

/* ═══════════════════════════════════════════════════════════════════
   RACE SCREEN
   ═══════════════════════════════════════════════════════════════════ */
#screen-game {
    background: #000 !important;
    position: relative; overflow: hidden; padding: 0;
}
#screen-game.active { display: block !important; z-index: 10; }
#screen-end { background: rgba(0,0,0,0.3); justify-content: center; }

#race-track {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center bottom;
    overflow: hidden;
}
.track-city       { background: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/city-bg.jpg')        no-repeat center bottom/cover; }
.track-desert     { background: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/desert-bg.jpg')      no-repeat center bottom/cover; }
.track-space      { background: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/space-bg.jpg')       no-repeat center bottom/cover; }
.track-icy        { background: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/icy-bg.jpg')         no-repeat center bottom/cover; }
.track-rainforest { background: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/rainforest-bg.jpg')  no-repeat center bottom/cover; }
.track-tamil      { background: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/tamil-bg.jpg')       no-repeat center bottom/cover; }
.track-block      { background: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/block-bg.jpg')       no-repeat center bottom/cover; }
.track-candy      { background: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/candy-bg.jpg')       no-repeat center bottom/cover; }

#road-strip {
    position: absolute; bottom: 0; left: 0;
    width: 200vw; height: 18vh;
    display: flex; will-change: transform; z-index: 2;
}
.road-tile {
    width: 100vw; height: 18vh; flex-shrink: 0;
    background-repeat: repeat-x; background-size: auto 100%;
}
.road-city       { background-image: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/road.jpg'); background-color: #555; }
.road-desert     { background-image: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/road.jpg'); background-color: #c4a265; }
.road-space      { background-image: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/road.jpg'); background-color: #1a0a3a; }
.road-icy        { background-image: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/road.jpg'); background-color: #b0d8e8; }
.road-rainforest { background-image: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/road.jpg'); background-color: #5a7a40; }
.road-tamil      { background-image: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/road.jpg'); background-color: #1a0a3a; }
.road-block      { background-image: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/road.jpg'); background-color: #1a0a3a; }
.road-candy      { background-image: url('https://onionmadder.xyz/games/giggle-gears/assets/bg-img/road.jpg'); background-color: #1a0a3a; }

#race-track.crash-flash { animation: crash 0.4s ease; }
@keyframes crash {
    0%,100% { filter: none; }
    25%,75%  { filter: brightness(2.2) saturate(0); }
    50%      { filter: brightness(1.8) saturate(3) hue-rotate(340deg); }
}

/* ── Player car ─────────────────────────────────────────────────── */
#racing-car-wrapper {
    position: absolute;
    left: clamp(28px, 5.5vw, 65px);
    bottom: 10vh;
    width:  clamp(130px, 26vw, 210px);
    height: clamp(95px,  19vw, 153px);
    z-index: 20;
}
.racing-car-inner { position: relative; width: 100%; height: 100%; }

/* NPC cars */
.npc-car {
    position: absolute;
    width:  clamp(110px, 22vw, 175px);
    height: clamp(80px,  16vw, 128px);
    z-index: 15;
    pointer-events: none;
}
.npc-car-img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.3));
    transform: scaleX(-1);
}

#hud {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: clamp(8px,1.5dvh,12px) clamp(12px,3vw,20px);
    background: rgba(0,0,0,0.52);
    z-index: 30; gap: 10px;
}
#score-display {
    font-size: clamp(1.1rem, 3.5vw, 1.8rem);
    color: var(--accent);
    white-space: nowrap;
}
#speed-indicator {
    font-size: clamp(0.75rem, 2.5vw, 1.1rem);
    color: rgba(255,255,255,0.75);
    letter-spacing: 1px;
    text-transform: uppercase;
}
#exit-btn {
    all: unset; cursor: pointer;
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    background: var(--red); color: white;
    padding: 6px 16px; border-radius: 12px;
    box-shadow: 0 4px 0 var(--red-dark);
    transition: transform 0.1s, box-shadow 0.1s;
}
#exit-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--red-dark); }

#trick-toast {
    position: absolute;
    top: clamp(54px, 10dvh, 80px); left: 50%; transform: translateX(-50%);
    font-size: clamp(1.1rem, 3.5vw, 1.7rem);
    background: rgba(0,0,0,0.72);
    padding: 6px 22px; border-radius: 50px;
    pointer-events: none; z-index: 35; white-space: nowrap;
    opacity: 0; transition: opacity 0.2s;
}
.trick-toast-show          { opacity: 1 !important; }
.trick-toast-show.positive { color: var(--green); }
.trick-toast-show.negative { color: var(--red); }

/* Touch buttons */
#mobile-controls {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: space-between;
    padding: clamp(10px,2dvh,18px) clamp(14px,4vw,28px);
    z-index: 30; pointer-events: none;
}
#mobile-controls button {
    all: unset; cursor: pointer; pointer-events: all;
    font-family: 'Fredoka One', cursive;
    font-size: clamp(1.1rem, 3.5vw, 1.6rem);
    color: #1a1a1a;
    padding: clamp(12px,2.5dvh,18px) clamp(22px,6vw,38px);
    border-radius: var(--radius);
    min-height: 60px; min-width: 100px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
#mobile-boost-btn {
    background: var(--accent);
    box-shadow: 0 6px 0 var(--accent-dark);
}
#mobile-boost-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--accent-dark); }
#mobile-jump-btn {
    background: var(--blue);
    box-shadow: 0 6px 0 #2471a3;
}
#mobile-jump-btn:active  { transform: translateY(4px); box-shadow: 0 2px 0 #2471a3; }

/* HUD tint overlay */
#race-track::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--tint-color);
    pointer-events: none; z-index: 50;
    transition: background 0.4s ease;
    opacity: 0.22;
}

/* Trick animation */
@keyframes trick-pop {
    0%   { transform: scale(1) rotate(0deg); }
    25%  { transform: scale(1.12) rotate(-4deg); }
    75%  { transform: scale(1.08) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.trick-animation { animation: trick-pop 0.8s ease; }

/* Hover upgrade: gentle float */
@keyframes hoverFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.hover-active { animation: hoverFloat 1.4s ease-in-out infinite; }

/* Boost flame tail */
.boost-flame-wrap {
    position: absolute; right: -18px; top: 50%;
    transform: translateY(-50%);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    pointer-events: none; z-index: 5;
    animation: flicker 0.18s linear infinite;
}
@keyframes flicker {
    0%,100% { opacity: 1; transform: translateY(-50%) scaleX(1); }
    50%      { opacity: 0.7; transform: translateY(-50%) scaleX(0.85); }
}

/* Headlight beam */
.headlight-beam {
    position: absolute;
    top: 50%; right: -48px;
    transform: translateY(-50%);
    width: 60px; height: 24px;
    background: linear-gradient(to right, rgba(255,255,180,0.55), transparent);
    border-radius: 0 50% 50% 0;
    pointer-events: none;
}
#headlight-slot.lights-on .headlight-beam { opacity: 1; }
#headlight-slot:not(.lights-on) .headlight-beam { opacity: 0; }

/* Deflect shield ring */
.shield-ring {
    position: absolute; inset: -8px;
    border-radius: 50%;
    border: 3px solid rgba(116,185,255,0.65);
    animation: shieldPulse 1.6s ease-in-out infinite;
    pointer-events: none; z-index: 6;
}
@keyframes shieldPulse {
    0%,100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.06); }
}

/* END SCREEN */
#end-card {
    background: rgba(0,0,0,0.75);
    border-radius: 24px;
    padding: clamp(24px,5dvh,42px) clamp(28px,8vw,52px);
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(14px,3dvh,24px);
    border: 3px solid rgba(255,255,255,0.18);
    max-width: 92vw;
    animation: fadeIn 0.4s ease;
}
#end-title {
    font-size: clamp(2rem, 7vw, 3.2rem);
    color: var(--accent);
}
#end-summary {
    font-size: clamp(0.95rem, 3vw, 1.4rem);
    color: rgba(255,255,255,0.88);
    text-align: center;
}
.end-buttons {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: clamp(10px, 3vw, 16px);
}
.btn-new-track, .btn-new-driver, .btn-new-car {
    all: unset;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    width:  clamp(78px, 18vw, 120px);
    height: clamp(78px, 18vw, 120px);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.25);
    transition: transform 0.12s, background 0.12s;
    overflow: hidden;
}
.btn-new-track:active,
.btn-new-driver:active,
.btn-new-car:active { transform: scale(0.92); background: rgba(255,255,255,0.18); }
.btn-new-track img,
.btn-new-driver img,
.btn-new-car img {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

/* ═══════════════════════════════════════════════════════════════════
   ENVIRONMENT LAYERS
   ═══════════════════════════════════════════════════════════════════ */
#skybox-layer {
    position: absolute; inset: 0;
    z-index: 1; pointer-events: none; overflow: hidden;
}
.sky-item {
    position: absolute;
    font-size: clamp(1.4rem, 4vw, 2.6rem);
    pointer-events: none; opacity: 0;
    transition: opacity 1.2s ease;
    user-select: none; -webkit-user-select: none;
}
.sky-item.sky-visible { opacity: 1; }

#scenery-layer {
    position: absolute; inset: 0;
    z-index: 8; pointer-events: none; overflow: hidden;
}
.scenery-item {
    position: absolute;
    font-size: clamp(2rem, 5.5vw, 3.8rem);
    pointer-events: none; bottom: 18vh;
    will-change: transform; user-select: none; -webkit-user-select: none;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
.scenery-item.depth-far    { font-size: clamp(1.1rem, 2.8vw, 2rem);  opacity: 0.72; }
.scenery-item.depth-mid    { font-size: clamp(1.6rem, 4.2vw, 3rem);  opacity: 0.88; }
.scenery-item.depth-close  { font-size: clamp(2.2rem, 5.8vw, 4.2rem); opacity: 1;   }

@keyframes scenery-pop {
    from { transform: translateX(0) scale(0.7); opacity: 0; }
    to   { transform: translateX(0) scale(1);   opacity: 1; }
}
.scenery-item { animation: scenery-pop 0.22s ease-out both; }

/* Sky motion */
@keyframes sky-drift-slow-kf {
    from { transform: translateX(110vw); opacity: 0; }
    5%   { opacity: 1; } 92% { opacity: 1; }
    to   { transform: translateX(-18vw); opacity: 0; }
}
.sky-drift-slow {
    right: auto; left: 0;
    animation: sky-drift-slow-kf 28s linear forwards;
    width: clamp(38px, 9vw, 64px); height: auto;
}
@keyframes sky-drift-mid-kf {
    from { transform: translateX(110vw); opacity: 0; }
    6%   { opacity: 0.92; } 90% { opacity: 0.92; }
    to   { transform: translateX(-22vw); opacity: 0; }
}
.sky-drift-mid {
    right: auto; left: 0;
    animation: sky-drift-mid-kf 18s linear forwards;
    width: clamp(60px, 14vw, 110px); height: auto;
}
@keyframes sky-drift-fast-kf {
    from { transform: translateX(110vw); opacity: 0; }
    8%   { opacity: 0.85; } 88% { opacity: 0.85; }
    to   { transform: translateX(-25vw); opacity: 0; }
}
.sky-drift-fast {
    right: auto; left: 0;
    animation: sky-drift-fast-kf 11s linear forwards;
    width: clamp(50px, 12vw, 90px); height: auto;
}
@keyframes sky-shoot-kf {
    from { transform: translateX(110vw) rotate(-18deg); opacity: 0; }
    4%   { opacity: 1; } 88% { opacity: 1; }
    to   { transform: translateX(-20vw) rotate(-18deg); opacity: 0; }
}
.sky-shoot {
    right: auto; left: 0;
    animation: sky-shoot-kf 6s linear forwards;
    width: clamp(44px, 10vw, 72px); height: auto;
}
@keyframes sky-shoot-fast-kf {
    from { transform: translateX(110vw) rotate(-22deg); opacity: 0; }
    3%   { opacity: 1; } 85% { opacity: 1; }
    to   { transform: translateX(-20vw) rotate(-22deg); opacity: 0; }
}
.sky-shoot-fast {
    right: auto; left: 0;
    animation: sky-shoot-fast-kf 3.5s linear forwards;
    width: clamp(36px, 8vw, 58px); height: auto;
}
.sky-special { filter: drop-shadow(0 0 6px rgba(255,255,200,0.7)); }

.scene-item {
    position: absolute;
    width:  clamp(52px, 12vw, 88px); height: auto;
    opacity: 0; pointer-events: none;
    user-select: none; -webkit-user-select: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45));
    transition: opacity 0.45s ease;
    transform: translateX(-50%);
}
.scene-item.scene-active  { opacity: 1; }
.scene-item.scene-fadeout { opacity: 0; transition: opacity 0.55s ease; }


/* ── TRANSPARENCY NOTE ───────────────────────────────────────────── */
.transparency-note {
    margin-top: 10px;
    font-size: clamp(0.72rem, 2vw, 0.82rem);
    color: rgba(255,255,255,0.55);
    text-align: left;
}
details summary {
    cursor: pointer;
    color: #ffaa00;
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.78rem, 2.1vw, 0.9rem);
    letter-spacing: 0.3px;
    list-style: none;
}
details summary::before { content: '▶ '; font-size: 0.7em; }
details[open] summary::before { content: '▼ '; }
details ul {
    margin: 8px 0 4px 12px;
    line-height: 1.8;
    color: rgba(255,255,255,0.65);
}
details ul li { list-style: none; }
details ul li strong { color: rgba(255,255,255,0.85); }
details p small { color: rgba(255,255,255,0.42); }

/* ── DATA MANAGEMENT ─────────────────────────────────────────────── */
.data-management {
    position: absolute;
    bottom: clamp(12px, 2dvh, 22px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.reset-btn {
    background: rgba(255,68,68,0.15);
    color: rgba(255,100,100,0.7);
    border: 1px solid rgba(255,68,68,0.3);
    padding: 6px 14px;
    border-radius: 8px;
    font-family: 'Fredoka One', cursive;
    font-size: clamp(0.72rem, 2vw, 0.82rem);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.reset-btn:hover {
    background: rgba(255,68,68,0.3);
    color: #ff6b6b;
}

/* ── NPC LAYER ───────────────────────────────────────────────────── */
#npc-layer {
    position: absolute; inset: 0;
    z-index: 15; pointer-events: none;
}