/* Variables */
:root {
  --color-red: #e74c3c;
  --color-yellow: #f1c40f;
  --color-orange: #e67e22;
  --color-dark: #2c3e50;
  --color-light: #ecf0f1;
  --color-green: #27ae60;
  --color-white: #ffffff;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-strong: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, var(--color-red) 0%, var(--color-orange) 50%, var(--color-yellow) 100%);
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
  min-height: 100vh;
  color: var(--color-dark);
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Page d'accueil */
.home-page {
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-container {
  text-align: center;
  padding: 2rem;
}

.title {
  font-size: 4rem;
  color: var(--color-white);
  text-shadow: 4px 4px 0 var(--color-dark), 6px 6px 0 rgba(0,0,0,0.2);
  margin-bottom: 0.5rem;
  letter-spacing: 0.1em;
}

.subtitle {
  font-size: 1.5rem;
  color: var(--color-white);
  margin-bottom: 3rem;
  text-shadow: 2px 2px 0 var(--color-dark);
}

.role-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.role-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background: var(--color-white);
  border-radius: 20px;
  text-decoration: none;
  color: var(--color-dark);
  box-shadow: var(--shadow-strong);
  transition: transform 0.2s, box-shadow 0.2s;
}

.role-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

.role-btn:active {
  transform: scale(0.98);
}

.role-icon {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.role-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.role-desc {
  font-size: 0.9rem;
  color: #666;
  font-weight: normal;
}

/* Admin Page */
.admin-page {
  padding: 1rem;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.admin-title {
  font-size: 1.5rem;
  color: var(--color-dark);
}

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 768px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }
}

.panel {
  background: var(--color-white);
  border-radius: 15px;
  padding: 1rem;
  box-shadow: var(--shadow);
}

.panel-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--color-yellow);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Teams Panel */
.teams-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.team-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--color-light);
  border-radius: 10px;
  border-left: 5px solid var(--color-dark);
}

.team-color {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--color-dark);
}

.team-name {
  flex: 1;
  font-size: 1.1rem;
}

.team-score {
  font-size: 2rem;
  font-weight: bold;
  min-width: 60px;
  text-align: center;
}

.team-controls {
  display: flex;
  gap: 0.25rem;
}

.score-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.1s;
}

.score-btn:active {
  transform: scale(0.9);
}

.score-btn.plus {
  background: var(--color-green);
  color: white;
}

.score-btn.minus {
  background: var(--color-red);
  color: white;
}

.score-btn.plus-3 {
  background: var(--color-orange);
  color: white;
  font-size: 1rem;
}

.delete-team-btn {
  background: #95a5a6;
  color: white;
  font-size: 1rem;
}

/* Add Team Form */
.add-team-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px dashed #ddd;
}

.add-team-form input[type="text"] {
  flex: 1;
  padding: 0.5rem;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
}

.add-team-form input[type="color"] {
  width: 50px;
  height: 40px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.add-team-btn {
  padding: 0.5rem 1rem;
  background: var(--color-green);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

/* Soundboard */
.sound-categories {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.category-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  background: var(--color-light);
  color: var(--color-dark);
  transition: all 0.2s;
}

.category-btn.active {
  background: var(--color-yellow);
  color: var(--color-dark);
}

.sounds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}

.sound-btn {
  padding: 1rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-yellow), var(--color-orange));
  color: var(--color-dark);
  font-weight: bold;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.1s, box-shadow 0.1s;
}

.sound-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

.sound-btn:active {
  transform: scale(0.95);
}

