/* Apex Motorsport — local styles (dark arcade shell + card hand + tuning overlay).
   Shared leaderboard.css supplies the gold .leaderboard-button. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }

html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    color: #fff;
    touch-action: none;
}

body { display: flex; align-items: center; justify-content: center; }
canvas { display: block; }

/* ---- Floating buttons ---- */
#lb-btn { position: fixed; bottom: 18px; right: 18px; z-index: 120; }

.hud-btn {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 120;
    background: rgba(20, 20, 24, 0.85);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(3px);
}
.hud-btn:hover { background: rgba(40, 40, 46, 0.9); }
.hud-btn:active { transform: scale(0.96); }
.hud-btn[disabled] { opacity: 0.4; cursor: default; }

/* ---- Staged turn UI: stepper + contextual controls / drop slot ---- */
#turn-ui {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 160px;             /* sits just above the card hand */
    z-index: 115;
    display: none;             /* shown by JS during 'playing' */
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(96vw, 880px);
}
#turn-steps { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; }
#turn-steps .step {
    display: flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #3a3a44;
    color: #6b6b76;
    background: rgba(18, 18, 22, 0.85);
}
#turn-steps .step .step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: #2a2a32; color: #9a9a9a; font-size: 10px;
}
#turn-steps .step.active { color: #1a1a1a; background: #ffd700; border-color: #ffd700; }
#turn-steps .step.active .step-n { background: rgba(0, 0, 0, 0.3); color: #fff; }
#turn-steps .step.done { color: #7ed957; border-color: rgba(126, 217, 87, 0.5); }
#turn-steps .step.done .step-n { background: rgba(126, 217, 87, 0.22); color: #7ed957; }
#turn-steps .step.locked { opacity: 0.5; }
#turn-steps .step-sep { color: #4a4a52; }

#turn-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    width: 100%;
    min-height: 50px;
    padding: 9px 12px;
    border-radius: 11px;
    border: 1px solid rgba(255, 215, 0, 0.4);
    background: rgba(20, 20, 24, 0.88);
    backdrop-filter: blur(3px);
}
#turn-controls.is-drop { border-style: dashed; border-color: rgba(255, 215, 0, 0.7); background: rgba(28, 26, 18, 0.9); }
#turn-controls.drop-hover { border-color: #ffd700; background: rgba(255, 215, 0, 0.16); box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.4); }

