/* CalendarTron 4000 — BIOS-blue CRT */
:root {
  --blue: #1d1a6e;
  --blue-2: #17145f;
  --deep: #0d0b40;
  --cream: #f6ecd6;
  --orange: #ff8a3d;
  --orange-dk: #a64312;
  --gold: #f0d98a;
  --peri: #cfd0ff;
  --dimb: #5a57b8;
  --pink: #ff4f8b;
  --cyan: #56e3ff;
  --room: #08070f;
  --cream-dk: var(--cream-dk);
  --box-bg: rgba(13, 11, 64, .35);
  --grid: rgba(29, 26, 110, .45);
  --thumb-filter: grayscale(.4) contrast(1.15) sepia(.25) hue-rotate(190deg) saturate(1.4);
  --glow-rgb: 246, 236, 214;
  --accent-rgb: 255, 138, 61;
  --R: #ff2d55; --G: #2dff7a; --B: #2d8cff;
  --px: "Press Start 2P", ui-monospace, monospace;
  --vt: "VT323", ui-monospace, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--room); overflow: hidden; overscroll-behavior: none; }
body { color: var(--cream); font-family: var(--vt); -webkit-font-smoothing: none; -webkit-text-size-adjust: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Phosphor themes (F4) ---------- */
:root[data-theme="green"] {
  --blue: #0d3a22; --blue-2: #0a301c; --deep: #04160c;
  --cream: #d6ffcf; --cream-dk: #6f9c6a;
  --orange: #ffc23d; --orange-dk: #8f6400;
  --gold: #b9f57a; --peri: #8fd8a2; --dimb: #2f6d45;
  --room: #050c08;
  --box-bg: rgba(2, 22, 11, .4); --grid: rgba(13, 58, 34, .55);
  --thumb-filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(2.4) contrast(1.15) brightness(.95);
  --glow-rgb: 190, 255, 190; --accent-rgb: 255, 194, 61;
}
:root[data-theme="amber"] {
  --blue: #2b1803; --blue-2: #241402; --deep: #130a00;
  --cream: #ffd38a; --cream-dk: #9a6e2c;
  --orange: #ff6a2b; --orange-dk: #8a2f00;
  --gold: #ffe9b0; --peri: #d9a25c; --dimb: #73491a;
  --room: #0c0702;
  --box-bg: rgba(15, 8, 0, .4); --grid: rgba(43, 24, 3, .55);
  --thumb-filter: grayscale(1) sepia(1) saturate(2.6) contrast(1.15) brightness(.95);
  --glow-rgb: 255, 211, 138; --accent-rgb: 255, 106, 43;
}

/* ---------- Room + monitor (desktop presentation) ---------- */
#room {
  position: fixed; inset: 0; display: grid; place-items: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, color-mix(in srgb, var(--blue) 55%, transparent), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(255, 79, 139, .10), transparent 70%),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--blue) 22%, var(--room)) 0%, var(--room) 75%);
}
#room::before { /* drifting haze */
  content: ""; position: absolute; inset: -20%; pointer-events: none; opacity: .5;
  background: radial-gradient(circle at 30% 60%, rgba(120, 110, 255, .08), transparent 35%),
              radial-gradient(circle at 70% 30%, rgba(255, 138, 61, .06), transparent 35%);
  animation: haze 18s steps(36) infinite alternate;
}
@keyframes haze { to { transform: translate(3%, -2%) scale(1.05); } }

#monitor {
  position: relative;
  width: min(430px, calc((100dvh - 120px) * 0.5));
  aspect-ratio: 9 / 18.5;
  padding: 22px 22px 54px;
  border-radius: 34px 34px 40px 40px;
  background: linear-gradient(170deg, #d8d1bf 0%, #bdb5a1 45%, #a39b86 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -6px 14px rgba(0, 0, 0, .25),
    0 50px 90px rgba(0, 0, 0, .7), 0 0 120px rgba(80, 70, 200, .18);
}
#monitor .badge {
  position: absolute; left: 0; right: 0; bottom: 17px; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--px); font-size: 9px; letter-spacing: 2px; color: #5c5647; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
