:root {
  color-scheme: dark;
  --ink: #f7fbff;
  --muted: #a8b5bd;
  --line: rgba(255, 255, 255, 0.14);
  --panel: rgba(255, 255, 255, 0.08);
  --panel-strong: rgba(255, 255, 255, 0.13);
  --accent: #e8402a;
  --accent-2: #19c37d;
  --gold: #f6c453;
  --blue: #2f80ed;
  --dark: #071016;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

button,
input {
  font: inherit;
}

.hidden {
  display: none !important;
}

.eyebrow {
  margin: 0 0 0.35rem;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tablet-body {
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 5%, rgba(232, 64, 42, 0.34), transparent 32rem),
    radial-gradient(circle at 90% 15%, rgba(47, 128, 237, 0.28), transparent 34rem),
    linear-gradient(135deg, #071016 0%, #14242b 52%, #0d161b 100%);
}

.tablet-shell {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(320px, 1.08fr);
  gap: clamp(1rem, 3vw, 2rem);
  min-height: 100vh;
  padding: clamp(1rem, 3vw, 2rem);
}

.tablet-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--panel-strong), rgba(255, 255, 255, 0.055));
  box-shadow: var(--shadow);
}

.entry-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  padding: clamp(1.1rem, 3vw, 2.1rem);
}

.brand-row,
.runner-head,
.tv-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.brand-row h1,
.tv-topline h1 {
  margin: 0;
  font-size: clamp(2rem, 5.6vw, 4.5rem);
  line-height: 0.95;
}

.live-pill,
.status-badge,
.bib-badge {
  min-width: max-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 0.75rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.live-pill.online {
  color: #00150c;
  background: var(--accent-2);
}

label {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
}

input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0.95rem 1rem;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.25);
  font-size: clamp(2rem, 7vw, 4.8rem);
  font-weight: 900;
  line-height: 1;
  outline: none;
}

input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(246, 196, 83, 0.16);
}

.primary-action,
.keypad button {
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: var(--accent);
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}

.primary-action {
  padding: 0 1.35rem;
  font-size: clamp(1rem, 2vw, 1.4rem);
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.keypad button {
  min-height: clamp(4.6rem, 12vw, 7.6rem);
  background: rgba(255, 255, 255, 0.13);
  font-size: clamp(1.55rem, 4vw, 2.65rem);
}

.keypad button:active,
.primary-action:active {
  transform: translateY(1px) scale(0.99);
}

.result-panel {
  display: grid;
  place-items: stretch;
  min-height: 24rem;
  padding: clamp(1rem, 3vw, 2rem);
}

.empty-state,
.result-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.empty-state h2,
.result-card h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 0.98;
}

.race-name,
.club-name {
  margin: 0.6rem 0 1rem;
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.4rem);
}

.club-name {
  margin-top: -0.5rem;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
}

.tablet-time {
  margin: 0.5rem 0 1.2rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 10vw, 7.4rem);
  font-weight: 950;
  line-height: 0.95;
}

.result-card.unfinished .tablet-time,
.result-card.warning h2 {
  color: var(--accent);
}

.mini-grid,
.tv-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.mini-grid div,
.tv-stats div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem;
  background: rgba(0, 0, 0, 0.18);
}

.mini-grid span,
.tv-stats span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.mini-grid strong {
  font-size: clamp(1.3rem, 3vw, 2rem);
}

.tv-body {
  overflow: hidden;
  color: var(--ink);
  background: #071016;
}

.tv-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: clamp(1.2rem, 3.2vw, 3.4rem);
  background:
    linear-gradient(90deg, rgba(232, 64, 42, 0.24) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 82% 25%, rgba(246, 196, 83, 0.22), transparent 30rem),
    linear-gradient(140deg, #071016 0%, #101e25 58%, #190b09 100%);
  background-size: 92px 92px, 92px 92px, auto, auto;
}

.tv-topline {
  position: relative;
  z-index: 1;
}

.tv-clock {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(1.3rem, 2.6vw, 2.6rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.tv-idle {
  display: grid;
  flex: 1;
  place-items: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(2.2rem, 5vw, 5.7rem);
  font-weight: 900;
  text-align: center;
}

.tv-result {
  display: grid;
  grid-template-columns: 0.45fr 1fr;
  grid-template-rows: auto auto 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  flex: 1;
  align-content: center;
  padding-top: clamp(1rem, 2vh, 2rem);
}

.tv-bib {
  align-self: start;
  color: var(--gold);
  font-size: clamp(5rem, 13vw, 13rem);
  font-weight: 950;
  line-height: 0.86;
}

.tv-runner h2 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(4rem, 9vw, 11rem);
  font-weight: 950;
  line-height: 0.88;
}

.tv-runner p {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: clamp(1.2rem, 2.2vw, 2.4rem);
  font-weight: 800;
}

.tv-runner small {
  display: block;
  margin-top: 0.55rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.8vw, 1.8rem);
  font-weight: 900;
}

.tv-time-block {
  grid-column: 1 / -1;
  border-left: clamp(0.45rem, 1vw, 0.8rem) solid var(--accent);
  padding-left: clamp(1rem, 2vw, 2rem);
}

.tv-time-block span {
  display: block;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
}

.tv-time-block strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: clamp(5rem, 16vw, 16rem);
  font-weight: 950;
  line-height: 0.86;
}

.tv-time-block.pending strong {
  color: var(--accent);
}

.tv-stats {
  grid-column: 1 / -1;
  align-self: end;
}

.tv-stats div {
  padding: clamp(0.9rem, 1.8vw, 1.6rem);
  backdrop-filter: blur(18px);
}

.tv-stats strong {
  display: block;
  font-size: clamp(2.2rem, 5vw, 5.8rem);
  line-height: 1;
}

.pop {
  animation: pop 420ms ease-out;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 850px) {
  .tablet-shell {
    grid-template-columns: 1fr;
  }

  .input-row {
    grid-template-columns: 1fr;
  }

  .primary-action {
    min-height: 4rem;
  }

  .mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .tv-result {
    grid-template-columns: 1fr;
  }

  .tv-runner h2 {
    max-width: 100%;
  }

  .tv-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Kiosk update */
.tablet-shell { grid-template-columns: minmax(320px, 760px); justify-content: center; align-content: center; }
.tablet-panel.result-panel { position: fixed; left: 50%; bottom: clamp(1rem, 4vw, 2rem); transform: translateX(-50%); width: min(720px, calc(100vw - 2rem)); min-height: 0; padding: 1rem; z-index: 10; }
.tablet-panel.result-panel .empty-state { display: none; }
.result-card { min-height: 0; }
.result-card h2 { font-size: clamp(1.6rem, 4vw, 3rem); text-align: center; }
.message-card { text-align: center; }
.result-card:not(.warning) h2 { color: var(--accent-2); }
.tv-result { grid-template-columns: 0.34fr 1fr; grid-template-rows: auto auto auto; align-content: center; gap: clamp(1rem, 2vw, 1.8rem); }
.tv-bib { font-size: clamp(4rem, 10vw, 10rem); }
.tv-runner h2 { max-width: 16ch; font-size: clamp(3.4rem, 7.2vw, 8.4rem); }
.tv-rank-focus { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); }
.rank-hero { border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; padding: clamp(1.2rem, 2.5vw, 2.2rem); background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.07)); box-shadow: var(--shadow); }
.rank-hero span, .tv-time-compact span, .tv-overall-compact span { display: block; color: var(--muted); font-size: clamp(0.95rem, 1.6vw, 1.6rem); font-weight: 950; text-transform: uppercase; }
.rank-hero strong { display: block; color: var(--gold); font-size: clamp(7rem, 18vw, 18rem); font-weight: 950; line-height: 0.82; font-variant-numeric: tabular-nums; }
.rank-hero em { display: block; margin-top: 0.6rem; color: var(--ink); font-size: clamp(2rem, 4vw, 4.7rem); font-style: normal; font-weight: 950; line-height: 1; }
.rank-category strong { color: var(--accent-2); }
.tv-secondary-row { grid-column: 1 / -1; display: grid; place-items: center; }
.tv-time-compact { text-align: center; min-width: min(760px, 100%); }
.tv-time-compact, .tv-overall-compact { border: 1px solid var(--line); border-radius: 8px; padding: clamp(0.9rem, 1.7vw, 1.4rem); background: rgba(0,0,0,0.22); }
.tv-time-compact strong, .tv-overall-compact strong { display: block; margin-top: 0.25rem; color: var(--ink); font-size: clamp(2.4rem, 5.3vw, 5.8rem); font-weight: 950; line-height: 0.95; font-variant-numeric: tabular-nums; }
.tv-time-compact.pending strong { color: var(--accent); }
@media (max-width: 900px) { .tv-rank-focus, .tv-secondary-row { grid-template-columns: 1fr; } }

