.navbar {
  display:flex;
  flex-direction:
}

.item a {
  color:white;
  padding-right:5px;
  border-right:white solid 
}

.slider-wrapper {
    position: relative;
    width: 390px;
    height: 433px;
    overflow: hidden;
    margin-bottom: 50 px;
  }
  
  .slider {
    display: flex;
    transition: transform 0.4s ease-in-out;
    width: 390px; /* 3张图 */
  }
  
  .slider img {
    width: 390px;
    height: 433px;
  }
  
  button.prev, button.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 8px;
    cursor: pointer;
    font-size: 18px;
    z-index: 10;
  }
  
  button.prev { left: 10px; }
  button.next { right: 10px; }

.scoreboard-container {
  padding: 20px;
  max-width: 100%;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  margin-top: 5px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.score-card {
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,0.05);
  padding: 16px;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}


.score-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 255, 255, 0.3);
}

.gold {
  background: linear-gradient(135deg, #fff8b0, #ffd700);
  color: #ffffff;
  border: 1px solid #ffe600;
  box-shadow: 0 0 10px rgba(255, 230, 0, 0.6);
  text-shadow: 0 0 4px #000;
}

.silver {
  background: linear-gradient(135deg, #e0e0e0, #c0c0c0);
  color: #ffffff;
  border: 1px solid #dcdcdc;
  box-shadow: 0 0 8px rgba(220, 220, 220, 0.5);
  text-shadow: 0 0 4px #000;
}

.bronze {
  background: linear-gradient(135deg, #f4c187, #b76e29);
  color: #ffffff;
  border: 1px solid #d7a26b;
  box-shadow: 0 0 8px rgba(210, 140, 80, 0.5);
  text-shadow: 0 0 4px #000;
}

.rank-icon {
  font-size: 1.2em;
  margin-right: 6px;
  vertical-align: middle;
  filter: drop-shadow(0 0 2px #fff);
}



/* 🥇🥈🥉 动态奖牌背景动画 */
@keyframes shine {
  0% { background-position: 0 0; }
  100% { background-position: 200% 0; }
}

.gold, .silver, .bronze {
  animation: shine 3s linear infinite;
  background-size: 200% auto;
}

/* 动态渐变背景色 */
.gold {
  background: linear-gradient(90deg, #ffe600, #ffa600, #ffe600);
}
.silver {
  background: linear-gradient(90deg, #ccc, #aaa, #ccc);
}
.bronze {
  background: linear-gradient(90deg, #b87333, #d6a75c, #b87333);
}

/* 普通 hover 发光边框 */
.score-card li:hover {
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
  transform: scale(1.01);
  transition: all 0.3s ease;
}

/* 💎 分数数字动画：放大、变色 */
.score.blink {
  animation: popColor 0.3s ease;
}





.score-card h2 {
  text-align: center;
  margin-bottom: 10px;
  color: white;
}

ul.score-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.score-list li {
  padding: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

ul.score-list li span.name {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

ul.score-list li span.score {
  font-weight: bold;
  color: #00ffff;
}

.score-list li {
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.score-list li:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(0, 255, 255, 0.4);
}
.score-list li .details {
  display: none;
  margin-top: 8px;
  font-size: 12px;
  color: white;
}
.score-list li.open .details {
  display: block;
}





/* 🔥 更强烈的数值爆发动效 */
@keyframes popColor {
  0% {
    color: #00ffff;
    transform: scale(1);
    text-shadow: 0 0 4px #00ffff;
  }
  50% {
    color: #ffd700;
    transform: scale(2.1);
    text-shadow: 0 0 16px #ff00ff, 0 0 8px #ffd700;
  }
  100% {
    color: #00ffff;
    transform: scale(1);
    text-shadow: 0 0 4px #00ffff;
  }
}

.score.blink {
  animation: popColor 0.6s ease;
  will-change: transform, color;
}

/* 🎯 前三名分数持续闪光 */
@keyframes glowPulse {
  0%, 100% {
    text-shadow: 0 0 8px #ffd700, 0 0 4px #ff0;
  }
  50% {
    text-shadow: 0 0 20px #ff00ff, 0 0 10px #ffd700;
  }
}

.score.glow {
  animation: glowPulse 2s infinite ease-in-out;
}


h2 {
  display: block;
    margin: 10px auto 5px;
    padding: 8px 18px;
    background: linear-gradient(90deg, #7f00ff, #00bcd4); /* 紫到蓝 */
    color: #ffffff;
    font-weight: bold;
    border-radius: 12px;
    font-size: 16px;
    text-shadow: 1px 1px 2px #000;
    box-shadow: 0 0 10px rgba(127,0,255,0.5);
}

  .contenuto {
    position: relative;
    z-index: 2;  /* 保证在上层 */
    background-color: white; /* ✅ 显示清晰 */
    padding: 15px;
    color: white;
  }

  .btn {
    display: block;
    margin: 10px auto 5px;
    padding: 8px 18px;
    background: linear-gradient(90deg, #7f00ff, #00bcd4); /* 紫到蓝 */
    color: #ffffff;
    font-weight: bold;
    border-radius: 12px;
    font-size: 16px;
    text-shadow: 1px 1px 2px #000;
    box-shadow: 0 0 10px rgba(127,0,255,0.5);
  }
  
  
  
  

  .btn li {
    text-decoration-color: white;
  }

  h4{
    color:#000;
  }


  /* ≥ 430px ：iPhone 15/16 Pro Max, 大屏手机 */
@media (min-width: 430px) and (max-width: 599px) {
  .score-card {
    max-width: 440px;
  }
  body {
    font-size: 15px;
  }
}

/* ≥ 600px ：小型平板，部分安卓横屏 */
@media (min-width: 600px) and (max-width: 767px) {
  .score-card {
    max-width: 520px;
  }
  body {
    font-size: 16px;
    padding: 16px;
  }
}

/* ≥ 768px ：iPad 竖屏、小笔电 */
@media (min-width: 768px) and (max-width: 1023px) {
  .score-card {
    max-width: 680px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .score-list {
    width: 100%;
    padding-left: 20px;
  }
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
    overflow: auto;
    font-family: "Arial", sans-serif;
}

.navbar .item a{
    color:white;
  }
}

/* ≥ 1024px ：桌面端 / iPad 横屏 */
@media (min-width: 1024px) and (max-width: 1439px) {
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
    overflow: auto;
    font-family: "Arial", sans-serif;
}

.navbar a{
    color:white;
  }
  .score-card {
    max-width: 800px;
  }
}

/* ≥ 1440px ：大屏桌面 / 4K 显示器 */
@media (min-width: 1440px) {
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    color: #fff;
    overflow: auto;
    font-family: "Arial", sans-serif;
}

.navbar {
    display:flex;
    justify-content:space-around;
    align-items:center;
}

.contain-italiano .slider-wrapper{
            
            width:100%;
                margin-top:20px;
                 display:flex;
    justify-content:flex-start;

        }

  .navbar .nav-item a{

    color:white;
  }
  .score-card {
    max-width: 1000px;
  }
}