/* style.css (v9) */

/* ===== BLOOD RED CRT THEME (base vars remain, DOS skin overrides them) ===== */
:root {

  --bg: #000000;
  --ink: #ff1a1a;
  --frame: #990909;
  --muted: #661111;
  --accent-red: #ff3333;
  --accent-orange: #ff884d;
  


  --hud-h: 46px;
  --status-h: 46px;
  --gap: 16px;
  --pad-x: 16px;
  --pad-t: 16px;

  --dash-h: calc(100vh - var(--hud-h) - var(--status-h));
  --corner: 4px;

  --scrollbar-track: rgba(255,0,0,.05);
  --scrollbar-thumb: rgba(255,136,77,.35);
  --scrollbar-thumb-hover: rgba(255,136,77,.55);

  --cursor-size: 12px;

  --pixel-scale: 0.42;

  --mosaic-size: 6px;
  --mosaic-color: rgba(255,255,255,.05);

  --degrade-blur: .7px;
  --degrade-contrast: .90;
  --degrade-sat: .85;

  --media-pad: 12px;
  --media-fit: 0.92;

  --pane-bg: rgba(255,0,0,.04);
  --pane-glow: rgba(255,136,77,.18);
  --rule: rgba(255,136,77,.25);
}

/* === Pixel fonts === */
@font-face{
  font-family:"VPPixelSimplified";
  src: url("fonts/VPPixel-Simplified.woff2") format("woff2"),
       url("fonts/VPPixel-Simplified.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family:"VPPixelSimplified";
  src: url("fonts/VPPixel-Simplified.woff2") format("woff2"),
       url("fonts/VPPixel-Simplified.otf") format("opentype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family:"VT323Local";
  font-style:normal;
  font-weight:400;
  src: local("VT323");
}

* { box-sizing:border-box }
html,body{height:100%}

html, body{
  margin:0;
  overflow:hidden;
  overscroll-behavior:none;
}

body{
  color:var(--ink);
  background:var(--bg);
  font:20px/1.45 "VPPixelSimplified", ui-monospace, Menlo, Consolas, monospace;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-shadow:0 0 2px var(--ink),0 0 8px rgba(255,0,0,.5);
  font-synthesis-weight: none;
  font-synthesis-style: none;
  touch-action:none;
}

/* FORCE PIXEL FONT EVERYWHERE */
html, body, *, *::before, *::after {
  font-family: "VPPixelSimplified", ui-monospace, Menlo, Consolas, monospace !important;
  font-synthesis-weight: none;
  font-synthesis-style: none;
}
pre, code, kbd, samp, input, textarea, button, select, option {
  font: inherit !important;
}

/* CRT */
body.crt::before,
body.crt::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}
body.crt::before {
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,0,0,.10) 0px,
    rgba(255,0,0,.10) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:overlay;
  opacity:.08;
}
body.crt::after {
  background:radial-gradient(140% 110% at 50% 50%,
    transparent 72%,
    rgba(0,0,0,.28) 92%,
    rgba(0,0,0,.34) 100%
  );
  filter:none;
}

/* subtle flicker */
@keyframes flicker {
  0%,100% { opacity:1 }
  50% { opacity:.96 }
  60% { opacity:.9 }
}
body { animation:flicker 3.5s infinite steps(60); }

/* Pixelation wrappers */
#fx-wrap{
  position:fixed;
  inset:0;
  overflow:hidden;
  transform-origin:0 0;
}
#fx-scale{
  position:absolute;
  inset:0;
  image-rendering:pixelated;
  transform-origin:0 0;
}

/* Always-on filters + degradation */
.fx-default .dash,
.fx-default .status {
  filter: blur(var(--degrade-blur))
          contrast(var(--degrade-contrast))
          saturate(var(--degrade-sat));
}
.fx-default .hud {
  filter: contrast(var(--degrade-contrast))
          saturate(var(--degrade-sat));
}

/* ===== DEFAULT HARD JITTER ===== */
.fx-default #fx-scale{
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  animation: screen-wobble 0.9s steps(2,end) infinite;
}
.fx-default .panel{
  will-change: transform;
  animation: panel-jitter 0.22s steps(2,end) infinite;
}
@keyframes screen-wobble{
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(1px,0,0); }
  50%  { transform: translate3d(0px,1px,0); }
  75%  { transform: translate3d(0,-1px,0); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes panel-jitter{
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(1px,0,0); }
  100% { transform: translate3d(0,0,0); }
}

