/* PKL Saudi Map — الأنماط الكاملة */
:root{
  --navy:#07111f;
  --deep:#0b1f33;
  --green:#0f8f5f;
  --red:#d62927;
  --white:#ffffff;
  --gray:#94a3b8;
  --glow:rgba(15,143,95,.55);
  --card:rgba(11,31,51,.88);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  background:var(--navy);color:var(--white);
  font-family:'Tajawal','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.en{font-family:'Manrope','Tajawal',system-ui,sans-serif}

/* ---------- Loader ---------- */
#loader{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;background:var(--navy);
  transition:opacity .8s ease,visibility .8s;
}
#loader.hide{opacity:0;visibility:hidden}
.loader-ring{
  width:54px;height:54px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.08);
  border-top-color:var(--green);
  animation:spin 1.1s linear infinite;
}
.loader-txt{font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--gray)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Stage ---------- */
#stage{position:fixed;inset:0}
#bgGlow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 50% 58%, rgba(15,143,95,.10), transparent 60%),
    radial-gradient(900px 600px at 50% 40%, rgba(11,31,51,.9), transparent 70%),
    linear-gradient(180deg,#060d18 0%, var(--navy) 50%, #050b14 100%);
}
#globeCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- Hero ---------- */
#hero{
  position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;text-align:center;
  padding:0 24px calc(8vh + 20px);pointer-events:none;
}
.eyebrow{
  font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--green);
  margin-bottom:18px;font-weight:600;
}
#hero h1{
  font-family:'Manrope','Tajawal',sans-serif;
  font-weight:300;font-size:clamp(30px,5.2vw,62px);letter-spacing:.02em;
  line-height:1.12;max-width:820px;
}
#hero h1 b{font-weight:800}
#hero p{
  margin-top:16px;max-width:560px;color:var(--gray);
  font-size:clamp(13px,1.5vw,16px);line-height:1.8;font-weight:300;
}
#autoHint{
  margin-top:30px;display:flex;align-items:center;gap:12px;
  color:var(--gray);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
}
#autoHint .bar{width:120px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
#autoHint .bar i{display:block;height:100%;width:0;background:var(--green);box-shadow:0 0 10px var(--glow);animation:fillbar 2.6s linear forwards}
@keyframes fillbar{to{width:100%}}
.hero-meta{
  margin-top:34px;display:flex;gap:26px;color:rgba(148,163,184,.55);
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
}
.hero-meta span{display:flex;align-items:center;gap:8px}
.hero-meta i{width:5px;height:5px;border-radius:50%;background:var(--green);display:inline-block}

/* ---------- Skip / caption / replay ---------- */
#skipBtn{
  position:fixed;bottom:26px;left:26px;z-index:40;display:none;
  background:none;border:none;color:var(--gray);cursor:pointer;
  font-family:inherit;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  padding:10px 4px;border-bottom:1px solid rgba(148,163,184,.3);
  transition:color .3s,border-color .3s;
}
#skipBtn:hover{color:var(--white);border-color:var(--white)}
#phaseCap{
  position:fixed;top:34px;left:50%;transform:translateX(-50%);z-index:30;
  font-size:11px;letter-spacing:.45em;text-transform:uppercase;color:var(--gray);
  opacity:0;white-space:nowrap;
}
#replayBtn{
  position:fixed;bottom:24px;left:24px;z-index:40;display:none;
  background:rgba(11,31,51,.7);border:1px solid rgba(255,255,255,.12);
  color:var(--gray);cursor:pointer;font-family:inherit;font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;padding:10px 18px;border-radius:2px;
  transition:color .3s,border-color .3s;
}
#replayBtn:hover{color:var(--white);border-color:var(--green)}

/* ---------- عنوان مرحلة الاستكشاف فوق الكرة ---------- */
#sHead{
  position:fixed;top:0;left:0;right:0;z-index:25;text-align:center;
  padding:clamp(16px,3.2vh,34px) 20px 0;pointer-events:none;opacity:0;visibility:hidden;
}
#sHead .eyebrow{margin-bottom:8px}
#sHead h2{
  font-family:'Manrope','Tajawal',sans-serif;font-weight:300;
  font-size:clamp(19px,2.8vw,32px);letter-spacing:.02em;
}
#sHead h2 b{font-weight:800}
#sHead p{color:var(--gray);font-size:clamp(12px,1.3vw,14px);margin-top:7px;font-weight:300}

