/* Reminder: Keep this CRT asset under 800 lines. */

:root{ --phosphor:#19ff62; --phosphor-soft:rgba(25,255,98,.5); --glass:#002b16; --glass-dark:#00140b; --bezel1:#121212; --bezel2:#090909; --housing1:#1a1a1a; --housing2:#0c0c0c; }
*{box-sizing:border-box} html,body{height:100%}
body{ margin:0; background:#000; color:#a8ffb5; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; overflow:hidden; }

.wrap{ position:fixed; inset:0; padding:clamp(10px,2vw,24px); display:grid; place-items:center; transition:transform .35s ease;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,0,160,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 40%),
    radial-gradient(80% 120% at 100% 0%, rgba(25,255,98,.12), transparent 70%);
 }
.wrap.is-collapsed{ transform:translateY(calc(100vh - clamp(180px, 60vh, 520px))); transition:transform .35s ease; }
.wrap.is-expanded{ transform:translateY(0); transition:transform .35s ease; }
.wrap.is-collapsed .crt-shadow{ max-height:clamp(180px, 60vh, 520px); }
.wrap.is-collapsed .term{ inset:56px 12px 64px 12px; }
.crt-shadow{ width:min(1200px, 98vw); height:min(720px, 92vh); display:grid; place-items:center;
  box-shadow: 0 30px 90px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04) inset; border-radius:24px;
  padding:clamp(10px,1.6vw,16px); background:linear-gradient(180deg,var(--housing1),var(--housing2)); border:1px solid #2a2a2a; }
.crt-housing{width:100%; height:100%}
.crt-bezel{ position:relative; width:100%; height:100%; padding:clamp(8px,1.2vw,12px); border-radius:18px;
  background:linear-gradient(180deg,var(--bezel1),var(--bezel2)); border:1px solid #333; box-shadow: inset 0 0 12px #000; }
.crt-screen{ position:relative; width:100%; height:100%; border-radius:28px/24px; padding:clamp(10px,1.6vw,16px);
  background:radial-gradient(120% 100% at 50% 50%, var(--glass) 0%, var(--glass-dark) 60%); border:1px solid #0d3;
  color:#a8ffb5; text-shadow: 0 0 6px var(--phosphor-soft); overflow:hidden; transform: perspective(1000px) translateZ(0); }
.crt-screen::before{ content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, rgba(255,255,255,.02) 1px 2px);
  mix-blend-mode:screen; animation:scan .8s linear infinite; pointer-events:none; }
.crt-screen::after{ content:""; position:absolute; inset:0; box-shadow: inset 0 0 120px rgba(0,255,120,.18), inset 0 0 220px rgba(0,255,160,.08); pointer-events:none; }
.strip{ display:flex; align-items:center; gap:.6rem; color:#b0ffd0; opacity:.9; font-size:12px; letter-spacing:.06em; margin-bottom:8px; flex-wrap:wrap; row-gap:.4rem; }
.strip-status{ display:flex; align-items:center; gap:.35rem; opacity:.75; white-space:nowrap; flex:0 0 auto; }
.ctrl-group{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; justify-content:flex-end; row-gap:.35rem; flex:1 1 auto; }
.track-meta{ order:0; display:flex; align-items:center; gap:.35rem; text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:#ccffd6; margin-right:auto; min-width:0; }
.track-meta .track-value{ display:inline-block; max-width:clamp(80px, 22vw, 220px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-meta .track-sep{ opacity:.5; }
.ctrl-btn{ padding:.3rem .75rem; border:1px solid #0d3; background:#032315; color:#caffd8; border-radius:999px; cursor:pointer; font-size:11px; letter-spacing:.05em; text-transform:uppercase; transition:background .2s, color .2s, box-shadow .2s; }
.ctrl-btn.active{ background:var(--phosphor); color:#032315; box-shadow:0 0 18px rgba(25,255,98,.2); }
.ctrl-btn:hover{ background:#07321f; }
.ctrl-btn[disabled]{ opacity:.4; cursor:not-allowed; background:#041c11; color:#658f72; box-shadow:none; }
.ctrl-btn:focus-visible{ outline:1px solid var(--phosphor); outline-offset:2px; }
.volume-slider{ width:96px; accent-color:var(--phosphor); background:rgba(0,0,0,.18); border-radius:999px; height:4px; }
.stream-link{ color:var(--phosphor); text-decoration:none; font-size:11px; letter-spacing:.05em; opacity:.85; }
.stream-link:hover{ opacity:1; text-decoration:underline; }
.dot{height:8px;width:8px;border-radius:50%;background:var(--phosphor);box-shadow:0 0 12px var(--phosphor-soft)}
.mono-dim{opacity:.7}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#stream{ display:none; }
.term{ position:absolute; inset:48px 12px 56px 12px; overflow:auto; padding-right:8px; }
.row{display:flex; gap:.6rem; padding:.2rem 0;} .row .p{opacity:.7; color:#9af7ab} .row .t{flex:1; min-width:0; word-break:break-word}
.io{ position:absolute; left:12px; right:12px; bottom:12px; display:flex; align-items:center; gap:.6rem; color:#caffd8; }
.prompt{opacity:.7}
.in{ flex:1; background:transparent; color:#caffd8; border:none; outline:none; padding:.2rem; font:inherit;
  caret-color: var(--phosphor); text-shadow: 0 0 6px var(--phosphor-soft); }
.btn{ padding:.4rem .7rem; border:1px solid #0d3; background:#032315; color:#caffd8; border-radius:8px; cursor:pointer;
  box-shadow:0 0 14px rgba(0,255,120,.12) inset, 0 0 18px rgba(0,255,120,.18); }
.btn:hover{background:#07321f}
.term::-webkit-scrollbar{width:10px;height:10px} .term::-webkit-scrollbar-thumb{ background:linear-gradient(var(--phosphor), #00d48c); border-radius:12px; } .term::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
@keyframes scan { from{background-position:0 0} to{background-position:0 2px} }
@keyframes ping { 0%{opacity:1} 50%{opacity:.45} 100%{opacity:1} }
.blink{ animation: ping 1.6s ease-in-out infinite }
@media (max-width: 520px){ .term{inset:56px 8px 64px 8px} }
/* Keep admin bar usable without wrecking the CRT vibe */
#wpadminbar{ opacity:.25; transition:opacity .2s } #wpadminbar:hover{ opacity:1 }

.crt-video-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:2vmin;background:rgba(0,0,0,.92);z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s ease}
.crt-video-overlay.is-active{opacity:1;pointer-events:auto}
.crt-video-overlay__inner{position:relative;width:min(1280px,95vw);aspect-ratio:16/9;background:#000;box-shadow:0 0 42px rgba(0,0,0,.65)}
.crt-video-overlay__close{position:absolute;top:-48px;right:0;background:rgba(0,0,0,.76);color:#a8ffb5;border:1px solid #0d3;border-radius:999px;padding:.4rem .85rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.crt-video-overlay__close:hover{background:rgba(0,0,0,.88)}
.crt-video-overlay__frame{width:100%;height:100%;border:0;background:#000}