.turbo-racer-arcade {
    --tra-cyan: #37d8ff;
    --tra-magenta: #ff39d8;
    --tra-blue: #1d7bff;
    --tra-orange: #ff8a16;
    width: min(100%, 1180px);
    max-width: 100%;
    margin: 0 auto 28px;
    color: #fff;
    font-family: Impact, "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: relative;
    isolation: isolate;
}
.turbo-racer-arcade *,
.turbo-racer-arcade *::before,
.turbo-racer-arcade *::after { box-sizing: border-box; }

.turbo-racer-arcade,
.turbo-racer-arcade button,
.turbo-racer-arcade canvas {
    -webkit-tap-highlight-color: transparent;
}
.turbo-racer-arcade button {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
}
.turbo-racer-arcade img,
.turbo-racer-arcade button,
.turbo-racer-arcade canvas {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.tra-arcade-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    min-height: 640px;
    overflow: hidden;
    border-radius: 22px;
    background-image: var(--tra-bg-speed);
    background-size: cover;
    background-position: center center;
    box-shadow: 0 24px 70px rgba(0,0,0,.72), inset 0 0 0 1px rgba(55,216,255,.14);
}
.turbo-racer-arcade[data-active-game="shoot"] .tra-arcade-stage { background-image: var(--tra-bg-duck); }
.tra-arcade-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 0 42%, rgba(2,5,15,.18) 70%, rgba(0,0,0,.42) 100%);
    z-index: 0;
}

/* The uploaded cabinets are the real artwork. The canvas sits behind the transparent screen hole. */
.tra-main-machine {
    position: absolute;
    left: 50%;
    bottom: 3.2%;
    width: min(78%, 690px);
    aspect-ratio: 941 / 1672;
    transform: translateX(-50%);
    z-index: 2;
    filter: drop-shadow(0 26px 38px rgba(0,0,0,.55));
}
.tra-cabinet-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
    z-index: 3;
}
.tra-cabinet-duck,
.tra-cabinet-slot { display: none; }
.turbo-racer-arcade[data-active-game="shoot"] .tra-cabinet-race { display: none; }
.turbo-racer-arcade[data-active-game="shoot"] .tra-cabinet-duck { display: block; }

.tra-main-top,
.tra-main-screen-title,
.tra-main-base,
.tra-ambient-left { display: none !important; }
.tra-main-body { position: static; display: contents; }

.tra-screen-bezel {
    position: absolute;
    left: 23.9%;
    top: 16.15%;
    width: 52.4%;
    height: 36.1%;
    z-index: 1;
    overflow: hidden;
    border-radius: 22px;
    background: #02040a;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 38px rgba(0,0,0,.88);
}
.turbo-racer-arcade[data-active-game="shoot"] .tra-screen-bezel {
    left: 23.6%;
    top: 21.25%;
    width: 52.5%;
    height: 30.4%;
    border-radius: 18px;
}
.tra-screen-bezel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(255,255,255,.12), transparent 18%, transparent 75%, rgba(255,255,255,.04)),
        repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,.09) 1px 3px);
    opacity: .58;
    mix-blend-mode: screen;
}
.tra-screen-bezel::after { display: none; }
.tra-game-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background: #000;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.tra-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    background: radial-gradient(circle, rgba(14,48,105,.92), #02040a 72%);
    color: #fff;
    font-size: clamp(13px, 1.5vw, 20px);
    font-weight: 900;
    letter-spacing: .06em;
    text-shadow: 0 0 16px rgba(57,216,255,.85);
}
.turbo-racer-arcade.is-ready .tra-loading { display: none; }

