/* Shared dark surfaces and a larger inventory; the desktop hero keeps its layout. */
:root {
  color-scheme: dark;
  --paper: #010601;
  --paper-dark: #080f07;
  --ink: #f2f3e4;
  --muted: #abad97;
  --line: #31432f;
  --green-dark: #a9e66a;
  --rail: 96px;
}

body { background: #13251c; }
.page-shell { background: var(--paper); }
main { min-width: 0; }

.hotbar {
  left: 8px;
  align-items: center;
  width: 96px;
  padding: 12px 10px 19px;
  gap: 8px;
  border-color: #222b20;
  box-shadow: inset 3px 3px #a0a598, inset -3px -3px #30372d,
    0 6px #0a160c, 0 12px 24px #0005;
}
.hotbar-label {
  width: 100%;
  margin: 0 0 3px;
  font-size: 8px;
  line-height: 1.6;
  letter-spacing: 1px;
  color: #ecf3df;
}
.hotbar-slot { width: 68px; height: 68px; }
.hotbar-slot img { width: 46px; height: 46px; }
.hotbar-slot kbd { right: 4px; bottom: 2px; font-size: 12px; }
.hotbar-slot.is-active img,
.hotbar-slot[aria-current='location'] img,
.hotbar-slot[aria-current='page'] img {
  animation: inventory-bob 3.5s ease-in-out infinite;
}
.slot-tooltip { font-size: 13px; }
.scroll-progress { left: 11px; right: 11px; bottom: 7px; }
@keyframes inventory-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.feature-card,
.mod-preview-card,
.mod-card,
.step-card {
  color: var(--ink);
  background: #0d140c;
  border-color: var(--line);
  box-shadow: 0 4px #000a;
}
.feature-card:hover,
.mod-card:hover {
  border-color: #67854e;
  box-shadow: 0 7px #000b;
}
.feature-card::after { background: #5e7a45; }
.feature-icon {
  background: #182414;
  border-color: #34492b;
  box-shadow: 3px 3px #081005;
}
.feature-index, .feature-number { color: #a4c387; }
.section-link { border-color: #66854c; }
.section-link:hover { color: #d0f5ac; }
.text-link { color: #a9e66a; }
.section-caption, .tutorial-hint { color: #9eac8e; }
.section-divider { background: var(--line); }

.download-section { background: #080f07; }
.download-panel {
  border-color: #476336;
  box-shadow: 7px 7px #000b;
}
.tutorial-art {
  background: #101b0d;
  border-color: #344a2b;
}
.tutorial-art::before { border-color: #49613a; }
.community {
  background: #0d180a;
  border-color: #354d2b;
  box-shadow: 0 5px #000b;
}
.button.ghost { color: #c2e7a5; border-color: #5b7847; }
.button.ghost:hover { color: #e1f8cd; background: #a9e66a12; border-color: #8caf70; }

.breadcrumbs { color: #a2b18f; }
.breadcrumbs a:hover { color: #c4eaa4; }
.mod-search input {
  color: var(--ink);
  background: #101a0d;
  border-color: #3d5331;
  box-shadow: inset 2px 2px #050b03;
}
.mod-search input::placeholder { color: #9caa8d; }
.mod-search input:focus { border-color: #9bc677; }
.filter-button {
  color: #c0d2af;
  background: #152010;
  border-color: #3c512f;
  box-shadow: 0 2px #000a;
}
.filter-button:hover { color: #e8f4dc; background: #26391d; border-color: #76975c; }
.filter-button.is-active,
.filter-button[aria-pressed='true'] {
  color: #f0f6e8;
  background: #344f29;
  border-color: #7ea75e;
  box-shadow: 0 2px #172a12;
}
.mod-category {
  color: #c2dca8;
  background: #1a2b13;
  border-color: #3f5b2e;
}
.mod-external { color: #9caf8e; }
#mods-empty { color: #bac6ad; background: #111d0d; border-color: #526c40; }

.step-number {
  color: #c4e6a6;
  background: #203418;
  border-color: #567642;
  box-shadow: 3px 3px #070f04;
}
.step-card a:not(.button) { color: #b3db91; }
code {
  color: #d2e7be;
  background: #192514;
  border-color: #364b2a;
}
.copy-row button,
.copy-path {
  color: #c9e4b0;
  background: #1b2c14;
  border-color: #4c6838;
  box-shadow: 0 3px #0009;
}
.copy-row button:hover,
.copy-path:hover { background: #283e1e; }
.copy-path code { color: #d8ebc7; background: none; }
.copy-path > span, #copy-status { color: #b0d98b; }
.note {
  color: #b8c9a8;
  background: #14210f;
  border-left-color: #83b853;
}
.note strong { color: #d8edc4; }
.requirements span { color: #bdd1ad; background: #182613; border-color: #3a522d; }
.step-card .button.secondary {
  color: #dbefcb;
  background: #20331a;
  border-color: #64834c;
  box-shadow: 0 3px #070e04;
}
.step-card .button.secondary:hover { background: #304a26; }

dialog { color: var(--ink); background: #0d140c; border-color: #6b8b51; }
.dialog-close { color: #e1efcf; background: #23351a; border-color: #63834b; }
.dialog-close:hover { background: #365027; }

@media (min-width: 1600px) {
  :root { --rail: 110px; }
}

@media (max-width: 760px) {
  :root { --rail: 76px; }
  .hotbar {
    left: 5px;
    width: 64px;
    padding: 8px 5px 16px;
    gap: 7px;
    border-width: 3px;
  }
  .hotbar-label { font-size: 7px; letter-spacing: .2px; margin-bottom: 1px; }
  .hotbar-slot { width: 48px; height: 48px; }
  .hotbar-slot img { width: 32px; height: 32px; }
  .hotbar-slot kbd { right: 3px; bottom: 1px; font-size: 8px; }
  .slot-tooltip { left: calc(100% + 12px); padding: 7px 10px; font-size: 11px; }
  .scroll-progress { left: 7px; right: 7px; bottom: 6px; }
  .download-panel { box-shadow: 5px 5px #000b; }
  .skip-link { left: 84px; }
  .page-intro, .section, .section-heading, .community-copy { min-width: 0; }
}

@media (max-width: 480px) {
  :root { --rail: 76px; }
  .site-header .brand .brand-caption { display: none; }
  .stats > div { flex: 1 1 0; min-width: 0; padding-right: 8px; margin-right: 8px; }
  .stats > div:last-child { margin-right: 0; padding-right: 0; }
  .stats dd { overflow-wrap: anywhere; }
  .section-heading > div { max-width: 100%; }
  .page-intro h1, .section h2, .community h2 { overflow-wrap: anywhere; }
  .copy-path { width: 100%; overflow-wrap: anywhere; }
  .copy-path code { min-width: 0; }
  .download-panel .button { white-space: normal; }
  .community-copy .button { overflow-wrap: anywhere; }
  .skip-link { left: 84px; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .hotbar { gap: 6px; padding-block: 10px 17px; }
  .hotbar-slot { width: 56px; height: 56px; }
  .hotbar-slot img { width: 38px; height: 38px; }
  .hotbar-slot kbd { font-size: 10px; }
}

@media (max-height: 560px) {
  .hotbar { gap: 5px; padding-block: 7px 15px; }
  .hotbar-label { font-size: 7px; margin-bottom: 0; }
  .hotbar-slot { width: 46px; height: 46px; }
  .hotbar-slot img { width: 32px; height: 32px; }
  .hotbar-slot kbd { font-size: 8px; }
}

@media (max-height: 390px) {
  .hotbar { max-height: calc(100dvh - 20px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #8ba071 #283023; }
  .hotbar-label { flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hotbar-slot img { animation: none !important; }
}

@media (max-width: 360px) {
  .stats { gap: 14px; flex-wrap: wrap; }
  .stats > div { flex: 1 1 80px; margin: 0; padding: 0; border: 0; }
  .stats dt { font-size: 10px; }
  .stats dd { font-size: 10px; overflow-wrap: normal; }
}