:root {
  --gold: #d4af37;
  --gold2: #f3d77a;
  --bg: #0a0805;
  --text: #f7efe0;
  --live-gap: 16px;
  --live-radius: 22px;
}

.live-body .site-footer {
  margin-top: 1.5rem;
}

.live-page {
  position: relative;
  z-index: 1;
  padding: 1rem 0 1.5rem;
}

.live-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--live-gap);
  min-height: calc(100dvh - 240px);
}

/* ===== Top bar ===== */
.live-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(243,215,122,.22);
  background: rgba(12, 9, 5, .72);
}
.live-bar-text h1 {
  margin: 0;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 900;
  line-height: 1.2;
}
.live-bar-text p {
  margin: 4px 0 0;
  opacity: .7;
  font-size: .92rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(243,215,122,.35);
  background: rgba(0,0,0,.45);
  font-weight: 800;
  white-space: nowrap;
}
.badge i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #888;
  display: block;
}
.badge[data-status="live"] {
  color: #b9ffd4;
  border-color: rgba(80,220,140,.5);
  background: rgba(20,60,35,.45);
}
.badge[data-status="live"] i { background: #31d07a; }
.badge[data-status="sold"] {
  color: var(--gold2);
  background: rgba(80,60,15,.4);
}
.badge[data-status="sold"] i { background: var(--gold2); }

/* ===== Stage: head / plate / bid ===== */
.stage {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  min-height: 0;
  padding: clamp(16px, 2.5vw, 24px);
  border-radius: var(--live-radius);
  border: 1px solid rgba(243,215,122,.26);
  background:
    radial-gradient(ellipse 80% 50% at 50% 30%, rgba(243,215,122,.12), transparent 60%),
    linear-gradient(180deg, rgba(28,20,10,.94), rgba(10,8,5,.97));
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}

.stage-head {
  display: flex;
  justify-content: center;
}
.title {
  max-width: 100%;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(243,215,122,.28);
  background: rgba(0,0,0,.35);
  font-weight: 800;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  text-align: center;
  line-height: 1.4;
}

.stage-center {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  min-height: 0;
  width: min(720px, 100%);
  margin-inline: auto;
}

.photo {
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(243,215,122,.25);
  order: 2;
}
.photo img {
  width: 100%;
  aspect-ratio: 940 / 207;
  object-fit: cover;
  display: block;
  background: #111;
}

/* Saudi plate — exact blank plate image + number overlay */
.ksa-plate {
  position: relative;
  width: min(720px, 100%);
  aspect-ratio: 940 / 207;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 44px rgba(0,0,0,.42);
  order: 1;
  isolation: isolate;
}
.ksa-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.ksa-overlay {
  position: absolute;
  /* keep clear of plate border + KSA side strip */
  inset: 10% 12% 10% 3.5%;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 2%;
  pointer-events: none;
  overflow: hidden;
}
.ksa-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  color: #000;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}
.ksa-field-nums { grid-column: 1; }
.ksa-field-letters { grid-column: 3; }
.ksa-field > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  line-height: 1.05;
}
.ksa-numbers-ar,
.ksa-letters-ar {
  font-family: "Cairo", "Traditional Arabic", Tahoma, sans-serif;
  font-size: clamp(.95rem, 2.6vw, 1.75rem);
  letter-spacing: .1em;
}
.ksa-numbers-en,
.ksa-letters-en {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(.8rem, 2.1vw, 1.35rem);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

/* ===== Bid strip ===== */
.stage-foot {
  display: flex;
  justify-content: center;
}
.bid {
  width: min(640px, 100%);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(243,215,122,.32);
  background: rgba(0,0,0,.42);
}
.bid-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.bid-label {
  font-weight: 800;
  font-size: .9rem;
  color: var(--gold2);
}
.bid em {
  font-style: normal;
  opacity: .65;
  font-size: .88rem;
  line-height: 1.4;
}
.bid-value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: .45rem;
  flex-wrap: wrap;
}
.bid strong {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  color: #f6e27a;
}
.bid-currency {
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  font-weight: 900;
  color: #fff8dc;
  opacity: .95;
}

