:root{
  --purple:#3b1448;
  --purple-dark:#270b30;
  --gold:#f2a900;
  --soft:#ffffffdd;
}

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow:hidden;
}

#camera{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.1) brightness(0.9); z-index: 0; }
#stars{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index: 1; }

.vignette{
  position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at center, #0000 50%, #0007 100%),
              linear-gradient(180deg, #0000 0%, #0006 75%, #000a 100%);
  z-index:2;
}

/* Intro overlay */
.intro{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#000; z-index:6; opacity:1; transition:opacity 1.2s ease; }
.intro.fade{ opacity:0; pointer-events:none }
.intro img{ width:min(42vw,220px); height:auto; filter:drop-shadow(0 8px 30px #000c) }

.hero{
  position:fixed; left:0; right:0; top:0; padding:16px 20px 8px;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  background:linear-gradient(180deg, color-mix(in oklab, var(--purple) 70%, transparent) 0%, transparent 90%);
  z-index: 3;
}

.branding{display:flex; align-items:center; gap:10px; color:#fff}
.logo{width:44px; height:44px; border-radius:50%; background:#fff1; padding:4px}
.brand-text{line-height:1}
.brand-name{font-weight:700; letter-spacing:.3px}
.brand-sub{font-size:.8rem; opacity:.8}

.hero h1{
  margin:2px 0 0; padding:0; font-family:"Playfair Display", serif; font-weight:800; font-size: clamp(22px, 5vw, 40px);
  color:var(--gold); text-shadow:0 2px 14px #0008;
}

.subtitle{max-width:900px; color:var(--soft); text-shadow:0 1px 8px #000c; margin:4px 0 0}

.event-row{display:flex; align-items:center; gap:16px; margin-top:6px}
.event-date{display:flex; align-items:baseline; gap:8px; color:var(--gold)}
.event-date .big{font-family:"Playfair Display", serif; font-size:34px; font-weight:800}
.event-date .mon{font-weight:700}
.event-time{font-weight:600; background: #0006; padding:6px 10px; border:1px solid #ffffff1a; border-radius:8px}
.event-location{margin-top:6px; opacity:.95}

.controls{
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; align-items:center; background:#1a0722bf; backdrop-filter: blur(6px);
  border:1px solid #ffffff20; border-radius:12px; padding:8px 10px; box-shadow: 0 6px 30px #0009;
  z-index: 4;
}

button{
  appearance:none; border:0; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer;
  color:#1b0b00; background:var(--gold); box-shadow:0 2px 0 #0004; transition:.2s transform ease;
}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(0)}

.toggle{display:flex; align-items:center; gap:6px; user-select:none}
.toggle input{accent-color:var(--gold)}

/* Prompt overlay */
.prompt{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#0008,#000a); z-index:5; }
.prompt.hidden{ display:none }
.prompt-card{ background:#1a0722e6; padding:20px 18px; border:1px solid #ffffff2a; border-radius:14px; text-align:center; width:min(92vw, 420px); box-shadow:0 10px 40px #000a }
.prompt-card h2{ margin:0 0 6px; font-family:"Playfair Display",serif; color:var(--gold) }
.prompt-card p{ margin:0 0 14px; color:#fffb; }

/* Compass */
.compass{ position:fixed; right:12px; bottom:92px; display:flex; align-items:center; gap:8px; z-index:4; }
.compass-rose{ position:relative; width:64px; height:64px; }
.compass .ring{ position:absolute; inset:0; border-radius:50%; border:2px solid #ffffff44; box-shadow:inset 0 0 10px #0008 }
.compass .needle{ position:absolute; left:50%; top:50%; width:2px; height:28px; background:linear-gradient(180deg,#f2a900,#ffd47a); transform-origin:50% 90%; border-radius:2px; transform:translate(-50%,-90%) rotate(0deg); box-shadow:0 0 8px #f2a90099 }
.compass .labels span{ position:absolute; color:#fff; font-weight:700; font-size:10px; text-shadow:0 1px 4px #000; }
.compass .labels .n{ left:50%; top:-6px; transform:translateX(-50%) }
.compass .labels .s{ left:50%; bottom:-6px; transform:translateX(-50%) }
.compass .labels .e{ right:-6px; top:50%; transform:translateY(-50%) }
.compass .labels .w{ left:-6px; top:50%; transform:translateY(-50%) }
.compass .heading{ font-weight:700 }
.heading{ background:#0008; padding:6px 8px; border-radius:8px; border:1px solid #ffffff22 }

@media (min-width: 900px){
  .hero{padding:18px 36px 12px}
}