/* Lumina Vale widgets: invite modal + QR card, on-screen touch controls,
   controller/keyboard focus ring and the in-car (html.car) scaling.
   Link from index.html:  <link rel="stylesheet" href="/css/widgets.css">  */

:root {
  --lv-bg: #1a1c28;
  --lv-panel: #2c3044;
  --lv-panel-hi: #393e58;
  --lv-line: #444a68;
  --lv-accent: #f5d246;
  --lv-accent-ink: #1a1c28;
  --lv-text: #ebecf5;
  --lv-muted: #a9adc6;
  --lv-radius: 18px;
  --lv-radius-sm: 12px;
  --lv-tap: 48px;               /* minimum touch target */
  --lv-stick-r: 64px;           /* joystick base radius (touch.js reads it) */
  --lv-btn-a: 92px;
  --lv-btn-b: 70px;
  --lv-z-touch: 40;             /* keep HUD buttons above this */
  --lv-z-modal: 1000;
}

html.car {
  --lv-tap: 64px;
  --lv-stick-r: 80px;
  --lv-btn-a: 116px;
  --lv-btn-b: 88px;
  font-size: 125%;
}

/* ------------------------------------------------------------ focus ring */
/* .nav-focus is set by nav.js for controller / keyboard focus. */
.nav-focus {
  outline: 4px solid var(--lv-accent) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 9px rgba(245, 210, 70, 0.28);
  animation: lv-ring 1.6s ease-in-out infinite;
}
/* separate rule: an unsupported :focus-visible must not drop .nav-focus */
button:focus-visible, a[href]:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [data-nav]:focus-visible, [tabindex]:focus-visible {
  outline: 4px solid var(--lv-accent);
  outline-offset: 3px;
}
html.car .nav-focus {
  outline-width: 6px !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 12px rgba(245, 210, 70, 0.32);
}
@keyframes lv-ring {
  0%, 100% { box-shadow: 0 0 0 8px rgba(245, 210, 70, 0.32); }
  50% { box-shadow: 0 0 0 13px rgba(245, 210, 70, 0.12); }
}

/* --------------------------------------------------------------- buttons */
.lv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--lv-tap);
  min-width: var(--lv-tap);
  padding: 0 20px;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius-sm);
  background: var(--lv-panel);
  color: var(--lv-text);
  font: inherit;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s, transform 0.08s, filter 0.12s;
}
.lv-btn:hover { background: var(--lv-panel-hi); }
.lv-btn:active { transform: translateY(1px) scale(0.98); }
.lv-btn[disabled] { opacity: 0.5; cursor: default; }
.lv-btn-primary {
  background: var(--lv-accent);
  border-color: var(--lv-accent);
  color: var(--lv-accent-ink);
}
.lv-btn-primary:hover { background: var(--lv-accent); filter: brightness(1.08); }
.lv-btn-icon {
  padding: 0;
  width: var(--lv-tap);
  border-radius: 50%;
  font-size: 1.5rem;
  background: transparent;
  border-color: transparent;
}
.lv-btn-icon:hover { background: var(--lv-panel); }

/* ----------------------------------------------------------------- modal */
html.lv-modal-open { overflow: hidden; }

.lv-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--lv-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(8, 9, 16, 0.74);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: lv-fade 0.16s ease-out;
}

.lv-dialog {
  box-sizing: border-box;
  width: min(460px, 100%);
  max-height: 100%;
  overflow-y: auto;
  margin: auto;
  padding: 18px 20px 20px;
  background: var(--lv-bg);
  color: var(--lv-text);
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  animation: lv-pop 0.18s ease-out;
}
.lv-dialog:focus { outline: none; }
.lv-dialog *, .lv-dialog *::before, .lv-dialog *::after { box-sizing: border-box; }

.lv-dialog-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.lv-dialog-title {
  flex: 1;
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lv-text);
}
.lv-dialog-sub {
  margin: 0 0 6px;
  color: var(--lv-muted);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

/* QR card: always dark-on-white with its own quiet zone so phones scan it. */
.lv-qr {
  width: min(300px, 72vw, 52vh);
  height: min(300px, 72vw, 52vh);
  min-width: 168px;
  min-height: 168px;
  margin: 12px auto 14px;
  padding: 6px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 0 4px rgba(245, 210, 70, 0.9), 0 10px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1c28;
  text-align: center;
  font-size: 0.95rem;
}
.lv-qr svg { display: block; width: 100%; height: 100%; }
.lv-qr-wait { padding: 16px; }

.lv-code {
  margin: 0 0 10px;
  text-align: center;
  color: var(--lv-muted);
}
.lv-code b {
  display: inline-block;
  margin-left: 6px;
  color: var(--lv-accent);
  font: 800 1.45rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
}

.lv-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lv-muted);
}
.lv-link {
  width: 100%;
  min-height: var(--lv-tap);
  padding: 0 14px;
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius-sm);
  background: var(--lv-panel);
  color: var(--lv-text);
  font: 600 0.98rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-overflow: ellipsis;
}

