@font-face { font-family: Jomhuria; src: url(fonts/Jomhuria-Regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Poppins; font-weight: 400; src: url(fonts/Poppins-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Poppins; font-weight: 500; src: url(fonts/Poppins-500.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Poppins; font-weight: 700; src: url(fonts/Poppins-700.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Roboto Slab"; font-weight: 700; src: url(fonts/RobotoSlab-700.woff2) format("woff2"); font-display: swap; }

:root {
  --bg: #122924;
  --bg-deep: #0b1a17;
  --gold: #a77d35;
  --cream: #d9cca6;
  --hop: #75965e;
  --muted: rgba(217, 204, 166, .55);
  --edge: clamp(18px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { background: var(--bg-deep); }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--cream);
  font: 400 16px/1.5 Poppins, system-ui, sans-serif;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, #1d3b34 0%, var(--bg) 45%, var(--bg-deep) 100%) fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cream); text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* colțurile aurii */
.frame { position: fixed; inset: var(--edge); pointer-events: none; z-index: 1; }
.frame i { position: absolute; width: clamp(36px, 7vw, 70px); height: clamp(36px, 7vw, 70px); border: 0 solid var(--gold); }
.frame i:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }
.frame i:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }
.frame i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.frame i:nth-child(4) { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.cone {
  position: fixed; left: 50%; top: 46%; z-index: 0;
  width: min(78vw, 560px); transform: translate(-50%, -50%);
  opacity: .07; pointer-events: none;
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .11; } }

main, footer { position: relative; z-index: 2; }
main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--edge) + 48px) 24px 24px;
}

.date, .label {
  margin: 0;
  font: 700 clamp(12px, 1.6vw, 14px)/1 Poppins, sans-serif;
  letter-spacing: .32em;
  color: var(--gold);
  padding-left: .32em; /* compensează spațierea ultimei litere */
}
.date { font-family: "Roboto Slab", serif; letter-spacing: .18em; font-size: clamp(15px, 2.2vw, 19px); color: var(--cream); }

h1 {
  margin: 14px 0 0;
  font: 400 clamp(76px, 17vw, 168px)/.7 Jomhuria, serif;
  letter-spacing: .01em;
}
h1 span { display: block; }
h1 span + span { margin-top: -.12em; }
.gold { color: var(--gold); }

.countdown { display: flex; gap: clamp(10px, 3vw, 28px); margin: 18px 0 8px; }
.countdown div { display: grid; min-width: 3.4ch; }
.countdown b { font: 700 clamp(30px, 6vw, 46px)/1 "Roboto Slab", serif; font-variant-numeric: tabular-nums; }
.countdown small { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.after { font: 700 clamp(18px, 3vw, 24px)/1.3 "Roboto Slab", serif; margin: 20px 0 6px; }

.code { margin-top: clamp(26px, 5vh, 50px); display: grid; justify-items: center; gap: 14px; max-width: 520px; }
.letters { display: flex; gap: clamp(8px, 2vw, 14px); list-style: none; margin: 0; padding: 0; }
.letters li {
  width: clamp(48px, 12vw, 64px); aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  border: 1.5px solid rgba(167, 125, 53, .55);
  border-radius: 6px;
  background: rgba(11, 26, 23, .45);
  font: 400 clamp(54px, 13vw, 72px)/1 Jomhuria, serif;
  color: var(--gold);
  padding-top: .12em;
}
.letters li.on { border-color: var(--gold); box-shadow: 0 0 22px rgba(167, 125, 53, .25); animation: reveal .9s ease-out both; }
.letters li.new { animation: reveal 1.6s ease-out .4s both; }
@keyframes reveal { from { opacity: .3; box-shadow: 0 0 40px rgba(167, 125, 53, .6); } }
.letters li.on::after { content: ""; width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--gold); margin-top: -.12em; }
.tagline { margin: 0; font: 700 clamp(16px, 2.4vw, 20px)/1.35 "Roboto Slab", serif; color: var(--cream); }
.where { margin: 0; font-size: 14px; color: var(--muted); }

.next { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.hints { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.hints li { font-size: 15px; color: var(--muted); }
.hints li:first-child { font-size: clamp(17px, 2.4vw, 20px); color: var(--cream); }
.hints li span { font-weight: 700; color: var(--gold); letter-spacing: .1em; font-size: .78em; margin-right: .6em; }

footer {
  display: grid; justify-items: center; gap: 8px;
  padding: 20px 24px calc(var(--edge) + 56px);
  font-size: 12px; color: var(--muted); text-align: center;
}
footer img { width: 150px; height: auto; opacity: .55; }
footer p { margin: 0; }

/* Halloween (31 octombrie, 17:00 → 1 noiembrie, 06:00): negru cald, conul pâlpâie ca un dovleac */
.seasonal { margin: 14px 0 0; font: 700 clamp(15px, 2.2vw, 18px)/1.4 "Roboto Slab", serif; color: var(--gold); }
body.halloween { background: radial-gradient(ellipse 70% 55% at 50% 42%, #3a2a14 0%, #160f08 45%, #060504 100%) fixed; }
body.halloween .cone {
  filter: sepia(1) saturate(5) hue-rotate(-12deg) brightness(1.1);
  animation: flicker 3.2s steps(1, end) infinite;
}
body.halloween .letters li { background: rgba(6, 5, 4, .5); }
@keyframes flicker {
  0% { opacity: .16; } 7% { opacity: .1; } 11% { opacity: .19; } 30% { opacity: .14; } 34% { opacity: .2; }
  52% { opacity: .12; } 58% { opacity: .17; } 77% { opacity: .11; } 81% { opacity: .18; } 93% { opacity: .15; }
}

@media (prefers-reduced-motion: reduce) {
  .cone, .letters li { animation: none !important; }
}