/* ==========================================================================
   PIP-OS — pipboy.css
   Tab bar, sub-tabs, content area, status bar, lists, knobs.
   ========================================================================== */

/* ----- Boot --------------------------------------------------------------- */
.boot {
  position: absolute;
  inset: 0;
  z-index: 100;
  padding: 28px 36px;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--phosphor);
  white-space: pre-wrap;
  overflow: hidden;
}
.boot .cursor::after {
  content: "_";
  display: inline-block;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}
.boot .ascii {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  white-space: pre;
}

/* ----- UI shell ---------------------------------------------------------- */

.ui {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: var(--tab-h) var(--subtab-h) 1fr var(--status-h);
  padding: 10px 14px;
  gap: 6px;
}

.topbar {
  display: flex;
  align-items: stretch;
  gap: 14px;
  border-bottom: 1px solid var(--phosphor-dim);
  padding-bottom: 4px;
}

.tabs {
  display: flex;
  gap: 0;
  flex: 1;
  align-items: end;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 1 1 0;
  font-size: 28px;
  letter-spacing: 4px;
  padding: 4px 8px;
  text-align: center;
  color: var(--phosphor-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast);
}

.tab:hover {
  color: var(--phosphor);
}

.tab[aria-selected="true"] {
  color: var(--phosphor-deep);
  background: var(--phosphor);
  border-bottom-color: var(--phosphor);
  text-shadow: none;
}

.topmeta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--phosphor-dim);
}

.vault-tag {
  border: 1px solid var(--phosphor-dim);
  padding: 2px 8px;
  letter-spacing: 1px;
}

.battery {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--phosphor-dim);
  padding: 1px 4px;
  position: relative;
}
.battery::after {
  /* battery cap */
  content: "";
  width: 3px;
  height: 8px;
  background: var(--phosphor-dim);
  margin-left: 2px;
  display: inline-block;
}
.battery .bar {
  width: 24px;
  height: 8px;
  background: linear-gradient(90deg, var(--phosphor) var(--bv, 100%), var(--phosphor-mid) 0);
}
.battery .bv { font-size: 12px; }

/* ----- Sub-tabs ---------------------------------------------------------- */

.subtabs {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--phosphor-dim);
  padding: 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }

.subtab {
  cursor: pointer;
  padding: 2px 4px;
  white-space: nowrap;
}
.subtab[aria-selected="true"] {
  color: var(--phosphor);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ----- Content area ------------------------------------------------------ */

.content {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--phosphor-dim) transparent;
}
.content::-webkit-scrollbar { width: 8px; }
.content::-webkit-scrollbar-thumb { background: var(--phosphor-dim); }

/* ----- Status bar -------------------------------------------------------- */

.statusbar {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--phosphor-dim);
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  flex-wrap: wrap;
}
.statusbar .stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.statusbar label { color: var(--phosphor-dim); }
.statusbar .bar {
  display: inline-block;
  width: 60px;
  height: 8px;
  background: var(--phosphor-mid);
  position: relative;
}
.statusbar .bar .fill {
  display: block;
  height: 100%;
  background: var(--phosphor);
  width: 100%;
}
.statusbar .bar.rad .fill { background: var(--phosphor-dim); }

/* ----- Generic list rows ------------------------------------------------- */

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list li {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 4px 6px;
  border-bottom: 1px dashed var(--phosphor-line);
  cursor: pointer;
}
.list li:hover { background: var(--phosphor-mid); }
.list li[aria-selected="true"] { background: var(--phosphor); color: var(--phosphor-deep); text-shadow: none; }
.list li .name   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list li .badges { display: flex; gap: 6px; }
.list li .badge  { font-family: var(--font-mono); font-size: 12px; color: var(--phosphor-dim); }

/* Card layout */
.card {
  border: 1px solid var(--phosphor-dim);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.card h3 { margin: 0 0 6px; letter-spacing: 2px; }
.card p  { margin: 0 0 6px; font-size: 16px; line-height: 1.3; }

/* Two-column tab content */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  height: 100%;
}
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } }

/* Inline labels */
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.kv label { color: var(--phosphor-dim); }

/* Generic bar */
.bar2 {
  height: 10px;
  background: var(--phosphor-mid);
  position: relative;
  overflow: hidden;
}
.bar2 .f { height: 100%; background: var(--phosphor); }

/* SPECIAL grid */
.special {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 6px 0 0;
  font-family: var(--font-mono);
}
.special .stat {
  text-align: center;
  border: 1px solid var(--phosphor-dim);
  padding: 6px 0;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  outline: none;
}
.special .stat:hover { background: var(--phosphor-mid); }
.special .stat.focus {
  background: var(--phosphor);
  color: var(--phosphor-deep);
  border-color: var(--phosphor);
  text-shadow: none;
}
.special .stat .l   { font-size: 28px; line-height: 1; }
.special .stat .v   { font-size: 22px; line-height: 1; }
.special .stat .nm  { font-size: 11px; opacity: 0.75; letter-spacing: 1px; }

/* Inline detail panel for the focused SPECIAL stat */
.special-detail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  margin: 8px 0 4px;
  padding: 6px 8px;
  border: 1px dashed var(--phosphor-line);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  min-height: 28px;
}
.special-detail .sd-name { letter-spacing: 2px; color: var(--phosphor); }
.special-detail .sd-val  { color: var(--phosphor-dim); font-size: 12px; }
.special-detail .sd-desc { color: var(--phosphor-dim); }

@media (max-width: 700px) {
  .special { grid-template-columns: repeat(4, 1fr); }
  .special-detail { grid-template-columns: 1fr; gap: 2px; }
}

/* Vault Boy block (CSS art container) */
.vbox {
  display: flex;
  align-items: center;
  gap: 16px;
}
.vbox svg {
  width: 160px;
  height: 200px;
  filter: drop-shadow(0 0 4px var(--phosphor-glow));
  cursor: pointer;
  user-select: none;
}
.vbox .meta { flex: 1; }

/* Karma meter */
.karma {
  margin: 8px 0;
}
.karma .track {
  height: 6px;
  background: var(--phosphor-mid);
  position: relative;
  margin: 4px 0;
}
.karma .indicator {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 12px;
  background: var(--phosphor);
}
.karma .lbls {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--phosphor-dim);
  font-family: var(--font-mono);
}

/* Map container */
.map-wrap {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 12px;
  height: 100%;
  min-height: 0;
}
@media (max-width: 800px) { .map-wrap { grid-template-columns: 1fr; } }

.map-stage {
  position: relative;
  border: 1px solid var(--phosphor-dim);
  background: var(--phosphor-deep);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  min-height: 0;
}
.map-stage > #mapsvg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.map-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
}
.map-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-img-wrap svg.wm-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.map-img-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

.map-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}
.map-btn {
  width: 32px;
  height: 32px;
  background: var(--phosphor-deep);
  color: var(--phosphor);
  border: 1px solid var(--phosphor);
  font-family: var(--font-mono);
  font-size: 18px;
  cursor: pointer;
  text-shadow: 0 0 6px var(--phosphor-glow);
}
.map-btn:hover { background: var(--phosphor-mid); }
.map-zoom-readout {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--phosphor-dim);
  background: var(--phosphor-deep);
  padding: 1px 6px;
  border: 1px solid var(--phosphor-line);
  pointer-events: none;
}

.map-wrap .legend { font-size: 14px; overflow-y: auto; padding-right: 4px; }
.legend .card.you {
  border: 1px dashed var(--phosphor);
  padding: 6px 10px;
  margin-bottom: 8px;
}
.legend .card.you h3 {
  margin: 0 0 2px;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--phosphor-dim);
}