#monitor .badge b { color: #3d3a8c; }
#monitor .led { width: 7px; height: 7px; border-radius: 50%; background: #3a3; box-shadow: 0 0 8px #5f5; }

#glass {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 26px / 30px;
  background: var(--blue);
  box-shadow: inset 0 0 0 3px #2b2838, 0 0 0 4px #8e8673;
  container-type: size;
}

/* Phone: the phone itself is the CRT */
@media (max-width: 560px), (max-height: 520px) {
  #room { place-items: stretch; background: var(--room); }
  #room::before { display: none; }
  #monitor { width: 100%; height: 100%; aspect-ratio: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  #monitor .badge { display: none; }
  #glass { border-radius: 0; box-shadow: none; }
}

/* ---------- Warp layer + overlay ---------- */
#warp {
  position: absolute; inset: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 9cqw) 7cqw calc(env(safe-area-inset-bottom, 0px) + 8cqw);
  font-size: 5.6cqw; line-height: 1.12;
  will-change: filter;
}
#warp.warped { filter: url(#crt-warp); }
#crt { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* CSS fallback when WebGL is unavailable */
#glass.crt-css::before, #glass.crt-css::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; }
#glass.crt-css::before {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(5, 4, 30, .8) 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .65), inset 0 0 8px rgba(255, 255, 255, .12);
}
#glass.crt-css::after {
  opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Power-on */
#glass.off #warp { transform: scale(.7, .004); filter: brightness(4); opacity: 0; }
#glass.on #warp { animation: power-on .55s steps(3, jump-end) both; }
@keyframes power-on {
  0% { transform: scale(.6, .004); filter: brightness(5); opacity: 1; }
  40% { transform: scale(1, .006); filter: brightness(4); }
  100% { transform: none; filter: none; }
}
#glass.blip #warp { animation: blip .16s steps(3) both; }
@keyframes blip { 0% { opacity: .55; transform: translateY(1.2%); } 50% { opacity: 1; transform: translateY(-.6%); } 100% { transform: none; } }

/* ---------- Type + primitives ---------- */
.px { font-family: var(--px); font-weight: normal; }
.glow { text-shadow: -1px 0 rgba(255, 45, 85, .65), 1px 0 rgba(45, 140, 255, .65), 0 0 10px rgba(var(--glow-rgb), .45); }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.screen { position: absolute; inset: 0; padding: inherit; display: flex; flex-direction: column; }