/* TV cleanup */
.tv-topline { display: none; }
.tv-screen { padding-top: clamp(1.2rem, 3vw, 3rem); }
.tv-result { padding-top: 0; align-content: center; }
.tv-bib { font-size: clamp(3.2rem, 7vw, 7rem); }
.tv-runner h2 { font-size: clamp(2.8rem, 5.8vw, 6.6rem); max-width: 18ch; }


.rank-hero { text-align: center; display: grid; justify-items: center; align-content: center; }

.fullscreen-toggle { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; border: 1px solid var(--line); border-radius: 8px; padding: 0.85rem 1rem; color: var(--ink); background: rgba(0,0,0,0.58); font-weight: 950; cursor: pointer; backdrop-filter: blur(14px); }
.is-fullscreen .fullscreen-toggle { display: none; }


/* TV abstract motion */
.tv-screen { overflow: hidden; isolation: isolate; }
.tv-screen::before,
.tv-screen::after { content: ""; position: absolute; inset: -18%; pointer-events: none; z-index: 0; }
.tv-screen::before { background: conic-gradient(from 120deg at 35% 40%, transparent 0deg, rgba(232,64,42,0.20) 72deg, transparent 138deg, rgba(246,196,83,0.16) 218deg, transparent 292deg, rgba(25,195,125,0.14) 338deg, transparent 360deg); filter: blur(34px); opacity: 0.78; animation: abstractDrift 22s ease-in-out infinite alternate; }
.tv-screen::after { background: linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,0.07) 48%, transparent 55% 100%), repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 76px); opacity: 0.34; transform: rotate(-4deg); animation: abstractSlide 18s linear infinite; }
.tv-topline, .tv-idle, .tv-result, .fullscreen-toggle { position: relative; z-index: 1; }
.tv-runner { text-align: center; justify-self: center; align-self: center; }
.tv-runner h2 { margin-left: auto; margin-right: auto; text-align: center; }
.tv-runner p, .tv-runner small { text-align: center; }
@keyframes abstractDrift { from { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1); } to { transform: translate3d(2%, 1%, 0) rotate(10deg) scale(1.06); } }
@keyframes abstractSlide { from { background-position: 0 0, 0 0; } to { background-position: 220px 0, 152px 0; } }


/* Stronger TV motion */
.tv-screen { background-size: 120px 120px, 120px 120px, 160% 160%, 160% 160%; animation: tvBaseMotion 26s ease-in-out infinite alternate; }
.tv-screen::before { inset: -35%; opacity: 0.95; filter: blur(26px) saturate(1.35); background: conic-gradient(from 0deg at 50% 50%, rgba(232,64,42,0.32), rgba(246,196,83,0.20), rgba(47,128,237,0.26), rgba(25,195,125,0.20), rgba(232,64,42,0.32)); animation: abstractDriftStrong 16s ease-in-out infinite alternate; }
.tv-screen::after { opacity: 0.55; background: linear-gradient(105deg, transparent 0 32%, rgba(255,255,255,0.13) 43%, transparent 52% 100%), repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 58px); animation: abstractSlideStrong 10s linear infinite; }
@keyframes tvBaseMotion { from { background-position: 0 0, 0 0, 15% 20%, 0 0; } to { background-position: 80px 36px, -70px 58px, 85% 70%, 0 0; } }
@keyframes abstractDriftStrong { from { transform: translate3d(-5%, -3%, 0) rotate(0deg) scale(1); } to { transform: translate3d(5%, 4%, 0) rotate(26deg) scale(1.14); } }
@keyframes abstractSlideStrong { from { transform: translateX(-4%) rotate(-4deg); background-position: 0 0, 0 0; } to { transform: translateX(4%) rotate(-4deg); background-position: 420px 0, 174px 0; } }


/* TV no bib */
.tv-bib { display: none; }
.tv-result { grid-template-columns: 1fr; }
.tv-runner { grid-column: 1 / -1; }
.tv-runner h2 { text-transform: uppercase; }


/* Tablet landscape kiosk */
.tablet-body { overflow: hidden; }
.tablet-body .fullscreen-toggle { left: 1rem; right: auto; bottom: 1rem; }
.tablet-shell {
  grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 1.05fr);
  align-content: stretch;
  align-items: stretch;
  justify-content: stretch;
  min-height: 100vh;
  gap: clamp(1rem, 2.2vw, 2rem);
}
.entry-panel { min-height: calc(100vh - clamp(2rem, 6vw, 4rem)); justify-content: center; }
.tablet-brand-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: calc(100vh - clamp(2rem, 6vw, 4rem));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(1.4rem, 4vw, 3rem);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(232,64,42,0.20), rgba(47,128,237,0.14)),
    rgba(255,255,255,0.06);
  box-shadow: var(--shadow);
  text-align: center;
}
.tablet-brand-panel p,
.tablet-brand-panel h2,
.tablet-brand-panel strong { margin: 0; line-height: 0.86; text-transform: uppercase; }
.tablet-brand-panel p { color: var(--gold); font-size: clamp(2.8rem, 7vw, 7rem); font-weight: 950; }
.tablet-brand-panel h2 { color: var(--ink); font-size: clamp(3.4rem, 8vw, 8rem); font-weight: 950; }
.tablet-brand-panel strong { margin-top: 0.7rem; color: var(--accent-2); font-size: clamp(5rem, 13vw, 13rem); font-weight: 950; font-variant-numeric: tabular-nums; }
.tablet-panel.result-panel { bottom: clamp(1rem, 2vw, 1.5rem); }
@media (orientation: portrait), (max-width: 850px) {
  .tablet-body { overflow: auto; }
  .tablet-shell { grid-template-columns: 1fr; }
  .tablet-brand-panel { min-height: 18rem; }
}

/* Tablet tighter fit */
.tablet-shell { padding: clamp(0.6rem, 1.5vw, 1.1rem); gap: clamp(0.6rem, 1.4vw, 1rem); grid-template-columns: minmax(300px, 0.92fr) minmax(300px, 1.08fr); }
.entry-panel { min-height: calc(100vh - clamp(1.2rem, 3vw, 2.2rem)); padding: clamp(0.75rem, 1.6vw, 1.15rem); gap: clamp(0.55rem, 1.2vw, 0.9rem); }
.brand-row h1 { font-size: clamp(1.45rem, 3vw, 2.5rem); }
.entry-panel .eyebrow { font-size: 0.68rem; margin-bottom: 0.2rem; }
.input-row { gap: 0.5rem; }
input { padding: 0.55rem 0.75rem; font-size: clamp(1.8rem, 4.8vw, 3.8rem); }
.primary-action { padding: 0 0.9rem; font-size: clamp(0.9rem, 1.5vw, 1.1rem); }
.keypad { gap: 0.45rem; }
.keypad button { min-height: clamp(3.2rem, 8.2vw, 5.2rem); font-size: clamp(1.2rem, 2.7vw, 2rem); }
.tablet-brand-panel { min-height: calc(100vh - clamp(1.2rem, 3vw, 2.2rem)); padding: clamp(0.9rem, 2vw, 1.6rem); }
.tablet-brand-panel p { font-size: clamp(2rem, 4.8vw, 4.8rem); }
.tablet-brand-panel h2 { font-size: clamp(2.25rem, 5.4vw, 5.4rem); }
.tablet-brand-panel strong { font-size: clamp(3.6rem, 9vw, 9rem); }
.tablet-panel.result-panel { width: min(560px, calc(100vw - 2rem)); padding: 0.75rem; }
.result-card h2 { font-size: clamp(1.25rem, 2.7vw, 2rem); }
@media (max-height: 620px) and (orientation: landscape) {
  .brand-row h1 { font-size: clamp(1.25rem, 2.4vw, 2rem); }
  label { margin-bottom: 0.35rem; font-size: 0.85rem; }
  .keypad button { min-height: clamp(2.75rem, 7.2vw, 4.4rem); }
  .tablet-brand-panel p { font-size: clamp(1.7rem, 4vw, 4rem); }
  .tablet-brand-panel h2 { font-size: clamp(1.9rem, 4.6vw, 4.6rem); }
  .tablet-brand-panel strong { font-size: clamp(3rem, 7.8vw, 7.8rem); }
}

