/* TEST: Die ganze Seite im Stil eines dunklen Minecraft-Inventars.
   Wird als letztes Stylesheet geladen und überschreibt nur die Optik.
   Entfernen = <link rel="stylesheet" href="…/inventory.css"> löschen. */

@font-face {
  font-family:'Pixelify Sans';
  src:url('../assets/fonts/pixelify-sans-latin-400.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}
@font-face {
  font-family:'Pixelify Sans';
  src:url('../assets/fonts/pixelify-sans-latin-600.woff2') format('woff2');
  font-weight:600 700;
  font-display:swap;
}

:root {
  --pixel:'Pixelify Sans',var(--font);

  --surface:var(--mc-gui);
  --panel:#2f2f2d;
  --raised:#3d3d3b;
  --raised-hover:#474744;
  --sunken:#0b0b0b;
  --line:#242423;
  --line-strong:#0e0e0d;
  --line-hover:#8b8b8b;

  --radius-sm:0;
  --radius:0;
  --radius-lg:0;

  /* Erhabene GUI-Fläche und eingelassener Slot */
  --bevel-up:inset 2px 2px var(--mc-gui-light),inset -2px -2px var(--mc-gui-shade);
  --bevel-down:inset 2px 2px var(--mc-slot-shadow),inset -2px -2px var(--mc-slot-light);

  /* Buttons */
  --btn:#3f3f3d;
  --btn-light:#62625e;
  --btn-shade:#262625;
  --btn-green:#2b7a44;
  --btn-green-light:#49a868;
  --btn-green-shade:#174f2b;
}

body {
  background:#1d1d20 url('../assets/ui/deepslate-tile.svg') 0 0/64px 64px;
  image-rendering:auto;

  /* Pixel-Schrift für alles, was eine Überschrift oder ein Bedienelement ist */
  h1,h2,h3,h4,.brand,.mainnav a,.primary,.outline,.smallbutton,.steptabs button,
  .level-tab strong,.preview-switch button,.sortbar button,.categorytabs button,
  .panetitle,.label,.crafttitle,.tradeitem label,.componentcards button,dt {
    font-family:var(--pixel);
    letter-spacing:.01em;
  }
  h1,h2,h3 {
    font-weight:600;
    text-shadow:.08em .08em 0 rgba(0,0,0,.55);
  }

  /* Header und Footer als GUI-Leisten */
  .header,.sitefoot {
    background:var(--mc-gui);
    border:0;
    box-shadow:var(--bevel-up),0 2px 0 var(--mc-dark);
  }
  .sitefoot {
    box-shadow:var(--bevel-up),0 -2px 0 var(--mc-dark);
    color:var(--sub);
  }
  .mainnav a {
    font-size:17px;
    border-bottom:0;
    &.on {
      color:#fff;
      text-shadow:2px 2px 0 #000;
    }
  }
  .brand {
    font-size:19px;
    text-shadow:2px 2px 0 #000;
  }

  /* Buttons im Minecraft-Stil */
  .primary,.outline,.smallbutton {
    border:2px solid #000;
    border-radius:0;
    background:var(--btn);
    color:#eee;
    box-shadow:inset 2px 2px var(--btn-light),inset -2px -2px var(--btn-shade);
    text-shadow:2px 2px 0 rgba(0,0,0,.6);
    font-weight:400;
    &:hover:not(:disabled) {
      background:var(--btn);
      border-color:#fff;
      color:#fff;
    }
    &:active:not(:disabled) {
      transform:none;
      box-shadow:inset 2px 2px var(--btn-shade),inset -2px -2px var(--btn-light);
    }
  }
  .primary {
    background:var(--btn-green);
    box-shadow:inset 2px 2px var(--btn-green-light),inset -2px -2px var(--btn-green-shade);
    &:hover:not(:disabled) {
      background:var(--btn-green);
    }
    &:active:not(:disabled) {
      box-shadow:inset 2px 2px var(--btn-green-shade),inset -2px -2px var(--btn-green-light);
    }
  }
  button:disabled {
    opacity:1;
    color:#7a7a76;
    text-shadow:none;
    background:#2e2e2c;
    box-shadow:none;
  }
  .textlink {
    font-family:var(--pixel);
    font-size:16px;
    color:var(--accent-ink);
    text-decoration-color:currentColor;
  }

  /* Eingabefelder wie in Minecraft: schwarz mit grauem Rahmen */
  .field,.search,.filters input,.root > main.loginbox input,.trade-controls input,.trade-controls select,.itemcount input {
    background:#000;
    border:2px solid #8b8b8b;
    border-radius:0;
    color:#fff;
    box-shadow:none;
    &:hover {
      border-color:#a0a0a0;
    }
    &:focus {
      border-color:#fff;
      box-shadow:none;
    }
  }
  .itemcount {
    border:2px solid #000;
    border-radius:0;
    background:var(--btn);
    button {
      background:var(--btn);
      color:#eee;
      box-shadow:inset 2px 2px var(--btn-light),inset -2px -2px var(--btn-shade);
      &:hover {
        background:var(--btn-light);
      }
    }
    input {
      border:0;
    }
  }

  /* Alle großen Flächen sind erhabene GUI-Fenster */
  .pane,.selpanel,.loginbox,.vcard,.modalback .modal,.vhero,.panel,
  .intro-text,.section .container,.toast {
    background:var(--mc-gui);
    border:2px solid var(--mc-dark);
    border-radius:0;
    box-shadow:var(--bevel-up);
  }
  .pane .panetitle {
    border-bottom:0;
    padding-bottom:4px;
    color:var(--mc-text);
    font-size:17px;
  }

  /* Innere Bereiche sind eingelassen wie ein Slot */
  .inventory,.tradeframe,.componentbox,.comp-row,.export-bundle,.export-actions,
  .vscene,.viewer-stage,.preview-block,.block-previews figure,.empty-trades,.mini-preview,
  #visual-controls > .pane,.rightdetail,.downloads,.install,.trade,.recipe {
    background:var(--mc-slot);
    border:0;
    border-radius:0;
    box-shadow:var(--bevel-down);
  }
  #visual-controls > .pane {
    padding:18px;
  }
  .mini-preview {
    padding:4px 12px;
  }
  .ministat {
    border-color:#1a1a19;
  }
  .export-actions {
    margin-top:8px;
  }
  .export-bundle {
    border-radius:0;
  }
  .export-card + .export-card {
    border-top:2px solid #1a1a19;
  }
  .tradevisual,.craft-panel {
    background:#2b2b29;
    border:2px solid var(--mc-dark);
  }

  /* Startseite */
  .intro {
    background:none;
    border:0;
  }
  .intro-text {
    padding:32px;
  }
  .section .container {
    width:calc(100% - 48px);
    max-width:1072px;
    padding:28px;
  }
  .downloads {
    padding:4px 18px;
    border-top:0;
    > div {
      border-color:#1a1a19;
    }
    > div:last-child {
      border-bottom:0;
    }
  }
  .install {
    padding:14px 18px 14px 40px;
  }
  code {
    background:#000;
    color:#e6e6e6;
  }

  /* Schritte als Creative-Inventar-Tabs */
  .steptabs {
    gap:4px;
    padding:8px 8px 0;
    background:none;
    border-bottom:2px solid var(--mc-dark);
    button {
      padding:10px 14px 8px;
      background:#2a2a28;
      border:2px solid var(--mc-dark);
      border-bottom:0;
      color:var(--sub);
      font-size:16px;
      box-shadow:inset 2px 2px #3c3c3a;
      margin-bottom:-2px;
      &:hover {
        color:#fff;
      }
      &.active {
        background:var(--mc-gui);
        color:#fff;
        box-shadow:inset 2px 2px var(--mc-gui-light);
        padding-bottom:10px;
        .stepnum {
          color:var(--accent-ink);
        }
      }
    }
  }
  .editorfoot {
    background:var(--mc-gui);
    border-top:2px solid var(--mc-dark);
    box-shadow:inset 0 2px var(--mc-gui-light);
  }

  /* Umschalter: gedrückt = eingelassen */
  .level-tabs,.preview-switch,.sortbar,.componentcards {
    gap:4px;
    padding:0;
    background:none;
    border:0;
    border-radius:0;
    overflow:visible;
  }
  .level-tabs .level-tab,.preview-switch button,.sortbar button,.componentcards button,.categorytabs button {
    background:var(--btn);
    border:2px solid #000;
    border-radius:0;
    color:#ddd;
    box-shadow:inset 2px 2px var(--btn-light),inset -2px -2px var(--btn-shade);
    &:hover {
      border-color:#fff;
      background:var(--btn);
    }
    &.active,&.on {
      background:var(--mc-slot);
      color:#fff;
      box-shadow:var(--bevel-down);
      border-color:#000;
    }
  }
  .level-tabs .level-tab + .level-tab,.sortbar button + button,.preview-switch button + button,.componentcards button + button {
    border-left:2px solid #000;
  }
  .level-tabs .level-tab.active {
    box-shadow:var(--bevel-down),inset 0 -2px var(--accent);
  }
  .categorytabs button {
    font-size:14px;
    padding:4px 9px;
  }

  .tradepill {
    background:var(--btn);
    border:2px solid #000;
    box-shadow:inset 2px 2px var(--btn-light),inset -2px -2px var(--btn-shade);
    &.active {
      background:var(--mc-slot);
      box-shadow:var(--bevel-down),inset 0 0 0 2px var(--accent);
    }
  }

  .modalback {
    background:rgba(0,0,0,.65);
  }
  .modalback .modal pre {
    background:#000;
    border:2px solid #8b8b8b;
  }
  .toast {
    color:#fff;
    border-left:2px solid var(--mc-dark);
  }
  .vcard {
    padding:10px;
    &:hover {
      border-color:#fff;
    }
  }
  .pick {
    border-radius:0;
    border:2px solid #000;
    background:var(--mc-slot);
  }
  .like {
    border-radius:0;
    border:2px solid #000;
    background:var(--btn);
    color:#ddd;
  }
  .block-texture-upload {
    border-radius:0;
    border:2px dashed #6b6b67;
  }
}

@media(max-width:640px) {
  body {
    .steptabs {
      gap:2px;
      padding:6px 4px 0;
      overflow:visible;
      button {
        flex:1 1 0;
        min-width:0;
        justify-content:center;
        padding:8px 2px 6px;
        font-size:13px;
        &.active {
          padding-bottom:8px;
        }
      }
    }
    .intro-text,.section .container {
      padding:18px;
    }
    .section .container {
      width:calc(100% - 32px);
    }
  }
}
@media(max-width:360px) {
  body .steptabs button {
    font-size:11px;
    letter-spacing:0;
  }
}