/* Rink lights status scene (js/rink-lights.js). Brand palette only. */
.rl{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(29,55,73,.06),0 10px 24px rgba(29,55,73,.11); font-family:var(--font-body); }
.rl-scene{ position:relative; aspect-ratio:600/250; background:#1d3749; }
.rl-svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.rl-sky{ opacity:0; transition:opacity 1.2s ease; }
.rl.is-day .rl-sky-day, .rl.is-dusk .rl-sky-dusk, .rl.is-night .rl-sky-night{ opacity:1; }
.rl-stars circle{ fill:#faf5ea; opacity:0; transition:opacity 1s; }
.rl.is-night .rl-stars circle{ opacity:.85; animation:rl-twinkle 3.4s ease-in-out infinite; animation-delay:var(--d); }
.rl.is-dusk .rl-stars circle{ opacity:.3; }
.rl-sun{ fill:#dfd91f; opacity:0; transition:opacity 1s, transform 1.2s; transform:translateY(40px); }
.rl.is-day .rl-sun{ opacity:1; transform:none; }
.rl.is-dusk .rl-sun{ opacity:1; fill:#f2664c; transform:translateY(34px); }
.rl-moon{ fill:#faf5ea; }
.rl-moon{ opacity:0; transition:opacity 1s; } .rl.is-night .rl-moon{ opacity:1; }

.rl-hills{ fill:#2f9da7; opacity:.35; transition:fill 1s, opacity 1s; }
.rl.is-dusk .rl-hills, .rl.is-night .rl-hills{ fill:#000; opacity:.35; }
.rl-ground{ fill:#e0d8b8; transition:fill 1s; }
.rl.is-dusk .rl-ground{ fill:#4a5868; } .rl.is-night .rl-ground{ fill:#1d3749; }
.rl-slab{ fill:#eef9fa; transition:fill .9s ease; }
.rl.is-dusk .rl-slab{ fill:#7a7a7a; } .rl.is-night .rl-slab{ fill:#3d4a58; }
.rl.is-on .rl-slab{ fill:#f4efe0; }
.rl-boards{ fill:none; stroke:#fff; stroke-width:4; stroke-linejoin:round; opacity:.9; }
.rl.is-night:not(.is-on) .rl-boards{ opacity:.25; }
.rl-lines line{ stroke:#2f9da7; stroke-width:2; opacity:.55; transition:opacity .9s; }
.rl.is-night:not(.is-on) .rl-lines line{ opacity:.15; }
.rl-pole{ stroke:#575863; stroke-width:3.5; stroke-linecap:round; }
.rl.is-night .rl-pole{ stroke:#000; }
.rl-lamp{ fill:#575863; transition:fill .4s; transition-delay:var(--d); }

/* Light: beams, halos and the pool on the slab */
.rl-beam, .rl-halo, .rl-pool{ opacity:0; transition:opacity .9s ease; transition-delay:var(--d,0ms); pointer-events:none; }
.rl.is-on .rl-beam{ opacity:.75; mix-blend-mode:screen; }
.rl.is-on .rl-halo{ opacity:1; }
.rl.is-on .rl-pool{ opacity:1; }
.rl.is-on .rl-lamp{ fill:#faf5ea; }
.rl.is-on.is-day .rl-beam{ opacity:.18; }
/* Switching on: metal-halide style flicker, then full */
.rl.is-flick .rl-beam, .rl.is-flick .rl-halo{ animation:rl-flick 1.4s steps(1,end) backwards; animation-delay:var(--d); }

.rl-badge{ position:absolute; left:14px; top:14px; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.94);
  color:#1d3749; font-weight:800; font-size:.82rem; letter-spacing:.02em; padding:7px 13px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.rl-dot{ width:9px; height:9px; border-radius:50%; background:#7a7a7a; }
.rl.is-on .rl-dot{ background:#dfd91f; box-shadow:0 0 0 3px rgba(223,217,31,.35); animation:rl-pulse 2s ease-in-out infinite; }

.rl-body{ padding:16px 18px 18px; }
.rl-detail{ margin:0 0 12px; font-size:.95rem; color:#1d3749; line-height:1.45; font-weight:600; }
.rl-tl{ margin:4px 0 14px; }
.rl-tl-h{ display:flex; justify-content:space-between; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#7a7a7a; margin-bottom:6px; }
.rl-track{ position:relative; height:14px; border-radius:999px; background:#f4efe0; overflow:hidden; }
.rl-dark{ position:absolute; top:0; bottom:0; background:rgba(29,55,73,.16); }
.rl-seg{ position:absolute; top:2px; bottom:2px; border-radius:999px; background:#dfd91f; box-shadow:0 0 6px rgba(223,217,31,.7); }
.rl-now{ position:absolute; top:-2px; bottom:-2px; width:3px; margin-left:-1.5px; background:#f2664c; border-radius:2px; }
.rl-ticks{ position:relative; height:18px; font-size:.72rem; color:#575863; font-variant-numeric:tabular-nums; }
.rl-ticks span{ position:absolute; top:4px; transform:translateX(-10%); white-space:nowrap; }
.rl-ticks span.end{ transform:translateX(-90%); }
.rl-rules{ list-style:none; margin:0; padding:12px 0 0; border-top:1px solid #ece4cc; display:grid; gap:6px; font-size:.85rem; color:#575863; line-height:1.45; }
.rl-rules b{ color:#1d3749; }
@media (min-width:720px){ .rl-rules{ grid-template-columns:repeat(3,1fr); gap:14px; } }

@keyframes rl-twinkle{ 0%,100%{ opacity:.85 } 50%{ opacity:.25 } }
@keyframes rl-pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(223,217,31,.35) } 50%{ box-shadow:0 0 0 6px rgba(223,217,31,.12) } }
@keyframes rl-flick{ 0%{ opacity:0 } 8%{ opacity:.8 } 14%{ opacity:.1 } 24%{ opacity:.7 } 30%{ opacity:.2 } 45%{ opacity:.85 } 100%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){
  .rl *{ animation:none !important; transition:none !important; }
}
.bkp-lights{ margin-bottom:32px; } .bkp-lights .rl{ max-width:900px; }