:root {
  font-family: Arial, Helvetica, sans-serif;
  color-scheme: dark;
  --page: #0C5C53;
  --panel: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.20);
  --text: #EDE3E3;
  --orange: #F49206;
  --gold: #FFD54A;
  --button-top: #0FAE9A;
  --button-bottom: #0C5C53;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  line-height: 1.5;
}

.menu-header {
  width: min(calc(100% - 32px), 900px);
  margin: 18px auto 10px;
  padding: 18px 22px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}

.site-link,
.return-link a {
  color: var(--gold);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.08em;
}

.site-link:hover,
.return-link a:hover { text-decoration: underline; }

.menu-header h1 {
  margin: 4px 0;
  color: var(--orange);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
}

.menu-header p { margin: 5px 0 0; font-weight: 700; }

.menu-page {
  width: min(calc(100% - 32px), 1200px);
  margin: 0 auto;
  padding: 8px 0 28px;
}

.intro-panel,
.coming-panel {
  padding: 16px 22px;
  margin-bottom: 20px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.intro-panel h2,
.coming-panel h2 {
  margin: 0 0 6px;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
}

.intro-panel p,
.coming-panel p { margin: 5px auto; max-width: 900px; }
.device-note { color: #FFF6D2; }

.puzzle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 22px;
}

.puzzle-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 5px 16px rgba(0,0,0,0.20);
}

.puzzle-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  display: block;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  text-align: center;
}

.card-content h2 {
  margin: 0;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
}

.scripture {
  margin: 4px 0 10px;
  color: #FFF6D2;
  font-weight: 800;
}

.card-content p:not(.scripture) { margin: 0 0 16px; }

.open-btn {
  display: inline-block;
  width: min(100%, 240px);
  margin: auto auto 0;
  padding: 12px 18px;
  border-radius: 12px;
  color: #FFFFFF;
  background: linear-gradient(180deg, var(--button-top), var(--button-bottom));
  border: 2px solid rgba(255,255,255,0.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.24);
  font-weight: 800;
  text-decoration: none;
}

.open-btn:hover {
  filter: brightness(1.13);
  transform: translateY(-2px);
}

.coming-panel { margin-bottom: 14px; }
.return-link { margin: 14px 0 0; text-align: center; }

@media (max-width: 900px) {
  .puzzle-grid { grid-template-columns: 1fr; }
  .puzzle-card {
    width: min(100%, 580px);
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .menu-header,
  .menu-page { width: min(calc(100% - 18px), 1200px); }
  .menu-header { padding: 14px; }
  .intro-panel,
  .coming-panel { padding: 14px; }
  .card-content { padding: 14px; }
}