/* scanline drift so CRT isn't static */
body.crt::before{
  animation: scan-drift 1.4s steps(2,end) infinite;
}
@keyframes scan-drift{
  0%{ transform: translateY(0); opacity:.08; }
  50%{ transform: translateY(1px); opacity:.11; }
  100%{ transform: translateY(0); opacity:.08; }
}

/* HUD / STATUS */
.hud,
.status {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:0 var(--pad-x);
  font-size:16px;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--accent-orange);
  border-bottom:2px solid var(--frame);
}
.hud { height: var(--hud-h); }

.status-left,
.status-center,
.status-right{
  flex:1;
  display:flex;
  align-items:center;
}
.status-left{ justify-content:flex-start; }
.status-center{ justify-content:center; text-align:center; }
.status-right{ justify-content:flex-end; }
.status-right .sep{ margin:0 .5ch; opacity:.6 }

/* DASHBOARD */
.dash{
  position:relative;
  height: var(--dash-h);
  padding: var(--pad-t) var(--pad-x) calc(var(--pad-t) + var(--gap));
  display:grid;
  gap: var(--gap);
  grid-template-columns: 1fr 1fr;
}
.col{
  display:flex;
  flex-direction:column;
  gap: var(--gap);
  height:100%;
  min-height:0;
}
.col-left { justify-content:flex-start; }
.col-right{ justify-content:flex-start; }

/* Panel heights */
.panel-current { height: calc(var(--dash-h) * 0.10); min-height:0; }
.panel-media   { height: calc(var(--dash-h) * 0.90); min-height:0; }

/* Right column: 50 / 50 split */
.panel-comments {
  height: calc(var(--dash-h) * 0.50);
  min-height:0;
  display:flex;
  flex-direction:column;
}
.panel-terminal {
  height: calc(var(--dash-h) * 0.50);
  min-height:0;
  display:flex;
}

/* Panels */
.panel{
  position:relative;
  padding:1rem;
  border:2px solid var(--frame);
  border-radius:var(--corner);
  background:linear-gradient(to bottom, rgba(255,0,0,.05), rgba(0,0,0,.2));
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.45);
}
.panel .label{
  position:absolute;
  top:-.85rem;
  left:1rem;
  padding:0 .6rem;
  background:var(--bg);
  color:var(--accent-orange);
  font-size:18px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.panel pre{ margin:0; white-space:pre-wrap }

/* Terminal scroll */
#logwrap{
  flex:1;
  overflow:auto;
  padding:.25rem;
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
#logwrap::-webkit-scrollbar{ width:10px; height:10px }
#logwrap::-webkit-scrollbar-track{ background:var(--scrollbar-track) }
#logwrap::-webkit-scrollbar-thumb{
  background:var(--scrollbar-thumb);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:content-box;
}
#logwrap::-webkit-scrollbar-thumb:hover{
  background:var(--scrollbar-thumb-hover);
}

.line{ display:flex; align-items:center; gap:10px; margin-top:6px }
.prompt{ color:var(--accent-orange); }
#input{
  background:transparent;
  border:none;
  outline:none;
  color:inherit;
  width:100%;
  caret-color:currentColor;
}

/* Helpers */
.c-red{ color:var(--accent-red) }
.c-orange{ color:var(--accent-orange) }
.c-muted{ color:var(--muted) }
.hr{ opacity:.25; border-bottom:1px dashed var(--ink); margin:.35rem 0 }
.hidden{ display:none !important }

/* Cursor visuals */
.use-red-cursor, .use-red-cursor * { cursor:none !important; }
.cursor-dot{
  position: fixed;
  left:0; top:0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  background: var(--accent-red);
  pointer-events:none;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  z-index: 2147483647;
  opacity:0;
}
.cursor-dot.hot{ background: var(--accent-orange) !important; }

.cursor-ghost{
  position: fixed;
  width: var(--cursor-size);
  height: var(--cursor-size);
  background: var(--accent-orange);
  transform: translate(-50%,-50%);
  image-rendering: pixelated;
  pointer-events:none;
  z-index:2147483646;
  opacity:0.7;
  animation: ghostFade 0.6s forwards;
}
.cursor-ghost.hot{ background: var(--accent-orange); }

@keyframes ghostFade{
  0%{ transform:translate(-50%,-50%) scale(1); opacity:0.7; }
  100%{ transform:translate(-50%,-50%) scale(0.3); opacity:0; }
}

/* Mosaic overlay */
.mosaic-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2500;
  opacity: .35;
  background-image:
    linear-gradient(var(--mosaic-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--mosaic-color) 1px, transparent 1px);
  background-size: var(--mosaic-size) var(--mosaic-size),
                   var(--mosaic-size) var(--mosaic-size);
}

