:root{
    --cream:#f4ecdb;
    --cream-dim:#d9cdb2;
    --navy:#0d2b3a;
    --navy-deep:#081c27;
    --terracotta:#c97a52;
    --gold:#cfa662;
    --gold-bright:#f0d9a3;
    --turquoise:#5aa39a;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html,body{
    height:100%;
    overflow:hidden;
  }

  body{
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:var(--navy-deep);
    color:var(--cream);
    position:relative;
    width:100%;
    height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }

  /* ---------- Background: layered CSS Mediterranean dusk scene ---------- */
  .bg{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
  }

  .bg-sky{
    position:absolute;
    inset:0;
    background:
      radial-gradient(130% 95% at 50% 6%, #f0b876 0%, #e0925c 16%, #c96e4d 30%, #8a5566 48%, #3f3f66 66%, var(--navy-deep) 86%);
    animation: drift 46s ease-in-out infinite alternate;
  }

  @keyframes drift{
    0%{ transform: scale(1.04) translateY(0); }
    100%{ transform: scale(1.1) translateY(-1.2%); }
  }

  .bg-sun{
    position:absolute;
    left:50%;
    top:26%;
    width:34vmax;
    height:34vmax;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,222,168,0.85) 0%, rgba(230,155,100,0.45) 42%, rgba(230,155,100,0) 72%);
    filter:blur(8px);
    animation: pulse 14s ease-in-out infinite;
  }

  @keyframes pulse{
    0%,100%{ opacity:0.8; }
    50%{ opacity:1; }
  }

  .bg-sea{
    position:absolute;
    left:0; right:0; bottom:0;
    height:44%;
    background:linear-gradient(180deg, #184d5c 0%, #0f3444 42%, var(--navy-deep) 100%);
  }

  .bg-sea::before{
    content:"";
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(100deg, rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 2px, transparent 2px, transparent 46px);
    opacity:0.45;
    animation: shimmer 11s linear infinite;
  }

  @keyframes shimmer{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(60px); }
  }

  .bg-silhouette{
    position:absolute;
    left:0; right:0; bottom:22%;
    height:19vh;
    background:#081b23;
    clip-path: polygon(
      0% 100%, 0% 72%, 4% 58%, 8% 68%, 12% 42%, 15% 60%,
      20% 32%, 24% 58%, 28% 22%, 32% 55%, 38% 46%,
      42% 62%, 48% 27%, 53% 58%, 58% 40%, 63% 60%,
      68% 18%, 72% 55%, 78% 44%, 83% 60%, 88% 32%,
      92% 58%, 96% 46%, 100% 65%, 100% 100%
    );
    opacity:0.88;
  }

  .bg-coast{
    position:absolute;
    left:0; right:0; bottom:30%;
    height:24%;
    background:linear-gradient(180deg, transparent 0%, var(--navy-deep) 92%);
    -webkit-mask-image: linear-gradient(180deg, transparent, black 60%);
  }

  .vignette{
    position:absolute;
    inset:0;
    background:radial-gradient(120% 100% at 50% 44%, transparent 28%, rgba(4,16,22,0.58) 100%);
  }

  .overlay{
    position:absolute;
    inset:0;
    background:rgba(8,22,29,0.44);
    backdrop-filter: blur(36px);
    -webkit-backdrop-filter: blur(36px);
  }

  /* ---------- Content ---------- */
  main{
    position:relative;
    z-index:2;
    width:100%;
    max-width:640px;
    padding: clamp(16px, 5vw, 40px);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    opacity:0;
    animation: fadeIn 1.5s ease-out forwards;
    animation-delay:0.15s;
  }

  @keyframes fadeIn{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .flag-wrap{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom: clamp(14px, 3vh, 22px);
  }

  .flag-glow{
    position:absolute;
    width: clamp(150px, 38vw, 260px);
    height: clamp(150px, 38vw, 260px);
    border-radius:50%;
    background: radial-gradient(circle, rgba(207,166,98,0.48) 0%, rgba(201,122,82,0.24) 45%, transparent 74%);
    filter: blur(6px);
    animation: glowPulse 6s ease-in-out infinite;
  }

  @keyframes glowPulse{
    0%,100%{ transform:scale(1); opacity:0.75; }
    50%{ transform:scale(1.08); opacity:1; }
  }

  .flag{
    position:relative;
    width: clamp(220px, 58vw, 420px);
    height:auto;
    filter: drop-shadow(0 18px 36px rgba(0,0,0,0.5)) drop-shadow(0 0 34px rgba(240,217,163,0.3));
    animation: flagBreathe 7s ease-in-out infinite;
  }

  @keyframes flagBreathe{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-5px); }
  }

  .ornament{
    display:flex;
    align-items:center;
    gap: clamp(10px, 2.6vw, 16px);
    margin-bottom: clamp(10px, 2.4vh, 16px);
  }

  .ornament .line{
    width: clamp(24px, 6vw, 44px);
    height:1px;
    background: linear-gradient(90deg, transparent, var(--gold));
  }

  .ornament .line.right{
    background: linear-gradient(90deg, var(--gold), transparent);
  }

  .ornament .dot{
    width:5px;
    height:5px;
    border-radius:50%;
    background: var(--gold-bright);
    box-shadow: 0 0 8px rgba(240,217,163,0.7);
  }

  .eyebrow{
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    font-size: clamp(22px, 5.5vw, 34px);
    letter-spacing: 0.12em;
    text-transform:uppercase;
    color: var(--gold-bright);
    font-weight:400;
    margin-bottom: clamp(8px, 1.8vh, 12px);
  }

  .tagline{
    font-size: clamp(13px, 3.1vw, 16px);
    font-weight:400;
    color: rgba(244,236,219,0.72);
    margin-bottom: clamp(26px, 5.5vh, 44px);
    letter-spacing:0.04em;
  }

  .countdown{
    display:flex;
    gap: clamp(6px, 2.2vw, 18px);
    justify-content:center;
    align-items:center;
    background: rgba(15,32,40,0.32);
    border: 1px solid rgba(207,166,98,0.28);
    border-radius: 18px;
    padding: clamp(16px, 4.2vw, 32px) clamp(12px, 3.8vw, 36px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 70px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .unit{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width: clamp(50px, 13vw, 96px);
  }

  .unit .value{
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    font-size: clamp(32px, 10.5vw, 74px);
    font-weight:400;
    line-height:1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    letter-spacing:-0.01em;
    transition: opacity 0.25s ease;
  }

  .unit .value.tick{
    animation: tick 0.5s ease;
  }

  @keyframes tick{
    0%{ opacity:0.45; transform:translateY(-2px); }
    100%{ opacity:1; transform:translateY(0); }
  }

  .unit .label{
    margin-top: clamp(5px, 1.3vh, 11px);
    font-size: clamp(8.5px, 2vw, 11px);
    letter-spacing: 0.2em;
    text-transform:uppercase;
    color: rgba(244,236,219,0.58);
    font-weight:500;
  }

  .sep{
    width:1px;
    height: clamp(28px, 7vw, 52px);
    background: linear-gradient(180deg, transparent, rgba(207,166,98,0.45), transparent);
    align-self:center;
  }

  .finished{
    display:none;
    flex-direction:column;
    align-items:center;
  }

  .finished .big{
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    font-size: clamp(30px, 8vw, 58px);
    font-weight:400;
    background: linear-gradient(180deg, var(--gold-bright), var(--terracotta));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    letter-spacing:0.02em;
  }

  @media (prefers-reduced-motion: reduce){
    .bg-sky, .bg-sun, .bg-sea::before, .unit .value.tick, .flag, .flag-glow{
      animation: none !important;
    }
    main{
      animation: none !important;
      opacity:1;
      transform:none;
    }
  }