/* ============================================
   DASHBOARD CLUSTER - circular gauge, dark navy
   API/ID sama, semua elemen beranimasi.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    --bg: #121622;
    --panel: #1b2130;
    --ink: #ffffff;
    --muted: #8c94a6;
    --tick: #b3b8c7;
    --track: #2e3340;
    --cyan: #00e5ff;
    --blue: #2f7bff;
    --pink: #ff4d8d;
    --yellow: #ffd93d;
    --green: #52ff7a;
    --red: #ff3b3b;
}

.theme-barbie { --cyan: #00e5ff; }

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0) !important;
    font-family: 'Nunito', sans-serif;
    overflow: hidden;
}

/* ---- HUD ---- */
.speedometer-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 330px;
    background: radial-gradient(circle at 50% 30%, #1c2333 0%, var(--bg) 70%);
    border: 2px solid #333847;
    border-radius: 22px;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.6),
        0 0 26px rgba(0, 229, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 12px 14px;
    user-select: none;
    pointer-events: none;
    animation: hud-appear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s both;
}

@keyframes hud-appear {
    from { opacity: 0; transform: translateY(20px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.theme-toggle-btn { display: none; }

/* === TOP BAR === */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 8px;
}

.pill {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #0b0e16;
    border: 1.5px solid #333847;
    border-radius: 9px;
    padding: 4px 7px;
    font-size: 9px;
    font-weight: 900;
    animation: pill-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.pill:nth-child(1) { animation-delay: 2.9s; }
.pill:nth-child(2) { animation-delay: 3.0s; }
.pill:nth-child(3) { animation-delay: 3.1s; }
.pill:nth-child(4) { animation-delay: 3.2s; }
.pill:nth-child(5) { animation-delay: 3.3s; }

@keyframes pill-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pill-txt { color: var(--muted); font-size: 8px; letter-spacing: 0.05em; }
.pill-val { color: var(--ink); font-size: 9px; }

.sein-arrow { color: #4a5266; font-size: 12px; transition: color 0.15s; }
.sein-pill.active {
    border-color: var(--yellow);
    box-shadow: 0 0 10px rgba(255, 217, 61, 0.5);
    animation: pill-in 0.4s both, blink 0.55s step-end 0.4s infinite;
}
.sein-pill.active .sein-arrow,
.sein-pill.active .pill-txt { color: var(--yellow); }

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a5266;
}
.status-dot.engine-on {
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
    animation: dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 4px var(--green); }
    50%       { box-shadow: 0 0 12px var(--green); }
}

/* === GAUGE === */
.gauge {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto 8px;
}

/* arc kecepatan: --p diisi JS (0..1) */
.gauge-ring {
    --p: 0;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 135deg,
        var(--cyan) 0deg,
        var(--blue) calc(var(--p) * 270deg),
        var(--track) calc(var(--p) * 270deg) 270deg,
        transparent 270deg 360deg);
    -webkit-mask: radial-gradient(closest-side, transparent 81%, #000 82%);
    mask: radial-gradient(closest-side, transparent 81%, #000 82%);
    filter: drop-shadow(0 0 7px rgba(0, 229, 255, 0.55));
    animation: arc-pulse 2.6s ease-in-out infinite;
}
@keyframes arc-pulse {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.45)); }
    50%       { filter: drop-shadow(0 0 13px rgba(0, 229, 255, 0.8)); }
}

/* tick kecil melingkari arc */
.gauge-ticks {
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 135deg,
        rgba(179, 184, 199, 0.85) 0deg 1deg,
        transparent 1deg 13.5deg);
    -webkit-mask: radial-gradient(closest-side, transparent 90%, #000 91%);
    mask: radial-gradient(closest-side, transparent 90%, #000 91%);
    opacity: 0.8;
}

.gauge-frame {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 2px solid #333847;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

.tick-label {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 11px;
    font-weight: 800;
    color: var(--muted);
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(-102px);
    font-variant-numeric: tabular-nums;
}

/* jarum: sudut diisi JS, transisi bikin halus */
.needle {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 5px;
    height: 100px;
    margin-left: -2.5px;
    transform-origin: 50% 100%;
    transform: rotate(-135deg);
    background: linear-gradient(to top, #ffffff 30%, #ff4d6d 100%);
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(255, 77, 109, 0.7);
    transition: transform 0.18s ease-out;
    z-index: 5;
}
.needle-cap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a4356, #141824 70%);
    border: 2px solid #4a5266;
    z-index: 6;
}

.gauge-center {
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 4;
}

.speed-number {
    font-size: 58px;
    font-weight: 900;
    line-height: 1;
    color: var(--ink);
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.65);
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
}

.speed-unit {
    font-size: 11px;
    font-weight: 900;
    color: #06121a;
    background: var(--cyan);
    border-radius: 6px;
    padding: 1px 10px;
    margin-top: 4px;
    letter-spacing: 0.12em;
    animation: unit-glow 2.6s ease-in-out infinite;
}
@keyframes unit-glow {
    0%, 100% { box-shadow: 0 0 4px rgba(0, 229, 255, 0.4); }
    50%       { box-shadow: 0 0 12px rgba(0, 229, 255, 0.9); }
}

.gear-badge {
    margin-top: 6px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(145deg, #33415e, #1b2130);
    border: 2px solid var(--cyan);
    text-shadow: 0 1px 0 #000;
}

/* === BOTTOM DATA === */
.dash-bottom {
    background: #0b0e16;
    border: 1.5px solid #333847;
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.data-row.col { flex-direction: column; align-items: stretch; gap: 3px; }

.data-label {
    font-size: 9px;
    font-weight: 900;
    color: var(--muted);
    letter-spacing: 0.1em;
}
.data-value {
    font-size: 13px;
    font-weight: 900;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.data-value.cyan { color: var(--cyan); }

.bar-track {
    height: 10px;
    background: #262b38;
    border-radius: 6px;
    border: 1px solid #333847;
    overflow: hidden;
}
.bar-track.slim { height: 7px; }
.bar-fill {
    height: 100%;
    width: 100%;
    border-radius: 6px;
    transition: width 0.15s ease;
}
.bar-fill.fuel { background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.bar-fill.rpm {
    background: repeating-linear-gradient(90deg,
        rgba(0,0,0,0.3) 0 5px, rgba(0,0,0,0) 5px 12px),
        linear-gradient(90deg, var(--green), var(--yellow) 60%, var(--red));
    width: 0%;
}
.bar-fill.low {
    background: var(--red) !important;
    animation: blink 0.5s step-end infinite;
}

.data-row.odo .data-value { color: var(--muted); font-size: 11px; }

/* === WELCOME OVERLAY (seukuran + seposisi speedometer) === */
.welcome-overlay {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 330px;
    z-index: 10000;
    background: #fff;
    border: 3px solid #1a1a1a;
    border-radius: 22px;
    box-shadow:
        6px 6px 0 var(--pink),
        0 0 22px rgba(255, 77, 141, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    pointer-events: none;
    animation: welcome-hide 0.5s ease 2.3s forwards;
}

.welcome-img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--pink);
    box-shadow: 0 0 16px rgba(255, 77, 141, 0.6);
    image-rendering: pixelated;
    animation: welcome-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.welcome-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 13px;
    color: var(--pink);
    text-shadow: 2px 2px 0 #1a1a1a;
    animation: welcome-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes welcome-pop {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes welcome-hide {
    to { opacity: 0; visibility: hidden; }
}