/* ===== Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* ===== Theme tokens ===== */
:root{
  --bg0:#000000;
  --bg1:#0b0505;
  --bg2:#150707;
  --red:#3c0000;           /* tmavě rudá */
  --gold:#c8ad55;
  --gold-dim:#8a7740;
  --text:#f6f6f6;
  --muted:#cfcfcf;
}

/* ===== Base background ===== */
body{
  background: radial-gradient(1000px 600px at 50% 15%, #2b0000, #0d0000 70%, #000 100%);
  color: var(--text);
  font-family: "Times New Roman", Georgia, serif;
  overflow: hidden;
}

/* Rudé temné pozadí + pulz */
#storm-background{
  position: fixed; inset: 0; z-index: -4;
  background:
    radial-gradient(1200px 800px at 50% 18%, rgba(80,0,0,0.5), transparent 60%),
    linear-gradient(180deg, #150707 0%, #0b0505 70%, #000 100%);
  animation: bgPulse 14s ease-in-out infinite;
}
@keyframes bgPulse{
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.05); }
}

/* ===== Embers (popel) ===== */
.embers{ position: fixed; inset: -5%; z-index: -3; pointer-events:none; }
.embers .layer{
  position:absolute; inset:0;
  background-repeat: repeat;
  background-size: 500px 500px;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,200,180,.45), rgba(255,200,180,0)),
    radial-gradient(1.2px 1.2px at 66% 42%, rgba(255,190,160,.38), rgba(255,190,160,0)),
    radial-gradient(1.0px 1.0px at 32% 74%, rgba(255,255,255,.25), rgba(255,255,255,0)),
    radial-gradient(1.4px 1.4px at 84% 65%, rgba(255,180,140,.36), rgba(255,180,140,0));
  opacity:.35;
  filter: blur(.2px);
}
.embers .l1{ animation: drift1 28s linear infinite, twinkle 6s ease-in-out infinite; }
.embers .l2{ animation: drift2 38s linear infinite, twinkle 8s ease-in-out infinite; opacity:.27; }
.embers .l3{ animation: drift3 55s linear infinite, twinkle 10s ease-in-out infinite; opacity:.21; }
@keyframes drift1{ 0%{transform:translate3d(-4%,6%,0);}50%{transform:translate3d(4%,-10%,0);}100%{transform:translate3d(-4%,6%,0);} }
@keyframes drift2{ 0%{transform:translate3d(5%,10%,0);}50%{transform:translate3d(-6%,-12%,0);}100%{transform:translate3d(5%,10%,0);} }
@keyframes drift3{ 0%{transform:translate3d(-8%,14%,0);}50%{transform:translate3d(8%,-16%,0);}100%{transform:translate3d(-8%,14%,0);} }
@keyframes twinkle{0%,100%{filter:brightness(1);}50%{filter:brightness(1.15);}}

/* ===== Content layout ===== */
.container{
  position: absolute; top:50%; left:50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 0 24px;
}

.title{
  font-size: clamp(34px, 6vw, 72px);
  letter-spacing: .06em;
  color: transparent;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dim) 55%, #5b4a19 100%);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 14px 48px rgba(200,173,85,.18);
  margin-bottom: 10px;
}

.subtitle{
  color: rgba(255,255,255,.78);
  letter-spacing: .45em;
  font-size: clamp(12px, 1.6vw, 18px);
  margin-bottom: 46px;
}

.countdown{
  display: inline-grid;
  grid-template-columns: repeat(7, auto);
  align-items: end;
  column-gap: clamp(18px, 4.5vw, 44px);
}

.time{
  min-width: clamp(90px, 18vw, 180px);
  text-align: center;
}
.time h2{
  font-size: clamp(42px, 8vw, 80px);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  text-shadow: 0 0 2px rgba(255,255,255,.35), 0 0 22px rgba(255,255,255,.12);
  margin-bottom: 12px;
}
.time small{
  display:block;
  letter-spacing:.35em;
  font-size: clamp(10px, 1.4vw, 14px);
  color: rgba(255,255,255,.72);
}

/* Dvojtečky */
.sep{
  align-self: center;
  color: var(--gold);
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 300;
  line-height: 1;
  transform: translateY(-6px);
  text-shadow: 0 0 8px rgba(200,173,85,.35);
  animation: sepPulse 4s ease-in-out infinite;
}
@keyframes sepPulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.25);}}

/* Motto */
.motto{
  margin-top: clamp(28px, 6vw, 48px);
  color: rgba(255,255,255,.75);
  letter-spacing:.20em;
  font-size: clamp(12px, 1.6vw, 16px);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #storm-background, .embers .layer, .sep { animation: none !important; }
}