/* ===========================================================================
   Tezyoz poygasi — `tezyoz.css` o'zgaruvchilari ustiga quriladi (.tz ichida).
   =========================================================================== */
.pg-login { max-width: 720px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 16px; background: var(--tz-glass); border: 1px solid var(--tz-line-2); color: var(--tz-muted); text-align: center; }
.pg-login .tz-btn { text-decoration: none; }

/* ---------------------------------------------------------------- lobbi */
.pg-lobby { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
.pg-lobby__main { display: grid; gap: 20px; }
.pg-form { display: grid; gap: 14px; }
.pg-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pg-field__lbl { min-width: 110px; color: var(--tz-muted); font-weight: 600; font-size: .9rem; }
.pg-hint { margin: -6px 0 0; color: var(--tz-muted); font-size: .85rem; }
.pg-wide { justify-content: center; }
.pg-join { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-key-input { flex: 1 1 180px; font: 700 1.2rem var(--tz-mono); letter-spacing: .25em; text-transform: uppercase; }

.pg-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pg-rooms li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--tz-glass-2); border: 1px solid var(--tz-line); flex-wrap: wrap; }
.pg-rooms__name { flex: 1 1 160px; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-rooms__meta { color: var(--tz-muted); font-size: .85rem; display: inline-flex; gap: 12px; }
.pg-rooms .tz-btn { padding: 8px 14px; }
.pg-empty { margin: 4px 0 0; }

/* ---------------------------------------------------------------- garaj */
.pg-garage__preview { height: 92px; display: grid; place-items: center; margin-bottom: 10px; border-radius: 14px;
  background: repeating-linear-gradient(90deg, transparent 0 22px, var(--tz-line) 22px 34px) center 78px / 100% 3px no-repeat, var(--tz-glass-2); }
.pg-garage__preview svg { width: 150px; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.pg-cars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.pg-cars button { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--tz-line); background: transparent; color: var(--tz-muted); font: inherit; font-size: .74rem; font-weight: 600; }
.pg-cars button svg { width: 58px; height: auto; }
.pg-cars button:hover { background: var(--tz-glass-2); color: var(--tz-text); }
.pg-cars button[aria-checked="true"] { border-color: var(--tz-a); background: var(--tz-glass-2); color: var(--tz-text); box-shadow: 0 0 0 1px var(--tz-a); }
.pg-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-colors button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.pg-colors button[aria-checked="true"] { border-color: var(--tz-text); transform: scale(1.12); }
.pg-garage--room .pg-cars { grid-template-columns: repeat(6, 1fr); }

/* ---------------------------------------------------------------- xona */
.pg-roomhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.pg-roomhead__key { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-roomhead__lbl { color: var(--tz-muted); font-size: .85rem; font-weight: 600; }
.pg-key { font: 700 1.5rem var(--tz-mono); letter-spacing: .2em; }
.pg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700;
  background: var(--tz-glass-2); border: 1px solid var(--tz-line-2); }
.pg-status { flex: 1 1 220px; margin: 0; color: var(--tz-muted); font-weight: 600; }
.pg-roomhead__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

.pg-track { margin-bottom: 20px; }
.pg-count { color: var(--tz-faint); font-weight: 600; margin-left: 6px; }
.pg-lanes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pg-lane { display: grid; grid-template-columns: 150px minmax(0, 1fr) 76px; align-items: center; gap: 12px; }
.pg-lane__who { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: .9rem; }
.pg-lane__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-lane__who .fa-crown { color: #f5b324; font-size: .75rem; }
.pg-lane.is-me .pg-lane__who span:not(.pg-place) { color: var(--tz-c); }
.pg-lane__road { position: relative; height: 46px; border-radius: 10px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 18px, transparent 18px 34px) left 50% / 100% 2px no-repeat,
    linear-gradient(#2b2f3e, #222532);
  border: 1px solid var(--tz-line); }
.tz[data-theme="light"] .pg-lane__road { background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .8) 0 18px, transparent 18px 34px) left 50% / 100% 2px no-repeat,
    linear-gradient(#5d6273, #4b4f5e); }
.pg-lane.is-me .pg-lane__road { box-shadow: 0 0 0 2px var(--tz-c); }
.pg-lane__road::after { /* marra — shaxmat katakli tasma */
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 12px; opacity: .85;
  background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 12px 12px; }
.pg-car { position: absolute; top: 50%; left: 0; width: 64px; transform: translate(0, -50%); transition: left .6s linear;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .4)); }
.pg-lane.is-new .pg-car { transition: none; }
.pg-car svg { display: block; width: 100%; height: auto; }
.pg-lane__info { text-align: right; font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--tz-muted); line-height: 1.25; }
.pg-lane__info b { display: block; color: var(--tz-text); font-size: 1rem; }
.pg-place { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; font-weight: 800; font-size: .8rem;
  background: var(--tz-glass-2); color: var(--tz-text); }
