/* host.css — chrome for the jscreensaver host (index.html): the picker, the
   config / about / help pop-overs, and the corner readouts. The hack canvas
   itself draws no DOM. config-box.js's injected config controls reuse the
   --phosphor-* palette defined here, so the theme lives in one place. */

:root {
  /* green-phosphor palette, brightest → darkest (plus structural roles) */
  --phosphor-hi:      #d6ffe5;  /* hover highlight */
  --phosphor-bright:  #9bf3b6;  /* headings, labels, links */
  --phosphor-mid:     #6fcf8c;  /* value readouts, underlines */
  --phosphor:         #5fdd83;  /* primary text */
  --phosphor-accent:  #3ddc74;  /* form-control accent */
  --phosphor-dim:     #3f9a5e;  /* muted hints / end labels */
  --phosphor-border:  #1f7a42;  /* box borders */
  --phosphor-divider: #103a20;  /* inner dividers */
  --phosphor-bg:      #020503;  /* box background */
}

* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
canvas { display: block; }

/* Picker + Config + About + Help + Info share a dimmed-overlay + green box look. */
#selector, #config, #about, #help, #info {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
#selector { z-index: 100000; }
#config, #about, #help, #info { z-index: 100001; }   /* one of these is open at a time */
#selector.open, #config.open, #about.open, #help.open, #info.open { display: flex; }

.sel-box, .config-box, .about-box, .help-box {
  background: var(--phosphor-bg); color: var(--phosphor);
  border: 1px solid var(--phosphor-border); border-radius: 4px;
  box-shadow: 0 0 30px rgba(60, 220, 110, 0.15);
  text-shadow: 0 0 5px rgba(70, 230, 120, 0.35);   /* phosphor glow */
}
/* Fixed height (not max-height) so the box doesn't grow/shrink and re-center as
   you move between genres of different lengths — short genres get empty space,
   long ones (All) scroll within the stable frame. */
.sel-box { display: flex; flex-direction: column; width: 380px; height: min(70vh, 460px); font-size: 13px; }

.sel-head { display: flex; align-items: center; justify-content: center; padding: 11px 16px; border-bottom: 1px solid var(--phosphor-divider); }
.sel-title { cursor: pointer; letter-spacing: 0.12em; color: var(--phosphor-bright); }
.sel-title:hover { color: var(--phosphor-hi); }

/* Two-pane picker: a left column (2D/3D filter + genre rail) drives the detail
   list. The filter box and the genre-name header share a row, both 30px tall so
   their bottom borders line up across the divider. */
