/* =========================
   OMEN — styles.css (Chalkboard + fixes)
   ========================= */

:root{
  --bg:#CCC6AE; --ink:#000;
  --omen-size: clamp(3.5rem,10vw,9rem);
  --item-scale:.5;
  --pad:min(3vw,28px); --gap:.6em;
  --hud-font: calc(var(--omen-size) * var(--item-scale) * .25);
  --ticker-h: 3.2em; --ticker-duration: 20s;
  --bar-thin:10px; --bar-thick:60px; --bar:var(--bar-thin);
  --weekly-nudge: 2px;
}

html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  text-transform:uppercase;
}

/* DEVICES close button */
.devices-close {
  position:absolute;
  top:0;
  left:0;
  font:inherit;
  font-size:0.5em;       /* same size as other text */
  color:#000;
  background:transparent;
  border:none;
  outline:none;
  cursor:pointer;
  line-height:1;
  padding:0;
  margin:0;
  text-transform:inherit;
}

/* Links */
a{
  color:inherit; text-decoration:none; font-weight:700; letter-spacing:.06em;
  cursor:pointer; transition:opacity .15s ease, transform .15s ease;
}
a:hover{ opacity:.85; transform:translateY(-1px); }

/* App chrome */
.app{ position:relative; z-index:10; }
.omen{
  position:fixed; top:var(--pad); right:var(--pad);
  font-size:var(--omen-size); font-weight:800; letter-spacing:.06em; line-height:.9;
  pointer-events:auto; cursor:pointer;
}

.top-left,.bottom-left{ display:flex; flex-direction:column; }
.top-left{ position:fixed; top:var(--pad); left:var(--pad); z-index:20; }
.bottom-left{ position:fixed; bottom:var(--pad); left:var(--pad); z-index:20; }
.corner{ font-size:calc(var(--omen-size) * var(--item-scale)); letter-spacing:1px; }

.bottom-right{ position:fixed; bottom:var(--pad); right:var(--pad); z-index:20; }
.bottom-right a{
  font-size:calc(var(--omen-size) * var(--item-scale));
  transform:translateY(var(--weekly-nudge));
}

/* ================= HUD ================= */
.hud-wrap{ position:fixed; inset:0; display:none; z-index:900; pointer-events:none; }
.hud-wrap.is-visible{ display:block; }
.hud{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:50vw; min-width:280px; max-width:66ch;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:1.2rem; line-height:1.35; font-weight:700; letter-spacing:.05em;
  font-size:var(--hud-font); color:var(--ink); background:transparent; pointer-events:auto;
}
.hud-content{ display:flex; flex-direction:column; align-items:center; width:100%; }
.hud-title{ font-size:calc(var(--hud-font)*1.25)); font-weight:900; margin:0 0 2em 0; }
.hud-line{ margin:.3em 0 0 0; font-size:var(--hud-font); opacity:0; transition:opacity 2s ease; }

/* ================= Weekly ticker ================= */
.ticker-wrap{ position:fixed; inset:0; display:none; z-index:800; pointer-events:none; }
.ticker-wrap.is-visible{ display:block; }
.ticker-rail{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  overflow:hidden; height:var(--ticker-h); pointer-events:auto;
}
.ticker{
  position:absolute; white-space:nowrap; font-weight:700; letter-spacing:.08em;
  font-size:clamp(1.1rem,3.2vw,2.2rem);
  animation:slide-left var(--ticker-duration) linear infinite;
}
@keyframes slide-left{ from{ transform:translateX(100vw);} to{ transform:translateX(-110%);} }

/* ================= BREATHE overlay ================= */
.breathe{ position:fixed; inset:0; display:none; background:var(--bg); z-index:1200; pointer-events:none; }
.breathe.is-open{ display:block; pointer-events:auto; }
#stopBtn{
  position:absolute; inset:0; display:grid; place-items:center;
  font-weight:800; letter-spacing:.06em; user-select:none;
  font-size:calc(var(--omen-size) * var(--item-scale));
}

