/* Basics */
html { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
[hidden] { display: none !important; }
img { max-width: 100%; }

  /* Layout: one full sunset scene. Big striped sun behind the headline, four countdown tiles over it,
     palms framing the bottom corners, a teal sea band holding the footer. Single bright look by choice. */
  :root {
    --sun-yellow: #FFD23F;
    --coral: #FF5E6C;
    --hot-pink: #FF2E93;
    --pink-text: #D81B7A;
    --teal: #00D1C1;
    --violet: #2B0B47;
    --card: rgba(255, 255, 255, 0.9);
    --sky: linear-gradient(180deg, #FFF07A 0%, #FFC83D 22%, #FF8A5C 48%, #FF4FA3 74%, #C94DE0 100%);
    --sea: linear-gradient(180deg, #00E0CF 0%, #00B9C9 100%);
    --display: "Bungee", "Impact", "Arial Black", sans-serif;
    --body: "Outfit", "Segoe UI", system-ui, sans-serif;
    --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    color-scheme: light;
  }

  *, *::before, *::after { box-sizing: border-box; }

  body {
    margin: 0;
    background: #FF8A5C;
    background-image: var(--sky);
    color: var(--violet);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.5;
    padding-block: 0;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    overflow-x: clip;
  }

  .scene {
    position: relative;
    max-width: 1100px;
    margin-inline: auto;
    padding-top: 28px;
    padding-bottom: 0;
    isolation: isolate;
  }

  /* Sun */
  .sun {
    position: absolute;
    z-index: -1;
    top: 40px;
    left: 50%;
    width: min(88vw, 560px);
    aspect-ratio: 1;
    max-width: 100%;
    translate: -50% 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #FFF27A 0%, #FFC83D 30%, #FF6A4D 68%, #FF2E93 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0 54%, transparent 54% 57%, #000 57% 63%, transparent 63% 68%, #000 68% 73%, transparent 73% 79%, #000 79% 83%, transparent 83% 90%, #000 90% 93%, transparent 93%);
    mask-image: linear-gradient(to bottom, #000 0 54%, transparent 54% 57%, #000 57% 63%, transparent 63% 68%, #000 68% 73%, transparent 73% 79%, #000 79% 83%, transparent 83% 90%, #000 90% 93%, transparent 93%);
    animation: bob 7s ease-in-out infinite;
  }
  @keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
  }

  /* Header row */
  .topline {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 16px;
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .chip {
    background: var(--violet);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
  }
  .chip.alt { background: #fff; color: var(--violet); }

  /* Hero */
  .hero {
    text-align: center;
    padding-block: clamp(40px, 8vw, 88px) 28px;
  }
  h1 {
    margin: 0;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2.5rem, 9.5vw, 6rem);
    line-height: 0.98;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--violet);
    text-wrap: balance;
    text-shadow: 3px 3px 0 #fff;
  }
  .sub {
    margin: 18px auto 0;
    max-width: 34rem;
    font-size: clamp(1.05rem, 2.6vw, 1.3rem);
    font-weight: 600;
    text-wrap: balance;
  }

  /* Countdown */
  .timer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(10px, 2.4vw, 22px);
    margin: 8px auto 0;
    padding: 0;
    list-style: none;
    max-width: 860px;
  }
  .unit {
    min-width: 0;
    background: var(--card);
    border: 3px solid var(--violet);
    border-radius: 18px;
    padding: clamp(14px, 3vw, 26px) 8px clamp(12px, 2.4vw, 20px);
    text-align: center;
    box-shadow: 7px 7px 0 var(--shadow, var(--hot-pink));
  }
  .unit:nth-child(1) { --shadow: var(--hot-pink); }
  .unit:nth-child(2) { --shadow: var(--coral); }
  .unit:nth-child(3) { --shadow: var(--sun-yellow); }
  .unit:nth-child(4) { --shadow: var(--teal); }

  .num {
    display: block;
    font-family: var(--display);
    font-size: clamp(2.4rem, 8.4vw, 5.6rem);
    line-height: 1;
    color: var(--pink-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
  .num.tick { animation: tick 0.35s ease-out; }
  @keyframes tick {
    0% { transform: translateY(-6px); opacity: 0.5; }
    100% { transform: translateY(0); opacity: 1; }
  }
  .label {
    display: block;
    margin-top: 8px;
    font-family: var(--mono);
    font-size: clamp(0.68rem, 1.9vw, 0.85rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 30px auto 0;
    padding: 0;
    list-style: none;
  }
  .meta li {
    background: #fff;
    border: 2px solid var(--violet);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 600;
    font-size: 0.95rem;
  }
  .hours-left {
    margin: 18px 0 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Release state */
  .live[hidden] { display: none !important; }
  .live {
    max-width: 860px;
    margin: 8px auto 0;
    padding: clamp(22px, 5vw, 44px) 16px;
    text-align: center;
    background: var(--card);
    border: 3px solid var(--violet);
    border-radius: 18px;
    box-shadow: 7px 7px 0 var(--teal);
  }
  .live strong {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2rem, 8vw, 4.4rem);
    line-height: 1.05;
    color: var(--pink-text);
    text-transform: uppercase;
  }
  .live span { display: block; margin-top: 10px; font-weight: 600; }

  /* Sea + palms */
  .shore {
    position: relative;
    margin-top: clamp(56px, 10vw, 110px);
    min-height: 190px;
    padding: 56px 20px max(22px, env(safe-area-inset-bottom, 0px));
    text-align: center;
    color: var(--violet);
  }
  .shore::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 calc(50% - 50vw);
    background: var(--sea);
  }
  .shore::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 0;
    width: min(70vw, 460px);
    height: 70px;
    translate: -50% 0;
    background: repeating-linear-gradient(180deg, #FFE14D 0 6px, transparent 6px 14px);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent);
    mask-image: linear-gradient(180deg, #000, transparent);
    opacity: 0.85;
  }
  .shore p {
    position: relative;
    margin: 0 auto;
    max-width: 38rem;
    font-size: 0.92rem;
    font-weight: 600;
  }
  .palm {
    position: absolute;
    z-index: -1;
    bottom: 0;
    width: clamp(120px, 26vw, 300px);
    height: auto;
    pointer-events: none;
  }
  .palm.l { left: calc(-1 * clamp(4px, 2vw, 24px)); }
  .palm.r { right: calc(-1 * clamp(4px, 2vw, 24px)); scale: -1 1; }

  .nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .nav a.chip { text-decoration: none; }
  .nav a.chip:hover { background: var(--hot-pink); color: #fff; }

  /* About view */
  .about {
    max-width: 680px;
    margin: clamp(36px, 7vw, 72px) auto 0;
    padding: clamp(22px, 4.5vw, 40px);
    background: var(--card);
    border: 3px solid var(--violet);
    border-radius: 18px;
    box-shadow: 7px 7px 0 var(--hot-pink);
  }
  .about h2 {
    margin: 0 0 14px;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.8rem, 6vw, 2.8rem);
    line-height: 1.05;
    text-transform: uppercase;
  }
  .about p { margin: 0 0 14px; max-width: 65ch; }
  .about ul { margin: 0 0 18px; padding-left: 1.2em; display: grid; gap: 8px; }
  .about .back { font-weight: 600; }
  .about a, .shore a { color: var(--violet); text-underline-offset: 3px; text-decoration-thickness: 2px; }
  .about a:hover, .shore a:hover { color: var(--pink-text); }

  .legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 12px; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; }
  .legal span, .legal a { position: relative; }

  a:focus-visible, button:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

  @media (max-width: 560px) {
    .timer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .num { font-size: clamp(2.6rem, 15vw, 4.2rem); }
    .unit { box-shadow: 5px 5px 0 var(--shadow, var(--hot-pink)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sun, .num.tick { animation: none; }
  }