*{box-sizing:border-box}
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif}
html,body{margin:0;min-height:100%;background:#080d14;color:#fff}

/* Grote horizontale narrowcastingweergave */
.screen{width:100vw;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#1b2b3b 0%,#0b121c 58%,#070b11 100%)}
.large-layout{position:relative;z-index:1;height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4vh 5vw 3vh;text-align:center;gap:1.8vh}
.large-clock{position:absolute;top:3.2vh;right:4vw;text-align:right;opacity:.68}
.large-clock-value{font-size:clamp(20px,2.4vw,38px);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.large-clock-label{font-size:clamp(9px,.85vw,14px);font-weight:700;letter-spacing:.16em;color:#9fb2c7;margin-top:.25em}
.countdown-block{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:0;padding-top:2vh}
.large-countdown{font-size:clamp(100px,18vw,290px);font-weight:900;line-height:.96;letter-spacing:-.065em;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 8px 38px #0008}
.countdown-label{font-size:clamp(16px,1.8vw,29px);font-weight:800;letter-spacing:.2em;color:#aabbd0;margin-top:1.4vh}
/* Waarschuwing fase 1: centrale melding gedurende de eerste 5 seconden. */
.alert-panel{display:none}
.large-screen.warning-banner-phase .alert-panel{
  /* The text area is restricted to the banner itself, not the full viewport.
     screen.js reduces the font size further when the message needs extra room. */
  --alert-banner-height:clamp(190px,31vh,440px);
  position:fixed;inset:0;z-index:100;isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  width:100vw;height:100vh;height:100dvh;min-height:100vh;
  margin:0;
  padding:calc((100vh - var(--alert-banner-height))/2 + 16px) 11vw;
  background:rgba(3,8,14,.94);
  color:#111820;text-align:center;
  font-size:clamp(18px,5.5vw,92px);font-weight:1000;
  letter-spacing:.015em;line-height:1.08;text-transform:uppercase;
  text-shadow:none;white-space:normal;overflow:hidden;
  overflow-wrap:anywhere;text-wrap:balance;
}
.large-screen.warning-banner-phase .alert-panel::before{
  content:"";position:absolute;z-index:-1;
  left:5vw;right:5vw;top:50%;transform:translateY(-50%);
  height:var(--alert-banner-height);
  background:#efb52d;border:4px solid #ffd86d;
  box-shadow:0 0 65px rgba(239,181,45,.35);
}
@supports (height:100dvh){
  .large-screen.warning-banner-phase .alert-panel{
    padding-top:calc((100dvh - var(--alert-banner-height))/2 + 16px);
    padding-bottom:calc((100dvh - var(--alert-banner-height))/2 + 16px);
  }
}
.large-screen.warning-banner-phase .alert-panel[data-level="5"]{color:#111820}
.large-screen.warning-banner-phase .alert-panel[data-level="5"]::before{
  background:#f07822;border-color:#ffad6b;box-shadow:0 0 65px rgba(240,120,34,.38)
}
.large-screen.warning-banner-phase .alert-panel[data-level="2"]{color:#fff}
.large-screen.warning-banner-phase .alert-panel[data-level="2"]::before{
  background:#c92f38;border-color:#ff777d;box-shadow:0 0 65px rgba(217,67,67,.45)
}
.large-screen.warning-banner-phase .large-layout> :not(#alert){visibility:hidden}

/* Waarschuwing fase 2: banner weg, alleen de achtergrond knippert 10 seconden. */
.large-screen::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0}
.large-screen.warning-flash-phase::before{animation:screen-flash-10 .8s steps(1,end) infinite}
.large-screen.warning-flash-phase[data-warning-level="5"]::before{animation-name:screen-flash-5}
.large-screen.warning-flash-phase[data-warning-level="2"]::before{animation-name:screen-flash-2}
@keyframes screen-flash-10{0%,49%{opacity:0;background:#e49a18}50%,100%{opacity:.72;background:#e49a18}}
@keyframes screen-flash-5{0%,49%{opacity:0;background:#f07822}50%,100%{opacity:.76;background:#f07822}}
@keyframes screen-flash-2{0%,49%{opacity:0;background:#d94343}50%,100%{opacity:.78;background:#d94343}}

.large-stats{width:min(78%,1120px);display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:center;padding:1.5vh 0}
.stat-block{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55vh}
.stat-value{font-size:clamp(48px,6.2vw,100px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.stat-label{font-size:clamp(12px,1.35vw,22px);font-weight:800;letter-spacing:.17em;color:#9fb2c7}
.status-line{min-height:1.4em;color:#8193a6;font-size:clamp(11px,.95vw,16px);font-weight:700;letter-spacing:.18em}
.is-paused .large-layout{filter:saturate(.55)}

/* Compacte horizontale weergave: schaalt mee wanneer de pagina kleiner wordt ingesloten. */
.compact-screen{background:rgba(8,13,20,.96)}
.compact-layout{container-type:inline-size;height:100%;width:100%;display:flex;align-items:center;justify-content:space-evenly;gap:clamp(5px,1.4vw,22px);padding:clamp(5px,1.15vw,18px) clamp(8px,1.7vw,26px);border:1px solid #26384a}
.compact-item{display:flex;flex:0 1 auto;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:clamp(2px,.45vw,7px);text-align:center}
.compact-countdown{flex:1 1 34%;min-width:0}
.compact-value{font-size:clamp(18px,3.2vw,52px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.compact-countdown-value{font-size:clamp(25px,5.1vw,82px);font-weight:900;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
.compact-label{font-size:clamp(7px, .9vw, 13px);font-weight:800;letter-spacing:.1em;color:#9fb2c7;line-height:1.15;white-space:nowrap}

@keyframes pulse{50%{filter:brightness(1.18)}}

/* Beheeromgeving */
.admin-body{background:#101722;color:#eaf0f6;min-height:100vh;padding:28px 16px}
.admin-wrap{max-width:900px;margin:0 auto}
.admin-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
h1{font-size:30px;margin:0 0 6px}h2{margin:0 0 18px;font-size:21px}h3{margin:22px 0 10px}
.admin-top p,.admin-card p{color:#aab8c7;margin:5px 0 0}
.admin-top a,.admin-card a{color:#8ec5ff}
.admin-card{background:#1a2634;border:1px solid #2c3b4c;border-radius:14px;padding:24px;margin:16px 0}
.login-card{max-width:420px;margin:10vh auto}
label{display:block;font-weight:700;margin:12px 0}
input[type=date],input[type=password],input[type=time]{display:block;width:100%;margin-top:7px;padding:12px;border-radius:8px;border:1px solid #526276;background:#0e1722;color:white;font:inherit}
.round-editor{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 18px}
.round-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#111c28;padding:8px 10px;border-radius:8px}
.round-row .check-label{display:flex;align-items:center;gap:8px;margin:0;white-space:nowrap}
.round-row input[type=time]{width:115px;padding:8px;margin:0}
button{background:#b9e04b;color:#10170a;border:0;border-radius:8px;padding:13px 18px;font-size:15px;font-weight:800;cursor:pointer;margin-top:12px}
button.secondary{background:#42566b;color:#fff}button.danger{background:#b84242;color:white}
.control-grid{display:flex;flex-wrap:wrap;gap:8px}
.control-grid button{margin:0}
.message{min-height:22px;margin-top:15px!important;color:#b9e04b!important}
.live-status,.hint{font-size:14px;color:#aab8c7;margin-top:16px}
.form-error{color:#ff9999;margin:12px 0}
@media(max-width:650px){.round-editor{grid-template-columns:1fr 1fr}.admin-top{align-items:flex-start}.admin-card{padding:18px}}

/* Compacte banners blijven proportioneel op zeer smalle en lage schermen. */
@media(max-width:520px){
  .compact-layout{gap:clamp(3px, .8vw, 6px);padding:4px 6px}
  .compact-item{gap:2px}
  .compact-value{font-size:clamp(14px,3.5vw,22px)}
  .compact-countdown-value{font-size:clamp(19px,5vw,30px)}
  .compact-label{font-size:clamp(6px,1.5vw,8px);letter-spacing:.04em}
}
@media(max-height:150px){
  .compact-layout{gap:3px;padding:3px 5px}
  .compact-item{gap:1px}
  .compact-value{font-size:clamp(13px,3.2vh,24px)}
  .compact-countdown-value{font-size:clamp(17px,5.1vh,36px)}
  .compact-label{font-size:clamp(6px,1.2vh,9px)}
}


/* Uitleg bij timerbediening in het beheer */
.action-help{margin-top:16px;padding:14px 16px;background:#111c28;border:1px solid #2c3b4c;border-radius:10px}
.action-help p{margin:8px 0;color:#b9c7d5;line-height:1.5}
.action-help strong{color:#fff}