/* Offer form */
.offer-box {
  padding: 1.15rem 1.2rem 1.3rem;
  border-radius: 18px;
  border: 1px solid rgba(243,215,122,.26);
  background: linear-gradient(180deg, rgba(28,20,10,.92), rgba(10,8,5,.96));
}
.offer-box[hidden] { display: none !important; }
.offer-head h2 {
  margin: 0 0 .35rem;
  font-size: 1.2rem;
  color: var(--gold2);
}
.offer-head p {
  margin: 0 0 1rem;
  opacity: .72;
  font-size: .92rem;
  line-height: 1.6;
}
.offer-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: .75rem;
  align-items: end;
}
.offer-form label {
  display: grid;
  gap: .35rem;
  margin: 0;
  color: rgba(247,239,224,.8);
  font-size: .88rem;
  font-weight: 700;
}
.offer-form input {
  width: 100%;
  border: 1px solid rgba(212,175,55,.28);
  background: rgba(8,6,3,.75);
  color: #fff;
  border-radius: .75rem;
  padding: .75rem .85rem;
}
.offer-form input:focus {
  outline: none;
  border-color: rgba(243,215,122,.7);
}
.offer-submit {
  white-space: nowrap;
  padding: .78rem 1.15rem;
}
.offer-msg {
  margin-top: .85rem;
  padding: .7rem .9rem;
  border-radius: .75rem;
  font-weight: 700;
  font-size: .92rem;
}
.offer-msg.ok {
  background: rgba(31,143,78,.18);
  color: #9dffc2;
}
.offer-msg.err {
  background: rgba(192,57,43,.18);
  color: #ffb4ab;
}

/* Winner */
.winner {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(243,215,122,.3), transparent 42%),
    rgba(5,4,3,.93);
}
.winner.on { display: grid; }
.winner-curtains {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
  z-index: 1;
}
.winner-curtains i {
  background: linear-gradient(180deg, #3a2a10, #120e08 55%, #070605);
}
.winner.on .winner-curtains i:first-child { animation: curtainL .85s cubic-bezier(.2,.8,.2,1) forwards; }
.winner.on .winner-curtains i:last-child { animation: curtainR .85s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes curtainL {
  from { transform: translateX(0); }
  to { transform: translateX(-105%); }
}
@keyframes curtainR {
  from { transform: translateX(0); }
  to { transform: translateX(105%); }
}
.winner-box {
  position: relative;
  z-index: 2;
  width: min(640px, 100%);
  text-align: center;
  padding: clamp(22px, 4vw, 36px);
  border-radius: 22px;
  border: 1px solid rgba(243,215,122,.35);
  background: linear-gradient(180deg, rgba(40,30,14,.96), rgba(12,9,5,.98));
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  opacity: 0;
}
.winner.on .winner-box {
  animation: winIn .55s .3s ease forwards;
}
@keyframes winIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.winner-box span {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(243,215,122,.35);
  color: var(--gold2);
  font-weight: 800;
}
.winner-box h2 {
  margin: 12px 0 0;
  font-size: clamp(3rem, 12vw, 5.2rem);
  line-height: .95;
  background: linear-gradient(180deg, #fff8dc, #f0d06a, #b8860b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.winner-owned {
  margin: 14px 0 0;
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  font-weight: 800;
  opacity: .9;
}
.winner-msg {
  margin: 10px 0 0;
  font-size: 1rem;
  opacity: .72;
}
.winner-name {
  display: inline-block;
  margin-top: 14px;
  padding: 11px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f6e1a0, #d4af37 50%, #8a6a12);
  color: #241805;
  font-weight: 900;
  font-size: clamp(1.3rem, 3.5vw, 1.9rem);
}
.winner-plate {
  margin-top: 12px;
  opacity: .7;
  font-weight: 700;
}

.fx {
  position: fixed;
  inset: 0;
  z-index: 190;
  pointer-events: none;
  overflow: hidden;
}
.fx span {
  position: absolute;
  top: -10vh;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #f6e27a, #8a6410);
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(120vh) rotate(640deg); opacity: .15; }
}

@media (max-width: 700px) {
  .live-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .badge { align-self: flex-start; }
  .bid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .bid-value {
    justify-content: center;
  }
  .bid strong {
    text-align: center;
    justify-self: center;
  }
  .offer-form {
    grid-template-columns: 1fr;
  }
  .ksa-plate {
    aspect-ratio: 940 / 207;
    border-radius: 6px;
  }
  .ksa-overlay {
    inset: 9% 13% 9% 3%;
  }
  .ksa-numbers-ar,
  .ksa-letters-ar {
    font-size: clamp(.85rem, 3.8vw, 1.25rem);
    letter-spacing: .08em;
  }
  .ksa-numbers-en,
  .ksa-letters-en {
    font-size: clamp(.72rem, 3.2vw, 1.05rem);
    letter-spacing: .1em;
  }
}