/* TSF tactical HUD: the desktop as the UN squad's command console from the wallpaper.
   Gunmetal panels, amber for anything you can act on, cyan for readouts, red never. */
.theme-hud {
  --hud-bg: #0a0e14;
  --hud-panel: rgba(13, 19, 27, .92);
  --hud-deep: #06090d;
  --hud-text: #d3e1ea;
  --hud-dim: #7c93a3;
  --hud-amber: #ffb000;
  --hud-cyan: #46d3e6;
  --hud-line: rgba(70, 211, 230, .32);
  --hud-ui: 'Chakra Petch', system-ui, sans-serif;
  --hud-mono: 'Share Tech Mono', ui-monospace, monospace;
  --notch: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  background: var(--hud-bg);
  color: var(--hud-text);
  font-family: var(--hud-ui);
}
.theme-hud ::selection { background: var(--hud-amber); color: var(--hud-deep); }
.theme-hud :focus-visible { outline: 1px solid var(--hud-amber); outline-offset: 2px; }

/* Menu bar */
.theme-hud .menu-bar { background: var(--hud-deep); border-bottom: 1px solid var(--hud-amber); box-shadow: 0 1px 0 rgba(255,176,0,.25), 0 8px 24px rgba(0,0,0,.4); }
.theme-hud .menu-bar nav button { color: var(--hud-dim); font: 600 13px var(--hud-ui); letter-spacing: .16em; text-transform: uppercase; }
.theme-hud .menu-bar nav button:hover { background: rgba(255,176,0,.12); color: var(--hud-amber); }

/* Wallpaper: the squad in cyan duotone under a hex grid and scanlines. */
.theme-hud .desktop { background: var(--hud-bg); }
.theme-hud .desktop::before { background: url('assets/wallpaper.jpg') center 30% / cover; filter: grayscale(1) contrast(1.15) brightness(.55) sepia(1) hue-rotate(155deg) saturate(1.8); opacity: .5; z-index: 0; }
.theme-hud .desktop::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(6,9,13,.85) 100%),
    repeating-linear-gradient(rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%2346d3e6' stroke-opacity='.10'/%3E%3C/svg%3E");
}

/* On the desktop layout the vignette swallows most of the grid, so draw it brighter there. */
@media (min-width: 761px) {
  .theme-hud .desktop::after {
    background:
      radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(6,9,13,.7) 100%),
      repeating-linear-gradient(rgba(0,0,0,.32) 0 1px, transparent 1px 3px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%2346d3e6' stroke-opacity='.2'/%3E%3C/svg%3E");
  }
}

