:root {
  --bg: #0b0e14;
  --card: #121622;
  --txt: #e7eaf3;
  --muted: #8a93a6;
  --accent: #f97316; /* 橘色主題，符合 logo */
}

body {
  margin: 0;
  font-family: 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--txt);
}

/* Hero */
.hero {
  background: linear-gradient(135deg, #1b1f2e, #0b0e14);
  text-align: center;
  padding: 30px 20px;   /* 上下空間大一點 */
}

.logo {
  width: 400px;       /* 預設大一點 */
  max-width: 90%;     /* 手機還是會自適應縮小 */
  height: auto;       /* 保持比例 */
  display: block;
  margin: 0 auto 20px;
}

.hero h1 {
  margin: 16px 0 8px;
  font-size: 40px;
}
.hero p {
  color: var(--muted);
  font-size: 18px;
  margin-bottom: 20px;
}
/* 基本按鈕樣式，統一字體 */
.btn {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: 0.2s;
  color: #fff;
}

/* Play Now (橘色) */
.btn-play {
  background: #f97316;   /* 橘色 */
}
.btn-play:hover {
  background: #ea580c;   /* 深一點 */
}

/* Game Info (灰色) */
.btn-info {
  background: #555;
}
.btn-info:hover {
  background: #333;
}


.btn:hover {
  transform: translateY(-2px);
}

/* Container */
.container {
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 20px;
}
.container h2 {
  text-align: center;
  margin-bottom: 24px;
}

/* 遊戲區塊 */
.games-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 一排四個 */
  gap: 20px;
  padding: 20px;
  max-width: 1200px;   /* 避免卡片太分散 */
  margin: 0 auto;      /* 置中 */
}



.game-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.game-card img {
  width: 100%;
  display: block;
  border-radius: 12px;
  transition: filter 0.3s ease;
}

/* hover 變暗模糊 */
.game-card:hover img {
  filter: brightness(40%) blur(2px);
}

/* overlay 預設隱藏 */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  gap: 10px;
}

.game-card:hover .overlay {
  opacity: 1;
}

/* 遊戲名稱 */
.overlay h3 {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}

/* 按鈕樣式 */
.overlay .btn {
  width: 140px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Play Now 橘色 */
.overlay .play-btn {
  background: #f97316;   /* 橘色 */
  color: #fff;
}

.overlay .play-btn:hover {
  background: #ea580c;
}

/* Game Info 灰色 */
.overlay .info-btn {
  background: #6b7280;   /* 灰色 */
  color: #fff;
}

.overlay .info-btn:hover {
  background: #4b5563;
}

.btn-group {
  display: flex;
  justify-content: center;
  gap: 10px; /* 按鈕之間留空隙 */
  margin-top: 10px;
}

.btn.small {
  padding: 8px 16px; /* 按鈕大小 */
  white-space: nowrap; /* 按鈕文字不換行 */
}

.info-btn {
  background: #555;
  cursor: pointer;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0,0,0,0.7);
}

.modal-content {
  position: relative;          /* 讓 close 參考這個定位 */
  background: #3a3a3a;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  max-width: 400px;
  margin: auto;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
}



.modal-content h2 {
  color: #fff !important;     /* 標題強制白色 */
  font-weight: bold;
}

.modal-content p {
  color: #ddd !important;     /* 一般描述文字淺灰 */
  margin: 6px 0;
}

.modal-content strong {
  color: #fff !important;     /* 數值強制白色 */
  font-weight: bold;
}

.modal-content .info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 15px;
}

.close {
  position: absolute;          /* 相對於 modal-content 定位 */
  top: 10px;                   /* 從 modal-content 上邊算 10px */
  right: 10px;                 /* 從右邊算 10px */
  color: #fff !important;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: #e74c3c;        /* 滑鼠移上去變紅色 */
  transform: scale(1.2); /* 稍微放大 */
}

.info-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  margin-top: 15px;
}

.info-details div {
  text-align: center;
}

.info-details span {
  display: block;
  font-size: 14px;
  color: #ddd;
}

.info-details strong {
  font-size: 18px;
  color: #222;
}


@media (max-width: 1024px) {
  .games-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .games-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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


/* Footer */
footer {
  text-align: center;
  padding: 20px;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid #1e2235;
}

/* 左上角斜斜標籤 (更明顯版本) */
.ribbon {
  position: absolute;
  top: 10px;
  left: -28px;       /* 稍微縮進一點 */
  width: 90px;       /* 縮短長度 */
  text-align: center;
  transform: rotate(-45deg);
  font-size: 11px;   /* 字體縮小 */
  font-weight: 700;
  color: #fff;
  padding: 3px 0;    /* 窄一點 */
  z-index: 10;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* NEW 綠色更亮 */
.ribbon.new {
  background: linear-gradient(135deg, #34d399, #059669);
  animation: pulse 1.5s infinite;
}

/* HOT 紅橘更亮，加 pulse */
.ribbon.hot {
  background: linear-gradient(135deg, #f43f5e, #b91c1c);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { transform: rotate(-45deg) scale(1); }
  50% { transform: rotate(-45deg) scale(1.1); }
}