/* ── Reset & base ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #0D0D0D;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
}

.planner {
    position: relative;
    width: min(100vw, 1080px);
    aspect-ratio: 1080 / 1350;
}

#background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
}

/* ── Input UI ── */
.calculator {
    position: absolute;
    top: 18%;
    left: 3%;
    z-index: 20;
}

label {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(10px, 2.8vw, 14px);
    letter-spacing: 1px;
    color: #C8F000;
    margin-bottom: 4px;
}

.input-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.instruction {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(9px, 2.2vw, 12px);
    color: #ffffff;
    opacity: 0.5;
    letter-spacing: 1px;
}

input[type="time"] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(10px, 3vw, 15px);
    background: #1A1A1A;
    color: #C8F000;
    border: 1px solid #C8F000;
    border-radius: 4px;
    padding: clamp(3px, 1.2vw, 6px) clamp(5px, 1.5vw, 10px);
    width: clamp(75px, 18vw, 110px);
    -webkit-appearance: none;
    appearance: none;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(80%) sepia(100%) saturate(500%) hue-rotate(30deg);
    cursor: pointer;
}

button {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(10px, 3vw, 15px);
    letter-spacing: 1px;
    background: #C8F000;
    color: #0D0D0D;
    border: none;
    border-radius: 4px;
    padding: clamp(3px, 1.2vw, 6px) clamp(8px, 2.5vw, 16px);
    cursor: pointer;
    transition: background 0.15s;
}

button:hover { background: #d8ff10; }
button:active { background: #a8cc00; }

/* Reset button — subtler than Go */
.reset-btn {
    background: transparent;
    color: #C8F000;
    border: 1px solid #C8F000;
    font-size: clamp(10px, 3vw, 15px);
    padding: clamp(3px, 1.2vw, 6px) clamp(6px, 2vw, 12px);
}

.reset-btn:hover { background: #1A1A1A; }

/* ── Time overlays ── */
.race-time {
    position: absolute;
    z-index: 20;
    color: #C8F000;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(10px, 3.8vw, 40px);
    letter-spacing: 1px;
    width: 13%;
    text-align: center;
    transform: translateY(-50%);
    text-shadow: 0 0 6px rgba(200, 240, 0, 0.4);
}

.race-time.placeholder {
    opacity: 0.25;
}

/* Row positions — precise Y coordinates from Canva (÷ 1350) */
#time-t4  { top: 36.56%; left: 13.5%; }
#time-t3  { top: 43.04%; left: 13.5%; }
#time-t1  { top: 49.71%; left: 13.5%; }
#time-t45 { top: 56.32%; left: 13.5%; }
#time-t40 { top: 63.00%; left: 13.5%; }
#time-t30 { top: 69.58%; left: 13.5%; }
#time-t15 { top: 76.13%; left: 13.5%; }
#time-t10 { top: 82.78%; left: 13.5%; }
#time-t5  { top: 89.35%; left: 13.5%; }
#time-t0  { top: 96.27%; left: 13.5%; }

/* ── Below planner ── */
.below-planner {
    width: min(100vw, 1080px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
}

.action-buttons {
    display: flex;
    gap: 10px;
    width: 90%;
}

.download-btn, .share-btn {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(13px, 3.5vw, 22px);
    letter-spacing: 1px;
    border: none;
    border-radius: 4px;
    padding: clamp(8px, 1.5vw, 14px) clamp(20px, 4vw, 40px);
    cursor: pointer;
    transition: background 0.15s;
    flex: 1;
}

.download-btn {
    background: #C8F000;
    color: #0D0D0D;
}

.download-btn:hover { background: #d8ff10; }
.download-btn:active { background: #a8cc00; }

.share-btn {
    background: transparent;
    color: #C8F000;
    border: 1px solid #C8F000;
}

.share-btn:hover { background: #1A1A1A; }
.share-btn:active { background: #2a2a2a; }

.download-btn:disabled, .share-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Footer ── */
footer {
    text-align: center;
    padding: 12px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(13px, 3.5vw, 22px);
    letter-spacing: 1px;
}

footer a {
    color: #C8F000;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

footer a:hover {
    opacity: 1;
}