.tra-control-deck {
    position: absolute;
    left: 0;
    top: 53.1%;
    width: 100%;
    height: 12.8%;
    z-index: 5;
    pointer-events: none;
}
.turbo-racer-arcade[data-active-game="shoot"] .tra-control-deck { top: 53.9%; }
.turbo-racer-arcade[data-active-game="shoot"] .tra-stick-wrap { left: 26.8%; top: 21.5%; width: 11.8%; }
.turbo-racer-arcade[data-active-game="shoot"] .tra-button-bank { left: 58.0%; top: 30.5%; width: 13.6%; height: 42%; }
.turbo-racer-arcade[data-active-game="shoot"] .tra-two-button-bank .tra-red { left: 0; width: 100%; }
.turbo-racer-arcade[data-active-game="shoot"] .tra-two-button-bank .tra-blue { display: none; }
.tra-stick-wrap {
    position: absolute;
    left: 27.0%;
    top: 19%;
    width: 14.0%;
    aspect-ratio: 1 / 1.14;
    pointer-events: auto;
    touch-action: none;
}
.tra-stick {
    --tra-stick-x: 0px;
    --tra-stick-y: 0px;
    --tra-stick-rot: 0deg;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent !important;
    cursor: grab;
    transform: translate(var(--tra-stick-x), var(--tra-stick-y)) rotate(var(--tra-stick-rot));
    transform-origin: 50% 78%;
    transition: transform .08s linear, filter .08s linear;
    filter: drop-shadow(0 9px 9px rgba(0,0,0,.52));
    touch-action: none;
}
.tra-stick::before {
    content: '';
    position: absolute;
    inset: -10%;
}
.tra-stick:active,
.tra-stick.is-active { cursor: grabbing; filter: drop-shadow(0 6px 7px rgba(0,0,0,.62)) brightness(1.08); }
.tra-stick img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; image-rendering: pixelated; }

.tra-button-bank {
    position: absolute;
    left: 48.0%;
    top: 34%;
    width: 24.5%;
    height: 46%;
    pointer-events: none;
}
.tra-two-button-bank .tra-action-button {
    position: absolute;
    top: 0;
    width: 41%;
    aspect-ratio: 1 / 1;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent !important;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(0);
    transition: transform .06s ease, filter .06s ease;
    touch-action: manipulation;
}
.tra-two-button-bank .tra-red { left: 0; }
.tra-two-button-bank .tra-blue { right: 0; }
.tra-two-button-bank .tra-action-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,.5));
}
.tra-two-button-bank .tra-action-button:active,
.tra-two-button-bank .tra-action-button.is-pressed { transform: translateY(5px) scale(.98); filter: brightness(1.08); }
.tra-two-button-bank .tra-action-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Invisible right-side hotspot. The visible machine is part of the background image. */
.tra-ambient-right {
    position: absolute;
    right: 3.2%;
    top: 25.5%;
    width: 16.5%;
    height: 30.5%;
    z-index: 6;
    opacity: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent !important;
    cursor: pointer;
    touch-action: manipulation;
}
.tra-ambient-right * { display: none !important; }

noscript {
    display: block;
    padding: 16px;
    color: #fff;
    background: #111;
}

