/* ============================================================
   24H Free VPS Node Share — Single-Page (Image-Proportioned)
   Matching the reference image layout exactly
   ============================================================ */

/* ----- CSS Custom Properties ----- */
:root {
  --bg-primary: #000000;
  --bg-card: rgba(28,28,30,0.72);
  --border-subtle: rgba(255,255,255,0.08);
  --accent: #5e9eff;
  --accent-glow: rgba(94,158,255,0.25);
  --text-primary: #f5f5f7;
  --text-secondary: #98989d;
  --text-tertiary: #6e6e73;
  --ad-bg: rgba(255,255,255,0.03);
  --ad-border: rgba(255,255,255,0.06);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.06);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 0.5px rgba(255,255,255,0.07);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  --ease-out: 0.5s cubic-bezier(0.16,1,0.3,1);
}

/* ===== Reset ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html,body{
  height:100%;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
  color:var(--text-primary);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Full-page background image on html element */
html{
  background:url('BG.jpeg') center/cover no-repeat fixed;
}
/* Dark overlay + ambient glow on top of the image */
.bg-overlay{
  position:fixed;
  inset:0;
  background-color:rgba(0,0,0,0.6);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(94,158,255,0.08), transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 100%, rgba(94,158,255,0.05), transparent 70%);
  pointer-events:none;
  z-index:0;
}

body{
  display:flex;
  flex-direction:column;
}

/* ===== Top Banner ===== */
.top-banner{
  width:100%;
  padding:24px 24px 8px;
  text-align:center;
  position:relative;
  z-index:1;
  flex-shrink:0;
}
.banner-text{
  font-size:60px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--text-primary);
  opacity:0.95;
}

/* ===== Ad Slots ===== */
.ad-slot{
  background:var(--ad-bg);
  border:1px dashed var(--ad-border);
  border-radius:var(--radius-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
}
.ad-label{
  font-size:10px;
  font-weight:500;
  letter-spacing:1.5px;
  color:var(--text-tertiary);
  text-transform:uppercase;
  text-align:center;
}
.ad-left{
  width:150px;
  flex-shrink:0;
  align-self:stretch;
  margin-left:-4cm;
}
.ad-bottom{
  width:min(728px,99%);
  height:60px;
  flex-shrink:0;
}

/* ===== Main Content — flex-row, center everything ===== */
.main-content{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:calc(16px + 2cm);
  padding:8px 16px 10px;
  max-width:1400px;
  width:100%;
  margin:0 auto;
  flex:1;
  min-height:0;
}

/* ===== Node Display (Center - DOMINANT column) ===== */
.node-display{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  max-width:480px;
  align-self:stretch;
  padding-top:1.5cm;
  padding-bottom:0;
}

/* Node Card — glass morphism */
.node-card{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:var(--radius-lg);
  padding:36px 40px 32px;
  width:100%;
  max-width:440px;
  margin:0 auto;
  box-shadow:none;
  transition:var(--ease-out);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* QR Wrapper */
.qr-center{
  background:#ffffff;
  padding:0;
  border-radius:18px;
  border:3mm solid #ffffff;
  width:288px;
  height:288px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.qr-center #qrCode{
  width:248px;
  height:248px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.qr-center #qrCode > *{
  max-width:248px;
  max-height:248px;
}

/* QR bottom link */
.qr-bottom-link{
  margin-top:auto;
  display:inline-block;
  font-size:14px;
  position:relative;
  top:-2.35cm;
  font-weight:600;
  color:#ffffff;
  text-decoration:none;
  padding:6px 18px;
  border-radius:20px;
  background:rgba(94,158,255,0.18);
  border:1px solid rgba(94,158,255,0.3);
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  transition:all 0.3s;
}
.qr-bottom-link:hover{
  background:rgba(94,158,255,0.28);
  border-color:rgba(94,158,255,0.5);
  box-shadow:0 0 20px rgba(94,158,255,0.15);
  transform:translateY(-1px);
}

/* Node label */
.node-label{
  margin-top:22px;
  font-size:19px;
  font-weight:600;
  color:var(--text-primary);
  letter-spacing:-0.3px;
  text-align:center;
}

/* Update time — replaced by hint-text + clock-text */
.hint-text {
  margin-top: 22px;
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}
.clock-text {
  margin-top: 0.5cm;
  font-size: 17px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}

/* ===== Video Panel (Right — Narrower than center) ===== */
.video-panel{
  width:252px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  align-self:stretch;
}
.video-wrapper{
  width:252px;
  flex-shrink:0;
  position:relative;
  top:0.5cm;
  background:var(--bg-card);
  backdrop-filter:blur(60px) saturate(180%);
  -webkit-backdrop-filter:blur(60px) saturate(180%);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-md);
  transform:scale(0.9);
  transform-origin:top center;
  margin-bottom:-10%;
}
.video-wrapper video{
  display:block;
  width:100%;
  height:auto;
  background:#000;
}

/* Download info */
.download-info{
  margin-top:auto;
  text-align:left;
  width:100%;
  position:relative;
  top:-1.35cm;
}
.dl-tagline{
  font-size:13px;
  font-weight:600;
  color:var(--accent);
  margin-top:0.5cm;
  margin-bottom:8px;
  text-align:left;
  width:100%;
  white-space:nowrap;
}
.dl-title{
  font-size:11px;
  color:#ffffff;
  margin-bottom:3px;
}
.dl-link{
  display:block;
  font-family:'SF Mono','JetBrains Mono','Consolas',monospace;
  font-size:8px;
  color:var(--text-secondary);
  text-decoration:none;
  padding:2px 0;
  word-break:break-all;
  transition:color 0.25s;
}
.dl-link:hover{color:var(--accent)}
.dl-telegram{
  margin-top:8px;
  font-size:11px;
  color:var(--text-secondary);
}
.dl-telegram a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
}
.dl-telegram a:hover{text-decoration:underline}