/* Marker */
.marker {
  fill: var(--phosphor-mid);
  stroke: var(--phosphor);
  stroke-width: 1;
  cursor: pointer;
  transition: fill var(--t-fast);
}
.marker:hover, .marker.active { fill: var(--phosphor); }
.marker-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--phosphor);
  pointer-events: none;
}

/* Compass */
.compass {
  position: relative;
  width: 100%;
  height: 36px;
  background: var(--phosphor-deep);
  border: 1px solid var(--phosphor-dim);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--phosphor);
  margin-bottom: 6px;
}
.compass .ticks {
  position: absolute;
  white-space: nowrap;
  top: 0;
  left: 0;
  height: 22px;
  display: flex;
  align-items: center;
  transition: transform var(--t-med);
  letter-spacing: 0;
}
.compass .ticks .t {
  display: inline-block;
  width: 4px;
  text-align: center;
  color: var(--phosphor-dim);
}
.compass .ticks .t.big   { color: var(--phosphor); width: 16px; font-weight: bold; letter-spacing: 1px; }
.compass .ticks .t.med   { color: var(--phosphor-dim); }
.compass .ticks .t.small { color: var(--phosphor-line); }
.compass .cmark {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 22px;
  background: var(--phosphor);
  box-shadow: 0 0 6px var(--phosphor);
  transform: translateX(-50%);
  pointer-events: none;
}
.compass .cmark::after {
  content: "▼";
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--phosphor);
}
.compass .cinfo {
  position: absolute;
  bottom: 1px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--phosphor-dim);
  pointer-events: none;
  background: var(--phosphor-deep);
}

/* Radio */
.radio {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.6fr;
  gap: 16px;
  height: 100%;
  min-height: 0;
}
@media (max-width: 800px) { .radio { grid-template-columns: 1fr; } }

.radio .stations {
  font-size: 16px;
  overflow-y: auto;
  padding-right: 4px;
}
.radio .stations .s {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--phosphor-line);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.radio .stations .s:hover { background: var(--phosphor-mid); }
.radio .stations .s.active {
  background: var(--phosphor);
  color: var(--phosphor-deep);
  text-shadow: none;
}
.radio .stations .s.active .s-meta { color: var(--phosphor-deep); }
.radio .stations .s-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radio .stations .s-meta {
  display: flex; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--phosphor-dim);
}
.radio .stations .s-live.on  { color: var(--phosphor); }
.radio .stations .s.active .s-live.on { color: var(--phosphor-deep); }
.radio .stations .s-live.off { opacity: 0.6; }

.radio .panel {
  border: 1px solid var(--phosphor-dim);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.radio .panel .panel-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  letter-spacing: 1px;
}

.radio .ticker {
  height: 44px;
  overflow: hidden;
  position: relative;
  border: 1px dashed var(--phosphor-line);
  background: var(--phosphor-deep);
  font-family: var(--font-mono);
  font-size: 14px;
}
.radio .ticker .scroll {
  position: absolute;
  white-space: nowrap;
  top: 50%;
  transform: translateY(-50%);
  animation: ticker 28s linear infinite;
}
@keyframes ticker {
  from { left: 100%; }
  to   { left: -200%; }
}

/* Spotify embed shell — frame + monochrome tint */
.radio .spotify-shell {
  position: relative;
  border: 2px solid var(--phosphor-dim);
  padding: 8px;
  background: var(--phosphor-deep);
  min-height: 84px;
}
.radio .spotify-shell::before,
.radio .spotify-shell::after {
  /* Corner crops, like a Pip-Boy display window */
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 2px solid var(--phosphor);
  pointer-events: none;
}
.radio .spotify-shell::before { top: -2px; left: -2px;  border-right: 0; border-bottom: 0; }
.radio .spotify-shell::after  { top: -2px; right: -2px; border-left: 0;  border-bottom: 0; }

.radio .spotify-embed {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 4px;
  /* Tint the Spotify player toward the phosphor palette without blocking interaction. */
  filter: hue-rotate(40deg) saturate(0.75) contrast(1.05);
  background: #000;
}