.sound-btn.playing {
  animation: pulse 0.5s infinite;
  background: linear-gradient(135deg, var(--color-green), #2ecc71);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.stop-btn {
  width: 100%;
  padding: 0.75rem;
  margin-top: 1rem;
  border: none;
  border-radius: 10px;
  background: var(--color-red);
  color: white;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
}

.soundboard-controls {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.soundboard-controls .stop-btn {
  margin-top: 0;
  flex: 1;
}

.credits-btn {
  flex: 1;
  padding: 0.75rem;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  color: white;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.credits-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 5px 15px rgba(155, 89, 182, 0.4);
}

/* Buzzer Control */
.buzzer-control {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.buzzer-status {
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
}

.buzzer-status.enabled {
  background: #d5f5e3;
  color: var(--color-green);
}

.buzzer-status.disabled {
  background: #fadbd8;
  color: var(--color-red);
}

.buzzer-status.buzzed {
  background: var(--color-yellow);
  color: var(--color-dark);
  animation: flash 0.5s infinite;
}

@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.buzzer-response {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.buzzer-response.hidden {
  display: none;
}

.response-btn {
  flex: 1;
  padding: 1rem;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
}

.response-btn:active {
  transform: scale(0.95);
}

.response-btn.correct {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: white;
  box-shadow: 0 4px 15px rgba(39, 174, 96, 0.4);
}

.response-btn.correct:hover {
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.6);
}

.response-btn.incorrect {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

.response-btn.incorrect:hover {
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6);
}

.option-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background: var(--color-light);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}

.option-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.buzzer-buttons {
  display: flex;
  gap: 0.5rem;
}

.buzzer-ctrl-btn {
  flex: 1;
  padding: 1rem;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.1s;
}

.buzzer-ctrl-btn:active {
  transform: scale(0.95);
}

.buzzer-ctrl-btn.enable {
  background: var(--color-green);
  color: white;
}

.buzzer-ctrl-btn.disable {
  background: var(--color-red);
  color: white;
}

.buzzer-ctrl-btn.reset {
  background: var(--color-yellow);
  color: var(--color-dark);
}

.team-change-control {
  margin-top: 0.5rem;
}

.buzzer-ctrl-btn.team-change {
  width: 100%;
  background: #95a5a6;
  color: white;
}

.buzzer-ctrl-btn.team-change.unlocked {
  background: var(--color-green);
}

.buzzer-ctrl-btn.team-change.locked {
  background: var(--color-red);
}


/* TV Page */
.tv-page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
  padding-top: 4rem;
}

/* Affichage de la manche */
.tv-round {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.75rem 2rem;
  background: rgba(0, 0, 0, 0.8);
  color: var(--color-yellow);
  font-size: 2rem;
  font-weight: bold;
  border-radius: 15px;
  text-transform: uppercase;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 30;
}

.tv-round.active {
  opacity: 1;
  animation: roundPulse 3s ease-in-out infinite;
}

@keyframes roundPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
}

.tv-teams {
  display: flex;
  gap: 4rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: auto;
}

/* Règles de la manche */
.tv-round-info {
  position: fixed;
  bottom: 280px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  padding: 1rem 2rem;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 15px;
  border-left: 4px solid var(--color-yellow);
  text-align: center;
  z-index: 25;
  animation: roundInfoFadeIn 0.5s ease-out;
}

.tv-round-info.hidden {
  display: none;
}

@keyframes roundInfoFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.tv-round-info-text {
  color: white;
  font-size: 1.5rem;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .tv-round-info {
    bottom: 200px;
    max-width: 90%;
    padding: 0.75rem 1.5rem;
  }

  .tv-round-info-text {
    font-size: 1.1rem;
  }
}

.tv-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem 0;
}

/* QR Code */
.qr-container {
  position: fixed;
  bottom: 0;
  right: 2rem;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 20;
}

.qr-container-inner {
  background: var(--color-white);
  padding: 0.75rem;
  border-radius: 10px;
  box-shadow: var(--shadow-strong);
  text-align: center;
  animation: qrPulse 3s ease-in-out infinite;
}

@keyframes qrPulse {
  0%, 100% { transform: scale(1); box-shadow: var(--shadow-strong); }
  50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(241, 196, 15, 0.6); }
}

.qr-code {
  width: 120px;
  height: 120px;
  display: block;
}

.qr-code img,
.qr-code canvas {
  width: 100% !important;
  height: 100% !important;
}

.qr-label {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--color-dark);
}

.tv-team {
  background: var(--color-white);
  border-radius: 30px;
  padding: 3rem;
  min-width: 300px;
  text-align: center;
  box-shadow: var(--shadow-strong);
  transition: transform 0.3s, box-shadow 0.3s;
  animation: floatTeam 4s ease-in-out infinite;
}

.tv-team:nth-child(2) {
  animation-delay: -2s;
}