/* HUD furniture */
.theme-hud .hud { position: absolute; inset: 0; z-index: 1; pointer-events: none; font: 12px var(--hud-mono); color: var(--hud-cyan); }
.theme-hud .hud-corner { position: absolute; width: 34px; height: 34px; border: 2px solid var(--hud-amber); opacity: .8; }
.theme-hud .hud-corner.tl { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.theme-hud .hud-corner.tr { right: 10px; top: 10px; border-left: 0; border-bottom: 0; }
.theme-hud .hud-corner.bl { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.theme-hud .hud-corner.br { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.theme-hud .hud-strip { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; gap: 18px; padding: 5px 16px; white-space: nowrap; letter-spacing: .08em; background: rgba(6,9,13,.75); border: 1px solid var(--hud-line); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }
.theme-hud .hud-strip { align-items: center; line-height: 16px; }
.theme-hud .hud-strip > * { display: block; }
.theme-hud .hud-strip b { color: var(--hud-amber); font-weight: 400; }
.theme-hud .hud-strip .ok { color: #7ef0a0; }
.theme-hud .hud-strip em { font-style: normal; color: var(--hud-amber); letter-spacing: -1px; }
.theme-hud .hud-ruler { position: absolute; left: 50%; bottom: 16px; width: min(560px, 50%); height: 10px; transform: translateX(-50%); background: repeating-linear-gradient(90deg, var(--hud-line) 0 1px, transparent 1px 14px) bottom / 100% 6px no-repeat, repeating-linear-gradient(90deg, var(--hud-cyan) 0 1px, transparent 1px 70px) bottom / 100% 10px no-repeat; opacity: .7; }

/* Desktop icons: hex tiles, numbered. */
.theme-hud .desktop-icons { top: 58px; left: 24px; width: 184px; grid-template-columns: repeat(2, 88px); gap: 10px 8px; }
/* Two icon columns, so Welcome starts to the right of them. */
@media (min-width: 1101px) { .theme-hud .welcome-window { left: 232px; width: calc((100% - 480px) * .62); } }
@media (min-width: 761px) and (max-width: 1100px) { .theme-hud .welcome-window { left: 218px; width: calc(100% - 218px - 196px); } }
.theme-hud .desktop-icons button > span:last-child { white-space: nowrap; }
.theme-hud .desktop-icons button { color: var(--hud-text); text-shadow: none; font: 11px var(--hud-mono); letter-spacing: .12em; text-transform: uppercase; gap: 6px; border: 0; }
.theme-hud .desktop-icons button:hover { background: none; border: 0; }
.theme-hud .app-icon { display: grid; place-items: center; width: 54px; height: 60px; color: var(--hud-amber); background: rgba(70,211,230,.10); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); text-shadow: none; transition: background .15s, color .15s; }
.theme-hud .app-icon svg { width: 26px; height: 26px; filter: drop-shadow(0 0 4px rgba(255,176,0,.5)); }
.theme-hud .desktop-icons button:hover .app-icon { background: rgba(255,176,0,.22); color: #ffd36b; }

/* Windows: notched panels with an amber title rail. */
.theme-hud .pc-window { background: var(--hud-panel); border: 0; padding: 0; clip-path: var(--notch); box-shadow: inset 0 0 0 1px var(--hud-line), inset 0 0 40px rgba(70,211,230,.06); backdrop-filter: blur(3px); }
.theme-hud .pc-window[data-active="true"] { box-shadow: inset 0 0 0 1px rgba(255,176,0,.6), inset 0 0 40px rgba(255,176,0,.05); }
.theme-hud .title-bar { height: 34px; padding: 0 8px 0 14px; border: 0; border-bottom: 1px solid rgba(255,176,0,.55); box-shadow: none; background: linear-gradient(90deg, rgba(255,176,0,.16), transparent 70%); }
.theme-hud .title-bar h2 { font: 700 13px var(--hud-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--hud-amber); }
.theme-hud .title-bar h2 span { color: var(--hud-cyan); }
.theme-hud .window-actions { align-items: center; gap: 4px; }
.theme-hud .window-actions::before { content: ''; width: 54px; height: 10px; margin-right: 8px; background: repeating-linear-gradient(-45deg, var(--hud-amber) 0 5px, transparent 5px 10px); opacity: .7; }
.theme-hud .window-actions button { width: 22px; min-width: 22px; height: 22px; border: 1px solid var(--hud-line); background: transparent; box-shadow: none; color: var(--hud-cyan); font: 14px var(--hud-mono); }
.theme-hud .window-actions button:hover { background: var(--hud-amber); color: var(--hud-deep); border-color: var(--hud-amber); }
.theme-hud .welcome-content, .theme-hud .text-document { background: transparent; border: 0; margin: 0; color: var(--hud-text); }
.theme-hud .logo-welcome .welcome-copy { padding: 22px 26px 24px; }
.theme-hud .welcome-logo img { filter: drop-shadow(0 0 18px rgba(255,120,170,.25)); }
.theme-hud .welcome-copy .intro-text { font: 400 15px/1.75 var(--hud-ui); color: var(--hud-text); max-width: none; }
.theme-hud .welcome-copy .intro-text::before { content: '// BRIEFING'; display: block; margin-bottom: 4px; font: 12px var(--hud-mono); letter-spacing: .18em; color: var(--hud-cyan); }
.theme-hud .status-bar { border: 0; border-top: 1px solid var(--hud-line); box-shadow: none; color: var(--hud-dim); font: 11px var(--hud-mono); }
.theme-hud .window-resize-handle { background: linear-gradient(135deg, transparent 50%, var(--hud-amber) 50%) bottom right / 10px 10px no-repeat; }

/* Homelab tree: a network map. The trunk and branches are drawn per row so they line up with
   cards of any height; each service is a small notched card with a live status light. */
.theme-hud .desktop-sitemap { top: 62px; color: var(--hud-text); font: 600 12px var(--hud-ui); letter-spacing: .14em; text-transform: uppercase; }
.theme-hud .sitemap-node { min-height: 0; gap: 10px; padding: 6px 12px 6px 6px; text-shadow: none; border: 0; border-radius: 0; background: rgba(10,15,22,.8); box-shadow: inset 0 0 0 1px var(--hud-line); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); transition: background .15s, box-shadow .15s, transform .15s; }
.theme-hud .sitemap-node:hover, .theme-hud .sitemap-node:focus-visible { background: rgba(255,176,0,.1); box-shadow: inset 2px 0 0 var(--hud-amber), inset 0 0 0 1px rgba(255,176,0,.5); transform: translateX(3px); outline: 0; }
.theme-hud .sitemap-node img { box-sizing: content-box; width: 24px; height: 24px; padding: 5px; background: rgba(70,211,230,.08); border: 1px solid var(--hud-line); filter: grayscale(1) brightness(1.6) sepia(1) hue-rotate(150deg) saturate(2.2); opacity: .9; transition: filter .15s; }
.theme-hud .sitemap-node:hover img, .theme-hud .sitemap-node:focus-visible img { filter: none; opacity: 1; }
.theme-hud .sitemap-node:hover span { color: var(--hud-amber); }
.theme-hud .sitemap-node small { display: flex; align-items: center; gap: 7px; margin-left: auto; color: var(--hud-dim); font: 11px var(--hud-mono); opacity: 1; }
.theme-hud .sitemap-node small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #7ef0a0; box-shadow: 0 0 6px #7ef0a0; animation: hud-pulse 2.4s ease-in-out infinite; }
.theme-hud .sitemap-node:hover small { color: var(--hud-amber); }
@keyframes hud-pulse { 50% { opacity: .35; box-shadow: none; } }
/* The Homelab root: a hex tile like the desktop icons, with a readout under the name. */
.theme-hud .sitemap-home { padding: 0 0 0 2px; gap: 12px; background: none; box-shadow: none; clip-path: none; }
.theme-hud .sitemap-home:hover, .theme-hud .sitemap-home:focus-visible { background: none; box-shadow: none; transform: none; }
.theme-hud .sitemap-home img { width: 26px; height: 26px; padding: 15px 12px; border: 0; background: rgba(70,211,230,.1); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.theme-hud .sitemap-home:hover img { background: rgba(255,176,0,.22); }
.theme-hud .sitemap-home span { display: grid; gap: 3px; text-transform: uppercase; color: var(--hud-amber); font: 700 14px var(--hud-ui); letter-spacing: .2em; }
.theme-hud .sitemap-home span::after { content: '// Network'; color: var(--hud-cyan); font: 10px var(--hud-mono); letter-spacing: .16em; }
.theme-hud .sitemap-branches { margin-left: 27px; padding-top: 8px; }
.theme-hud .sitemap-branches::before { display: none; }
.theme-hud .sitemap-branches li { padding: 4px 0; }
.theme-hud .sitemap-branches li::before { top: 50%; border-top: 1px dashed rgba(70,211,230,.6); }
.theme-hud .sitemap-branches li::after { content: ''; position: absolute; left: -29px; top: 0; bottom: 0; border-left: 1px dashed rgba(70,211,230,.6); }
.theme-hud .sitemap-branches li:first-child::after { top: -8px; }
.theme-hud .sitemap-branches li:last-child::after { bottom: 50%; }
@media (min-width: 761px) and (max-width: 1100px) { .theme-hud .sitemap-branches li::after { left: -20px; } }

/* Radio: comms channel. */
.theme-hud .radio-widget { background: var(--hud-panel); border: 0; padding: 8px; clip-path: var(--notch); box-shadow: inset 0 0 0 1px rgba(255,176,0,.55); }
.theme-hud .radio-widget-cover { border: 1px solid var(--hud-line); filter: grayscale(.6) contrast(1.1) sepia(.4) hue-rotate(150deg); transition: filter .2s; }
.theme-hud .radio-widget:hover .radio-widget-cover, .theme-hud .is-playing .radio-widget-cover { filter: none; }
.theme-hud .radio-widget-screen { background: var(--hud-deep); border: 1px solid var(--hud-line); box-shadow: inset 0 0 18px rgba(70,211,230,.08); font-family: var(--hud-mono); }
.theme-hud .radio-widget-top { color: var(--hud-cyan); font-size: 12px; letter-spacing: .14em; }
.theme-hud .radio-widget-top > span:first-child::before { content: 'COMMS · '; color: var(--hud-dim); }
.theme-hud .radio-eq i { background: var(--hud-cyan); box-shadow: 0 0 4px var(--hud-cyan); }
.theme-hud .radio-widget .radio-now strong { font: 700 17px/1.2 var(--hud-ui); color: var(--hud-amber); letter-spacing: .02em; }
.theme-hud .radio-widget .radio-now span { font: 13px var(--hud-mono); color: var(--hud-dim); }
.theme-hud .radio-widget-controls button { background: transparent; border: 1px solid var(--hud-line); box-shadow: none; color: var(--hud-cyan); }
.theme-hud .radio-widget-controls button:hover { background: rgba(70,211,230,.12); }
.theme-hud .radio-widget-controls .radio-play { background: var(--hud-amber); border-color: var(--hud-amber); color: var(--hud-deep); }
.theme-hud .radio-slider { accent-color: var(--hud-amber); }

/* Taskbar: command bar. */
.theme-hud .taskbar { background: var(--hud-deep); border-top: 1px solid var(--hud-amber); box-shadow: 0 -8px 24px rgba(0,0,0,.4); }
.theme-hud .start-button { background: var(--hud-amber); border: 0; box-shadow: none; color: var(--hud-deep); font: 700 13px var(--hud-ui); letter-spacing: .16em; text-transform: uppercase; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); padding-right: 20px; }
.theme-hud .start-button span { color: var(--hud-deep); }
.theme-hud .start-menu { background: var(--hud-panel); border: 1px solid var(--hud-amber); box-shadow: none; color: var(--hud-text); }
.theme-hud .start-menu strong { background: var(--hud-amber); color: var(--hud-deep); }
.theme-hud .task-buttons button { background: transparent; border: 1px solid var(--hud-line); box-shadow: none; color: var(--hud-dim); font: 12px var(--hud-mono); letter-spacing: .08em; }
.theme-hud .task-buttons button[aria-pressed=true] { color: var(--hud-amber); border-color: var(--hud-amber); background: rgba(255,176,0,.1); }
.theme-hud .tray { border: 1px solid var(--hud-line); box-shadow: none; color: var(--hud-cyan); font: 12px var(--hud-mono); }
.theme-hud .desktop-mascot span { background: var(--hud-deep); color: var(--hud-amber); border: 1px solid var(--hud-amber); font: 10px var(--hud-mono); letter-spacing: .1em; transform: none; }
.theme-hud .desktop-mascot span::before { content: 'CALLSIGN // '; color: var(--hud-dim); }

/* Goblin */
.theme-hud .goblin-pet canvas { filter: drop-shadow(0 0 6px rgba(70,211,230,.45)); }
.theme-hud .goblin-bubble { background: var(--hud-deep); color: var(--hud-amber); border: 1px solid var(--hud-amber); font-family: var(--hud-mono); }

/* Window contents: dark readout panels, amber for what you can press, cyan for labels. */
.theme-hud .pc-window *::-webkit-scrollbar { width: 8px; height: 8px; }
.theme-hud .pc-window *::-webkit-scrollbar-thumb { background: rgba(255,176,0,.45); }
.theme-hud .pc-window * { scrollbar-color: rgba(255,176,0,.45) transparent; scrollbar-width: thin; }
.theme-hud .classic-button { background: var(--hud-amber); border: 0; box-shadow: none; color: var(--hud-deep); font: 700 12px var(--hud-ui); letter-spacing: .14em; text-transform: uppercase; }

/* Favorites: tabbed dossier of cover cards. */
.theme-hud .classic-tabs { gap: 0; padding: 10px 14px 0; border-bottom: 1px solid var(--hud-line); }
.theme-hud .classic-tabs button { top: 0; padding: 8px 16px 9px; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; color: var(--hud-dim); font: 600 12px var(--hud-ui); letter-spacing: .18em; text-transform: uppercase; }
.theme-hud .classic-tabs button:hover { color: var(--hud-text); }
.theme-hud .classic-tabs button[aria-selected=true] { color: var(--hud-amber); border-bottom-color: var(--hud-amber); background: linear-gradient(transparent, rgba(255,176,0,.12)); }
.theme-hud .favorite-library { padding: 16px 14px; background: transparent; border: 0; box-shadow: none; }
.theme-hud .cover-card { color: var(--hud-text); }
.theme-hud .cover-card img { border: 1px solid var(--hud-line); filter: saturate(.85) brightness(.92); transition: filter .15s, border-color .15s, box-shadow .15s; }
.theme-hud .cover-card:hover img, .theme-hud .cover-card:focus-visible img { filter: none; border-color: var(--hud-amber); box-shadow: 0 0 14px rgba(255,176,0,.3); }
.theme-hud .cover-card span { font: 600 12px/1.35 var(--hud-ui); letter-spacing: .02em; }
.theme-hud .cover-card:hover span { text-decoration: none; color: var(--hud-amber); }
.theme-hud .cover-card small { color: var(--hud-cyan); font: 10px var(--hud-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.theme-hud .favorites-footer { padding: 8px 14px; border-top: 1px solid var(--hud-line); color: var(--hud-dim); font: 11px var(--hud-mono); letter-spacing: .1em; text-transform: uppercase; }
.theme-hud .favorites-footer a { color: var(--hud-amber); text-decoration: none; }
.theme-hud .favorites-footer a::after { content: ' ↗'; }

/* Photos: an image archive with album channels down the side. */
.theme-hud .gallery-toolbar { padding: 8px 14px; border-bottom: 1px solid var(--hud-line); color: var(--hud-cyan); font: 11px var(--hud-mono); letter-spacing: .12em; text-transform: uppercase; }
.theme-hud .gallery-path::before { content: '▸ '; color: var(--hud-amber); }
.theme-hud .gallery-views button { background: transparent; border: 1px solid var(--hud-line); box-shadow: none; color: var(--hud-dim); font: 10px var(--hud-mono); letter-spacing: .08em; text-transform: uppercase; }
.theme-hud .gallery-views button[aria-pressed=true] { color: var(--hud-amber); border-color: var(--hud-amber); background: rgba(255,176,0,.1); }
.theme-hud .gallery-body { background: transparent; }
.theme-hud .gallery-albums { background: rgba(6,9,13,.55); border-right: 1px solid var(--hud-line); }
.theme-hud .gallery-folder-label { color: var(--hud-cyan); font: 10px var(--hud-mono); letter-spacing: .2em; }
.theme-hud .gallery-albums button { color: var(--hud-text); border: 0; border-left: 2px solid transparent; font: 600 12px var(--hud-ui); letter-spacing: .08em; text-transform: uppercase; }
.theme-hud .gallery-albums button:hover { background: rgba(70,211,230,.08); }
.theme-hud .gallery-albums button[aria-pressed=true] { color: var(--hud-amber); background: rgba(255,176,0,.1); border-left-color: var(--hud-amber); box-shadow: none; }
.theme-hud .gallery-albums button > span:first-child { color: var(--hud-cyan); }
.theme-hud .gallery-albums small { color: var(--hud-dim); font: 10px var(--hud-mono); }
.theme-hud .gallery-heading h3 { color: var(--hud-amber); font: 700 19px var(--hud-ui); letter-spacing: .14em; text-transform: uppercase; }
.theme-hud .gallery-heading p { color: var(--hud-dim); font: 12px/1.5 var(--hud-mono); }
.theme-hud #gallery-count { color: var(--hud-cyan); font: 11px var(--hud-mono); letter-spacing: .1em; text-transform: uppercase; }
.theme-hud .gallery-card { color: var(--hud-text); }
.theme-hud .gallery-card img { padding: 0; background: var(--hud-deep); border: 1px solid var(--hud-line); box-shadow: none; filter: saturate(.85); transition: filter .15s, border-color .15s, box-shadow .15s; }
.theme-hud button.gallery-card:hover img, .theme-hud button.gallery-card:focus-visible img { background: var(--hud-deep); border-color: var(--hud-amber); box-shadow: 0 0 14px rgba(255,176,0,.3); filter: none; }
.theme-hud .gallery-card strong { font: 600 12px var(--hud-ui); letter-spacing: .04em; }
.theme-hud button.gallery-card:hover strong { text-decoration: none; color: var(--hud-amber); }
.theme-hud .gallery-card small { color: var(--hud-dim); font: 10px var(--hud-mono); letter-spacing: .1em; text-transform: uppercase; }
.theme-hud .collection-placeholder .collection-placeholder-art { color: var(--hud-cyan); background: repeating-linear-gradient(135deg, rgba(70,211,230,.06) 0 6px, transparent 6px 12px); border: 1px dashed var(--hud-line); }

/* Photo viewer */
.theme-hud .photo-dialog { padding: 10px; color: var(--hud-text); background: var(--hud-deep); border: 1px solid rgba(255,176,0,.6); clip-path: var(--notch); }
.theme-hud .photo-dialog::backdrop { background: rgba(4,7,10,.88); }
.theme-hud .dialog-close { background: var(--hud-amber); border: 0; color: var(--hud-deep); }
.theme-hud .photo-viewer-bar { border-top: 1px solid var(--hud-line); margin-top: 8px; }
.theme-hud .photo-viewer-bar p { font: 600 14px var(--hud-ui); letter-spacing: .06em; color: var(--hud-amber); }
.theme-hud .photo-viewer-bar small, .theme-hud #viewer-position { color: var(--hud-dim); font-family: var(--hud-mono); }
.theme-hud .photo-viewer-bar > button { background: transparent; border: 1px solid var(--hud-line); color: var(--hud-cyan); }
.theme-hud .photo-viewer-bar > button:hover:not(:disabled) { border-color: var(--hud-amber); color: var(--hud-amber); }

/* Links: a numbered channel list. */
.theme-hud .links-document { counter-reset: link; margin: 0; padding: 10px 14px; background: transparent; }
.theme-hud .links-document a { counter-increment: link; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; column-gap: 6px; padding: 12px 6px; color: var(--hud-text); border-bottom: 1px dashed var(--hud-line); font: 600 15px var(--hud-ui); letter-spacing: .1em; text-transform: uppercase; }
.theme-hud .links-document a::before { content: counter(link, decimal-leading-zero); grid-row: span 2; color: var(--hud-amber); font: 13px var(--hud-mono); }
.theme-hud .links-document a::after { content: '↗'; grid-column: 3; grid-row: 1 / span 2; color: var(--hud-cyan); font: 14px var(--hud-mono); }
.theme-hud .links-document small { grid-column: 2; margin-top: 2px; color: var(--hud-dim); font: 11px var(--hud-mono); letter-spacing: .06em; text-transform: none; }
.theme-hud .links-document a:hover, .theme-hud .links-document a:focus-visible { background: rgba(255,176,0,.08); color: var(--hud-amber); }

/* About, Goblin */
.theme-hud .text-document { line-height: 1.75; }
.theme-hud .text-document h3 { color: var(--hud-amber); font: 700 17px var(--hud-ui); letter-spacing: .14em; text-transform: uppercase; }
.theme-hud .profile-photo, .theme-hud .goblin-photo img { border: 1px solid var(--hud-line); }
.theme-hud .goblin-photo { background: var(--hud-deep); }

/* Radio window */
.theme-hud .radio-body { background: transparent; border: 0; }
.theme-hud .radio-cover { padding: 0; background: none; border: 1px solid var(--hud-line); box-shadow: none; }
.theme-hud .radio-display { background: var(--hud-deep); border: 1px solid var(--hud-line); box-shadow: inset 0 0 18px rgba(70,211,230,.08); font-family: var(--hud-mono); }
.theme-hud .radio-display-row { color: var(--hud-cyan); font-size: 12px; letter-spacing: .12em; }
.theme-hud .radio-display .radio-now strong { color: var(--hud-amber); font: 700 22px/1.2 var(--hud-ui); }
.theme-hud .radio-display .radio-now span { color: var(--hud-dim); font: 13px var(--hud-mono); }
.theme-hud .radio-controls button { background: transparent; border: 1px solid var(--hud-line); box-shadow: none; color: var(--hud-cyan); }
.theme-hud .radio-controls button:hover { background: rgba(70,211,230,.12); }
.theme-hud .radio-controls .radio-play { background: var(--hud-amber); border-color: var(--hud-amber); color: var(--hud-deep); }
.theme-hud .radio-volume { color: var(--hud-dim); font: 11px var(--hud-mono); text-transform: uppercase; }
.theme-hud .radio-tracklist { background: rgba(6,9,13,.6); border: 1px solid var(--hud-line); box-shadow: none; }
.theme-hud .radio-tracklist button { color: var(--hud-text); border-bottom: 1px dashed var(--hud-line); font: 600 13px var(--hud-ui); }
.theme-hud .radio-tracklist button:hover { background: rgba(70,211,230,.08); }
.theme-hud .radio-tracklist button[aria-current=true] { background: rgba(255,176,0,.1); color: var(--hud-amber); }
.theme-hud .radio-tracklist small, .theme-hud .radio-track-meta { color: var(--hud-dim); font-family: var(--hud-mono); }
.theme-hud .radio-window.is-playing .radio-tracklist [aria-current=true] .radio-track-meta:first-child::after { color: var(--hud-amber); }

/* For S */
.theme-hud .for-s-lock, .theme-hud .for-s-files { background: transparent; border: 0; }
.theme-hud .for-s-lock label { font: 600 13px var(--hud-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--hud-cyan); }
.theme-hud .for-s-row input { color: var(--hud-amber); background: var(--hud-deep); border: 1px solid var(--hud-line); box-shadow: none; font-family: var(--hud-mono); }
.theme-hud .for-s-error { color: var(--hud-amber); font-family: var(--hud-mono); }
.theme-hud .for-s-file { color: var(--hud-text); font: 11px var(--hud-mono); }
.theme-hud .for-s-file:hover { background: rgba(255,176,0,.1); border: 1px solid var(--hud-line); }
.theme-hud .for-s-note { color: var(--hud-text); background: var(--hud-deep); border: 1px solid var(--hud-line); font-family: var(--hud-mono); }

/* Welcome: Sumika peeks in at the bottom-right corner of the window, where the logo used to be. */
.theme-hud .hud-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.theme-hud .logo-welcome .welcome-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 10px; padding-bottom: 0; }
.theme-hud .logo-welcome .welcome-copy .intro-text { align-self: center; margin: 0 0 22px; }
.theme-hud .welcome-sumika { position: relative; width: 150px; height: 179px; margin: 0 -26px 0 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.theme-hud .welcome-sumika .sumika-art { filter: drop-shadow(0 0 10px rgba(255,120,170,.25)); }
.theme-hud .welcome-sumika:focus-visible { outline: 1px dashed var(--hud-amber); }

/* Interests board (prototype): a loose wall of chibis, art and odds and ends. */
.theme-hud .interests-window { left: 30%; top: 9%; width: min(620px, 46%); z-index: 10; }
.theme-hud .interests-board.is-construction { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 340px; padding: 28px 16px; }
.theme-hud .is-construction img { width: min(230px, 70%); height: auto; opacity: .3; filter: saturate(.6) drop-shadow(0 0 24px rgba(70,211,230,.25)); }
.theme-hud .is-construction p { margin: 0; padding: 12px 20px; color: var(--hud-amber); font: 700 17px var(--hud-ui); letter-spacing: .3em; text-transform: uppercase; text-align: center; background: repeating-linear-gradient(-45deg, rgba(255,176,0,.6) 0 6px, transparent 6px 12px) top / 100% 5px no-repeat, repeating-linear-gradient(-45deg, rgba(255,176,0,.6) 0 6px, transparent 6px 12px) bottom / 100% 5px no-repeat; }
.theme-hud .interests-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); grid-auto-rows: 128px; grid-auto-flow: dense; gap: 10px; padding: 14px; max-height: calc(100svh - 230px); overflow: auto; }
.theme-hud .pc-window.maximized .interests-board { max-height: none; }
.theme-hud .interest { position: relative; margin: 0; min-width: 0; overflow: hidden; background: rgba(6,9,13,.6); box-shadow: inset 0 0 0 1px var(--hud-line); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.theme-hud .interest.is-wide { grid-column: span 2; }
.theme-hud .interest.is-tall { grid-row: span 2; }
.theme-hud .interest.is-big { grid-column: span 2; grid-row: span 2; }
.theme-hud .interest img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: filter .2s; }
.theme-hud .interest img.is-contain { object-fit: contain; padding: 10px 12px 26px; }
.theme-hud .interest img.is-pixel { object-fit: contain; padding: 14px 14px 26px; image-rendering: pixelated; }
.theme-hud .interest:hover img { filter: none; }
.theme-hud .interest-tag { position: absolute; left: 0; top: 0; z-index: 1; padding: 2px 8px; color: var(--hud-deep); background: var(--hud-amber); font: 10px var(--hud-mono); letter-spacing: .14em; text-transform: uppercase; }
.theme-hud .interest figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 9px 6px; color: var(--hud-text); background: linear-gradient(transparent, rgba(6,9,13,.9)); font: 600 12px var(--hud-ui); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-hud .interest-sprite { container-type: size; }
.theme-hud .interest-art-sprite { position: absolute; left: 50%; top: calc(50% - 2px); width: min(100cqw - 16px, (100cqh - 56px) * .84); aspect-ratio: 168 / 200; transform: translate(-50%, -50%); background-repeat: no-repeat; background-size: 900% 100%; }
.theme-hud .interest-note { padding: 30px 12px 12px; }
.theme-hud .interest-note p { margin: 0; color: var(--hud-cyan); font: 13px/1.6 var(--hud-mono); }
.theme-hud .interest-empty { display: grid; place-items: center; height: 100%; color: var(--hud-line); font: 34px var(--hud-mono); background: repeating-linear-gradient(135deg, rgba(70,211,230,.05) 0 6px, transparent 6px 12px); }
.theme-hud .interest-empty + figcaption { color: var(--hud-dim); background: none; font: 11px var(--hud-mono); }

/* Sumika peeking in from the right edge of the screen, in the gap between the homelab tree and G'murin.
   Her sprite is cut off at the waist, so the bottom fades out as if she's behind the screen edge. */
.sumika-peek { position: fixed; right: 0; bottom: 212px; z-index: 150; width: 112px; height: 133px; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); padding: 0; border: 0; background: none; cursor: pointer; transform: translateX(105%); transition: transform .5s cubic-bezier(.3,1.4,.5,1); -webkit-tap-highlight-color: transparent; }
.sumika-peek.is-in { transform: translateX(14px); }
.sumika-peek.is-in.is-away { transform: translateX(105%); transition-timing-function: ease-in; transition-duration: .3s; }
.sumika-peek:focus-visible { outline: 1px dashed var(--hud-amber); }
.sumika-art { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 900% 100%; background-position: 12.5% 0; }
.sumika-peek .sumika-art { filter: drop-shadow(0 0 6px rgba(70,211,230,.35)); }
.sumika-heart { position: absolute; left: 6px; top: 6px; color: #ff6fa8; font: 22px var(--hud-ui); text-shadow: 0 0 8px rgba(255,111,168,.7); pointer-events: none; animation: sumika-heart 1.2s ease-out forwards; }
@keyframes sumika-heart { from { opacity: 0; transform: translateY(10px) scale(.6); } 20% { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-34px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .sumika-peek { transition: none; } .sumika-heart { display: none; } }

/* Sumika's speech bubble, beside the peeking Sumika. */
.sumika-bubble { position: fixed; z-index: 160; max-width: 220px; padding: 9px 12px; color: var(--hud-text); background: var(--hud-deep); border: 1px solid var(--hud-amber); box-shadow: 0 0 18px rgba(255,176,0,.18); font: 13px/1.45 var(--hud-mono); pointer-events: none; }
.sumika-bubble::after { content: ''; position: absolute; right: -7px; bottom: 12px; width: 10px; height: 10px; background: var(--hud-deep); border: solid var(--hud-amber); border-width: 1px 1px 0 0; transform: rotate(45deg); }
.sumika-bubble.is-shown { animation: sumika-bubble .25s ease-out; }
@keyframes sumika-bubble { from { opacity: 0; transform: translateX(8px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .sumika-bubble.is-shown { animation: none; } }

/* Best Girls: a 3x3 chart. */
.theme-hud .best-girls-window { left: 34%; top: 6%; width: min(410px, 38%); z-index: 10; }
.theme-hud .best-girls-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 14px; list-style: none; }
.theme-hud .best-girl { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: rgba(6,9,13,.65); box-shadow: inset 0 0 0 1px var(--hud-line); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.theme-hud .best-girl:not(.is-empty):hover { box-shadow: inset 0 0 0 1px var(--hud-amber); }
.theme-hud .best-girl img { display: block; width: 100%; height: 100%; object-fit: cover; }
.theme-hud .best-girl-sprite { position: absolute; left: 50%; bottom: 0; height: 84%; aspect-ratio: 168 / 200; transform: translateX(-50%); background-repeat: no-repeat; background-size: 900% 100%; }
.theme-hud .best-girl-empty { display: grid; place-items: center; height: 100%; color: var(--hud-line); font: 30px var(--hud-mono); background: repeating-linear-gradient(135deg, rgba(70,211,230,.05) 0 6px, transparent 6px 12px); }
.theme-hud .best-girl-label { position: absolute; left: 0; right: 0; bottom: 0; display: grid; padding: 16px 8px 6px; background: linear-gradient(transparent, rgba(6,9,13,.92) 55%); }
.theme-hud .best-girl-label strong { color: var(--hud-amber); font: 700 12px/1.25 var(--hud-ui); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-hud .best-girl-label small { color: var(--hud-cyan); font: 10px var(--hud-mono); letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-hud .best-girl.is-empty .best-girl-label { background: none; text-align: center; }
.theme-hud .best-girl.is-empty .best-girl-label small { color: var(--hud-dim); }

/* Message: a short transmission form. */
.theme-hud .message-window { left: 36%; top: 12%; width: min(420px, 36%); z-index: 10; }
.theme-hud .message-form { display: grid; gap: 12px; padding: 16px; }
.theme-hud .message-form label { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 5px 0; color: var(--hud-cyan); font: 11px var(--hud-mono); letter-spacing: .14em; text-transform: uppercase; }
.theme-hud .message-form label > input, .theme-hud .message-form label > textarea { grid-column: 1 / -1; }
.theme-hud .message-form label small { margin-left: 8px; color: var(--hud-dim); font-size: 10px; letter-spacing: .08em; text-transform: none; }
.theme-hud .message-form input, .theme-hud .message-form textarea { width: 100%; padding: 9px 10px; color: var(--hud-text); background: var(--hud-deep); border: 1px solid var(--hud-line); border-radius: 0; font: 14px/1.5 var(--hud-ui); letter-spacing: .02em; text-transform: none; resize: vertical; }
.theme-hud .message-form input::placeholder { color: var(--hud-dim); opacity: .7; }
.theme-hud .message-form input:focus, .theme-hud .message-form textarea:focus { outline: 0; border-color: var(--hud-amber); box-shadow: 0 0 0 1px rgba(255,176,0,.3); }
.theme-hud .message-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.theme-hud .message-actions { display: flex; align-items: center; gap: 12px; }
.theme-hud .message-actions .classic-button { padding: 9px 22px; cursor: pointer; }
.theme-hud .message-actions .classic-button:disabled { opacity: .5; cursor: wait; }
.theme-hud #message-status { color: var(--hud-dim); font: 11px/1.5 var(--hud-mono); }

/* Phone-only prototype: favorites and links built into the page, so you just scroll. */
.theme-hud .hud-feed { display: none; }

@media (max-width: 760px) {
  .theme-hud .hud-strip { top: 6px; gap: 10px; font-size: 10px; padding: 3px 12px; }
  .theme-hud .hud-strip span:nth-of-type(1), .theme-hud .hud-strip span:nth-of-type(3) { display: none; }
  .theme-hud .hud-ruler, .theme-hud .hud-corner { display: none; }
  .theme-hud .desktop { padding-top: 40px; }
  /* The wallpaper and grid are pinned to the screen, not stretched over the page: the page grows
     and shrinks as windows open and close, and a cover-sized background re-zooms every time. */
  .theme-hud .desktop::before, .theme-hud .desktop::after { position: fixed; top: 0; right: 0; bottom: auto; left: 0; height: 100vh; height: 100lvh; }
  .theme-hud .welcome-window { background: rgba(13,19,27,.6); }
  .theme-hud .interests-board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; padding: 12px; max-height: none; }
  .theme-hud .pc-window:not(.welcome-window) { order: -2; }
  .sumika-peek { bottom: calc(80px + env(safe-area-inset-bottom)); width: 84px; height: 100px; }
  .theme-hud .welcome-sumika { width: 104px; height: 124px; margin-right: -18px; }
  .theme-hud .logo-welcome .welcome-copy { padding: 18px 18px 0; }
  .theme-hud .logo-welcome .welcome-copy .intro-text { font-size: 14px; margin-bottom: 16px; }
  .theme-hud .sitemap-branches { margin-left: 27px; }
  .theme-hud .sitemap-node { width: min(240px, 100%); }
  .theme-hud .sitemap-home { width: fit-content; }
  .sumika-peek.is-in { transform: translateX(10px); }
  .theme-hud .desktop-icons { top: auto; left: auto; width: auto; }
  .theme-hud .radio-widget { clip-path: none; box-shadow: inset 0 1px 0 var(--hud-amber); }

  /* Prototype: welcome, then the icons that still open windows, then favorites and links inline. */
  .theme-hud .welcome-window { order: -4; }
  .theme-hud .desktop-icons { order: -3; grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 6px; }
  .theme-hud .best-girls-grid { gap: 6px; padding: 12px; }
  .theme-hud .message-form textarea { font-size: 16px; }
  .theme-hud .message-form input { font-size: 16px; }
  .theme-hud .desktop-icons [data-open=favorites], .theme-hud .desktop-icons [data-open=links] { display: none; }
  .theme-hud .hud-feed { display: block; position: relative; z-index: 2; scroll-margin-top: 12px; }
  .theme-hud .hud-favs { order: -1; }
  .theme-hud .hud-links { order: 5; }
  .theme-hud .desktop-sitemap { order: 6; padding-top: 0; }
  .theme-hud .hud-feed-head { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
  .theme-hud .hud-feed-head h2 { margin: 0; color: var(--hud-amber); font: 700 15px var(--hud-ui); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
  .theme-hud .hud-feed-head::after { content: ''; flex: 1; height: 8px; background: repeating-linear-gradient(-45deg, var(--hud-amber) 0 4px, transparent 4px 8px); opacity: .45; }
  .theme-hud .hud-row { margin-bottom: 18px; }
  .theme-hud .hud-row-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 8px; padding-bottom: 5px; border-bottom: 1px solid var(--hud-line); }
  .theme-hud .hud-row-head h3 { margin: 0; color: var(--hud-text); font: 600 13px var(--hud-ui); letter-spacing: .16em; text-transform: uppercase; }
  .theme-hud .hud-row-head a { color: var(--hud-amber); font: 11px var(--hud-mono); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
  /* Each category is a strip you swipe sideways; it runs to the screen edges. */
  .theme-hud .hud-swipe { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 12px; margin: 0 -12px; padding: 2px 12px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 12px; scrollbar-width: none; }
  .theme-hud .hud-swipe::-webkit-scrollbar { display: none; }
  .theme-hud .hud-swipe .cover-card { scroll-snap-align: start; }
  .theme-hud .hud-swipe .cover-card span { font-size: 12px; }
  .theme-hud .hud-link-list { display: grid; gap: 8px; counter-reset: link; }
  .theme-hud .hud-link-list a { counter-increment: link; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; column-gap: 8px; padding: 11px 14px; color: var(--hud-text); text-decoration: none; background: var(--hud-panel); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); box-shadow: inset 0 0 0 1px var(--hud-line); }
  .theme-hud .hud-link-list a::before { content: counter(link, decimal-leading-zero); grid-row: span 2; color: var(--hud-amber); font: 13px var(--hud-mono); }
  .theme-hud .hud-link-list a::after { content: '↗'; grid-column: 3; grid-row: 1 / span 2; color: var(--hud-cyan); font: 15px var(--hud-mono); }
  .theme-hud .hud-link-list strong { font: 600 15px var(--hud-ui); letter-spacing: .1em; text-transform: uppercase; }
  .theme-hud .hud-link-list small { grid-column: 2; color: var(--hud-dim); font: 11px var(--hud-mono); letter-spacing: .06em; }
  .theme-hud .hud-link-list a:active { box-shadow: inset 0 0 0 1px var(--hud-amber); }
}
@media (prefers-reduced-motion: reduce) { .theme-hud .desktop::after { background-image: none; } }