/* Mobile number entry */
.mobile-kiosk-body { overflow: auto; }
.mobile-kiosk-shell {
  display: grid;
  min-height: 100vh;
  padding: clamp(0.75rem, 4vw, 1.2rem);
  place-items: center;
}
.mobile-entry-panel {
  width: min(100%, 460px);
  padding: clamp(1rem, 5vw, 1.6rem);
  display: grid;
  gap: 0.9rem;
}
.mobile-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: flex-start;
}
.mobile-head h1 {
  margin: 0;
  font-size: clamp(2rem, 12vw, 4rem);
  line-height: 0.9;
}
.mobile-entry-panel form { display: grid; gap: 0.7rem; }
.mobile-entry-panel input {
  text-align: center;
  font-size: clamp(3.2rem, 18vw, 6rem);
  padding: 0.55rem;
}
.mobile-submit { min-height: 3.6rem; width: 100%; }
.mobile-keypad button { min-height: clamp(4.2rem, 18vw, 6.2rem); }
.mobile-message-panel { width: min(92vw, 420px); }
.mobile-kiosk-body .tablet-brand-panel { display: none; }

/* Video wall */
.wall-body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: #081018;
  background: #f4f7fb;
}
.wall-screen {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.2rem, 3vw, 3.4rem);
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.95), transparent 24rem),
    radial-gradient(circle at 80% 20%, rgba(246,196,83,0.38), transparent 28rem),
    radial-gradient(circle at 18% 82%, rgba(47,128,237,0.25), transparent 28rem),
    linear-gradient(135deg, #f9fbff 0%, #dfeaf4 48%, #fff4dd 100%);
  animation: wallBaseLight 18s ease-in-out infinite alternate;
}
.wall-screen::before,
.wall-screen::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.wall-screen::before {
  inset: -30%;
  background: conic-gradient(from 0deg at 50% 50%, rgba(232,64,42,0.20), rgba(246,196,83,0.34), rgba(25,195,125,0.22), rgba(47,128,237,0.26), rgba(232,64,42,0.20));
  filter: blur(30px) saturate(1.15);
  opacity: 0.72;
  animation: wallAura 14s ease-in-out infinite alternate;
}
.wall-screen::after {
  inset: -12%;
  background:
    linear-gradient(105deg, transparent 0 36%, rgba(255,255,255,0.55) 44%, transparent 54% 100%),
    repeating-linear-gradient(90deg, rgba(8,16,24,0.055) 0 1px, transparent 1px 82px);
  opacity: 0.58;
  transform: rotate(-5deg);
  animation: wallSweep 9s linear infinite;
}
.wall-idle,
.wall-result,
.wall-fullscreen-toggle { position: relative; z-index: 1; }
.wall-idle {
  min-height: calc(100vh - 6rem);
  display: grid;
  place-items: center;
  color: rgba(8,16,24,0.62);
  font-size: clamp(3rem, 8vw, 9rem);
  font-weight: 950;
  text-transform: uppercase;
  text-align: center;
}
.wall-result {
  min-height: calc(100vh - clamp(2.4rem, 6vw, 6.8rem));
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: clamp(0.8rem, 2vh, 1.8rem);
  align-items: center;
}
.wall-event-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  color: rgba(8,16,24,0.66);
  font-weight: 950;
  text-transform: uppercase;
}
.wall-event-row span,
.wall-event-row strong {
  display: block;
  border: 1px solid rgba(8,16,24,0.12);
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(16px);
}
.wall-runner-block { text-align: center; align-self: end; }
.wall-runner-block h1 {
  margin: 0 auto;
  max-width: 15ch;
  color: #071016;
  font-size: clamp(5rem, 13vw, 16rem);
  font-weight: 950;
  line-height: 0.82;
  text-transform: uppercase;
  animation: wallNameIn 700ms cubic-bezier(.2,.8,.2,1) both;
}
.wall-runner-block p {
  margin: clamp(0.8rem, 1.5vw, 1.4rem) 0 0;
  color: rgba(8,16,24,0.58);
  font-size: clamp(1.4rem, 2.5vw, 3rem);
  font-weight: 950;
  text-transform: uppercase;
}
.wall-time-block {
  justify-self: center;
  min-width: min(760px, 92vw);
  border: 1px solid rgba(8,16,24,0.14);
  border-radius: 8px;
  padding: clamp(0.9rem, 2vw, 1.5rem);
  text-align: center;
  background: rgba(255,255,255,0.56);
  box-shadow: 0 24px 70px rgba(47,128,237,0.18);
  backdrop-filter: blur(18px);
}
.wall-time-block span {
  display: block;
  color: rgba(8,16,24,0.58);
  font-weight: 950;
  text-transform: uppercase;
}
.wall-time-block strong {
  display: block;
  margin-top: 0.15rem;
  color: #e8402a;
  font-size: clamp(3rem, 7vw, 8rem);
  font-weight: 950;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
}
.wall-time-block.pending strong { color: #2f80ed; }
.wall-podium {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: clamp(0.8rem, 1.8vw, 1.6rem);
  align-items: end;
}
.wall-podium-box {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: clamp(8rem, 17vh, 15rem);
  border: 1px solid rgba(8,16,24,0.12);
  border-radius: 8px 8px 0 0;
  padding: clamp(0.85rem, 1.8vw, 1.4rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.42));
  box-shadow: 0 22px 60px rgba(8,16,24,0.12);
  backdrop-filter: blur(16px);
  text-align: center;
}
.podium-first { min-height: clamp(10rem, 22vh, 19rem); border-top: 0.8rem solid #f6c453; }
.podium-second { min-height: clamp(8rem, 18vh, 15rem); border-top: 0.8rem solid #a8b5bd; }
.podium-third { min-height: clamp(7rem, 15vh, 13rem); border-top: 0.8rem solid #e8402a; }
.wall-podium-box span {
  color: rgba(8,16,24,0.58);
  font-size: clamp(0.9rem, 1.4vw, 1.35rem);
  font-weight: 950;
  text-transform: uppercase;
}
.wall-podium-box strong {
  display: block;
  color: #071016;
  font-size: clamp(3.6rem, 7vw, 8rem);
  font-weight: 950;
  line-height: 0.88;
  font-variant-numeric: tabular-nums;
}
.wall-podium-box em {
  color: rgba(8,16,24,0.66);
  font-size: clamp(1.1rem, 2vw, 2.2rem);
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}
.wall-pop .wall-podium-box { animation: podiumRise 650ms cubic-bezier(.2,.8,.2,1) both; }
.wall-pop .podium-first { animation-delay: 120ms; }
.wall-pop .podium-second { animation-delay: 220ms; }
.wall-pop .podium-third { animation-delay: 320ms; }
@keyframes wallBaseLight { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 40px -30px, -70px 20px, 80px 60px, 0 0; } }
@keyframes wallAura { from { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); } to { transform: translate3d(4%, 3%, 0) rotate(24deg) scale(1.1); } }
@keyframes wallSweep { from { background-position: -260px 0, 0 0; } to { background-position: 360px 0, 164px 0; } }
@keyframes wallNameIn { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes podiumRise { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
  .wall-event-row { flex-direction: column; align-items: stretch; text-align: center; }
  .wall-podium { grid-template-columns: 1fr; }
  .podium-first,
  .podium-second,
  .podium-third { min-height: 8rem; }
}

/* Wall podium multi-position override */
.wall-idle p {
  color: #071016;
  font-size: clamp(5rem, 12vw, 15rem);
  line-height: 0.86;
  max-width: 12ch;
}
.wall-result {
  grid-template-rows: auto 1fr;
  min-height: calc(100vh - clamp(2.4rem, 6vw, 6.8rem));
}
.wall-event-centered {
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}
.wall-event-centered span,
.wall-event-centered strong {
  font-size: clamp(1.2rem, 2.2vw, 2.6rem);
}
.wall-podium-stage {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(0.9rem, 2vw, 1.8rem);
  align-items: end;
  width: 100%;
}
.wall-podium-slot {
  display: grid;
  grid-template-rows: minmax(10rem, auto) auto;
  align-items: end;
  min-width: 0;
}
.wall-athlete {
  display: grid;
  align-content: end;
  justify-items: center;
  min-height: clamp(8rem, 24vh, 22rem);
  padding: 0 0.4rem clamp(0.7rem, 1.4vw, 1.3rem);
  text-align: center;
}
.wall-athlete h2 {
  margin: 0;
  max-width: 12ch;
  color: #071016;
  font-size: clamp(2.4rem, 5.2vw, 6.5rem);
  font-weight: 950;
  line-height: 0.86;
  text-transform: uppercase;
}
.wall-athlete p {
  margin: clamp(0.35rem, 0.8vw, 0.7rem) 0 0;
  color: #e8402a;
  font-size: clamp(1.8rem, 3.4vw, 4.4rem);
  font-weight: 950;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.wall-podium-block {
  display: grid;
  place-items: center;
  border: 1px solid rgba(8,16,24,0.12);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.38));
  box-shadow: 0 24px 80px rgba(8,16,24,0.16);
  backdrop-filter: blur(18px);
}
.wall-podium-block strong {
  color: #071016;
  font-size: clamp(5rem, 11vw, 13rem);
  font-weight: 950;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.podium-position-1 .wall-podium-block {
  height: clamp(13rem, 31vh, 25rem);
  border-top: clamp(0.55rem, 1.2vw, 1rem) solid #f6c453;
}
.podium-position-2 .wall-podium-block {
  height: clamp(10rem, 24vh, 19rem);
  border-top: clamp(0.55rem, 1.2vw, 1rem) solid #a8b5bd;
}
.podium-position-3 .wall-podium-block {
  height: clamp(8rem, 19vh, 15rem);
  border-top: clamp(0.55rem, 1.2vw, 1rem) solid #e8402a;
}
.wall-podium-slot.empty .wall-athlete { visibility: hidden; }
.wall-podium-slot.empty .wall-podium-block { opacity: 0.42; }
.wall-pop .wall-podium-slot { animation: podiumRise 650ms cubic-bezier(.2,.8,.2,1) both; }
.wall-pop .podium-position-1 { animation-delay: 80ms; }
.wall-pop .podium-position-2 { animation-delay: 170ms; }
.wall-pop .podium-position-3 { animation-delay: 260ms; }
.podium-position-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.position-choice,
.secondary-action {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255,255,255,0.12);
  font-weight: 950;
  cursor: pointer;
}
.position-choice {
  min-height: 3.4rem;
  font-size: 1.65rem;
}
.position-choice[aria-pressed="true"] {
  color: #071016;
  background: var(--gold);
}
.mobile-clear {
  min-height: 3.2rem;
  color: rgba(255,255,255,0.88);
}
@media (max-width: 900px) {
  .wall-podium-stage { grid-template-columns: 1fr; }
  .wall-podium-slot { grid-template-rows: auto auto; }
}

/* Championship wall polish */
.wall-screen { background:
  radial-gradient(circle at 50% 0%, rgba(255,255,255,0.98), transparent 28rem),
  radial-gradient(circle at 18% 18%, rgba(246,196,83,0.46), transparent 28rem),
  radial-gradient(circle at 84% 18%, rgba(47,128,237,0.26), transparent 30rem),
  linear-gradient(135deg, #fffaf0 0%, #f4f8ff 44%, #e9f1fb 100%);
}
.wall-screen::before { background:
  conic-gradient(from 0deg at 50% 95%, rgba(246,196,83,0.34) 0deg, transparent 18deg, rgba(255,255,255,0.58) 34deg, transparent 52deg, rgba(47,128,237,0.20) 72deg, transparent 96deg, rgba(232,64,42,0.22) 116deg, transparent 140deg, rgba(246,196,83,0.30) 180deg, transparent 230deg, rgba(255,255,255,0.46) 270deg, transparent 320deg, rgba(246,196,83,0.34) 360deg);
  filter: blur(18px) saturate(1.25);
  opacity: 0.95;
  animation: championRays 11s ease-in-out infinite alternate;
}
.wall-screen::after { background:
  radial-gradient(circle, rgba(246,196,83,0.88) 0 2px, transparent 3px),
  radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 2px),
  linear-gradient(105deg, transparent 0 34%, rgba(255,255,255,0.60) 44%, transparent 54% 100%);
  background-size: 110px 110px, 74px 74px, 100% 100%;
  opacity: 0.72;
  animation: championSparkles 8s linear infinite;
}
.wall-podium-slot { grid-template-rows: minmax(14rem, auto) auto; }
.wall-athlete { min-height: clamp(12rem, 31vh, 29rem); padding-bottom: clamp(1.6rem, 3vw, 3rem); }
.wall-athlete h2 { font-size: clamp(2.8rem, 5.7vw, 7.2rem); text-shadow: 0 8px 34px rgba(255,255,255,0.72); }
.wall-athlete p { font-size: clamp(2rem, 3.8vw, 4.8rem); text-shadow: 0 6px 26px rgba(255,255,255,0.72); }
@keyframes championRays { from { transform: translateY(2%) rotate(-7deg) scale(1.02); } to { transform: translateY(-3%) rotate(7deg) scale(1.12); } }
@keyframes championSparkles { from { background-position: 0 0, 0 0, -280px 0; transform: translateX(-2%) rotate(-5deg); } to { background-position: 220px 360px, -140px 260px, 360px 0; transform: translateX(2%) rotate(-5deg); } }

/* Wall podium position fix */
.wall-podium-stage {
  width: min(92vw, 1720px);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
  column-gap: clamp(1rem, 2.4vw, 2.4rem);
}
.wall-podium-slot {
  grid-template-rows: minmax(18rem, auto) auto;
}
.wall-athlete {
  align-self: end;
  transform: translateY(-clamp(2.2rem, 5.5vh, 6rem));
  min-height: clamp(16rem, 38vh, 34rem);
  padding-bottom: 0;
}
.wall-podium-block {
  margin-top: calc(-1 * clamp(1.5rem, 3.5vh, 4rem));
}
.wall-athlete h2 {
  font-size: clamp(2.8rem, 5.3vw, 6.8rem);
}
.wall-athlete p {
  font-size: clamp(2rem, 3.5vw, 4.4rem);
}

/* Wall athlete hard lift */
.wall-podium-stage { padding-top: clamp(12rem, 25vh, 24rem); }
.wall-podium-slot {
  position: relative;
  display: block;
  grid-template-rows: none;
}
.wall-athlete {
  position: absolute;
  left: 50%;
  bottom: calc(100% + clamp(1.4rem, 3.8vh, 4.2rem));
  width: min(120%, 34rem);
  min-height: 0;
  padding: 0;
  transform: translateX(-50%);
  z-index: 2;
}
.podium-position-1 .wall-athlete { bottom: calc(100% + clamp(2.4rem, 6vh, 6.4rem)); }
.wall-podium-block { margin-top: 0; }
.wall-athlete h2 { font-size: clamp(2.4rem, 4.8vw, 6rem); }
.wall-athlete p { font-size: clamp(1.8rem, 3.2vw, 4rem); }

/* Wall athlete extra lift */
.wall-podium-stage { padding-top: clamp(18rem, 36vh, 34rem); }
.wall-athlete { bottom: calc(100% + clamp(5.5rem, 12vh, 12rem)); }
.podium-position-1 .wall-athlete { bottom: calc(100% + clamp(7rem, 15vh, 15rem)); }

/* Wall background cleanup and split name */
.wall-screen::after { background: radial-gradient(circle, rgba(246,196,83,0.72) 0 2px, transparent 3px), radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 2px); background-size: 120px 120px, 82px 82px; }
.wall-athlete h2 { line-height: 0.88; }