.emblem { position: relative; width: 11cqw; height: 5cqw; flex: none; isolation: isolate; }
.emblem i {
  position: absolute; top: 0; width: 62%; height: 100%; border-radius: 50%;
  background: repeating-linear-gradient(0deg, currentColor 0 18%, transparent 18% 33%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 45%); mask: linear-gradient(90deg, transparent, #000 45%);
  mix-blend-mode: screen; filter: drop-shadow(0 0 3px currentColor);
}
.emblem .r { left: 0; color: var(--R); }
.emblem .g { left: 19%; color: var(--G); }
.emblem .b { left: 38%; color: var(--B); }
.emblem.big { width: 30cqw; height: 13cqw; margin: 0 auto; }

.logo { font-family: var(--px); font-weight: normal; margin: 0; text-align: center; font-size: 6.2cqw; line-height: 1.2; letter-spacing: .05em; }
.logo span {
  display: block; margin-top: 1.5cqw; font-size: 9.6cqw; line-height: 1.08; color: var(--orange);
  text-shadow: -2px 0 var(--R), 2px 0 var(--B), 3px 3px 0 rgba(0, 0, 0, .45), 0 0 18px rgba(var(--accent-rgb), .55);
}

.topbar {
  display: flex; align-items: center; gap: 3cqw; flex: none;
  padding-bottom: 3cqw; margin-bottom: 4.5cqw; border-bottom: 2px solid var(--dimb);
  font-family: var(--px); font-size: 2.7cqw; color: var(--peri); letter-spacing: .04em;
}
.topbar .st { margin-left: auto; color: var(--gold); }

.box { position: relative; border: 5px double var(--cream); padding: 5cqw 4cqw 4cqw; background: var(--box-bg); }
.box .lbl {
  position: absolute; top: -1.7cqw; left: 4cqw; padding: 0 2cqw; background: var(--blue);
  font-family: var(--px); font-size: 2.5cqw; line-height: 1; color: var(--gold); letter-spacing: .05em;
}
.k { color: var(--peri); font-size: .78em; margin: 0; letter-spacing: .04em; }
.sel { background: var(--cream); color: var(--blue); padding: 0 1.2cqw; }
.sel.ok { background: var(--orange); color: var(--deep); }

.actions { margin-top: auto; display: flex; flex-direction: column; gap: 4cqw; padding-top: 4cqw; }
.btn {
  display: block; width: 100%; min-height: 48px; padding: 4.2cqw 3cqw; text-align: center;
  font-family: var(--px); font-size: 3.2cqw; letter-spacing: .04em;
  background: var(--cream); color: var(--blue);
  box-shadow: 0 1.4cqw 0 var(--cream-dk), 0 0 22px rgba(var(--glow-rgb), .18);
  transition: transform .06s steps(1), box-shadow .06s steps(1);
}
.btn.hot { background: var(--orange); color: var(--deep); box-shadow: 0 1.4cqw 0 var(--orange-dk), 0 0 26px rgba(var(--accent-rgb), .4); }
.btn.alt { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px var(--cream); }
.btn:active:not(:disabled) { transform: translateY(1.2cqw); box-shadow: 0 .2cqw 0 var(--cream-dk); }
.btn.hot:active:not(:disabled) { box-shadow: 0 .2cqw 0 var(--orange-dk); }
.btn.alt:active { transform: translateY(.6cqw); background: rgba(var(--glow-rgb), .1); }
.btn:disabled { background: transparent; color: var(--dimb); box-shadow: inset 0 0 0 2px var(--dimb); cursor: not-allowed; }
.btn:focus-visible, .mini:focus-visible, .keys button:focus-visible { outline: 2px dashed var(--gold); outline-offset: 3px; }

.mini {
  font-family: var(--px); font-size: 2.6cqw; color: var(--peri); padding: 3cqw 2cqw; min-height: 44px; letter-spacing: .04em;
}
.mini:active { color: var(--cream); }

.keys {
  display: flex; justify-content: space-between; gap: 2cqw; flex: none; margin-top: 4cqw;
  font-size: .72em; color: var(--peri);
}
.keys button, .keys a { color: inherit; text-decoration: none; padding: 1.5cqw 0; min-height: 36px; display: flex; align-items: center; gap: 1.2cqw; }
.keys b { font-weight: normal; color: var(--cream); background: var(--dimb); padding: 0 1cqw; }

.seg { display: flex; gap: .8cqw; height: 5cqw; padding: .8cqw; border: 2px solid var(--cream); }
.seg i { flex: 1; background: var(--cream); opacity: 0; }
.seg i.on { opacity: 1; }

/* ---------- Boot ---------- */
.boot { justify-content: center; align-items: center; text-align: center; gap: 4cqw; }
.boot .meta { margin: 0; color: var(--peri); font-size: 4.6cqw; line-height: 1.15; }
.logo-stack { position: relative; isolation: isolate; }
.logo.ghost { position: absolute; inset: 0; pointer-events: none; text-shadow: none; mix-blend-mode: screen; opacity: 0; }
.logo.ghost, .logo.ghost span { text-shadow: none; }
.logo.ghost.r, .logo.ghost.r span { color: var(--R); }
.logo.ghost.g, .logo.ghost.g span { color: var(--G); }
.logo.ghost.b, .logo.ghost.b span { color: var(--B); }
.post { margin: 0; width: 72cqw; min-height: 6.6em; font-family: var(--vt); font-size: 4.4cqw; line-height: 1.3; text-align: left; color: var(--cream); white-space: pre; }
.post .ok { color: var(--orange); }

/* RGB convergence (boot) */
.boot.pre .logo-stack, .boot.pre .emblem, .boot.pre .meta { opacity: 0; }
.boot.converge .emblem i { animation: emb-in 1.5s steps(3, jump-end) both; }
.boot.converge .emblem .r { --dx: -55cqw; --dy: -6cqw; animation-delay: .0s; }
.boot.converge .emblem .g { --dx: 0cqw; --dy: 14cqw; animation-delay: .08s; }
.boot.converge .emblem .b { --dx: 55cqw; --dy: -4cqw; animation-delay: .16s; }
@keyframes emb-in {
  0% { transform: translate(var(--dx), var(--dy)) scale(2.4) rotate(-10deg); opacity: 0; filter: blur(6px) drop-shadow(0 0 3px currentColor); }
  15% { opacity: 1; }
  55% { transform: translate(calc(var(--dx) * -.08), calc(var(--dy) * -.08)) scale(.94); filter: blur(0) drop-shadow(0 0 3px currentColor); }
  72% { transform: translate(calc(var(--dx) * .03), calc(var(--dy) * .03)) scale(1.02); }
  86% { transform: translate(calc(var(--dx) * -.01), 0); }
  100% { transform: none; opacity: 1; filter: drop-shadow(0 0 3px currentColor); }
}
.boot.converge .logo-stack > h1 { opacity: 0; }
.boot.converge .logo.ghost { animation: ghost-in 1.6s steps(3, jump-end) both; }
.boot.converge .logo.ghost.r { --dx: -38cqw; --dy: -4cqw; animation-delay: .1s; }
.boot.converge .logo.ghost.g { --dx: 0cqw; --dy: 22cqw; animation-delay: .18s; }
.boot.converge .logo.ghost.b { --dx: 38cqw; --dy: -6cqw; animation-delay: .26s; }
@keyframes ghost-in {
  0% { transform: translate(var(--dx), var(--dy)) skewX(-14deg) scaleX(1.3); opacity: 0; filter: blur(4px); }
  18% { opacity: .95; }
  58% { transform: translate(calc(var(--dx) * -.1), calc(var(--dy) * -.1)) skewX(3deg); filter: none; }
  74% { transform: translate(calc(var(--dx) * .04), 0) skewX(-1deg); }
  88% { transform: translate(calc(var(--dx) * -.015), 0); }
  100% { transform: none; opacity: .95; }
}
.boot.locked .logo-stack > h1 { opacity: 1; animation: lock-in .5s steps(5) both; }
.boot.locked .logo.ghost { animation: ghost-out .5s steps(4, jump-end) both; }
@keyframes lock-in { 0% { opacity: 0; filter: brightness(2.5); } 100% { opacity: 1; filter: none; } }
@keyframes ghost-out { from { opacity: .95; } to { opacity: 0; } }

.boot .boot-seg { width: 72cqw; }
.boot .copyright { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 13cqw); margin: 0; color: var(--gold); font-size: 4.6cqw; }
.boot .skip { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 6cqw); margin: 0; font-family: var(--px); font-size: 2.3cqw; color: var(--dimb); }

