/* Rüüstajad – rüüstajad.ee */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/cinzel-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/cinzel-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#0a0806;
  --gold-hi:#fbe7a6;
  --gold:#d8a94a;
  --gold-lo:#7a5418;
  --wow-yellow:#ffd100;
  --ember:255,118,32;
  --text:#dccdb0;
  --muted:#9d8f78;
}
*{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;
  background:
    radial-gradient(120% 60% at 50% 115%, rgba(var(--ember),.30), transparent 60%),
    radial-gradient(70% 45% at 50% -5%, rgba(170,120,50,.14), transparent 70%),
    var(--bg);
  color:var(--text);
  font:500 1.25rem/1.55 "Cormorant Garamond",Georgia,"Times New Roman",serif;
  display:flex;flex-direction:column;align-items:center;
  overflow-x:hidden;
}
/* blurred banner atmosphere */
body::before{
  content:"";position:fixed;inset:-40px;z-index:-2;
  background:url(banner-800.webp) center 30%/cover no-repeat;
  filter:blur(26px) saturate(1.1);opacity:.32;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.85) 100%);
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

main{width:100%;max-width:880px;padding:clamp(16px,4vh,40px) clamp(14px,4vw,32px) 24px;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}

/* hero banner in a gold frame */
.hero{
  position:relative;margin:0;width:100%;max-width:min(640px,calc((100svh - 470px) * 16 / 9));min-width:min(100%,520px);
  padding:3px;border-radius:8px;
  background:linear-gradient(160deg,var(--gold-hi),var(--gold) 22%,var(--gold-lo) 50%,var(--gold) 78%,var(--gold-hi));
  box-shadow:0 0 0 1px #000,0 24px 70px rgba(0,0,0,.85),0 0 90px rgba(var(--ember),.16);
}
.hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:6px;background:#140f0a}

/* ornamental divider */
.divider{display:flex;align-items:center;gap:14px;width:min(420px,80%);margin:clamp(18px,3.5vh,32px) auto clamp(12px,2vh,18px);color:var(--gold)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 70%,var(--gold-hi))}
.divider::after{transform:scaleX(-1)}
.divider i{width:9px;height:9px;transform:rotate(45deg);background:linear-gradient(135deg,var(--gold-hi),var(--gold-lo));box-shadow:0 0 10px rgba(var(--ember),.6)}

h2{
  margin:0 0 .45em;
  font:800 clamp(1.55rem,4.6vw,2.4rem)/1.15 "Cinzel",Georgia,serif;letter-spacing:.03em;
  background:linear-gradient(180deg,#fff3cc 0%,var(--gold-hi) 30%,var(--gold) 70%,#9c6a22 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.9)) drop-shadow(0 0 18px rgba(var(--ember),.25));
}
.lead{margin:0 auto;max-width:34em;font-size:clamp(1.15rem,2.6vw,1.35rem);text-shadow:0 1px 2px #000}

/* ---------- WoW-style buttons (pure CSS) ---------- */
.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,32px);width:100%;max-width:680px;margin:clamp(24px,4.5vh,40px) auto 0}