/* ---------- Tooltip ---------- */
#tip{
  position:fixed;z-index:60;pointer-events:none;opacity:0;
  background:var(--card);border:1px solid rgba(15,143,95,.5);
  backdrop-filter:blur(8px);border-radius:3px;
  padding:8px 14px;font-size:13px;letter-spacing:.04em;
  transform:translate(-50%,-150%);transition:opacity .18s;white-space:nowrap;
}
#tip small{display:block;color:var(--gray);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}

/* ---------- بطاقة المنطقة — هوية PKL (#00c8f0 / #00C3FF) ---------- */
#card{
  position:fixed;z-index:70;top:50%;left:34px;transform:translateY(-50%) translateX(-36px) scale(.97);
  width:min(372px,calc(100vw - 48px));
  border-radius:18px;padding:1.5px;overflow:hidden;
  background:linear-gradient(150deg,#00c8f0,#00C3FF 42%,rgba(0,195,255,.18) 80%);
  box-shadow:0 0 60px rgba(0,200,240,.26),0 34px 80px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.95,.3,1),visibility 0s linear .55s;
}
#card.on{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0) scale(1);
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.95,.3,1),visibility 0s}
#card::before{           /* توهج زاوي يدور خلف الإطار */
  content:"";position:absolute;inset:-60%;z-index:0;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(0,200,240,.5) 60deg,transparent 130deg,transparent 230deg,rgba(0,195,255,.4) 300deg,transparent 360deg);
  animation:cardspin 6s linear infinite;opacity:.7;
}
@keyframes cardspin{to{transform:rotate(360deg)}}
#cardInner{
  position:relative;z-index:1;border-radius:17px;overflow:hidden;
  background:linear-gradient(180deg,rgba(8,24,38,.97),rgba(7,17,31,.98));
  backdrop-filter:blur(16px);
  padding:24px 24px 22px;
}
#cardInner::before{       /* شبكة تقنية خفيفة بأعلى البطاقة */
  content:"";position:absolute;top:0;left:0;right:0;height:120px;pointer-events:none;
  background-image:linear-gradient(rgba(0,200,240,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,200,240,.09) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent);
}
#cardInner::after{        /* لمعة مائلة تمر مرة عند الفتح */
  content:"";position:absolute;top:0;bottom:0;width:55%;left:-60%;pointer-events:none;
  background:linear-gradient(110deg,transparent,rgba(0,200,240,.10),transparent);
}
#card.on #cardInner::after{animation:cardshine 1.4s ease .25s 1}
@keyframes cardshine{to{left:120%}}
#cardClose{
  position:absolute;top:14px;left:14px;z-index:3;width:32px;height:32px;
  background:rgba(4,20,32,.55);border:1px solid rgba(0,200,240,.4);border-radius:50%;
  color:#bfeefc;cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;backdrop-filter:blur(6px);
}
#cardClose:hover{background:rgba(0,200,240,.25);color:#fff;box-shadow:0 0 16px rgba(0,200,240,.5)}
#cardEn{
  position:relative;font-family:'Manrope',sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;padding-right:16px;
  background:linear-gradient(90deg,#00c8f0,#00C3FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#cardEn::before{          /* نقطة نابضة قبل اسم المنطقة */
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:#00c8f0;
  box-shadow:0 0 10px #00c8f0;animation:cdot 1.6s ease-in-out infinite;
}
@keyframes cdot{0%,100%{opacity:1}50%{opacity:.3}}
#cardAr{font-size:25px;font-weight:700;margin-top:8px;color:#fff;line-height:1.25}
#cardDesc{color:#a9bdd1;font-size:13.5px;line-height:1.9;margin-top:12px;font-weight:300}
.cardRow{margin-top:18px}
.cardRow label{
  display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(0,200,240,.75);margin-bottom:9px;font-family:'Manrope','Tajawal',sans-serif;
}
#cardCities{display:flex;flex-wrap:wrap;gap:7px}
#cardCities span{
  border:1px solid rgba(0,200,240,.3);border-radius:8px;
  background:rgba(0,200,240,.06);
  padding:6px 13px;font-size:12.5px;color:#d7eefb;font-weight:500;
  transition:all .25s;cursor:default;
}
#cardCities span:hover{
  border-color:#00c8f0;background:rgba(0,200,240,.16);color:#fff;
  box-shadow:0 0 14px rgba(0,200,240,.35);transform:translateY(-1px);
}
#cardCount{
  display:flex;align-items:center;gap:12px;margin-top:8px;
  padding:14px 16px;border-radius:12px;
  border:1px solid rgba(0,200,240,.28);background:rgba(0,200,240,.05);
}
#cardCount b{
  font-family:'Manrope','Tajawal',sans-serif;font-size:32px;font-weight:800;line-height:1;
  color:#00c8f0;text-shadow:0 0 18px rgba(0,200,240,.5);
}
#cardCount em{font-style:normal;color:var(--gray);font-size:12.5px}
#cardBtn{
  margin-top:20px;width:100%;cursor:pointer;border:none;
  color:#04222e;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:15px 0;border-radius:11px;
  background:linear-gradient(135deg,#00c8f0,#00C3FF);
  box-shadow:0 8px 26px rgba(0,200,240,.4);
  transition:transform .25s,box-shadow .25s,filter .25s;
}
#cardBtn:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(0,200,240,.6);filter:brightness(1.08)}
#cardHandle{display:none}