/* Wall background cleanup and split name */
.wall-screen::after { background: radial-gradient(circle, rgba(246,196,83,0.72) 0 2px, transparent 3px), radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 2px); background-size: 120px 120px, 82px 82px; }
.wall-athlete h2 { line-height: 0.88; }

/* Fluid abstract runner background */
.wall-screen {
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,0.96), transparent 24rem),
    linear-gradient(118deg, #f8fbff 0%, #edf6ff 36%, #fff2d8 68%, #f5f9ff 100%);
}
.wall-screen::before {
  inset: -28%;
  background:
    radial-gradient(ellipse at 24% 40%, rgba(47,128,237,0.30), transparent 34%),
    radial-gradient(ellipse at 72% 30%, rgba(246,196,83,0.42), transparent 32%),
    radial-gradient(ellipse at 48% 70%, rgba(232,64,42,0.22), transparent 34%),
    conic-gradient(from 140deg at 50% 52%, rgba(255,255,255,0.10), rgba(25,195,125,0.18), rgba(47,128,237,0.16), rgba(246,196,83,0.22), rgba(255,255,255,0.12));
  filter: blur(32px) saturate(1.28);
  opacity: 0.9;
  animation: fluidWallFlow 16s ease-in-out infinite alternate;
}
.wall-screen::after {
  inset: 0;
  opacity: 0.32;
  background:
    linear-gradient(116deg, transparent 0 18%, rgba(255,255,255,0.5) 31%, transparent 43% 100%),
    radial-gradient(ellipse at 18% 72%, rgba(8,16,24,0.16) 0 2%, transparent 14%),
    radial-gradient(ellipse at 51% 69%, rgba(8,16,24,0.13) 0 2.4%, transparent 16%),
    radial-gradient(ellipse at 80% 71%, rgba(8,16,24,0.12) 0 2%, transparent 14%);
  background-size: 160% 100%, 38rem 18rem, 42rem 18rem, 36rem 16rem;
  background-position: -30% 0, 0 100%, 42% 100%, 100% 100%;
  animation: runnerSilhouetteFlow 12s ease-in-out infinite alternate;
}
.wall-runner-silhouette,
.wall-screen .runner-shape { display: none; }
.wall-podium-block {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.48)),
    radial-gradient(circle at 50% 0%, rgba(246,196,83,0.32), transparent 48%);
}
.trophy-icon {
  width: clamp(3.4rem, 6vw, 7.4rem);
  height: clamp(3.4rem, 6vw, 7.4rem);
  margin-bottom: clamp(0.35rem, 0.8vw, 0.75rem);
  fill: none;
  stroke: #071016;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 22px rgba(8,16,24,0.18));
}
.trophy-1 { stroke: #d79b19; }
.trophy-2 { stroke: #7f8b95; }
.trophy-3 { stroke: #b75b2b; }
@keyframes fluidWallFlow {
  from { transform: translate3d(-3%, -2%, 0) rotate(-8deg) scale(1.03); border-radius: 42% 58% 61% 39%; }
  to { transform: translate3d(4%, 3%, 0) rotate(10deg) scale(1.12); border-radius: 58% 42% 38% 62%; }
}
@keyframes runnerSilhouetteFlow {
  from { background-position: -30% 0, -8% 100%, 42% 100%, 108% 100%; transform: skewX(-3deg); }
  to { background-position: 12% 0, 6% 100%, 52% 100%, 94% 100%; transform: skewX(2deg); }
}

/* Wall restore podium numbers and obvious motion */
.wall-podium-stage {
  width: min(88vw, 1640px);
  margin: 0 auto;
  padding-top: clamp(18rem, 34vh, 32rem);
  column-gap: clamp(1.4rem, 3vw, 3.2rem);
}
.wall-podium-block {
  display: grid;
  place-items: center;
  margin-top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.48));
}
.wall-podium-block strong {
  display: block;
  color: #071016;
  font-size: clamp(6rem, 13vw, 16rem);
  font-weight: 950;
  line-height: 0.82;
  font-variant-numeric: tabular-nums;
}
.trophy-icon { display: none !important; }
.podium-position-1 .wall-podium-block { height: clamp(13rem, 31vh, 25rem); }
.podium-position-2 .wall-podium-block { height: clamp(10rem, 24vh, 19rem); }
.podium-position-3 .wall-podium-block { height: clamp(8rem, 19vh, 15rem); }
.wall-athlete {
  bottom: calc(100% + clamp(5.5rem, 12vh, 12rem));
  width: min(118%, 34rem);
}
.podium-position-1 .wall-athlete { bottom: calc(100% + clamp(7rem, 15vh, 15rem)); }
.wall-screen {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.95), transparent 24rem),
    linear-gradient(120deg, #f9fcff 0%, #e9f5ff 36%, #fff1d5 66%, #f7fbff 100%);
  background-size: 140% 140%, 180% 180%;
  animation: wallClearBaseMove 10s ease-in-out infinite alternate !important;
}
.wall-screen::before {
  inset: -40%;
  opacity: 0.95;
  filter: blur(24px) saturate(1.35);
  background:
    radial-gradient(ellipse at 22% 42%, rgba(47,128,237,0.42), transparent 32%),
    radial-gradient(ellipse at 78% 34%, rgba(246,196,83,0.58), transparent 30%),
    radial-gradient(ellipse at 52% 74%, rgba(232,64,42,0.34), transparent 32%),
    conic-gradient(from 0deg at 50% 50%, rgba(25,195,125,0.24), rgba(255,255,255,0.30), rgba(47,128,237,0.26), rgba(246,196,83,0.34), rgba(232,64,42,0.22), rgba(25,195,125,0.24));
  animation: wallClearFluidMove 7s ease-in-out infinite alternate !important;
}
.wall-screen::after {
  inset: -10%;
  opacity: 0.42;
  background:
    radial-gradient(ellipse at 16% 72%, rgba(8,16,24,0.18) 0 2.4%, transparent 15%),
    radial-gradient(ellipse at 52% 70%, rgba(8,16,24,0.15) 0 2.7%, transparent 16%),
    radial-gradient(ellipse at 84% 72%, rgba(8,16,24,0.14) 0 2.2%, transparent 15%),
    linear-gradient(105deg, transparent 0 28%, rgba(255,255,255,0.62) 40%, transparent 54% 100%);
  background-size: 34rem 15rem, 40rem 16rem, 34rem 15rem, 150% 100%;
  background-position: 0 100%, 50% 100%, 100% 100%, -40% 0;
  animation: wallClearRunnerMove 5s ease-in-out infinite alternate !important;
}
@keyframes wallClearBaseMove {
  from { background-position: 0% 0%, 0% 50%; }
  to { background-position: 100% 30%, 100% 50%; }
}
@keyframes wallClearFluidMove {
  from { transform: translate3d(-7%, -4%, 0) rotate(-14deg) scale(1.02); }
  to { transform: translate3d(7%, 5%, 0) rotate(16deg) scale(1.16); }
}
@keyframes wallClearRunnerMove {
  from { background-position: -8% 100%, 46% 100%, 108% 100%, -40% 0; transform: skewX(-5deg); }
  to { background-position: 8% 100%, 56% 100%, 92% 100%, 40% 0; transform: skewX(4deg); }
}

