:root {
  --black: #000000;
  --accent: #00ff66;
  --accent-soft: #00aa44;
  --muted: #577a61;
  --disabled: var(--muted);
  --pipboy-hud-background: rgba(0, 170, 68, 0.25);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--accent);
  background: var(--black);
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  letter-spacing: 0.01em;
}

/* Scroll-area scrollbar standard. Keep this identical to the original Perks
   scrollbar and keep it inside the component's own layout block. */
.scroll-area {
  padding-right: 4px;
}

.scroll-area::-webkit-scrollbar {
  width: 12px;
}

.scroll-area::-webkit-scrollbar-track {
  background: var(--black);
  border: 1px solid var(--accent);
}

.scroll-area::-webkit-scrollbar-thumb {
  background: var(--accent);
}

body > * {
  position: relative;
  z-index: 1;
}

.pipboy-hud-box {
  display: flex;
  min-height: 32px;
  align-items: center;
  padding: 7px 10px;
  border: 0;
  background: var(--pipboy-hud-background);
  color: var(--accent);
  font: 0.9rem/1.1 "Courier New", Courier, monospace;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.pipboy-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: min(260px, calc(100vw - 16px));
  backdrop-filter: blur(2px);
  pointer-events: none;
  white-space: normal;
}

.pipboy-tooltip[hidden] {
  display: none !important;
}

.app-shell {
  padding: 12px;
}

.topbar,
.page-wrap {
  width: 100%;
  margin: 0 auto;
}

.topbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--accent);
  background: var(--black);
}

.brand {
  display: grid;
  gap: 4px;
}

.brand-kicker,
.eyebrow,
.card-kicker {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.brand strong,
.hero h1,
.card-head h2,
.wizard-panel h2,
.placeholder-panel h2 {
  margin: 0;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand strong {
  font-size: 1rem;
}

.hero h1 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.card-head h2,
.wizard-panel h2,
.placeholder-panel h2 {
  font-size: 1.05rem;
}

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nav-tabs a,
.chip,
.cta,
button,
input {
  font: inherit;
}

.nav-tabs a,
.chip,
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--black);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 0;
  padding: 0.55rem 0.9rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.nav-tabs a:hover,
.chip:hover,
.cta:hover {
  background: var(--accent-soft);
  color: var(--black);
  border-color: var(--accent);
}

.nav-tabs a.is-active,
.chip.is-active,
.list-card.is-active,
.wizard-panel.is-active .active-field {
  background: var(--accent);
  color: var(--black);
  border-color: var(--accent);
}

.nav-tabs a:focus-visible,
.chip:focus-visible,
.cta:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.page-wrap {
  display: grid;
  gap: 12px;
}

.system-hud {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--accent);
  border-top: 0;
  background: var(--black);
}

.system-hud__item {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 7px 10px 8px;
  border-left: 1px solid var(--accent-soft);
}

.system-hud__item:first-child {
  border-left: 0;
}

.system-hud__item--wide {
  grid-column: span 1;
}

.system-hud__label {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.system-hud strong {
  overflow: hidden;
  color: var(--accent);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero,
.dashboard,
.wizard-frame {
  display: grid;
  gap: 12px;
}

.hero {
  grid-template-columns: 1.4fr 0.6fr;
  align-items: stretch;
  padding: 12px;
  border: 1px solid var(--accent);
  background: var(--black);
}

.hero-copy,
.microcopy,
.history-item p,
.empty-state,
.result-meta,
.card-kicker,
.field span,
.field small,
.placeholder-panel p {
  color: var(--muted);
}

.hero-copy {
  max-width: 72ch;
  margin: 10px 0 0;
  line-height: 1.45;
}

.hero-badge {
  align-self: center;
  justify-self: end;
  padding: 12px 14px;
  border: 1px solid var(--accent);
  background: var(--black);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dashboard {
  grid-template-columns: 1.55fr 0.95fr;
}

.card {
  border: 1px solid var(--accent);
  border-radius: 0;
  padding: 12px;
  background: var(--black);
}

.card-head {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.limits-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
}

.field-row,
.settings-form,
.ui-tabs,
.wizard-grid,
.stack-list {
  display: grid;
  gap: 10px;
}

.field-row {
  grid-template-columns: minmax(180px, 240px) auto;
  align-items: end;
  margin-bottom: 16px;
}

.field {
  display: grid;
  gap: 8px;
}

input,
select {
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--black);
  color: var(--accent);
  padding: 0.75rem 0.9rem;
}

select {
  appearance: none;
}

input::placeholder {
  color: var(--muted);
}

.cta {
  cursor: pointer;
  font-weight: 700;
  background: var(--black);
}

/* Terminal-style button and control enhancements */
button,
.cta {
  border-style: solid;
  transition: transform 0.06s ease, background-color 0.08s ease, color 0.08s ease, border-color 0.08s ease;
}

button:hover,
.cta:hover {
  background: var(--accent-soft);
  color: var(--black);
  border-color: var(--accent);
}

button:active,
.cta:active {
  transform: translateY(1px);
  background: var(--accent);
  color: var(--black);
}

button:disabled,
.cta:disabled {
  color: var(--disabled);
  border-color: var(--muted);
  cursor: not-allowed;
  background: var(--black);
}

button:focus-visible,
.cta:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

input:focus,
select:focus,
textarea:focus {
  background: var(--black);
}

.cta.secondary {
  background: var(--black);
  color: var(--accent-soft);
  border-color: var(--accent-soft);
}

.cta.secondary:hover {
  background: var(--accent-soft);
  color: var(--black);
}

.dice-switch,
.ui-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow: hidden;
}

.ui-tabs {
  border: 0;
}

.ui-tabs > *,
.dice-switch > * {
  flex: 1 1 0;
  min-width: 0;
}

.ui-tabs > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-tabs > * + *,
.dice-switch > * + * {
  margin-left: -1px;
}

.ui-tabs > *,
.dice-switch > * {
  position: relative;
}

.ui-tabs > * {
  border-top: 0;
}

.ui-tabs > *.is-active,
.dice-switch > *.is-active,
.ui-tabs > *:hover,
.dice-switch > *:hover {
  z-index: 1;
}

.result-card {
  min-height: 220px;
  border: 1px solid var(--accent);
  border-radius: 0;
  padding: 16px;
  background: var(--black);
}

.result-total {
  font-size: clamp(3rem, 10vw, 6rem);
  line-height: 1;
  color: var(--accent);
}

.roll-values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.die-bubble {
  min-width: 48px;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--accent);
  border-radius: 0;
  text-align: center;
  background: var(--black);
  color: var(--accent);
}