/* ================= Snake / Breathing bar ================= */
#breathingBar{ position:fixed; inset:0; display:none; z-index:1300; pointer-events:none; }
#breathingBar.is-active{ display:block; }
#breathingBar .layer{ position:absolute; inset:0; }
#breathingBar .layer.run{ z-index:2; }
#breathingBar .layer:not(.run){ z-index:1; }
.seg{
  position:absolute; background:#000; opacity:1; transition:opacity 2s linear;
  will-change:width,height,opacity;
  animation-duration:16s; animation-timing-function:linear;
  animation-fill-mode:both; animation-iteration-count:1; animation-play-state:paused;
}
#breathingBar .layer.run .seg{ animation-play-state:running; }
#breathingBar .seg.is-fading{ opacity:0; }
.top   { top:0; left:0; height:var(--bar); width:0; animation-name:topSnake; }
.right { top:var(--bar); right:0; width:var(--bar); height:0; animation-name:rightSnake; }
.bottom{ bottom:0; right:var(--bar); height:var(--bar); width:0; animation-name:bottomSnake; }
.left  { bottom:var(--bar); left:0; width:var(--bar); height:0; animation-name:leftSnake; }
@keyframes topSnake    { 0%{width:0} 25%{width:100%}                                  100%{width:100%} }
@keyframes rightSnake  { 0%{height:0} 25%{height:0} 50%{height:calc(100% - var(--bar))} 100%{height:calc(100% - var(--bar))} }
@keyframes bottomSnake { 0%{width:0} 50%{width:0} 75%{width:calc(100% - var(--bar))}    100%{width:calc(100% - var(--bar))} }
@keyframes leftSnake   { 0%{height:0} 75%{height:0} 100%{height:calc(100% - (var(--bar) * 2))} }
body.small-bar{ --bar:var(--bar-thin); }
body.big-bar  { --bar:var(--bar-thick); }

/* ================= DEVICES overlay — chalkboard ================= */
#devicesOverlay{
  position:fixed; inset:0; z-index:6000; background:var(--bg);
  display:grid; place-items:center;
  padding:0;
  color:#000; text-transform:uppercase; font-weight:800; letter-spacing:.06em;
  /* TWICE AS BIG */
  --devices-fs: clamp(44px, 7vw, 82px);
  --frame: min(7vw, 28px);
  --ticker-duration: 20s;
  font-size:var(--devices-fs);
}
.devices-frame{ position:absolute; inset:var(--frame); }

/* top-right title */
.devices-title{ position:absolute; top:0; right:0; text-align:right; line-height:1.08; }
.devices-title .t1, .devices-title .t2{ font-size:1em; }

/* middle ticker (0.6em at 41% from top) */
.devices-ticker{ position:absolute; left:0; right:0; top:41%; transform:translateY(-50%); }
.devices-ticker .rail{ overflow:hidden; height:1.1em; }
.devices-ticker .line{
  white-space:nowrap; font-size:0.6em; font-weight:800; letter-spacing:.08em;
  display:inline-block; animation:slide-left var(--ticker-duration) linear infinite;
}

/* bottom-left stacked form (lower + no gap) */
.devices-form{
  position:absolute; left:0; bottom:-0.2em; /* nudge slightly lower */
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
}
.devices-form .fld,
.devices-form .btn{
  font:inherit; color:#000; background:transparent; border:none; outline:none;
  padding:0; margin:0; line-height:1.05; letter-spacing:inherit;
  text-transform:uppercase;
}
.devices-form .fld::placeholder{ color:#000; opacity:1; }
.devices-form .btn{ cursor:pointer; }
.devices-form .hp{ display:none !important; }
.devices-form .msg{ margin-top:.35em; font:inherit; color:#000; }

/* mobile */
@media (max-width:640px){
  #devicesOverlay{ --devices-fs: clamp(28px, 7vw, 40px); --frame:min(6vw, 28px); }
  .devices-ticker .rail{ height:1.25em; }
}

/* Weekly label formatting (site) */
#weekly{ text-align:center; line-height:1.2; white-space:nowrap; letter-spacing:1px; }
#weekly .mbr{ display:none; }
@media (max-width:640px){
  #weekly{ white-space:normal; display:inline-block; }
  #weekly .mbr{ display:block; height:0; }
}

/* HUD gutters on small screens */
@media (max-width:640px){
  .hud{
    width:100vw; max-width:none; min-width:0; box-sizing:border-box;
    padding:1rem; font-size:calc(var(--hud-font) * 1.5);
  }
  .hud-content{ overflow-wrap:anywhere; word-break:break-word; hyphens:auto; }
}