/* style.css (v42) */
/* ===== BLOOD RED CRT THEME (with orange highlight) ===== */
:root {
  --bg: #000000;
  --ink: #ff1a1a;
  --frame: #990909;
  --muted: #661111;
  --accent-red: #ff3333;
  --accent-orange: #ff884d;

  --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;

  /* Pixelation intensity (lower = chunkier) */
  --pixel-scale: 0.42;

  /* Mosaic / pixel texture */
  --mosaic-size: 6px;
  --mosaic-color: rgba(255,255,255,.05);

  /* Always-on “low signal v1” look */
  --degrade-blur: .7px;
  --degrade-contrast: .90;
  --degrade-sat: .85;

  /* MEDIA panel */
  --media-pad: 12px;
  --media-fit: 0.92;

  /* BladeRunner-ish pane tints */
  --pane-bg: rgba(255,0,0,.04);
  --pane-glow: rgba(255,136,77,.18);
  --rule: rgba(255,136,77,.25);

  /* Layout metrics */
  --hud-h: 46px;        /* header bar height */
  --status-h: 46px;     /* footer bar height */
  --gap: 16px;          /* grid gap */
  --pad-x: 16px;        /* .dash horizontal padding */
  --pad-t: 16px;        /* .dash top padding */
  --dash-h: calc(100vh - var(--hud-h) - var(--status-h)); /* total dashboard height */
}

/* === Pixel font (self-hosted) === */
@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;              /* lock page scroll; panels scroll internally */
  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;
}

/* Ensure UA-opinionated elements inherit */
pre, code, kbd, samp, input, textarea, button, select, option { font: inherit !important; }

/* CRT */
.crt::before,.crt::after{content:""; position:fixed; inset:0; pointer-events:none}
.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;
}
.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:blur(.2px)
}
@keyframes flicker{0%,100%{opacity:1} 50%{opacity:.96} 60%{opacity:.9}}
body{ animation:flicker 3.5s infinite steps(60) }

/* Pixelation wrappers (visual only) */
#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 + jitter */
.fx-default .hud,.fx-default .dash,.fx-default .status{
  filter: blur(var(--degrade-blur)) contrast(var(--degrade-contrast)) saturate(var(--degrade-sat));
}
@keyframes micro-jitter{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(1px,0,0)}100%{transform:translate3d(0,0,0)}}
.fx-default .panel{ animation: micro-jitter .18s steps(2,end) infinite }

/* ===== 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{ position:fixed; left:0; right:0; bottom:0; height: var(--status-h); border-top:2px solid var(--frame); border-bottom:none }
.status-right .sep{ margin:0 .5ch; opacity:.6 }

/* ===== DASHBOARD: two columns, each a vertical stack ===== */
.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;   /* left / right */
}
.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; }

/* Fixed panel heights by percentage of dashboard height */
.panel-current  { height: calc(var(--dash-h) * 0.10); min-height:0; }
.panel-media    { height: calc(var(--dash-h) * 0.90); min-height:0; }
.panel-parser   { height: calc(var(--dash-h) * 0.50); min-height:0; }
.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:16px;
  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; z-index:2;
}
.panel pre{ margin:0; white-space:pre-wrap }

/* Terminal internals — only the log scrolls */
.panel-terminal #screen{ flex:1; display:flex; min-height:0; }
#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) }
pre.boot{ color:var(--muted) }
.line{ display:flex; align-items:center; gap:10px; margin-top:6px }
.prompt{ color:var(--accent-orange); text-shadow:0 0 4px var(--accent-orange) }
#input{ background:transparent; border:none; outline:none; color:inherit; width:100%; caret-color:currentColor }

/* Helpers */
.mono{ font-family:inherit }
.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 }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Custom red cursor */
.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; }

/* Mosaic overlay (always on) */
.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);
}

/* ===== MEDIA_V3: photo + dossier fill their panel and never overflow ===== */
.media{ width:100%; height:100%; display:flex; }
.media-inner{
  width:100%; height:100%;
  padding:var(--media-pad);
  display:grid;
  grid-template-columns: 56% 44%;   /* photo | dossier */
  gap: var(--media-pad);
  background: transparent;
  overflow:hidden;
  align-items: stretch;   /* ensure both columns fill height */
}
.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%;           /* fill the grid row height */
  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{
  width: 100%;
  height: 100%;
  display:block;
  background:#000; /* makes letterboxing look intentional for contain mode */
}
/* Fit modes toggled by JS */
.media-photo img.media-contain{ object-fit: contain; }
.media-photo img.media-cover{ object-fit: cover; }

/* 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 .rule{ height:1px; background:var(--rule); margin:.6rem 0 }
.media-info p{ margin:.35rem 0; line-height:1.35 }

/* ORANGE overlaid close/reset button */
.media-close{
  position:absolute;
  top:10px;
  right:10px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 2px solid var(--accent-orange);
  background: rgba(0,0,0,.55);
  color: var(--accent-orange);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 0 10px rgba(255,136,77,.5);
}
.media-close:hover{ background: rgba(255,136,77,.18) }

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

/* LINK quality styles */
.hud-right{ transition: color .25s ease, text-shadow .25s ease; }
.link-strong{ color:#ffd199; text-shadow:0 0 6px rgba(255,200,120,.6), 0 0 12px rgba(255,200,120,.35) }
.link-stable{ color:var(--accent-orange); text-shadow:0 0 6px rgba(255,136,77,.55), 0 0 12px rgba(255,136,77,.3) }
.link-poor{ color:var(--accent-red); text-shadow:0 0 6px rgba(255,51,51,.5), 0 0 12px rgba(255,51,51,.25) }
.link-lost{ color:var(--muted); text-shadow:none }
@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 }

/* Grid for media tiles (kept) */
.tiles{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); margin-top:.5rem; }
.media-tile{ position:relative; border:2px solid var(--frame); border-radius:16px; background:#000; overflow:hidden; aspect-ratio:var(--ar,16/9); box-shadow:inset 0 0 0 2px rgba(0,0,0,.45); }
.media-asset{ width:100%; height:100%; object-fit:cover; display:block; }
.tile-caption{
  position:absolute; left:1rem; bottom:.6rem; font-size:16px; letter-spacing:.08em;
  color:var(--accent-orange); text-transform:uppercase; text-shadow:0 0 4px rgba(255,136,77,.35);
  background: rgba(0,0,0,.35); padding:.1rem .4rem; border-radius:6px; border:1px solid rgba(255,136,77,.4);
}

/* Bottom-left input bar (kept) */
.panel-terminal #screen { display:flex; flex-direction:column; }
#logwrap { flex:1; overflow:auto; padding:.25rem; min-height:0; }
.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; }


.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;
  text-shadow: 0 0 6px var(--accent-orange);
  box-shadow: 0 0 8px rgba(255,136,77,0.5);
}

.media-close:hover {
  background: rgba(255,136,77,0.2);
  box-shadow: 0 0 12px rgba(255,136,77,0.9);
}
.cursor-ghost {
  position: fixed;
  width: var(--cursor-size);
  height: var(--cursor-size);
  background: var(--accent-red);
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 2147483646; /* just under main cursor */
  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; }
}