.die-bubble.is-rolling {
  background: var(--accent-soft);
  color: var(--black);
}

.roll-card.is-rolling .result-total {
  animation: pulse 0.7s ease-in-out infinite alternate;
}

.side-stack {
  display: grid;
  gap: 16px;
}

.history-list {
  display: grid;
  gap: 10px;
}

.history-item {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--accent-soft);
  border-radius: 0;
  background: var(--black);
}

.history-total {
  font-size: 1.4rem;
  color: var(--accent);
}

.empty-state {
  margin: 0;
}

.placeholder-panel {
  display: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.placeholder-panel.is-active {
  display: block;
}

.wizard-frame {
  gap: 0;
  width: 100%;
  min-height: 0;
  height: calc(100svh - 100px);
  max-height: calc(100svh - 100px);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: visible;
}

@supports (height: 100dvh) {
  .wizard-frame {
    height: calc(100dvh - 100px);
    max-height: calc(100dvh - 100px);
  }
}

.wizard-notice {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0, 255, 102, 0.35);
  color: var(--accent);
  letter-spacing: 0.02em;
  background: transparent;
}

.wizard-notice[data-notice-type="error"] {
  border-bottom-color: rgba(255, 107, 107, 0.45);
  color: #ffb3b3;
}

.wizard-notice[data-notice-type="success"] {
  border-bottom-color: rgba(112, 255, 154, 0.45);
  color: #c8ffd6;
}

.wizard-notice[hidden] {
  display: none;
}

.wizard-content,
.placeholder-content {
  display: grid;
  gap: 0;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  border: 1px solid var(--accent);
  border-top: 0;
  background: var(--black);
  overflow: hidden;
}

.placeholder-panels {
  display: grid;
  gap: 0;
  padding: 12px;
}

.wizard-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  min-height: 0;
  padding: 12px;
  overflow: hidden;
}

