/* ── Menu: main menu, sub-screens, options, instructions, about ── */

.main-menu{
  display:flex;flex-direction:column;gap:12px;
  width:100%;max-width:320px;margin-bottom:30px;
}
.menu-btn{
  font-family:'Playfair Display',serif;font-size:18px;font-weight:700;
  padding:16px 24px;border-radius:12px;border:2.5px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.06);color:#f0e0c0;cursor:pointer;
  transition:all 0.2s;letter-spacing:1px;
  backdrop-filter:blur(4px);
}
.menu-btn:hover{
  background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.3);
  transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.3);
}
.menu-btn.menu-play{border-color:rgba(142,198,165,0.5);color:#8ec6a5}
.menu-btn.menu-play:hover{background:rgba(142,198,165,0.12);border-color:#8ec6a5}
.menu-btn.menu-continue{border-color:rgba(244,200,122,0.5);color:#f4c87a}
.menu-btn.menu-continue:hover{background:rgba(244,200,122,0.12);border-color:#f4c87a}

/* ── Menu sub-screens ── */
.menu-sub{
  width:100%;max-width:520px;
  animation:menuFadeIn 0.2s ease;
  text-align:center;
}
@keyframes menuFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.menu-sub h2{
  font-family:'Playfair Display',serif;font-size:20px;color:#f0e0c0;
  margin-bottom:24px;letter-spacing:2px;
}
.menu-back{
  font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;
  padding:10px 24px;border-radius:8px;border:1.5px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.06);color:#ccc;cursor:pointer;
  transition:all 0.15s;margin-top:24px;
}
.menu-back:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.3)}

/* ── Options ── */
.options-group{margin-bottom:16px}
.options-label{
  display:block;font-size:12px;color:rgba(255,255,255,0.5);
  letter-spacing:3px;text-transform:uppercase;margin-bottom:12px;font-weight:600;
}
.sound-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 24px;border-radius:10px;
  border:2px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05);color:#ddd;
  font-family:'Nunito',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;transition:all 0.15s;
}
.sound-toggle:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.25)}
.sound-toggle.muted{border-color:rgba(200,60,60,0.4);color:#e88}
.sound-toggle.muted:hover{background:rgba(200,60,60,0.1);border-color:rgba(200,60,60,0.6)}
.lang-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lang-option{
  padding:10px 20px;border-radius:10px;
  border:2px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05);color:#ddd;
  font-family:'Nunito',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;transition:all 0.15s;
}
.lang-option:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.25)}
.lang-option.active{background:rgba(142,198,165,0.15);border-color:#8ec6a5;color:#8ec6a5;font-weight:800}

/* ── Instructions ── */
.instructions-text{
  text-align:left;max-width:460px;margin:0 auto;
}
.instructions-text ol{
  list-style:none;padding:0;margin:0;
}
.instructions-text li{
  padding:10px 14px;margin-bottom:8px;
  background:rgba(255,255,255,0.04);border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.65);font-size:13px;line-height:1.5;
  transition:background 0.15s;
}
.instructions-text li:hover{background:rgba(255,255,255,0.07)}

/* ── About ── */
.about-content{text-align:center}
.about-title{
  font-family:'Playfair Display',serif;font-size:28px;color:#f0e0c0;
  margin-bottom:12px;letter-spacing:3px;
}
.about-desc{color:rgba(255,255,255,0.5);font-size:13px;line-height:1.8;margin-bottom:16px}
.about-version{color:rgba(255,255,255,0.3);font-size:11px}