@keyframes floatTeam {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.tv-team.buzzed {
  transform: scale(1.1);
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.8);
  animation: teamFlash 0.3s infinite;
}

@keyframes teamFlash {
  0%, 100% { transform: scale(1.1); }
  50% { transform: scale(1.15); }
}

.tv-team-name {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.tv-team-score {
  font-size: 8rem;
  font-weight: bold;
  line-height: 1;
  transition: transform 0.3s, color 0.3s;
}

.tv-team-miams {
  font-size: 1.5rem;
  color: var(--color-dark);
  opacity: 0.7;
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.tv-team-score.score-up {
  animation: scoreUp 0.5s ease-out;
  color: var(--color-green);
}

.tv-team-score.score-down {
  animation: scoreDown 0.5s ease-out;
  color: var(--color-red);
}

@keyframes scoreUp {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes scoreDown {
  0% { transform: scale(1); }
  50% { transform: scale(0.8); }
  100% { transform: scale(1); }
}

/* Wrong Answer Overlay */
.wrong-answer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(231, 76, 60, 0.3);
  z-index: 150;
  pointer-events: none;
}

.wrong-answer-overlay.active {
  display: flex;
  animation: wrongAnswerFlash 0.8s ease-out forwards;
}

.wrong-answer-icon {
  font-size: 20rem;
  color: var(--color-red);
  text-shadow: 0 0 50px rgba(231, 76, 60, 0.8), 0 0 100px rgba(231, 76, 60, 0.5);
  animation: wrongAnswerShake 0.8s ease-out;
}

@keyframes wrongAnswerFlash {
  0% { background: rgba(231, 76, 60, 0.6); }
  100% { background: rgba(231, 76, 60, 0); }
}

@keyframes wrongAnswerShake {
  0%, 100% { transform: translateX(0) scale(1); opacity: 1; }
  10%, 30%, 50%, 70% { transform: translateX(-20px) scale(1.1); }
  20%, 40%, 60% { transform: translateX(20px) scale(1.1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Correct Answer Overlay */
.correct-answer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(39, 174, 96, 0.3);
  z-index: 150;
  pointer-events: none;
}

.correct-answer-overlay.active {
  display: flex;
  animation: correctAnswerFlash 0.8s ease-out forwards;
}

.correct-answer-icon {
  font-size: 20rem;
  color: var(--color-green);
  text-shadow: 0 0 50px rgba(39, 174, 96, 0.8), 0 0 100px rgba(39, 174, 96, 0.5);
  animation: correctAnswerPop 0.8s ease-out;
}

@keyframes correctAnswerFlash {
  0% { background: rgba(39, 174, 96, 0.6); }
  100% { background: rgba(39, 174, 96, 0); }
}

@keyframes correctAnswerPop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* Confetti Canvas */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 250;
}

/* Activation Overlay */
.activation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.9);
  z-index: 200;
}

.activation-overlay.hidden {
  display: none;
}

.activation-btn {
  padding: 2rem 4rem;
  font-size: 2rem;
  font-weight: bold;
  background: var(--color-yellow);
  color: var(--color-dark);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s;
}

.activation-btn:hover {
  transform: scale(1.05);
}

/* Video Overlay TV */
.video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.9);
  z-index: 50;
}

.video-overlay.active {
  display: flex;
}

.video-player {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 20px;
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.3);
}

.tv-buzz-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.tv-buzz-overlay.active {
  display: flex;
  animation: overlayFade 0.3s;
}

@keyframes overlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tv-buzz-message {
  font-size: 6rem;
  color: white;
  text-shadow: 4px 4px 0 black;
  animation: buzzPulse 0.5s infinite;
}

@keyframes buzzPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Buzzer Page */
.buzzer-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.buzzer-select {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 2rem;
}

.buzzer-select-title {
  font-size: 2rem;
  color: var(--color-white);
  text-shadow: 3px 3px 0 var(--color-dark);
  margin-bottom: 2rem;
}

.buzzer-team-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.buzzer-team-btn {
  padding: 1.5rem 2rem;
  border: none;
  border-radius: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  cursor: pointer;
  box-shadow: var(--shadow-strong);
  transition: transform 0.2s, box-shadow 0.2s;
  animation: teamBtnBounce 2s ease-in-out infinite;
}

