@font-face {
  font-family: 'AkkuratBold';
  src: url('../font/FontsFree-Net-Akkurat-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: #111;
  font-family: 'AkkuratBold', Arial, sans-serif;
  margin: 0;
  color: #111;
}

#mosaic-grid {
  display: grid;
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  grid-gap: 0;
  box-sizing: border-box;
  position: relative;
  background: #111;
}

/* Rotationsmodus: 90° gedreht für Landscape-Displays */
.rotate-90 #mosaic-grid {
  /* Breite/Höhe tauschen, damit die untransformierten Maße stimmen */
  width: 100vh;
  height: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  /* Translate erst anwenden, dann rotieren (right-to-left Anwendung der Funktionen) */
  transform: rotate(90deg) translateY(-100%);
}

.mosaic-block {
  box-sizing: border-box;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'AkkuratBold', Arial, sans-serif;
  font-weight: bold;
  font-size: 1.5vw;
  color: #fff;
  overflow: hidden;
  min-width: 0; /* wichtig für korrektes Clipping in Flex/Grid-Kontexten */
  transition: all 0.3s cubic-bezier(.4,2,.6,1);
}

.mosaic-block.angry    { color: #fff; }
.mosaic-block.happy    { color: #111; }
.mosaic-block.sad      { color: #fff; }
.mosaic-block.neutral  { color: #111; }
.mosaic-block.fear     { color: #fff; }
.mosaic-block.disgust  { color: #111; }
.mosaic-block.surprise { color: #111; }
.mosaic-block.portrait { color: #39ff14; border: none; }


.portrait-block {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  z-index: 2;
  grid-area: portrait;
}

.portrait-placeholder {
  width: 90%;
  height: 90%;
  background: #000;
  border: 2px solid #67c6df;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2vw;
  margin-bottom: 2vw;
  flex-direction: column;
}
.portrait-label {
  color: #39ff14;
  font-weight: bold;
  text-align: center;
  font-size: 1.1vw;
  background: #111;
  padding: 0.5vw 1vw;
  border-radius: 1vw;
}

.emotion-bars {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  gap: 0;
  justify-content: stretch;
  margin: 0;
}
.emotion-bar {
  color: #fff;
  font-family: 'AkkuratBold', Arial, sans-serif;
  font-weight: bold;
  font-size: 1.5vw;
  border-radius: 0;
  margin: 0;
  padding: 0.7vw 1vw;
  text-align: left;
  letter-spacing: 0.02em;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

.angry    { background: #f00000; }
.happy    { background: #ffe900; color: #111; }
.sad      { background: #67c6df; }
.neutral  { background: #b2b2b2; color: #111; }
.fear     { background: #7a4d99; }
.disgust  { background: #5ed451; color: #111; }
.surprise { background: #fad4d0; color: #111; }


.legend li {
  margin-bottom: 0.5vw;
  display: flex;
  align-items: center;
}
.legend .color {
  display: inline-block;
  width: 1.5vw;
  height: 1.5vw;
  margin-right: 0.7vw;
  border-radius: 0.4vw;
}
.color.angry    { background: #f00000; }
.color.happy    { background: #ffe900; }
.color.sad      { background: #67c6df; }
.color.neutral  { background: #b2b2b2; }
.color.fear     { background: #7a4d99; }
.color.disgust  { background: #5ed451; }
.color.surprise { background: #fad4d0; }