/* ============================================================
   Vera Grand Prix v2 — gp.css
   Shared component grammar. The v1 block (HANDOFF.md §2) is copied
   VERBATIM as the base — extend, never replace. Every page links
   this file; page-specific styles live in that page's <style> block.

   Grammar: 2–3px solid dark borders, hard bottom-edge box-shadows
   (no blurred shadows), rounded 9–12px, gradients on buttons only,
   Fredoka for ALL UI text and numbers. No native browser controls.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

/* ---------- Design tokens (HANDOFF.md §2, exact) ---------- */
:root {
  --gp-sky-top: #4FB2F5;
  --gp-sky-mid: #9BD9FF;
  --gp-sky-bot: #C9ECFF;
  --gp-grass: #6FC24A;
  --gp-grass-dark: #61B23C;
  --gp-road: #59616E;
  --gp-curb-red: #D93036;
  --gp-white: #FFFFFF;
  --gp-navy: #1B2A4A;
  --gp-navy-edge: #12203C;
  --gp-navy-dark: #0D1526;
  --gp-navy-row: #2A3C61;          /* data-grid header row */
  --gp-navy-row-text: #CFE0FF;
  --gp-zebra: #F2F8FF;
  --gp-yellow-hi: #FFD54A;
  --gp-yellow-lo: #FFC01E;
  --gp-yellow-edge: #B98A00;
  --gp-ink: #1B1B1B;
  --gp-lime-hi: #A8E63C;
  --gp-lime-lo: #76B900;
  --gp-lime-edge: #4C7A00;
  --gp-lime-badge: #5E9B00;
  --gp-lime-badge-edge: #3C6600;
  --gp-kart-lime: #8CD11E;
  --gp-red-hi: #FF6B5E;
  --gp-red-lo: #D93036;
  --gp-red-edge: #8E1216;
  --gp-orange: #FFB020;
  --gp-orange-deep: #FF8A00;
  --gp-orange-edge: #B25E00;
  --gp-blue: #3B82D6;
  --gp-blue-hi: #6FB2F2;
  --gp-blue-edge: #21589E;
  --gp-text-title: #1B2A4A;
  --gp-text-body: #44546A;
  --gp-text-muted: #6B7A90;
  --gp-ghost-hi: #F2F6FA;
  --gp-ghost-lo: #CFDAE6;
  --gp-ghost-edge: #93A6BB;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Fredoka', 'Outfit', sans-serif;
  color: var(--gp-text-title);
  -webkit-font-smoothing: antialiased;
}

/* Sky-blue page background utility (overlay screens, pit console). */
.gp-sky-bg {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--gp-sky-top) 0%, var(--gp-sky-mid) 55%, var(--gp-sky-bot) 100%);
  background-attachment: fixed;
}

/* ============================================================
   v1 BASE — VERBATIM from HANDOFF.md §2 (do not edit)
   ============================================================ */