.wizard-panel,
.summary-box {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.wizard-panel {
  display: none;
  padding: 0;
}

.wizard-panel.is-active {
  display: grid;
  gap: 12px;
  min-height: 0;
  overflow: visible;
  position: relative;
}

/* Keep the frame on screen on larger viewports. Long non-Perk tabs scroll
   inside their panel; Perks keeps its own toolbar and list boundary. */
.wizard-panel.is-active:not([data-ui-panel="perks"]) {
  overflow-y: auto;
  padding-right: 4px;
}

.wizard-panel[data-ui-panel="perks"].is-active {
  overflow: hidden;
}

.list-card {
  width: 100%;
  color: var(--accent);
  text-align: left;
  padding: 12px;
}

.list-card p {
  margin: 6px 0 0;
  color: var(--muted);
}

.wizard-panel[data-ui-panel="origins"] {
  overflow: visible;
}

[data-origins-list] {
  grid-template-columns: 1fr;
  align-items: start;
}

.origin-grid__choices {
  display: grid;
  gap: 14px;
}

.origin-grid__trait-section,
.origin-grid__equipment-section {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.origin-grid__trait-list {
  display: grid;
  gap: 18px;
  width: 100%;
  align-items: stretch;
}

.origin-grid__trait-list.is-row-flow {
  grid-auto-flow: row;
  grid-template-columns: repeat(var(--origin-trait-columns, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--origin-trait-rows, 1), minmax(0, auto));
}

.origin-grid__trait-list.is-column-flow {
  grid-auto-flow: column;
  grid-template-columns: repeat(var(--origin-trait-columns, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--origin-trait-rows, 5), minmax(0, auto));
}

.origin-grid__trait,
.origin-grid__equipment {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  gap: 8px;
  width: 100%;
  min-height: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--black);
  color: var(--accent);
  text-align: left;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.origin-grid__choice-dot {
  align-self: center;
  display: grid;
  width: 18px;
  height: 18px;
  margin-top: 0;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  flex: 0 0 auto;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.08s ease, border-color 0.08s ease, transform 0.06s ease;
}

.origin-grid__trait-card {
  display: grid;
  gap: 8px;
  padding: 0.95rem 1rem;
  border: 1px solid var(--accent);
  background: var(--black);
  color: var(--accent);
}

.origin-grid__trait-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.origin-grid__trait-card.is-active {
  background: rgba(0, 255, 102, 0.04);
}

.origin-grid__trait-card.is-disabled {
  opacity: 0.6;
}

.origin-grid__trait-card.is-disabled,
.origin-grid__trait-card.is-disabled * {
  cursor: not-allowed;
}

.origin-grid__trait-card strong {
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.origin-grid__trait-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
  text-transform: none;
  white-space: pre-wrap;
}

.origin-grid__trait-card.is-active .origin-grid__choice-dot {
  border-color: var(--accent);
  background: var(--accent);
}

.origin-grid__equipment {
  align-content: center;
  justify-items: center;
  text-align: left;
}

.origin-grid__equipment strong,
.origin-grid__equipment span {
  display: block;
}

.origin-grid__equipment strong {
  line-height: 1.2;
}

.origin-grid__equipment span {
  color: var(--muted);
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

.origin-grid__trait span {
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.origin-grid__equipment-list {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-inline: auto;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.origin-grid__equipment-section {
  grid-column: 1 / -1;
  padding: 12px;
  gap: 8px;
  border-top: 1px solid var(--accent);
  background: rgba(0, 255, 102, 0.02);
}

.origin-grid__equipment-section .origin-grid__equipment-list {
  width: 100%;
}

.origin-grid__trait:hover:not(:disabled),
.origin-grid__trait:focus-visible,
.origin-grid__tile:hover,
.origin-grid__tile:focus-visible {
  background: var(--accent-soft);
  color: var(--black);
  border-color: var(--accent);
}

.origin-grid__trait.is-active {
  background: var(--accent);
  color: var(--black);
  border-color: var(--accent);
}

.origin-grid__trait:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.origin-grid__choice-dot:disabled {
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}

.origin-grid__choice-dot:disabled:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
  transform: none;
}

.origin-grid__row {
  display: grid;
  gap: 0;
}

.origin-grid__row.is-open {
  gap: 0;
}

.origin-grid__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.origin-grid__tile {
  position: relative;
  display: block;
  box-sizing: border-box;
  container-type: inline-size;
  transition: none;
  min-height: 72px;
  /* 250 columns x 85 rows, adjusted for Courier glyph width and line-height. */
  aspect-ratio: 1.47 / 1;
  width: 100%;
  padding: 0;
  border: 1px solid var(--accent);
  background: var(--black);
  color: var(--accent);
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow: hidden;
}

.origin-grid__tile::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.68) 0%,
    rgba(0, 0, 0, 0.34) 25%,
    rgba(0, 0, 0, 0.08) 48%,
    rgba(0, 0, 0, 0) 72%
  );
  content: "";
  pointer-events: none;
}

.origin-grid__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: grid;
  gap: 3px;
  min-height: 48px;
  padding: 7px 12px 8px;
  border-top: 1px solid var(--accent);
  background: rgba(0, 0, 0, 0.52);
  color: var(--accent);
  pointer-events: none;
  text-align: center;
  text-shadow: 0 0 3px var(--black), 0 0 6px var(--black);
}

.origin-grid__caption strong {
  color: var(--accent);
}

.origin-grid__caption strong,
.origin-grid__caption > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.origin-grid__caption > span {
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.origin-grid__illustration {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font-family: "Courier New", Courier, monospace;
  font-size: max(1px, calc(100cqw / 150));
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: pre;
  pointer-events: none;
}

/* Keep the global card highlight, but give the ASCII layer its own contrast. */
.origin-grid__tile:hover .origin-grid__illustration,
.origin-grid__tile:focus-visible .origin-grid__illustration,
.origin-grid__tile:active .origin-grid__illustration,
.origin-grid__tile.is-selected.is-open .origin-grid__illustration {
  background: rgba(0, 0, 0, 0.55);
  color: var(--accent);
}

.origin-grid__tile.is-selected {
  background: var(--accent);
  color: var(--black);
}

/* Selection remains in the draft, but the visual active state follows the open description. */
.origin-grid__tile.is-selected:not(.is-open) {
  background: var(--black);
  color: var(--accent);
}

.origin-grid__tile.is-selected:not(.is-open):hover,
.origin-grid__tile.is-selected:not(.is-open):focus-visible {
  background: var(--accent-soft);
  color: var(--black);
  border-color: var(--accent);
}

.origin-grid__tile.is-open {
  border-color: var(--accent);
  box-shadow: none;
}

/* The open detail owns the separator below the whole visual row. */
.origin-grid__tile.is-detail-adjacent {
  border-bottom-color: transparent;
}

.origin-grid__detail {
  display: grid;
  gap: 0;
  grid-column: 1 / -1;
  padding: 0;
  border: 1px solid var(--accent);
  background: var(--black);
  overflow: hidden;
}

.origin-grid__detail-grid {
  display: grid;
  gap: 12px;
  padding: 12px;
  grid-template-columns: minmax(0, var(--origin-copy-fr, 1.2fr)) minmax(0, var(--origin-choices-fr, 0.8fr));
  align-items: start;
}

.origin-grid__copy,
.origin-grid__trait-preview,
.origin-grid__choices {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.origin-grid__copy,
.origin-grid__trait-preview {
  padding: 12px;
  border: 1px solid var(--accent);
  background: rgba(0, 255, 102, 0.03);
}

.origin-grid__copy {
  border: 0;
  background: transparent;
}

.origin-grid__trait-preview {
  border-color: var(--muted);
}

.origin-grid__trait-preview.is-selected {
  border-color: var(--accent);
  background: rgba(0, 255, 102, 0.08);
}

.origin-grid__copy p,
.origin-grid__trait-preview p {
  margin: 0;
  line-height: 1.45;
  white-space: pre-wrap;
}

.origin-grid__label {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.origin-grid__traits-label {
  margin-bottom: 2px;
  text-align: center;
  width: 100%;
}

.origin-grid__detail .origin-grid__trait {
  min-height: 100%;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.summary-box {
  white-space: pre-wrap;
  padding: 12px;
  color: var(--accent);
  min-height: 240px;
}

.perks-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.perks-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  align-self: center;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
}

.perks-slots-prefix {
  font-size: 0.82rem;
}

.perks-slots-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  line-height: 1;
  font-size: 1.2rem;
}

.perk-slot.is-empty {
  color: var(--muted);
}

.perk-slot.is-filled {
  color: var(--accent);
}

.perks-slots-empty {
  color: var(--muted);
  font-size: 0.85rem;
}

.perks-controls {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  justify-content: flex-end;
}

.perks-controls-panel {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--accent);
  background: var(--black);
  overflow: visible;
  position: relative;
  z-index: 10;
}

.perks-searchbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0;
  min-width: 0;
  min-height: 100%;
  flex: 1 1 220px;
  max-width: 100%;
}

