#mods-menu {
  display: none;
  position: fixed;
  inset: 0 auto 0 25vw;
  width: 50vw;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 40;
  padding: 1.5rem clamp(1rem, 4vw, 2rem) 6rem;
  background: var(--dark1);
  color: var(--light2);
  flex-direction: column;
  gap: 1.25rem;
}
#mods-menu[hidden], #mods-empty[hidden] { display: none; }
#mods-menu * { box-sizing: border-box; }
#mods-menu [hidden] { display: none !important; }
#mods-menu.mods-starter-selection { z-index: 600; top: 0; height: 100%; }
#starter-mods-open, #starter-mods-back {
  min-height: 44px; padding: .6rem 1rem; font: inherit;
  border: 1px solid var(--vanta-border, var(--light1)); border-radius: .5rem;
  color: var(--vanta-text, var(--light2)); background: var(--vanta-raised, var(--dark2)); cursor: pointer;
  max-width: calc(100% - 2rem); overflow-wrap: anywhere;
}
#starter-mods-open:focus-visible { outline: 2px solid var(--accent, var(--light2)); outline-offset: 2px; }
#mods-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
#mods-menu button { font: inherit; color: inherit; cursor: pointer; }
.mod-category { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .75rem; min-height: 110px; padding: 1.25rem; border: 1px solid var(--light1); border-radius: .75rem; background: var(--dark2); text-align: left; overflow-wrap: anywhere; }
.mod-category-title { font-size: 1.15rem; font-weight: bold; }
.mod-category-count { font-size: .875rem; }
#mods-view-header { display: grid; gap: 1rem; }
#mods-back { min-height: 44px; justify-self: start; padding: .5rem .75rem; border: 1px solid var(--light1); border-radius: .5rem; background: var(--dark2); }
#mods-menu button:hover { border-color: var(--light2); }
#mods-menu button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
#mods-menu h1, #mods-menu h2, #mods-menu p { margin: 0; }
#mods-menu h1 { font-size: 1.75rem; }
#mods-menu h2 { font-size: 1.15rem; overflow-wrap: anywhere; }
#mods-menu p { line-height: 1.5; overflow-wrap: anywhere; }
#mods-menu header { display: grid; gap: .75rem; }
#mods-status:empty { display: none; }
#mods-status { padding: .75rem; border: 1px solid currentColor; border-radius: .5rem; }
#mods-list { display: grid; gap: 1rem; }
.mod-card, #mods-empty { padding: 1.25rem; border: 1px solid var(--light1); border-radius: .75rem; background: var(--dark2); }
.mod-card { display: grid; gap: .75rem; }
#mods-empty { display: grid; gap: .75rem; }
.mod-meta { font-size: .875rem; }
.mod-switch { display: flex; align-items: center; gap: .75rem; min-height: 44px; cursor: pointer; }
.mod-switch input { appearance: none; width: 3.25rem; height: 1.75rem; flex-shrink: 0; margin: 0; border: 2px solid currentColor; border-radius: 2rem; background: transparent; position: relative; cursor: pointer; color: inherit; }
.mod-switch input::before { content: ''; position: absolute; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: currentColor; top: .1875rem; left: .1875rem; }
.mod-switch input:checked::before { left: 1.6875rem; }
.mod-switch input:checked { background: var(--light1); color: var(--dark1); border-color: var(--light1); }
.mod-switch input:disabled { opacity: .6; cursor: wait; }
.mod-switch input:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
html[data-theme="vanta"] #mods-menu { background: var(--vanta-background); color: var(--vanta-text); }
html[data-theme="vanta"] :is(.mod-card, #mods-empty) { background: var(--vanta-card); border-color: var(--vanta-border); }
html[data-theme="vanta"] :is(.mod-category, #mods-back) { background: var(--vanta-card); border-color: var(--vanta-border); color: var(--vanta-text); }
html[data-theme="vanta"] #mods-menu button:hover { border-color: var(--vanta-accent); }
html[data-theme="vanta"] .mod-switch input:checked { background: var(--vanta-accent); border-color: var(--vanta-accent); color: var(--vanta-background); }
@media (max-width: 1000px) {
  #mods-menu { left: 0; width: 100%; padding-top: 7rem; }
}
@media (max-width: 600px) {
  #mods-categories { grid-template-columns: minmax(0, 1fr); }
  .mod-category { min-height: 88px; padding: 1rem; }
}