/*
 * PunkteBuddy – Gemeinsame Gamebar
 * https://www.punktebuddy.de/shared/gamebar.css
 *
 * Einmal hier updaten → alle Buddy-Apps werden aktualisiert.
 *
 * Layout:
 *   Row 1: [Spielcode links] [Logo+Name mitte] [Modus/Runde rechts]
 *   Row 2: [Timer links]     [Spielleiter/Zuschauer mitte]
 *
 * HTML-Template für neue Apps:
 *
 * <div class="buddy-gamebar">
 *   <div class="buddy-gamebar-row1">
 *     <span class="buddy-gamebar-code" onclick="showGameCode()">📋 <span id="displayGameCode"></span></span>
 *     <span class="buddy-gamebar-app">
 *       <img src="https://www.punktebuddy.de/logos/[app]-logo.png" class="buddy-gamebar-logo" onerror="this.outerHTML='[emoji]'">
 *       App Name
 *     </span>
 *     <span class="buddy-gamebar-mode" id="gameModeDisplay">Runde 1/10</span>
 *   </div>
 *   <div class="buddy-gamebar-row2">
 *     <span class="buddy-gamebar-timer">⏱ <span id="gameTimer">00:00</span></span>
 *     <div class="buddy-gamebar-role">
 *       <span id="ownerBadge" class="buddy-gamebar-badge buddy-gamebar-badge--owner">🎮 Spielleiter</span>
 *       <span id="viewerBadge" class="buddy-gamebar-badge buddy-gamebar-badge--viewer" style="display:none;">👁️ Nur Ansicht</span>
 *     </div>
 *     <span></span>
 *   </div>
 * </div>
 */

.buddy-gamebar {
  max-width: 600px;
  margin: 0 auto;
}

.buddy-gamebar-row1,
.buddy-gamebar-row2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.buddy-gamebar-row2 {
  padding-top: 6px;
  border-top: 1px solid var(--border-color, var(--panel-border, rgba(255,255,255,0.12)));
  margin-top: 6px;
}

/* Row 1 */

.buddy-gamebar-code {
  justify-self: start;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--primary-color);
  white-space: nowrap;
  /* reset button styles (for apps using <button> element) */
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
}

.buddy-gamebar-code:hover {
  opacity: 0.8;
}

.buddy-gamebar-app {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.buddy-gamebar-logo {
  height: 24px;
  width: 24px;
  object-fit: contain;
  border-radius: 4px;
}

.buddy-gamebar-mode {
  justify-self: end;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: normal;
  text-align: right;
  word-break: break-word;
}

/* Row 2 */

.buddy-gamebar-timer {
  justify-self: start;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.buddy-gamebar-role {
  justify-self: center;
  display: flex;
  align-items: center;
}

.buddy-gamebar-badge {
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.buddy-gamebar-badge--owner {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.buddy-gamebar-badge--viewer {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  animation: pulse 2s ease-in-out infinite;
}