.wow-btn{
  --face-top:#c8321f;--face-mid:#8a160d;--face-bot:#3d0603;
  position:relative;display:flex;align-items:center;justify-content:center;gap:.6em;
  min-height:74px;padding:12px 22px;white-space:nowrap;
  border:3px solid transparent;border-radius:7px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,170,110,.35),transparent 55%) padding-box,
    linear-gradient(180deg,var(--face-top) 0%,var(--face-mid) 48%,#5c0b06 52%,var(--face-bot) 100%) padding-box,
    linear-gradient(180deg,#fff0b8 0%,var(--gold) 28%,#6b4511 52%,#b98a35 78%,#f3d78a 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,215,170,.55),
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 -6px 12px rgba(0,0,0,.55),
    0 0 0 2px #0d0805,
    0 10px 26px rgba(0,0,0,.75);
  color:var(--wow-yellow);text-decoration:none;
  font:800 clamp(1.05rem,2.4vw,1.25rem)/1.1 "Cinzel",Georgia,serif;letter-spacing:.08em;text-transform:uppercase;
  text-shadow:0 2px 0 #000,0 0 8px rgba(0,0,0,.9);
  transition:transform .12s ease,box-shadow .2s ease,filter .2s ease;
  -webkit-tap-highlight-color:transparent;
}
/* gold studs on the sides */
.wow-btn::before,.wow-btn::after{
  content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;
  transform:rotate(45deg);
  background:linear-gradient(135deg,#fff0b8,var(--gold) 45%,#5a3a0e);
  box-shadow:0 0 0 2px #0d0805,0 2px 6px rgba(0,0,0,.7);
}
.wow-btn::before{left:-9px}
.wow-btn::after{right:-9px}
.wow-btn svg{width:1.35em;height:1.35em;flex:none;fill:currentColor;filter:drop-shadow(0 2px 0 #000)}

a.wow-btn:hover{
  filter:brightness(1.14) saturate(1.05);color:#fff2a8;
  box-shadow:
    inset 0 1px 0 rgba(255,225,180,.7),
    inset 0 0 0 1px rgba(0,0,0,.5),
    inset 0 -6px 12px rgba(0,0,0,.45),
    0 0 0 2px #0d0805,
    0 0 26px rgba(var(--ember),.55),
    0 10px 26px rgba(0,0,0,.75);
}
a.wow-btn:active{transform:translateY(2px);filter:brightness(.92)}
a.wow-btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:5px}

/* disabled / coming soon */
.wow-btn.is-disabled{
  --face-top:#55504a;--face-mid:#34302c;--face-bot:#1a1816;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.10),transparent 55%) padding-box,
    linear-gradient(180deg,var(--face-top) 0%,var(--face-mid) 48%,#2a2724 52%,var(--face-bot) 100%) padding-box,
    linear-gradient(180deg,#a9a294 0%,#6f675a 30%,#3a352e 55%,#6f675a 80%,#9d9587 100%) border-box;
  color:#8c867c;text-shadow:0 2px 0 #000;
  cursor:not-allowed;user-select:none;
}
.wow-btn.is-disabled::before,.wow-btn.is-disabled::after{background:linear-gradient(135deg,#bdb6a8,#6f675a 45%,#2d2924)}
.badge{
  position:absolute;top:-13px;right:14px;z-index:1;
  padding:4px 11px 3px;border-radius:3px;
  font:800 .68rem/1.2 "Cinzel",Georgia,serif;letter-spacing:.1em;text-transform:uppercase;
  color:#2b1704;text-shadow:0 1px 0 rgba(255,240,190,.6);
  background:linear-gradient(180deg,#fff0b8,var(--gold) 55%,#a5701f);
  box-shadow:0 0 0 1px #3a2408,0 3px 8px rgba(0,0,0,.7),0 0 14px rgba(var(--ember),.35);
  transform:rotate(3deg);
}

footer{
  width:100%;padding:18px 16px 22px;text-align:center;
  font:600 .78rem/1.6 "Cinzel",Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
footer img{display:block;width:44px;height:44px;margin:0 auto 10px;border-radius:50%;box-shadow:0 0 0 1px var(--gold-lo),0 0 18px rgba(var(--ember),.3)}
footer .sep{color:var(--gold);margin:0 .5em}

/* rising embers */
.embers{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.embers span{
  position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;
  background:#ffb347;box-shadow:0 0 6px 2px rgba(var(--ember),.8);opacity:0;
  animation:rise linear infinite;
}
.embers span:nth-child(1){left:6%;animation-duration:11s;animation-delay:0s}
.embers span:nth-child(2){left:14%;animation-duration:14s;animation-delay:3s;width:2px;height:2px}
.embers span:nth-child(3){left:23%;animation-duration:9s;animation-delay:6s}
.embers span:nth-child(4){left:35%;animation-duration:13s;animation-delay:1s;width:2px;height:2px}
.embers span:nth-child(5){left:48%;animation-duration:12s;animation-delay:8s}
.embers span:nth-child(6){left:59%;animation-duration:10s;animation-delay:4s;width:2px;height:2px}
.embers span:nth-child(7){left:68%;animation-duration:15s;animation-delay:2s}
.embers span:nth-child(8){left:77%;animation-duration:11s;animation-delay:7s;width:2px;height:2px}
.embers span:nth-child(9){left:86%;animation-duration:13s;animation-delay:5s}
.embers span:nth-child(10){left:94%;animation-duration:10s;animation-delay:9s;width:2px;height:2px}
@keyframes rise{
  0%{transform:translate(0,0);opacity:0}
  10%{opacity:.9}
  50%{transform:translate(18px,-50vh)}
  85%{opacity:.5}
  100%{transform:translate(-12px,-100vh);opacity:0}
}
@media (prefers-reduced-motion:reduce){.embers{display:none}.wow-btn{transition:none}}

@media (max-width:560px){
  body{font-size:1.15rem}
  .actions{grid-template-columns:1fr;gap:24px;max-width:340px}
  .wow-btn{min-height:68px}
  .hero{padding:2px;border-radius:6px}
  .hero img{border-radius:5px}
}
@media (max-width:560px){footer .hide-m{display:none}footer .cry{display:block;margin-top:2px;color:var(--gold)}}