/* Scratched / damaged screen overlay */
.damage-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2600;
  background-image: url("scratches.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.48;
  mix-blend-mode: screen;
}

/* MEDIA_V3 */
.media{
  width:100%;
  height:100%;
  display:flex;
}
.media-inner{
  width:100%;
  height:100%;
  padding:var(--media-pad);
  display:grid;
  grid-template-columns: 56% 44%;
  gap: var(--media-pad);
  background: transparent;
  overflow:hidden;
  align-items: stretch;
}
.media-photo{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--pane-bg);
  border:2px solid var(--frame);
  border-radius:12px;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.5),
    0 0 12px var(--pane-glow);
  overflow:hidden;
  height:100%;
  min-height:0;
}
.media-photo::after{
  content:"";
  position:absolute;
  inset:6px;
  border:1px dashed var(--rule);
  border-radius:10px;
  pointer-events:none;
}
.media-photo img.media-contain{ object-fit:cover; }
.media-photo img.media-cover{ object-fit:cover; }

/* NEW: Idle overlay (skull + awaiting text) */
.media-idlebox{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: var(--idle-gap);
  pointer-events:none;
  text-transform:uppercase;
  letter-spacing:.10em;
  color: var(--accent-orange);

  transform: translateY(var(--idle-raise)); /* raises whole stack */
}
/* Only the REAL media content should fill the frame */
#media-img{
  width:100%;
  height:100%;
  display:block;
  background:#000;
}

/* Idle skull is an icon, not full-frame media */
.media-idleimg{
  width: var(--idle-icon-size);
  height: var(--idle-icon-size);
  object-fit: contain;
  image-rendering: pixelated;
  display:block;
}
.media-idletxt{
  font-size: var(--idle-text-size);
  opacity:.9;
}

/* CAMERA FX */
.camera-noise{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:repeating-linear-gradient(
    0deg,
    rgba(255,0,0,0.12) 0px,
    rgba(255,0,0,0.12) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:screen;
  animation: camNoise 0.45s steps(2,end) infinite;
}
@keyframes camNoise{
  0%{ opacity:.10; }
  50%{ opacity:.22; }
  100%{ opacity:.10; }
}
.camera-distort{
  animation: distortCam .22s infinite alternate;
}
@keyframes distortCam{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(1px); }
  50%{ transform:translateX(-1px); }
  75%{ transform:translateX(0); }
  100%{ transform:translateX(1px); }
}

/* Dossier column */
.media-info{
  display:flex;
  flex-direction:column;
  min-width:0;
  background: var(--pane-bg);
  border:2px solid var(--frame);
  border-radius:12px;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.5),
    0 0 12px var(--pane-glow);
  overflow:hidden;
}
.media-info .info-head{
  padding:.4rem .6rem;
  border-bottom:1px solid var(--rule);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:16px;
  color:var(--accent-orange);
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  white-space:nowrap;
}
.info-head .badge{
  border:1px solid var(--rule);
  padding:.1rem .4rem;
  border-radius:6px;
  font-size:14px;
  color:var(--accent-red);
}
.media-info .info-body{
  flex:1;
  overflow:auto;
  padding:.6rem .75rem;
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
.media-info .info-body::-webkit-scrollbar{ width:10px; height:10px }
.media-info .info-body::-webkit-scrollbar-track{ background:var(--scrollbar-track) }
.media-info .info-body::-webkit-scrollbar-thumb{
  background:var(--scrollbar-thumb);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:content-box;
}
.media-info .info-body::-webkit-scrollbar-thumb:hover{
  background:var(--scrollbar-thumb-hover);
}
.media-info h3{
  margin:.2rem 0 .4rem;
  font-size:20px;
  color:var(--accent-orange);
}
.media-info .kv{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.1rem .6rem;
  margin:.4rem 0 .8rem;
  font-size:16px;
}
.media-info .kv .k{ color:var(--accent-orange) }
.media-info .kv .v{ color:var(--ink) }
.media-info p{
  margin:.35rem 0;
  line-height:1.35;
}

/* Close button */
.media-close{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border:2px solid var(--accent-orange);
  border-radius:6px;
  background:rgba(0,0,0,0.4);
  color:var(--accent-orange);
  font-size:18px;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:10;
}
.media-close:hover{
  background:rgba(255,136,77,0.2);
}

/* Login helper */
body.login{ display:block; background:var(--bg); }

/* Link quality */
.hud-right{ transition: color .25s ease, text-shadow .25s ease; }
.link-stable{ color:var(--accent-orange); }
.link-poor{ color:var(--accent-red); }
.link-lost{ color:var(--muted); }
@keyframes link-pulse{
  0%{transform:scale(1)}
  40%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
.hud-right.link-pulse{ animation: link-pulse .45s ease }

/* Bottom input line */
.panel-terminal #screen{
  display:flex;
  flex-direction:column;
}
.line-terminal{
  border-top:1px solid var(--frame);
  padding:.25rem .5rem;
  display:flex;
  align-items:center;
  gap:10px;
}
.line-terminal .prompt{ white-space:nowrap; }
.line-terminal #input{ flex:1; }

/* ===== SIGN THE SITE styles ===== */
.panel-comments .comments-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  gap:.5rem;
}

