:root {
    --gold: #d4af37;
    --gold-soft: #f2d57e;
    --bg: #0b0b0d;
    --muted: #b9bcc6;
    --shadow: 0 8px 30px rgba(0,0,0,.35);
    --radius: 18px;
  }
  
  /* Base */
  html, body { margin:0; padding:0; background:var(--bg); color:#fff; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
  .wrap { max-width: 1024px; margin:auto; padding:24px 16px 80px; display:grid; gap:24px; }
  
  /* Reusable card shell (header + countdown share this look) */
  .card {
    border-radius: calc(var(--radius) + 4px);
    background:
      linear-gradient(#0f1016,#0a0b10) padding-box,
      linear-gradient(135deg, rgba(212,175,55,.8), rgba(242,213,126,.45)) border-box;
    border: 1px solid transparent;
    box-shadow: var(--shadow);
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(212,175,55,.18), var(--shadow);
    animation: softpulse 1.4s ease-in-out infinite;
  }
  @keyframes softpulse {
    0%, 100% { box-shadow: 0 16px 40px rgba(212,175,55,.18), var(--shadow); }
    50%      { box-shadow: 0 22px 55px rgba(212,175,55,.24), var(--shadow); }
  }
  
  /* Header (card-styled) */
  .site-header { text-align:center; padding:20px 12px; margin:0; }
  .site-title {
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
  }
  .header-top {
    font-size:14px;
    letter-spacing:0.25em;
    text-transform:uppercase;
    color:var(--gold-soft);
    font-weight:600;
    opacity:.9;
  }
  .header-sub {
    font-size: clamp(18px, 4vw, 22px);
    font-weight:700;
    color:var(--gold);
  }
  
  /* Poster with animation */
  .poster-shell { perspective: 1200px; }
  .embed-shell {
    position: relative; width:100%; height:0; padding-top:140%;
    border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
    background: linear-gradient(180deg, #0d0e12, #0a0b0f);
    border: 1px solid rgba(212,175,55,.18);
    animation: floaty 6s ease-in-out infinite;
    transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s cubic-bezier(.2,.7,.2,1), filter .5s;
    will-change: transform, box-shadow, filter;
  }
  .embed-shell iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
  .poster-shell:hover .embed-shell {
    animation-play-state: paused;
    transform: rotateX(4deg) rotateY(-4deg) scale(1.02);
    box-shadow: 0 18px 60px rgba(212,175,55,.25), 0 6px 20px rgba(0,0,0,.45);
    filter: drop-shadow(0 0 12px rgba(212,175,55,.18));
  }
  @keyframes floaty { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
  
  /* Countdown */
  .countdown { padding:20px; }
  .countdown-inner { display:grid; gap:14px; align-items:center; justify-items:center; text-align:center; }
  .eyebrow {
    font-size:12px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--gold-soft);
    opacity:.9;
  }
  .big-days { display:flex; align-items:baseline; gap:10px; }
  .days-number { font-size: clamp(40px, 9vw, 88px); font-weight:800; line-height:.9; color:var(--gold); text-shadow:0 0 18px rgba(212,175,55,.25); }
  .days-label { font-size: clamp(16px, 2.4vw, 24px); color:var(--muted); }
  .ticks { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
  .tick {
    min-width: 130px; padding:12px 14px; border-radius:12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(212,175,55,.18);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .tick:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(212,175,55,.12); }
  .tick .val { font-size: 22px; font-weight:700; color:#fff; }
  .tick .lab { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
  .date-line { font-size:14px; color:var(--muted); border-top:1px dashed rgba(212,175,55,.25); padding-top:14px; margin-top:6px; }
  
  /* Footer */
  .site-footer {
    text-align:center; padding:16px 12px;
    background:#0c0c0f; border-top:1px solid rgba(212,175,55,.25);
    font-size:14px; color:var(--gold-soft);
  }
  
  /* Accessibility */
  @media (prefers-reduced-motion: reduce){
    * { animation: none !important; transition: none !important; }
  }