/* ═══════════════════════════════════════════════
   KART DRIVER DISPLAY — Racing Instrument Theme
   Author: 5w0rdf15h — https://github.com/5w0rdf15h/
   ═══════════════════════════════════════════════ */

:root {
  --bg: #0a0a0a;
  --bg-card: #141414;
  --bg-subtle: #1a1a1a;
  --text: #ffffff;
  --text-dim: #555;
  --text-label: #666;
  --green: #00ff88;
  --red: #ff2d55;
  --gold: #ffd600;
  --orange: #ff6600;
  --blue: #2979ff;
  --cyan: #00e5ff;
  --font-num: 'Oxanium', monospace;
  --font-ui: 'Exo 2', sans-serif;
}

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

html, body {
  height: 100%; width: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* ─── Screen flash on lap crossing ─── */
body.flash-green { animation: flashGreen 0.6s ease-out; }
body.flash-red { animation: flashRed 0.6s ease-out; }
body.flash-gold { animation: flashGold 0.8s ease-out; }

@keyframes flashGreen {
  0% { background: #003322; }
  100% { background: var(--bg); }
}
@keyframes flashRed {
  0% { background: #330011; }
  100% { background: var(--bg); }
}
@keyframes flashGold {
  0% { background: #332800; box-shadow: inset 0 0 120px rgba(255,214,0,0.15); }
  100% { background: var(--bg); box-shadow: none; }
}

/* ─── Views ─── */
.view {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
}

/* ═══ SETTINGS ═══ */
.settings-view {
  background: var(--bg);
  overflow-y: auto;
  padding: 20px;
  align-items: flex-start;
}

.settings-card {
  max-width: 480px;
  width: 100%;
  padding: 32px;
}

.settings-logo {
  font-family: var(--font-num);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 4px;
}
.settings-logo span {
  color: var(--orange);
  font-weight: 400;
}

.settings-sub {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 32px;
  letter-spacing: 0.5px;
}

.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-label);
  margin-top: 20px;
  margin-bottom: 6px;
}

.field-input {
  width: 100%;
  background: var(--bg-subtle);
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font-num);
  font-size: 18px;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.2s;
}
.field-input:focus {
  border-color: var(--orange);
}
.field-input::placeholder {
  color: #333;
}

.track-input-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.track-input {
  border-radius: 6px 0 0 6px !important;
  flex: 1;
}
.track-suffix {
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-left: none;
  border-radius: 0 6px 6px 0;
  padding: 12px 14px;
  font-family: var(--font-num);
  font-size: 18px;
  color: var(--text-dim);
  white-space: nowrap;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.toggle-btn {
  background: var(--bg-subtle);
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 8px 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.toggle-btn.active {
  background: #1a2e1a;
  border-color: var(--green);
  color: var(--green);
}

.toggle-options {
  display: flex; gap: 14px; font-size: 13px; color: var(--text-dim);
}
.toggle-options label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.toggle-options input { accent-color: var(--orange); }

.radio-row {
  display: flex; gap: 20px; font-size: 13px; color: var(--text-dim);
}
.radio-row label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.radio-row input { accent-color: var(--orange); }

.settings-actions {
  margin-top: 36px;
  display: flex;
  gap: 12px;
}

.btn-start {
  flex: 1;
  background: var(--orange);
  color: #000;
  border: none;
  border-radius: 6px;
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 14px 24px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-start:hover { background: #ff7700; }
.btn-start:disabled { background: #333; color: #555; cursor: default; }

.btn-demo {
  background: transparent;
  border: 1px solid #333;
  border-radius: 6px;
  color: var(--text-dim);
  font-family: var(--font-num);
  font-size: 14px;
  letter-spacing: 1px;
  padding: 14px 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-demo:hover { border-color: var(--cyan); color: var(--cyan); }

/* ═══ CONNECTING ═══ */
.connecting-view { background: var(--bg); flex-direction: column; gap: 20px; }
.connecting-content { text-align: center; }

.connecting-spinner {
  width: 48px; height: 48px;
  border: 3px solid #222;
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.connecting-text {
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.btn-back {
  background: transparent;
  border: 1px solid #333;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 14px;
  padding: 8px 20px;
  cursor: pointer;
  margin-top: 20px;
}

/* ═══ RACE DISPLAY ═══ */
.race-view {
  flex-direction: column;
  background: var(--bg);
  padding: 0;
}

/* Flag border glow */
.race-view.flag-yellow { box-shadow: inset 0 0 40px rgba(255,214,0,0.08); }
.race-view.flag-blue { box-shadow: inset 0 0 40px rgba(41,121,255,0.08); }
.race-view.flag-red { box-shadow: inset 0 0 40px rgba(255,23,68,0.1); }

/* ─── Top bar ─── */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 4px;
  min-height: 32px;
}

.flag-indicator { display: flex; gap: 6px; }

.flag-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #1a1a1a;
  transition: background 0.3s;
}
.flag-dot.dot-green { background: var(--green); box-shadow: 0 0 6px var(--green); }
.flag-dot.dot-yellow { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.flag-dot.dot-red { background: var(--red); box-shadow: 0 0 6px var(--red); }
.flag-dot.dot-blue { background: var(--blue); box-shadow: 0 0 6px var(--blue); }
.flag-dot.dot-dim { background: #222; }

.top-info {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-num);
  font-size: 18px;
  margin-left: 24px;
}

.lap-counter { color: var(--text-dim); }
.lap-counter b { color: var(--text); font-weight: 600; }

.flag-label { font-weight: 700; letter-spacing: 2px; }
.flag-text-yellow { color: var(--gold); }
.flag-text-blue { color: var(--blue); }
.flag-text-red { color: var(--red); }

.time-remain {
  color: var(--text);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 1px;
}

/* ─── Flag overlay ─── */
.flag-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: flagFlash 1s ease-in-out infinite;
}
.flag-overlay-text {
  font-family: var(--font-num);
  font-size: clamp(28px, 6vw, 56px);
  font-weight: 700;
  letter-spacing: 3px;
  text-align: center;
  padding: 24px 48px;
  text-transform: uppercase;
}
.flag-overlay-finish { background: rgba(0, 0, 0, 0.85); }
.flag-overlay-finish .flag-overlay-text { color: #fff; }
.flag-overlay-yellow, .flag-overlay-autoyellow { background: rgba(255, 214, 0, 0.9); }
.flag-overlay-yellow .flag-overlay-text, .flag-overlay-autoyellow .flag-overlay-text { color: #000; }
.flag-overlay-red { background: rgba(220, 30, 30, 0.9); }
.flag-overlay-red .flag-overlay-text { color: #fff; }
.flag-overlay-blue, .flag-overlay-commonblue { background: rgba(30, 100, 220, 0.9); }
.flag-overlay-blue .flag-overlay-text, .flag-overlay-commonblue .flag-overlay-text { color: #fff; }
.flag-overlay-sc { background: rgba(255, 214, 0, 0.9); }
.flag-overlay-sc .flag-overlay-text { color: #000; }
.flag-overlay-wet { background: rgba(30, 100, 220, 0.85); }
.flag-overlay-wet .flag-overlay-text { color: #fff; }
.flag-overlay-warning { background: rgba(255, 165, 0, 0.9); }
.flag-overlay-warning .flag-overlay-text { color: #000; }
.flag-overlay-black, .flag-overlay-broken { background: rgba(0, 0, 0, 0.95); }
.flag-overlay-black .flag-overlay-text, .flag-overlay-broken .flag-overlay-text { color: var(--red); }
@keyframes flagFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ─── Progress bar ─── */
.progress-track {
  height: 3px;
  background: #1a1a1a;
  width: 100%;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--orange) 0%, var(--gold) 100%);
  transition: width 1s linear;
}

/* ─── Main 3-column area ─── */
.main-area {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 0;
  min-height: 0;
}

/* LEFT column */
.col-left {
  width: 140px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.position-block { text-align: center; }
.pos-label {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-dim);
  font-weight: 600;
}
.pos-number {
  font-family: var(--font-num);
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
}

.gap-block {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-num);
  font-size: 20px;
}
.gap-arrow { font-size: 14px; color: var(--green); }
.gap-behind .gap-arrow { color: var(--red); }
.gap-value { color: var(--text-dim); }

.penalty-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-num);
  font-size: 12px;
  color: var(--red);
  margin-top: 4px;
}
.penalty-badge {
  background: var(--red);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 1px;
}

/* CENTER column */
.col-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.lap-time-container { text-align: center; }

.lap-time {
  font-family: var(--font-num);
  font-size: clamp(72px, 18vw, 160px);
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
  transition: color 0.3s;
}
.lap-time.is-best {
  color: var(--gold);
  text-shadow: 0 0 40px rgba(255,214,0,0.3);
}

.lap-delta {
  font-family: var(--font-num);
  font-size: clamp(24px, 5vw, 48px);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 1px;
  margin-top: 4px;
  transition: color 0.3s;
}
.delta-green { color: var(--green); }
.delta-red { color: var(--red); }

.best-flash {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold);
  margin-top: 8px;
  animation: bestPulse 1.5s ease-in-out infinite;
}
@keyframes bestPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* RIGHT column */
.col-right {
  width: 170px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.stat-label {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  font-weight: 600;
}
.stat-value {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
.best-value { color: var(--gold); }

.stat-divider {
  height: 1px;
  background: #222;
  margin: 2px 0;
}

.pace-up { color: var(--green); }
.pace-down { color: var(--red); }
.pace-flat { color: var(--text-dim); }

.consistency-good { color: var(--green); }
.consistency-mid { color: var(--gold); }
.consistency-bad { color: var(--red); }

/* ─── Bottom bar ─── */
.bottom-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 4px 16px 8px;
  min-height: 48px;
}

/* Lap chart mini bars */
.lap-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  flex: 1;
  max-width: 400px;
}

.lap-bar-container {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.lap-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 1px 1px 0 0;
  transition: height 0.3s ease;
}
.lap-bar.bar-best { background: var(--green); }
.lap-bar.bar-good { background: #ccc; }
.lap-bar.bar-mid { background: var(--gold); }
.lap-bar.bar-slow { background: var(--red); }

/* Controls */
.bottom-controls {
  display: flex;
  gap: 8px;
}

.ctrl-btn {
  width: 44px; height: 44px;
  min-width: 44px;
  background: var(--bg-subtle);
  border: 1px solid #333;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.ctrl-btn svg { flex-shrink: 0; }
.ctrl-btn:hover { border-color: #444; }
.ctrl-btn.ctrl-active { border-color: var(--green); background: #1a2e1a; }

/* ─── Responsive: portrait fallback ─── */
@media (orientation: portrait) {
  .main-area { flex-direction: column; padding: 8px; }
  .col-left { flex-direction: row; width: 100%; justify-content: center; gap: 24px; }
  .col-right { flex-direction: row; width: 100%; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .stat-row { flex-direction: column; align-items: center; }
  .pos-number { font-size: 48px; }
  .lap-time { font-size: clamp(48px, 20vw, 100px); }
  .stat-divider { display: none; }
}

/* ─── Language selector ─── */
.lang-row {
  display: flex;
  gap: 8px;
}
.lang-btn {
  background: var(--bg-subtle);
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 6px 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.lang-btn.active {
  background: #1a2a1a;
  border-color: var(--green);
  color: var(--green);
}
.lang-btn:hover { border-color: #444; }

/* ─── Waiting for first lap ─── */
.waiting-lap {
  text-align: center;
}
.waiting-dots {
  font-family: var(--font-num);
  font-size: 48px;
  color: var(--text-dim);
  letter-spacing: 8px;
}
.waiting-dots span {
  animation: waitDot 1.5s ease-in-out infinite;
}
.waiting-dots span:nth-child(2) { animation-delay: 0.3s; }
.waiting-dots span:nth-child(3) { animation-delay: 0.6s; }
@keyframes waitDot {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}
.pos-empty {
  color: var(--text-dim) !important;
  font-size: 48px !important;
}

/* ─── Credits / Attribution ─── */
.settings-credits {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.credit-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.2s;
}
.credit-link:hover { color: var(--text); }

.racemann-link .credit-brand {
  font-family: var(--font-num);
  font-weight: 700;
  color: #888;
}

.github-link { color: #666; }
.github-link:hover { color: #ccc; }
.github-icon { flex-shrink: 0; }