/* Chook.cam, the broadcast look.
   The stream is the page; the chrome is a light overlay HUD, not a terminal.
   The video is NEVER cropped: portrait puts the whole 16:9 frame under a slim
   header with the HUD in the space below it; landscape/TV go full-bleed with
   object-fit contain, which fits a 16:9 screen exactly and letterboxes
   anything odd. Unavailable controls grey out; there is no status prose. */

@font-face{
  font-family:'Schibsted Grotesk';
  src:url('schibsted.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}

:root{
  --stage:#101214;
  --ink:#fff;
  --dim:#c9cfda;
  --accent:#ffd166;
  --live:#ff4d3d;
  --glass:rgba(255,255,255,.08);
  --glass-heavy:rgba(20,22,26,.55);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--stage);color:var(--ink);
  font-family:'Schibsted Grotesk',system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- header ---------- */
.hd{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem .7rem}
.brand{font-weight:700;font-size:.95rem;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.brand b{color:var(--accent);font-weight:700}
.livechip{display:flex;align-items:center;gap:.35rem;font-size:.6rem;font-weight:700;
  letter-spacing:.16em;padding:.18rem .5rem;border-radius:999px;background:var(--live)}
.livechip .dot{width:.4rem;height:.4rem;border-radius:50%;background:#fff}
body.night .livechip{background:rgba(96,106,126,.85)}
.meta{margin-left:auto;font-size:.78rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}

/* ---------- video ---------- */
.vidwrap{position:relative}
/* Soft ambient glow so the empty stage around the picture never reads as
   dead black bars. Static and cheap; no second decode. */
.vidwrap::before{
  content:"";position:absolute;inset:-2.2rem 0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 20%, rgba(122,160,175,.5), transparent 70%),
    radial-gradient(60% 50% at 50% 85%, rgba(193,147,90,.45), transparent 70%);
  filter:blur(38px);opacity:.35;
}
body.night .vidwrap::before{opacity:.12}
.stage-video{position:relative;z-index:1;display:block;width:100%;aspect-ratio:16/9;
  background:#000;object-fit:contain}
.stage-overlay{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;
  background:rgba(10,12,14,.88);color:var(--dim);padding:1.5rem;
  font-size:.85rem;line-height:1.7;
}
.stage-overlay[hidden]{display:none}
.stage-overlay b{display:block;color:var(--ink);font-size:1rem;margin-bottom:.5rem}
.fstap{position:absolute;right:.6rem;bottom:.6rem;z-index:3;
  width:2.2rem;height:2.2rem;border-radius:9px;border:0;cursor:pointer;
  display:grid;place-items:center;background:rgba(10,12,14,.5);color:#e6eaf1}
.fstap svg{width:1.05rem;height:1.05rem}

/* ---------- HUD ---------- */
.hud{display:flex;flex-direction:column;gap:.8rem;align-items:center;
  padding:1rem 1rem 1.2rem}
.views{position:relative;display:flex;gap:.3rem;padding:.28rem;border-radius:999px;
  background:var(--glass);max-width:100%;overflow-x:auto}
/* Shared PTZ lock: buttons grey, and a thin line refills as the camera's
   budget recovers, so a long lock reads as "coming back", not broken. */
.views.cooling .vbtn{opacity:.35;filter:grayscale(.6);pointer-events:none}
.recharge{position:absolute;left:1rem;right:1rem;bottom:1px;height:2px;
  border-radius:2px;background:var(--accent);transform-origin:left;
  transform:scaleX(0);opacity:0;transition:transform 1s linear}
.views.cooling .recharge{opacity:.8}
.lightdial.cooling{opacity:.4;pointer-events:none;filter:grayscale(.6)}
.vbtn{border:0;border-radius:999px;padding:.5rem .85rem;cursor:pointer;
  font-family:inherit;font-size:.78rem;font-weight:500;color:var(--dim);
  background:transparent;white-space:nowrap}
.vbtn.on{background:#fff;color:#17191d;font-weight:700}
.vbtn:focus-visible,.treatdial:focus-visible,.lightdial:focus-visible,
.fstap:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.ctlrow{display:flex;align-items:center;gap:.8rem;justify-content:center}
.treatdial{position:relative;width:4.8rem;height:4.8rem;border-radius:50%;border:0;
  cursor:pointer;background:var(--glass);color:var(--ink);font-family:inherit;
  display:grid;place-items:center;padding:0}
.treatdial:disabled{cursor:default}
.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4}
.ring .track{stroke:rgba(255,255,255,.2)}
.ring .arc{stroke:var(--accent);stroke-dasharray:216;stroke-dashoffset:0;
  stroke-linecap:round;transition:stroke-dashoffset .6s}
.treatdial .lbl{font-size:.8rem;font-weight:700;line-height:1.25;text-align:center;
  font-variant-numeric:tabular-nums}
.treatdial .lbl small{display:block;font-size:.58rem;font-weight:500;color:var(--dim)}
.treatdial.busy{cursor:wait}
.treatdial.busy .arc{stroke-dasharray:40 176;animation:orbit 1.1s linear infinite}
@keyframes orbit{to{stroke-dashoffset:-216}}
.lightdial{width:3.3rem;height:3.3rem;border-radius:50%;border:0;cursor:pointer;
  background:var(--glass);color:var(--dim);display:grid;place-items:center}
.lightdial svg{width:1.25rem;height:1.25rem}
.lightdial.on{background:var(--accent);color:#3a2c08}

.sleepchip{display:none;padding:.65rem 1.1rem;border-radius:14px;text-align:center;
  background:var(--glass);font-size:.82rem;font-weight:500;color:var(--dim)}
.sleepchip b{font-weight:700;color:var(--ink)}

/* Unavailable = greyed, never explained in prose.
   night: treats and light sleep; the camera still moves.
   offline: the coop controller is unreachable. */
body.night .ctlrow,
body.offline .ctlrow{opacity:.35;filter:grayscale(.6);pointer-events:none}
body.night .sleepchip{display:block}

/* Until verified, controls are dimmed: the first press verifies, it does not
   act, and this makes that read as "not awake yet" rather than broken. */
body.unverified .vbtn,
body.unverified .treatdial,
body.unverified .lightdial{opacity:.55}
/* Verification done: one pulse to say the controls just woke up. */
.hud.pulse .vbtn,.hud.pulse .treatdial,.hud.pulse .lightdial{
  animation:wakepulse .6s ease}
@keyframes wakepulse{
  0%{transform:scale(1)}
  35%{transform:scale(1.07);filter:brightness(1.35)}
  100%{transform:scale(1)}
}

/* The verification modal. Kept in layout (visibility, not display) so the
   Turnstile widget can render inside it before it is shown. */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;
  justify-content:center;background:rgba(8,9,11,.65);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .25s}
.modal.show{opacity:1;visibility:visible}
.modal-card{background:#1a1d22;border-radius:16px;padding:1.3rem 1.6rem;
  box-shadow:0 18px 50px rgba(0,0,0,.5);min-width:14rem}
.spin{width:1.7rem;height:1.7rem;margin:0 auto .65rem;border-radius:50%;
  border:3px solid rgba(255,255,255,.18);border-top-color:var(--accent);
  animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.modal-msg{font-size:.85rem;font-weight:500;color:var(--dim);text-align:center}
#verifying[hidden]{display:none}

/* ---------- portrait: stacked, nothing overlays the picture ---------- */
@media (orientation:portrait){
  body{display:flex;flex-direction:column;min-height:100dvh;overflow-x:hidden}
  .hud{flex:1;justify-content:center}
}

/* ---------- landscape / desktop / TV: full-bleed with overlay HUD ---------- */
@media (orientation:landscape){
  body{overflow:hidden}
  .vidwrap{position:fixed;inset:0;z-index:0}
  .vidwrap::before{display:none}
  .stage-video{width:100%;height:100%;aspect-ratio:auto}
  .fstap{right:.8rem;bottom:.8rem}
  /* The gradients are padding on fixed overlays, so without this their empty
     area sits over the video's corners and eats clicks meant for the
     fullscreen button underneath (fstap lives in the video's own stacking
     context and cannot out-z-index them). */
  .hd{position:fixed;top:0;left:0;right:0;z-index:3;padding:.9rem 1.1rem 2rem;
    background:linear-gradient(rgba(8,9,11,.55),transparent);
    text-shadow:0 1px 6px rgba(0,0,0,.5);transition:opacity .4s;
    pointer-events:none}
  .hd .brand{pointer-events:auto}
  .hd .livechip{text-shadow:none}
  .hud{position:fixed;left:0;right:0;bottom:0;z-index:3;
    padding:2.4rem 1rem .9rem;gap:.6rem;
    background:linear-gradient(transparent,rgba(8,9,11,.66));transition:opacity .4s;
    pointer-events:none}
  .hud > *{pointer-events:auto}
  .views,.treatdial,.lightdial{background:var(--glass-heavy);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .sleepchip{background:rgba(16,18,24,.72);backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px)}
  /* Idle: the wall TV shows only chickens. JS never applies this while the
     visitor is mid-action. */
  body.idle .hd,body.idle .hud{opacity:0;pointer-events:none}
}

/* Fullscreen: the video is everything. */
.vidwrap:fullscreen .stage-video,
.vidwrap:-webkit-full-screen .stage-video{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}

@media (max-width:380px){
  .vbtn{padding:.5rem .6rem;font-size:.72rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}