/* ============================================================
   DeadLands ~ მკვდართა მიწა · Coming Soon
   Matched to the DeadLands loading screen — crimson + weathered
   gold, warm cream, Sanchez slab-serif, frosted CAS-style panels.
   ============================================================ */

:root{
  --primary-color: #B12A2A;          /* crimson */
  --accent-gold:   #C9A24B;          /* weathered gold */
  --gold-lite:     #e6c478;
  --text-color:    #F4ECE0;          /* warm cream */
  --text-muted:    rgba(244, 236, 224, 0.66);
  --text-faint:    rgba(244, 236, 224, 0.42);
  --background-color: #000000;
  --panel-bg:     rgba(14, 11, 10, 0.86);
  --panel-border: rgba(201, 162, 75, 0.26);

  --transition-speed: 0.3s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-serif: 'Sanchez', 'Noto Serif Georgian', Georgia, serif;
  --font-sans:  'Noto Sans Georgian', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ height:100%; }
html.fine, html.fine *{ cursor:none; }

body{
  font-family:var(--font-sans); color:var(--text-color);
  width:100vw; min-height:100svh; overflow:hidden; user-select:none;
  background-color:var(--background-color);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

/* ---------- Background ---------- */
#background-container{ position:fixed; inset:0; z-index:-1; overflow:hidden; }

.bg-img{
  position:absolute; inset:-6%;
  background:
    url("assets/char-2.jpg") center 32% / cover no-repeat,
    linear-gradient(180deg,#1a0f0b,#000);
  filter:saturate(.76) contrast(1.1) brightness(.6) sepia(.2) hue-rotate(-12deg);
  transform:scale(1.1) translate(calc(var(--mx,0) * 12px), calc(var(--my,0) * 9px));
  transition:transform .6s ease-out;
  animation:kenburns 40s ease-in-out infinite alternate;
}
@keyframes kenburns{ from{ scale:1.04; } to{ scale:1.14; } }

.video-frame{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease .2s; z-index:1; }
body.entered .video-frame{ opacity:1; }
.video-frame iframe{ position:absolute; top:50%; left:50%; width:100vw; height:56.25vw; min-width:177.78vh; min-height:100vh; transform:translate(-50%,-50%); pointer-events:none; border:0; }
#background-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; display:none; z-index:1; }

#overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(60% 56% at 50% 42%, rgba(8,5,4,.52) 0%, transparent 70%),
    radial-gradient(60% 50% at 50% 36%, rgba(177,42,42,.16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.58) 0%, transparent 24%, transparent 42%, rgba(0,0,0,.84) 100%);
}

/* ---------- Embers ---------- */
#embers{ position:fixed; inset:0; z-index:0; pointer-events:none; }

.audio-host{ position:fixed; width:320px; height:180px; left:-9999px; top:0; opacity:.01; pointer-events:none; }

/* ---------- Custom ember cursor ---------- */
.cursor{ position:fixed; left:0; top:0; z-index:120; pointer-events:none; opacity:0; transition:opacity .4s ease; }
html.fine .cursor{ opacity:1; }   /* visible from the Enter splash onward */
.cursor span{ position:absolute; left:0; top:0; border-radius:50%; }
.cursor-dot{ width:6px; height:6px; margin:-3px; background:var(--accent-gold); box-shadow:0 0 10px rgba(201,162,75,.9); }
.cursor-ring{ width:34px; height:34px; margin:-17px; border:1px solid rgba(201,162,75,.55);
  transition:width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), border-color .25s, background .25s; }
.cursor-glow{ width:280px; height:280px; margin:-140px; mix-blend-mode:screen;
  background:radial-gradient(closest-side, rgba(177,42,42,.16), rgba(201,162,75,.05) 42%, transparent 70%); }
.cursor.is-hover .cursor-ring{ width:56px; height:56px; margin:-28px; border-color:rgba(177,42,42,.8); background:radial-gradient(closest-side, rgba(177,42,42,.14), transparent 70%); }
.cursor.is-down .cursor-ring{ width:26px; height:26px; margin:-13px; }