.perks-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  min-height: 100%;
  padding: 0 0.35rem;
  color: var(--accent);
  flex: 0 0 auto;
  border-right: 1px solid var(--accent);
  position: relative;
}

.perks-search-icon::after {
  content: "";
  display: block;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}

.perks-search-icon::before {
  content: "";
  position: absolute;
  width: 0.48rem;
  height: 1px;
  background: currentColor;
  transform: translate(0.28rem, 0.2rem) rotate(45deg);
  transform-origin: left center;
}

.perks-searchbar input[type="search"] {
  min-width: 0;
  min-height: 100%;
  width: 14ch;
  border: 0;
  padding: 0.5rem 0.75rem;
  color: var(--accent);
  background: transparent;
  border-right: 1px solid var(--accent);
}

.perks-searchbar input[type="search"]::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

.perks-match-count {
  min-width: 4ch;
  padding: 0 0.6rem;
  border-right: 1px solid var(--accent);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.perks-nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 100%;
  padding: 0 0.5rem;
  border: 0;
  border-right: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
}

.perks-nav-button:hover:not(:disabled),
.perks-nav-button:focus-visible {
  background: var(--accent-soft);
  color: var(--black);
}

.perks-nav-button:disabled {
  color: var(--disabled);
  cursor: not-allowed;
}

.perks-nav-button:last-child {
  border-right: 0;
}

.perks-filter {
  display: flex;
  align-items: stretch;
  min-height: 100%;
}

.perks-filter-shell {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 100%;
  padding: 0 0.8rem;
  border-left: 1px solid var(--accent);
  background: transparent;
  overflow: visible;
  z-index: 0;
}

