:root {
  --bg: #0f1115;
  --fg: #e6e6e6;
  --muted: #9aa0a6;
  --accent: #4caf50;
  --danger: #aa1d1b;
  --end: #5e0706;
  --card: #151822;
  --radius: 16px;
}

* { 
  box-sizing: border-box; 
}

html, body { 
  height: 100%; 
  margin: 0; }

body { 
  background: var(--bg); 
  color: var(--fg); 
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; 
}

#app { 
  display: grid; 
  grid-template-rows: auto 1fr auto; 
  min-height: 100dvh; 
}

#video-area { 
  display: grid; 
  grid-template-rows: auto 1fr; 
  gap: 10px; 
  padding: 10px; 
}

#videos { grid-row: 2; }

#controls { grid-row: 1; }

.videos {
  display: flex;
  gap: 10px;
  width: 100%;
  height: 100%;
  flex-direction: column; /* Portrait default */
  justify-content: center;
}

@media (orientation: landscape) {
  .videos { 
    flex-direction: row; 
    align-items: center;
    justify-content: center;
  }
}

/* Videokachel */
.video-tile {
  background: var(--card);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* Videobild */
.video-tile canvas 
{
  width: 100%;
  height: auto; 
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: calc(var(--radius) - 2px);
  background: #1f1f1f;
}

.video-tile video {
  width: 100%;
  height: auto;
  object-fit: cover;/*contain*/
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: calc(var(--radius) - 2px);
  background: #1f1f1f;
}

/* Kachel-Label (optional) */
.tile-label {
  position: absolute;
  left: 8px; 
  bottom: 8px;
  background: rgba(0,0,0,0.5);
  padding: 3px 8px; 
  border-radius: 999px; 
  font-size: 12px; 
  color: #fff;
}

.controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 10px;
  max-height: 100px;
}

.controls button {
  padding: 10px 20px; 
  border-radius: 999px; 
  border: 1px solid #2a3149;
  background: #0d40da; 
  color: var(--fg); 
  cursor: pointer;
  height: 65px;
}

.controls button.danger { 
  background: var(--danger); 
  border-color: #e73434; 
}

.controls button.end { 
  background: var(--end); 
  border-color: #330404; 
}

.controls button:disabled { 
  opacity: 0.5; 
  cursor: not-allowed; 
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 36px;
  padding: 0.25rem;
  transition: transform 0.1s;
}

.icon-btn:hover {
  transform: scale(1.2);
}

.status {
  border-top: 1px solid #1e2230; 
  padding: 8px 16px; 
  color: var(--muted); 
  font-size: 13px;
}