/* ============================================================================
   VIETRA GUIDE — UÇUŞ EĞLENCESİ görünümü (v4.0)
   Hub misafir uygulamasının açık düzenine uyar; oyun katmanı koyudur.
   ============================================================================ */

/* ---------------- HUB ---------------- */
.vge-sek{display:flex;gap:8px;margin-bottom:14px}
.vge-sek button{
  flex:1;padding:11px;border-radius:12px;font-family:inherit;font-size:13.5px;font-weight:700;
  background:#F4F4F7;color:#8A8A93;border:1px solid transparent;transition:all .2s;
}
.vge-sek button.on{background:#CE2020;color:#fff;border-color:#CE2020}
.vge-izah{font-size:12.5px;color:#8A8A93;font-weight:500;line-height:1.5;margin-bottom:14px}

.vge-oyunlar{display:flex;flex-direction:column;gap:10px}
.vge-oyun{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:14px;
  background:#fff;border:1px solid #EDEDF0;border-radius:16px;font-family:inherit;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .2s;
}
.vge-oyun:active{transform:scale(.97)}
.vge-oyun .em{
  flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:25px;
  background:color-mix(in srgb, var(--k) 16%, #fff);
}
.vge-oyun .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.vge-oyun .tx b{font-size:15px;font-weight:700;color:#111114;letter-spacing:-.2px}
.vge-oyun .tx small{font-size:12px;color:#8A8A93;font-weight:500}
.vge-oyun .bs{
  flex:none;font-size:10px;font-weight:800;letter-spacing:.08em;padding:6px 10px;border-radius:99px;
  background:color-mix(in srgb, var(--k) 14%, #fff);color:var(--k);
}

.vge-kitaplar{display:flex;flex-direction:column;gap:10px}
.vge-kitap{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:12px 14px;
  background:#fff;border:1px solid #EDEDF0;border-radius:16px;font-family:inherit;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.vge-kitap:active{transform:scale(.97)}
.vge-kitap .kap{
  flex:none;width:46px;height:64px;border-radius:6px 10px 10px 6px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--k),#000);box-shadow:0 6px 16px rgba(0,0,0,.22);
  border-left:4px solid rgba(255,255,255,.22);
}
.vge-kitap .kap i{font-style:normal;font-size:15px;font-weight:800;color:#fff;letter-spacing:.04em}
.vge-kitap .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vge-kitap .tx b{font-size:14.5px;font-weight:700;color:#111114;line-height:1.3}
.vge-kitap .tx small{font-size:12px;color:#8A8A93;font-weight:500}
.vge-kitap .tx em{
  font-style:normal;align-self:flex-start;margin-top:3px;font-size:10px;font-weight:800;
  color:#CE2020;background:#FDECEC;padding:3px 8px;border-radius:99px;
}
.vge-yok{
  background:#F4F4F7;border:1px dashed #E0E0E6;border-radius:16px;padding:28px 20px;text-align:center;
}
.vge-yok b{display:block;font-size:14px;font-weight:700;color:#111114;margin-bottom:5px}
.vge-yok span{font-size:12.5px;color:#8A8A93;font-weight:500;line-height:1.6}

/* ---------------- OYUN KATMANI (tam ekran, koyu) ---------------- */
.vge-ov{
  position:fixed;inset:0;z-index:120;background:#0B0B0E;color:#F2F2F6;
  display:flex;flex-direction:column;
  font-family:'Montserrat','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  padding-bottom:env(safe-area-inset-bottom,0px);
  animation:vgeAc .28s cubic-bezier(.22,1,.36,1);
}
@keyframes vgeAc{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}

.vge-bar{
  flex:none;display:flex;align-items:center;gap:12px;padding:14px 16px;
  padding-top:calc(14px + env(safe-area-inset-top,0px));
  border-bottom:1px solid rgba(255,255,255,.07);
}
.vge-x{
  flex:none;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.07);
  border:none;display:grid;place-items:center;color:#F2F2F6;cursor:pointer;
}
.vge-x svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.vge-ttl{flex:1;min-width:0}
.vge-ttl b{display:block;font-size:14.5px;font-weight:800;letter-spacing:.06em}
.vge-ttl span{display:block;font-size:11px;color:#8B8B97;font-weight:600;margin-top:1px}
.vge-sc{flex:none;text-align:right}
.vge-sc b{display:block;font-size:20px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.vge-sc span{display:block;font-size:9px;color:#8B8B97;font-weight:800;letter-spacing:.12em;margin-top:3px}

.vge-alan{flex:1;position:relative;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.vge-cnv{display:block;width:100%;height:100%;touch-action:none}

.vge-ctl{
  flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:12px 14px 16px;
}
.vge-ctl.tek{grid-template-columns:1fr}
.vge-b{
  height:58px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.09);
  color:#F2F2F6;display:grid;place-items:center;cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:background .12s,transform .12s;
}
.vge-b:active{background:rgba(226,58,58,.28);transform:scale(.94)}
.vge-b svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vge-b span{font-size:13px;font-weight:800;letter-spacing:.06em}

/* Oyun bitti perdesi */
.vge-son{
  position:absolute;inset:0;background:rgba(6,6,10,.86);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:24px;z-index:5;animation:vgeAc .3s
}
.vge-son .kutu{
  width:100%;max-width:320px;background:#17171C;border:1px solid rgba(255,255,255,.09);
  border-radius:22px;padding:26px 22px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.vge-son .rozet{
  display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.14em;color:#0B0B0E;
  background:#F5B544;padding:5px 11px;border-radius:99px;margin-bottom:12px;
}
.vge-son h3{font-size:19px;font-weight:800;margin-bottom:18px}
.vge-son .skorlar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.vge-son .skorlar div{background:rgba(255,255,255,.05);border-radius:14px;padding:12px 6px}
.vge-son .skorlar b{display:block;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.vge-son .skorlar span{display:block;font-size:9px;font-weight:800;color:#8B8B97;letter-spacing:.12em;margin-top:4px}
.vge-son button{
  width:100%;padding:14px;border-radius:14px;font-family:inherit;font-size:14px;font-weight:800;
  border:none;cursor:pointer;
}
.vge-son .b1{background:#CE2020;color:#fff;margin-bottom:9px}
.vge-son .b2{background:rgba(255,255,255,.08);color:#F2F2F6}

/* Seviye atlama parlaması */
.vge-flash{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  font-size:26px;font-weight:800;letter-spacing:.1em;color:#F5B544;
  text-shadow:0 4px 30px rgba(245,181,68,.6);pointer-events:none;
  animation:vgeFlash 1.1s ease-out forwards;z-index:4;
}
@keyframes vgeFlash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-90%) scale(1)}
}

/* ---------------- TROPICAL MATCH ---------------- */
.vge-m3-ust{
  flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px 6px;
}
.vge-m3-ust div{background:rgba(255,255,255,.05);border-radius:13px;padding:9px 12px;text-align:center}
.vge-m3-ust b{display:block;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.vge-m3-ust span{display:block;font-size:8.5px;font-weight:800;color:#8B8B97;letter-spacing:.12em;margin-top:3px}
.vge-m3{
  flex:1;min-height:0;display:grid;gap:3px;padding:10px 12px 14px;align-content:center;
}
.vge-h{
  aspect-ratio:1;display:grid;place-items:center;font-size:min(6.4vw,28px);line-height:1;
  background:rgba(255,255,255,.045);border:1px solid transparent;border-radius:11px;
  cursor:pointer;padding:0;transition:transform .12s,background .15s,border-color .15s;
}
.vge-h.sec{background:rgba(226,58,58,.3);border-color:#E23A3A;transform:scale(.9)}
.vge-h.bos{background:transparent;border-color:transparent}
.vge-h.pat{animation:vgePat .19s ease-out}
@keyframes vgePat{from{transform:scale(1);background:rgba(245,181,68,.5)}to{transform:scale(.2);background:transparent}}

/* ---------------- WORD HOP ---------------- */
.vge-wh{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px;overflow-y:auto}
.wh-ust{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.wh-ust div{background:rgba(255,255,255,.05);border-radius:13px;padding:9px 12px;text-align:center}
.wh-ust b{display:block;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.wh-ust span{display:block;font-size:8.5px;font-weight:800;color:#8B8B97;letter-spacing:.12em;margin-top:3px}
.wh-kart{
  background:linear-gradient(150deg,#1E1E25,#141418);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:26px 18px;text-align:center;margin-bottom:16px;
}
.wh-kart .em{font-size:44px;line-height:1;margin-bottom:12px}
.wh-kart .vi{font-size:27px;font-weight:800;letter-spacing:-.4px;margin-bottom:6px}
.wh-kart .ip{font-size:11.5px;color:#8B8B97;font-weight:600}
.wh-sik{display:flex;flex-direction:column;gap:9px}
.wh-b{
  padding:15px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  color:#F2F2F6;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:all .18s;
}
.wh-b:active{transform:scale(.98)}
.wh-b.ok{background:rgba(62,213,152,.2);border-color:#3ED598;color:#3ED598}
.wh-b.no{background:rgba(226,58,58,.2);border-color:#E23A3A;color:#FF8484}

/* ---------------- OKUYUCU ---------------- */
.vge-ov.oku{background:#14120F}
.vge-oku{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.ok-arac{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.06);
}
.ok-arac button{
  background:rgba(255,255,255,.07);border:none;color:#E8E2D6;font-family:inherit;font-size:12.5px;
  font-weight:700;padding:8px 13px;border-radius:10px;cursor:pointer;
}
.ok-pnt{display:flex;gap:7px}
.ok-govde{
  flex:1;min-height:0;overflow-y:auto;padding:22px 22px 40px;
  color:#E8E2D6;line-height:1.85;font-size:17px;
  font-family:Georgia,'Times New Roman',serif;
}
.ok-govde .ok-bas{
  font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#B99A5E;margin-bottom:20px;
}
.ok-govde p{margin-bottom:16px;text-align:justify;hyphens:auto}
.ok-govde .ok-bos{color:#8B8B97;text-align:center;font-style:italic}
.ok-alt{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;padding-bottom:calc(11px + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(255,255,255,.06);
}
.ok-alt button{
  background:rgba(255,255,255,.07);border:none;color:#E8E2D6;font-family:inherit;font-size:13px;
  font-weight:700;padding:9px 15px;border-radius:10px;cursor:pointer;
}
.ok-alt span{font-size:11.5px;font-weight:800;color:#8B8B97;letter-spacing:.06em}
.ok-liste{
  position:absolute;inset:0;background:#14120F;overflow-y:auto;padding:14px;display:none;z-index:3;
}
.ok-liste.ac{display:block;animation:vgeAc .22s}
.ok-liste button{
  display:block;width:100%;text-align:left;padding:14px;margin-bottom:7px;border:none;
  background:rgba(255,255,255,.05);color:#E8E2D6;font-family:inherit;font-size:13.5px;
  font-weight:600;border-radius:12px;cursor:pointer;
}

/* Geniş ekran */
@media(min-width:820px){
  .vge-alan{max-width:560px;width:100%;margin:0 auto}
  .vge-ctl{max-width:560px;width:100%;margin:0 auto}
  .ok-govde{max-width:680px;width:100%;margin:0 auto;font-size:18px}
}

/* Lantern Run baslangic perdesi */
.vge-basla{
  position:absolute;inset:0;display:grid;place-items:center;z-index:4;cursor:pointer;
  background:rgba(8,10,24,.45);backdrop-filter:blur(2px);text-align:center;
}
.vge-basla b{display:block;font-size:20px;font-weight:800;letter-spacing:.1em;color:#fff;
  text-shadow:0 3px 16px rgba(0,0,0,.6);animation:vgeYanip 1.5s ease-in-out infinite}
.vge-basla span{display:block;font-size:12px;font-weight:600;color:rgba(255,255,255,.78);margin-top:8px}
@keyframes vgeYanip{50%{opacity:.45}}

/* Eglence ekraninda baslik yapiskan olmasin — sekmelerin ustune binmesin */
#scr-fun .screen-title{position:static;background:transparent}

/* ============================================================================
   SUPER MEMPHIS — tam ekran oyun katmanı
   ============================================================================ */
.vge-ov.mp-ov{background:#08080C}
.vge-ov.mp-ov .vge-alan{padding:0}
.mp-cnv{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated}

/* Oyun içi üst şerit */
.mp-hud{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;
  background:linear-gradient(180deg,rgba(6,6,12,.72),rgba(6,6,12,0));
  pointer-events:none;z-index:3;
}
.mp-hud span{font-size:12.5px;font-weight:800;letter-spacing:.06em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.mp-hud .w{background:rgba(255,255,255,.14);padding:4px 9px;border-radius:8px}
.mp-hud .hp{color:#FF6B6B;letter-spacing:.08em}
.mp-hud .cr{margin-left:auto;color:var(--k)}
.mp-hud .pz{
  pointer-events:auto;flex:none;width:34px;height:34px;border-radius:10px;border:none;
  background:rgba(255,255,255,.14);color:#fff;font-size:11px;font-weight:800;cursor:pointer;
}

/* Kontroller */
.vge-ctl.mp-ctl{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  grid-template-columns:none;padding:10px 18px 18px;
}
.mp-joy{
  flex:none;width:104px;height:104px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  display:grid;place-items:center;touch-action:none;position:relative;
}
.mp-joy i{
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.28);transition:transform .05s linear;
}
.mp-sag{flex:none;display:flex;align-items:flex-end;gap:11px}
.mp-b{
  border:none;border-radius:50%;color:#fff;font-family:inherit;font-weight:800;
  letter-spacing:.05em;cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:transform .08s,filter .08s;
}
.mp-b:active{transform:scale(.9);filter:brightness(1.25)}
.mp-b.zip{width:86px;height:86px;font-size:13px;background:radial-gradient(circle at 35% 30%,#F0554F,#B71C1C)}
.mp-b.dash{width:62px;height:62px;font-size:11px;background:radial-gradient(circle at 35% 30%,#7BD8F0,#1E7A94)}

/* Perdeler */
.mp-perde{
  position:absolute;inset:0;display:grid;place-items:center;padding:22px;z-index:6;
  background:rgba(6,6,12,.8);backdrop-filter:blur(5px);animation:vgeAc .28s;
}
.mp-perde .kutu{
  width:100%;max-width:310px;background:#17171F;border:1px solid rgba(255,255,255,.1);
  border-radius:22px;padding:24px 20px;text-align:center;box-shadow:0 26px 66px rgba(0,0,0,.66);
}
.mp-perde .rz{
  display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.16em;color:#08080C;
  background:#F5B544;padding:5px 11px;border-radius:99px;margin-bottom:11px;
}
.mp-perde h3{font-size:18px;font-weight:800;color:#fff;margin-bottom:6px}
.mp-perde .ap{font-size:12.5px;color:#8B8B97;font-weight:600;margin-bottom:14px}
.mp-perde .ist{display:flex;gap:9px;margin:16px 0 18px}
.mp-perde .ist div{flex:1;background:rgba(255,255,255,.06);border-radius:13px;padding:11px 4px}
.mp-perde .ist b{display:block;font-size:19px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.mp-perde .ist span{display:block;font-size:8.5px;font-weight:800;color:#8B8B97;letter-spacing:.11em;margin-top:4px}
.mp-perde button{
  width:100%;padding:13px;border-radius:13px;font-family:inherit;font-size:13.5px;font-weight:800;
  border:none;cursor:pointer;margin-bottom:8px;
}
.mp-perde .b1{background:#CE2020;color:#fff}
.mp-perde .b2,.mp-perde .b3{background:rgba(255,255,255,.08);color:#F2F2F6}

/* Dünya haritası */
.mp-harita{
  position:absolute;inset:0;overflow-y:auto;z-index:5;padding:18px 16px 26px;
  background:radial-gradient(120% 60% at 50% 0%,#2A1B54,#0C0A18 60%),#0C0A18;
  animation:vgeAc .3s;
}
.mp-harita .bas{text-align:center;margin-bottom:22px}
.mp-harita .bas b{
  display:block;font-size:23px;font-weight:800;letter-spacing:.04em;color:#fff;
  text-shadow:0 0 26px rgba(124,77,255,.7);
}
.mp-harita .bas span{display:block;font-size:11.5px;color:#8B8B97;font-weight:600;margin-top:5px}
.mp-harita .dw{
  display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:#C9C9D2;
  letter-spacing:.09em;text-transform:uppercase;margin:18px 0 9px;
}
.mp-harita .dw i{width:8px;height:8px;border-radius:50%;background:var(--k);box-shadow:0 0 10px var(--k)}
.mp-harita .bl{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.mp-harita .lv{
  position:relative;aspect-ratio:1;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:16px;font-weight:800;
  cursor:pointer;transition:transform .15s,background .15s;
}
.mp-harita .lv:not(.kilit):active{transform:scale(.92)}
.mp-harita .lv:not(.kilit){border-color:color-mix(in srgb,var(--k) 55%,transparent)}
.mp-harita .lv.kilit{opacity:.4;font-size:13px;cursor:not-allowed}
.mp-harita .lv em{
  position:absolute;right:4px;top:2px;font-style:normal;font-size:9px;color:#F5B544;
}
.mp-harita .alt{
  display:flex;align-items:center;justify-content:space-between;margin-top:26px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
}
.mp-harita .alt span{font-size:11.5px;color:#8B8B97;font-weight:700}
.mp-harita .alt button{
  width:38px;height:38px;border-radius:11px;border:none;background:rgba(255,255,255,.08);
  color:#fff;font-size:15px;cursor:pointer;
}

@media(min-height:760px){
  .mp-b.zip{width:96px;height:96px}
  .mp-joy{width:116px;height:116px}
}

/* Memphis: dünya haritasında çıkış düğmesi (tam ekran oyunda üst çubuk gizli) */
.mp-harita .mp-cik{
  position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:14px;
  width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);color:#fff;font-size:15px;cursor:pointer;z-index:2;
}
.mp-perde .b4{background:rgba(226,58,58,.16);color:#FF9A9A;border:1px solid rgba(226,58,58,.3)}

/* SVG oyun logoları — emoji yerine */
.vge-oyun .em.svg{padding:6px;background:color-mix(in srgb, var(--k) 13%, #fff)}
.vge-oyun .em.svg svg{width:100%;height:100%;display:block}

/* Kitap kapak fotoğrafı */
.vge-kitap .kap.foto{overflow:hidden;background:#111;border-left-color:rgba(255,255,255,.3)}
.vge-kitap .kap.foto img{width:100%;height:100%;object-fit:cover;display:block}

/* Okuyucu başlığında kapak */
.ok-kapak{
  flex:none;display:flex;align-items:center;gap:12px;padding:14px 16px 4px;
}
.ok-kapak img{
  width:44px;height:62px;border-radius:4px 8px 8px 4px;object-fit:cover;
  box-shadow:0 6px 18px rgba(0,0,0,.5);border-left:3px solid rgba(255,255,255,.25);
}
.ok-kapak div{min-width:0}
.ok-kapak b{display:block;font-size:14px;font-weight:800;color:#E8E2D6}
.ok-kapak span{display:block;font-size:11.5px;color:#8B8B97;font-weight:600;margin-top:2px}