/* Clean elegant fluid wall background */
.wall-screen {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.92), transparent 30rem),
    linear-gradient(125deg, #f9fcff 0%, #eef7ff 34%, #fff3d8 67%, #f7fbff 100%) !important;
  background-size: 150% 150%, 180% 180% !important;
  animation: elegantWallBase 14s ease-in-out infinite alternate !important;
}
.wall-screen::before {
  inset: -45% !important;
  opacity: 0.86 !important;
  filter: blur(34px) saturate(1.22) !important;
  background:
    radial-gradient(ellipse at 28% 44%, rgba(47,128,237,0.34), transparent 34%),
    radial-gradient(ellipse at 72% 38%, rgba(246,196,83,0.48), transparent 34%),
    radial-gradient(ellipse at 48% 72%, rgba(25,195,125,0.20), transparent 36%),
    radial-gradient(ellipse at 62% 66%, rgba(232,64,42,0.16), transparent 30%) !important;
  animation: elegantFluidWaves 13s ease-in-out infinite alternate !important;
}
.wall-screen::after {
  inset: -20% !important;
  opacity: 0.44 !important;
  filter: blur(18px) !important;
  background:
    linear-gradient(105deg, transparent 0 20%, rgba(255,255,255,0.42) 32%, transparent 44% 100%),
    linear-gradient(130deg, transparent 0 45%, rgba(47,128,237,0.12) 54%, transparent 64% 100%),
    linear-gradient(36deg, transparent 0 38%, rgba(246,196,83,0.18) 48%, transparent 58% 100%) !important;
  background-size: 180% 100%, 160% 100%, 170% 100% !important;
  background-position: -35% 0, 120% 0, 30% 0 !important;
  animation: elegantLightWaves 10s ease-in-out infinite alternate !important;
}
@keyframes elegantWallBase {
  from { background-position: 0% 15%, 0% 50%; }
  to { background-position: 100% 85%, 100% 50%; }
}
@keyframes elegantFluidWaves {
  from { transform: translate3d(-5%, -3%, 0) rotate(-7deg) scale(1.04); border-radius: 42% 58% 55% 45%; }
  to { transform: translate3d(5%, 4%, 0) rotate(8deg) scale(1.14); border-radius: 60% 40% 44% 56%; }
}
@keyframes elegantLightWaves {
  from { background-position: -45% 0, 115% 0, 20% 0; transform: translateX(-3%) skewX(-4deg); }
  to { background-position: 55% 0, 15% 0, 95% 0; transform: translateX(3%) skewX(3deg); }
}

