/* Test-Menü für jbaltres' Testserver. Wird beim Deploy eingebaut, liegt nie in Tims Repo.
   Optik wie die Spiel-Oberfläche: Tims Schriften und Farben aus :root (mit Rückfall, falls ein Branch sie nicht hat),
   Tinte-Rand, harter Versatz-Schatten, leicht schief wie das Schild bei 333 m. Über allem, Tim nutzt höchstens z-index 10. */

#tb-nav {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  z-index: 1000;
  transform: translateX(-50%) rotate(-1.5deg);
  max-width: calc(100vw - 140px); /* rechts bleibt Platz für Tims Ton-Knopf */
}

/* Auf der Fresh-Seite (Tims body[data-overlay="1"]) sitzen oben Fahrer-, Sprach- und Ton-Knopf: dann rutscht das
   Schild samt Karte unter sie, im Spiel bleibt es oben */
body[data-overlay="1"] #tb-nav { top: calc(env(safe-area-inset-top, 0px) + 76px); }
body[data-overlay="1"] #tb-panel {
  top: calc(env(safe-area-inset-top, 0px) + 130px);
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - 146px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 146px);
}

.tb-plate {
  display: block;
  padding: 7px 14px 4px;
  font-family: var(--display, 'Luckiest Guy', system-ui, sans-serif);
  font-size: clamp(13px, 4.6vw, 24px);
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #ff0000;
  background: #fff;
  border: 3px solid var(--ink, #14140F);
  border-radius: var(--r-card, 22px 27px 20px 25px / 27px 20px 25px 22px);
  box-shadow: 5px 6px 0 var(--ink, #14140F);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 130ms ease-out, box-shadow 130ms ease-out;
}
.tb-plate:active, #tb-nav.open .tb-plate { transform: translate(3px, 4px); box-shadow: 1px 2px 0 var(--ink, #14140F); }

/* Leuchtschrift: läuft einmal durch alle Farben, pulsiert dabei. Dünner Tinte-Rand, damit auch Gelb und Cyan auf
   Weiß lesbar bleiben. Die Buchstaben selbst bleiben immer scharf und voll deckend; das Leuchten ist eine verwischte
   Kopie dahinter (::before, Text aus data-text) und nur sie pulsiert. Liegt der Schein auf den Buchstaben, verschmiert
   er sie (so war es bis zum 27.09.). isolation hält die Kopie über dem Weiß der Platte, aber hinter der Schrift. */
.tb-glow {
  position: relative;
  display: inline-block;
  isolation: isolate;
  -webkit-text-stroke: 2px var(--ink, #14140F);
  paint-order: stroke fill;
  animation: tb-rgb 3.6s linear infinite;
}
.tb-glow::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-text-stroke: 0;
  filter: blur(6px);
  animation: tb-blink 0.9s ease-in-out infinite;
}
@keyframes tb-rgb {
  0%    { color: #ff0000; }
  16.7% { color: #ffee00; }
  33.3% { color: #00e000; }
  50%   { color: #00e5ff; }
  66.7% { color: #2a4bff; }
  83.3% { color: #ff00e6; }
  100%  { color: #ff0000; }
}
@keyframes tb-blink {
  0%, 100% { opacity: 1; filter: blur(7px); }
  50%      { opacity: 0.2; filter: blur(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .tb-glow { animation: tb-rgb 12s linear infinite; }
  .tb-glow::before { animation: none; opacity: 0.6; }
}

/* Aufgeklappt: Hintergrund fängt Tipps ab (sonst lenkt das Spiel darunter), die Karte darüber. */
#tb-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(20, 20, 15, 0.25);
}
#tb-panel {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  left: 50%;
  z-index: 1000;
  width: min(360px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 14px 12px 12px;
  color: var(--ink, #14140F);
  background: rgba(255, 255, 255, 0.97);
  border: 3px solid var(--ink, #14140F);
  border-radius: var(--r-card, 22px 27px 20px 25px / 27px 20px 25px 22px);
  box-shadow: 5px 6px 0 var(--ink, #14140F);
  transform: translateX(-50%) rotate(-0.6deg);
  font-family: var(--body, 'Nunito', system-ui, sans-serif);
  /* Nie höher als der Bildschirm, darin scrollen (testbench.js hält die Wischgesten vom Spiel fern) */
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - 80px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.tb-head {
  font-family: var(--display, 'Luckiest Guy', system-ui, sans-serif);
  font-size: 20px;
  line-height: 1;
  text-align: center;
}
.tb-sub { margin-top: 4px; font-size: 12px; text-align: center; opacity: 0.65; }
.tb-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }

/* Kacheln wie Tims Modus-Zeilen (.mode-card.mode-row): Abzeichen | Name + Beschreibung | Marker. */
.tb-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 10px 5px 5px;
  text-align: left;
  color: var(--ink, #14140F);
  background: #fff;
  border: 2.5px solid var(--ink, #14140F);
  border-radius: var(--r-tile, 14px 17px 12px 16px / 17px 12px 16px 14px);
  box-shadow: 3px 4px 0 var(--ink, #14140F);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 130ms ease-out, box-shadow 130ms ease-out;
}
.tb-row:active { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--ink, #14140F); }
.tb-row.active { background: var(--mark, #F8E08A); cursor: default; }
.tb-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: 2px solid var(--ink, #14140F);
  border-radius: 8px;
  background: var(--bg, #F5F9FD);
  font-family: var(--display, 'Luckiest Guy', system-ui, sans-serif);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.tb-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tb-name {
  font-family: var(--display, 'Luckiest Guy', system-ui, sans-serif);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tb-desc { font-size: 12px; line-height: 1.2; opacity: 0.7; }
.tb-mark {
  font-family: var(--display, 'Luckiest Guy', system-ui, sans-serif);
  font-size: 11px;
  opacity: 0.8;
  white-space: nowrap;
}
.tb-foot { margin-top: 10px; font-size: 11px; text-align: center; opacity: 0.5; }