/* ---------- الخريطة الحقيقية ---------- */
#mapView{
  position:fixed;inset:0;z-index:50;opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility 0s linear .9s;background:#04080f;
}
#mapView.on{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
#realMap{position:absolute;inset:0}
#mapVignette{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(4,8,15,.55) 100%),
    linear-gradient(180deg, rgba(4,8,15,.78) 0%, transparent 16%, transparent 82%, rgba(4,8,15,.7) 100%);
}
#mHead{
  position:absolute;top:0;left:0;right:0;z-index:5;text-align:center;
  padding:clamp(12px,2.4vh,26px) 20px 0;pointer-events:none;
}
#mHead .eyebrow{margin-bottom:5px}
#mHead h2{
  font-family:'Manrope','Tajawal',sans-serif;font-weight:300;
  font-size:clamp(17px,2.2vw,26px);letter-spacing:.02em;
}
#mHead h2 b{font-weight:800}
/* أسماء المناطق فوق الخريطة نفسها — مثل التصميم المرجعي */
.regionLbl{
  font-family:'Tajawal',sans-serif;font-weight:700;font-size:15.5px;color:#fff;
  text-shadow:0 1px 7px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.7);
  letter-spacing:.02em;cursor:pointer;padding:4px 9px;white-space:nowrap;
  transition:color .25s,text-shadow .25s;user-select:none;
}
.regionLbl:hover{color:#dffcef}
.regionLbl.act{color:#2bffae;text-shadow:0 0 16px rgba(15,210,130,.95),0 1px 6px rgba(0,0,0,.85)}
#backBtn{
  position:absolute;top:18px;right:18px;z-index:7;cursor:pointer;
  background:rgba(7,17,31,.72);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);color:var(--gray);font-family:inherit;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:11px 18px;border-radius:2px;transition:all .3s;
}
#backBtn:hover{color:var(--white);border-color:var(--green);box-shadow:0 0 18px rgba(15,143,95,.3)}
.cityMarker{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px}
.cityMarker .dot{
  width:13px;height:13px;border-radius:50%;background:#2bffae;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 12px rgba(43,255,174,.9),0 0 26px rgba(15,143,95,.6);
  transition:transform .25s;
}
.cityMarker:hover .dot{transform:scale(1.35)}
.cityMarker .lbl{
  font-family:'Tajawal',sans-serif;font-size:12.5px;font-weight:700;color:#fff;
  background:rgba(7,17,31,.78);border:1px solid rgba(15,143,95,.45);
  backdrop-filter:blur(6px);padding:3px 10px;border-radius:2px;white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.maplibregl-popup-content{
  background:var(--card)!important;color:var(--white)!important;
  border:1px solid rgba(15,143,95,.5);border-radius:3px;
  font-family:'Tajawal',sans-serif;padding:12px 16px;
  box-shadow:0 14px 40px rgba(0,0,0,.55);
}
.maplibregl-popup-tip{border-top-color:rgba(11,31,51,.88)!important;border-bottom-color:rgba(11,31,51,.88)!important}
.maplibregl-popup-close-button{color:var(--gray);font-size:16px;left:6px;right:auto}
.maplibregl-ctrl-group{background:rgba(7,17,31,.8)!important;border:1px solid rgba(255,255,255,.14)}
.maplibregl-ctrl-group button{background:transparent!important}
.maplibregl-ctrl-group button span{filter:invert(1) opacity(.8)}
.maplibregl-ctrl-attrib{background:rgba(7,17,31,.6)!important;color:var(--gray)!important;font-size:10px}
.maplibregl-ctrl-attrib a{color:var(--gray)!important}
.cityChip{cursor:pointer;transition:all .25s}
.cityChip:hover{border-color:var(--green)!important;color:#fff!important;box-shadow:0 0 12px rgba(15,143,95,.35)}
@media (max-width:768px){
  #backBtn{top:12px;right:12px;padding:9px 13px}
  .regionLbl{font-size:13.5px}
  #mHead h2{font-size:16px}
}


/* ---------- دبابيس المشاريع (هوية PKL) ---------- */
.projPin{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.projPin .pp-label{
  font-family:'Tajawal',sans-serif;font-size:12px;font-weight:700;color:#04222e;
  background:linear-gradient(135deg,#00c8f0,#00C3FF);
  padding:4px 12px;border-radius:3px;white-space:nowrap;
  box-shadow:0 4px 18px rgba(0,200,240,.55);
}
.projPin .pp-marker{
  position:relative;width:34px;height:34px;border-radius:50% 50% 50% 4px;
  transform:rotate(-45deg);
  background:linear-gradient(135deg,#00c8f0,#00C3FF);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 16px rgba(0,200,240,.9),0 6px 20px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s;
}
.projPin:hover .pp-marker{transform:rotate(-45deg) scale(1.18)}
.projPin .pp-marker svg{transform:rotate(45deg);width:17px;height:17px;fill:#04222e}
.projPin .pp-pulse{
  width:30px;height:10px;border-radius:50%;margin-top:-4px;
  background:radial-gradient(ellipse at center, rgba(0,200,240,.55), transparent 70%);
  animation:ppulse 1.8s ease-out infinite;
}
@keyframes ppulse{0%,100%{transform:scaleX(.7);opacity:.5}50%{transform:scaleX(1.25);opacity:1}}

/* ---------- بطاقة المشروع — هوية PKL (#00c8f0 / #00C3FF) ---------- */
#projCard{
  position:fixed;z-index:80;top:50%;left:34px;transform:translateY(-50%) translateX(-36px);
  width:min(380px,calc(100vw - 48px));
  border-radius:14px;padding:1.5px;overflow:hidden;
  background:linear-gradient(135deg,#00c8f0,#00C3FF 45%,rgba(0,195,255,.25));
  box-shadow:0 0 70px rgba(0,200,240,.30),0 34px 80px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.9,.3,1),visibility 0s linear .5s;
}
#projCard.on{
  opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.9,.3,1),visibility 0s;
}
#projInner{
  background:linear-gradient(180deg,rgba(6,20,32,.96),rgba(7,17,31,.98));
  backdrop-filter:blur(16px);border-radius:13px;overflow:hidden;
}
.pHero{
  position:relative;height:158px;overflow:hidden;
  background:
    radial-gradient(420px 200px at 80% -20%, rgba(0,200,240,.5), transparent 60%),
    linear-gradient(135deg,#063a52 0%,#054a66 45%,#02293f 100%);
  display:flex;align-items:center;justify-content:center;
}
.pHero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,200,240,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,200,240,.10) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent);
}
.pHero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.10) 48%,transparent 58%);
  animation:shine 3.2s ease-in-out infinite;
}
@keyframes shine{0%,100%{transform:translateX(-65%)}50%{transform:translateX(65%)}}
.pHero svg{width:84px;height:84px;fill:none;stroke:#00c8f0;stroke-width:1.6;
  filter:drop-shadow(0 0 14px rgba(0,200,240,.8))}