/* Admin */
.turbo-racer-admin-preview { max-width: 520px; }
.tra-settings-table th { width: 220px; }
.tra-media-field { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tra-media-field .tra-media-url { min-width: min(520px, 100%); flex: 1 1 320px; }
.tra-settings-table output { display: inline-block; min-width: 42px; margin-left: 8px; font-weight: 700; }
.tra-admin-wrap .tra-admin-grid {
    display: grid;
    grid-template-columns: minmax(360px,1.35fr) minmax(300px,.9fr);
    gap: 18px;
    align-items: start;
}
.tra-admin-card {
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    padding: 18px;
    margin-top: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.tra-admin-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
    gap: 14px;
}
.tra-admin-gallery figure {
    margin: 0;
    padding: 10px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    background: linear-gradient(45deg,#f7f7f7 25%,transparent 25%),linear-gradient(-45deg,#f7f7f7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f7f7f7 75%),linear-gradient(-45deg,transparent 75%,#f7f7f7 75%);
    background-size: 18px 18px;
    background-position: 0 0,0 9px,9px -9px,-9px 0;
    text-align: center;
}
.tra-admin-gallery img { max-width: 100%; height: 110px; object-fit: contain; display: block; margin: auto; }
.tra-admin-gallery figcaption { margin-top: 8px; font-weight: 700; }
.tra-json-preview { max-height: 260px; overflow: auto; background: #0b1021; color: #aee8ff; padding: 14px; border-radius: 10px; }

@media (max-width: 900px) {
    .tra-admin-wrap .tra-admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .turbo-racer-arcade { width: 100%; margin: 0 auto 18px; }
    .tra-arcade-stage {
        min-height: auto;
        border-radius: 14px;
        box-shadow: 0 18px 50px rgba(0,0,0,.64);
    }
    .tra-main-machine {
        width: 78%;
        bottom: 3.2%;
    }
    .tra-screen-bezel { border-radius: 12px; }
    .turbo-racer-arcade[data-active-game="shoot"] .tra-screen-bezel { border-radius: 11px; }
}

@media (max-width: 480px) {
    .tra-main-machine {
        width: 82%;
        bottom: 3.6%;
    }
    .tra-ambient-right { right: 2.4%; top: 24.5%; width: 18.8%; height: 33.5%; }
    .tra-stick-wrap { width: 13.8%; }
    .tra-button-bank { width: 27.2%; }
}

/* v1.0.7: 3 x Bar Luck slot machine */
.turbo-racer-arcade[data-active-game="slot"] .tra-arcade-stage { background-image: var(--tra-bg-slot); }
.tra-cabinet-slot { display: none; }
.turbo-racer-arcade[data-active-game="slot"] .tra-cabinet-race,
.turbo-racer-arcade[data-active-game="slot"] .tra-cabinet-duck { display: none; }
.turbo-racer-arcade[data-active-game="slot"] .tra-cabinet-slot { display: block; }
.turbo-racer-arcade[data-active-game="slot"] .tra-screen-bezel {
    left: 24.2%;
    top: 27.4%;
    width: 51.6%;
    height: 22.5%;
    border-radius: 12px;
    z-index: 4;
    background: #6a0804;
    box-shadow: inset 0 0 0 2px rgba(255,220,95,.24), inset 0 0 34px rgba(0,0,0,.5), 0 0 16px rgba(255,174,36,.16);
}
.turbo-racer-arcade[data-active-game="slot"] .tra-game-canvas {
    image-rendering: auto;
}
.turbo-racer-arcade[data-active-game="slot"] .tra-control-deck { display: none; }

.tra-slot-lever,
.tra-slot-spin-button,
.tra-slot-side-hotspot {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent !important;
}
.tra-slot-lever,
.tra-slot-spin-button {
    display: none;
    position: absolute;
    z-index: 7;
    cursor: pointer;
    touch-action: manipulation;
}
.turbo-racer-arcade[data-active-game="slot"] .tra-slot-spin-button { display: block; }
.tra-slot-lever {
    display: none !important;
}
.tra-slot-spin-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 12px 12px rgba(0,0,0,.48));
}
.tra-slot-spin-button {
    left: 43.5%;
    top: 52.8%;
    width: 14%;
    aspect-ratio: 1.6 / 1;
    transform: translateY(0);
    transition: transform .07s ease, filter .07s ease;
}
.tra-slot-spin-button:active,
.tra-slot-spin-button.is-pressed { transform: translateY(5px) scale(.98); filter: brightness(1.08); }
.tra-slot-spin-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.tra-slot-side-hotspot {
    position: absolute;
    left: 3.2%;
    top: 26%;
    width: 15.8%;
    height: 31%;
    z-index: 6;
    opacity: 0;
    cursor: pointer;
    touch-action: manipulation;
}
.turbo-racer-arcade[data-active-game="slot"] .tra-slot-side-hotspot { left: 3.2%; width: 15.8%; top: 26%; height: 31%; }
.turbo-racer-arcade[data-active-game="slot"] .tra-ambient-right { right: 3.2%; width: 16.5%; top: 25.5%; height: 30.5%; }

@media (max-width: 480px) {
    .turbo-racer-arcade[data-active-game="slot"] .tra-screen-bezel {
        left: 24.2%;
        top: 27.4%;
        width: 51.6%;
        height: 22.5%;
        border-radius: 8px;
    }
    .tra-slot-spin-button { width: 16%; left: 42.5%; }
    .tra-slot-side-hotspot { left: 2.4%; top: 24.5%; width: 18.5%; height: 33.5%; }
    .turbo-racer-arcade[data-active-game="slot"] .tra-ambient-right { right: 2.4%; top: 24.5%; width: 18.8%; height: 33.5%; }
}


.turbo-racer-arcade[data-active-game="shoot"] .tra-two-button-bank .tra-blue { display: none !important; }
.turbo-racer-arcade[data-active-game="shoot"] .tra-two-button-bank .tra-blue.is-pressed { transform: none; filter: none; }
.tra-game-canvas,
.tra-screen-bezel { touch-action: none; }
.tra-stick,
.tra-action-button,
.tra-slot-spin-button,
.tra-ambient-right,
.tra-slot-side-hotspot {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.tra-stick:focus,
.tra-stick:active,
.tra-action-button:focus,
.tra-action-button:active,
.tra-slot-spin-button:focus,
.tra-slot-spin-button:active,
.tra-ambient-right:focus,
.tra-ambient-right:active,
.tra-slot-side-hotspot:focus,
.tra-slot-side-hotspot:active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* v1.1.1 simple zoom toggle without changing game selection flow */
.tra-main-machine {
    transition: width .28s ease, bottom .28s ease, transform .28s ease, filter .28s ease;
    transform-origin: 50% 100%;
}

.tra-zoom-toggle {
    position: absolute;
    left: 50%;
    top: 77.2%;
    width: 60%;
    min-height: 56px;
    padding: 12px 14px;
    transform: translateX(-50%);
    z-index: 8;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(17,27,59,.94), rgba(7,11,25,.94)) !important;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .05em;
    box-shadow: 0 12px 24px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04) !important;
    cursor: pointer;
    touch-action: manipulation;
}
.tra-zoom-toggle strong {
    display: block;
    font-size: clamp(14px, 1.8vw, 20px);
    line-height: 1.05;
    font-weight: 900;
}
.tra-zoom-toggle span {
    display: block;
    margin-top: 4px;
    font-size: clamp(10px, 1.15vw, 13px);
    opacity: .9;
}
.tra-zoom-toggle:hover,
.tra-zoom-toggle:focus {
    filter: brightness(1.08);
}

