:root {
  --bg-primary: #050505;
  --bg-secondary: #0f0d0a;
  --beige: #d6c0a1;
  --beige-soft: #f0e2cc;
  --line: rgba(214, 192, 161, 0.22);
  --text-main: #f6efe5;
  --text-sub: #b7aa97;
  --pink-a: #ff84bc;
  --pink-b: #ff5fa2;
  --pink-c: #ff9fd2;
}
* { -webkit-tap-highlight-color: transparent; }
html, body {
  font-family: 'Inter', sans-serif;
  background: #000;
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
}
.brand-font { font-family: 'Cormorant Garamond', serif; font-weight: 300; letter-spacing: 0.18em; }
.hero-poem { font-family: 'Inter', sans-serif; font-weight: 300; letter-spacing: 0.01em; color: #d8ccb8; }
.glass { backdrop-filter: blur(18px); background: linear-gradient(180deg, rgba(27,24,20,0.82), rgba(13,12,11,0.88)); border: 1px solid var(--line); }
.shadow-soft { box-shadow: 0 30px 100px rgba(0,0,0,0.42); }
.muted { color: var(--text-sub); }
.btn-lux { background: linear-gradient(135deg, #f2dfb6 0%, #d5b57a 35%, #b78c4f 100%); color: #120f0b; box-shadow: 0 14px 44px rgba(214,192,161,0.26); }
.btn-dark { background: rgba(255,255,255,0.05); border: 1px solid rgba(214,192,161,0.16); color: var(--text-main); }
.gender-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(214,192,161,0.12); transition: all .15s ease; }
.gender-card.active { border-color: rgba(214,192,161,0.9); background: rgba(214,192,161,0.12); transform: translateY(-1px); }
.hidden { display: none !important; }
.gold-shimmer { background: linear-gradient(135deg, #f6e6bf 0%, #d8bc8b 35%, #9d7642 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.home-card {
  background:
    radial-gradient(circle at 78% 20%, rgba(202,175,120,0.18), transparent 34%),
    radial-gradient(circle at 62% 42%, rgba(255,235,200,0.05), transparent 28%),
    linear-gradient(180deg, rgba(21,18,15,0.98), rgba(11,10,9,0.98));
  border: 1px solid rgba(191,163,120,0.18);
  box-shadow: 0 26px 84px rgba(0,0,0,0.48);
}
.section-title { font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: #d8c2a0; }
.game-list-card { position: relative; overflow: hidden; min-height: 96px; box-shadow: 0 18px 50px rgba(0,0,0,0.24); }
.game-panel { background: linear-gradient(180deg, rgba(18,17,16,0.98), rgba(10,10,10,0.98)); border: 1px solid rgba(214,192,161,0.18); }
.host-entry-card { border: 1px solid rgba(214,192,161,0.18); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); padding: 0.55rem 0.6rem; min-height: 60px; }
.host-entry-card.active { border-color: rgba(214,192,161,0.95); background: linear-gradient(135deg, rgba(214,192,161,0.2), rgba(255,255,255,0.08)); color: #f8f0e2; }
.host-entry-card.disabled { opacity: 0.3; cursor: not-allowed; }
input, select, textarea { font-family: 'Inter', sans-serif; -webkit-appearance: none; appearance: none; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(214,192,161,0.55); outline-offset: 0; }
button { font-family: 'Inter', sans-serif; }
button:disabled { cursor: not-allowed; }
.fade-in { animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .brand-font.hero-title { font-size: 2.6rem !important; }
}
.heart-pulse { animation: heartPulse .35s ease; }
@keyframes heartPulse { 0%{transform:scale(1);} 40%{transform:scale(1.25);} 100%{transform:scale(1);} }
.skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: skeleton 1.2s infinite; border-radius: 12px; }
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.scroll-shadow { mask-image: linear-gradient(180deg, #000 80%, transparent); }