[data-theme="amber"] .radio .spotify-embed { filter: hue-rotate(-40deg) saturate(0.7) contrast(1.05); }
[data-theme="blue"]  .radio .spotify-embed { filter: hue-rotate(170deg) saturate(0.7) contrast(1.05); }
[data-theme="white"] .radio .spotify-embed { filter: grayscale(1) contrast(1.1); }

.radio .no-signal {
  height: 110px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0, transparent 6px,
      var(--phosphor-mid) 6px, var(--phosphor-mid) 7px
    );
  font-family: var(--font-mono);
  letter-spacing: 2px;
}
.radio .no-signal .ns-title { font-size: 18px; }
.radio .no-signal .ns-sub   { font-size: 12px; opacity: 0.7; letter-spacing: 1px; }
.radio .no-signal code      { background: var(--phosphor-mid); padding: 1px 5px; border: 1px solid var(--phosphor-line); }

/* Panel controls — labelled tuner + volume */
.radio .panel-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.radio .ctl {
  display: grid;
  grid-template-columns: 60px 1fr 64px;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
}
.radio .ctl-lbl { color: var(--phosphor-dim); }
.radio .ctl-val { text-align: right; color: var(--phosphor); }

/* Frequency strip — like a tuning dial scale under the controls */
.radio .freq-strip {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  opacity: 0.55;
  border-top: 1px dashed var(--phosphor-line);
  padding-top: 4px;
}

/* Phosphor-themed range slider (volume + tuner) */
input[type="range"].pip {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  outline: none;
  margin: 0;
  cursor: pointer;
}
input[type="range"].pip::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--phosphor-mid);
  border: 1px solid var(--phosphor-dim);
  border-radius: 0;
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 11px,
      var(--phosphor-dim) 11px,
      var(--phosphor-dim) 12px
    );
}
input[type="range"].pip::-moz-range-track {
  height: 6px;
  background: var(--phosphor-mid);
  border: 1px solid var(--phosphor-dim);
  border-radius: 0;
}
input[type="range"].pip::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 22px;
  background: var(--phosphor);
  border: 0;
  border-radius: 0;
  margin-top: -9px;
  box-shadow: 0 0 6px var(--phosphor);
  cursor: ew-resize;
}
input[type="range"].pip::-moz-range-thumb {
  width: 6px;
  height: 22px;
  background: var(--phosphor);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 6px var(--phosphor);
  cursor: ew-resize;
}
input[type="range"].pip:focus-visible::-webkit-slider-thumb { background: var(--phosphor); outline: 2px solid var(--phosphor); }
input[type="range"].pip:focus-visible::-moz-range-thumb     { background: var(--phosphor); outline: 2px solid var(--phosphor); }

.knob {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--phosphor-mid), var(--phosphor-deep));
  border: 2px solid var(--phosphor-dim);
  position: relative;
  cursor: grab;
  margin: 0 auto;
}
.knob::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 30px;
  background: var(--phosphor);
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(var(--knob-rot, -135deg));
  transition: transform var(--t-fast);
}

/* Perks — split list + detail */
.perks-card { padding: 8px 10px; }
.perks-split {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 1.4fr;
  gap: 10px;
}
@media (max-width: 800px) { .perks-split { grid-template-columns: 1fr; } }
.perks-lists { display: flex; flex-direction: column; gap: 8px; }
.perks-h {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--phosphor-dim);
  border-bottom: 1px dashed var(--phosphor-line);
  padding-bottom: 2px;
  display: flex; gap: 8px; align-items: baseline;
}
.perks-count { font-family: var(--font-mono); font-size: 10px; }
.perks-list { list-style: none; margin: 0; padding: 0; }
.perks-list li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 3px 6px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px dashed var(--phosphor-line);
}
.perks-list li:hover { background: var(--phosphor-mid); }
.perks-list li.sel {
  background: var(--phosphor);
  color: var(--phosphor-deep);
  text-shadow: none;
}
.perks-list li.sel .p-rank,
.perks-list li.sel .p-bullet { color: var(--phosphor-deep); }
.perks-list li.locked { opacity: 0.7; }
.perks-list li.locked.blocked { opacity: 0.4; }
.perks-list li.empty { cursor: default; opacity: 0.5; }
.perks-list li.empty:hover { background: transparent; }
.p-bullet { text-align: center; color: var(--phosphor-dim); }
.p-name   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-rank {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--phosphor-dim);
  letter-spacing: 1px;
}