.lv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.lv-actions .lv-btn { flex: 1 1 140px; }

.lv-status {
  min-height: 1.45em;
  margin: 8px 0 0;
  color: var(--lv-accent);
  font-weight: 700;
  text-align: center;
}
.lv-note {
  margin: 10px 0 0;
  color: var(--lv-muted);
  font-size: 0.93rem;
}

.lv-lan {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 210, 70, 0.38);
  border-radius: var(--lv-radius-sm);
  background: rgba(245, 210, 70, 0.07);
  font-size: 0.93rem;
}
.lv-lan p { margin: 0; }
.lv-lan p + p, .lv-lan p + .lv-lan-list { margin-top: 8px; }
.lv-lan-warn { border-color: rgba(255, 138, 101, 0.55); background: rgba(255, 138, 101, 0.08); }
.lv-lan-list { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-lan-list .lv-btn {
  padding: 0 14px;
  font: 600 0.88rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.lv-lan-list .lv-btn[aria-pressed="true"] {
  border-color: var(--lv-accent);
  color: var(--lv-accent);
}

/* off-screen helper (copy fallback) */
.lv-offscreen {
  position: fixed !important;
  top: -1000px !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

html.car .lv-dialog { width: min(680px, 100%); font-size: 20px; padding: 24px 28px 28px; }
html.car .lv-qr { width: min(380px, 60vh); height: min(380px, 60vh); }

@keyframes lv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lv-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------- touch controls */
.lv-touch {
  position: fixed;
  inset: 0;
  z-index: var(--lv-z-touch);
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.lv-touch[hidden] { display: none !important; }
.lv-touch * {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.lv-touch-zone {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 45%;
  pointer-events: auto;
}

.lv-stick, .lv-stick-hint {
  position: absolute;
  width: calc(var(--lv-stick-r) * 2);
  height: calc(var(--lv-stick-r) * 2);
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
}
.lv-stick {
  left: 0;
  top: 0;
  margin: calc(var(--lv-stick-r) * -1) 0 0 calc(var(--lv-stick-r) * -1);
  border: 3px solid rgba(235, 236, 245, 0.42);
  background: rgba(26, 28, 40, 0.28);
  display: none;
}
.lv-stick.is-on { display: block; }
.lv-stick.is-sprint { border-color: rgba(245, 210, 70, 0.9); }
.lv-stick-hint {
  left: calc(28px + env(safe-area-inset-left));
  bottom: calc(28px + env(safe-area-inset-bottom));
  border: 3px dashed rgba(235, 236, 245, 0.22);
  background: rgba(26, 28, 40, 0.12);
}
.lv-stick.is-on ~ .lv-stick-hint { display: none; }
.lv-stick-knob, .lv-stick-hint::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 46%;
  margin: -23% 0 0 -23%;
  border-radius: 50%;
}
.lv-stick-knob {
  background: rgba(235, 236, 245, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.lv-stick.is-sprint .lv-stick-knob { background: rgba(245, 210, 70, 0.85); }
.lv-stick-hint::after { content: ""; background: rgba(235, 236, 245, 0.18); }

.lv-tbtns {
  position: absolute;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: calc(var(--lv-btn-a) + var(--lv-btn-b) + 20px);
  height: calc(var(--lv-btn-a) + var(--lv-btn-b) * 0.6);
  pointer-events: none;
}
.lv-tbtn {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid rgba(235, 236, 245, 0.45);
  background: rgba(44, 48, 68, 0.45);
  color: rgba(235, 236, 245, 0.92);
  font: 800 1.6rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  padding-bottom: 0.45em;          /* room for the small caption below the letter */
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.06s, background-color 0.06s;
}
.lv-tbtn small {
  position: absolute;
  bottom: 14%;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.8;
}
.lv-tbtn-a {
  right: 0;
  bottom: 0;
  width: var(--lv-btn-a);
  height: var(--lv-btn-a);
  border-color: rgba(245, 210, 70, 0.8);
  color: var(--lv-accent);
}
.lv-tbtn-b {
  right: calc(var(--lv-btn-a) + 14px);
  bottom: calc(var(--lv-btn-a) * 0.55);
  width: var(--lv-btn-b);
  height: var(--lv-btn-b);
}
.lv-tbtn.is-down {
  background: rgba(245, 210, 70, 0.5);
  color: var(--lv-accent-ink);
  transform: scale(0.93);
}

/* -------------------------------------------------- car-mode UI scaling */
html.car button, html.car select, html.car input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.car .lv-btn {
  min-height: var(--lv-tap);
}
html.car button, html.car .lv-btn { min-width: var(--lv-tap); }
html.car input[type="checkbox"], html.car input[type="radio"] { width: 32px; height: 32px; }

/* ------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav-focus { animation: none; }
  .lv-modal-backdrop, .lv-dialog { animation: none; }
  .lv-btn, .lv-tbtn { transition: none; }
  .lv-btn:active, .lv-tbtn.is-down { transform: none; }
}