.buzzer-team-btn:nth-child(2) {
  animation-delay: -1s;
}

@keyframes teamBtnBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.buzzer-team-btn:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.buzzer-team-btn:active {
  transform: scale(0.95);
  animation: none;
}

.buzzer-main {
  display: none;
  flex-direction: column;
  flex: 1;
}

.buzzer-main.active {
  display: flex;
}

/* Affichage de la manche sur buzzer */
.buzzer-round {
  text-align: center;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-yellow);
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.buzzer-round.active {
  opacity: 1;
}

/* Bouton plein écran */
.fullscreen-btn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
}

.fullscreen-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
}

.fullscreen-btn.active {
  background: var(--color-red);
}

.buzzer-info {
  padding: 1rem;
  text-align: center;
  color: white;
  font-size: 1.5rem;
  text-shadow: 2px 2px 0 var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.change-team-btn {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  color: white;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.change-team-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.change-team-btn.hidden {
  display: none;
}

/* Video Player Buzzer - Fullscreen */
.buzzer-video-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  background: #000;
  z-index: 100;
}

.buzzer-video-container.active {
  display: flex;
}

.buzzer-video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.buzzer-button-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.buzzer-button {
  width: 80vmin;
  height: 80vmin;
  max-width: 400px;
  max-height: 400px;
  border-radius: 50%;
  border: 8px solid var(--color-dark);
  background: url('../img/burger.png') center center / 70% no-repeat, radial-gradient(circle at 30% 30%, #ff6b6b, var(--color-red) 60%, #c0392b);
  color: white;
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 -5px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s, box-shadow 0.1s;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: buzzerGlow 2s ease-in-out infinite;
}

@keyframes buzzerGlow {
  0%, 100% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 -5px 20px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 -5px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(231, 76, 60, 0.6);
  }
}

.buzzer-button:active {
  transform: scale(0.95);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), inset 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.buzzer-button.disabled {
  background: url('../img/burger.png') center center / 70% no-repeat, radial-gradient(circle at 30% 30%, #95a5a6, #7f8c8d 60%, #566573);
  cursor: not-allowed;
  opacity: 0.6;
  animation: none;
}

.buzzer-button.buzzed {
  background: url('../img/burger.png') center center / 70% no-repeat, radial-gradient(circle at 30% 30%, #2ecc71, var(--color-green) 60%, #1e8449);
  animation: buzzedPulse 0.5s infinite;
}

.buzzer-button.other-buzzed {
  background: url('../img/burger.png') center center / 70% no-repeat, radial-gradient(circle at 30% 30%, #e74c3c, #c0392b 60%, #922b21);
  opacity: 0.5;
}

@keyframes buzzedPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Utility */
.btn-small {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

.btn-reset {
  background: var(--color-orange);
  color: white;
}

.btn-danger {
  background: var(--color-red);
  color: white;
}

.btn-danger:hover {
  background: #c0392b;
}

.admin-header-buttons {
  display: flex;
  gap: 0.5rem;
}

.connection-status {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  z-index: 5;
}

.tv-page .connection-status {
  left: 1rem;
  right: auto;
}

.connection-status.connected {
  background: var(--color-green);
  color: white;
  animation: connectedPulse 2s ease-in-out infinite;
}

@keyframes connectedPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.connection-status.disconnected {
  background: var(--color-red);
  color: white;
  animation: disconnectedBlink 1s ease-in-out infinite;
}

@keyframes disconnectedBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Responsive */
@media (max-width: 600px) {
  .title {
    font-size: 2.5rem;
  }

  .role-btn {
    width: 150px;
    height: 150px;
  }

  .role-icon {
    font-size: 3rem;
  }

  .tv-team {
    min-width: 200px;
    padding: 2rem;
  }

  .tv-team-name {
    font-size: 1.5rem;
  }

  .tv-team-score {
    font-size: 5rem;
  }

  .tv-banner {
    max-height: 80px;
  }

  .qr-container {
    right: 0.5rem;
    height: 80px;
  }

  .qr-container-inner {
    padding: 0.3rem;
  }

  .qr-code {
    width: 50px;
    height: 50px;
  }

  .qr-label {
    display: none;
  }

  /* Buzzer Mobile */
  .buzzer-select {
    padding: 1rem;
  }

  .buzzer-select-title {
    font-size: 1.5rem;
    text-align: center;
  }

  .buzzer-team-btn {
    padding: 1.2rem 1.5rem;
    font-size: 1.2rem;
  }

  .buzzer-info {
    padding: 0.5rem;
    font-size: 1.2rem;
  }

  .buzzer-button-container {
    padding: 1rem;
  }

  .buzzer-button {
    width: 85vmin;
    height: 85vmin;
    font-size: 2rem;
    border-width: 6px;
  }

  .connection-status {
    bottom: 0.5rem;
    right: 0.5rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .buzzer-button {
    width: 90vmin;
    height: 90vmin;
  }

  .buzzer-select-title {
    font-size: 1.2rem;
  }
}

/* PIN Overlay */
.pin-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
}

.pin-overlay.hidden {
  display: none;
}

.pin-container {
  background: var(--color-white);
  padding: 2rem 3rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: pinSlideIn 0.3s ease-out;
}

@keyframes pinSlideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.pin-title {
  font-size: 1.8rem;
  color: var(--color-dark);
  margin-bottom: 1.5rem;
}

.pin-input {
  width: 200px;
  padding: 1rem;
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0.5em;
  border: 3px solid var(--color-light);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s;
}

.pin-input:focus {
  border-color: var(--color-yellow);
}

.pin-input.error {
  border-color: var(--color-red);
  animation: pinShake 0.5s ease-out;
}

@keyframes pinShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}

.pin-error {
  color: var(--color-red);
  font-weight: bold;
  margin-top: 1rem;
  font-size: 0.9rem;
}

.pin-error.hidden {
  display: none;
}

.pin-submit {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--color-yellow);
  color: var(--color-dark);
  border: none;
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.pin-submit:hover {
  background: var(--color-orange);
  color: white;
}

.pin-submit:active {
  transform: scale(0.98);
}

/* iOS Prompt */
.ios-prompt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
}

.ios-prompt.hidden {
  display: none;
}

.ios-prompt-content {
  background: var(--color-white);
  padding: 2rem;
  border-radius: 20px;
  text-align: center;
  max-width: 320px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: pinSlideIn 0.3s ease-out;
}

.ios-prompt-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.ios-prompt-content h3 {
  font-size: 1.3rem;
  color: var(--color-dark);
  margin-bottom: 1rem;
}

.ios-prompt-content p {
  font-size: 1rem;
  color: #555;
  margin: 0.5rem 0;
  text-align: left;
}

.ios-share-icon {
  display: inline-block;
  background: #007aff;
  color: white;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  font-size: 0.9rem;
}

.ios-prompt-close {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--color-green);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
}

/* Standalone mode (PWA) - masquer le bouton fullscreen */
@media all and (display-mode: standalone) {
  .fullscreen-btn {
    display: none;
  }

  .buzzer-page {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============ FINALE - BURGER DE LA MORT ============ */

/* Admin Finale Panel */
.finale-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.9);
  z-index: 500;
}

.finale-overlay.hidden {
  display: none;
}

.finale-panel {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  padding: 2rem;
  border-radius: 20px;
  text-align: center;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 100px rgba(15, 52, 96, 0.5);
  animation: finaleSlideIn 0.5s ease-out;
}

@keyframes finaleSlideIn {
  from {
    transform: translateY(-50px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.finale-title {
  font-size: 2rem;
  color: var(--color-yellow);
  text-shadow: 0 0 20px rgba(241, 196, 15, 0.5);
  margin-bottom: 1.5rem;
  animation: finaleGlow 2s ease-in-out infinite;
}

@keyframes finaleGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(241, 196, 15, 0.5); }
  50% { text-shadow: 0 0 40px rgba(241, 196, 15, 0.8), 0 0 60px rgba(241, 196, 15, 0.4); }
}

.finale-step {
  margin-bottom: 1rem;
}

.finale-step.hidden {
  display: none;
}

.finale-info {
  color: #ecf0f1;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.finale-teams {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.finale-team-btn {
  padding: 1.5rem;
  border: none;
  border-radius: 15px;
  font-size: 1.3rem;
  font-weight: bold;
  color: white;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.finale-team-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.finale-team-btn small {
  font-size: 0.9rem;
  opacity: 0.8;
}

.finale-team-name {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.finale-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.finale-btn {
  padding: 1.2rem;
  border: none;
  border-radius: 15px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.finale-btn:hover {
  transform: scale(1.03);
}

.finale-btn.grand {
  background: linear-gradient(135deg, #f1c40f, #e67e22);
  color: var(--color-dark);
  box-shadow: 0 5px 20px rgba(241, 196, 15, 0.4);
}

.finale-btn.petit {
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  color: white;
  box-shadow: 0 5px 20px rgba(149, 165, 166, 0.4);
}

.finale-btn.none {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  box-shadow: 0 5px 20px rgba(52, 152, 219, 0.4);
}

.finale-btn small {
  display: block;
  font-size: 0.85rem;
  font-weight: normal;
  margin-top: 0.3rem;
  opacity: 0.9;
}

.finale-result-display {
  color: white;
  padding: 2rem;
}

.finale-result {
  font-size: 5rem;
  margin-bottom: 1rem;
  animation: finaleResultPop 0.5s ease-out;
}

@keyframes finaleResultPop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.finale-result-display h2 {
  font-size: 1.8rem;
  color: var(--color-yellow);
}

.finale-result-display h3 {
  font-size: 1.2rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.finale-exit-btn {
  width: 100%;
  padding: 1rem;
  margin-top: 1rem;
  background: var(--color-green);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.finale-exit-btn:hover {
  background: #27ae60;
}

.finale-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.2s;
}

.finale-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.finale-panel {
  position: relative;
}

/* TV Finale Overlay */
.finale-tv-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 50%, #0a0a2a 100%);
  z-index: 180;
  animation: finaleBackground 4s ease-in-out infinite;
}

@keyframes finaleBackground {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.finale-tv-overlay.hidden {
  display: none;
}

.finale-tv-content {
  text-align: center;
  animation: finaleFadeIn 1s ease-out;
}

@keyframes finaleFadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.finale-tv-title {
  font-size: 5rem;
  color: var(--color-yellow);
  text-shadow: 0 0 30px rgba(241, 196, 15, 0.6), 0 0 60px rgba(241, 196, 15, 0.4);
  margin-bottom: 2rem;
  animation: finaleGlow 2s ease-in-out infinite;
  letter-spacing: 0.1em;
}

.finale-tv-team {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 2rem;
  text-shadow: 0 0 20px currentColor;
}

.finale-tv-result {
  animation: finaleResultSlide 0.5s ease-out;
}

@keyframes finaleResultSlide {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

.finale-tv-result.hidden {
  display: none;
}

.finale-result-icon {
  font-size: 10rem;
  margin-bottom: 1rem;
  animation: finaleIconBounce 1s ease-out;
}

@keyframes finaleIconBounce {
  0% { transform: scale(0) rotate(-20deg); }
  50% { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

.finale-tv-result h2 {
  font-size: 4rem;
  color: var(--color-yellow);
  text-shadow: 0 0 30px rgba(241, 196, 15, 0.6);
}

.finale-tv-winner {
  font-size: 2.5rem;
  color: white;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

/* Buzzer Finale Overlay */
.finale-buzzer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 50%, #0a0a2a 100%);
  z-index: 180;
}

.finale-buzzer-overlay.hidden {
  display: none;
}

.finale-buzzer-content {
  text-align: center;
  animation: finaleBuzzerFade 1s ease-out;
}

@keyframes finaleBuzzerFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.finale-buzzer-icon {
  font-size: 8rem;
  animation: finaleBurgerFloat 3s ease-in-out infinite;
}

@keyframes finaleBurgerFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

.finale-buzzer-title {
  font-size: 2rem;
  color: var(--color-yellow);
  text-shadow: 0 0 20px rgba(241, 196, 15, 0.5);
  margin: 1rem 0;
  animation: finaleGlow 2s ease-in-out infinite;
}

.finale-buzzer-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Responsive finale */
@media (max-width: 768px) {
  .finale-tv-title {
    font-size: 2.5rem;
  }

  .finale-tv-team {
    font-size: 2rem;
  }

  .finale-result-icon {
    font-size: 6rem;
  }

  .finale-tv-result h2 {
    font-size: 2rem;
  }
}

/* ============ INFO MODALES DES MANCHES ============ */

/* Wrapper pour bouton son + info */
.sound-btn-wrapper {
  position: relative;
  display: inline-block;
}

.sound-btn-wrapper .sound-btn {
  width: 100%;
}

/* Bouton info (i) */
.sound-info-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-dark);
  background: var(--color-white);
  color: var(--color-dark);
  font-size: 0.9rem;
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
  z-index: 10;
}

.sound-info-btn:hover {
  background: var(--color-yellow);
  transform: scale(1.1);
}

/* Modal info manche */
.round-info-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  z-index: 600;
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.round-info-modal.hidden {
  display: none;
}

.round-info-content {
  background: var(--color-white);
  padding: 2rem;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-30px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.round-info-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 35px;
  height: 35px;
  border: none;
  border-radius: 50%;
  background: var(--color-light);
  color: var(--color-dark);
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.2s;
}

.round-info-close:hover {
  background: var(--color-red);
  color: white;
}

.round-info-title {
  font-size: 1.5rem;
  color: var(--color-dark);
  margin-bottom: 1rem;
  padding-right: 2rem;
  border-bottom: 3px solid var(--color-yellow);
  padding-bottom: 0.5rem;
}

.round-info-text {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.6;
  font-weight: normal;
}

/* ============ GÉNÉRIQUE DE FIN ============ */

.credits-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #000000 0%, #1a1a2e 50%, #000000 100%);
  z-index: 200;
  overflow: hidden;
}

.credits-overlay.hidden {
  display: none;
}

.credits-content {
  position: absolute;
  width: 100%;
  text-align: center;
  animation: creditsScroll 60s linear forwards;
  padding: 20px;
}

@keyframes creditsScroll {
  0% {
    transform: translateY(100vh);
  }
  100% {
    transform: translateY(-100%);
  }
}

.credits-logo-img {
  width: 200px;
  height: auto;
  margin-bottom: 1rem;
  animation: creditsLogoPulse 2s ease-in-out infinite;
  border-radius: 20px;
}

.credits-burger-small {
  width: 60px;
  height: auto;
  vertical-align: middle;
  margin: 0 0.5rem;
  border-radius: 8px;
}

.credits-goodbye {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

@keyframes creditsLogoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.credits-title {
  font-size: 5rem;
  color: var(--color-yellow);
  text-shadow: 0 0 30px rgba(241, 196, 15, 0.6), 0 0 60px rgba(241, 196, 15, 0.3);
  margin-bottom: 0.5rem;
  letter-spacing: 0.2em;
}

.credits-subtitle {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4rem;
  letter-spacing: 0.5em;
}

.credits-section {
  margin-bottom: 4rem;
}

.credits-section.large {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.credits-heading {
  font-size: 1.5rem;
  color: var(--color-yellow);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.credits-value {
  font-size: 2.5rem;
  color: white;
  font-weight: bold;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.credits-note {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  margin-top: 0.5rem;
}

.credits-skip-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 1.2rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 201;
}

.credits-skip-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--color-yellow);
  color: var(--color-yellow);
}

/* Écran final après générique */
.credits-end-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: creditsEndFadeIn 1s ease-out;
}

.credits-end-screen.hidden {
  display: none;
}

@keyframes creditsEndFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.credits-end-banner {
  max-width: 80%;
  max-height: 60%;
  object-fit: contain;
  animation: creditsEndBannerPop 0.8s ease-out 0.3s both;
}

@keyframes creditsEndBannerPop {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Responsive credits */
@media (max-width: 768px) {
  .credits-logo-img {
    width: 120px;
  }

  .credits-burger-small {
    width: 40px;
  }

  .credits-title {
    font-size: 3rem;
  }

  .credits-subtitle {
    font-size: 1.2rem;
  }

  .credits-heading {
    font-size: 1.1rem;
  }

  .credits-value {
    font-size: 1.8rem;
  }

  .credits-skip-btn {
    bottom: 1rem;
    right: 1rem;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }

  .credits-end-banner {
    max-width: 90%;
  }
}