/* Base layout */
* { box-sizing: border-box; }
html, body { height: 100%; }
:root { 
  --grid-gap: calc(16px * 1.2);
  --violet-brand: #7c5bb5;
  --frame-width: 10px;
  --controls-offset: 80px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Offside font */
@font-face {
  font-family: 'Offside';
  src: url('fonts/Offside-Regular.ttf') format('truetype');
  font-display: swap;
}
body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: #080813; /* minimal heller, fast schwarzes Grau */
  color: #111827;
  overflow: hidden; /* kiosk-style */
  cursor: none; /* hide system cursor everywhere */
}

.app { position: relative; width: 100vw; height: 100vh; }

/* Grid occupies viewport minus bottom controls */
.grid-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /* centered by default */
  justify-content: center;
  padding-bottom: calc(var(--controls-offset) + var(--safe-bottom));
}

/* Reachable mode: align grid to bottom */
.app.reachable .grid-wrapper {
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
}

.grid {
  width: min(92vw, 1800px);
  height: calc(100vh - var(--controls-offset) - var(--safe-bottom));
  height: calc(100dvh - var(--controls-offset) - var(--safe-bottom));
  max-height: calc(100vh - var(--controls-offset) - var(--safe-bottom));
  max-height: calc(100dvh - var(--controls-offset) - var(--safe-bottom));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--grid-gap);
  align-content: center;
  transition: transform 400ms cubic-bezier(0.22, 0.85, 0.22, 1);
  transform-origin: center bottom;
  will-change: transform;
}

/* Reachable overrides: smooth animated scale/translate */
.app.reachable .grid { 
  gap: 40px; /* 40px * 0.5 scale = 20px visible gap */
  max-height: none; 
  height: auto;
  transform: translateY(0) scale(0.5);
  transform-origin: center bottom;
}

@media (prefers-reduced-motion: reduce) {
  .grid { transition: none; }
}

.tile { display: flex; flex-direction: column; user-select: none; transform-origin: bottom center; transform: scale(0.9); }
/* Reachable mode: tiles are scaled with grid */
.app.reachable .tile { transform: scale(0.9); }

.thumb {
  position: relative;
  z-index: 0; /* Basis-Stapelsituation für Bild + Overlay + Text */
  width: 100%;
  aspect-ratio: 1 / 1; /* square tiles */
  border-radius: 16px; /* rounded corners */
  background: #000; /* fallback background behind image */
  padding: 0; /* ensure no inner spacing */
  line-height: 0; /* avoid inline gaps */
  overflow: hidden; /* Bild strikt in die gerundeten Ecken clippen */
  backface-visibility: hidden;
  transform: translateZ(0); /* prevent gaps during GPU transforms */
  /* 1px fester violetter Rahmen, danach bis 5px Farbverlauf zu Hintergrundfarbe */
  box-shadow:
    0 0 0 1px var(--violet-brand),  /* nur 1px vollviolett */
    0 0 0 3px #4f3b86,
    0 0 0 5px #080813; /* ab 5px vollständig Hintergrundfarbe */
}

/* Schwarzer Layer im unteren Drittel, der nach oben ausfadet */
.thumb::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%; /* 30% opak + 20% Verlauf = 50% der Kachelhöhe */
  /* 0–30% (unten) = opak schwarz, 30–50% (nach oben) = weicher Verlauf auf 0 */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,      /* Start ganz unten opak */
    rgba(0, 0, 0, 0.95) 60%,     /* untere 30% der Kachel bleiben vollschwarz (60% der Overlay-Höhe) */
    rgba(0, 0, 0, 0) 100%        /* obere 20% des Overlays blenden aus */
  );
  pointer-events: none;
  z-index: 1; /* über dem Bild, unter der Schrift */
}

.thumb img {
  position: absolute;
  z-index: 0; /* unter dem schwarzen Layer */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Hide system cursor on tiles (arrow off inside tiles, visible elsewhere) */
.tile, .thumb { cursor: none; }

/* In-image caption */
.caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px 14px; /* a bit more bottom padding */
  color: #ffffff;
  font-family: 'Offside', 'Manrope', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.3; /* prevent overlap on multi-line */
  display: block; /* override parent line-height:0 */
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  /* Text liegt jetzt über einem separaten schwarzen Layer (siehe .thumb::before) */
  /* Clamp to 2 lines to avoid overflow into the frame */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  z-index: 2; /* über dem schwarzen Layer */
}

.title { display: none; }

/* Controls */
.controls { position: fixed; z-index: 10; display: flex; align-items: center; gap: 10px; }
.controls-left { left: 20px; bottom: 20px; }
.controls-right { right: 20px; bottom: 20px; display: none !important; }