/* Very visible wall animation */
.wall-screen {
  background: linear-gradient(120deg, #f8fbff 0%, #eaf6ff 35%, #fff0cf 70%, #f8fbff 100%) !important;
  background-size: 260% 260% !important;
  animation: visibleWallGradient 6s ease-in-out infinite alternate !important;
}
.wall-screen::before {
  content: "" !important;
  position: absolute !important;
  inset: -35% !important;
  z-index: 0 !important;
  opacity: 0.95 !important;
  filter: blur(28px) saturate(1.45) !important;
  background:
    radial-gradient(circle at 18% 40%, rgba(47,128,237,0.58) 0 14%, transparent 30%),
    radial-gradient(circle at 72% 36%, rgba(246,196,83,0.72) 0 15%, transparent 32%),
    radial-gradient(circle at 48% 78%, rgba(232,64,42,0.38) 0 13%, transparent 31%),
    radial-gradient(circle at 82% 78%, rgba(25,195,125,0.36) 0 12%, transparent 30%) !important;
  animation: visibleBlobDance 5.5s ease-in-out infinite alternate !important;
}
.wall-screen::after {
  content: "" !important;
  position: absolute !important;
  inset: -20% !important;
  z-index: 0 !important;
  opacity: 0.82 !important;
  filter: blur(10px) !important;
  background:
    linear-gradient(105deg, transparent 0 34%, rgba(255,255,255,0.86) 45%, transparent 56% 100%),
    linear-gradient(25deg, transparent 0 42%, rgba(47,128,237,0.20) 50%, transparent 60% 100%),
    linear-gradient(145deg, transparent 0 40%, rgba(246,196,83,0.30) 50%, transparent 61% 100%) !important;
  background-size: 180% 100%, 160% 100%, 170% 100% !important;
  animation: visibleLightSweep 3.8s ease-in-out infinite alternate !important;
}
.wall-result,
.wall-idle,
.wall-fullscreen-toggle { position: relative; z-index: 2; }
@keyframes visibleWallGradient {
  from { background-position: 0% 30%; }
  to { background-position: 100% 70%; }
}
@keyframes visibleBlobDance {
  from { transform: translate3d(-7%, -5%, 0) rotate(-12deg) scale(1.04); }
  to { transform: translate3d(8%, 6%, 0) rotate(14deg) scale(1.18); }
}
@keyframes visibleLightSweep {
  from { background-position: -80% 0, 130% 0, -20% 0; transform: translateX(-5%) skewX(-7deg); }
  to { background-position: 130% 0, -20% 0, 110% 0; transform: translateX(5%) skewX(6deg); }
}

/* JS-driven visible motion layers */
.wall-motion-layers {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.wall-motion-blob,
.wall-motion-sweep {
  position: absolute;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.wall-motion-blob {
  width: 62vw;
  height: 62vw;
  border-radius: 44% 56% 62% 38%;
  filter: blur(34px) saturate(1.35);
  opacity: 0.72;
  mix-blend-mode: multiply;
}
.blob-a {
  left: -16vw;
  top: -18vh;
  background: radial-gradient(circle at 40% 42%, rgba(47,128,237,0.52), transparent 62%);
}
.blob-b {
  right: -18vw;
  top: 6vh;
  background: radial-gradient(circle at 45% 45%, rgba(246,196,83,0.68), transparent 62%);
}
.blob-c {
  left: 30vw;
  bottom: -30vh;
  background: radial-gradient(circle at 45% 45%, rgba(232,64,42,0.34), transparent 64%);
}
.wall-motion-sweep {
  top: -20vh;
  left: -35vw;
  width: 34vw;
  height: 140vh;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.78), transparent);
  filter: blur(18px);
  opacity: 0.8;
}
.wall-result,
.wall-idle,
.wall-fullscreen-toggle { z-index: 3; }

/* Wall motion intensity boost */
.wall-motion-blob {
  width: 82vw;
  height: 82vw;
  filter: blur(24px) saturate(1.75);
  opacity: 0.9;
}
.blob-a { left: -24vw; top: -28vh; background: radial-gradient(circle at 40% 42%, rgba(47,128,237,0.78), transparent 62%); }
.blob-b { right: -28vw; top: -4vh; background: radial-gradient(circle at 45% 45%, rgba(246,196,83,0.92), transparent 62%); }
.blob-c { left: 24vw; bottom: -38vh; background: radial-gradient(circle at 45% 45%, rgba(232,64,42,0.55), transparent 64%); }
.wall-motion-sweep {
  left: -70vw;
  width: 68vw;
  height: 160vh;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.92) 42%, rgba(246,196,83,0.44) 50%, rgba(255,255,255,0.92) 58%, transparent 100%);
  filter: blur(12px);
  opacity: 0.95;
}