.sel-main { display: flex; flex: 1; min-height: 0; }
.sel-left { display: flex; flex-direction: column; width: 118px; flex: none; min-height: 0; border-right: 1px solid var(--phosphor-divider); }
.sel-dims { height: 30px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 12px; font-size: 11px; color: var(--phosphor-mid); border-bottom: 1px solid var(--phosphor-divider); }
.sel-dims label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sel-dims input { accent-color: var(--phosphor-accent); cursor: pointer; }
.sel-cats { list-style: none; overflow-y: auto; padding: 6px 0; flex: 1; min-height: 0; }
.sel-cats li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 14px; cursor: pointer; white-space: nowrap; }
.sel-cats li:hover { background: #0c2a18; }
.sel-cats li.cursor { background: #0b2616; box-shadow: inset 3px 0 0 var(--phosphor-dim); color: var(--phosphor-hi); }
.sel-main.focus-rail .sel-cats li.cursor { background: #0e3320; box-shadow: inset 3px 0 0 var(--phosphor); }
.sel-cats .cat-count { color: var(--phosphor-dim); }
.sel-cats li.cursor .cat-count { color: var(--phosphor-mid); }
.sel-detail { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.sel-cat-head { height: 30px; box-sizing: border-box; padding: 0 16px; line-height: 30px; font-size: 11px; letter-spacing: 0.08em; color: var(--phosphor-dim); border-bottom: 1px solid var(--phosphor-divider); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sel-list { list-style: none; overflow-y: scroll; padding: 6px 0; flex: 1; min-height: 0; }
.sel-list li { display: flex; gap: 7px; align-items: baseline; padding: 4px 16px; cursor: pointer; white-space: nowrap; }
.sel-list li:hover { background: #0c2a18; }
.sel-badge { flex: none; width: 1em; color: var(--phosphor-dim); }
.sel-list li.active .sel-badge { color: #021; }
.sel-list li.sel-empty { color: var(--phosphor-dim); cursor: default; }
.sel-list li.sel-empty:hover { background: none; }
.sel-list li.cursor { background: #0b2616; box-shadow: inset 3px 0 0 var(--phosphor-dim); }
.sel-main.focus-list .sel-list li.cursor { background: #0e3320; box-shadow: inset 3px 0 0 var(--phosphor); }
.sel-list li.active { color: #021; background: var(--phosphor); text-shadow: none; }
.sel-list::-webkit-scrollbar { width: 8px; }
.sel-list::-webkit-scrollbar-thumb { background: var(--phosphor-border); border-radius: 4px; }
.sel-list::-webkit-scrollbar-track { background: transparent; }

/* Footer guides inside the picker. */
.sel-foot {
  padding: 9px 16px; border-top: 1px solid var(--phosphor-divider);
  font-size: 11.5px; letter-spacing: 0.02em; color: var(--phosphor-dim);
  text-align: center;
}
.sel-foot span { cursor: pointer; }
.sel-foot span:hover { color: #7fd49a; }
.sel-foot u { color: var(--phosphor-mid); text-underline-offset: 2px; }

.config-box { display: flex; flex-direction: column; width: 280px; max-height: 80vh; font-size: 12.5px; }
.config-title { padding: 11px 16px; letter-spacing: 0.12em; color: var(--phosphor-bright); border-bottom: 1px solid var(--phosphor-divider); }
.config-body { padding: 14px 16px; overflow-y: auto; }
.config-empty { color: var(--phosphor-dim); }

.about-box { width: 300px; font-size: 12.5px; line-height: 1.55; }
.about-title, .help-title { padding: 11px 16px; letter-spacing: 0.12em; color: var(--phosphor-bright); border-bottom: 1px solid var(--phosphor-divider); }
.about-body { padding: 14px 16px; }
.about-body p { margin: 0 0 10px; }
.about-body p:last-child { margin-bottom: 0; }
.about-body a { color: var(--phosphor-bright); text-decoration: none; border-bottom: 1px dotted #2f7a4a; }
.about-body a:hover { color: var(--phosphor-hi); }
.info-credit { margin-top: 14px; color: var(--phosphor-dim); }
.about-hint {
  padding: 9px 16px; border-top: 1px solid var(--phosphor-divider);
  font-size: 11px; letter-spacing: 0.02em; color: var(--phosphor-dim);
}

.help-box { width: 280px; font-size: 12.5px; }
.help-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; padding: 14px 16px; margin: 0; }
.help-list dt { color: var(--phosphor-bright); white-space: nowrap; }
.help-list dd { margin: 0; color: var(--phosphor); }

#cfg-link, #fps, #hackname {
  position: fixed; z-index: 99998; cursor: default;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px; color: rgba(120, 230, 150, 0.4);
}
/* Current hack name, upper-left — same drop-shadow as #fps, light grey. */
#hackname {
  top: 11px; left: 14px; letter-spacing: 0.08em;
  color: #c8c8c8; text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
}
#cfg-link { top: 12px; right: 14px; cursor: pointer; }
#cfg-link:hover { color: rgba(150, 240, 175, 0.78); }
#cfg-link u { text-underline-offset: 2px; }
#fps {
  bottom: 11px; right: 14px; font-variant-numeric: tabular-nums;
  color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
}