/* ============================================================
   Nekolab Nari – Startseite
   ------------------------------------------------------------
   Die Werkzeuge stehen nebeneinander in einem dunklen Raum, auf
   einem Boden, der sie spiegelt. Die Anleihe ist der BootMii-
   Bildschirm der Wii; Farben, Kanten und Schrift kommen wie in
   allen Nari-Werkzeugen aus neko-ui.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import './vendor/neko-ui/css/neko-ui.css';

html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  display: flex; flex-direction: column;
  /* Der Raum: eine Lichtquelle oben in der Mitte, Ecken fallen ab. */
  background:
    radial-gradient(120% 90% at 50% 8%, #23282E 0%, #171A1E 42%, #0C0E10 100%);
}

/* ============================================================
   Bühne
   ============================================================ */
.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Die Werkzeuge stehen auf der Kante zwischen beiden Haelften. */
.above {
  flex: 1.15 1 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 16px; padding: 20px 20px 16px;
}

/* Der Boden. Die helle Kante oben ist die Kante, auf der alles steht –
   ohne sie schwebt die Reihe im Nichts. */
.floor {
  flex: 1 1 0; min-height: 0; overflow: hidden;
  display: flex; justify-content: center; align-items: flex-start;
  background: linear-gradient(180deg, rgba(255,255,255,.055) 0, rgba(255,255,255,.014) 30%, transparent 80%);
  border-top: 1px solid rgba(255,255,255,.10);
  pointer-events: none;
}

/* ============================================================
   Die Kacheln
   ============================================================ */
.row { display: flex; gap: 26px; align-items: flex-end; }

/* Ein abgerundetes Quadrat mit einer hellen Oberkante – die Kachel faengt
   das Licht von oben, wie alles andere im Raum auch. Bewusst ohne die
   abgeschnittene Ecke der Wii: die schneidet den Rahmen mit weg. */
.tile {
  position: relative; display: block;
  text-decoration: none;                  /* niemals unterstreichen */
  width: 156px; height: 156px; flex: none;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, #333941 0%, #262B32 46%, #1B1F24 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 14px 30px rgba(0,0,0,.55);
  color: var(--text-2);
  transition: transform .16s ease, color .16s, border-color .16s, box-shadow .16s, background .16s;
}
.tile:hover, .tile:focus-visible, .tile.on {
  outline: none;
  text-decoration: none;
  transform: translateY(-6px);
  color: var(--text);
  background: linear-gradient(180deg, #3B424B 0%, #2C323A 46%, #20252B 100%);
  border-color: rgba(244,114,182,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 1px rgba(244,114,182,.22),
    0 0 22px rgba(244,114,182,.20),
    0 20px 38px rgba(0,0,0,.6);
}
.tile:active { transform: translateY(-2px); }

.tile .face {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 14px;
  text-align: center;
}
/* Lucide zeichnet auf 24 Einheiten mit Strichstaerke 2. Hochskaliert auf
   42 px waere der Strich 3,5 px dick und wirkt klobig – deshalb duenner. */
.tile svg { width: 42px; height: 42px; stroke-width: 1.5; }
.tile .name { font-size: 13px; font-weight: 600; letter-spacing: .2px; }
.tile .sub {
  font-size: 10px; font-family: var(--mono); color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px;
}
.tile:hover .sub, .tile:focus-visible .sub, .tile.on .sub { color: var(--accent); }

/* Das Spiegelbild wird beim Laden aus der Reihe geklont. Ohne JavaScript
   fehlt nur die Spiegelung, nicht das Menü. */
/* Nur eine Ahnung von Spiegelbild: kraeftiger gezeichnet liest es sich als
   zweite Reihe, und man sucht dort Knoepfe, die es nicht gibt. */
.row.mirror {
  transform: scaleY(-1);
  margin-top: 0;
  opacity: .28;
  pointer-events: none;
  /* Die Maske liegt im ungespiegelten Raum des Elements und wird mit
     umgeklappt: "to bottom" heisst nach dem Spiegeln also "nach unten
     schwaecher" – dort, wo das Bild vom Original wegwandert. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,.95) 100%);
  mask-image: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,.95) 100%);
  filter: blur(1px);
}
.row.mirror .tile { box-shadow: none; filter: none; transform: none; }
.row.mirror .tile { transition: none; }

/* Punkte unter der Reihe: welcher Platz gerade gewählt ist. */
.dots { display: flex; gap: 9px; }
.dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3A414A; box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  transition: background .16s, transform .16s;
}
.dots i.on { background: var(--accent); transform: scale(1.25); }

/* ============================================================
   Fußzeile
   ============================================================ */
.foot {
  flex: none; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  font-size: var(--fs-xs); color: var(--muted);
}
/* Das Zeichen bringt seinen eigenen dunklen Grund mit – es gehoert nicht
   noch einmal in eine getoente Fassung. */
.foot .mark { width: 26px; height: 26px; flex: none; border-radius: 7px; display: block; }
.foot .wordmark { color: var(--text); font-weight: 600; font-size: 14px; letter-spacing: .2px; }
.foot .kana { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.foot .hint { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.foot .hint kbd { margin: 0 2px; }

/* ============================================================
   Enge Fenster: die Reihe bricht um, die Spiegelung entfällt
   ============================================================ */
@media (max-width: 720px), (max-height: 520px) {
  body { overflow: auto; }
  .row { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .row.mirror { display: none; }
  .tile { width: 132px; height: 132px; border-radius: 15px; }
  .foot .hint { display: none; }
}

/* ============================================================
   Platzhalterseiten der Unterordner
   ============================================================ */
.placeholder {
  min-height: 100%; display: grid; place-items: center; padding: 24px;
}
.placeholder .panel { width: min(520px, 100%); }

/* Ein einzelner Knopf bleibt ein Knopf und wird nicht zum Banner gezogen. */
.placeholder .panel-body > .btn { align-self: flex-start; }