/* ===============================
   RESET & ROOT
================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-main: #140e0a;          /* nền sân khấu */
  --bg-gradient: #1a0f0b;
  --accent: #C5BF65;           /* vàng nhạt */
  --accent-soft: #e6d9b0;
  --accent-dark: #8b1a1a;      /* đỏ nhung */
  --text-main: #f1eadf;
  --glass: rgba(255,255,255,0.05);
  --radius: 16px;
}

/* ===============================
   BODY
================================ */
body {
  font-family: "Be Vietnam Pro", sans-serif;
 background: linear-gradient(rgba(20,14,10,0.6), rgba(20,14,10,0.6)), 
              url('img/nen16.jpeg') center/cover no-repeat fixed;
  color: var(--text-main);
  line-height: 1.7;
  padding-top: 64px;
}

.back-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  padding: 14px 24px;
  background: #800000;
  color: #ffd966;
  border-radius: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 300;
}
.back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.7);
}
/* ===============================
   HEADER
================================ */
header {
  text-align: center;
  padding: 100px 20px 80px;
   border-bottom: 1px solid rgba(197,191,101,0.25);
} 
 

header h1 {
  font-family: "MyCustomFont", serif;
  font-size: 60px;
  color: var(--accent);
  letter-spacing: 2px;
  text-shadow: 0 0 14px rgb(197 191 101 / 62%);
}

header p {
  margin-top: 16px;
  font-size: 1.15rem;
  font-style: italic;
  color: rgba(230,217,176,0.85);
}

/* ===============================
   MAIN
================================ */
main {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

/* ===============================
   ROOM CARD
================================ */
.room {
  background: rgb(197 191 101 / 0%); /* vàng nhẹ + glass mờ */
  border: 1px solid rgba(197,191,101,0.2);
  border-radius: var(--radius);
  padding: 32px 36px;
  margin-bottom: 50px;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.4),
    0 12px 28px rgba(0,0,0,0.5);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.room:hover {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.4),
    0 18px 34px rgba(197,191,101,0.25);
}

.room h2 {
  font-size: 1.9rem;
  color: var(--accent);
  margin-bottom: 18px;
  padding-left: 14px;
  border-left: 4px solid var(--accent-dark);
  text-shadow: 0 0 8px rgb(197 191 101 / 49%);
  font-style : italic; 
}

/* ===============================
   TEXT BLOCKS
================================ */
.interactive {
  margin: 16px 0;
  color: rgba(230,217,176,0.9);
}

.quote {
  font-style: italic;
  color: rgba(197,191,101,0.85);
  border-left: 3px solid rgba(197,191,101,0.5);
  padding-left: 14px;
  margin: 14px 0;
}

/* ===============================
   HIGHLIGHT
================================ */
.highlight {
  display: inline-block;
  font-weight: 700;
  color: var(--accent);
  background: rgb(237 144 144 / 7%);
  padding: 8px 14px;
  border-radius: 999px;
  margin: 12px 0 18px;
}

/* ===============================
   LIST
================================ */
.list-simple {
  list-style: none;
  margin: 16px 0;
}

.list-simple li {
  margin: 10px 0;
  padding-left: 22px;
  position: relative;
}

.list-simple li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 1.4rem;
}

/* ===============================
   AUDIO
================================ */
audio {
  width: 100%;
  margin-top: 18px;
  border-radius: var(--radius);
  filter: sepia(0.35) saturate(1.2);
}

/* ===============================
   GAME BUTTON
================================ */
#play-btn {
  padding: 14px 36px;
  margin-top: 20px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  background: rgba(197,191,101,0.35);
  color: #0b0806;
  cursor: not-allowed;
  transition: 0.25s ease;
}

#play-btn:enabled {
  cursor: pointer;
  background: linear-gradient(90deg, #C5BF65, #d8d28a);
  box-shadow: 0 8px 18px rgba(197,191,101,0.45);
  color: #0b0806;
}

/* ===============================
   LOCKED ROOM
================================ */
.room.locked {
  opacity: 0.55;
  filter: grayscale(0.3) blur(1.5px);
  pointer-events: none;
}

#lock-text {
  font-style: italic;
  color: rgba(197,191,101,0.75);
}