/* Win95 Portfolio – Hans Fründt */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --teal: #008080;
  --bg: #c0c0c0;
  --title-active: #000080;
  --title-inactive: #7b7b7b;
  --title-text: #fff;
  --bl: #fff;   /* border light */
  --bd: #808080; /* border dark */
  --bdd: #404040; /* border darker */
  --black: #000;
  --inset-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff;
  --raise-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #fff;
  --zoom: 1;
}

html, body { width:100%; height:100%; overflow:hidden;
  font-family:'MS Sans Serif',Tahoma,Arial,sans-serif; font-size:11px;
  background:var(--teal); user-select:none; cursor:default; }

/* ── DESKTOP ── */
#desktop { position:fixed; inset:0 0 28px 0; overflow:hidden; }

/* ── ICON ── */
.icon { position:absolute; display:flex; flex-direction:column; align-items:center;
  gap:3px; width:70px; padding:4px; cursor:default; color:#fff; zoom:var(--zoom); }
.icon img { width:32px; height:32px; image-rendering:pixelated; }
.icon span { font-size:11px; text-align:center; line-height:1.2;
  text-shadow:1px 1px 0 #000; word-break:break-word; padding:1px 2px; }
.icon:hover span { background:var(--title-active); }
.icon.sel span  { background:var(--title-active); }

/* ── WINDOW ── */
.win {
  position:absolute; display:flex; flex-direction:column;
  background:var(--bg);
  border:2px solid; border-color:var(--bl) var(--bdd) var(--bdd) var(--bl);
  box-shadow:1px 1px 0 var(--black);
  min-width:200px; min-height:80px;
}
.win.hidden { display:none !important; }
.win.maximized .win-resize { display:none; }

.win-resize {
  position:absolute; right:0; bottom:0;
  width:16px; height:16px; cursor:se-resize; flex-shrink:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='10' y='4'  width='2' height='2' fill='%23fff'/%3E%3Crect x='11' y='5'  width='2' height='2' fill='%23808080'/%3E%3Crect x='6'  y='8'  width='2' height='2' fill='%23fff'/%3E%3Crect x='7'  y='9'  width='2' height='2' fill='%23808080'/%3E%3Crect x='10' y='8'  width='2' height='2' fill='%23fff'/%3E%3Crect x='11' y='9'  width='2' height='2' fill='%23808080'/%3E%3Crect x='2'  y='12' width='2' height='2' fill='%23fff'/%3E%3Crect x='3'  y='13' width='2' height='2' fill='%23808080'/%3E%3Crect x='6'  y='12' width='2' height='2' fill='%23fff'/%3E%3Crect x='7'  y='13' width='2' height='2' fill='%23808080'/%3E%3Crect x='10' y='12' width='2' height='2' fill='%23fff'/%3E%3Crect x='11' y='13' width='2' height='2' fill='%23808080'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

.win-titlebar {
  height:20px; display:flex; align-items:center; gap:3px;
  padding:2px 2px 2px 4px; flex-shrink:0;
  background:var(--title-active); cursor:move;
}
.win.inactive .win-titlebar { background:var(--title-inactive); }
.win-titlebar .t-icon { width:14px; height:14px; flex-shrink:0; }
.win-titlebar .t-title { flex:1; color:#fff; font-size:11px; font-weight:bold;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.win-titlebar .t-btns { display:flex; gap:2px; flex-shrink:0; }

.tbtn {
  width:16px; height:14px; background:var(--bg); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:bold; line-height:1;
  border:1px solid; border-color:var(--bl) var(--bdd) var(--bdd) var(--bl);
}
.tbtn:active { border-color:var(--bdd) var(--bl) var(--bl) var(--bdd); }

.win-menu {
  display:flex; flex-shrink:0; padding:1px 2px;
  border-bottom:1px solid var(--bd);
}
.win-menu span { padding:2px 6px; font-size:11px; cursor:default; }
.win-menu span:hover { background:var(--title-active); color:#fff; }

.win-toolbar {
  display:flex; align-items:center; gap:2px; flex-shrink:0;
  padding:2px 4px; border-bottom:1px solid var(--bd);
}
.tbarbtn {
  height:20px; padding:0 8px; background:var(--bg); cursor:pointer; font-size:10px;
  border:1px solid; border-color:var(--bl) var(--bdd) var(--bdd) var(--bl);
  display:flex; align-items:center; gap:2px;
}
.tbarbtn:hover { background:#d8d8d8; }
.tbarbtn:active { border-color:var(--bdd) var(--bl) var(--bl) var(--bdd); }
.tbarbtn.sort-btn.active { border-color:var(--bdd) var(--bl) var(--bl) var(--bdd); background:#d0d0d0; }
.tbarbtn.exp-filter-btn.active { border-color:var(--bdd) var(--bl) var(--bl) var(--bdd); background:#000080; color:#fff; }
.tbar-label { font-size:10px; padding:0 4px; color:#444; white-space:nowrap; }

.exp-fpanel {
  background:#d4d0c8; min-width:140px; overflow-y:auto;
  border:2px solid; border-color:#fff #808080 #808080 #fff;
  box-shadow:2px 2px 4px rgba(0,0,0,.35);
  font-size:11px; font-family:inherit;
}
.exp-fpanel-item {
  padding:3px 10px; cursor:default; white-space:nowrap; user-select:none;
}
.exp-fpanel-item:first-child { border-bottom:1px solid #808080; color:#666; font-style:italic; }
.exp-fpanel-item:hover  { background:#000080; color:#fff; }
.exp-fpanel-item.active { background:#000080; color:#fff; }

.win-addr {
  display:flex; align-items:center; gap:6px; padding:2px 4px;
  border-bottom:1px solid var(--bd); flex-shrink:0;
}
.win-addr label { font-size:11px; white-space:nowrap; }
.win-addr input { flex:1; height:18px; font-family:inherit; font-size:10px;
  background:#fff; padding:0 4px;
  border:1px solid; border-color:var(--bdd) var(--bl) var(--bl) var(--bdd); outline:none; }

.win-body {
  flex:1; overflow:auto;
  border:2px solid; border-color:var(--bdd) var(--bl) var(--bl) var(--bdd);
  margin:2px; background:#fff;
  zoom: var(--zoom);
}

.win-status {
  height:20px; display:flex; align-items:center; gap:4px;
  padding:0 4px; flex-shrink:0; border-top:1px solid var(--bd);
}
.statpanel {
  border:1px solid; border-color:var(--bdd) var(--bl) var(--bl) var(--bdd);
  padding:1px 6px; font-size:10px; height:16px; display:flex; align-items:center;
}

/* ── EXPLORER ── */
.exp-layout { display:flex; height:100%; }
.exp-side { width:170px; border-right:1px solid var(--bd); overflow-y:auto;
  background:#fff; flex-shrink:0; padding:4px 0; }
.exp-side-hd { font-weight:bold; font-size:10px; padding:2px 6px 3px;
  border-bottom:1px solid var(--bd); }
.exp-side-item { display:flex; align-items:center; gap:5px; padding:2px 6px;
  font-size:10px; cursor:default; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.exp-side-item:hover { background:#d8d8ff; }
.exp-side-item.sel { background:var(--title-active); color:#fff; }

.exp-main { flex:1; overflow:auto; padding:8px; background:#fff; }
.exp-grid { display:flex; flex-wrap:wrap; gap:6px; }
.exp-item { display:flex; flex-direction:column; align-items:center; gap:3px;
  width:86px; padding:5px 3px; cursor:default; }
.exp-item:hover { background:#d8d8ff; }
.exp-item.sel { background:var(--title-active); color:#fff; }
.exp-item img { width:48px; height:36px; object-fit:cover;
  border:1px solid var(--bd); }
.exp-item span { font-size:10px; text-align:center; line-height:1.2;
  max-width:84px; word-break:break-word; }

/* ── PROJECT DETAIL ── */
.proj-detail { padding:12px 14px 14px; height:100%; overflow-y:auto; background:#fff; }
.proj-detail h2 { font-size:14px; font-weight:bold; color:var(--title-active);
  border-bottom:2px solid var(--title-active); padding-bottom:3px;
  margin-bottom:4px; }
.proj-detail .proj-meta { font-size:10px; color:#555; margin-bottom:10px; }

/* Hero (full-width image at top) */
.proj-hero {
  margin:-12px -14px 12px; padding:0;
  background:#1a1a1a;
  border-bottom:2px solid var(--bdd);
  cursor:pointer; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.proj-hero img,
.proj-hero video {
  width:100%; max-height:240px; object-fit:cover;
  display:block; margin:0;
}
.proj-hero-video {
  cursor:default; background:#000;
}
.proj-hero-video video { object-fit:cover; }
.proj-hero:hover img { opacity:.95; }

/* Intro */
.proj-intro p { font-size:11px; line-height:1.6; margin-bottom:7px; color:#222;
  text-wrap:pretty; }
.proj-intro .intro-quote {
  border-left:3px solid var(--title-active); background:#f3f3f8;
  padding:7px 10px 6px 12px; margin:6px 0 10px;
  font-style:italic; font-size:11px; line-height:1.5; color:#222;
}
.proj-intro .intro-quote cite {
  display:block; margin-top:4px;
  font-style:normal; font-size:10px; color:#555;
}

/* Sections */
.proj-section { margin-top:14px; }
.proj-section h3 {
  font-size:11px; font-weight:bold; text-transform:uppercase;
  letter-spacing:.5px; color:#000; padding:2px 4px;
  background:linear-gradient(to bottom, #d0d0d0, #b8b8b8);
  border:1px solid; border-color:var(--bl) var(--bdd) var(--bdd) var(--bl);
  margin-bottom:6px;
}

/* Team / Cast tables */
.proj-table { width:100%; border-collapse:collapse; font-size:11px;
  background:#fff;
  border:1px solid; border-color:var(--bdd) var(--bl) var(--bl) var(--bdd); }
.proj-table th, .proj-table td {
  padding:3px 8px; text-align:left; vertical-align:top;
  border-bottom:1px dotted #c8c8c8;
}
.proj-table th { width:34%; font-weight:normal; color:#555;
  background:#fafafa; }
.proj-table td { color:#000; }
.proj-table tr:last-child th, .proj-table tr:last-child td { border-bottom:none; }

/* Press quotes — Win95 inset panel */
.press-quote {
  background:#fffff0; padding:8px 10px 6px;
  border:1px solid; border-color:var(--bdd) var(--bl) var(--bl) var(--bdd);
  font-size:11px; line-height:1.55; color:#222;
  margin-bottom:8px; text-wrap:pretty;
}
.press-quote cite {
  display:block; margin-top:6px; font-style:normal; font-size:10px;
  color:#555; padding-top:4px; border-top:1px dotted #c0c0c0;
}

/* Photo gallery grouped by photographer */
.proj-photo-group { margin-bottom:10px; }
.proj-photo-credit { font-size:10px; color:#555; margin-bottom:3px;
  padding:1px 3px; background:#f0f0f0;
  border-left:2px solid var(--title-active); }
.proj-photo-thumbs { display:flex; flex-wrap:wrap; gap:4px; }
.proj-photo-thumbs img {
  width:82px; height:58px; object-fit:cover;
  border:1px solid var(--bd); cursor:pointer;
}
.proj-photo-thumbs img:hover { border-color:var(--title-active); }

/* ── ABOUT ── */
.about-body { padding:16px; height:100%; overflow-y:auto; background:#fff; }
.about-body h1 { font-size:17px; color:var(--title-active); margin-bottom:3px; }
.about-body .sub { font-size:11px; color:#666; border-bottom:1px solid var(--bd);
  padding-bottom:8px; margin-bottom:10px; }
.about-body p { font-size:11px; line-height:1.6; margin-bottom:8px; color:#222; }
.about-body a { color:var(--title-active); }

/* ── IMPRESSUM / DATENSCHUTZ ── */
.legal-body { display:flex; flex-direction:column; height:100%; background:#fff; }
.legal-tabs {
  display:flex; gap:2px; padding:6px 6px 0 6px;
  background:var(--bg);
  border-bottom:1px solid var(--bdd);
  flex-shrink:0;
}
.legal-tab {
  font-family:'MS Sans Serif',sans-serif; font-size:11px;
  padding:4px 12px;
  background:var(--bg);
  border:1px solid;
  border-color:var(--bl) var(--bdd) var(--bg) var(--bl);
  border-bottom-color:var(--bg);
  cursor:pointer;
  color:#000;
  position:relative; top:1px;
}
.legal-tab.active {
  background:#fff;
  border-bottom-color:#fff;
  font-weight:bold;
  padding-top:5px;
  padding-bottom:5px;
  top:0;
  z-index:1;
}
.legal-tab:focus { outline:1px dotted #000; outline-offset:-3px; }

.legal-pane {
  flex:1; overflow-y:auto;
  padding:16px;
  background:#fff;
}
.legal-pane h1 {
  font-size:17px; color:var(--title-active);
  margin-bottom:3px;
}
.legal-pane .sub {
  font-size:11px; color:#666;
  border-bottom:1px solid var(--bd);
  padding-bottom:8px; margin-bottom:12px;
}
.legal-pane h2 {
  font-size:13px; color:var(--title-active);
  margin:14px 0 6px 0;
  border-bottom:1px solid var(--bd);
  padding-bottom:2px;
}
.legal-pane h3 {
  font-size:11px; color:#000;
  font-weight:bold;
  margin:10px 0 3px 0;
}
.legal-pane p {
  font-size:11px; line-height:1.55; margin-bottom:7px; color:#222;
  text-align:justify;
}
.legal-pane ul {
  font-size:11px; line-height:1.55; color:#222;
  margin: 0 0 7px 18px;
  padding:0;
}
.legal-pane li { margin-bottom:2px; }
.legal-pane a { color:var(--title-active); }
.legal-addr {
  font-size:11px; color:#222; line-height:1.55;
  background:#f4f4f4;
  border:1px solid var(--bd);
  padding:8px 10px;
  margin: 6px 0 10px 0;
  font-family:'MS Sans Serif',sans-serif;
}
.legal-src {
  font-size:10px !important;
  color:#888 !important;
  font-style:italic;
  margin-top:14px !important;
  text-align:left !important;
}

/* ── MARKDOWN PAGE (About, Impressum, Datenschutz) ── */
.md-page .md-sub {
  font-size:11px; color:#666;
  border-bottom:1px solid var(--bd);
  padding-bottom:8px; margin-bottom:12px;
}
.md-page .md-footnote {
  font-size:10px !important;
  color:#888 !important;
  font-style:italic;
  margin-top:14px !important;
  text-align:left !important;
}
/* Style the markdown-rendered structure inside the About window
   (so it inherits the legal-pane-style section headings & address box) */
.about-body.md-page h2 {
  font-size:13px; color:var(--title-active);
  margin:14px 0 6px 0;
  border-bottom:1px solid var(--bd);
  padding-bottom:2px;
}
.about-body.md-page h3 {
  font-size:11px; color:#000; font-weight:bold;
  margin:10px 0 3px 0;
}
.about-body.md-page ul {
  font-size:11px; line-height:1.55; color:#222;
  margin: 0 0 7px 18px; padding:0;
}
.about-body.md-page li { margin-bottom:2px; }
.about-body.md-page .legal-addr {
  font-size:11px; color:#222; line-height:1.55;
  background:#f4f4f4;
  border:1px solid var(--bd);
  padding:8px 10px;
  margin: 6px 0 10px 0;
  font-family:'MS Sans Serif',sans-serif;
}

/* ── SHOWREEL ── */
.reel-body { padding:8px; height:100%; background:#fff;
  display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.reel-body h2 { font-size:13px; font-weight:bold; color:var(--title-active);
  border-bottom:2px solid var(--title-active); padding-bottom:3px; }
.reel-body p  { font-size:11px; line-height:1.6; color:#333; }
.reel-hd { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.reel-hd h2 { flex:1; margin:0; border-bottom:2px solid var(--title-active); padding-bottom:3px; }
.reel-kind-tag {
  font-size:10px; font-family:'Courier New',monospace;
  color:#fff; background:var(--title-active);
  padding:2px 6px; margin-bottom:3px;
  letter-spacing:.5px;
}
.reel-screen {
  background:#000; padding:4px;
  border:2px solid; border-color:#404040 #fff #fff #404040;
  flex:1; min-height:0; display:flex;
}
.reel-frame { flex:1; min-height:180px; background:#000; }
.reel-frame iframe { width:100%; height:100%; }
.reel-controls { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:2px; }
.reel-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  background:var(--bg); font-family:inherit; font-size:11px; cursor:pointer;
  border:2px solid; border-color:var(--bl) var(--bdd) var(--bdd) var(--bl);
  text-decoration:none; color:#000; }
.reel-btn:hover { background:#d0d0ff; }
.reel-btn:active { border-color:var(--bdd) var(--bl) var(--bl) var(--bdd); }

/* ── TASKBAR ── */
#taskbar { position:fixed; bottom:0; left:0; right:0; height:28px;
  background:var(--bg); z-index:9000;
  border-top:2px solid; border-color:var(--bl) var(--bdd) var(--bdd) var(--bl);
  display:flex; align-items:center; padding:2px; gap:2px; }
#start-btn { height:22px; padding:0 8px; font-weight:bold; font-size:11px;
  background:var(--bg); cursor:pointer; display:flex; align-items:center; gap:4px;
  border:2px solid; border-color:var(--bl) var(--bdd) var(--bdd) var(--bl);
  font-family:inherit; }
#start-btn:active, #start-btn.dn { border-color:var(--bdd) var(--bl) var(--bl) var(--bdd); }
.tbar-sep { width:4px; height:22px;
  border-left:1px solid var(--bdd); border-right:1px solid var(--bl); flex-shrink:0; }
#tbar-tasks { flex:1; display:flex; gap:2px; overflow:hidden; min-width:0; }
.ttask { height:22px; padding:0 8px; background:var(--bg); font-family:inherit;
  font-size:10px; cursor:pointer; display:flex; align-items:center; gap:4px;
  max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border:2px solid; border-color:var(--bl) var(--bdd) var(--bdd) var(--bl); }
.ttask.active { border-color:var(--bdd) var(--bl) var(--bl) var(--bdd); background:#d0d0d0; }
#tbar-zoom { display:flex; gap:2px; align-items:center; flex-shrink:0; }
.tbtn-zoom {
  height:22px; width:24px; background:var(--bg); font-family:inherit;
  font-size:10px; font-weight:bold; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:2px solid; border-color:var(--bl) var(--bdd) var(--bdd) var(--bl);
}
.tbtn-zoom:hover { background:#d8d8d8; }
.tbtn-zoom:active { border-color:var(--bdd) var(--bl) var(--bl) var(--bdd); }
.tbtn-zoom:disabled { opacity:.45; cursor:default; pointer-events:none; }
#tbar-right { display:flex; align-items:center; gap:3px; flex-shrink:0; }
#search-inp { height:18px; width:96px; border:2px solid;
  border-color:var(--bdd) var(--bl) var(--bl) var(--bdd);
  padding:0 4px; font-family:inherit; font-size:10px; background:#fff; outline:none; }
#clock { border:2px solid; border-color:var(--bdd) var(--bl) var(--bl) var(--bdd);
  padding:2px 6px; font-size:10px; min-width:50px; text-align:center; }

/* ── START MENU ── */
#smenu { position:fixed; bottom:28px; left:0; width:200px;
  background:var(--bg); display:none; flex-direction:row; z-index:9100;
  border:2px solid; border-color:var(--bl) var(--bdd) var(--bdd) var(--bl);
  box-shadow:2px 2px 0 var(--black); }
#smenu.vis { display:flex; }
.smenu-side { width:22px; background:var(--title-active);
  writing-mode:vertical-rl; transform:rotate(180deg);
  display:flex; align-items:center; justify-content:flex-end;
  padding:8px 3px; color:#fff; font-size:13px; font-weight:bold;
  letter-spacing:2px; flex-shrink:0; }
.smenu-side small { font-size:9px; opacity:.5; }
.smenu-items { flex:1; display:flex; flex-direction:column; }
.smenu-item { display:flex; align-items:center; gap:8px; padding:5px 8px;
  cursor:default; font-size:11px; }
.smenu-item:hover { background:var(--title-active); color:#fff; }
.smenu-sep { height:1px; background:var(--bdd); margin:2px 4px; }

/* ── LIGHTBOX (Win95 Image Viewer window) ── */
#lb-backdrop { display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.55); z-index:98999; }
#lb-backdrop.vis { display:block; }

#lb { display:none; z-index:99000; }
#lb.vis { display:flex; }
#lb .win-body {
  background:#2a2a2a;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:6px;
  position:relative;
}
#lb-img {
  max-width:100%; max-height:100%;
  display:block;
  background:
    conic-gradient(#bbb 25%, #888 0 50%, #bbb 0 75%, #888 0) 0 0/14px 14px;
  border:1px solid #000;
}
/* Credits watermark — small Win95 raised panel in the bottom-right corner
   of the image area, slightly transparent so it doesn't fight with the
   photo but stays legible. */
.lb-watermark {
  position:absolute; right:14px; bottom:14px;
  pointer-events:none;
  font-family:'MS Sans Serif',Tahoma,Arial,sans-serif;
  font-size:10px; line-height:1;
  color:#000;
  background:var(--bg);
  padding:4px 8px 4px 7px;
  border:2px solid;
  border-color:var(--bl) var(--bdd) var(--bdd) var(--bl);
  box-shadow:1px 1px 0 #000;
  opacity:.88;
  max-width:60%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lb-watermark:empty { display:none; }
#lb .win-toolbar { gap:3px; }
#lb #lb-counter { font-family:'Courier New',monospace; color:#000;
  padding:0 4px; font-size:10px; }
#lb .statpanel#lb-dim { min-width:90px; justify-content:flex-end;
  font-family:'Courier New',monospace; }

/* ── SPACE INVADERS — CONSOLE LIGHTBOX ── */
#console-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  z-index:99500;
  align-items:center; justify-content:center;
  padding:24px;
  animation:cbFade .18s ease-out;
}
#console-backdrop.vis { display:flex; }
@keyframes cbFade { from{opacity:0} to{opacity:1} }

#console-frame {
  position:relative;
  max-width:min(95vw, calc(92vh * 1440 / 1080));
  width:100%;
  aspect-ratio: 1440 / 1080;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.7));
}
#console-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
#console-screen {
  position:absolute;
  left:14.44%; top:12.31%;
  width:28.13%; height:27.22%;
  background:#000;
  overflow:hidden;
  container-type: inline-size;
  box-shadow: inset 0 0 18px rgba(0,0,0,.6),
              inset 0 0 2px rgba(120,255,160,.08);
}
#console-screen::after {
  /* subtle CRT scanlines */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.18) 3px);
  mix-blend-mode:multiply;
}
#inv-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  image-rendering:pixelated;
}
.inv-hud {
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between;
  padding: 2cqw 3cqw 0;
  color:#0f0; font-family:'Courier New',monospace;
  font-size: 3.2cqw;
  text-shadow: 0 0 4px rgba(0,255,80,.5);
  z-index:2;
  pointer-events:none;
}
.inv-hud .inv-title { color:#f55; }
.inv-hint {
  position:absolute; bottom: 2cqw; left:0; right:0;
  text-align:center;
  color:#5a5; font-size: 2.6cqw;
  font-family:'Courier New',monospace;
  z-index:2;
  pointer-events:none;
}

#console-close { display:none; }

#console-caption {
  position:absolute;
  left:0; right:0; bottom:-28px;
  text-align:center;
  color:#bbb;
  font-family:'MS Sans Serif',sans-serif;
  font-size:11px;
  letter-spacing:.5px;
}

/* ── TWEAKS PANEL ── */
#tweaks-panel {
  position: fixed;
  bottom: 40px;
  right: 10px;
  width: 220px;
  background: var(--bg);
  border: 2px solid;
  border-color: var(--bl) var(--bdd) var(--bdd) var(--bl);
  box-shadow: 2px 2px 0 var(--black);
  z-index: 9500;
  display: none;
  flex-direction: column;
  font-size: 11px;
}
#tweaks-panel.vis { display: flex; }
.tweaks-titlebar {
  background: var(--title-active);
  color: #fff;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  height: 20px;
  flex-shrink: 0;
}
.tweaks-titlebar span { font-weight: bold; font-size: 11px; }
.tweaks-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.tweak-row { display: flex; flex-direction: column; gap: 2px; }
.tweak-row label { font-size: 10px; color: #444; }
.tweak-row input[type=color] {
  width: 100%; height: 22px;
  border: 2px solid; border-color: var(--bdd) var(--bl) var(--bl) var(--bdd);
  cursor: pointer; padding: 1px;
}
.tweak-row input[type=range] {
  width: 100%; accent-color: var(--title-active);
}
.tweak-row select {
  width: 100%; height: 22px; font-family: inherit; font-size: 11px;
  border: 2px solid; border-color: var(--bdd) var(--bl) var(--bl) var(--bdd);
  background: #fff; outline: none;
}
.tweak-sep { height: 1px; background: var(--bd); margin: 2px 0; }
.tweak-reset {
  height: 20px; font-family: inherit; font-size: 10px; cursor: pointer;
  background: var(--bg); border: 2px solid;
  border-color: var(--bl) var(--bdd) var(--bdd) var(--bl);
}
.tweak-reset:active { border-color: var(--bdd) var(--bl) var(--bl) var(--bdd); }

.dlg-body { padding:14px; background:#fff; height:100%; display:flex;
  gap:12px; align-items:flex-start; }
.dlg-body p { font-size:11px; line-height:1.6; }
.win-okbtn { height:22px; padding:0 14px; background:var(--bg); font-family:inherit;
  font-size:11px; cursor:pointer; margin-top:10px;
  border:2px solid; border-color:var(--bl) var(--bdd) var(--bdd) var(--bl); }
.win-okbtn:active { border-color:var(--bdd) var(--bl) var(--bl) var(--bdd); }
.win-okbtn:disabled { opacity:.5; cursor:default; }

/* ── CONTACT FORM ── */
.contact-body { padding:14px; background:#fff; height:100%; box-sizing:border-box; overflow-y:auto; }
.contact-body form { display:flex; flex-direction:column; gap:4px; height:100%; }
.contact-body label { font-size:11px; font-weight:bold; }
.contact-body input, .contact-body textarea {
  font-family:inherit; font-size:11px; padding:2px 4px;
  border:2px solid; border-color:var(--bdd) var(--bl) var(--bl) var(--bdd);
  background:#fff; width:100%; box-sizing:border-box; }
.contact-body textarea { resize:vertical; flex:1; }
.contact-footer { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
#cf-status { font-size:11px; color:#444; }
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ── EXPLORER FILTER TABS ── */
.exp-filters {
  display:flex; gap:2px; padding:3px 4px;
  border-bottom:1px solid var(--bd); flex-shrink:0; background:var(--bg);
}
.exp-filter-tab {
  height:20px; padding:0 8px; background:var(--bg); font-family:inherit;
  font-size:10px; cursor:pointer;
  border:2px solid; border-color:var(--bl) var(--bdd) var(--bdd) var(--bl);
}
.exp-filter-tab:active,
.exp-filter-tab.active {
  border-color:var(--bdd) var(--bl) var(--bl) var(--bdd);
  background:#d0d0d0;
}

/* ── WIN95 SCROLLBARS ── */
::-webkit-scrollbar { width:16px; height:16px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb {
  background:var(--bg);
  border-top:2px solid var(--bl); border-left:2px solid var(--bl);
  border-right:2px solid var(--bdd); border-bottom:2px solid var(--bdd);
}
::-webkit-scrollbar-thumb:hover { background:#d0d0d0; }
::-webkit-scrollbar-button {
  background:var(--bg);
  border-top:2px solid var(--bl); border-left:2px solid var(--bl);
  border-right:2px solid var(--bdd); border-bottom:2px solid var(--bdd);
  display:block; width:16px; height:16px;
  background-repeat:no-repeat; background-position:center;
}
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement { display:none; }
::-webkit-scrollbar-button:single-button:vertical:decrement   { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,4 13,12 3,12' fill='%23000'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:vertical:increment   { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,12 13,4 3,4' fill='%23000'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='4,8 12,3 12,13' fill='%23000'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:horizontal:increment { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='12,8 4,3 4,13' fill='%23000'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-corner { background:var(--bg); }