/* ---------- ENTER splash ---------- */
.enter{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:radial-gradient(900px 640px at 50% 42%, #160d0b 0%, #0a0605 70%, #000 100%);
  cursor:pointer; transition:opacity 1.1s ease, visibility 1.1s;
}
html.fine .enter, html.fine .enter *{ cursor:none; }
.enter.gone{ opacity:0; visibility:hidden; }
.enter-inner{ text-align:center; padding:24px; animation:enterFloat 6s ease-in-out infinite; }
@keyframes enterFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

.emblem{ position:relative; display:inline-grid; place-items:center; margin:0 auto; }
.emblem::before{
  content:''; position:absolute; top:50%; left:50%; width:132%; height:132%; transform:translate(-50%,-50%); z-index:-1;
  background:radial-gradient(circle, rgba(177,42,42,.34) 0%, rgba(201,162,75,.13) 42%, transparent 70%);
}
.emblem--enter{ width:min(380px,68vw); margin-bottom:10px; animation:logoIn 1.2s var(--ease) both; }
.emblem--enter::before{ animation:heat 5.5s ease-in-out 1.1s infinite; }
.enter-logo, .cs-logo{ width:100%; filter:drop-shadow(0 0 26px rgba(177,42,42,.45)) drop-shadow(0 14px 30px rgba(0,0,0,.7)); }
@keyframes logoIn{ from{ opacity:0; transform:translateY(22px) scale(.93); filter:blur(5px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes heat{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }

.enter-rule{ display:flex; align-items:center; justify-content:center; gap:14px; margin:6px auto 26px; color:var(--accent-gold); }
.enter-rule span{ display:block; width:min(120px,26vw); height:1px; background:linear-gradient(90deg,transparent,var(--accent-gold)); }
.enter-rule span:last-child{ background:linear-gradient(90deg,var(--accent-gold),transparent); }
.enter-rule i{ font-size:.62rem; }

.enter-btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-serif); font-weight:400; letter-spacing:.2em; text-transform:uppercase;
  font-size:clamp(.86rem,1.5vw,1.04rem); color:var(--text-color);
  background:rgba(20,15,14,.5); border:1px solid var(--accent-gold);
  padding:.9em 2.1em; border-radius:11px; cursor:pointer; backdrop-filter:blur(6px);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  transition:transform .2s var(--ease), box-shadow .3s, background .3s, color .2s;
  animation:btnPulse 2.6s ease-in-out infinite;
}
html.fine .enter-btn{ cursor:none; }
html[lang="ka"] .enter-btn{ letter-spacing:.06em; text-transform:none; }
.enter-btn:hover{ transform:translateY(-2px); background:linear-gradient(180deg,var(--gold-lite),var(--accent-gold)); color:#1a0c06; box-shadow:0 0 30px rgba(201,162,75,.5),0 20px 46px rgba(0,0,0,.55); }
.enter-btn i{ font-size:.8em; }
@keyframes btnPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(201,162,75,.35),0 16px 40px rgba(0,0,0,.5); } 60%{ box-shadow:0 0 0 13px rgba(201,162,75,0),0 16px 40px rgba(0,0,0,.5); } }

.enter-hint{ margin:18px 0 0; font-family:var(--font-serif); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); }
html[lang="ka"] .enter-hint{ letter-spacing:.04em; text-transform:none; }

/* ---------- Links / language (top-right) ---------- */
#links-container{
  position:fixed; top:22px; right:26px; z-index:25; display:flex; align-items:center; gap:10px;
  opacity:0;
}
body.entered #links-container{ animation:fadeIn .9s ease 1s both; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.lang-toggle{
  height:44px; padding:0 14px; border-radius:11px; cursor:pointer;
  background:rgba(16,12,11,.82); border:1px solid var(--panel-border);
  color:var(--text-muted); font-family:var(--font-serif); font-size:.82rem; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:.35em; transition:all var(--transition-speed) ease;
}
html.fine .lang-toggle{ cursor:none; }
.lang-toggle:hover{ border-color:rgba(201,162,75,.6); color:#fff; }
.lang-opt.is-active{ color:var(--accent-gold); }
.lang-sep{ color:var(--text-faint); }

#discord-link, #website-link{
  width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(16,12,11,.82); border:1px solid var(--panel-border); color:var(--accent-gold);
  font-size:1.15rem; cursor:pointer; transition:all var(--transition-speed) ease;
}
html.fine #discord-link, html.fine #website-link{ cursor:none; }
#discord-link:hover{ background:rgba(88,101,242,.4); border-color:rgba(88,101,242,.6); color:#fff; transform:translateY(-2px); }
#website-link:hover{ background:rgba(177,42,42,.4); border-color:rgba(201,162,75,.6); color:#fff; transform:translateY(-2px); }

/* ---------- Center hero ---------- */
#content-container{
  position:relative; z-index:5;
  flex:1 1 auto; min-height:0;
  display:flex; justify-content:center; align-items:center;
  padding:64px 22px 18px;
}
#hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:100%; max-width:680px;
  transform:translate(calc(var(--mx,0) * -8px), calc(var(--my,0) * -6px));
  transition:transform .55s ease-out;
}

