@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
:root {
  --bg: #090d15;
  --panel: #111823;
  --ink: #f7f4ec;
  --muted: #a7aeb9;
  --gold: #c4a35a;
  --gold-hover: #d4b578;
  --gold-light: #e2cc9a;
  --gold-dark: #a08040;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.skip {
  position: absolute;
  top: -99px;
  left: 12px;
}
.skip:focus {
  top: 12px;
  background: #fff;
  color: #000;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
}
.ambient {
  position: absolute;
  inset: 0 0 auto;
  height: 900px;
  pointer-events: none;
  background: radial-gradient(ellipse at 80% 20%, #62452645, transparent 50%),
              radial-gradient(ellipse at 10% 50%, #112a3d70, transparent 65%);
}
.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 76px);
  border-bottom: 1px solid #ffffff18;
  gap: 16px;
}
.brand {
  letter-spacing: .16em;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.brand b { color: #ead2a3; margin-left: 4px; }
.mark {
  color: var(--gold);
  font-size: 24px;
  vertical-align: middle;
  margin-right: 10px;
}
.site-header nav {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: #bec5cb;
  align-items: center;
}
.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
}
.site-header a:hover, .footer-links a:hover { color: #efd4a0; }
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.support {
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #9c835a;
  border-radius: 30px;
  padding: 10px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.hero {
  position: relative;
  max-width: 1480px;
  margin: auto;
  padding: 96px clamp(20px, 8vw, 122px) 80px;
  min-height: 520px;
  overflow: hidden;
}
.eyebrow, .kicker {
  letter-spacing: .32em;
  font-size: 11px;
  color: var(--gold-hover);
  font-weight: 700;
}
.pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ceae77;
  box-shadow: 0 0 15px #ffe3a5;
  margin-right: 9px;
}
.hero h1 {
  font: 400 clamp(44px, 6.8vw, 96px)/1.05 'Playfair Display', serif;
  margin: 24px 0;
}
.hero h1 em {
  color: #e4c38b;
  font-style: italic;
}
.hero p {
  color: #c2c9cc;
  font-size: 17px;
  line-height: 1.75;
  max-width: 650px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.gold-button {
  background: linear-gradient(135deg, #f3dfb3, #ba9857);
  padding: 12px 24px;
  min-height: 44px;
  border-radius: 40px;
  color: #1a1c21;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  gap: 16px;
  align-items: center;
}
.text-button {
  color: #e8d8ba;
  font-size: 13px;
  min-height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
}
.glow-orb {
  position: absolute;
  right: 7%;
  top: 90px;
  color: #e6bd73;
  font-size: clamp(160px, 24vw, 360px);
  opacity: .2;
  text-shadow: 0 0 80px #daae67;
  pointer-events: none;
  z-index: -1;
}
.hero-stats {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  margin-top: 64px;
}
.hero-stats div { display: grid; gap: 6px; }
.hero-stats b { font-size: 24px; color: #ebd0a0; }
.hero-stats span { color: #9aa7b0; font-size: 12px; }
.library {
  padding: 72px clamp(20px, 6vw, 90px) 96px;
  max-width: 1550px;
  margin: auto;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: flex-end;
  margin-bottom: 32px;
}
.section-heading h2, .callout h2, .rules h2 {
  font: 400 clamp(32px, 4vw, 56px) 'Playfair Display', serif;
  margin: 12px 0;
}
.section-heading p { color: #a3b0b9; }
.toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #151c27;
  border: 1px solid #ffffff26;
  border-radius: 14px;
  padding: 6px 16px;
  min-height: 46px;
  flex: 1;
  min-width: 220px;
}
.search span { font-size: 22px; color: var(--gold-hover); }
.search input {
  background: none;
  color: #fff;
  border: 0;
  outline: none;
  width: 100%;
  min-height: 44px;
  font-size: 14px;
}
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chip {
  border: 1px solid #ffffff2a;
  background: #121a25;
  color: #c2cad2;
  border-radius: 30px;
  padding: 10px 18px;
  min-height: 44px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.chip.active {
  background: #ddc18b;
  color: #121923;
  border-color: #ddc18b;
}
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 20px;
  color: #a0adb5;
  font-size: 13px;
}
.bar label {
  display: flex;
  gap: 10px;
  align-items: center;
}
.bar select {
  background: #18212e;
  border: 1px solid #ffffff2a;
  color: #fff;
  padding: 8px 12px;
  min-height: 44px;
  border-radius: 10px;
  max-width: 200px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.card {
  background: linear-gradient(145deg, #18212d, #111720);
  border: 1px solid #ffffff1a;
  border-radius: 20px;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: transform .2s, border-color .2s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: #ba9c63;
}
.thumb {
  height: 190px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #363b40, #121720);
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.thumb .audio-icon {
  font-size: 64px;
  color: #d6ba85;
}
.card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.type {
  color: #d3b77e;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.card h3 {
  font-size: 16px;
  line-height: 1.35;
  margin: 12px 0 8px;
}
.card p {
  color: #a8b3bd;
  font-size: 13px;
  line-height: 1.6;
  min-height: 52px;
  flex: 1;
}
.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.card-actions a, .card-actions button {
  background: #ddc18b;
  color: #121820;
  padding: 10px 16px;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card-actions button:disabled {
  background: #232d3b;
  color: #93a1ad;
  cursor: not-allowed;
}
.card-actions .ghost {
  background: none;
  border: 1px solid #66717d;
  color: #e6e9ed;
}
.small {
  font-size: 11px;
  color: #93a3af;
  margin-top: 14px;
}
.empty {
  padding: 50px;
  text-align: center;
  color: #b8c0c8;
}
.callout {
  margin: 0 auto 80px;
  max-width: 1350px;
  padding: 48px 52px;
  border-radius: 24px;
  border: 1px solid #a5854e7a;
  background: linear-gradient(110deg, #35271c, #111a24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}
.callout p {
  color: #c8bcb0;
  max-width: 630px;
  line-height: 1.7;
}
.rules {
  padding: 48px clamp(20px, 6vw, 90px) 96px;
  max-width: 1500px;
  margin: auto;
}
.rules-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.rules article {
  border-top: 1px solid #977b4b;
  padding-top: 20px;
}
.rules article p {
  color: #a6b5be;
  font-size: 14px;
  line-height: 1.75;
}
.rule-icon {
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
}
footer {
  border-top: 1px solid #ffffff20;
  padding: 48px clamp(20px, 6vw, 90px) 36px;
  background: #090c12;
}
footer p, footer small {
  color: #9ca7b2;
  font-size: 12px;
}
.footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 22px 0;
  font-size: 13px;
  color: #becbd0;
}
.footer-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
}
dialog {
  background: #141c27;
  color: #fff;
  border: 1px solid #b99c64;
  border-radius: 20px;
  width: min(850px, 94vw);
  max-height: 90vh;
  padding: 28px;
}
dialog::backdrop {
  background: #000c;
  backdrop-filter: blur(7px);
}
dialog img {
  max-height: 60vh;
  width: 100%;
  object-fit: contain;
}
dialog audio { width: 100%; margin: 16px 0; }
.close {
  float: right;
  border: 1px solid #ffffff2a;
  border-radius: 10px;
  background: #1b2533;
  color: #fff;
  font-size: 18px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1150px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 850px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .site-header nav { display: none; }
  .callout {
    margin: 0 18px 64px;
    padding: 32px;
    display: block;
  }
  .callout .gold-button { margin-top: 16px; }
}
@media (max-width: 550px) {
  .brand { font-size: 11px; letter-spacing: .1em; }
  .site-header { padding: 14px 16px; }
  .support { padding: 8px 14px; font-size: 11px; }
  .hero { padding: 64px 18px 56px; min-height: auto; }
  .hero p { font-size: 15px; }
  .hero-stats { gap: 24px; margin-top: 40px; }
  .section-heading { display: block; }
  .library { padding: 56px 16px; }
  .cards { grid-template-columns: 1fr; }
  .thumb { height: 220px; }
  .rules-cols { grid-template-columns: 1fr; }
  .bar { align-items: flex-start; flex-direction: column; }
  .glow-orb { opacity: .1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}