.perks-detail {
  border: 1px solid var(--phosphor-dim);
  padding: 10px 12px;
  font-size: 14px;
}
.perk-card .p-title { margin: 0; letter-spacing: 2px; font-size: 18px; }
.perk-card .p-sub {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--phosphor-dim);
  margin: 2px 0 4px;
}
.perk-card .p-req {
  border: 1px solid var(--phosphor-line);
  padding: 0 4px;
}
.perk-card .p-req.ok { border-color: var(--phosphor); color: var(--phosphor); }
.perk-card .p-req.no { border-style: dashed; opacity: 0.7; }
.perk-card .p-blurb { margin: 6px 0; opacity: 0.9; line-height: 1.3; }
.perk-card .p-h {
  margin: 10px 0 4px;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--phosphor-dim);
  border-bottom: 1px dashed var(--phosphor-line);
  padding-bottom: 2px;
}
.perk-card .p-ranks { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: 12px; }
.perk-card .p-ranks li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  padding: 2px 0;
  opacity: 0.55;
}
.perk-card .p-ranks li.have { opacity: 1; }
.perk-card .p-ranks li.next { opacity: 0.85; }
.perk-card .p-ranks li.have .p-rk { color: var(--phosphor); }
.perk-card .p-rk {
  text-align: center;
  border: 1px solid var(--phosphor-line);
  font-weight: bold;
}
.perk-card .p-ranks li.have .p-rk { border-color: var(--phosphor); }
.perk-card .p-source {
  margin: 8px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--phosphor-dim);
}
.perk-card .p-actions { display: flex; gap: 8px; margin-top: 6px; }
.perk-card .p-actions .btn[disabled] {
  opacity: 0.5; cursor: not-allowed; border-style: dashed;
}

/* Quests — two-column split: list + detail */
.quests-split {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.6fr;
  gap: 14px;
  height: 100%;
  min-height: 0;
}
@media (max-width: 800px) { .quests-split { grid-template-columns: 1fr; } }

.quests-list {
  overflow-y: auto;
  padding-right: 4px;
}
.quests-section { margin-bottom: 12px; }
.qh {
  margin: 0 0 4px;
  font-size: 16px;
  letter-spacing: 3px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.qh .qcount {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--phosphor-dim);
  letter-spacing: 1px;
}
.quests-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.quests-ul li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px dashed var(--phosphor-line);
  cursor: pointer;
  transition: background var(--t-fast);
}
.quests-ul li:hover { background: var(--phosphor-mid); }
.quests-ul li.sel {
  background: var(--phosphor);
  color: var(--phosphor-deep);
  text-shadow: none;
}
.quests-ul li.sel .q-prog,
.quests-ul li.sel .q-tag,
.quests-ul li.sel .q-bullet { color: var(--phosphor-deep); }
.quests-ul li.empty { cursor: default; opacity: 0.5; }
.quests-ul li.empty:hover { background: transparent; }
.quests-ul.completed li { opacity: 0.7; }
.q-bullet { color: var(--phosphor-dim); font-size: 14px; min-width: 14px; text-align: center; }
.q-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-prog {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--phosphor-dim);
  letter-spacing: 1px;
  white-space: nowrap;
}
.q-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  border: 1px solid var(--phosphor);
  padding: 1px 5px;
}