.perks-filter-native {
  width: 100%;
  border: 0;
  padding: 0;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.has-js .perks-filter-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.perks-filter-trigger {
  display: none;
  width: 100%;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 0;
  color: var(--accent);
  background: transparent;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.has-js .perks-filter-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.perks-filter-label {
  min-width: 0;
  color: var(--muted);
}

.perks-filter select {
  min-width: 100%;
  width: 100%;
  border: 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.perks-filter select:focus {
  outline: none;
}

.perks-filter-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  color: var(--accent);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 5h18l-7 8v5l-4 2v-7L3 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 5h18l-7 8v5l-4 2v-7L3 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.perks-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 180px;
  max-width: min(80vw, 320px);
  z-index: 9999;
  display: grid;
  gap: 4px;
  max-height: min(40vh, 320px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--accent);
  background: var(--black);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 32px rgba(0, 255, 102, 0.12);
}

.perks-filter-menu[hidden] {
  display: none !important;
}

.perks-filter-option {
  width: 100%;
  border: 1px solid transparent;
  padding: 0.6rem 0.75rem;
  color: var(--accent);
  background: var(--black);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.perks-filter-option:hover,
.perks-filter-option:focus-visible,
.perks-filter-option.is-active {
  background: var(--accent);
  color: var(--black);
  border-color: var(--accent);
  outline: none;
}

.perk-head,
.perk-requirements {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.scroll-area,
.perks-scroll {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
}

/* The filter menu is a scroll area for long option lists, but it must not
   inherit the parent panel's 100% height (the toolbar height). */
.perks-filter-menu.scroll-area {
  max-height: min(40vh, 320px);
}

.perk-card {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--muted);
  background: var(--black);
  cursor: default;
}

.perk-card.is-search-match {
  border-color: var(--accent-soft);
}

.perk-card.is-search-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.perk-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.perk-status {
  font-size: 0.75rem;
}

.perk-requirements {
  margin: 0;
}

.perk-highlight {
  padding: 0 0.08em;
  color: var(--black);
  background: var(--accent);
}

.perk-card .perk-text,
.perk-card .microcopy {
  color: inherit;
}

.perk-card p {
  margin: 0;
  color: inherit;
}

.perk-owned {
  border-color: var(--accent-soft);
  color: var(--accent-soft);
}

.perk-available {
  border-color: var(--accent);
  color: var(--accent);
}

.perk-locked {
  background: var(--black);
  border-color: var(--muted);
  color: var(--muted);
  transform: none;
}

.perk-locked .chip:disabled,
.perk-locked .cta:disabled,
.perk-card .chip:disabled,
.perk-card .cta:disabled {
  color: var(--disabled);
  border-color: var(--muted);
  background: var(--black);
}

.special-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 14px;
  height: max-content;
  min-height: 100%;
  align-content: start;
}

.special-sidebar {
  display: block;
  grid-column: 1;
  grid-row: 1;
  min-height: max-content;
}

.special-panel-title {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.special-list {
  display: grid;
  gap: 2px;
  min-width: 0;
  align-content: start;
}

.special-bottom {
  --special-points-value-size: clamp(2.4rem, 5vw, 4.2rem);
  --special-points-gap: 4px;
  --special-points-label-line-height: 0.864rem;
  display: grid;
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 20px;
  min-width: 0;
  align-items: stretch;
}

.special-points {
  display: grid;
  grid-column: 1;
  justify-items: center;
  color: var(--accent);
  text-align: center;
  text-transform: uppercase;
}

.special-points-content {
  display: grid;
  gap: 4px;
  justify-items: center;
  align-content: start;
  padding-top: 24px;
}

.special-points-value {
  font-size: var(--special-points-value-size);
  line-height: 1;
}

.special-points span {
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: var(--special-points-label-line-height);
}

.special-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid transparent;
  color: var(--accent);
  background: transparent;
}

.special-item:hover,
.special-item:focus-within {
  background: var(--accent-soft);
  color: var(--black);
}

.special-item.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--black);
}

.special-select {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  align-items: center;
  min-height: 38px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.special-select:hover,
.special-select:active {
  border: 0;
  color: inherit;
  background: transparent;
  transform: none;
}

.special-letter {
  font-weight: 700;
}

.special-name {
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.special-value-control {
  display: grid;
  grid-template-columns: 1.6rem 2.2rem 1.6rem;
  align-items: center;
}

.special-adjust {
  display: grid;
  width: 1.6rem;
  min-height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.special-adjust:hover,
.special-adjust:active {
  border: 0;
  color: inherit;
  background: transparent;
  transform: none;
}

.special-adjust:disabled {
  color: var(--disabled);
  border: 0;
  background: transparent;
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
  transform: none;
}

.special-value {
  width: 2.2rem;
  min-height: 34px;
  padding: 0 4px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: center;
  font-weight: 700;
  appearance: textfield;
}

.special-value::-webkit-inner-spin-button,
.special-value::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.special-value:focus,
.special-value:focus-visible {
  outline-color: currentColor;
  border-color: transparent;
  background: transparent;
}

.special-image-placeholder {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  min-height: 230px;
  place-items: center;
  padding: 20px;
  overflow: hidden;
  color: var(--muted);
  background: var(--black);
  text-align: center;
  letter-spacing: 0.12em;
}

.special-image-placeholder.has-image {
  padding: 0;
  color: var(--accent);
}

.special-image-placeholder img {
  display: block;
  width: 100%;
  height: 230px;
  max-height: 100%;
  object-fit: contain;
}

.special-processed-image {
  display: block;
  width: 100%;
  height: 230px;
  max-height: 100%;
  object-fit: contain;
}

.special-description {
  display: grid;
  grid-column: 2;
  gap: 8px;
  align-self: stretch;
  justify-self: stretch;
  justify-items: center;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  padding-top: 24px;
}

.special-description p {
  width: min(100%, 60ch);
  max-width: 60ch;
  margin: 0;
  color: var(--accent);
  line-height: calc((var(--special-points-value-size) + var(--special-points-gap) + var(--special-points-label-line-height)) / 3);
  text-align: left;
}

.app-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: none;
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.02);
  }
}

