/* =========================
   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 */
.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;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
}
.bottom-right a{
  font-size:calc(var(--omen-size) * var(--item-scale));
}
.bottom-right #weekly{
  transform:translateY(var(--weekly-nudge));
  line-height:1.05;
}

.breathe-label{
  position:fixed;
  top:calc(var(--pad) + (var(--omen-size) * .9));
  right:var(--pad);
  font-size:calc(var(--omen-size) * var(--item-scale));
  letter-spacing:1px;
  font-weight:700;
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.breathe-label.is-visible{ opacity:1; }

/* ================= 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; }

/* Invert colors only inside Devices overlay */
#devicesOverlay {
  background: #000 !important;   /* black background */
  color: #CCC6AE !important;     /* beige text */
}
#devicesOverlay .fld,
#devicesOverlay .btn,
#devicesOverlay .msg,
#devicesOverlay .devices-close {
  color: #CCC6AE !important;
}
#devicesOverlay .fld::placeholder {
  color: #CCC6AE !important;
}
/* 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 label formatting (site) */
#weekly{
  display:inline-block;
  line-height:1.2;
  letter-spacing:1px;
  white-space:normal;
  text-align:right !important;   /* right align label + date/week */
}

/* By default, no forced break on desktop */
#weekly .mbr{
  display:none;
  height:0;
}

#weekly .date,
#weekly .week{
  display:block;
  text-align:right;
}

/* HUD gutters + mobile tweaks */
@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;
  }

  /* On mobile, allow the break */
  #weekly .mbr{
    display:block;
  }

  #weekly{
    text-align:right !important;
  }
}

/* Mobile tuning — reduce OMEN mark slightly */
@media (max-width: 640px){
  .omen{
    font-size: calc(var(--omen-size) * 0.8);
  }
}

/* ================= ORIENTATION ================= */

.app{
  position:relative;
  z-index:10;
  padding: var(--pad);
}

.orientation .orientation-content{
  max-width: 1100px;
  padding-right: calc(var(--pad) * 6);
}

.orientation-main{
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .06em;
  font-size: clamp(2.2rem, 6vw, 5rem);
}

.orientation-secondary{
  margin-top: 3rem;
  max-width: 1200px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .06em;
  font-size: clamp(1.1rem,3.2vw,2.2rem) ;
}

/* Close X in lower-right, CODEX-style */
.orientation-close{
  position: fixed;
  right: var(--pad);
  bottom: var(--pad);

  background: none;
  border: none;
  padding: 0;
  margin: 0;

  font: inherit;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink);
  font-size: clamp(1.1rem,3.2vw,2.2rem);

  cursor: pointer;
}
.orientation-close:hover{
  opacity: .85;
}
/* ================= ORACLE TEXT STABILITY ================= */
/* Scoped strictly to HUD oracle output */

.hud-content{
  gap: 0; /* no flex gaps — structure is text-driven */
}

/* Each oracle line */
.hud-line{
  opacity: 1;                 /* JS controls timing, not CSS */
  margin: 0;
  line-height: 1.25;
  white-space: normal;
}

/* Enforce block separation: line 5 (after 4 lines) */
.hud-line:nth-child(5){
  margin-top: 0.9em;          /* the ONE intentional breath */
}

/* Prevent accidental visual orphaning */
.hud-line{
  max-width: 100%;
  word-spacing: 0.04em;
}

/* Mobile: keep the architecture, just scale breath */
@media (max-width:640px){
  .hud-line{
    line-height: 1.3;
  }
  .hud-line:nth-child(5){
    margin-top: 1.1em;
  }
}