/* ===== Footer ===== */
.footer-area{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:8px 20px 14px;
  gap:8px;
  flex-shrink:0;
}
/* ===== Music Toggle ===== */
.music-toggle{
  position:fixed;
  top:14px;
  right:20px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  color:var(--text-primary);
  font-size:18px;
  cursor:pointer;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.music-toggle:hover{
  background:rgba(255,255,255,0.15);
  border-color:rgba(255,255,255,0.25);
  transform:scale(1.08);
}
.music-toggle.playing{
  background:rgba(94,158,255,0.2);
  border-color:rgba(94,158,255,0.4);
  animation:musicPulse 2s ease-in-out infinite;
}
@keyframes musicPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(94,158,255,0.3)}
  50%{box-shadow:0 0 12px 4px rgba(94,158,255,0.1)}
}

/* ===== Responsive: Hide left ad when too narrow ===== */
@media (max-width:950px){
  .ad-left{display:none}
}
@media (max-width:780px){
  html,body{overflow-y:auto}
  .banner-text{font-size:20px;letter-spacing:1px}
  .main-content{flex-wrap:wrap;justify-content:center;height:auto;padding:6px 12px 8px;gap:12px}
  .node-display{max-width:100%;flex:1 1 100%}
  .node-card{padding:24px 20px;max-width:100%}
  .video-panel{width:min(300px,100%)}
}

@media (max-width:600px){
  .banner-text{font-size:16px;letter-spacing:0.5px}
  .top-banner{padding:14px 16px 8px}
  .qr-center{width:220px;height:220px}
  .qr-center #qrCode{width:192px;height:192px}
  .qr-center #qrCode > *{max-width:192px;max-height:192px}
  .node-label{font-size:16px}
  .video-panel{width:100%}
  .video-wrapper{width:80%}
}

@media (max-width:400px){
  .qr-center{width:180px;height:180px}
  .qr-center #qrCode{width:156px;height:156px}
  .qr-center #qrCode > *{max-width:156px;max-height:156px}
}