@media (max-width: 960px) {
  .hero,
  .dashboard,
  .field-row {
    grid-template-columns: 1fr;
  }

  .hero-badge {
    justify-self: start;
  }

  .card-head {
    flex-direction: column;
  }

  .history-item {
    grid-template-columns: 1fr;
  }

  .perks-controls {
    grid-template-columns: 1fr;
  }

  .perks-toolbar {
    grid-template-columns: 1fr;
  }

  .origin-grid__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .origin-grid__detail-grid {
    grid-template-columns: 1fr;
  }

  .origin-grid__trait-list,
  .origin-grid__equipment-list {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .origin-grid__trait-list.is-row-flow,
  .origin-grid__trait-list.is-column-flow {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .origin-grid__trait-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .app-shell {
    padding: 12px;
  }

  .topbar {
    align-items: start;
    flex-direction: column;
  }

  .card,
  .hero {
    padding: 12px;
  }

  .wizard-frame {
    gap: 0;
    height: auto;
    max-height: none;
  }

  .wizard-content,
  .wizard-grid {
    max-height: none;
    overflow: visible;
  }

  .wizard-panel.is-active,
  .wizard-panel.is-active:not([data-ui-panel="perks"]),
  .wizard-panel[data-ui-panel="perks"].is-active {
    overflow: visible;
  }

  .perks-scroll {
    max-height: none;
    overflow: visible;
  }

  .ui-tabs {
    gap: 6px;
  }

  .ui-tabs > * {
    padding-inline: 0.6rem;
  }

  .dice-switch > * {
    flex-basis: 100%;
    margin-left: 0;
  }

  .origin-grid__tiles {
    grid-template-columns: 1fr;
  }

  .history-item {
    padding: 10px 12px;
  }
}

@media (max-width: 960px) {
  .system-hud {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .system-hud__item:nth-child(5) {
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .pipboy-topbar {
    flex-direction: row;
    align-items: end;
    padding-inline: 0;
  }

  .pipboy-utility {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    margin-bottom: 7px;
  }

  .pipboy-service-name {
    display: none;
  }

  .pipboy-tabs .pipboy-tab {
    padding-inline: 0.55rem;
    font-size: 0.85rem;
  }

  .wizard-frame.pipboy-frame {
    height: auto;
    max-height: none;
  }

  .system-hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-hud__item,
  .system-hud__item:nth-child(5) {
    border-left: 1px solid var(--accent-soft);
  }

  .system-hud__item:nth-child(odd) {
    border-left: 0;
  }

  .system-hud__item--wide {
    grid-column: span 1;
  }
}

/* Reference Pip-Boy navigation geometry. The rail is continuous; the active
   tab masks the rail and becomes the only outlined tab. */
.pipboy-topbar {
  --pipboy-topbar-height: 48px;
  --pipboy-rail-drop: 10px;
  --pipboy-rail-inset: 8px;
  --pipboy-rail-color: var(--accent-soft);
  position: relative;
  display: block;
  height: var(--pipboy-topbar-height);
  margin-bottom: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

.pipboy-topbar::before {
  position: absolute;
  right: var(--pipboy-rail-inset);
  bottom: 0;
  left: var(--pipboy-rail-inset);
  z-index: 0;
  width: auto;
  height: 0;
  border-top: 1px solid var(--pipboy-rail-color);
  content: "";
}

.pipboy-topbar::after {
  position: absolute;
  right: var(--pipboy-rail-inset);
  bottom: calc(var(--pipboy-rail-drop) * -1);
  left: var(--pipboy-rail-inset);
  z-index: 0;
  height: var(--pipboy-rail-drop);
  border-right: 1px solid var(--pipboy-rail-color);
  border-left: 1px solid var(--pipboy-rail-color);
  box-sizing: border-box;
  content: "";
  pointer-events: none;
}

.pipboy-utility {
  z-index: 2;
  display: grid;
  position: absolute;
  bottom: 8px;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 0;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  font-weight: 700;
  place-items: center;
  line-height: 1;
}

.pipboy-utility--left {
  left: 10px;
}

.pipboy-utility--right {
  right: 10px;
}

.pipboy-tabs {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: end;
  justify-content: center;
  gap: 0;
  width: max-content;
  max-width: calc(100% - 56px);
  height: 39px;
  overflow: visible;
  transform: translateX(-50%);
}

.pipboy-tabs .pipboy-tab {
  /* Keep the rail opening tied to the label width instead of a fixed em
     value. This prevents the active bracket from cutting through labels
     when the viewport or browser zoom changes. */
  --pipboy-notch-half: calc(2.5ch + 0.16em + 2px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 39px;
  min-height: 39px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  background: transparent;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.pipboy-tabs .pipboy-tab[data-pipboy-tab="chrgen"] {
  --pipboy-notch-half: calc(3ch + 0.2em + 2px);
}

.pipboy-tabs .pipboy-tab[data-pipboy-tab="dice"] {
  --pipboy-notch-half: calc(2.5ch + 0.16em + 2px);
}

.pipboy-tabs .pipboy-tab:hover,
.pipboy-tabs .pipboy-tab:focus-visible {
  background: var(--accent-soft);
  color: var(--black);
}

.pipboy-tabs .pipboy-tab.is-active {
  z-index: 2;
  border: 0;
  border-bottom: 0;
  margin-bottom: 0;
  padding-right: 7px;
  padding-left: 7px;
  background: var(--black);
  color: var(--accent);
}

/* The selected tab keeps two short top rail segments. The center is masked
   under the label, matching the open Pip-Boy bracket rather than a full box. */
.pipboy-tabs .pipboy-tab.is-active::before {
  position: absolute;
  top: calc(50% - 0.22em);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: auto;
  border-right: 1px solid var(--pipboy-rail-color);
  border-left: 1px solid var(--pipboy-rail-color);
  background: linear-gradient(
    to right,
    var(--pipboy-rail-color) 0,
    var(--pipboy-rail-color) calc(50% - var(--pipboy-notch-half)),
    transparent calc(50% - var(--pipboy-notch-half)),
    transparent calc(50% + var(--pipboy-notch-half)),
    var(--pipboy-rail-color) calc(50% + var(--pipboy-notch-half)),
    var(--pipboy-rail-color) 100%
  ) top / 100% 1px no-repeat;
  box-sizing: border-box;
  content: "";
  pointer-events: none;
}

/* Mask the shared rail inside the active tab. This avoids a fractional-pixel
   seam flashing during browser zoom/reflow while keeping the bottom edge
   visually borderless. */
.pipboy-tabs .pipboy-tab.is-active::after {
  position: absolute;
  right: 1px;
  bottom: -2px;
  left: 1px;
  z-index: 3;
  height: 4px;
  background: var(--black);
  content: "";
  pointer-events: none;
}

.pipboy-tabs .pipboy-tab.is-disabled {
  color: var(--disabled);
  opacity: 1;
}

.pipboy-tabs .pipboy-tab.is-disabled:hover {
  background: transparent;
  color: var(--disabled);
}

.wizard-frame.pipboy-frame {
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: calc(100svh - 78px);
  max-height: calc(100svh - 78px);
}

.wizard-frame.pipboy-frame .wizard-tabs.pipboy-subtabs {
  --pipboy-subtabs-offset: 0px;
  display: flex;
  align-items: end;
  justify-content: flex-start;
  min-height: 35px;
  height: 35px;
  padding-left: 0;
  border: 0;
  overflow: hidden;
}

.wizard-frame.pipboy-frame .wizard-tabs.pipboy-subtabs > * {
  flex: 0 0 auto;
  height: 35px;
  min-height: 35px;
  margin-left: 0;
  padding: 0 11px 7px;
  border: 0;
  background: var(--black);
  color: var(--accent-soft);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
  opacity: var(--pipboy-subtab-opacity, 1);
  transform: translate3d(var(--pipboy-subtabs-offset), 0, 0);
  transition: transform 0.35s ease, opacity 0.35s ease, color 0.35s ease;
  will-change: transform, opacity;
}

.wizard-frame.pipboy-frame .wizard-tabs.pipboy-subtabs > *:hover,
.wizard-frame.pipboy-frame .wizard-tabs.pipboy-subtabs > *:focus-visible {
  background: var(--black);
  color: var(--accent);
}

.wizard-frame.pipboy-frame .wizard-tabs.pipboy-subtabs > *.is-active {
  border: 0;
  background: var(--black);
  color: var(--accent);
  font-weight: 400;
}

.wizard-frame.pipboy-frame .wizard-content {
  border: 0;
  background: var(--black);
}

.wizard-frame.pipboy-frame .system-hud {
  position: relative;
  z-index: 5;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border: 0;
  background: var(--black);
}

.wizard-frame.pipboy-frame .system-hud__item {
  display: flex;
  min-width: 0;
  justify-content: flex-start;
  border: 0;
}

.wizard-frame.pipboy-frame .system-hud__item > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard-frame.pipboy-frame .wizard-grid {
  padding-top: 8px;
  align-content: start;
  align-items: start;
}

.wizard-frame.pipboy-frame .wizard-panel.is-active {
  align-content: start;
}

.wizard-frame.pipboy-frame [data-ui-panel="special"] {
  align-content: start;
}

.wizard-frame.pipboy-frame [data-ui-panel="special"].is-active {
  align-content: stretch;
  align-self: stretch;
  grid-template-rows: minmax(0, 1fr);
  height: auto;
}

.wizard-frame.pipboy-frame [data-ui-panel="special"].is-active .special-layout {
  align-self: stretch;
}

.wizard-frame.pipboy-frame [data-ui-panel="special"] > .cta {
  justify-self: center;
}

.wizard-frame.pipboy-frame [data-ui-panel="home"] {
  gap: 12px;
}

.home-identity-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--accent);
  background: var(--black);
}

.home-identity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--accent-soft);
}

.home-identity-status {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.home-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.home-identity-grid .field {
  min-width: 0;
}

.home-portrait-field {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.home-portrait-frame {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 190px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--accent);
  background: var(--black);
  color: var(--muted);
  letter-spacing: 0.14em;
}

.home-portrait-frame img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.portrait-toggle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  width: 32px;
  min-height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--black) 82%, transparent);
  color: var(--accent);
  font-size: 1rem;
  line-height: 1;
}

.portrait-toggle:hover,
.portrait-toggle.is-original {
  background: var(--accent);
  color: var(--black);
}

.portrait-eye-icon {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.portrait-eye-icon circle {
  fill: currentColor;
}

.portrait-toggle:disabled {
  display: none;
}

.home-upload-button {
  cursor: pointer;
  width: 100%;
}

.home-identity-grid input,
.home-identity-grid select,
.home-identity-grid textarea {
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--black);
  color: var(--accent);
  font: inherit;
  padding: 0.65rem 0.75rem;
}

.home-identity-grid select {
  appearance: auto;
}

.home-identity-grid textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.35;
}

