/* =========================================================
   FUNNY BUSINESS - 2007 3DCG site edition
   Dark charcoal + glossy red, forum-style title bars, beveled
   boxes, your logo image. No animations, filters or big blurs,
   so it stays light on the browser.
   ========================================================= */

:root {
  /* To go back to the old font: 'VCR OSD Mono', monospace */
  --font: 'Trebuchet MS', Verdana, Tahoma, sans-serif;

  --bg: #0c0c0c;
  --text: #ff3838;
  --accent: #ff0000;
  --link: #ff5a5a;
  --line: #6a0000;

  /* The classic "glass" gradient: bright top half, darker bottom half */
  --gloss: linear-gradient(to bottom, #ff6a6a 0%, #e01818 49%, #b00000 50%, #d21818 100%);
  --gloss-hover: linear-gradient(to bottom, #ff8a8a 0%, #f03030 49%, #c40000 50%, #e02828 100%);
  --bar: linear-gradient(to bottom, #700c0c 0%, #3a0000 100%);
  --panel: linear-gradient(to bottom, #1e1e1e 0%, #121212 100%);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 3px rgba(0, 0, 0, 0.8);
  --shine: inset 0 1px 0 rgba(255, 255, 255, 0.45);

  /* Skeuomorphic textures: an old, riveted metal machine, worn but cared for */
  --rivets:
    radial-gradient(circle at 9px 9px, #050505 0 1px, #6a6a6a 1px 2.6px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 9px) 9px, #050505 0 1px, #6a6a6a 1px 2.6px, transparent 3.6px),
    radial-gradient(circle at 9px calc(100% - 9px), #050505 0 1px, #6a6a6a 1px 2.6px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #050505 0 1px, #6a6a6a 1px 2.6px, transparent 3.6px);
  --rust:
    radial-gradient(ellipse 46px 30px at 4% 96%, rgba(150, 80, 20, 0.16), transparent 70%),
    radial-gradient(ellipse 30px 20px at 97% 6%, rgba(150, 80, 20, 0.12), transparent 70%);
  --scratches: repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 38px);
  --brass: linear-gradient(to bottom, #f2d488 0%, #b9861f 35%, #7a5510 55%, #ceab55 75%, #6a480d 100%);
  --brass-dark: linear-gradient(to bottom, #8a6a26 0%, #4a3308 60%, #2a1c04 100%);
  /* A worn metal frame: dark outer rim, riveted panel, inset bevel */
  --machine-frame: 0 0 0 1px #000, 0 0 0 3px #33261c, var(--bevel);

  /* Side columns: width of each, and the width left over for the main panel */
  --side: 200px;
  --main-w: calc(100% - 40px);
}

@media (min-width: 1200px) {
  :root { --main-w: min(1200px, calc(100vw - 2 * (var(--side) + 28px))); }
}

@media (min-width: 1700px) {
  :root { --side: 250px; }
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  background: transparent;
  color: var(--text);
  overflow: hidden;
}

/* Faint 3D-viewport grid behind everything (delete this rule for plain dark) */
html {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%),
    linear-gradient(rgba(255, 40, 40, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 40, 40, 0.06) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

.spacer { margin: 30px 0; }

a { color: var(--link); text-decoration: none; }
a:visited { color: var(--link); }
a:hover { text-decoration: underline; }

/* Text selection: a soft frosted-glass highlight. The text keeps its own color. */
::selection {
  background: rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

/* ---------- NAV: dark glossy bar with a red edge ---------- */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  background-color: #1c1c1c;
  background-image:
    radial-gradient(circle at 12px 50%, #050505 0 1.5px, #7a7a7a 1.5px 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 12px) 50%, #050505 0 1.5px, #7a7a7a 1.5px 3px, transparent 4px),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px),
    linear-gradient(to bottom, #3c3c3c 0%, #222 49%, #0e0e0e 50%, #1c1c1c 100%);
  border-bottom: 3px solid #b00000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 10px rgba(0, 0, 0, 0.6);
  z-index: 1000;
}

#sidebar {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

#sidebar-logo {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

#sidebar a,
#sidebar a:visited {
  color: #eee;
  font-weight: bold;
  font-size: clamp(13px, 1.4vw, 15px);
  text-shadow: 0 1px 0 #000;
}

#sidebar .sidebar-link a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-transform: capitalize;
}

#sidebar .sidebar-link a:hover {
  text-decoration: none;
  color: #fff;
  background: var(--gloss);
  border-color: #500000;
  box-shadow: var(--shine);
}

#sidebar-login {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 1001;
}

#sidebar-login input { width: 120px; padding: 5px 8px; }
#sidebar-login button { padding: 5px 14px; }

/* ---------- HEADER: your logo image on a glowing backdrop ---------- */
header {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: 260px;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0a0a0a;
  background-image:
    var(--rivets),
    var(--rust),
    linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.035) 46%, transparent 52%),
    radial-gradient(ellipse at 50% 45%, rgba(130, 18, 18, 0.8) 0%, rgba(45, 6, 6, 0.6) 45%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(rgba(255, 40, 40, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 40, 40, 0.05) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 32px 32px, 32px 32px;
  border-bottom: 3px solid #700000;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.55);
  z-index: 900;
}

header img {
  max-height: 300px;
  width: auto;
  user-select: none;
  -webkit-user-select: none;
}

/* Smaller logo used on tool pages */
.small-header {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

.header-img-small {
  max-height: 120px;
  width: auto;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- MAIN: beveled panel ---------- */
main {
  position: fixed;
  top: 318px;
  left: 0;
  right: 0;
  bottom: 25px;
  width: var(--main-w);
  margin: 0 auto;
  padding: 24px 30px 25px;
  background-color: #171412;
  background-image: var(--rivets), var(--rust), var(--scratches), var(--panel);
  border: 1px solid #1a1a1a;
  border-radius: 8px;
  box-shadow: var(--machine-frame);
  overflow-y: auto;
}

/* Page title: a glossy red bar */
main h1 {
  position: relative;
  margin: 0 0 16px;
  padding: 8px 22px;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  background-image:
    radial-gradient(circle at 10px 50%, #4a1010 0 1.5px, #ffb0b0 1.5px 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 10px) 50%, #4a1010 0 1.5px, #ffb0b0 1.5px 3px, transparent 4px),
    var(--gloss);
  border: 1px solid #500000;
  border-radius: 5px;
  box-shadow: var(--shine), 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Content boxes share one look */
main section,
.card,
.tool-item,
.ui-panel,
.file-card {
  position: relative;
  background-color: #171412;
  background-image: var(--rivets), var(--rust), var(--panel);
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  box-shadow: var(--machine-frame);
}

main section {
  margin-bottom: 20px;
  padding: 16px 20px;
}

main section p:first-child { margin-top: 0; }
main section p:last-child { margin-bottom: 0; }

/* Section titles: dark forum-style bar that runs to the box edges */
main section > h2 {
  margin: -16px -20px 14px;
  padding: 7px 14px;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 1px 0 #000;
  background: var(--bar);
  border-bottom: 1px solid #000;
  border-radius: 5px 5px 0 0;
}

main section.bare {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

main section.bare > h2 {
  margin: 0 0 12px;
  border: 1px solid #500000;
  border-radius: 5px;
}

/* ---------- BUTTONS ---------- */
button,
a.link,
a.link:visited,
a.tool-link,
a.tool-link:visited,
.link {
  display: inline-block;
  padding: 8px 16px;
  color: #fff;
  background: var(--gloss);
  border: 1px solid #500000;
  border-radius: 5px;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  cursor: pointer;
  box-shadow: var(--shine), 0 1px 2px rgba(0, 0, 0, 0.7);
}

button:hover,
.link:hover,
a.tool-link:hover {
  background: var(--gloss-hover);
  text-decoration: none;
}

button:active,
.link:active,
a.tool-link:active {
  background: linear-gradient(to bottom, #b00000 0%, #d21818 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

:focus-visible { outline: 2px solid #ff9a9a; outline-offset: 1px; }

/* ---------- FORM FIELDS ---------- */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
  padding: 6px 8px;
  color: #ffb0b0;
  background: #060606;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: inset 1px 1px 3px #000;
  font-family: inherit;
  font-size: 13px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #ff4040;
  box-shadow: inset 1px 1px 3px #000, 0 0 4px rgba(255, 64, 64, 0.8);
}

input::placeholder { color: rgba(255, 120, 120, 0.5); }

/* Hide number spinners (wheel still works) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ---------- SCROLLBAR ---------- */
* { scrollbar-width: thin; scrollbar-color: #b00000 #111; }
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: #111; border-left: 1px solid #300; }
::-webkit-scrollbar-thumb {
  background: var(--brass);
  border: 1px solid #2a1c04;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* =========================================================
   HOME PAGE
   ========================================================= */
.tag-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }

.tag {
  padding: 2px 12px;
  color: #fff;
  background: var(--bar);
  border: 1px solid #500000;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
}

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }

.card { display: block; padding: 16px 18px 18px; }
.card:hover { border-color: #ff4040; text-decoration: none; }
.card h3 { margin: 0 0 6px; font-size: 18px; color: #ff5050; }
.card p { margin: 0 0 14px; }

.tool-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.tool-index a {
  display: block;
  height: 100%;
  padding: 8px 12px;
  background: #0e0e0e;
  border: 1px solid #3a0000;
  border-radius: 4px;
}

.tool-index a:hover { background: #2a0808; border-color: var(--accent); text-decoration: none; }
.tool-index strong { display: block; }
.tool-index span { font-size: 12px; }

.group-label {
  margin: 16px 0 8px;
  padding-bottom: 3px;
  font-weight: bold;
  border-bottom: 1px dotted var(--line);
}

/* =========================================================
   TOOLS LIST PAGE
   ========================================================= */
.tool-list { line-height: 1.5; }
.tool-item { margin-bottom: 16px; padding: 14px 18px; }
.tool-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.tool-name { margin: 0; font-size: 17px; color: #ff5050; }
.tool-desc { margin: 4px 0 12px; }
.tool-actions { display: flex; gap: 8px; align-items: center; }
a.tool-link, a.tool-link:visited { padding: 3px 14px; font-size: 12px; }
.tool-separator { display: none; }

/* =========================================================
   TOOL PAGES (vmt.html, pov.html, ...) - shared by every tool.
   Each tool's .js adds class "tool-page" to <html> and builds its
   interface from: .ui-container .ui-panel .ui-row .ui-select
   .ui-actions .ui-button .ui-textarea/.ui-output .ui-columns
   .ui-info .ui-inline .ui-input-short .ui-input-medium
   ========================================================= */
html.tool-page { height: auto; overflow: auto; }
.tool-page body { height: auto; overflow: auto; padding-top: 150px; }

.tool-page .small-header { position: absolute; top: 60px; z-index: 500; }

.ui-container { max-width: min(1200px, var(--main-w)); margin: 0 auto; padding: 20px 20px 50px; }

.ui-panel { margin-bottom: 20px; padding: 20px; }

.ui-panel > h2 {
  margin: -20px -20px 16px;
  padding: 7px 14px;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 1px 0 #000;
  background: var(--bar);
  border-bottom: 1px solid #000;
  border-radius: 5px 5px 0 0;
}

.ui-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; padding: 8px 10px; border-radius: 4px; }
.ui-row:hover { background: rgba(255, 0, 0, 0.07); }
.ui-panel label { font-weight: bold; cursor: pointer; }
.ui-row label { min-width: 200px; }

.ui-row input[type="text"],
.ui-row input[type="number"],
.ui-row input[type="search"],
.ui-row select { flex: 1; }

.ui-select { width: 100%; padding: 8px; font-size: 14px; }
.ui-panel select option { background: #000; color: #ffb0b0; }

.ui-panel input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  background: #060606;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: inset 1px 1px 3px #000;
  cursor: pointer;
}

.ui-panel input[type="checkbox"]:checked { background: var(--gloss); border-color: #500000; box-shadow: var(--shine); }

.ui-panel input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ui-panel button, .ui-button { margin-right: 8px; padding: 9px 20px; }
.ui-actions { margin-top: 14px; }

.ui-panel .ui-textarea,
.ui-panel .ui-output { width: 100%; min-height: 400px; padding: 12px; font-size: 12px; resize: vertical; }

.ui-columns { display: flex; flex-wrap: wrap; gap: 20px; }
.ui-columns > .ui-panel { flex: 1 1 500px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; }
.ui-columns > .ui-panel .ui-textarea,
.ui-columns > .ui-panel .ui-output { flex: 1 1 auto; }
.ui-columns > .ui-panel button { margin-right: 0; }

.ui-info { padding: 8px 10px; background: #0a0a0a; border: 1px dotted var(--line); border-radius: 3px; font-size: 12px; }

.ui-row.ui-inline label { min-width: 0; }
.ui-row.ui-inline input { flex: none; }
.ui-input-short { width: 60px; }
.ui-input-medium { width: 120px; }
.ui-panel button.ui-arrow { margin: 0; padding: 2px 6px; font-size: 10px; line-height: 10px; }

@media (max-width: 640px) {
  .ui-row { flex-wrap: wrap; }
  .ui-row label { min-width: 0; flex: 1; }
}

/* =========================================================
   FILES PAGE (files.html + viewer.js + model-viewer.js + files-data.js)
   ========================================================= */

/* Jump bar */
.file-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }

.file-nav a,
.file-nav a:visited {
  padding: 3px 12px;
  color: #fff;
  background: var(--bar);
  border: 1px solid #500000;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
}

.file-nav a:hover { background: var(--gloss); text-decoration: none; }

/* Sections: collapsible boxes with a title bar */
.file-section {
  position: relative;
  margin-bottom: 18px;
  background-color: #171412;
  background-image: var(--rivets), var(--rust), var(--panel);
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  box-shadow: var(--machine-frame);
}

.file-section-title {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-shadow: 0 1px 0 #000;
  background: var(--bar);
  border-radius: 5px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.file-section-title::-webkit-details-marker { display: none; }
.file-section-title::before { content: "\25B6"; margin-right: 10px; font-size: 10px; }
.file-section[open] > .file-section-title { border-bottom: 1px solid #000; border-radius: 5px 5px 0 0; }
.file-section[open] > .file-section-title::before { content: "\25BC"; }
.file-section-title > span:first-of-type { flex: 1; }
.file-count { font-size: 11px; font-weight: normal; color: #ffb0b0; }
.file-section-desc { margin: 0; padding: 10px 14px 0; font-size: 12px; opacity: 0.85; }

/* File rows */
.file-list { margin: 0; padding: 8px; list-style: none; }
.file-row + .file-row { margin-top: 2px; }

.file-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 4px; }
.file-head:hover { background: rgba(255, 0, 0, 0.08); }
.file-row.is-previewable > .file-head { cursor: pointer; }
.file-row.open > .file-head { background: rgba(255, 0, 0, 0.12); }

.file-badge {
  flex: none;
  min-width: 48px;
  padding: 2px 6px;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  background: var(--bar);
  border: 1px solid #500000;
  border-radius: 3px;
}

.file-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-title strong { overflow: hidden; color: #ff6a6a; text-overflow: ellipsis; white-space: nowrap; }
.file-desc { overflow: hidden; font-size: 12px; opacity: 0.8; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { flex: none; font-size: 12px; white-space: nowrap; }
.file-actions { flex: none; display: flex; gap: 6px; }

.file-actions button,
.file-actions a.link,
.file-actions a.link:visited { margin: 0; padding: 4px 12px; font-size: 12px; }

@media (max-width: 700px) {
  .file-head { flex-wrap: wrap; }
  .file-meta { order: 3; width: 100%; }
}

/* Preview panel that opens under a row */
.file-preview { margin: 4px 0 10px; padding: 10px; background: #0b0b0b; border: 1px solid #3a0000; border-radius: 4px; }

.file-stage {
  height: 380px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: inset 1px 1px 4px #000;
}

.file-stage.checker { background: repeating-conic-gradient(#1c1c1c 0% 25%, #101010 0% 50%) 50% / 20px 20px; }
.file-stage img { display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }

.file-text {
  display: block;
  width: 100%;
  height: 100%;
  padding: 12px;
  background: #000;
  border: none;
  border-radius: 0;
  box-shadow: none;
  resize: none;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 12px;
}

.file-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 12px; }
.file-tools { display: flex; gap: 6px; margin-top: 8px; }
.file-tools button { padding: 4px 14px; font-size: 12px; }

.file-message { padding: 40px 20px; text-align: center; border: 1px dashed var(--line); border-radius: 6px; }

/* 3D viewer (one shared instance, moves between rows) */
.v3d {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 35%, #3a3a3a 0%, #151515 60%, #080808 100%);
}

.v3d canvas { display: block; width: 100%; height: 100%; outline: none; cursor: grab; touch-action: none; }
.v3d canvas:active { cursor: grabbing; }

.v3d-toolbar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid #3a0000;
  border-radius: 5px;
}

.vbtn {
  margin: 0;
  padding: 3px 10px;
  font-size: 11px;
  background: linear-gradient(to bottom, #4a4a4a 0%, #262626 49%, #141414 50%, #222 100%);
  border-color: #000;
}

.vbtn:hover { background: linear-gradient(to bottom, #666 0%, #363636 49%, #202020 50%, #2e2e2e 100%); }
.vbtn.active, .vbtn.active:hover { background: var(--gloss); border-color: #500000; }

.v3d-anim { display: flex; gap: 6px; margin-left: auto; }
.v3d-anim select { padding: 2px 6px; font-size: 11px; }

.v3d-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.v3d-status.error { color: #ff7070; font-weight: bold; }
.v3d-bar { width: 60%; max-width: 240px; height: 6px; overflow: hidden; background: #222; border: 1px solid #500000; border-radius: 3px; }
.v3d-bar i { display: block; width: 0; height: 100%; background: var(--gloss); }

/* Click-to-enlarge image overlay */
.image-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  z-index: 9999;
  cursor: zoom-out;
}

.image-overlay.open { display: flex; }
.image-overlay img { max-width: 80%; max-height: 80%; object-fit: contain; border: 2px solid var(--line); border-radius: 4px; }

/* =========================================================
   NAV EXTRAS (sidebar.js): dropdown menus, active tab,
   Inspire panel, login message
   ========================================================= */

#sidebar { align-self: stretch; }

.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
}

/* The tab for the page you're on */
#sidebar .sidebar-link > a.active {
  color: #fff;
  background: var(--gloss);
  border-color: #500000;
  box-shadow: var(--shine);
}

/* Little arrow that opens a dropdown (touch and keyboard) */
.menu-toggle {
  margin-left: -6px;
  padding: 4px 6px;
  color: #bbb;
  font-size: 10px;
  background: none;
  border: none;
  box-shadow: none;
  text-shadow: none;
}

.menu-toggle:hover,
.menu-toggle:active { color: #fff; background: none; box-shadow: none; }

.sidebar-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  padding: 4px 0;
  background: #151515;
  border: 1px solid var(--line);
  border-top: 3px solid #b00000;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
  z-index: 1002;
}

.has-menu:hover > .sidebar-menu,
.has-menu.open > .sidebar-menu { display: block; }

#sidebar .sidebar-menu a {
  display: block;
  padding: 7px 16px;
  border: none;
  border-radius: 0;
  font-size: 13px;
  font-weight: normal;
  text-transform: none;
  white-space: nowrap;
}

#sidebar .sidebar-menu a:hover {
  background: #3a0808;
  box-shadow: none;
  color: #fff;
}

.inspire-btn { padding: 5px 12px; font-size: 13px; }

/* Inspire panel */
.inspire-panel {
  position: fixed;
  top: 70px;
  right: 12px;
  width: min(380px, calc(100vw - 24px));
  padding-bottom: 14px;
  background-color: #171412;
  background-image: var(--rivets), var(--rust), var(--panel);
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  box-shadow: var(--machine-frame), 0 6px 16px rgba(0, 0, 0, 0.7);
  z-index: 1002;
}

.inspire-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
  background: var(--bar);
  border-radius: 5px 5px 0 0;
}

.inspire-close,
.inspire-close:hover,
.inspire-close:active {
  padding: 0 6px;
  font-size: 18px;
  line-height: 1;
  background: none;
  border: none;
  box-shadow: none;
}

.inspire-text { margin: 14px 16px 6px; font-size: 15px; line-height: 1.5; color: #ff6a6a; }
.inspire-ref { margin: 0 16px 12px; font-size: 12px; text-align: right; color: #ffb0b0; }
.inspire-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; }
.inspire-actions button { padding: 4px 12px; font-size: 12px; }
.inspire-actions .vbtn { padding: 4px 10px; }

/* Login message: a small tag under the nav instead of pushing the inputs around */
#sidebar-login { top: 50%; transform: translateY(-50%); }

#sidebar-login #login-message {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 22px !important;
  padding: 4px 10px;
  white-space: nowrap;
  background: #0a0a0a;
  border: 1px solid var(--line);
  border-radius: 3px;
}

#sidebar-login #login-message:empty { display: none; }

/* =========================================================
   SIDE COLUMNS (side-widgets.js). Shown on screens 1200px+ wide.
   Left: clock, news, notes, games. Right: image showcase.
   ========================================================= */

.side-col {
  display: none;
  position: fixed;
  top: 318px;
  bottom: 25px;
  width: var(--side);
  overflow-y: auto;
  padding-right: 2px;
}

@media (min-width: 1200px) {
  .side-col { display: block; }
}

.side-left { right: calc(50% + var(--main-w) / 2 + 12px); }
.side-right { left: calc(50% + var(--main-w) / 2 + 12px); }
.tool-page .side-col { top: 150px; }

.side-col::-webkit-scrollbar { width: 6px; }
.side-col::-webkit-scrollbar-track { background: transparent; border: none; }
.side-col::-webkit-scrollbar-thumb { background: #5a0000; border: none; border-radius: 3px; }

.side-widget {
  position: relative;
  margin-bottom: 14px;
  background-color: #171412;
  background-image: var(--rivets), var(--rust), var(--panel);
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  box-shadow: var(--machine-frame);
}

.side-widget > h3 {
  margin: 0;
  padding: 6px 12px;
  color: #fff;
  font-size: 13px;
  text-shadow: 0 1px 0 #000;
  background: var(--bar);
  border-bottom: 1px solid #000;
  border-radius: 5px 5px 0 0;
}

.side-body { padding: 10px 12px; }

/* Clock: a classic wall clock (the face itself is drawn in side-widgets.js) */
.clock-face { display: block; width: 132px; height: 132px; margin: 0 auto 8px; }
.clock-min-mark { stroke: #5a3a34; stroke-width: 0.5; }
.clock-hour-mark { stroke: #3a0000; stroke-width: 1.3; }
.clock-num { fill: #3a0000; font-family: Georgia, 'Times New Roman', serif; font-size: 7.4px; font-weight: bold; text-anchor: middle; }
.clock-brand { fill: #8a5a52; font-family: Georgia, 'Times New Roman', serif; font-size: 3.4px; letter-spacing: 0.4px; text-anchor: middle; }
.clock-h, .clock-m { fill: #2a0a0a; stroke: #000; stroke-width: 0.4; }
.clock-s { stroke: #d01010; stroke-width: 1; stroke-linecap: round; }
.clock-s-weight { fill: #d01010; }

/* Digital readout in a sunken red LED panel, and a metal name plate for the date */
.clock-lcd {
  margin: 4px 0 8px;
  padding: 4px 8px;
  color: #ff3030;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0 0 5px rgba(255, 40, 40, 0.8);
  background: linear-gradient(to bottom, #000 0%, #1c0000 60%, #0a0000 100%);
  border: 2px solid;
  border-color: #3a3a3a #e0e0e0 #e0e0e0 #3a3a3a;
  border-radius: 3px;
  box-shadow: inset 0 2px 6px #000;
}

.clock-plate {
  padding: 3px 6px;
  color: #3a0000;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  background: linear-gradient(to bottom, #f4f4f4 0%, #cacaca 50%, #a8a8a8 51%, #d2d2d2 100%);
  border: 1px solid #555;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, 0.6);
}

.clock-utc { margin-top: 6px; font-size: 11px; text-align: center; }

/* News and notes */
.news-list { margin: 0; padding: 0; list-style: none; font-size: 12px; }
.news-list li + li { margin-top: 8px; padding-top: 8px; border-top: 1px dotted var(--line); }
.news-date { display: block; color: #ff8a8a; font-size: 11px; font-weight: bold; }

.side-note {
  padding: 8px 10px;
  font-size: 12px;
  background: #211010;
  border: 1px dashed var(--line);
  border-radius: 3px;
}

.side-note + .side-note { margin-top: 8px; }

/* Games */
.game-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.game-actions { display: flex; justify-content: center; gap: 6px; }
.game-btn { margin: 0; padding: 4px 12px; font-size: 12px; }

/* High score table */
.game-board { margin-top: 8px; padding: 6px; font-size: 11px; background: #0a0a0a; border: 1px solid var(--line); border-radius: 3px; }
.gb-title { margin-bottom: 4px; padding: 2px 4px; color: #fff; font-weight: bold; text-align: center; background: var(--bar); border-radius: 2px; }
.gb-table { width: 100%; border-collapse: collapse; }
.gb-table td { padding: 1px 3px; }
.gb-table td:first-child { width: 22px; text-align: right; opacity: 0.7; }
.gb-table td:last-child { text-align: right; font-family: 'Courier New', monospace; }
.gb-table tr:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }
.gb-you td { color: #fff; font-weight: bold; }
.gb-table tr.gb-new { background: rgba(255, 60, 60, 0.3); }
.gb-form { display: flex; gap: 4px; margin-bottom: 6px; }
.gb-form input { flex: 1; min-width: 0; padding: 3px 5px; font-size: 11px; }
.gb-form button { padding: 2px 10px; font-size: 11px; }
.gb-note { margin-top: 5px; text-align: center; opacity: 0.85; }
.game-hint { margin: 6px 0 8px; font-size: 11px; line-height: 1.35; opacity: 0.85; }

.game-screen {
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 3px;
  outline: none;
  cursor: crosshair;
}

.game-screen:focus { border-color: #ff4040; }
.game-screen canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }

/* Showcase */
.showcase-item {
  margin: 0 0 12px;
  padding: 6px;
  background: #0d0d0d;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--bevel);
  cursor: zoom-in;
}

.showcase-item:hover { border-color: #ff4040; }
.showcase-item img { display: block; width: 100%; height: auto; border-radius: 2px; }
.showcase-item figcaption { margin-top: 5px; font-size: 11px; text-align: center; }

.showcase-empty {
  padding: 30px 10px;
  font-size: 12px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 4px;
}



/* =========================================================
   PERFORMANCE WIDGET (perf-widget.js): the old Windows taskbar
   ========================================================= */

.perf { overflow: hidden; }

.tb {
  display: flex;
  align-items: stretch;
  height: 30px;
  background: linear-gradient(to bottom, #7a2222 0%, #5a1010 8%, #400808 50%, #4a0c0c 92%, #2a0000 100%);
}

.tb-start {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0 12px 0 7px;
  color: #fff;
  font-size: 13px;
  font-style: italic;
  font-weight: bold;
  text-shadow: 1px 1px 2px #400000;
  background: linear-gradient(to bottom, #ff8a8a 0%, #e42222 20%, #c00000 55%, #d81c1c 100%);
  border: none;
  border-radius: 0 14px 14px 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 3px rgba(0, 0, 0, 0.4), 2px 0 4px rgba(0, 0, 0, 0.6);
}

.tb-start:hover { background: linear-gradient(to bottom, #ffa0a0 0%, #f03434 20%, #d01010 55%, #e42c2c 100%); }
.tb-start:active, .tb-start.pressed { background: linear-gradient(to bottom, #a80000 0%, #c81414 100%); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6); }

/* The four little squares, like the flag on the old Start button */
.tb-logo { display: grid; grid-template-columns: 6px 6px; gap: 1px; transform: skewX(-6deg); }
.tb-logo i { width: 6px; height: 6px; }
.tb-logo i:nth-child(1) { background: #f04030; }
.tb-logo i:nth-child(2) { background: #40c040; }
.tb-logo i:nth-child(3) { background: #3080ff; }
.tb-logo i:nth-child(4) { background: #ffc830; }

.tb-tray {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-left: 6px;
  padding: 0 9px;
  font-size: 11px;
  background: linear-gradient(to bottom, #2a0606 0%, #4a1010 12%, #3a0a0a 100%);
  border-left: 1px solid #000;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.14);
}

.tb-item { display: flex; align-items: center; gap: 4px; color: #ffdada; }
.tb-item b { min-width: 16px; font-weight: normal; }

.tb-led {
  width: 7px;
  height: 7px;
  background: #666;
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 0 0 1px #000;
}

.tb-led.ok { background: radial-gradient(circle at 35% 30%, #c0ffc0, #27c027 60%, #106010); }
.tb-led.warn { background: radial-gradient(circle at 35% 30%, #fff0b0, #e0a020 60%, #805010); }
.tb-led.bad { background: radial-gradient(circle at 35% 30%, #ffb0b0, #e02020 60%, #701010); }

.tb-menu { border-top: 1px solid #a03030; background-color: #171412; background-image: var(--rivets), var(--rust), var(--panel); }

.tb-menu-head {
  padding: 5px 10px;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-shadow: 0 1px 0 #000;
  background: linear-gradient(to bottom, #a01818, #600a0a);
}

.tb-graph {
  display: block;
  width: calc(100% - 20px);
  height: auto;
  margin: 8px 10px 4px;
  background: #050000;
  border: 1px solid;
  border-color: #000 #555 #555 #000;
}

.tb-stats { width: 100%; margin: 4px 0; border-collapse: collapse; font-size: 11px; }
.tb-stats td { padding: 2px 10px; }
.tb-stats td:first-child { opacity: 0.85; }
.tb-stats td:last-child { text-align: right; color: #ffdada; }
.tb-stats tr:nth-child(even) { background: rgba(255, 255, 255, 0.04); }

.tb-menu-foot {
  padding: 6px 10px;
  text-align: right;
  background: linear-gradient(to bottom, #3a0a0a, #240404);
  border-top: 1px solid #000;
}

.tb-menu-foot button { padding: 2px 10px; font-size: 11px; }


/* =========================================================
   MUSIC PLAYER (player.js): a little skeuomorphic hi-fi unit
   ========================================================= */

.music-panel { right: auto; left: 12px; width: min(360px, calc(100vw - 24px)); }

.hifi { padding: 10px 12px 4px; background: linear-gradient(to bottom, #2a2a2a, #161616); }

.hifi-screen {
  position: relative;
  margin-bottom: 10px;
  background: #050505;
  border: 2px solid;
  border-color: #000 #444 #444 #000;
  border-radius: 3px;
  box-shadow: inset 0 2px 6px #000;
  overflow: hidden;
}

.hifi-eq { display: block; width: 100%; height: 60px; }

.hifi-info {
  display: flex;
  flex-direction: column;
  padding: 4px 8px 6px;
  border-top: 1px solid #200;
  background: rgba(0, 0, 0, 0.4);
}

.hifi-title { overflow: hidden; color: #ff6a6a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.hifi-artist { overflow: hidden; font-size: 10px; color: #ffb0b0; text-overflow: ellipsis; white-space: nowrap; }

.hifi-meters { display: flex; justify-content: space-around; margin-bottom: 4px; }
.vu { position: relative; text-align: center; }
.vu canvas { display: block; width: 110px; height: 80px; }
.vu i { display: block; margin-top: -4px; font-size: 10px; font-style: normal; color: #8a8a8a; }

.hifi-seek {
  width: 100%;
  margin: 0 0 2px;
  accent-color: #e01818;
}

.hifi-time { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 10px; color: #bbb; font-family: 'Courier New', monospace; }

.hifi-buttons { display: flex; align-items: center; gap: 6px; }

.knob {
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  color: #ddd;
  font-size: 13px;
  background: radial-gradient(circle at 35% 30%, #6a6a6a, #2a2a2a 70%, #101010);
  border: 1px solid #000;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 3px rgba(0, 0, 0, 0.6);
}

.knob:hover { background: radial-gradient(circle at 35% 30%, #808080, #333 70%, #131313); }
.knob:active, .knob.pressed { background: radial-gradient(circle at 35% 30%, #c02020, #700 70%, #300); color: #fff; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7); }
.knob.active { background: radial-gradient(circle at 35% 30%, #e0a020, #805010 70%, #402800); color: #fff; }
.knob-big { width: 38px; height: 38px; font-size: 15px; }

.hifi-vol { display: flex; align-items: center; gap: 5px; margin-left: auto; font-size: 9px; color: #999; }
.hifi-vol input { width: 70px; padding: 0; accent-color: #e01818; }

.hifi-list { max-height: 190px; margin: 8px 0 0; padding: 4px 0; overflow-y: auto; background: #0a0a0a; border-top: 2px solid #050505; list-style: none; }

.hifi-song {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  border-bottom: 1px dotted #3a0000;
}

.hifi-song:hover { background: #2a0808; }
.hifi-song.active { background: var(--bar); }
.hifi-song.active .hifi-song-title, .hifi-song.active .hifi-song-artist { color: #fff; }
.hifi-icon { flex: none; font-size: 13px; }
.hifi-song-title { flex: 1; overflow: hidden; font-size: 12px; color: #ff9a9a; text-overflow: ellipsis; white-space: nowrap; }
.hifi-song-artist { flex: none; max-width: 40%; overflow: hidden; font-size: 10px; color: #999; text-overflow: ellipsis; white-space: nowrap; }
.hifi-empty { padding: 14px; font-size: 12px; text-align: center; color: #999; }

/* =========================================================
   MUSIC-REACTIVE EFFECTS (music-fx.js)
   ========================================================= */

#fx-notes { position: fixed; inset: 0; z-index: 950; pointer-events: none; }

/* =========================================================
   BRASS TUBE (music-fx.js): a worn brass horn bolted to the
   header, which the flying notes spew out of while music plays.
   ========================================================= */

#fx-tube {
  position: fixed;
  z-index: 940;
  width: 64px;
  height: 78px;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.4s ease;
}

#fx-tube[hidden] { display: none; }

.tube-neck {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 34px;
  background: var(--brass);
  border: 1px solid #2a1c04;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  box-shadow: inset 2px 0 3px rgba(0, 0, 0, 0.35), inset -2px 0 4px rgba(255, 240, 200, 0.25);
  transform: translateX(-50%);
}

.tube-neck::before,
.tube-neck::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle at 35% 30%, #fff3c8, #6a4a10 70%);
  border-radius: 50%;
  box-shadow: 0 20px 0 rgba(0, 0, 0, 0.15);
}

.tube-neck::before { left: 3px; }
.tube-neck::after { right: 3px; }

/* The flared bell of the horn, widening toward its dark, glowing mouth */
.tube-bell {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 64px;
  height: 48px;
  background: var(--brass);
  border: 1px solid #2a1c04;
  border-radius: 0 0 50% 50% / 0 0 70% 70%;
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.4), inset 3px 0 4px rgba(255, 240, 200, 0.2);
  transform: translateX(-50%);
}

.tube-rim {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 52px;
  height: 12px;
  background: var(--brass);
  border-radius: 50%;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 245, 210, 0.4);
  transform: translateX(-50%);
}

.tube-hole {
  position: absolute;
  bottom: 9px;
  left: 50%;
  width: 38px;
  height: 8px;
  background: radial-gradient(ellipse at 50% 40%, #2a0000 0%, #000 70%);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 6px 1px rgba(255, 30, 30, 0.25);
}

/* A couple of rust streaks running down the bell, like an old worn horn */
.tube-bell::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(200deg, transparent 40%, rgba(120, 60, 10, 0.35) 46%, transparent 52%),
    linear-gradient(165deg, transparent 60%, rgba(120, 60, 10, 0.25) 65%, transparent 72%);
}