/* ---------- Setup ---------- */
.headline { font-size: 3.8cqw; line-height: 1.75; margin: 1cqw 0 7cqw; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 7cqw 1fr; margin: 1.6cqw 0; }
.steps li::before { content: counter(s) "."; color: var(--orange); }
.sys { margin-top: 7cqw; display: flex; flex-direction: column; gap: 2.2cqw; }
.status-line { display: flex; align-items: baseline; gap: 2cqw; margin: 0; font-size: .82em; color: var(--peri); white-space: nowrap; }
.status-line > span:last-child { color: var(--cream); }
.status-line > span.sel { color: var(--blue); }
.status-line > span.sel.ok { color: var(--deep); }
.status-line .dots { flex: 1; border-bottom: 2px dotted var(--dimb); transform: translateY(-.4em); }

/* ---------- Viewfinder ---------- */
.viewfinder { padding-left: 0; padding-right: 0; }
.viewfinder .topbar { margin-left: 6cqw; margin-right: 6cqw; margin-bottom: 0; }
.feed { position: relative; flex: 1; min-height: 0; background: #000; border-top: 2px solid var(--cream); border-bottom: 2px solid var(--cream); overflow: hidden; }
.feed video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feed .rec { position: absolute; top: 3cqw; left: 4cqw; font-family: var(--px); font-size: 2.5cqw; color: var(--cream); text-shadow: 0 0 6px #000; }
.feed .rec i { display: inline-block; width: 1.8cqw; height: 1.8cqw; margin-right: 1.5cqw; background: #ff4f4f; animation: blink 1s steps(1) infinite; }
.brk { position: absolute; width: 8cqw; height: 8cqw; border: 1cqw solid var(--cream); filter: drop-shadow(0 0 4px rgba(0, 0, 0, .8)); }
.brk.tl { top: 10%; left: 9%; border-right: 0; border-bottom: 0; }
.brk.tr { top: 10%; right: 9%; border-left: 0; border-bottom: 0; }
.brk.bl { bottom: 8%; left: 9%; border-right: 0; border-top: 0; }
.brk.br { bottom: 8%; right: 9%; border-left: 0; border-top: 0; }
.flash { position: absolute; inset: 0; background: var(--cream); opacity: 0; pointer-events: none; }
.flash.go { animation: flash .35s steps(4) both; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.hint { margin: 3cqw 0 0; text-align: center; color: var(--peri); font-size: .9em; }
.shutter-row { display: flex; align-items: center; justify-content: space-between; padding: 2cqw 6cqw 0; }
.shutter-row .mini { width: 22cqw; }
.shutter-row .mini:last-child { text-align: right; }
.shutter {
  width: 20cqw; height: 20cqw; border-radius: 50%; display: grid; place-items: center;
  background: var(--cream); color: var(--blue); font-family: var(--px); font-size: 5cqw;
  box-shadow: 0 1.4cqw 0 var(--cream-dk), 0 0 0 1.6cqw var(--blue), 0 0 0 2.4cqw var(--orange), 0 0 30px rgba(var(--accent-rgb), .5);
}
.shutter:active { transform: translateY(1cqw); box-shadow: 0 .3cqw 0 var(--cream-dk), 0 0 0 1.6cqw var(--blue), 0 0 0 2.4cqw var(--orange), 0 0 40px rgba(var(--accent-rgb), .8); }

/* ---------- Scanning ---------- */
.box.pic { padding: 3.5cqw; }
.thumb { position: relative; height: 34cqh; overflow: hidden; background: var(--deep); }
.thumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; filter: var(--thumb-filter); }
.thumb::after { /* pixel grid */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 5px);
}
.beam { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1; background: var(--cream); box-shadow: 0 0 14px 5px rgba(var(--glow-rgb), .55); animation: beam 1.8s steps(14) infinite alternate; }
@keyframes beam { to { top: calc(100% - 2px); } }
.log { margin: 5cqw 0 0; font-family: var(--vt); font-size: 1em; line-height: 1.25; white-space: pre-wrap; color: var(--cream); }
.log .ok { color: var(--orange); }
.log .q { color: var(--gold); }
.log .cur { animation: blink .8s steps(1) infinite; }
.progress { margin-top: auto; }
.progress .k { margin-bottom: 1.5cqw; }

/* ---------- Result ---------- */
.result .topbar { margin-bottom: 4cqw; }
.warn { margin: -1cqw 0 4cqw; font-family: var(--px); font-size: 2.6cqw; color: var(--orange); animation: blink 1.4s steps(1) infinite; }
.event { display: flex; flex-direction: column; gap: 2.4cqw; padding-top: 5.5cqw; }
.f { display: block; }
.f .k em { font-style: normal; color: var(--orange); }
.dow { float: right; color: var(--gold); }
.v.grow { overflow: hidden; max-height: 4.6em; }
.v.big.grow { max-height: 4.4em; }
.f-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; }
.v {
  display: block; width: 100%; margin: 0; padding: .6cqw 0 .3cqw; border: 0; border-bottom: 2px dotted transparent; border-radius: 0;
  background: transparent; color: var(--cream); font-family: var(--vt); font-size: max(16px, 1em); line-height: 1.1;
  -webkit-appearance: none; appearance: none; outline: none; resize: none;
}
.v.big { font-family: var(--px); font-size: max(16px, 3.6cqw); line-height: 1.45; color: var(--orange); }
.v:focus { border-bottom-color: var(--gold); background: rgba(var(--glow-rgb), .06); }
.v::placeholder { color: var(--dimb); }
.v[type="date"], .v[type="time"] { min-height: 1.3em; color-scheme: dark; }
.v::-webkit-date-and-time-value { text-align: left; }
.v::-webkit-calendar-picker-indicator { filter: invert(.9) sepia(.3); opacity: .7; }
.f.missing .k { color: var(--orange); }
.f.missing .v { border-bottom-color: var(--orange); }
.toggle { display: flex; align-items: center; gap: 2.5cqw; font-size: .8em; color: var(--peri); cursor: pointer; width: max-content; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .tick { width: 4.2cqw; height: 4.2cqw; border: 2px solid var(--cream); display: grid; place-items: center; }
.toggle input:checked + .tick::after { content: ""; width: 2cqw; height: 2cqw; background: var(--orange); }
.toggle input:focus-visible + .tick { outline: 2px dashed var(--gold); outline-offset: 2px; }
.tz { margin: 0; font-size: .75em; color: var(--gold); }
.legend { margin: 2.5cqw 0 0; text-align: center; font-size: .72em; color: var(--peri); }
.legend .q { color: var(--orange); }
.pager { display: flex; justify-content: space-between; }
.result .actions { gap: 3.4cqw; }
.result.all-day #time-row { display: none; }

/* Short screens: tighten the result card */
@container (max-aspect-ratio: 9/17) { .result .event { gap: 3cqw; } }
@container (min-aspect-ratio: 9/16.5) {
  .result .event { gap: 1.2cqw; padding-top: 4.5cqw; }
  .result .legend { display: none; }
  .result .keys { display: none; }
}

/* ---------- Saved ---------- */
.saved-mid, .msg-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 5cqw; }
.stars { font-size: 6cqw; color: var(--orange); margin: 2cqw 0 0; }
.saved-title { margin: 0; font-size: 1.1em; color: var(--cream); }
.saved .sub { margin: 0; color: var(--peri); font-size: .85em; line-height: 1.2; }
.saved .sub b { color: var(--cream); font-weight: normal; }

/* ---------- Message ---------- */
.msg-mid { text-align: left; }
.msg-title { margin: 1cqw 0 4cqw; font-size: 3.6cqw; line-height: 1.6; color: var(--orange); }
.msg-body p { margin: 0 0 2.5cqw; }
.msg-body .k { display: block; }

@media (prefers-reduced-motion: reduce) {
  .blink, .warn, .beam, #room::before, .feed .rec i, .log .cur { animation: none !important; }
  #glass.on #warp, #glass.blip #warp { animation: none !important; }
}

/* Short viewports (browser chrome visible): tighten the setup screen so everything fits */
@container (min-aspect-ratio: 9/17.5) {
  .headline { margin: 0 0 5cqw; font-size: 3.5cqw; }
  .box { padding: 4.5cqw 4cqw 3cqw; }
  .steps li { margin: .8cqw 0; }
  .sys { margin-top: 4.5cqw; gap: 1.2cqw; }
  .actions { gap: 3cqw; padding-top: 3cqw; }
  .btn { padding: 3.6cqw 3cqw; }
  .keys { margin-top: 2.5cqw; }
}

/* ---------- Degauss (F3) ---------- */
#glass.degauss .screen:not([hidden]) { animation: degauss .9s steps(2, jump-end) both; }
@keyframes degauss {
  0% { transform: scale(1.04) skewX(5deg); filter: hue-rotate(160deg) saturate(3) blur(1px); }
  15% { transform: scale(.97) skewX(-4deg) translateX(2%); filter: hue-rotate(-120deg) saturate(2.5); }
  30% { transform: scale(1.02) skewX(3deg) translateX(-1.5%); filter: hue-rotate(80deg) saturate(2); }
  50% { transform: skewX(-1.5deg) translateX(.8%); filter: hue-rotate(-40deg); }
  70% { transform: skewX(.6deg); filter: hue-rotate(15deg); }
  100% { transform: none; filter: none; }
}
#glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: 0;
  background: linear-gradient(115deg, var(--R), var(--G) 35%, var(--B) 65%, var(--R)); mix-blend-mode: color; }