.home-backstory-field {
  grid-column: 1 / -1;
}

.hero.pipboy-frame {
  border: 0;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-inline: 0;
}

/* Keep the Pip-Boy shell inside the viewport. Content-heavy panels retain
   their own scroll areas instead of extending the browser document. */
.pipboy-shell {
  --pipboy-shell-offset: 84px;
  height: 100svh;
  overflow: visible;
}

.pipboy-shell .page-wrap {
  min-height: 0;
  height: calc(100svh - var(--pipboy-shell-offset));
  overflow: visible;
}

.pipboy-shell .wizard-frame.pipboy-frame {
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

@supports (height: 100dvh) {
  .pipboy-shell {
    height: 100dvh;
  }

  .pipboy-shell .page-wrap {
    height: calc(100dvh - var(--pipboy-shell-offset));
  }
}

@media (max-width: 640px) {
  .pipboy-shell {
    --pipboy-shell-offset: 73px;
  }

  .pipboy-topbar {
    --pipboy-topbar-height: 39px;
    height: 39px;
    margin-bottom: 10px;
  }

  .pipboy-tabs {
    height: 28px;
  }

  .pipboy-tabs .pipboy-tab {
    height: 28px;
    min-height: 28px;
    padding-inline: 8px;
    font-size: 1rem;
  }

  .pipboy-utility {
    width: 30px;
    height: 30px;
    bottom: 4px;
    margin: 0;
    font-size: 18px;
  }

  .wizard-frame.pipboy-frame {
    height: auto;
    max-height: none;
  }

  .wizard-frame.pipboy-frame .wizard-tabs.pipboy-subtabs {
    padding-left: 0;
  }

  .wizard-frame.pipboy-frame .wizard-tabs.pipboy-subtabs > * {
    padding-inline: 5px;
    font-size: 1rem;
  }

  .wizard-frame.pipboy-frame .system-hud {
    gap: 4px;
  }

  .wizard-frame.pipboy-frame .system-hud__item {
    min-height: 30px;
    padding: 6px 5px;
    font-size: 0.7rem;
  }

  .wizard-frame.pipboy-frame .special-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 16px;
    height: max-content;
    min-height: 100%;
    align-content: start;
  }

  .wizard-frame.pipboy-frame .special-sidebar,
  .wizard-frame.pipboy-frame .special-image-placeholder,
  .wizard-frame.pipboy-frame .special-bottom {
    grid-column: 1;
  }

  .wizard-frame.pipboy-frame .special-sidebar {
    display: block;
    grid-row: 1;
    min-height: max-content;
  }

  .wizard-frame.pipboy-frame .special-image-placeholder {
    grid-row: 3;
    min-height: 0;
    height: clamp(128px, 30vw, 230px);
  }

  .wizard-frame.pipboy-frame .special-bottom {
    display: contents;
  }

  .wizard-frame.pipboy-frame .special-points,
  .wizard-frame.pipboy-frame .special-description {
    grid-column: 1;
  }

  .wizard-frame.pipboy-frame .special-points {
    grid-row: 2;
  }

  .wizard-frame.pipboy-frame .special-description {
    grid-row: 4;
    width: 100%;
    max-width: none;
  }

  .wizard-frame.pipboy-frame .special-description p {
    width: 100%;
    max-width: none;
    line-height: 1.45;
  }

  .home-identity-grid {
    grid-template-columns: 1fr;
  }

  .home-backstory-field {
    grid-column: auto;
  }

  .home-portrait-frame,
  .home-portrait-frame img {
    min-height: 220px;
    height: 220px;
  }
}