/* Toggle button in panel header (top-right) */
.comments-toggle{
  position:absolute;
  top:-.85rem;
  right:1rem;
  padding:0 .6rem;
  height:1.6rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  border-radius:6px;
  border:1px solid var(--rule);
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-orange);
  cursor:pointer;
}

/* two-column layout: left inputs, right message (symmetrical) */
.comments-input{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:.7rem .9rem;
}
.comments-fields{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.comments-message{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.field-label{
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-orange);
}
#comment-name,
#comment-location,
#comment-message{
  border-radius:10px;
  border:2px solid var(--frame);
  background:rgba(0,0,0,.8);
  padding:.55rem .7rem;
  color:var(--accent-orange);
  outline:none;
}
#comment-message{
  resize:vertical;
  min-height:96px;
}
#comment-name:focus,
#comment-location:focus,
#comment-message:focus{
  box-shadow:0 0 8px rgba(255,136,77,.6);
}

/* Sign button (under message, full width of right column) */
.comment-btn{
  margin-top:.7rem;
  padding:.5rem .9rem;
  width:100%;
  display:block;
  text-align:center;
  border-radius:8px;
  border:1px solid var(--accent-orange);
  background:rgba(255,136,77,.1);
  color:var(--accent-orange);
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.comment-btn:hover{
  background:rgba(255,136,77,.2);
}

.comment-status{
  min-height:1.1em;
  font-size:14px;
}

/* Log list: default hidden, shown when panel in "show-log" mode */
.comments-log{
  display:none;
  margin-top:.25rem;
  flex:1;
  overflow:auto;
  border-top:1px dashed var(--rule);
  padding-top:.35rem;
  scrollbar-width:thin;
  scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);
}
.comment-item{
  margin-bottom:.5rem;
  padding-bottom:.4rem;
  border-bottom:1px dotted rgba(255,136,77,.25);
}
.comment-meta{
  font-size:13px;
  color:var(--accent-orange);
  margin-bottom:.1rem;
}
.comment-meta span + span::before{
  content:" // ";
  opacity:.7;
}
.comment-message-text{
  font-size:25px;
  color:var(--ink);
}

/* View modes for panel */
.panel-comments.show-form .comments-input{ display:grid; }
.panel-comments.show-form .comments-log{ display:none; }
.panel-comments.show-log .comments-input{ display:none; }
.panel-comments.show-log .comments-log{
  display:block;
  margin-top:.25rem;
  padding-top:.45rem;
  border-top:1px dashed var(--rule);
}

/* =========================================================
   DOS SKIN (keeps layout, swaps aesthetic)
   ========================================================= */
body.fx-dos{
  /* DOS VGA palette */
  --bg: #000000;
  --ink: #d8d8d8;          /* off-white */
  --muted: #6f87a8;        /* dim blue-grey */
  --frame: #1e4fff;        /* DOS bright blue */
  --accent-orange: #4de6ff;/* DOS cyan */
  --accent-red: #ff4bd8;   /* magenta-ish alerts */
  --rule: rgba(77,230,255,.35);

  --corner: 0px;           /* sharp corners */
}

/* Remove modern glow for DOS look */
body.fx-dos{
  text-shadow:none !important;
}
body.fx-dos .panel,
body.fx-dos .hud,
body.fx-dos .status{
  filter:none !important;
}

/* Subtle CRT + tiny wobble */
body.fx-dos.crt::before{
  opacity:.06;
}
body.fx-dos.crt::after{
  opacity:.55;
}

/* gentler wobble than fx-default */
body.fx-dos #fx-scale{
  will-change: transform;
  transform: translateZ(0);
  animation: dos-wobble 2.6s steps(2,end) infinite;
}
@keyframes dos-wobble{
  0%   { transform: translate3d(0,0,0); }
  20%  { transform: translate3d(1px,0,0); }
  50%  { transform: translate3d(0,1px,0); }
  80%  { transform: translate3d(-1px,0,0); }
  100% { transform: translate3d(0,0,0); }
}