/* Quest detail card */
.quests-detail {
  border: 1px solid var(--phosphor-dim);
  padding: 14px 16px;
  overflow-y: auto;
}
.quest-card header { margin-bottom: 8px; }
.quest-card .q-title { margin: 0; letter-spacing: 2px; font-size: 22px; }
.quest-card .q-sub {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--phosphor-dim);
  margin-top: 2px;
}
.quest-card .q-blurb { font-size: 16px; line-height: 1.35; opacity: 0.9; }
.quest-card .q-h {
  margin: 14px 0 6px;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--phosphor-dim);
  border-bottom: 1px dashed var(--phosphor-line);
  padding-bottom: 2px;
}
.quest-card .q-objs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.quest-card .q-objs li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 16px;
}
.quest-card .q-objs li.done .q-text {
  text-decoration: line-through;
  opacity: 0.55;
}
.q-check {
  width: 16px;
  height: 16px;
  border: 2px solid var(--phosphor);
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: inline-block;
  position: relative;
}
.q-check.done::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--phosphor);
}
button.q-check { box-shadow: 0 0 0 0 var(--phosphor-glow); transition: box-shadow var(--t-fast); }
button.q-check:hover { box-shadow: 0 0 8px var(--phosphor-glow); }
button.q-check:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }

.quest-card .q-rewards {
  margin: 12px 0 10px;
  padding: 6px 10px;
  border: 1px dashed var(--phosphor-line);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--phosphor-dim);
}
.quest-card .q-rewards strong { color: var(--phosphor); font-weight: bold; }

.quest-card .q-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.quest-card .q-actions .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  border-style: dashed;
}

/* Notes */
.note {
  border: 1px dashed var(--phosphor-line);
  padding: 10px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  white-space: pre-wrap;
}

/* Achievements — header + filter, split list/detail */
.ach-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 4px 0 8px;
  border-bottom: 1px dashed var(--phosphor-line);
  margin-bottom: 8px;
}
.ach-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 2px;
}
.ach-counter .ach-num { color: var(--phosphor); font-weight: bold; }
.ach-counter .ach-pct { color: var(--phosphor-dim); }
.ach-counter .ach-bar {
  display: inline-block;
  width: 120px;
  height: 8px;
  background: var(--phosphor-mid);
  border: 1px solid var(--phosphor-line);
  position: relative;
}
.ach-counter .ach-fill {
  display: block;
  height: 100%;
  background: var(--phosphor);
  transition: width var(--t-med);
}
.ach-filters { display: flex; gap: 4px; }
.ach-filters .btn.active {
  background: var(--phosphor);
  color: var(--phosphor-deep);
  text-shadow: none;
}

.ach-split {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 1.4fr;
  gap: 14px;
  min-height: 0;
}
@media (max-width: 800px) { .ach-split { grid-template-columns: 1fr; } }
.ach-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}
.ach-list li {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border-bottom: 1px dashed var(--phosphor-line);
  cursor: pointer;
  font-size: 15px;
}
.ach-list li:hover { background: var(--phosphor-mid); }
.ach-list li.sel {
  background: var(--phosphor);
  color: var(--phosphor-deep);
  text-shadow: none;
}
.ach-list li.sel .ach-cat,
.ach-list li.sel .ach-mark { color: var(--phosphor-deep); }
.ach-list li.pending { opacity: 0.75; }
.ach-list li.pending .ach-name { color: var(--phosphor-dim); }
.ach-list li.empty { cursor: default; opacity: 0.5; text-align: center; padding: 14px; }
.ach-mark { text-align: center; }
.ach-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--phosphor-dim);
}

