/* Base styles inspired by spacewaves.io look */
:root {
  --bg: #a89586; /* textured-like neutral */
  --panel: #524940;
  --panel-2: #5a5047;
  --text: #ffffff;
  --muted: #d7d1cb;
  --chip: #e6ecf5;
  --chip-text: #2b2f36;
  --brand: #ffffff;
  --accent: #1ea0ff;
  --success: #28b463;
  --danger: #ff4d4f;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(transparent 1px, rgba(0,0,0,0.05) 1px) 0 0 / 6px 6px,
    linear-gradient(0deg, rgba(255,255,255,0.04), rgba(0,0,0,0.04)),
    var(--bg);
}

.container {
  width: min(1200px, 92%);
  margin: 0 auto;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(130%) blur(6px);
  background: rgba(80, 72, 64, 0.75);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand);
  text-decoration: none;
  font-weight: 800;
  font-size: 20px;
}
.brand-icon { filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35)); }

.nav { display: flex; align-items: center; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 700; }
.nav a:hover { color: var(--text); }
.search input {
  background: rgba(255,255,255,0.12);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 8px 12px;
  width: 200px;
}

/* Hero */
.hero { padding: 18px 0 10px; }
.hero-banner {
  background: linear-gradient(135deg, #7d5cff, #00c2ff);
  border-radius: 12px;
  height: 150px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.banner-text { font-size: 32px; font-weight: 800; }

/* Layout */
.layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.left-col, .right-col { min-width: 0; }

.panel {
  background: var(--panel);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  padding: 18px;
}

.rating-panel {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rating-stars span { font-size: 20px; color: #ffb01e; }
.rating-stars .dim { color: #8b744e; }
.rating-text { color: var(--muted); font-weight: 700; }

.tutorial-panel { padding: 0; overflow: hidden; }
.tutorial-header {
  padding: 14px 18px;
  font-weight: 800;
  letter-spacing: 1px;
  background: repeating-linear-gradient(45deg, #0b3972 0 12px, #092b53 12px 24px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tutorial-grid { display: grid; grid-template-columns: 1fr 1fr; }
.tutorial-card {
  padding: 18px;
  background: #0b3972;
  min-height: 160px;
  display: flex;
  align-items: center;
  color: #cfe7ff;
  font-weight: 700;
}
.tutorial-card .key { background: #163d78; border-radius: 6px; padding: 2px 6px; }
.tutorial-preview { background: linear-gradient(135deg, #101b2d, #093a7a); min-height: 160px; }

/* Game embed area */
.game-embed {
  background: linear-gradient(135deg, #101b2d, #093a7a);
  padding: 0;
}
.game-embed iframe {
  display: block;
  width: 100%;
  height: min(60vh, 640px);
  border: 0;
  background: #000;
}

.chips-row, .chip-row { margin: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--chip);
  color: var(--chip-text);
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}

.about h2, .howto h2, .tips h2, .rec-panel h2 { margin: 0 0 10px; }
.about p, .howto p { color: var(--muted); }
.howto h3 { margin: 16px 0 6px; }

.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pill { display: inline-block; padding: 8px 12px; border-radius: 10px; color: #fff; font-weight: 800; }
.pill.blue { background: #1ea0ff; }
.pill.green { background: #26b74a; }
.pill.red { background: #ff4d4f; }
.pill.gray { background: #6b6f76; }

/* Right column */
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1f2c, #2f3e67);
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255,255,255,0.08);
  display: block; /* 确保链接表现为块元素 */
  text-decoration: none; /* 移除下划线 */
}
/* 游戏图片样式 */
.thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.thumb span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 12px;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);
  z-index: 2; /* 确保文字在图片上方 */
}
/* 已在上方定义了.thumb span样式 */
.thumb:hover { transform: translateY(-2px); transition: transform .15s ease; }

/* Footer */
.site-footer { margin-top: 28px; background: rgba(80,72,64,0.85); border-top: 1px solid rgba(255,255,255,0.08); }
.footer-inner { padding: 16px 0; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); text-decoration: none; font-weight: 700; }
.footer-links a:hover { color: var(--text); }

/* Back to top */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: none;
  background: #0d6efd;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(13,110,253,.4);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .2s ease;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

/* Responsive */
@media (max-width: 1024px) {
  .layout { grid-template-columns: 1fr; }
  .right-col { order: -1; }
}

@media (max-width: 640px) {
  .banner-text { font-size: 24px; }
  .tutorial-grid { grid-template-columns: 1fr; }
  .game-embed iframe { height: 96vh; }
  .thumb-grid { grid-template-columns: repeat(2, 1fr); }
  .search input { width: 140px; }
}