/* reveal — children hidden by default; CSS fallback unless GSAP takes over */
.reveal-seq > *{ opacity:0; }
html:not(.has-gsap) body.entered .reveal-seq > *{ animation:riseIn 1s var(--ease) both; }
html:not(.has-gsap) body.entered .reveal-seq > *:nth-child(1){ animation-delay:.05s; }
html:not(.has-gsap) body.entered .reveal-seq > *:nth-child(2){ animation-delay:.2s; }
html:not(.has-gsap) body.entered .reveal-seq > *:nth-child(3){ animation-delay:.35s; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

/* emblem */
.emblem--stage{
  width:clamp(150px,16vw,220px); margin-bottom:12px;
  transform-style:preserve-3d; transition:transform .3s ease-out; will-change:transform;
}
.cs-logo{ animation:floaty 7s ease-in-out 1.4s infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
.cs-wordmark{ font-family:var(--font-serif); font-size:clamp(40px,9vw,80px); color:var(--text-color); letter-spacing:.04em; }
.emblem-glint{
  position:absolute; inset:-3%; border-radius:50%; pointer-events:none; opacity:0;
  transition:opacity .35s ease; mix-blend-mode:screen;
  background:radial-gradient(36% 36% at var(--gx,50%) var(--gy,50%), rgba(255,247,230,.55), rgba(201,162,75,.12) 45%, transparent 66%);
}

/* welcome block */
#welcome-container{ margin-bottom:16px; }
.eyebrow{
  font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.38em;
  font-size:clamp(.66rem,1.2vw,.8rem); color:var(--accent-gold); margin-bottom:12px;
}
html[lang="ka"] .eyebrow{ letter-spacing:.16em; }
.title{
  font-family:var(--font-serif); font-weight:400; line-height:1.02;
  font-size:clamp(1.9rem,4.8vw,3.3rem); letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-color); text-shadow:0 2px 4px rgba(0,0,0,.6), 0 4px 22px rgba(0,0,0,.8);
}
html[lang="ka"] .title{ text-transform:none; }
.welcome-rule{ width:120px; height:2px; margin:12px auto 11px; background:linear-gradient(90deg,transparent,var(--accent-gold),transparent); opacity:.9; }
.tag{ max-width:52ch; margin:0 auto; font-size:clamp(1rem,1.6vw,1.18rem); color:var(--text-muted); line-height:1.6; }

/* countdown target label */
.cd-target{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.2em;
  font-size:clamp(.64rem,1.1vw,.76rem); color:var(--text-muted); margin-bottom:16px;
}
html[lang="ka"] .cd-target{ letter-spacing:.05em; text-transform:none; }
.cd-dot{ width:8px; height:8px; border-radius:50%; background:var(--primary-color); box-shadow:0 0 0 0 rgba(177,42,42,.7); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(177,42,42,.7); } 70%{ box-shadow:0 0 0 11px rgba(177,42,42,0); } 100%{ box-shadow:0 0 0 0 rgba(177,42,42,0); } }

/* countdown tiles — frosted CAS panels */
.countdown{ display:inline-flex; align-items:flex-start; justify-content:center; gap:clamp(8px,1.4vw,15px); margin-bottom:clamp(16px,2.2vh,24px); }
.cd-tile{
  position:relative; display:flex; flex-direction:column; align-items:center;
  min-width:clamp(66px,12vw,108px);
  padding:clamp(12px,1.5vw,18px) clamp(10px,1.4vw,18px) clamp(9px,1vw,12px);
  border-radius:14px; background:var(--panel-bg); border:1px solid var(--panel-border);
  box-shadow:0 18px 42px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.cd-tile::before{ content:''; position:absolute; top:0; left:18px; right:18px; height:1px; background:linear-gradient(90deg,transparent,rgba(201,162,75,.5),transparent); }
.cd-num{
  font-family:var(--font-serif); font-weight:400; line-height:1;
  font-size:clamp(30px,4.8vw,52px); color:var(--text-color); font-variant-numeric:tabular-nums; display:inline-block;
  text-shadow:0 3px 16px rgba(0,0,0,.6);
}
.cd-num.tick{ animation:tick .5s var(--ease); }
@keyframes tick{ 0%{ transform:translateY(-40%) rotateX(70deg); opacity:0; color:var(--accent-gold); } 55%{ opacity:1; } 100%{ transform:none; } }
.cd-lbl{ margin-top:10px; font-family:var(--font-serif); text-transform:uppercase; letter-spacing:.2em; font-size:clamp(.54rem,.9vw,.66rem); color:var(--accent-gold); }
html[lang="ka"] .cd-lbl{ letter-spacing:.04em; text-transform:none; }

/* milestone rail */
.milestones{
  display:inline-flex; align-items:center; gap:clamp(12px,2vw,22px);
  margin-bottom:clamp(16px,2.2vh,24px); padding:9px 18px; border-radius:999px;
  background:var(--panel-bg); border:1px solid var(--panel-border);
}
.ms{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-serif); font-size:clamp(.7rem,1.2vw,.84rem); color:var(--text-muted); transition:color .3s; }
.ms-dot{ width:9px; height:9px; border-radius:50%; background:var(--text-faint); transition:.3s; }
.ms-date{ color:var(--text-faint); font-variant-numeric:tabular-nums; }
.ms-line{ width:clamp(24px,5vw,56px); height:1px; background:var(--panel-border); }
.ms.active{ color:var(--text-color); }
.ms.active .ms-dot{ background:var(--primary-color); box-shadow:0 0 10px rgba(177,42,42,.75); }
.ms.active .ms-date{ color:var(--accent-gold); }
.ms.done{ color:var(--text-faint); }
.ms.done .ms-dot{ background:var(--accent-gold); box-shadow:0 0 8px rgba(201,162,75,.5); }
.ms.done .ms-name{ text-decoration:line-through; text-decoration-color:rgba(201,162,75,.5); }

