/* Base styles for Friends Countdown */
:root{
  --bg-color: #0f1724;
  --card-bg: rgba(255,255,255,0.04);
  --accent: #ffb703;
  --muted: #9aa4b2;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --max-width: 1000px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg-color); color:#e6eef6}

.page{min-height:100vh;display:flex;flex-direction:column}
.page-background{position:fixed;inset:0;background-size:cover;background-position:center;filter:brightness(0.45);z-index:0;pointer-events:none}

.content{position:relative;z-index:1;max-width:var(--max-width);margin:48px auto;padding:24px;background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.2) 100%);border-radius:var(--radius)}

header{margin-bottom:20px}
.event-title{font-size:2rem;margin:0;color:#fff;text-align: center;}
.event-subtitle{margin:6px 0 0;color:var(--muted);text-align: center;}

.countdown{display:flex;gap:12px;justify-content:center;margin:18px 0 24px;flex-wrap:wrap}
.countdown-item{background:var(--card-bg);padding:12px 18px;border-radius:10px;min-width:72px;text-align:center}
.countdown-value{font-weight:700;font-size:1.25rem}
.countdown-label{font-size:0.75rem;color:var(--muted);margin-top:6px}

.event-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.meta-text{flex:1;min-width:200px}
.event-location{color:var(--accent);margin:0 0 8px 0;font-weight:600}
.event-description{margin:0;color:var(--muted)}

.event-image{width:220px;;object-fit:cover;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,0.5)}

.controls{margin-top:18px}
.audio-button{background:var(--accent);border:none;color:#082032;padding:10px 14px;border-radius:8px;font-weight:600;cursor:pointer}

.credit{font-size:0.85rem;color:var(--muted);text-align:center;padding:16px}

.error{background:#3b0b0b;color:#ffd6d6;padding:12px;border-radius:8px;margin-top:12px}

/* Responsive adjustments */
@media (max-width:640px){
  .content{margin:20px;padding:16px}
  .event-image{width:120px}
  .event-title{font-size:1.4rem}
  .countdown{display:flex;gap:2px;justify-content:center;margin:18px 0 24px;flex-wrap:wrap}
  .countdown-item{background:var(--card-bg);padding:12px 8px;border-radius:10px;min-width:60px;text-align:center}
}

/* Auth overlay styles - used to block access until correct password provided */
.auth-locked .page{filter:blur(2px);pointer-events:none;user-select:none}
.auth-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(rgba(3,7,12,0.6),rgba(3,7,12,0.6));z-index:9999}
.auth-box{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.03));padding:24px;border-radius:12px;min-width:320px;max-width:420px;box-shadow:0 8px 30px rgba(0,0,0,0.6);color:#e9f0fb}
.auth-box h2{margin:0 0 8px;font-size:1.1rem;text-align:center}
.auth-input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit;margin:10px 0}
.auth-row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.auth-button{background:var(--accent);border:none;color:#082032;padding:8px 12px;border-radius:8px;font-weight:700;cursor:pointer}
.auth-note{font-size:0.85rem;color:var(--muted);text-align:center;margin-top:10px}