.pg-place--1 { background: linear-gradient(135deg, #ffd65a, #f59e0b); color: #2b1d00; }
.pg-place--2 { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #1f2937; }
.pg-place--3 { background: linear-gradient(135deg, #f0b27a, #b45309); color: #2b1300; }

.pg-type { margin-bottom: 20px; }
.pg-live { display: flex; gap: 28px; margin-bottom: 14px; }
.pg-live div { display: grid; }
.pg-live b { font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--tz-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-live span { color: var(--tz-muted); font-size: .8rem; font-weight: 600; }
.pg-text { font: 400 clamp(1.05rem, 2.4vw, 1.35rem)/1.7 var(--tz-type-font); margin: 0 0 14px; color: var(--tz-faint); overflow-wrap: anywhere; }
.pg-text .ok { color: var(--tz-ok); }
.pg-text .cur { color: var(--tz-text); text-decoration: underline; text-decoration-color: var(--tz-c); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.pg-text .bad { color: #fff; background: var(--tz-bad); border-radius: 4px; }
.pg-input { width: 100%; font: 600 1.15rem var(--tz-type-font); }
.pg-input.is-bad { border-color: var(--tz-bad); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tz-bad) 40%, transparent); }
.pg-countdown { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; border-radius: inherit;
  background: color-mix(in srgb, var(--tz-bg) 78%, transparent); backdrop-filter: blur(4px);
  font: 800 clamp(3rem, 12vw, 6rem)/1 var(--tz-sans); color: var(--tz-text); }
.pg-countdown.is-go { color: var(--tz-ok); }

.pg-results { margin-bottom: 20px; }
.pg-winner { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font-size: 1.25rem; font-weight: 700; }
.pg-winner .fa-trophy { font-size: 2rem; color: #f5b324; }
.pg-coin { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 800;
  color: #f5b324; background: rgba(245, 179, 36, .14); border: 1px solid rgba(245, 179, 36, .4); white-space: nowrap; }
.pg-coin--big { font-size: .95rem; padding: 4px 12px; }
.pg-results td:nth-child(5) { color: var(--tz-muted); font-size: .85rem; }

.pg-toasts { position: fixed; }

@media (max-width: 900px) {
  .pg-lobby { grid-template-columns: 1fr; }
  .pg-garage--room .pg-cars { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .tz-bar { border-radius: 22px; }
  .pg-lane { grid-template-columns: minmax(0, 1fr) 58px; grid-template-areas: "who info" "road road"; gap: 4px 8px; }
  .pg-lane__who { grid-area: who; }
  .pg-lane__road { grid-area: road; height: 40px; }
  .pg-lane__info { grid-area: info; }
  .pg-car { width: 54px; }
  .pg-live { gap: 18px; }
  .pg-live b { font-size: 1.4rem; }
  .pg-roomhead__actions { margin-left: 0; width: 100%; }
  .pg-results .tz-table th:nth-child(4), .pg-results .tz-table td:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-car { transition: none; }
}