/* launched state */
body.launched .countdown, body.launched .cd-target{ display:none; }
.launched-msg{ display:none; }
body.launched .launched-msg{ display:block; font-family:var(--font-serif); font-size:clamp(22px,3.6vw,38px); color:var(--accent-gold); margin-bottom:22px; text-shadow:0 0 28px rgba(201,162,75,.4); }

/* actions */
.actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-serif); font-weight:400; font-size:1rem; letter-spacing:.04em;
  padding:.9em 1.8em; border-radius:11px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .25s, background .25s, border-color .25s, color .2s; will-change:transform;
}
html.fine .btn{ cursor:none; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{
  color:#1a0c06; background:linear-gradient(180deg,var(--gold-lite),var(--accent-gold) 55%,#9c7a30);
  border-color:#e7c878; box-shadow:0 12px 30px rgba(177,42,42,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{ box-shadow:0 18px 42px rgba(177,42,42,.4), inset 0 1px 0 rgba(255,255,255,.4); }

/* ---------- Patch notes (bottom card row) ---------- */
#patchnotes-section{
  position:relative; z-index:8; width:100%; max-width:740px; margin:0 auto;
  padding:0 22px 24px; text-align:center; opacity:0;
}
body.entered #patchnotes-section{ animation:patchIn .9s var(--ease) 1.1s forwards; }
@keyframes patchIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

#patchnotes-heading{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px; }
.pn-line{ width:80px; height:1px; background:linear-gradient(90deg,transparent,rgba(201,162,75,.6),transparent); }
.pn-title{ font-family:var(--font-serif); font-size:.9rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-color); }
html[lang="ka"] .pn-title{ letter-spacing:.06em; text-transform:none; }
.pn-version{ font-size:.66rem; font-weight:700; letter-spacing:.05em; color:#1a1410; background:var(--accent-gold); padding:2px 9px; border-radius:999px; }

#patchnotes-cards{ display:flex; justify-content:center; gap:14px; }
.patch-card{
  width:228px; display:flex; flex-direction:column; text-align:left; border-radius:12px; overflow:hidden;
  background:var(--panel-bg); border:1px solid var(--panel-border); box-shadow:0 14px 32px rgba(0,0,0,.45);
  transition:transform .25s ease, border-color .25s ease;
}
.patch-card:hover{ transform:translateY(-4px); border-color:rgba(201,162,75,.5); }
.patch-card-img{ position:relative; height:86px; background-size:cover; background-position:center; filter:saturate(.9); }
.patch-card-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,14,13,.1) 0%, rgba(18,14,13,.78) 100%); }
.patch-card-body{ padding:11px 14px 14px; }
.patch-card-title{ font-family:var(--font-serif); font-size:.86rem; letter-spacing:.03em; text-transform:uppercase; color:var(--text-color); margin-bottom:5px; }
html[lang="ka"] .patch-card-title{ letter-spacing:.02em; text-transform:none; }
.patch-card-text{ font-size:.76rem; line-height:1.42; color:var(--text-muted); }