.pBadge{
  position:absolute;top:12px;right:12px;
  font-family:'Manrope',sans-serif;font-size:9.5px;font-weight:800;letter-spacing:.3em;
  color:#04222e;background:linear-gradient(135deg,#00c8f0,#00C3FF);
  padding:5px 12px;border-radius:2px;
}
#projClose{
  position:absolute;top:10px;left:10px;z-index:2;width:30px;height:30px;
  background:rgba(4,20,32,.6);border:1px solid rgba(0,200,240,.4);border-radius:50%;
  color:#bfeefc;cursor:pointer;font-size:14px;line-height:1;
  transition:all .25s;backdrop-filter:blur(6px);
}
#projClose:hover{background:rgba(0,200,240,.25);color:#fff}
.pBody{padding:20px 22px 22px}
.pType{
  font-family:'Manrope',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;
  background:linear-gradient(90deg,#00c8f0,#00C3FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
#pName{font-size:21px;font-weight:700;margin-top:6px;color:#fff}
#pCity{color:var(--gray);font-size:12px;margin-top:3px}
#pDesc{color:#a9bdd1;font-size:13.5px;line-height:1.9;margin-top:12px;font-weight:300}
.pStats{
  display:flex;align-items:stretch;gap:0;margin-top:16px;
  border:1px solid rgba(0,200,240,.28);border-radius:10px;overflow:hidden;
  background:rgba(0,200,240,.05);
}
.pStats>div{flex:1;text-align:center;padding:12px 8px}
.pStats .sep{flex:0 0 1px;background:rgba(0,200,240,.28);padding:0}
.pStats b{
  display:block;font-family:'Manrope','Tajawal',sans-serif;font-size:19px;font-weight:800;
  color:#00c8f0;text-shadow:0 0 16px rgba(0,200,240,.5);
}
.pStats span{display:block;color:var(--gray);font-size:10.5px;letter-spacing:.12em;margin-top:3px}
#pLink{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:18px;padding:14px 0;border-radius:10px;text-decoration:none;
  font-size:13.5px;font-weight:700;color:#04222e;
  background:linear-gradient(135deg,#00c8f0,#00C3FF);
  box-shadow:0 8px 28px rgba(0,200,240,.4);
  transition:transform .25s,box-shadow .25s;
}
#pLink:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(0,200,240,.6)}
#pLink svg{width:16px;height:16px;fill:#04222e}
@media (max-width:768px){
  #projCard{
    top:auto;bottom:0;left:0;right:0;width:100%;border-radius:18px 18px 0 0;
    transform:translateY(106%);max-height:74vh;
  }
  #projCard.on{transform:translateY(0)}
  #projInner{border-radius:17px 17px 0 0;max-height:74vh;overflow-y:auto;
    padding-bottom:env(safe-area-inset-bottom)}
  .pHero{height:128px}
  .projPin .pp-label{font-size:11px}
}

/* ---------- Mobile ---------- */
@media (max-width:768px){
  #hero{padding-bottom:10vh}
  .hero-meta{gap:14px;flex-wrap:wrap;justify-content:center}
  #card{
    top:auto;bottom:0;left:0;right:0;width:100%;
    transform:translateY(106%) scale(1);
    border-radius:20px 20px 0 0;padding:1.5px 1.5px 0;max-height:72vh;
  }
  #card.on{transform:translateY(0) scale(1)}
  #cardInner{
    border-radius:19px 19px 0 0;max-height:72vh;overflow-y:auto;
    padding:20px 22px calc(22px + env(safe-area-inset-bottom));
  }
  #cardInner::after{content:none}                 /* لا لمعة على الجوال */
  #cardHandle{
    display:block;width:44px;height:4px;border-radius:4px;
    background:rgba(0,200,240,.4);margin:2px auto 14px;
  }
  #cardClose{top:14px;left:14px}
  #tip{display:none}
  #skipBtn{bottom:18px;left:18px}
  #replayBtn{bottom:14px;left:14px;padding:9px 14px}
}