/* ============================================================
   PIP-OS(R) v7.1.0.8 — CHRONOMETER / ALERT SCHEDULER
   Fallout-style Pip-Boy 3000 Mk IV shell
   ============================================================ */

:root{
  --phos: #26ff7a;
  --phos-rgb: 38 255 122;
  --phos-dim: rgb(var(--phos-rgb) / .55);
  --phos-fade: rgb(var(--phos-rgb) / .22);
  --phos-ghost: rgb(var(--phos-rgb) / .09);

  --screen-bg: #04120a;
  --room: #07090a;

  --metal-1:#3d4340;
  --metal-2:#22272a;
  --metal-3:#14181a;

  --mono: "Share Tech Mono", "Courier New", ui-monospace, monospace;
}

[data-theme="amber"]{ --phos:#ffb642; --phos-rgb:255 182 66; --screen-bg:#160c02; }
[data-theme="blue"] { --phos:#5ad2ff; --phos-rgb:90 210 255; --screen-bg:#041018; }
[data-theme="white"]{ --phos:#d8fff0; --phos-rgb:216 255 240; --screen-bg:#0a0f0e; }

*{ box-sizing:border-box; margin:0; padding:0; min-width:0; }

html,body{ height:100%; height:100dvh; -webkit-text-size-adjust:100%; }

body{
  background:
    radial-gradient(120% 90% at 50% 0%, #14181a 0%, var(--room) 62%, #000 100%);
  font-family: var(--mono);
  color: var(--phos);
  display:grid;
  /* explicit minmax(0,..) tracks: without them the auto track is sized by the
     device's max-content width and the whole UI blows past the viewport */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  place-items:center;
  padding: clamp(6px, 2vw, 28px);
  overflow:hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ===================== BOOT SCREEN ===================== */
.boot{
  position:fixed; inset:0; z-index:200;
  background:#020604;
  padding: clamp(14px,4vw,48px);
  display:flex; flex-direction:column; justify-content:center;
  gap:18px;
  cursor:pointer;
}
.boot.is-gone{ opacity:0; pointer-events:none; transition:opacity .45s ease; }
.boot-log{
  font-family:var(--mono);
  font-size: clamp(11px, 1.6vw, 16px);
  line-height:1.55;
  color:var(--phos);
  text-shadow:0 0 8px rgb(var(--phos-rgb) / .7);
  white-space:pre-wrap;
}
.boot-prompt{ text-align:center; }
.boot-prompt-line{
  font-size:clamp(11px,1.6vw,15px);
  color:var(--phos-dim);
  margin-bottom:14px;
  letter-spacing:.08em;
}
.boot-btn{
  font-family:var(--mono);
  font-size:clamp(14px,2.4vw,22px);
  letter-spacing:.14em;
  background:transparent;
  color:var(--phos);
  border:2px solid var(--phos);
  padding:.7em 1.4em;
  cursor:pointer;
  text-shadow:0 0 10px rgb(var(--phos-rgb) / .8);
  box-shadow:0 0 18px rgb(var(--phos-rgb) / .25), inset 0 0 18px rgb(var(--phos-rgb) / .12);
  animation: pulse 1.1s steps(2) infinite;
}
@keyframes pulse{ 0%{opacity:1} 50%{opacity:.5} 100%{opacity:1} }

/* ===================== DEVICE SHELL ===================== */
.device{
  position:relative;
  width:min(1080px, 100%);
  height:min(760px, 100%);
  max-width:100%; max-height:100%;
  display:grid;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.85));
}

.strap{
  position:absolute; left:8%; right:8%; height:26px;
  background:
    repeating-linear-gradient(90deg,#2a2420 0 10px,#1d1916 10px 20px),
    #241f1b;
  border:2px solid #100d0b;
  border-radius:4px;
  z-index:-1;
}
.strap.top{ top:-16px; }
.strap.bottom{ bottom:-16px; }

.bezel{
  position:relative;
  height:100%;
  border-radius:26px;
  padding: 22px 22px 0;
  display:grid;
  grid-template-columns: 76px minmax(0,1fr);
  grid-template-rows: minmax(0,1fr) 46px;
  gap:14px;
  background:
    linear-gradient(160deg,var(--metal-1) 0%, var(--metal-2) 38%, var(--metal-3) 100%);
  border:2px solid #0b0e0f;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -3px 10px rgba(0,0,0,.7),
    0 0 0 6px #0e1112;
}
.bezel::after{ /* brushed metal */
  content:""; position:absolute; inset:0; border-radius:24px; pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);
  mix-blend-mode:overlay;
}

.screw{ position:absolute; width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#8d9490,#3a403d 60%,#171a1b);
  box-shadow:inset 0 0 0 1px #0a0c0d, 0 1px 2px rgba(0,0,0,.8); }
.screw::after{ content:""; position:absolute; inset:0; margin:auto; width:9px; height:2px; background:#1a1d1e; border-radius:1px; transform:rotate(35deg); }
.screw.tl{ top:7px; left:7px } .screw.tr{ top:7px; right:7px }
.screw.bl{ bottom:7px; left:7px } .screw.br{ bottom:7px; right:7px }

.bezel-left{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
}
.knob{
  width:52px; height:52px; border-radius:50%;
  background:conic-gradient(from 0deg,#4a514d,#202523,#4a514d,#202523,#4a514d);
  box-shadow:inset 0 0 0 3px #171a1b, inset 0 3px 6px rgba(255,255,255,.15), 0 4px 8px rgba(0,0,0,.7);
  display:grid; place-items:center;
}
.knob.small{ width:38px; height:38px; }
.knob i{ display:block; width:4px; height:38%; background:#0c0e0f; border-radius:2px; transform:translateY(-28%); }
.vent{
  width:44px; height:96px; border-radius:6px;
  background:repeating-linear-gradient(180deg,#0d1011 0 4px,#2a2f2c 4px 9px);
  box-shadow:inset 0 0 8px rgba(0,0,0,.9);
}

.bezel-bottom{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:14px;
  padding:0 12px 10px;
  color:#79817c; font-size:11px; letter-spacing:.18em;
}
.plate{ text-shadow:0 1px 0 rgba(0,0,0,.8); }
.dots{ flex:1; height:8px; border-radius:4px;
  background:repeating-linear-gradient(90deg,#0d1011 0 3px,transparent 3px 8px);
  opacity:.8; }

/* ===================== SCREEN ===================== */
.screen{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:var(--screen-bg);
  box-shadow:
    inset 0 0 0 3px #000,
    inset 0 0 40px rgba(0,0,0,.9),
    0 0 40px rgb(var(--phos-rgb) / .12);
}

.crt{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto auto minmax(0,1fr) auto;
  padding:10px 14px 8px;
  font-size: clamp(12px, 1.35vw, 15px);
  letter-spacing:.06em;
  text-shadow:0 0 6px rgb(var(--phos-rgb) / .55);
  animation: flicker 4.5s infinite steps(30);
  overflow:hidden;
}
@keyframes flicker{
  0%,96%,100%{ opacity:1 } 97%{ opacity:.86 } 98%{ opacity:1 } 99%{ opacity:.92 }
}

/* ---- HUD ---- */
.hud-top{
  display:flex; justify-content:space-between; align-items:center;
  color:var(--phos-dim); font-size:.82em; letter-spacing:.12em;
  border-bottom:1px solid var(--phos-fade);
  padding-bottom:5px;
}
.blip{ animation:pulse 1s steps(2) infinite; }

.tabs{ display:flex; gap:0; margin-top:8px; border-bottom:2px solid var(--phos-dim); }
.tab{
  font-family:var(--mono); font-size:1em; letter-spacing:.18em;
  background:transparent; border:none; border-bottom:2px solid transparent;
  color:var(--phos-fade); padding:.5em 1.6em; cursor:pointer;
  margin-bottom:-2px; transition:color .1s; position:relative;
}
.tab:hover{ color:var(--phos-dim); }
.tab.is-active{
  color:var(--screen-bg); background:var(--phos);
  text-shadow:none; border-bottom-color:var(--phos);
}
/* FO4 selection carets */
.tab.is-active::before, .tab.is-active::after{
  position:absolute; top:50%; transform:translateY(-50%);
  color:var(--screen-bg); font-size:.8em;
}
.tab.is-active::before{ content:"\25B8"; left:.45em; }
.tab.is-active::after{ content:"\25C2"; right:.45em; }

.subtabs{
  display:flex; align-items:center; gap:10px;
  font-size:.76em; letter-spacing:.28em; color:var(--phos-dim);
  padding:5px 2px 0;
}
.crumb-rule{
  flex:1; height:5px;
  background:repeating-linear-gradient(90deg,var(--phos-fade) 0 2px,transparent 2px 7px);
}

.content{ position:relative; overflow:hidden; min-height:0; }
.panel{ display:none; height:100%; overflow-y:auto; overflow-x:hidden; padding:12px 4px 6px;
  scrollbar-width:thin; scrollbar-color:var(--phos-fade) transparent;
  -webkit-overflow-scrolling:touch; }
.panel.is-active{ display:block; animation:fadein .18s ease-out; }
.panel[data-panel="stat"].is-active{
  display:flex; flex-direction:column;
  justify-content:space-evenly; gap:clamp(6px,1.4vh,14px);
}
@keyframes fadein{ from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
.panel::-webkit-scrollbar{ width:8px }
.panel::-webkit-scrollbar-thumb{ background:var(--phos-fade) }

/* ---- CLOCK ---- */
.clock-wrap{ text-align:center; padding:0; }
.clock-day{ font-size:1.1em; letter-spacing:.5em; color:var(--phos-dim); }
.clock-main{
  font-size: clamp(56px, 15vw, 150px);
  line-height:.95;
  letter-spacing:.02em;
  text-shadow:
    0 0 18px rgb(var(--phos-rgb) / .6),
    0 0 60px rgb(var(--phos-rgb) / .25),
    -1.5px 0 rgb(255 60 60 / .18), 1.5px 0 rgb(60 120 255 / .18); /* chromatic fringe */
  display:flex; align-items:baseline; justify-content:center; gap:.08em;
  margin:.06em 0;
}
.clock-main .sep{ animation:pulse 1s steps(2) infinite; }
.clock-sec{ font-size:.3em; color:var(--phos-dim); letter-spacing:.08em; }
.clock-mer{ font-size:.24em; color:var(--phos-dim); letter-spacing:.14em; }
.clock-date{ font-size:1.05em; letter-spacing:.3em; color:var(--phos-dim); }

.gauge{ margin:0 auto; width:min(640px,100%); }
.gauge-label{ font-size:.78em; letter-spacing:.22em; color:var(--phos-fade); margin-bottom:4px; }
.gauge-track{ height:14px; border:2px solid var(--phos-dim); padding:2px; }
.gauge-fill{
  height:100%; width:0%;
  background:repeating-linear-gradient(90deg,var(--phos) 0 5px, transparent 5px 8px);
  box-shadow:0 0 10px rgb(var(--phos-rgb) / .5);
  transition:width 1s linear;
}
.gauge-ticks{ display:flex; justify-content:space-between; font-size:.72em; color:var(--phos-fade); margin-top:3px; }

.next-alarm{
  margin:0 auto; width:min(640px,100%);
  border:1px solid var(--phos-dim); padding:10px 14px;
  background:var(--phos-ghost);
  position:relative;
}
/* corner brackets */
.next-alarm::before, .next-alarm::after{
  content:""; position:absolute; width:10px; height:10px; border:2px solid var(--phos);
}
.next-alarm::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.next-alarm::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* STAT readout — dotted-leader stat lines */
.readout{
  margin:0 auto; width:min(640px,100%);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 22px;
}
.readout > div{ display:flex; align-items:baseline; gap:6px; font-size:.9em; }
.readout dt{ letter-spacing:.16em; color:var(--phos-fade); white-space:nowrap; }
.readout > div::after{
  content:""; order:1; flex:1; height:1px; min-width:8px;
  background:repeating-linear-gradient(90deg,var(--phos-fade) 0 2px,transparent 2px 5px);
}
.readout dd{ order:2; letter-spacing:.1em; white-space:nowrap; }
.na-label{ font-size:.76em; letter-spacing:.24em; color:var(--phos-fade); }
.na-value{ font-size:1.5em; letter-spacing:.12em; margin-top:2px; }

.test-row{
  margin:0 auto; width:min(640px,100%);
  display:flex; gap:10px; flex-wrap:wrap;
}
.test-row .btn{ flex:1 1 46%; }

/* ---- FORM / ALARMS ---- */
.add-form{ border:1px solid var(--phos-fade); padding:12px; background:var(--phos-ghost); }
.af-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.af-row + .af-row{ margin-top:12px; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field.grow{ flex:1 1 200px; }
.field-label{ font-size:.74em; letter-spacing:.2em; color:var(--phos-fade); }

input[type=time], input[type=text]{
  font-family:var(--mono); font-size:1.15em; letter-spacing:.08em;
  background:rgb(var(--phos-rgb) / .06);
  border:1px solid var(--phos-dim);
  color:var(--phos); padding:.45em .6em; width:100%;
  color-scheme:dark;
  text-shadow:0 0 6px rgb(var(--phos-rgb) / .5);
}
input:focus{ outline:none; border-color:var(--phos); box-shadow:0 0 12px rgb(var(--phos-rgb) / .35); }
input[type=text]::placeholder{ color:var(--phos-fade); }
::selection{ background:var(--phos); color:var(--screen-bg); }

.days{ display:flex; gap:4px; flex-wrap:wrap; }
.day{
  font-family:var(--mono); font-size:.9em; letter-spacing:.05em;
  background:transparent; border:1px solid var(--phos-fade); color:var(--phos-fade);
  padding:.42em .55em; cursor:pointer; min-width:38px;
}
.day.is-on{ background:var(--phos); color:var(--screen-bg); border-color:var(--phos); text-shadow:none; }

.btn{
  font-family:var(--mono); font-size:.95em; letter-spacing:.14em;
  background:transparent; border:1px solid var(--phos); color:var(--phos);
  padding:.6em 1.1em; cursor:pointer; white-space:nowrap;
  transition:background .1s,color .1s;
}
.btn:hover{ background:var(--phos); color:var(--screen-bg); text-shadow:none; }
.btn.primary{ background:var(--phos); color:var(--screen-bg); text-shadow:none; font-weight:bold; }
.btn.primary:hover{ filter:brightness(1.2); }
.btn.danger{ border-color:#ff4a3d; color:#ff6a5d; text-shadow:0 0 6px rgba(255,74,61,.6); }
.btn.danger:hover{ background:#ff4a3d; color:#120404; }
.btn.big{ font-size:1.3em; padding:.7em 1.6em; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }

.list-head{
  display:flex; justify-content:space-between;
  font-size:.78em; letter-spacing:.22em; color:var(--phos-fade);
  margin:16px 0 6px; border-bottom:1px solid var(--phos-fade); padding-bottom:4px;
}
.alarm-list{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.alarm-row{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:12px; align-items:center;
  border:1px solid var(--phos-fade); padding:8px 12px;
  background:var(--phos-ghost);
}
.alarm-row.off{ opacity:.45; }
.alarm-row.ringing-now{ animation:rowflash 2s ease-in-out infinite; }
@keyframes rowflash{ 0%,100%{background:var(--phos-ghost)} 50%{background:rgb(var(--phos-rgb) / .22)} }
.ar-time{ font-size:1.9em; line-height:1; letter-spacing:.04em; }
.ar-time small{ font-size:.42em; letter-spacing:.1em; margin-left:.3em; color:var(--phos-dim); }
.ar-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ar-label{ letter-spacing:.1em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-days{ font-size:.76em; letter-spacing:.16em; color:var(--phos-fade); }
.ar-toggle{
  font-family:var(--mono); cursor:pointer; letter-spacing:.14em; font-size:.9em;
  border:1px solid var(--phos-dim); background:transparent; color:var(--phos-dim); padding:.4em .8em;
}
.ar-toggle.on{ background:var(--phos); color:var(--screen-bg); border-color:var(--phos); text-shadow:none; }
.ar-del{
  font-family:var(--mono); cursor:pointer; background:transparent;
  border:1px solid rgba(255,74,61,.5); color:#ff6a5d; padding:.4em .7em; font-size:.9em;
}
.ar-del:hover{ background:#ff4a3d; color:#120404; }
.empty{ color:var(--phos-fade); letter-spacing:.14em; padding:10px 2px; }

/* ---- CONFIG ---- */
.conf-grid{ display:flex; flex-direction:column; gap:2px; }

.conf-sect{
  display:flex; align-items:center; gap:10px;
  font-size:.8em; font-weight:normal; letter-spacing:.34em;
  color:var(--phos); margin:14px 0 4px; padding-left:2px;
}
.conf-sect:first-child{ margin-top:0; }
.conf-sect::before{ content:"\25B8"; color:var(--phos); }
.conf-sect::after{
  content:""; flex:1; height:6px;
  background:repeating-linear-gradient(90deg,var(--phos-fade) 0 2px,transparent 2px 6px);
}

.conf-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:8px 10px; border-bottom:1px solid var(--phos-ghost);
}
.conf-row:hover{ background:var(--phos-ghost); }
.conf-label{ letter-spacing:.18em; color:var(--phos-dim); white-space:nowrap; }
.conf-row::after{                     /* dotted leader between label and control */
  content:""; order:1; flex:1 1 12px; min-width:12px; height:1px; align-self:center;
  background:repeating-linear-gradient(90deg,var(--phos-fade) 0 2px,transparent 2px 5px);
}
.conf-row > :not(.conf-label){ order:2; }

.seg{ display:flex; gap:0; border:1px solid var(--phos-dim); }
.seg.wrap{ flex-wrap:wrap; }
.seg button{
  font-family:var(--mono); font-size:.9em; letter-spacing:.12em;
  background:transparent; border:none; color:var(--phos-fade);
  padding:.45em .9em; cursor:pointer; min-height:34px;
}
.seg button + button{ border-left:1px solid var(--phos-dim); }
.seg button:hover{ color:var(--phos); }
.seg button.is-on{ background:var(--phos); color:var(--screen-bg); text-shadow:none; }

.vol{ display:flex; align-items:center; gap:10px; }
.vol output{ min-width:3.5em; text-align:right; }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:min(240px,42vw);
  background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:12px; border:1px solid var(--phos-dim);
  background:repeating-linear-gradient(90deg,var(--phos-fade) 0 4px,transparent 4px 7px);
}
input[type=range]::-moz-range-track{
  height:12px; border:1px solid var(--phos-dim);
  background:repeating-linear-gradient(90deg,var(--phos-fade) 0 4px,transparent 4px 7px);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:24px; margin-top:-7px;
  background:var(--phos); box-shadow:0 0 10px rgb(var(--phos-rgb) / .7);
}
input[type=range]::-moz-range-thumb{
  border:none; border-radius:0; width:14px; height:24px;
  background:var(--phos); box-shadow:0 0 10px rgb(var(--phos-rgb) / .7);
}
.hint{ font-size:.8em; color:var(--phos-fade); letter-spacing:.12em; }
.fineprint{ margin-top:14px; font-size:.78em; line-height:1.7; color:var(--phos-fade); letter-spacing:.1em; }

/* ---- BOTTOM HUD ---- */
.hud-bottom{
  display:flex; align-items:center; gap:12px;
  border-top:2px solid var(--phos-dim); padding-top:6px; margin-top:6px;
  font-size:.8em; letter-spacing:.14em; color:var(--phos-dim);
  white-space:nowrap;
}
.hud-stat b{ color:var(--phos-fade); font-weight:normal; }
.trefoil{
  width:20px; height:20px; flex:none;
  fill:var(--phos); opacity:.85;
  filter:drop-shadow(0 0 4px rgb(var(--phos-rgb) / .6));
  animation:radpulse 4s ease-in-out infinite;
}
@keyframes radpulse{ 0%,100%{ opacity:.45 } 50%{ opacity:.95 } }
.hud-bar{ flex:1 1 40px; min-width:20px; height:10px; border:1px solid var(--phos-dim); padding:1px; }
.hud-bar i{ display:block; height:100%; width:100%;
  background:repeating-linear-gradient(90deg,var(--phos) 0 3px,transparent 3px 6px); }
.hud-stat.right{ margin-left:auto; }

/* ===================== CRT FX LAYERS ===================== */
.fx{ position:absolute; inset:0; pointer-events:none; }

.scanlines{
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
  opacity:.85;
}
.scanlines.off{ display:none; }

.scanbar{
  background:linear-gradient(180deg,transparent 0%, rgb(var(--phos-rgb) / .07) 45%, rgb(var(--phos-rgb) / .12) 50%, rgb(var(--phos-rgb) / .07) 55%, transparent 100%);
  height:22%;
  animation:sweep 6.5s linear infinite;
}
@keyframes sweep{ from{ transform:translateY(-30%) } to{ transform:translateY(460%) } }

.vignette{
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 42%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.92) 100%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.9);
}

.glass{
  background:
    linear-gradient(115deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 26%, transparent 46%),
    radial-gradient(80% 40% at 30% 6%, rgba(255,255,255,.07), transparent 70%);
  mix-blend-mode:screen;
  opacity:.7;
}

/* --- feTurbulence film grain ---------------------------------
   three stacked layers: fine boil, coarse emulsion, room-level.
   Intensity is driven by html[data-grain="0..4"].              */
.grain{ width:100%; height:100%; will-change:opacity; }
.grain-fine{ opacity:var(--grain-fine); mix-blend-mode:overlay; }
.grain-coarse{ opacity:var(--grain-coarse); mix-blend-mode:soft-light; }

.grain-global{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:50;
  opacity:var(--grain-global);
  mix-blend-mode:overlay;
}

:root{ --grain-fine:.75; --grain-coarse:.30; --grain-global:.16; }
html[data-grain="0"]{ --grain-fine:0; --grain-coarse:0; --grain-global:0; }
html[data-grain="1"]{ --grain-fine:.32; --grain-coarse:.12; --grain-global:.06; }
html[data-grain="2"]{ --grain-fine:.52; --grain-coarse:.20; --grain-global:.11; }
html[data-grain="3"]{ --grain-fine:.75; --grain-coarse:.30; --grain-global:.16; }
html[data-grain="4"]{ --grain-fine:1;   --grain-coarse:.44; --grain-global:.26; }
html[data-grain="0"] .grain, html[data-grain="0"] .grain-global{ display:none; }

/* ===================== RINGING OVERLAY ===================== */
.ringing{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  background:rgba(4,10,6,.94);
  animation:alarmflash 3.2s ease-in-out infinite;
}
.ringing[hidden]{ display:none; }
@keyframes alarmflash{
  0%,100%{ background:rgba(4,10,6,.94) } 50%{ background:rgba(20,10,6,.94) }
}
.ring-box{
  text-align:center; padding:clamp(20px,5vw,54px);
  border:3px solid var(--phos);
  box-shadow:0 0 60px rgb(var(--phos-rgb) / .35), inset 0 0 60px rgb(var(--phos-rgb) / .1);
  background:rgba(0,0,0,.55);
  max-width:min(720px,92vw);
}
.vault-door{
  width:clamp(84px,22vw,132px); height:clamp(84px,22vw,132px);
  display:block; margin:0 auto .4em;
  fill:none; stroke:var(--phos);
  filter:drop-shadow(0 0 10px rgb(var(--phos-rgb) / .55));
}
.vd-spin{ transform-origin:50% 50%; animation:vaultspin 18s linear infinite; }
@keyframes vaultspin{ to{ transform:rotate(360deg) } }
.vd-rim{ stroke-width:5; }
.vd-dash{ stroke-width:1.2; stroke-dasharray:3 5; opacity:.65; }
.vd-inner{ stroke-width:2.5; fill:var(--screen-bg); }   /* opaque hub hides the spokes */
.vd-spokes line{ stroke-width:6; stroke-linecap:round; }
.vd-bolts circle{ fill:var(--phos); stroke:none; }
.vd-num{ fill:var(--phos); stroke:none; font-family:var(--mono); font-size:21px; letter-spacing:.06em; }

.ring-tag{ font-size:clamp(14px,3vw,26px); letter-spacing:.3em; color:#ff6a5d; text-shadow:0 0 14px rgba(255,74,61,.8); }
.ring-time{
  font-size:clamp(56px,14vw,140px); line-height:1; margin:.1em 0;
  text-shadow:0 0 24px rgb(var(--phos-rgb) / .7);
}
.ring-label{ font-size:clamp(16px,3.4vw,32px); letter-spacing:.24em; color:var(--phos-dim); margin-bottom:1em; word-break:break-word; }
.ring-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 720px){
  body{
    padding:0;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .device{ height:100%; width:100%; filter:none; }
  .bezel{
    border-radius:0; border:none; padding:8px 7px 0;
    grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:6px;
    box-shadow:inset 0 0 0 3px #0b0e0f;
  }
  .bezel-left, .strap, .screw{ display:none; }
  .bezel-bottom{ padding:0 6px 6px; font-size:9px; letter-spacing:.12em; }
  .screen{ border-radius:14px; }
  .crt{ padding:8px 11px 6px; font-size:13px; }

  .hud-top{ font-size:.74em; letter-spacing:.06em; }
  .tabs{ margin-top:6px; }
  .tab{ flex:1; padding:.7em .2em; letter-spacing:.14em; min-height:42px; }
  .tab.is-active::before, .tab.is-active::after{ display:none; }
  .subtabs{ letter-spacing:.18em; }

  /* ---- clock ---- */
  .clock-day{ letter-spacing:.34em; font-size:.95em; }
  .clock-main{ font-size:clamp(58px,21vw,104px); }
  .clock-date{ letter-spacing:.2em; font-size:.95em; }
  .readout{ grid-template-columns:minmax(0,1fr); font-size:.95em; }
  .test-row .btn{ flex:1 1 100%; min-height:46px; }

  /* ---- config: label on its own line, controls full width ---- */
  .conf-row{
    flex-direction:column; align-items:stretch; gap:7px;
    padding:10px 2px 12px;
    border-bottom:1px solid var(--phos-ghost);
  }
  .conf-row::after{ display:none; }
  .conf-label{ font-size:.82em; letter-spacing:.22em; color:var(--phos-fade); white-space:normal; }
  .seg{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); width:100%; }
  .seg.wrap{ grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .seg button{ min-height:44px; padding:.5em .2em; font-size:.92em; letter-spacing:.06em; }
  .seg button + button{ border-left:1px solid var(--phos-dim); }
  .seg.wrap button:nth-child(odd){ border-left:none; }
  .seg.wrap button:nth-child(n+3){ border-top:1px solid var(--phos-dim); }
  .seg.wrap button:last-child:nth-child(odd){ grid-column:1 / -1; }
  .vol{ width:100%; }
  .vol input[type=range]{ flex:1; width:auto; }
  .btn-row{ width:100%; }
  .btn-row .btn{ flex:1; min-height:44px; }
  .fineprint{ font-size:.74em; }

  /* ---- alarms ---- */
  .af-row{ gap:8px; }
  .af-row .field{ flex:1 1 100%; }
  .days{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
  .day{ min-width:0; padding:.6em .1em; font-size:.8em; letter-spacing:0; }
  #f-add{ flex:1 1 100%; min-height:46px; }
  .alarm-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px; }
  .ar-time{ font-size:1.7em; }
  .alarm-row .ar-meta{ flex:1 1 40%; }
  .ar-toggle{ min-height:40px; }
  .ar-del{ min-height:40px; }

  /* ---- hud ---- */
  .hud-bottom{ gap:9px; font-size:.72em; letter-spacing:.06em; }
  .trefoil{ width:16px; height:16px; }
}

/* very narrow / older phones */
@media (max-width: 380px){
  .crt{ font-size:12px; padding:7px 8px 5px; }
  .tab{ letter-spacing:.06em; }
  .seg button{ font-size:.86em; }
  .hud-bar{ display:none; }
}

/* short landscape phones: don't let the clock eat the screen */
@media (max-height: 480px) and (orientation: landscape){
  .clock-main{ font-size:clamp(40px,9vh,64px); }
  .readout{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vault-door{ width:64px; height:64px; }
}

@media (prefers-reduced-motion: reduce){
  .crt, .scanbar, .blip, .boot-btn, .ringing, .alarm-row.ringing-now{ animation:none !important; }
  /* the grain boil is frozen from JS via pauseAnimations() — texture stays */
}