/* ---------- Music control (bottom-right) ---------- */
#music-control-container{
  position:fixed; bottom:24px; right:26px; z-index:30; width:300px; height:64px;
  display:flex; justify-content:flex-end; opacity:0;
}
body.entered #music-control-container{ animation:fadeIn .9s ease 1.2s both; }
#music-toggle, #music-controls{ position:absolute; right:0; bottom:0; transition:all var(--transition-speed) ease; }
#music-toggle{
  width:44px; height:44px; border-radius:11px; background:rgba(16,12,11,.82); color:var(--accent-gold);
  cursor:pointer; display:flex; justify-content:center; align-items:center; font-size:1.05rem; border:1px solid var(--panel-border);
}
html.fine #music-toggle{ cursor:none; }
#music-toggle:hover{ background:rgba(177,42,42,.35); color:var(--text-color); }
#music-control-container:hover #music-toggle, #music-control-container:focus-within #music-toggle{ opacity:0; transform:translateY(16px); pointer-events:none; }
#music-controls{
  width:300px; padding:12px 14px; border-radius:12px; background:rgba(16,12,11,.9); border:1px solid var(--panel-border);
  box-shadow:0 14px 32px rgba(0,0,0,.45); opacity:0; transform:translateY(16px); pointer-events:none;
}
#music-control-container:hover #music-controls, #music-control-container:focus-within #music-controls{ opacity:1; transform:translateY(0); pointer-events:auto; }
#music-info{ margin-bottom:10px; text-align:center; }
#music-title{ font-size:.86rem; color:var(--text-muted); letter-spacing:.02em; }
#music-buttons{ display:flex; align-items:center; justify-content:center; }
#music-buttons button{ background:transparent; color:var(--text-color); border:none; cursor:pointer; font-size:1.02rem; width:38px; height:38px; border-radius:50%; display:flex; justify-content:center; align-items:center; transition:all var(--transition-speed) ease; }
html.fine #music-buttons button{ cursor:none; }
#music-buttons button:hover{ background:rgba(255,255,255,.1); color:var(--accent-gold); }
#music-play-pause{ background:var(--primary-color) !important; color:#fff !important; width:44px !important; height:44px !important; box-shadow:0 0 12px rgba(177,42,42,.5); }
#volume-container{ display:flex; align-items:center; margin-left:10px; }
#volume-icon{ margin-right:10px; font-size:.92rem; color:var(--text-muted); cursor:pointer; }
html.fine #volume-icon{ cursor:none; }
#volume-slider{ -webkit-appearance:none; appearance:none; width:90px; height:5px; border-radius:5px; background:rgba(255,255,255,.22); outline:none; }
#volume-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent-gold); cursor:pointer; box-shadow:0 0 6px rgba(0,0,0,.5); }

/* ---------- Footer copyright ---------- */
.foot-copy{
  position:fixed; left:26px; bottom:26px; z-index:20;
  font-family:var(--font-serif); font-size:.72rem; letter-spacing:.1em; color:var(--text-faint); opacity:0;
}
body.entered .foot-copy{ animation:fadeIn .9s ease 1.25s both; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(14px); z-index:40;
  padding:.7em 1.2em; border-radius:10px; background:rgba(20,14,11,.94); border:1px solid var(--accent-gold);
  color:var(--text-color); font-family:var(--font-serif); font-size:.9rem; letter-spacing:.03em;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width:1100px){ #patchnotes-section{ max-width:680px; } .patch-card{ width:204px; } }
@media (max-width:840px){
  #patchnotes-section{ display:none; }
  #content-container{ padding-bottom:90px; }
  .foot-copy{ display:none; }
}
@media (max-width:560px){
  .countdown{ gap:7px; }
  .milestones{ flex-direction:column; border-radius:16px; gap:7px; }
  .ms-line{ width:1px; height:16px; }
  .actions{ width:100%; }
  .actions .btn{ width:100%; justify-content:center; }
  #links-container{ top:14px; right:14px; }
}

/* short viewports — keep the whole stack on one screen */
@media (max-height:860px){
  #content-container{ padding-top:44px; }
  .emblem--stage{ width:clamp(128px,12vw,172px); margin-bottom:8px; }
  #welcome-container{ margin-bottom:12px; }
  .title{ font-size:clamp(1.7rem,3.6vw,2.6rem); }
  .tag{ font-size:1rem; }
  .countdown{ margin-bottom:13px; }
  .milestones{ margin-bottom:13px; }
}
@media (max-height:720px){
  #patchnotes-section{ display:none; }
  .foot-copy{ display:none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.2s !important; }
  .bg-img{ animation:none; transform:scale(1.06); }
}