.ach-detail {
  border: 1px solid var(--phosphor-dim);
  padding: 12px 14px;
  font-size: 14px;
  overflow-y: auto;
}
.ach-detail .ach-title { margin: 0; letter-spacing: 2px; font-size: 20px; }
.ach-detail .ach-sub {
  display: flex; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--phosphor-dim);
  margin: 2px 0 6px;
}
.ach-detail .ach-status.got { color: var(--phosphor); }
.ach-detail .ach-blurb { line-height: 1.35; opacity: 0.9; }
.ach-detail .ach-hint {
  margin-top: 10px;
  padding: 6px 10px;
  border: 1px dashed var(--phosphor-line);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--phosphor-dim);
}
.ach-detail .ach-hint.got { color: var(--phosphor); border-style: solid; letter-spacing: 4px; text-align: center; }

/* Workshop — split list/detail */
.rec-split {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1.4fr;
  gap: 14px;
  min-height: 0;
}
@media (max-width: 800px) { .rec-split { grid-template-columns: 1fr; } }
.rec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}
.rec-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border-bottom: 1px dashed var(--phosphor-line);
  cursor: pointer;
  font-size: 15px;
}
.rec-list li:hover { background: var(--phosphor-mid); }
.rec-list li.sel {
  background: var(--phosphor); color: var(--phosphor-deep); text-shadow: none;
}
.rec-list li.sel .rec-bullet { color: var(--phosphor-deep); }
.rec-list li.blocked { opacity: 0.65; }
.rec-bullet { color: var(--phosphor); text-align: center; }
.rec-list li.blocked .rec-bullet { color: var(--phosphor-dim); }

.rec-detail {
  border: 1px solid var(--phosphor-dim);
  padding: 12px 14px;
  font-size: 14px;
  overflow-y: auto;
}
.rec-detail .rec-title { margin: 0; letter-spacing: 2px; font-size: 18px; }
.rec-detail .rec-blurb { margin: 4px 0 8px; opacity: 0.85; }
.rec-detail .rec-h {
  margin: 10px 0 4px;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--phosphor-dim);
  border-bottom: 1px dashed var(--phosphor-line);
  padding-bottom: 2px;
}
.rec-ings { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: 13px; }
.rec-ings li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  padding: 3px 0;
}
.rec-ings li.no { opacity: 0.55; }
.rec-ings li.no .rec-pip { color: var(--phosphor-dim); }
.rec-pip { text-align: center; }
.rec-iname { color: var(--phosphor); }
.rec-iqty {
  color: var(--phosphor-dim);
  letter-spacing: 1px;
}
.rec-yield {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border: 1px dashed var(--phosphor-line);
  padding: 6px 10px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  letter-spacing: 1px;
}
.rec-yield .rec-yname { color: var(--phosphor); }
.rec-yield .rec-yqty  { color: var(--phosphor-dim); }
.rec-actions { display: flex; gap: 8px; }
.rec-actions .btn[disabled] { opacity: 0.5; cursor: not-allowed; border-style: dashed; }

/* Notes — header + split list/reader + karma actions */
.notes-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--phosphor-line);
  margin-bottom: 8px;
}
.notes-count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--phosphor-dim);
}
.notes-split {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.6fr;
  gap: 14px;
  min-height: 0;
  margin-bottom: 12px;
}
@media (max-width: 800px) { .notes-split { grid-template-columns: 1fr; } }
.notes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}
.notes-list li {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border-bottom: 1px dashed var(--phosphor-line);
  cursor: pointer;
  font-size: 14px;
}
.notes-list li:hover { background: var(--phosphor-mid); }
.notes-list li.sel {
  background: var(--phosphor); color: var(--phosphor-deep); text-shadow: none;
}
.notes-list li.sel .n-bullet,
.notes-list li.sel .n-tag { color: var(--phosphor-deep); }
.notes-list li.read { opacity: 0.7; }
.notes-list li.read .n-title { color: var(--phosphor-dim); }
.n-bullet { color: var(--phosphor); text-align: center; }
.notes-list li.read .n-bullet { color: var(--phosphor-dim); }
.n-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--phosphor-dim);
}