/* make scan drift very light */
body.fx-dos.crt::before{
  animation: dos-scan 1.9s steps(2,end) infinite;
}
@keyframes dos-scan{
  0%{ transform: translateY(0); opacity:.05; }
  50%{ transform: translateY(1px); opacity:.07; }
  100%{ transform: translateY(0); opacity:.05; }
}

/* Reduce overlays (still there, just subtle) */
body.fx-dos .mosaic-overlay{ opacity:.10; }
body.fx-dos .damage-overlay{ opacity:.16; }

/* ANSI-ish panel styling (same size, sharper look) */
body.fx-dos .panel{
  border-radius:0;
  background: #000;
  box-shadow:
    inset 0 0 0 1px rgba(77,230,255,.35),
    inset 0 0 0 2px rgba(0,0,0,.0);
}

/* DOS header bar label (same position) */
body.fx-dos .panel .label{
  background: var(--frame);
  color: #000;
  border: 1px solid rgba(255,255,255,.25);
  border-radius:0;
  letter-spacing:.06em;
  font-size:16px;
  padding:0 .55rem;
}

/* HUD/STATUS borders to match DOS */
body.fx-dos .hud,
body.fx-dos .status{
  color: var(--accent-orange);
  border-bottom: 2px solid var(--frame);
}

/* Prompt + helper colors */
body.fx-dos .prompt{ color: var(--accent-orange); }
body.fx-dos .c-orange{ color: var(--accent-orange); }
body.fx-dos .c-muted{ color: var(--muted); }
body.fx-dos .c-red{ color: var(--accent-red); }

/* Media boxes sharp + DOS */
body.fx-dos .media-photo,
body.fx-dos .media-info{
  border-radius:0;
  background:#000;
  box-shadow: inset 0 0 0 1px rgba(77,230,255,.35);
}
body.fx-dos .media-photo::after{
  inset:6px;
  border-radius:0;
  border:1px solid rgba(77,230,255,.25);
}
body.fx-dos .media-info .info-head{
  background: var(--frame);
  color:#000;
  border-bottom: 1px solid rgba(255,255,255,.25);
}
body.fx-dos .info-head .badge{
  border-radius:0;
  border: 1px solid rgba(0,0,0,.65);
  color:#000;
  background: rgba(77,230,255,.55);
}

/* Close button DOS-ish */
body.fx-dos .media-close{
  border-radius:0;
  border:2px solid var(--frame);
  background:#000;
  color: var(--accent-orange);
}

/* Comments inputs DOS-ish but same layout */
body.fx-dos #comment-name,
body.fx-dos #comment-location,
body.fx-dos #comment-message,
body.fx-dos .pw-input{
  border-radius:0;
  background:#000;
  border:2px solid var(--frame);
  color: var(--ink);
}
body.fx-dos .comment-btn,
body.fx-dos .pw-btn{
  border-radius:0;
  background:#000;
  border:2px solid var(--frame);
  color: var(--accent-orange);
  box-shadow:none;
}
body.fx-dos .comment-btn:hover,
body.fx-dos .pw-btn:hover{
  background: rgba(30,79,255,.15);
}

/* keep LOGIN special purple/green text untouched */
body.fx-dos .mickilla,
body.fx-dos .superf{
  /* NO OVERRIDE: your inline login CSS rules still win */
}

/* Media idle message */
.media-idle{
  margin:.25rem 0;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:16px;
  color: var(--accent-orange);
}

/* Blinking DOS cursor block */
.dos-cursor{
  display:inline-block;
  width: 0.8ch;
  animation: dosBlink 0.9s steps(1,end) infinite;
}
@keyframes dosBlink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}
.media-idleimg{
  width: 140px !important;
  height: 140px !important;
}
/* ===== CRACKED SCREEN OVERLAY (ALWAYS ON) ===== */

/* =====================================================
   CRACKED MONITOR OVERLAY (GLOBAL, ALWAYS ON)
   ===================================================== */

html::after{
  content: "";
  position: fixed;
  inset: 0;

  /* never block clicks */
  pointer-events: none;

  /* must be above ALL UI */
  z-index: 999999;

  /* crack texture */
  background: url("cracked.png") center / cover no-repeat;

  /* blend into the screen */
  mix-blend-mode: screen;   /* try overlay or multiply too */
  opacity: 0.85;

  /* make it feel like glass on a CRT */
  filter:
    contrast(1.05)
    brightness(0.95)
    saturate(0.9);

  /* keep it pixel-sharp if needed */
  image-rendering: pixelated;

  /* subtle vibration so it feels attached to the screen */
  animation: crack-jitter 6s steps(2,end) infinite;
}