/* ==========================================================================
   theme.css — Nimitr Tarot shared design tokens
   ใช้ร่วมกันระหว่าง index.html / room.html / library.html
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cinzel+Decorative:wght@400;700&family=Sarabun:ital,wght@0,300;0,400;0,600;1,300&display=swap');

/* ===== TOKENS ===== */
:root {
  --bg:        #0d0820;
  --surface:   #1a1245;
  --mid:       #2d1f6e;
  --gold:      #c9a55f;
  --gold-lt:   #e8d5a3;
  --gold-dim:  rgba(201,165,95,0.18);
  --violet:    #7b6bb5;
  --white:     #f5f3ff;
  --text-muted:#9d92c8;
  --card-w:    88px;
  --card-h:    154px;

  /* ===== ขนาด/รูปทรงไพ่ "จุดเดียว" ของทั้งระบบ =====
     ปรับ --card-ratio ตัวเดียว ทุกหน้า (index/room/library) จะตามอัตโนมัติ
     ไฟล์ภาพต้นฉบับแนะนำ: 455×780px (ตรงสัดส่วน 7:12 พอดี ไม่ต้อง crop) */
  --card-ratio: 7 / 12;
  --card-radius: 10px;

  /* category accent colours (ตรงกับ index.html CATEGORIES) */
  --c-daily:    #7b6bb5;
  --c-monthly:  #6b7bb5;
  --c-love:     #b56b8a;
  --c-fellows:  #7bb56b;
  --c-study:    #6bb5a5;
  --c-career:   #b5956b;
  --c-money:    #c9a55f;
  --c-health:   #6ba8b5;
  --c-luck:     #a56bb5;
  --c-yesno:    #b5846b;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Sarabun', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

/* ===== STARS BG ===== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(45,31,110,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 20%, rgba(123,107,181,0.2) 0%, transparent 60%),
    radial-gradient(ellipse 30% 20% at 10% 60%, rgba(201,165,95,0.07) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ===== SHARED NAVBAR ===== */
nav.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 20px 40px;
  background: linear-gradient(to bottom, rgba(13,8,32,0.95) 0%, transparent 100%);
  backdrop-filter: blur(2px);
}

.nav-logo {
  font-family: 'Cinzel Decorative', serif;
  font-size: 18px;
  color: var(--gold);
  letter-spacing: 2px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-logo span { color: var(--gold-lt); }

.nav-links { display: flex; gap: 36px; }
.nav-links a {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.is-active { color: var(--gold-lt); }

/* ===== PARTICLES ===== */
.particle {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  background: var(--gold);
  z-index: 490;
  animation: particle-fly 0.8s ease-out forwards;
}
@keyframes particle-fly {
  from { opacity: 1; transform: scale(1) translate(0,0); }
  to   { opacity: 0; transform: scale(0) translate(var(--dx), var(--dy)); }
}

/* ===== FOOTER ===== */
footer.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(201,165,95,0.1);
  padding: 40px 60px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links a {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--gold); }
.footer-desc { max-width: 340px; text-align: right; }
.footer-desc__logo {
  font-family: 'Cinzel Decorative', serif;
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 8px;
}
.footer-desc__body {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ===== MUSIC PLAYER ===== */
#music-player {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(13,8,32,0.5);
  border: 1px solid rgba(201,165,95,0.3);
  border-radius: 999px;
  padding: 5px 12px 5px 8px;
  transition: border-color 0.2s;
  margin-left: auto;
}
#music-player:hover { border-color: rgba(201,165,95,0.6); }

.mp-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(201,165,95,0.35);
  background: rgba(201,165,95,0.1);
  color: var(--gold-lt);
  font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.mp-btn:hover { background: rgba(201,165,95,0.25); border-color: var(--gold); }
.mp-btn.is-muted { color: var(--text-muted); border-color: rgba(201,165,95,0.15); }

.mp-note {
  font-size: 13px;
  animation: mp-spin 4s linear infinite;
  display: inline-block;
  color: var(--gold);
  flex-shrink: 0;
}
.mp-note.is-paused { animation-play-state: paused; color: var(--text-muted); }
@keyframes mp-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.mp-vol {
  -webkit-appearance: none;
  appearance: none;
  width: 60px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--gold) 0%, var(--gold) var(--vol, 70%), rgba(201,165,95,0.2) var(--vol, 70%), rgba(201,165,95,0.2) 100%);
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}
.mp-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold-lt);
  box-shadow: 0 0 4px rgba(201,165,95,0.6);
  cursor: pointer;
}
.mp-vol::-moz-range-thumb {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold-lt);
  border: none;
  cursor: pointer;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  nav.site-nav { gap: 20px; padding: 16px 20px; }
  .nav-links { gap: 20px; }
  footer.site-footer { flex-direction: column; align-items: center; padding: 32px 24px; }
  .footer-desc { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}