/* Upper video arch 1920x256 */
.arch-body {
  margin: 0;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background: #02070b;
  display: grid;
  place-items: center;
  color: #f7fbff;
}
.arch-strip {
  position: relative;
  width: 1920px;
  height: 256px;
  max-width: 100vw;
  aspect-ratio: 1920 / 256;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 72px;
  background:
    radial-gradient(circle at 50% 50%, rgba(246,196,83,0.34), transparent 280px),
    linear-gradient(90deg, rgba(232,64,42,0.38), transparent 24%, transparent 76%, rgba(47,128,237,0.38)),
    linear-gradient(135deg, #061018 0%, #122431 50%, #061018 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);
}
.arch-strip::before,
.arch-strip::after {
  content: "";
  position: absolute;
  inset: -80px;
  pointer-events: none;
}
.arch-strip::before {
  background: linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,0.20) 48%, transparent 58% 100%);
  animation: archSweep 4.2s ease-in-out infinite alternate;
}
.arch-strip::after {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 84px);
  opacity: 0.32;
  animation: archGridMove 8s linear infinite;
}
.arch-side,
.arch-timer-wrap {
  position: relative;
  z-index: 1;
}
.arch-side {
  display: grid;
  gap: 8px;
  text-transform: uppercase;
}
.arch-right { text-align: right; justify-items: end; }
.arch-side span {
  color: #f6c453;
  font-size: 32px;
  font-weight: 950;
  line-height: 1;
}
.arch-side strong {
  color: rgba(247,251,255,0.92);
  font-size: 52px;
  font-weight: 950;
  line-height: 0.92;
}
.arch-timer-wrap {
  min-width: 720px;
  text-align: center;
}
.arch-timer-wrap p {
  margin: 0 0 6px;
  color: rgba(247,251,255,0.68);
  font-size: 22px;
  font-weight: 950;
  text-transform: uppercase;
}
.arch-timer {
  display: block;
  color: #f7fbff;
  font-size: 118px;
  font-weight: 950;
  line-height: 0.9;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(246,196,83,0.32);
}
.arch-running .arch-timer { color: #f6c453; }
.arch-controls {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
}
.arch-controls button {
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  padding: 10px 14px;
  color: #f7fbff;
  background: rgba(0,0,0,0.56);
  font-weight: 950;
  cursor: pointer;
}
.is-fullscreen .arch-controls { display: none; }
@keyframes archSweep {
  from { transform: translateX(-18%) skewX(-10deg); opacity: 0.25; }
  to { transform: translateX(18%) skewX(-10deg); opacity: 0.62; }
}
@keyframes archGridMove {
  from { background-position: 0 0; }
  to { background-position: 168px 0; }
}
@media (max-width: 1200px) {
  .arch-strip { transform: scale(calc(100vw / 1920)); transform-origin: center; max-width: none; }
}

/* Arch graphic/timer toggle */
.arch-graphic {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: url("https://stoperica.hr/lukgore.jpg") center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.arch-show-graphic .arch-graphic { opacity: 1; }
.arch-show-graphic .arch-side,
.arch-show-graphic .arch-timer-wrap { opacity: 0; }
.arch-side,
.arch-timer-wrap { transition: opacity 180ms ease; }

/* Arch graphic fit full image */
.arch-graphic {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #02070b;
}

/* Arch graphic exact fit no gaps */
.arch-graphic {
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
}

/* Arch 1920x512 size */
.arch-strip {
  width: 1920px;
  height: 512px;
  aspect-ratio: 1920 / 512;
  padding: 0 96px;
}
.arch-side span { font-size: 46px; }
.arch-side strong { font-size: 78px; }
.arch-timer-wrap { min-width: 980px; }
.arch-timer-wrap p { font-size: 34px; margin-bottom: 14px; }
.arch-timer { font-size: 188px; }
.arch-controls { bottom: 24px; }
@media (max-width: 1200px) {
  .arch-strip { transform: scale(calc(100vw / 1920)); transform-origin: center; max-width: none; }
}

/* Arch 1920x768 fixed canvas */
.arch-body {
  width: 1920px;
  min-width: 1920px;
  max-width: 1920px;
  height: 768px;
  min-height: 768px;
  max-height: 768px;
  display: block;
}
.arch-strip {
  width: 1920px !important;
  min-width: 1920px !important;
  max-width: 1920px !important;
  height: 768px !important;
  min-height: 768px !important;
  max-height: 768px !important;
  aspect-ratio: auto !important;
  transform: none !important;
  padding: 0 120px;
}
.arch-side span { font-size: 58px; }
.arch-side strong { font-size: 98px; }
.arch-timer-wrap { min-width: 1120px; }
.arch-timer-wrap p { font-size: 42px; margin-bottom: 18px; }
.arch-timer { font-size: 244px; }
@media (max-width: 1200px) {
  .arch-strip { transform: none !important; max-width: 1920px !important; }
}

/* Arch horizontal offset */
.arch-strip {
  margin-left: -125px !important;
}

/* Arch fixed 1800 width */
.arch-body {
  width: 1800px !important;
  min-width: 1800px !important;
  max-width: 1800px !important;
}
.arch-strip {
  width: 1800px !important;
  min-width: 1800px !important;
  max-width: 1800px !important;
  margin-left: 0 !important;
}

/* Arch timer fit for 1800 width */
.arch-strip { padding: 0 84px !important; }
.arch-timer-wrap { min-width: 920px !important; }
.arch-timer { font-size: 190px !important; }
.arch-timer-wrap p { font-size: 34px !important; margin-bottom: 14px !important; }
.arch-side span { font-size: 44px !important; }
.arch-side strong { font-size: 74px !important; }

/* Arch timer alignment */
.arch-timer-wrap {
  transform: translateX(-120px) !important;
}
.arch-strip,
.arch-graphic {
  height: 768px !important;
  min-height: 768px !important;
  max-height: 768px !important;
}

/* Arch timer width adjustment */
.arch-timer-wrap {
  min-width: 800px !important;
  width: 800px !important;
}

/* Arch timer stronger compact left */
.arch-timer-wrap {
  min-width: 500px !important;
  width: 500px !important;
  transform: translateX(-270px) !important;
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
}
.arch-timer {
  width: 100% !important;
  text-align: center !important;
  font-size: 150px !important;
}

/* Arch timer hard left and narrow digits */
.arch-timer-wrap {
  grid-column: 2 !important;
  justify-self: start !important;
  margin-left: -360px !important;
  transform: none !important;
  min-width: 360px !important;
  width: 360px !important;
  max-width: 360px !important;
}
.arch-timer {
  display: block !important;
  width: 360px !important;
  max-width: 360px !important;
  font-size: 118px !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Arch left title compact */
.arch-left {
  max-width: 280px !important;
  width: 280px !important;
}
.arch-left span {
  font-size: 26px !important;
}
.arch-left strong {
  font-size: 38px !important;
  line-height: 0.95 !important;
}

/* Arch live label and timer height */
.arch-timer-wrap {
  min-height: 120px !important;
  height: 120px !important;
  align-content: center !important;
}

/* Arch larger timer and title */
.arch-timer-wrap {
  min-height: 220px !important;
  height: 220px !important;
}
.arch-timer {
  font-size: 150px !important;
}
.arch-left {
  max-width: 380px !important;
  width: 380px !important;
}
.arch-left span {
  font-size: 38px !important;
}
.arch-left strong {
  font-size: 56px !important;
  line-height: 0.95 !important;
}

/* Arch timer height only, no spacing */
.arch-timer-wrap {
  min-height: 340px !important;
  height: 340px !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Arch content down 80px */
.arch-side,
.arch-timer-wrap {
  transform: translateY(80px) !important;
}
.arch-timer-wrap {
  margin-left: -360px !important;
}

/* Arch timer unsqueeze */
.arch-timer-wrap {
  width: 620px !important;
  min-width: 620px !important;
  max-width: 620px !important;
}
.arch-timer {
  width: 620px !important;
  max-width: 620px !important;
  font-size: 140px !important;
  font-stretch: normal !important;
  transform: none !important;
}

/* Arch timer restore position, narrow only */
.arch-timer-wrap {
  margin-left: 0 !important;
  transform: translateY(80px) !important;
  width: 520px !important;
  min-width: 520px !important;
  max-width: 520px !important;
}
.arch-timer {
  width: 520px !important;
  max-width: 520px !important;
  font-size: 132px !important;
}

/* Arch timer digits only */
.arch-timer {
  font-size: 112px !important;
  transform: none !important;
  letter-spacing: 0 !important;
}

/* Arch graphic down 120px */
.arch-graphic {
  transform: translateY(120px) !important;
}

/* Arch graphic reset position */
.arch-graphic {
  transform: translateY(0) !important;
}

/* Arch graphic narrower centered */
.arch-graphic {
  left: 100px !important;
  right: 100px !important;
  width: auto !important;
  transform: translateY(0) !important;
  background-size: 100% 100% !important;
}

/* Arch graphic left 200px */
.arch-graphic {
  transform: translateX(-200px) !important;
}

/* Arch graphic right 100px from previous */
.arch-graphic {
  transform: translateX(-100px) !important;
}

/* Arch graphic keep position, reduce width 80px */
.arch-graphic {
  left: 140px !important;
  right: 140px !important;
  transform: translateX(-100px) !important;
}

/* Arch graphic reduce width another 80px */
.arch-graphic {
  left: 180px !important;
  right: 180px !important;
  transform: translateX(-100px) !important;
}

/* Arch graphic increase width 100px */
.arch-graphic {
  left: 130px !important;
  right: 130px !important;
  transform: translateX(-100px) !important;
}

/* Arch graphic test full width */
.arch-graphic {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: none !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
}

/* Arch graphic 95 percent from left */
.arch-graphic {
  left: 0 !important;
  right: auto !important;
  width: 95% !important;
  transform: none !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
}

/* Arch graphic restore pixel sizing */
.arch-graphic {
  left: 130px !important;
  right: 130px !important;
  width: auto !important;
  transform: translateX(-100px) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
}

/* Arch graphic left additional 30px */
.arch-graphic {
  transform: translateX(-130px) !important;
}

/* Arch graphic left additional 50px */
.arch-graphic {
  transform: translateX(-180px) !important;
}

/* Arch graphic right 100px correction */
.arch-graphic {
  transform: translateX(-80px) !important;
}

/* Arch graphic left 50px from current */
.arch-graphic {
  transform: translateX(-130px) !important;
}

/* Arch graphic full height */
.arch-graphic {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}

/* Arch graphic height restore */
.arch-graphic {
  height: 808px !important;
  min-height: 768px !important;
  max-height: 808px !important;

}


/* Arch graphic manual box - edit these 4 values */
:root {
  --arch-graphic-left: 0px;
  --arch-graphic-top: 0px;
  --arch-graphic-width: 1540px;
  --arch-graphic-height: 808px;
}

.arch-graphic {
  inset: auto !important;
  left: var(--arch-graphic-left) !important;
  top: var(--arch-graphic-top) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--arch-graphic-width) !important;
  min-width: var(--arch-graphic-width) !important;
  max-width: var(--arch-graphic-width) !important;
  height: var(--arch-graphic-height) !important;
  min-height: var(--arch-graphic-height) !important;
  max-height: var(--arch-graphic-height) !important;
  transform: none !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
}

/* Arch canvas must match graphic height - removes bottom strip */
.arch-body,
.arch-strip {
  height: var(--arch-graphic-height) !important;
  min-height: var(--arch-graphic-height) !important;
  max-height: var(--arch-graphic-height) !important;
  background-color: transparent !important;
}

.arch-body {
  overflow: hidden !important;
}

.arch-strip {
  overflow: hidden !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Arch fullscreen fill - no black bottom area */
html:has(.arch-body),
.arch-body.is-fullscreen {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  background: #c9c9c9 !important;
  overflow: hidden !important;
}

.arch-body.is-fullscreen .arch-strip {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #c9c9c9 !important;
}

.arch-body.is-fullscreen .arch-graphic {
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  transform: none !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
}

/* Arch fullscreen timer restore - graphic rules stay untouched */
.arch-body.is-fullscreen:not(.arch-show-graphic) {
  background: #02070b !important;
}

.arch-body.is-fullscreen:not(.arch-show-graphic) .arch-strip {
  padding: 0 84px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(246,196,83,0.34), transparent 280px),
    linear-gradient(90deg, rgba(232,64,42,0.38), transparent 24%, transparent 76%, rgba(47,128,237,0.38)),
    linear-gradient(135deg, #061018 0%, #122431 50%, #061018 100%) !important;
}

.arch-body.is-fullscreen:not(.arch-show-graphic) .arch-side,
.arch-body.is-fullscreen:not(.arch-show-graphic) .arch-timer-wrap {
  transform: translateY(80px) !important;
}

/* Arch timer vertical unsqueeze */
.arch-timer-wrap {
  height: 460px !important;
  min-height: 460px !important;
  max-height: 460px !important;
  align-content: center !important;
}

.arch-timer {
  line-height: 1.05 !important;
  font-size: 112px !important;
  transform: none !important;
}

/* Arch timer vertical scale fix */
.arch-timer {
  display: block !important;
  transform: scaleY(1.28) !important;
  transform-origin: center center !important;
  line-height: 1.15 !important;
}

.arch-body.is-fullscreen:not(.arch-show-graphic) .arch-timer {
  transform: scaleY(1.28) !important;
}

/* Arch timer hard reset - same canvas logic as graphic, no vertical squeeze */
.arch-body:not(.arch-show-graphic) .arch-strip {
  height: var(--arch-graphic-height) !important;
  min-height: var(--arch-graphic-height) !important;
  max-height: var(--arch-graphic-height) !important;
  display: grid !important;
  grid-template-columns: 320px 1fr 320px !important;
  align-items: center !important;
}

.arch-body:not(.arch-show-graphic) .arch-timer-wrap {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(80px) !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  text-align: center !important;
}

.arch-body:not(.arch-show-graphic) .arch-timer {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 160px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: none !important;
  white-space: nowrap !important;
  font-stretch: normal !important;
}

.arch-body.is-fullscreen:not(.arch-show-graphic) .arch-strip {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
}

.arch-body.is-fullscreen:not(.arch-show-graphic) .arch-timer-wrap {
  transform: translateY(80px) !important;
}

.arch-body.is-fullscreen:not(.arch-show-graphic) .arch-timer {
  font-size: 160px !important;
  transform: none !important;
}

/* Arch timer final shape: narrower width, taller digits */
.arch-body:not(.arch-show-graphic) .arch-timer,
.arch-body.is-fullscreen:not(.arch-show-graphic) .arch-timer {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  font-family: Arial Black, Impact, Arial, Helvetica, sans-serif !important;
  font-size: 180px !important;
  line-height: 1 !important;
  transform: scaleX(0.78) scaleY(1.35) !important;
  transform-origin: center center !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

/* Arch timer digits right only */
.arch-body:not(.arch-show-graphic) .arch-timer,
.arch-body.is-fullscreen:not(.arch-show-graphic) .arch-timer {
  transform: translateX(110px) scaleX(0.78) scaleY(1.35) !important;
}

/* Wall idle sponsor layout */
.wall-idle {
  align-items: start !important;
  justify-items: center !important;
  padding-top: clamp(3rem, 8vh, 7rem) !important;
}

.wall-idle-brand {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: clamp(2rem, 5vh, 4.5rem);
  width: min(86vw, 1500px);
}

.wall-idle-main-logo {
  display: block;
  width: min(58vw, 860px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 44px rgba(8,16,24,0.18));
}

.wall-idle-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: 100%;
  min-height: clamp(7rem, 15vh, 13rem);
}

.wall-idle-logo-row img {
  display: block;
  max-width: min(22vw, 320px);
  max-height: clamp(5rem, 12vh, 10rem);
  object-fit: contain;
}

/* Wall idle Bauder background and larger logo */
.wall-screen.idle {
  background: #c7c5c4 !important;
  animation: none !important;
}

.wall-screen.idle::before,
.wall-screen.idle::after,
.wall-screen.idle .wall-motion-layers {
  display: none !important;
}

.wall-screen.idle .wall-idle-main-logo {
  width: min(76vw, 1220px) !important;
}

/* TV daylight mode */
.tv-body {
  color: #071016 !important;
  background: #f7f7f2 !important;
}

.tv-screen {
  background:
    radial-gradient(circle at 20% 12%, rgba(246,196,83,0.28), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(47,128,237,0.16), transparent 30rem),
    linear-gradient(135deg, #ffffff 0%, #f4f2e9 58%, #fff8e6 100%) !important;
}

.tv-screen::before,
.tv-screen::after {
  opacity: 0.18 !important;
}

.tv-idle,
.tv-runner h2,
.tv-time-compact strong,
.rank-hero em {
  color: #071016 !important;
}

.tv-runner p,
.tv-runner small,
.rank-hero span,
.tv-time-compact span {
  color: rgba(7,16,22,0.68) !important;
}

.rank-hero,
.tv-time-compact {
  border-color: rgba(7,16,22,0.16) !important;
  background: rgba(255,255,255,0.72) !important;
  box-shadow: 0 24px 70px rgba(7,16,22,0.14) !important;
}

.rank-hero strong {
  color: #d99000 !important;
}

.rank-category strong {
  color: #047a4c !important;
}

.tv-time-compact.pending strong {
  color: #e8402a !important;
}

/* TV only gender rank centered */
.tv-rank-focus {
  grid-template-columns: minmax(420px, 760px) !important;
  justify-content: center !important;
}

.rank-gender {
  min-height: clamp(15rem, 34vh, 31rem) !important;
}

/* Tablet input daylight mode */
.tablet-body {
  color: #071016 !important;
  background:
    radial-gradient(circle at 12% 5%, rgba(246,196,83,0.32), transparent 30rem),
    radial-gradient(circle at 90% 15%, rgba(47,128,237,0.14), transparent 34rem),
    linear-gradient(135deg, #ffffff 0%, #f4f2e9 56%, #fff8e6 100%) !important;
}

.tablet-panel,
.tablet-brand-panel {
  border-color: rgba(7,16,22,0.16) !important;
  background: rgba(255,255,255,0.76) !important;
  box-shadow: 0 24px 70px rgba(7,16,22,0.14) !important;
}

.brand-row h1,
.empty-state h2,
.result-card h2,
.tablet-brand-panel h2 {
  color: #071016 !important;
}

.eyebrow,
.tablet-brand-panel p {
  color: #c67f00 !important;
}

.live-pill,
label,
.race-name,
.club-name {
  color: rgba(7,16,22,0.68) !important;
}

.live-pill {
  border-color: rgba(7,16,22,0.18) !important;
  background: rgba(255,255,255,0.58) !important;
}

.live-pill.online {
  color: #ffffff !important;
  background: #047a4c !important;
}

input {
  color: #071016 !important;
  background: rgba(255,255,255,0.86) !important;
  border-color: rgba(7,16,22,0.18) !important;
}

input:focus {
  border-color: #d99000 !important;
  box-shadow: 0 0 0 4px rgba(217,144,0,0.18) !important;
}

.primary-action {
  color: #ffffff !important;
  background: #e8402a !important;
}

.keypad button {
  color: #071016 !important;
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(7,16,22,0.14) !important;
}

.keypad button:active {
  background: rgba(246,196,83,0.55) !important;
}

.tablet-time {
  color: #d99000 !important;
}

.mini-grid div {
  border-color: rgba(7,16,22,0.14) !important;
  background: rgba(255,255,255,0.62) !important;
}

.mini-grid span {
  color: rgba(7,16,22,0.62) !important;
}

.tablet-brand-panel strong {
  color: #047a4c !important;
}

.fullscreen-toggle {
  color: #071016 !important;
  background: rgba(255,255,255,0.82) !important;
  border-color: rgba(7,16,22,0.18) !important;
}

/* Mobile wall position buttons daylight fix */
.mobile-kiosk-body .podium-position-picker {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.5rem !important;
  position: relative !important;
  z-index: 5 !important;
}

.mobile-kiosk-body .position-choice {
  display: block !important;
  min-height: 3.8rem !important;
  color: #071016 !important;
  background: rgba(255,255,255,0.86) !important;
  border: 2px solid rgba(7,16,22,0.22) !important;
  font-size: 1.8rem !important;
  font-weight: 950 !important;
}

.mobile-kiosk-body .position-choice[aria-pressed="true"] {
  color: #071016 !important;
  background: #f6c453 !important;
  border-color: #d99000 !important;
}

/* Mobile wall reset button daylight fix */
.mobile-kiosk-body .mobile-clear {
  display: block !important;
  width: 100% !important;
  min-height: 3.8rem !important;
  margin-top: 0.25rem !important;
  color: #ffffff !important;
  background: #071016 !important;
  border: 2px solid rgba(7,16,22,0.35) !important;
  border-radius: 8px !important;
  font-size: 1.1rem !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  position: relative !important;
  z-index: 6 !important;
}

.mobile-kiosk-body .mobile-clear:active {
  background: #e8402a !important;
}