@media (min-width: 641px) and (max-width: 960px) {
  .wizard-frame.pipboy-frame .special-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: max-content;
    min-height: 100%;
    align-content: start;
  }

  .wizard-frame.pipboy-frame .special-sidebar,
  .wizard-frame.pipboy-frame .special-image-placeholder,
  .wizard-frame.pipboy-frame .special-bottom {
    grid-column: 1;
  }

  .wizard-frame.pipboy-frame .special-sidebar {
    display: block;
    grid-row: 1;
    min-height: max-content;
  }

  .wizard-frame.pipboy-frame .special-image-placeholder {
    grid-row: 3;
    min-height: 0;
    height: clamp(128px, 30vw, 230px);
  }

  .wizard-frame.pipboy-frame .special-bottom {
    display: contents;
  }

  .wizard-frame.pipboy-frame .special-points,
  .wizard-frame.pipboy-frame .special-description {
    grid-column: 1;
  }

  .wizard-frame.pipboy-frame .special-points {
    grid-row: 2;
  }

  .wizard-frame.pipboy-frame .special-description {
    grid-row: 4;
    width: 100%;
    max-width: none;
  }

  .wizard-frame.pipboy-frame .special-description p {
    width: 100%;
    max-width: none;
    line-height: 1.45;
  }
}

/* The document itself stays locked to the Pip-Boy viewport. Long lists use
   the component scrollbar inside their own panel, including narrow screens. */
.pipboy-shell,
.pipboy-shell .page-wrap,
.pipboy-shell .wizard-frame.pipboy-frame {
  overflow: hidden;
}

.pipboy-shell .wizard-content {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.pipboy-shell .wizard-grid {
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.pipboy-shell .wizard-panel.is-active {
  height: 100%;
  min-height: 0;
}

.pipboy-shell .wizard-panel.is-active:not([data-ui-panel="perks"]) {
  min-height: 0;
  overflow-y: auto;
}

.pipboy-shell .wizard-panel[data-ui-panel="special"].is-active {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.pipboy-shell .wizard-panel[data-ui-panel="perks"].is-active {
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.pipboy-shell .perks-scroll {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
}