.turbo-racer-arcade[data-zoomed="1"] .tra-main-machine {
    width: min(122%, 1080px);
    bottom: -31%;
    filter: drop-shadow(0 34px 52px rgba(0,0,0,.66));
}
.turbo-racer-arcade[data-zoomed="1"][data-active-game="shoot"] .tra-main-machine {
    width: min(124%, 1100px);
    bottom: -27%;
}
.turbo-racer-arcade[data-zoomed="1"][data-active-game="slot"] .tra-main-machine {
    width: min(123%, 1100px);
    bottom: -28%;
}
.turbo-racer-arcade[data-zoomed="1"] .tra-ambient-left,
.turbo-racer-arcade[data-zoomed="1"] .tra-ambient-right,
.turbo-racer-arcade[data-zoomed="1"] .tra-slot-side-hotspot {
    opacity: .15;
}
.turbo-racer-arcade[data-zoomed="1"] .tra-zoom-toggle {
    top: 80.4%;
    width: 62%;
}

@media (max-width: 640px) {
    .tra-zoom-toggle {
        top: 77.4%;
        width: 70%;
        min-height: 52px;
        padding: 10px 10px;
        border-radius: 14px;
    }
    .turbo-racer-arcade[data-zoomed="1"] .tra-main-machine {
        width: min(132%, 980px);
        bottom: -23%;
    }
    .turbo-racer-arcade[data-zoomed="1"] .tra-zoom-toggle {
        top: 80.6%;
        width: 72%;
    }
}