#glass.degauss::after { animation: rainbow .9s steps(8, jump-end) both; }
@keyframes rainbow { 0% { opacity: .75; transform: translateY(-30%) scaleY(1.6); } 100% { opacity: 0; transform: translateY(30%) scaleY(1); } }

/* ---------- Four function keys ---------- */
.keys.four { font-size: .64em; }

/* ---------- Saved: pixel fireworks ---------- */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; image-rendering: pixelated; }

@media (prefers-reduced-motion: reduce) {
  .boot.converge .emblem i, .boot.converge .logo.ghost, .boot.locked .logo-stack > h1, #glass.degauss .screen, #glass.degauss::after { animation: none !important; }
  .boot.converge .logo-stack > h1 { opacity: 1; }
}

/* ---------- Chromatic aberration on the UI (js/ca.js sets --nx/--ny per element, crt.js sets --tx/--ty) ---------- */
#warp { --tx: 0; --ty: 0; --ca-edge: .85; --ca-tilt: .7; --ca-a: .55; --ca-glow: 0 0 0 transparent; }
.screen :is(p, li, h2, pre, label, .k, .v, .btn, .mini, .keys button, .keys a, .lbl, .topbar span, .status-line span, .sel, .tz, .legend, .warn, .hint, .saved-title) {
  text-shadow:
    calc((var(--nx, 0) * var(--ca-edge) + var(--tx) * var(--ca-tilt)) * 1px) calc((var(--ny, 0) * var(--ca-edge) - var(--ty) * var(--ca-tilt)) * 1px) 0 rgba(255, 45, 85, var(--ca-a)),
    calc((var(--nx, 0) * var(--ca-edge) + var(--tx) * var(--ca-tilt)) * -1px) calc((var(--ny, 0) * var(--ca-edge) - var(--ty) * var(--ca-tilt)) * -1px) 0 rgba(45, 140, 255, var(--ca-a)),
    var(--ca-glow);
}
.screen .glow { --ca-glow: 0 0 10px rgba(var(--glow-rgb), .45); }
.btn.hot, .sel { --ca-a: .35; }
@media (prefers-reduced-motion: reduce) { #warp { --ca-tilt: 0; } }

/* Stop-motion rule: every played animation advances in held frames (~10-12fps). Interactive tilt stays smooth. */