.t-label { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; color: #ffd700; }
.t-label b { color: #fff; font-size: 14px; }
.t-spacer { flex: 1 1 auto; }
.t-seg, .t-btn {
    background: rgba(255, 215, 0, 0.14);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 6px;
    padding: 7px 11px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.t-seg.sel { background: #ffd700; color: #1a1a1a; border-color: #ffd700; }
.t-seg:hover, .t-btn:hover { background: rgba(255, 215, 0, 0.28); }
.t-seg:active, .t-btn:active { transform: scale(0.96); }
.t-seg[disabled], .t-btn[disabled] { opacity: 0.32; cursor: default; transform: none; }
.t-btn.next { background: rgba(126, 217, 87, 0.16); color: #7ed957; border-color: rgba(126, 217, 87, 0.55); }
.t-btn.commit { background: #7ed957; color: #14210a; border-color: #7ed957; }
.t-btn.ghost { background: transparent; color: #b9b9c2; border-color: #3a3a44; }
.t-readout { font-size: 12px; font-weight: 800; color: #fff; }
.t-prompt { font-size: 12px; font-weight: 700; color: #d6c690; letter-spacing: 0.02em; }
.t-chips { font-size: 11px; font-weight: 800; color: #ffd700; }
.t-risk { font-size: 11px; font-weight: 800; color: #e0726b; }
.t-ok { font-size: 11px; font-weight: 800; color: #7ed957; }

/* ---- Card hand ---- */
#hand-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    z-index: 100;
    display: none;            /* shown by JS during 'playing' */
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px 14px;
    pointer-events: none;     /* the bar itself is transparent to clicks */
}

.card {
    pointer-events: auto;
    width: 104px;
    min-height: 132px;
    background: linear-gradient(160deg, #1c1c22 0%, #111116 100%);
    border: 1.5px solid #3a3a44;
    border-radius: 9px;
    padding: 8px 8px 6px;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.card:hover { transform: translateY(-12px); border-color: #ffd700; box-shadow: 0 10px 22px rgba(0,0,0,0.6); }
.card .card-kind {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.7;
}
/* Every card carries a gold "play" accent. Tapping the card plays it. */
.card { border-top: 4px solid #ffd700; }
.card .card-kind { color: #ffd700; }
.card .card-name { font-size: 14px; font-weight: 800; margin: 3px 0 5px; line-height: 1.15; }
.card .card-delta { font-size: 24px; font-weight: 800; color: #ffd700; }
.card .card-desc { font-size: 10px; line-height: 1.3; opacity: 0.82; margin: 4px 0 0; }

/* selected-to-play, spendable, and drag states */
.card.is-play { transform: translateY(-14px); border-color: #7ed957; box-shadow: 0 0 0 2px rgba(126, 217, 87, 0.6), 0 12px 24px rgba(0, 0, 0, 0.6); }
.card.is-play::after { content: '▶ PLAY'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: #14210a; background: #7ed957; border-radius: 4px; padding: 1px 6px; }
.card.spendable { border-color: rgba(255, 215, 0, 0.85); }
.card.dragging {
    position: fixed;
    margin: 0;
    pointer-events: none;
    transform: rotate(2deg) scale(1.04);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.7);
    z-index: 400;
    transition: none;
}

/* Card category accents on the big value */
.card.kind-accel   { border-top-color: #7ed957; }
.card.kind-accel   .card-delta, .card.kind-accel .card-kind { color: #7ed957; }
.card.kind-brake   { border-top-color: #e0726b; }
.card.kind-brake   .card-delta, .card.kind-brake .card-kind { color: #e0726b; }
.card.kind-special { border-top-color: #c46be0; }
.card.kind-special .card-delta, .card.kind-special .card-kind { color: #c46be0; }
/* text labels (TRAIL / PUSH) need a smaller face than the +N / −N numbers */
.card.kind-special .card-delta { font-size: 16px; }
.card.kind-coast   { border-top-color: #7fd0ef; }
.card.kind-coast   .card-delta, .card.kind-coast .card-kind { color: #7fd0ef; }

@media (max-width: 720px) {
    #turn-ui { bottom: 126px; width: 98vw; gap: 4px; }
    #turn-controls { padding: 7px 8px; gap: 5px; min-height: 44px; }
    .t-seg, .t-btn { padding: 6px 9px; font-size: 12px; }
    .t-label, .t-readout, .t-prompt { font-size: 11px; }
    #turn-steps { font-size: 10px; gap: 4px; }
    #turn-steps .step { padding: 2px 7px; }
    #hand-bar { gap: 5px; padding: 6px 6px 8px; }
    .card { width: 78px; min-height: 104px; padding: 6px 5px 5px; }
    .card .card-name { font-size: 11px; }
    .card .card-delta { font-size: 17px; }
    .card .card-desc { font-size: 8.5px; }
    .hud-btn { padding: 6px 10px; font-size: 12px; }
}

/* ---- Overlay (tuning) ---- */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.9);
    display: none;            /* shown by JS in 'setup' */
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 18px;
}

.setup-panel {
    width: min(880px, 96vw);
    background: #121216;
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 14px;
    padding: 22px 26px 26px;
}
.setup-panel h2 { color: #ffd700; margin: 0 0 4px; font-size: 26px; }
.setup-panel h3 { color: #ffd700; font-size: 15px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.muted { color: #9a9a9a; font-size: 13px; margin: 0 0 16px; }

.setup-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 680px) { .setup-cols { grid-template-columns: 1fr; gap: 18px; } }

.ctl { margin-bottom: 16px; }
.ctl label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.ctl .val { color: #ffd700; font-family: Menlo, Consolas, monospace; }
.ctl input[type=range] { width: 100%; accent-color: #ffd700; }
.ctl .hint { display: block; font-size: 11px; color: #8c8c8c; margin-top: 3px; line-height: 1.35; }

.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button {
    flex: 1;
    min-width: 64px;
    background: #1d1d24;
    color: #ccc;
    border: 1px solid #3a3a44;
    border-radius: 6px;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.seg button.sel { background: #ffd700; color: #1a1a1a; border-color: #ffd700; }

/* car-colour swatches */
.swatches { display: flex; gap: 9px; flex-wrap: wrap; }
.swatch {
    width: 30px; height: 30px; padding: 0;
    border-radius: 50%;
    border: 2px solid #3a3a44;
    cursor: pointer;
}
.swatch:hover { transform: scale(1.08); }
.swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px #ffd700; }

.setup-track-pick { margin: 18px 0; }
.setup-track-pick > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }

.primary-btn {
    width: 100%;
    margin-top: 8px;
    padding: 13px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
    color: #1a1a1a;
}
.primary-btn:active { transform: scale(0.99); }

.setup-readout .formula {
    font-family: Menlo, Consolas, monospace;
    background: #0c0c0f;
    border: 1px solid #2a2a32;
    border-radius: 6px;
    padding: 9px 12px;
    color: #ffd700;
    font-size: 15px;
    text-align: center;
    margin-bottom: 12px;
}
#corner-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#corner-table td { padding: 5px 6px; border-bottom: 1px solid #24242c; }
#corner-table td:first-child { color: #cfcfcf; }
#corner-table td.num { font-family: Menlo, Consolas, monospace; color: #ffd700; text-align: right; }
#perf-summary { margin-top: 14px; font-size: 13px; line-height: 1.7; }
#perf-summary .row { display: flex; justify-content: space-between; border-bottom: 1px dashed #24242c; padding: 3px 0; }
#perf-summary .row span:last-child { font-family: Menlo, Consolas, monospace; color: #ffd700; }