.gp-badge{display:inline-block;background:#1B2A4A;border:2px solid #0D1526;border-radius:9px;color:#fff;font-family:'Fredoka';font-weight:700;padding:2px 10px;box-shadow:0 3px 0 #0D1526}
.gp-badge .p{color:#FFB020}
.gp-badge--red{background:#D93036;border-color:#8E1216;box-shadow:0 3px 0 #8E1216}
.gp-badge--lime{background:#5E9B00;border-color:#3C6600;box-shadow:0 3px 0 #3C6600}
.gp-banner{background:linear-gradient(180deg,#FFD54A,#FFC01E);border:2.5px solid #1B1B1B;border-radius:9px;color:#1B1B1B;font-family:'Fredoka';font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:6px 12px;box-shadow:0 3px 0 #B98A00}
.gp-panel{background:#fff;border:2.5px solid #1B2A4A;border-radius:12px;box-shadow:0 4px 0 #12203C;overflow:hidden}
.gp-panel__head{color:#fff;font-family:'Fredoka';font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;background:#1B2A4A}
.gp-panel__head--red{background:linear-gradient(180deg,#F0524D,#D93036)}
.gp-panel__head--lime{background:linear-gradient(180deg,#8CC63E,#5E9B00)}
.gp-btn{display:block;text-align:center;font-family:'Fredoka';font-weight:700;text-transform:uppercase;border-radius:11px;padding:10px;border:2.5px solid #14100E;cursor:pointer}
.gp-btn--lime{background:linear-gradient(180deg,#A8E63C,#76B900);color:#17300A;box-shadow:0 4px 0 #4C7A00}
.gp-btn--red{background:linear-gradient(180deg,#FF6B5E,#D93036);color:#fff;box-shadow:0 4px 0 #8E1216}
.gp-btn--ghost{background:linear-gradient(180deg,#F2F6FA,#CFDAE6);color:#44546A;box-shadow:0 4px 0 #93A6BB}

/* v1 button press behavior (grammar: translate 2px, shrink shadow). */
.gp-btn{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .05s ease,box-shadow .05s ease}
.gp-btn:active{transform:translateY(2px)}
.gp-btn--lime:active{box-shadow:0 2px 0 #4C7A00}
.gp-btn--red:active{box-shadow:0 2px 0 #8E1216}
.gp-btn--ghost:active{box-shadow:0 2px 0 #93A6BB}

/* ============================================================
   v2 EXTENSIONS — same grammar, gp- prefixed
   ============================================================ */

/* ----- panel body helper ----- */
.gp-panel__body{padding:14px}

/* ----- badge color variants ----- */
.gp-badge--orange{background:var(--gp-orange-deep);border-color:var(--gp-orange-edge);box-shadow:0 3px 0 var(--gp-orange-edge)}
.gp-badge--blue{background:var(--gp-blue);border-color:var(--gp-blue-edge);box-shadow:0 3px 0 var(--gp-blue-edge)}

/* ----- chip (small status pill) ----- */
.gp-chip{display:inline-block;background:var(--gp-navy);border:2px solid var(--gp-navy-dark);border-radius:9px;color:#fff;font-family:'Fredoka';font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;box-shadow:0 3px 0 var(--gp-navy-dark)}
.gp-chip--red{background:var(--gp-red-lo);border-color:var(--gp-red-edge);box-shadow:0 3px 0 var(--gp-red-edge)}
.gp-chip--lime{background:var(--gp-lime-badge);border-color:var(--gp-lime-badge-edge);box-shadow:0 3px 0 var(--gp-lime-badge-edge)}
.gp-chip--orange{background:var(--gp-orange-deep);border-color:var(--gp-orange-edge);box-shadow:0 3px 0 var(--gp-orange-edge)}
.gp-chip--grey{background:#8B9BB4;border-color:#5F7189;box-shadow:0 3px 0 #5F7189}

/* ----- meter (slim HUD rail; game speed/accuracy rails) ----- */
.gp-meter{height:14px;background:#EAF2FB;border:2px solid var(--gp-navy-dark);border-radius:8px;box-shadow:0 3px 0 var(--gp-navy-dark);overflow:hidden}
.gp-meter__fill{display:block;height:100%;width:0;transition:width .5s ease}
.gp-meter--blue .gp-meter__fill{background:linear-gradient(180deg,var(--gp-blue-hi),var(--gp-blue))}
.gp-meter--lime .gp-meter__fill{background:linear-gradient(180deg,var(--gp-lime-hi),var(--gp-lime-lo))}
.gp-meter--orange .gp-meter__fill{background:linear-gradient(180deg,var(--gp-orange),var(--gp-orange-deep))}

/* ----- KPI bar (labeled horizontal bar, animated width) ----- */
.gp-kpi-bar{display:flex;align-items:center;gap:10px}
.gp-kpi-bar__label{font-family:'Fredoka';font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gp-text-body);min-width:88px}
.gp-kpi-bar__track{flex:1;height:18px;background:#EAF2FB;border:2px solid var(--gp-navy);border-radius:9px;box-shadow:0 3px 0 var(--gp-navy-edge);overflow:hidden}
.gp-kpi-bar__fill{display:block;height:100%;width:0;transition:width .9s cubic-bezier(.22,1,.36,1)}
.gp-kpi-bar--blue .gp-kpi-bar__fill{background:linear-gradient(180deg,var(--gp-blue-hi),var(--gp-blue))}
.gp-kpi-bar--lime .gp-kpi-bar__fill{background:linear-gradient(180deg,var(--gp-lime-hi),var(--gp-lime-lo))}
.gp-kpi-bar--orange .gp-kpi-bar__fill{background:linear-gradient(180deg,var(--gp-orange),var(--gp-orange-deep))}
.gp-kpi-bar__value{font-family:'Fredoka';font-weight:700;font-size:15px;color:var(--gp-text-title);min-width:34px;text-align:right}

/* ----- chunky text input (no native look) ----- */
.gp-input{display:block;width:100%;font-family:'Fredoka';font-weight:600;font-size:16px;color:var(--gp-text-title);background:#fff;border:2.5px solid var(--gp-navy);border-radius:11px;padding:10px 14px;box-shadow:0 3px 0 var(--gp-navy-edge);outline:none;-webkit-appearance:none;appearance:none}
.gp-input:focus{border-color:var(--gp-orange-deep);box-shadow:0 3px 0 var(--gp-orange-edge)}
.gp-input::placeholder{color:var(--gp-text-muted);font-weight:500}
textarea.gp-input{resize:vertical;min-height:120px;line-height:1.45}

/* ----- stepper (minus / value / plus row — manual entry, no free text) ----- */
.gp-stepper{display:inline-flex;align-items:center;gap:8px}
.gp-stepper__btn{width:38px;height:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:'Fredoka';font-weight:700;font-size:20px;line-height:1;color:var(--gp-text-body);background:linear-gradient(180deg,var(--gp-ghost-hi),var(--gp-ghost-lo));border:2.5px solid #14100E;border-radius:10px;box-shadow:0 3px 0 var(--gp-ghost-edge);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.gp-stepper__btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--gp-ghost-edge)}
.gp-stepper__value{min-width:56px;text-align:center;background:var(--gp-navy);border:2px solid var(--gp-navy-dark);border-radius:9px;color:#fff;font-family:'Fredoka';font-weight:700;font-size:18px;padding:5px 10px;box-shadow:0 3px 0 var(--gp-navy-dark);font-variant-numeric:tabular-nums}

/* ----- toast (fixed bottom notification) ----- */
.gp-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9999;background:var(--gp-navy);border:2.5px solid var(--gp-navy-dark);border-radius:11px;color:#fff;font-family:'Fredoka';font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;padding:10px 18px;box-shadow:0 4px 0 var(--gp-navy-dark);animation:gp-toast-in .25s cubic-bezier(.22,1,.36,1);max-width:92vw;text-align:center;pointer-events:none}
.gp-toast--red{background:var(--gp-red-lo);border-color:var(--gp-red-edge);box-shadow:0 4px 0 var(--gp-red-edge)}
.gp-toast--lime{background:var(--gp-lime-badge);border-color:var(--gp-lime-badge-edge);box-shadow:0 4px 0 var(--gp-lime-badge-edge)}
@keyframes gp-toast-in{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ----- race clock badge (pit wall) -----
   Color variants only ever name colors — never a mode. */
.gp-clock{display:inline-block;background:var(--gp-navy);border:2.5px solid var(--gp-navy-dark);border-radius:11px;color:#fff;font-family:'Fredoka';font-weight:700;font-size:clamp(18px,3vw,26px);letter-spacing:.06em;padding:6px 16px;box-shadow:0 4px 0 var(--gp-navy-dark);font-variant-numeric:tabular-nums}
.gp-clock--lime{color:#B8F04A;text-shadow:0 0 12px rgba(168,230,60,.55);animation:gp-clock-glow 2.6s ease-in-out infinite}
.gp-clock--red{color:#FF8A80;animation:gp-clock-pulse 2s ease-in-out infinite}
@keyframes gp-clock-pulse{0%,100%{box-shadow:0 4px 0 var(--gp-navy-dark),0 0 0 rgba(217,48,54,0)}50%{box-shadow:0 4px 0 var(--gp-navy-dark),0 0 22px rgba(217,48,54,.85)}}
@keyframes gp-clock-glow{0%,100%{text-shadow:0 0 6px rgba(168,230,60,.35)}50%{text-shadow:0 0 16px rgba(168,230,60,.8)}}

/* ----- confetti piece (spawned by JS, absolutely positioned) ----- */
.gp-confetti-piece{position:absolute;top:-20px;width:10px;height:14px;border-radius:2px;pointer-events:none;animation:gp-confetti-fall linear forwards}
@keyframes gp-confetti-fall{0%{transform:translateY(0) rotate(0deg);opacity:1}85%{opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}