.lang-switch { display: inline-flex; align-items: center; gap: 6px; }
.lang-btn {
  appearance: none; border: none; background: transparent; padding: 6px 8px; border-radius: 0;
  font-weight: 700; cursor: pointer; min-width: 44px; min-height: 44px;
  font-size: 1.5em;
  color: #9ca3af; /* inaktive Sprache: hellgrau */
}
.lang-btn[aria-pressed="true"] {
  color: var(--violet-brand);
  text-decoration: none;
  font-weight: 900;
  font-size: 1.7em;
}
.lang-sep { color: #6b7280; font-weight: 700; }

.reachable-btn {
  appearance: none; border: none; background: transparent; border-radius: 0; padding: 6px; cursor: pointer; min-width: 44px; min-height: 44px;
}
.reachable-btn .hand-icon {
  display: block;
  filter: brightness(0) saturate(100%) invert(44%) sepia(23%) saturate(1844%) hue-rotate(228deg) brightness(91%) contrast(88%);
}
.app.reachable .reachable-btn { filter: drop-shadow(0 0 6px #a78bfa); }

.nav-btn { appearance: none; border: none; background: transparent; color: #111827; padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0; cursor: pointer; font-weight: 800; min-width: 64px; min-height: 64px; position: relative; }
.nav-btn:hover { color: #6D28D9; }
.nav-btn .nav-icon, .nav-btn #navLabel { position: absolute; inset: 0; display: grid; place-items: center; }
.nav-btn svg { width: 56px; height: 56px; }
.nav-btn #navLabel { pointer-events: none; font-size: 14px; font-weight: 800; }

/* Prevent hand cursor on bottom buttons */
.controls button,
.lang-btn,
.reachable-btn,
.nav-btn,
.close-btn { cursor: none !important; }

/* Overlay player */
.overlay {
  position: fixed; inset: 0; background: #080813; display: grid; place-items: center; z-index: 20;
  opacity: 1;
  transition: none;
}

/* Fade-In/-Out nur für Screensaver-Wiedergabe */
.overlay.screensaver-fade {
  opacity: 0;
  transition: opacity 4s ease;
}

.overlay.screensaver-fade.screensaver-fade-visible {
  opacity: 1;
}

/* Large pulsing hand icon during screensaver playback */
.screensaver-hand {
  position: absolute;
  right: 5vh;
  bottom: 5vh;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 25;
}
.screensaver-hand[hidden] {
  display: none !important;
}
.screensaver-hand-image {
  height: 16.5vh;
  max-width: 80vw;
  width: auto;
  /* violet icon tint + white corona following the hand shape */
  filter:
    /* tint base SVG to violet */
    brightness(0) saturate(100%) invert(44%) sepia(23%) saturate(1844%) hue-rotate(228deg) brightness(91%) contrast(88%)
    /* white glow based on alpha */
    drop-shadow(0 0 0 rgba(255, 255, 255, 1))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.6));
  animation: screensaverHandPulse 1.4s ease-in-out infinite;
  transform-origin: center center;
}
@keyframes screensaverHandPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Breathing violet cursor dot - always visible */
#cursorDot {
  position: fixed;
  left: 0; top: 0;
  width: 5px; 
  height: 5px;
  border-radius: 50%;
  background: var(--violet-brand);
  pointer-events: none;
  z-index: 10000;
  transform: translate(-2.5px, -2.5px); /* center on cursor */
  animation: cursorBreathe 2s ease-in-out infinite;
  display: block !important; /* always visible */
  will-change: transform;
}
@keyframes cursorBreathe {
  0%, 100% { transform: translate(var(--cx, -2.5px), var(--cy, -2.5px)) scale(1); }
  50% { transform: translate(var(--cx, -2.5px), var(--cy, -2.5px)) scale(1.6); } /* +3px on 5px base */
}
/* Ensure [hidden] actually hides overlay over author styles */
.overlay[hidden] { display: none !important; }

.player { width: 100vw; height: 100vh; object-fit: contain; background: #080813; }

.close-btn {
  position: absolute; top: 16px; right: 16px; font-size: 108px; line-height: 1; color: white; background: transparent; border: none; cursor: pointer; padding: 6px 10px; z-index: 30;
}
.close-btn:hover { color: #a78bfa; }

/* Wave animation: scale to 105% over 3s, back over 3s */
@keyframes tilePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Apply animation to thumbs; delay is set per-tile via CSS variable */
.thumb { animation: tilePulse var(--wave-dur, 6s) ease-in-out infinite; animation-delay: var(--wave-delay, 0s); transform-origin: center center; }

/* Responsive tweaks for smaller widths */
@media (max-width: 1200px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Small white countdown for screensaver (upper-left corner) - currently disabled */
.screensaver-countdown {
  display: none !important;
}