@media (max-width: 480px) {
    .tra-zoom-toggle {
        top: 77.8%;
        width: 74%;
        min-height: 48px;
        padding: 9px 9px;
        border-radius: 12px;
    }
    .tra-zoom-toggle strong { font-size: 14px; }
    .tra-zoom-toggle span { font-size: 10px; }
    .turbo-racer-arcade[data-zoomed="1"] .tra-main-machine {
        width: min(140%, 980px);
        bottom: -22%;
    }
    .turbo-racer-arcade[data-zoomed="1"] .tra-zoom-toggle {
        top: 80.4%;
        width: 76%;
    }
}


/* v1.1.4 hidden bonus cabinet + single blue button */
.tra-cabinet-bonus { display: none; }
.turbo-racer-arcade[data-active-game="bonus"] .tra-cabinet-race,
.turbo-racer-arcade[data-active-game="bonus"] .tra-cabinet-duck,
.turbo-racer-arcade[data-active-game="bonus"] .tra-cabinet-slot { display: none; }
.turbo-racer-arcade[data-active-game="bonus"] .tra-cabinet-bonus { display: block; }
.turbo-racer-arcade[data-active-game="bonus"] .tra-main-machine {
    aspect-ratio: 1736 / 2837;
    width: min(74%, 620px);
    bottom: 2.6%;
}
.turbo-racer-arcade[data-active-game="bonus"] .tra-screen-bezel {
    left: 24.2%;
    top: 16.35%;
    width: 51.8%;
    height: 35.55%;
    border-radius: 18px;
    background: #040816;
    box-shadow: inset 0 0 0 1px rgba(88,205,255,.22), inset 0 0 42px rgba(0,0,0,.82), 0 0 22px rgba(34,97,255,.12);
    overflow: hidden;
}
.turbo-racer-arcade[data-active-game="bonus"] .tra-control-deck {
    display: block;
    top: 55.5%;
    height: 13.5%;
}
.turbo-racer-arcade[data-active-game="bonus"] .tra-stick-wrap {
    left: 24.8%;
    top: 19.8%;
    width: 11.4%;
}
.turbo-racer-arcade[data-active-game="bonus"] .tra-button-bank {
    left: 56.5%;
    top: 25.5%;
    width: 15.2%;
    height: 46%;
}
.turbo-racer-arcade[data-active-game="bonus"] .tra-two-button-bank .tra-red { display: none !important; }
.turbo-racer-arcade[data-active-game="bonus"] .tra-two-button-bank .tra-blue {
    left: 0;
    right: auto;
    width: 100%;
}
.turbo-racer-arcade[data-active-game="bonus"] .tra-slot-spin-button { display: none !important; }
.turbo-racer-arcade[data-active-game="bonus"] .tra-zoom-toggle {
    top: 76.8%;
    width: 64%;
}
.turbo-racer-arcade[data-zoomed="1"][data-active-game="bonus"] .tra-main-machine {
    width: min(118%, 980px);
    bottom: -16%;
}
.turbo-racer-arcade[data-zoomed="1"][data-active-game="bonus"] .tra-zoom-toggle {
    top: 80.2%;
    width: 68%;
}
@media (max-width: 640px) {
    .turbo-racer-arcade[data-active-game="bonus"] .tra-main-machine {
        width: 79%;
        bottom: 3%;
    }
    .turbo-racer-arcade[data-zoomed="1"][data-active-game="bonus"] .tra-main-machine {
        width: min(126%, 960px);
        bottom: -11%;
    }
}
@media (max-width: 480px) {
    .turbo-racer-arcade[data-active-game="bonus"] .tra-screen-bezel {
        left: 24.3%;
        top: 16.4%;
        width: 51.6%;
        height: 35.4%;
        border-radius: 14px;
    }
    .turbo-racer-arcade[data-active-game="bonus"] .tra-stick-wrap { width: 12.3%; left: 24.4%; }
    .turbo-racer-arcade[data-active-game="bonus"] .tra-button-bank { width: 16.2%; left: 56%; }
    .turbo-racer-arcade[data-active-game="bonus"] .tra-zoom-toggle { width: 76%; }
    .turbo-racer-arcade[data-zoomed="1"][data-active-game="bonus"] .tra-main-machine {
        width: min(138%, 980px);
        bottom: -10%;
    }
}