.notes-reader {
  border: 1px solid var(--phosphor-dim);
  padding: 12px 16px;
  font-size: 15px;
  overflow-y: auto;
}
.notes-reader .n-h { margin: 0; letter-spacing: 2px; font-size: 20px; }
.notes-reader .n-sub {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--phosphor-dim);
  margin: 2px 0 8px;
}
.notes-reader .n-tag-big {
  border: 1px solid var(--phosphor-dim);
  padding: 0 5px;
  letter-spacing: 2px;
}
.notes-reader .n-body {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  margin: 0;
}
.karma-actions { margin-top: 8px; }

/* Holotape grid */
.holotapes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.holotape {
  border: 2px solid var(--phosphor-dim);
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 1px;
  transition: background var(--t-fast);
}
.holotape:hover { background: var(--phosphor-mid); }
.holotape .lbl { display: block; margin-top: 6px; }
.holotape svg { width: 60px; height: 40px; }

/* Bobblehead pickup pixel */
.bobblepixel {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--phosphor);
  vertical-align: middle;
  margin-left: 4px;
  cursor: pointer;
  filter: drop-shadow(0 0 6px var(--phosphor));
  opacity: 0.4;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.bobblepixel:hover {
  opacity: 1;
  transform: scale(2);
}
.bobblepixel.found { opacity: 0; pointer-events: none; }

/* Buttons inside tabs */
.btn {
  background: var(--phosphor-deep);
  color: var(--phosphor);
  border: 1px solid var(--phosphor);
  padding: 4px 10px;
  font-family: var(--font-pip);
  cursor: pointer;
  letter-spacing: 1px;
}
.btn:hover { background: var(--phosphor-mid); }
/* Destructive actions stay monochrome — Pip-Boy is single-color.
   We mark them with a dashed border + bracketed prefix instead of red. */
.btn.danger { border-style: dashed; }
.btn.danger::before { content: "[!] "; letter-spacing: 1px; }
.btn.danger:hover { background: var(--phosphor-mid); }
.btn.ghost { border-color: var(--phosphor-dim); color: var(--phosphor-dim); }
.btn.ghost:hover { color: var(--phosphor); border-color: var(--phosphor); }
.btn.tiny  { font-size: 14px; padding: 2px 6px; }

/* In-Pip-Boy modal */
.pip-modal-back {
  position: absolute;
  inset: 0;
  z-index: 230;
  background: rgba(0, 0, 0, 0.65);
  display: grid;
  place-items: center;
  animation: pipmodal-fade 140ms ease-out;
}
.pip-modal-back.closing { animation: pipmodal-fade 140ms ease-out reverse; }
@keyframes pipmodal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pip-modal {
  background: var(--phosphor-deep);
  border: 2px solid var(--phosphor);
  width: min(560px, 88%);
  max-height: 80%;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px var(--phosphor-deep),
    0 0 0 3px var(--phosphor-mid),
    0 0 28px var(--phosphor-glow);
  font-family: var(--font-pip);
  position: relative;
}
.pip-modal::before, .pip-modal::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--phosphor);
  pointer-events: none;
}
.pip-modal::before { top: -2px; left: -2px;  border-right: 0; border-bottom: 0; }
.pip-modal::after  { top: -2px; right: -2px; border-left: 0;  border-bottom: 0; }
.pip-modal-head {
  background: var(--phosphor);
  color: var(--phosphor-deep);
  padding: 4px 12px;
  letter-spacing: 4px;
  font-size: 16px;
  text-shadow: none;
}
.pip-modal-body {
  padding: 14px 18px;
  overflow-y: auto;
  font-size: 18px;
  line-height: 1.3;
  flex: 1;
}
.pip-modal-body p   { margin: 0 0 8px; }
.pip-modal-body h3  { margin: 6px 0 4px; letter-spacing: 2px; }
.pip-modal-body code{ background: var(--phosphor-mid); padding: 1px 5px; border: 1px solid var(--phosphor-line); font-family: var(--font-mono); font-size: 14px; }
.pip-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px dashed var(--phosphor-line);
}