.shell{position: relative; z-index: 1;}

:root{
  --bg:#fbf7ef;
  --card:#ffffffcc;
  --ink:#121517;
  --muted:#5b646b;
  --gold:#c6a247;
  --gold2:#b8922f;
  --green:#1f5b4a;
  --brown:#6b4a2d;
  --line:#e9ddc6;
  --shadow: 0 18px 55px rgba(36, 28, 18, .12);
  --shadow2: 0 10px 30px rgba(36, 28, 18, .10);
  --r: 22px;
  --r2: 16px;
  --max: 1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg);}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 600px at 15% 20%, rgba(198,162,71,.18), transparent 60%),
    radial-gradient(1000px 520px at 85% 30%, rgba(31,91,74,.14), transparent 60%),
    radial-gradient(900px 520px at 55% 85%, rgba(107,74,45,.12), transparent 65%),
    var(--bg);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}

.container{max-width:var(--max);margin:0 auto;padding:0 18px}

.topbar{
  border-bottom:1px solid rgba(233,221,198,.7);
  background:rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
}
.topbar .row{
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:10px 0;
  color:var(--muted);
  font-weight:600;
}
.pills{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dot{
  width:14px;height:14px;border-radius:99px;background:rgba(198,162,71,.65);
  box-shadow: 0 0 0 6px rgba(198,162,71,.12);
}
.lang{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(233,221,198,.9);
  border-radius:999px;
  padding:6px 10px;
}
.lang .btn{
  border:0;background:transparent;padding:6px 10px;border-radius:999px;
  font-weight:800;color:var(--muted);cursor:pointer;
}
.lang .btn.active{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:white;
}

.header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,247,239,.72);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(233,221,198,.65);
}
.header .row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;
}
.brand{
  display:flex;align-items:center;gap:12px;min-width:220px;
}
.brand img{
  width:64px;height:64px;border-radius:18px;object-fit:cover;
  box-shadow: 0 10px 22px rgba(31,91,74,.12);
  border:1px solid rgba(233,221,198,.9);
}
.brand .name{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing:.16em;
  font-weight:900;
}
.brand .tag{color:var(--muted);font-weight:700;margin-top:2px}

.nav{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(233,221,198,.9);
  border-radius:999px;
  padding:8px 10px;
  box-shadow: 0 10px 28px rgba(36, 28, 18, .08);
}
.nav a{
  padding:10px 12px;border-radius:999px;
  color:var(--muted);font-weight:800;
  white-space:nowrap;
}
.nav a.active{
  background:rgba(198,162,71,.18);
  color:var(--brown);
}
.nav a:hover{
  background:rgba(31,91,74,.08);
  color:var(--green);
}

.actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.btn{
  border:1px solid rgba(233,221,198,.95);
  background:rgba(255,255,255,.7);
  padding:12px 16px;border-radius:999px;
  font-weight:900;color:var(--ink);
  box-shadow: var(--shadow2);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform: translateY(-1px)}
.btn.gold{
  border:0;
  color:white;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow: 0 18px 45px rgba(198,162,71,.25);
}
.btn.gold:hover{
  box-shadow: 0 22px 55px rgba(198,162,71,.32);
}
.btn.ghost{
  background:rgba(255,255,255,.5);
}

/* Mobile menu */
.hamburger{
  display:none;
  width:46px;height:46px;border-radius:14px;
  border:1px solid rgba(233,221,198,.95);
  background:rgba(255,255,255,.7);
  align-items:center;justify-content:center;
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.hamburger span{
  width:20px;height:2px;background:var(--muted);display:block;position:relative;
}
.hamburger span:before,.hamburger span:after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--muted);
}
.hamburger span:before{top:-6px}
.hamburger span:after{top:6px}

@media (max-width: 980px){
  .brand{min-width:auto}
  .nav{display:none}
  .hamburger{display:flex}
}
.mobilePanel{
  display:none;
  padding:0 0 16px;
}
.mobilePanel.open{display:block}
.mobilePanel .navMobile{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:12px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(233,221,198,.9);
  border-radius:var(--r);
}
.navMobile a{
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(233,221,198,.8);
  background:rgba(255,255,255,.65);
  font-weight:900;color:var(--muted);
}
.navMobile a.active{
  background:rgba(198,162,71,.18);
  color:var(--brown);
}

/* Sections */
.section{padding:44px 0}

/* Performance: render offscreen sections lazily (does not affect hero) */
@supports (content-visibility: auto){
  .section{content-visibility:auto; contain-intrinsic-size: 900px;}
}

.card{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(233,221,198,.9);
  border-radius:var(--r);
  box-shadow: var(--shadow);
}
.hero{
  padding:34px 0 44px;
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap:18px;
  align-items:stretch;
}
@media (max-width: 980px){
  .heroGrid{grid-template-columns:1fr}
}
.heroCard{padding:28px}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(233,221,198,.95);
  background:rgba(255,255,255,.7);
  color:var(--green);
  font-weight:900;
}
.h1{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight:900;
  font-size: clamp(40px, 5vw, 64px);
  line-height:1.02;
  margin:16px 0 12px;
}
.p{
  color:var(--muted);
  font-size:18px;
  line-height:1.6;
  margin:0 0 18px;
}
.kpis{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:16px
}
.kpi{
  padding:14px 16px;border-radius:18px;
  border:1px solid rgba(233,221,198,.95);
  background:rgba(255,255,255,.75);
  min-width: 170px;
  box-shadow: 0 12px 30px rgba(36, 28, 18, .08);
}
.kpi .big{font-size:22px;font-weight:1000;color:var(--brown)}
.kpi .small{color:var(--muted);font-weight:800;margin-top:4px}

.heroMedia{
  overflow:hidden;
  position:relative;
  border-radius:var(--r);
  border:1px solid rgba(233,221,198,.9);
  box-shadow: var(--shadow);
  background:rgba(255,255,255,.6);
}
.slider{
  height:100%;
  min-height: 430px;
  position:relative;
}
.slide{
  position:absolute; inset:0;
  opacity:0;
  transform: scale(1.02);
  transition: opacity .7s ease, transform 1.1s ease;
}
.slide.active{
  opacity:1;
  transform: scale(1.0);
}
.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.sliderOverlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(251,247,239,.65), rgba(251,247,239,0) 50%),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.05));
  pointer-events:none;
}
.sliderHint{
  position:absolute; left:18px; bottom:18px;
  padding:12px 14px;border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(233,221,198,.9);
  font-weight:900;color:var(--brown);
  box-shadow: var(--shadow2);
}

/* grids */
.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
@media (max-width: 980px){
  .grid3{grid-template-columns:1fr}
}
.tile{
  padding:18px;
  border-radius:var(--r);
  border:1px solid rgba(233,221,198,.9);
  background:rgba(255,255,255,.72);
  box-shadow: var(--shadow2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(36, 28, 18, .12);
}
.tile h3{margin:10px 0 8px;font-size:20px}
.tile p{margin:0;color:var(--muted);line-height:1.6;font-weight:650}
.tile .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;border-radius:999px;
  background:rgba(198,162,71,.14);
  border:1px solid rgba(233,221,198,.9);
  color:var(--brown);
  font-weight:1000;
}
.icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(31,91,74,.10);
  border:1px solid rgba(233,221,198,.9);
  color:var(--green);
  font-weight:1000;
}

/* compare section (home only) */
.compareWrap{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:18px;
  align-items:center;
}
@media (max-width: 980px){.compareWrap{grid-template-columns:1fr}}
.compareImg{
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid rgba(233,221,198,.9);
  box-shadow: var(--shadow);
  background:rgba(255,255,255,.65);
}
.compareImg img{width:100%;height:auto}
.h2{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3.4vw, 44px);
  margin:10px 0 10px;
  line-height:1.1;
}
.sub{color:var(--muted);font-size:18px;line-height:1.6}

/* gallery */
.galleryGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){.galleryGrid{grid-template-columns:1fr}}
.gItem{
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid rgba(233,221,198,.9);
  background:rgba(255,255,255,.65);
  box-shadow: var(--shadow2);
  cursor:pointer;
  position:relative;
}
.gItem img{width:100%;height:260px;object-fit:cover}

.gItem{display:block;text-decoration:none;color:inherit;}
.gItem:focus-visible{outline:3px solid rgba(180,140,60,.35);outline-offset:4px;}
.gItem:after{display:none;}

/* videos */
.videoGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){.videoGrid{grid-template-columns:1fr}}
.vCard{
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid rgba(233,221,198,.9);
  background:rgba(255,255,255,.72);
  box-shadow: var(--shadow2);
}
.vCard .meta{padding:14px 16px}
.vCard .meta .t{font-weight:1000}
.vCard .meta .d{color:var(--muted);margin-top:6px;line-height:1.5;font-weight:650}
.vPreview{
  position:relative;
  background:rgba(0,0,0,.04);
  height:260px;
}
.vPreview .vThumb{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  z-index:0;
  transform:scale(1.02);
  transition: opacity .22s ease, transform .55s ease;
}
.vPreview .vThumb.ready{filter:saturate(1.03) contrast(1.02)}
.vPreview video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:relative;
  z-index:1;
  opacity:0;
  transition: opacity .22s ease;
}
.vPreview.previewing video{opacity:1}
.vPreview.previewing .vThumb{opacity:0;transform:scale(1.04)}
.playBtn{
  z-index:3;
  position:absolute; left:16px; bottom:16px;
  border:0;
  padding:12px 14px;border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#fff;font-weight:1000;
  cursor:pointer;
  box-shadow: 0 16px 40px rgba(198,162,71,.25);
}
.playBtn:hover{transform: translateY(-1px)}

/* modal */
.modal{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(10,10,10,.62);
  z-index:9999;
  padding:18px;
}
.modal.open{display:flex}
.modalInner{
  width:min(980px, 96vw);
  background:rgba(255,255,255,.92);
  border-radius:var(--r);
  border:1px solid rgba(233,221,198,.9);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  overflow:hidden;
}
.modalBar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  background:rgba(251,247,239,.9);
  border-bottom:1px solid rgba(233,221,198,.9);
}
.modalBar .title{font-weight:1000;color:var(--brown)}
.modalClose{
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(233,221,198,.95);
  background:rgba(255,255,255,.8);
  cursor:pointer;
  font-weight:1000;
}
.modalBody{padding:14px}
.modalBody img{width:100%;height:auto;border-radius:18px}
.modalBody video{width:100%;height:auto;border-radius:18px;max-height:70vh}

/* floating quick buttons */
.floating{
  position:fixed; right:18px; bottom:18px;
  display:flex;flex-direction:column;gap:10px;
  z-index:90;
}
.fab{
  width:56px;height:56px;border-radius:18px;
  display:grid;place-items:center;
  border:1px solid rgba(233,221,198,.95);
  background:rgba(255,255,255,.78);
  box-shadow: var(--shadow2);
  font-weight:1000;color:var(--green);
}
.fab:hover{transform: translateY(-1px)}
.fab small{font-size:13px}

/* footer */
.footer{
  padding:32px 0 44px;
  color:var(--muted);
}
.footer .row{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid rgba(233,221,198,.8);
  padding-top:18px;
  font-weight:700;
}

/* subtle page fade */
.pageFade{
  opacity:1;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease;
  position: relative;
  z-index: 2;
}
.pageFade.out{
  opacity:0;
  transform: translateY(6px);
}


/* ===== Final World-Class Fixes & Enhancements (Mobile + RTL + FX) ===== */

/* Ensure any full-screen FX canvas never affects layout */
#fxCanvas{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: block !important;
  /* Always behind all site content */
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0.92 !important;
  transform: translateZ(0);
  will-change: transform, opacity;
  /* a little more magical */
  mix-blend-mode: normal;
  filter: blur(0.2px) saturate(1.25) contrast(1.03);
}

/* Keep content above FX */
.topbar, .header, main, footer{
  position: relative;
  z-index: 2;
}

/* Ensure floating buttons + modal always stay above content */
.floating{
  position: fixed;
  z-index: 90;
}
#modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* Better small-phone header behavior */
.header .row{
  flex-wrap: wrap;
}

/* Prevent Explore/brand overlap on many Android widths */
@media (max-width: 720px){
  .brand .tag{display:none;}
  .header .row{
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "brand actions burger";
    gap: 10px;
    align-items: center;
  }
  .brand{grid-area: brand; min-width: 0;}
  .actions{grid-area: actions; width: auto; justify-content: flex-end;}
  .hamburger{grid-area: burger; justify-self: end;}
  .brand .name{font-size: 18px; letter-spacing: .12em;}
  .actions .btn{padding: 10px 14px; font-size: 14px;}
}

@media (max-width: 420px){
  .actions .cta{display:none;}
  .actions{justify-content:flex-end;}
}
@media (max-width: 520px){
  .topbar .pills span:nth-child(2),
  .topbar .pills span:nth-child(3),
  .topbar .pills span:nth-child(4),
  .topbar .pills span:nth-child(5){
    display:none;
  }
  .topbar .pills{gap:8px}
  .brand img{width:54px;height:54px;border-radius:16px}
  .brand .tag{display:none}
  .header .row{gap:8px}
  .actions{width:auto; justify-content:flex-end}
  .actions .btn{padding:9px 12px; font-size:13px}
  .heroCard{padding:20px}
  .kpi{min-width:140px}
  .galleryGrid .gItem img{height:220px}
}

/* Fix buttons wrapping and avoid overflow */
.actions{flex-wrap: wrap}
.btn{max-width:100%}

/* RTL support */
html[dir="rtl"] body{
  direction: rtl;
}
html[dir="rtl"] .brand{
  flex-direction: row-reverse;
}
html[dir="rtl"] .brand .name{letter-spacing:.08em}
html[dir="rtl"] .nav, html[dir="rtl"] .lang{
  direction: rtl;
}
html[dir="rtl"] .heroGrid, html[dir="rtl"] .compareWrap{
  direction: rtl;
}
html[dir="rtl"] .sliderHint{left:auto; right:18px}
html[dir="rtl"] .nav a{font-weight:900}
html[dir="rtl"] .tile, html[dir="rtl"] .card{text-align:right}

/* Arabic-friendly font stack (loads from Google Fonts, falls back safely) */
:root{
  --font-en: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  --font-ar: "Cairo", "Noto Kufi Arabic", "Tajawal", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}
html[lang="ar"] body{font-family: var(--font-ar)}
html[lang="en"] body{font-family: var(--font-en)}

/* Subtle 3D depth helpers */
.tilt{
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt .tilt-pop{
  transform: translateZ(18px);
}
@media (prefers-reduced-motion: reduce){
  .tilt{transform:none !important}
  .tile:hover{transform:none}
}

/* Smooth reveal */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .8s ease;
}
.reveal.on{
  opacity:1;
  transform:none;
}


/* Prevent background scroll when modal is open */
.modalOpen, .modalOpen body{ overflow:hidden; }

/* Mobile header fix: avoid NAZME + Explore overlap */
@media (max-width: 720px){
  .actions .ghost{display:none !important;}
}


/* ===== Mobile parity: keep the same "hover" feel on touch devices ===== */
@media (hover: none){
  /* mimic lift/shadow on tap */
  .tile:active{
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(36, 28, 18, .12);
  }
  .btn:active, .fab:active, .playBtn:active, .navMobile a:active{
    transform: translateY(-1px) scale(0.98);
  }
  .nav a:active{
    background:rgba(31,91,74,.08);
    color:var(--green);
  }
  .gItem:active{transform: scale(0.99)}
  a, button{ -webkit-tap-highlight-color: rgba(0,0,0,0); touch-action: manipulation; }
}

/* subtle auto-float for tilt cards on mobile (removed during touch tilt) */
@media (hover: none) and (prefers-reduced-motion: no-preference){
  @keyframes nazmeFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-2px); }
  }
  .autoFloat{ animation: nazmeFloat 6.5s ease-in-out infinite; }
}

/* ===== NAZME Splash Logo Intro (2s) ===== */
html.no-splash #nazmeSplash{display:none !important;}

html.splash-active .topbar,
html.splash-active .header,
html.splash-active #page,
html.splash-active footer{
  visibility:hidden;
}
html.splash-active #fxCanvas{opacity:0;}
#nazmeSplash{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  background: radial-gradient(circle at 35% 30%, rgba(198,162,71,.34), rgba(251,247,239,.92) 45%, rgba(251,247,239,.98) 100%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: nazmeSplashOverlay 2s ease forwards;
}
#nazmeSplash .nazmeSplashInner{
  display:flex; flex-direction:column; align-items:center;
  gap:14px;
  padding:18px 22px;
  border-radius:26px;
  background: rgba(255,255,255,.70);
  border:1px solid rgba(233,221,198,.92);
  box-shadow: 0 26px 90px rgba(36,28,18,.22);
  transform-origin:center;
  animation: nazmeSplashLogo 2s cubic-bezier(.2,.9,.2,1) forwards;
}
#nazmeSplash img{
  width:124px; height:124px;
  border-radius:28px;
  object-fit:cover;
  border:1px solid rgba(233,221,198,.95);
  box-shadow: 0 18px 60px rgba(31,91,74,.18);
}
#nazmeSplash .t1{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 900;
  letter-spacing: .22em;
  font-size: 22px;
  line-height: 1.1;
}
#nazmeSplash .t2{
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  text-align:center;
  max-width: 320px;
}
@keyframes nazmeSplashOverlay{
  0%{opacity:1; visibility:visible;}
  88%{opacity:1;}
  100%{opacity:0; visibility:hidden;}
}
@keyframes nazmeSplashLogo{
  0%{opacity:0; transform: translateY(14px) scale(.82); filter: blur(2px);}
  18%{opacity:1; transform: translateY(0) scale(1.05); filter: blur(0);}
  72%{opacity:1; transform: translateY(0) scale(1.05);}
  100%{opacity:0; transform: translateY(-10px) scale(1.18);}
}
@media (max-width: 720px){
  #nazmeSplash .nazmeSplashInner{border-radius:24px;}
  #nazmeSplash img{width:116px;height:116px;border-radius:26px;}
  #nazmeSplash .t1{font-size:20px;}
}
@media (prefers-reduced-motion: reduce){
  #nazmeSplash{animation-duration:0.01ms !important;}
  #nazmeSplash .nazmeSplashInner{animation-duration:0.01ms !important;}
}

/* Splash mobile tweak */
@media (max-width: 980px){
  #nazmeSplash img{width:140px;height:140px;}
}


/* ===== Bubble Pop HUD + Bonus Toast (classy, non-intrusive) ===== */
#popHud{
  position: fixed;
  bottom: 14px;
  left: 14px;
  right: auto;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 247, 220, 0.20);
  border: 1px solid rgba(198, 162, 71, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(58, 41, 12, 0.95);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2px;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
  user-select: none;
}
#popHud.show{
  opacity: 1;
  transform: translateY(0) scale(1);
}
#popHud.rtl{
  left: 14px;
  right: auto;
}
#popHud .popHudIcon{ font-size: 12px; line-height: 1; }
#popHud .popHudGoal{ opacity: 0.65; font-weight: 600; }

#popHud.bonus{
  animation: popHudPulse 900ms ease;
}
@keyframes popHudPulse{
  0%{ transform: translateY(0) scale(1); }
  45%{ transform: translateY(-2px) scale(1.06); }
  100%{ transform: translateY(0) scale(1); }
}

#popToast{
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 9999;
  transform: translate(-50%, -10px);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 244, 200, 0.22);
  border: 1px solid rgba(198, 162, 71, 0.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(60, 43, 12, 0.95);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  user-select: none;
  text-align: center;
  max-width: calc(100vw - 24px);
}
#popToast.show{
  opacity: 1;
  transform: translate(-50%, 0);
}

#popToast.show.bonus{
  animation: toastBonusPop 980ms cubic-bezier(.16,1,.3,1);
}
@keyframes toastBonusPop{
  0%{ transform: translate(-50%, -8px) scale(0.94); opacity: 0.0; }
  40%{ transform: translate(-50%, 0) scale(1.12); opacity: 1.0; }
  100%{ transform: translate(-50%, 0) scale(1.00); opacity: 1.0; }
}

#popToast.bonus{
  background: rgba(255, 236, 170, 0.32);
  border-color: rgba(198, 162, 71, 0.28);
  box-shadow: 0 14px 50px rgba(255, 214, 140, 0.18);
}



/* Full-page bonus flashlight overlay (above content, never blocks interaction) */
#bonusCanvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  will-change: opacity;
  transform: translateZ(0);
}


/* ===== Bubble Pop Game: Daily limit end message ===== */
#popEnd{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.06), rgba(255,255,255,0.00) 55%);
  transition: opacity 280ms ease;
}
#popEnd.show{ opacity: 1; pointer-events: auto; }

#popEnd .popEndCard{
  max-width: min(520px, calc(100vw - 28px));
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: rgba(255, 247, 220, 0.22);
  border: 1px solid rgba(198, 162, 71, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(36, 28, 18, .18);
  transform: translateY(10px) scale(.96);
  opacity: 0;
  pointer-events: auto;
}
#popEnd.show .popEndCard{
  animation: popEndIn 650ms cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes popEndIn{
  0%{ transform: translateY(14px) scale(.94); opacity: 0; }
  55%{ transform: translateY(0) scale(1.02); opacity: 1; }
  100%{ transform: translateY(0) scale(1); opacity: 1; }
}
#popEnd .popEndTitle{
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(58, 41, 12, 0.98);
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
}
#popEnd .popEndSub{
  margin-top: 8px;
  font-weight: 650;
  color: rgba(58, 41, 12, 0.78);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}

#popEnd .popEndActions{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

#popEnd .popEndBtn{
  appearance: none;
  border: 1px solid rgba(198, 162, 71, 0.32);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .2px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: transform 120ms ease, filter 120ms ease, background 160ms ease;
}

#popEnd .popEndBtn.primary{
  background: linear-gradient(180deg, rgba(255, 236, 186, 0.75), rgba(255, 225, 150, 0.38));
  color: rgba(58, 41, 12, 0.98);
  box-shadow: 0 10px 22px rgba(36, 28, 18, .12);
}

#popEnd .popEndBtn.ghost{
  background: rgba(255, 255, 255, 0.12);
  color: rgba(58, 41, 12, 0.88);
}

#popEnd .popEndBtn:active{ transform: translateY(1px) scale(0.99); }

@media (max-width: 420px){
  #popEnd .popEndTitle{ font-size: 17px; }
  #popEnd .popEndSub{ font-size: 12.5px; }
}


/* Virus overlay (above content, does not block clicks) */
#virusCanvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 80; /* above content */
  pointer-events: none;
}



/* ===== v19.2 Mobile: keep WA/@ buttons at the very end + make score tiny in corner ===== */
@media (max-width: 720px){
  /* Keep floating action buttons at the very bottom-right (no extra height from score) */
  .floating{
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .fab{
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  /* Score is low-priority: tiny pill in bottom-left corner */
  #popHud{
    position: fixed !important;
    left: calc(10px + env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    align-self: auto !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
    gap: 5px !important;
    z-index: 60 !important; /* below the WA/@ buttons */
    opacity: 0.92;
    transform: translateY(0) scale(0.92) !important;
    background: rgba(255, 247, 220, 0.18) !important;
  }
  #popHud .popHudIcon{ font-size: 12px !important; }
  #popHud .popHudGoal{ display:none !important; } /* keep it minimal */
}

/* ===== NAZME Shop (Order Page) ===== */
.shopGrid{align-items:stretch;}
.shopTile{display:flex;flex-direction:column;gap:8px;}
.shopPrice{font-weight:800;font-size:22px;margin-top:6px;letter-spacing:.2px;}
.shopControls{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap;}
.shopQtyLabel{font-size:12px;opacity:.8;}
.shopQty{width:86px;max-width:40vw;border-radius:12px;border:1px solid rgba(0,0,0,.12);padding:10px 12px;background:rgba(255,255,255,.8);}
.shopAddBtn.added{filter:saturate(1.2);}
.cartTile{display:flex;flex-direction:column;gap:6px;}
.cartBadge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;background:rgba(0,0,0,.08);font-size:12px;margin-inline-start:8px;}
.cartLines{display:flex;flex-direction:column;gap:8px;}
.cartLine{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.55);}
.cartLineName{font-weight:700;}
.cartLineQty{opacity:.75;font-weight:600;margin-inline-start:6px;}
.cartLinePrice{font-weight:800;white-space:nowrap;}
.cartTotalRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px;border-top:1px solid rgba(0,0,0,.08);}
.cartTotal{font-weight:900;font-size:18px;}
.cartCheckout{width:100%;}
.cartTrust{opacity:.8;}

/* RTL tidy */
[dir="rtl"] .shopControls{justify-content:flex-start;}



/* ===== Mobile keyboard stability: prevent black flash when focusing inputs ===== */
@media (max-width: 760px){
  /* Android Chrome sometimes shows black repaint with fixed filtered canvas during keyboard resize */
  #fxCanvas{
    filter: none !important;
    transform: translateZ(0);
  }
}


/* ===== Shop page keyboard fix: avoid Android black-screen repaint ===== */
html.kb-open #fxCanvas,
html.kb-open #virusCanvas,
html.kb-open #bonusCanvas{
  visibility:hidden !important;
  opacity:0 !important;
}

/* On mobile, GPU filters on fixed canvases can cause black flashes when the keyboard opens */
@media (max-width: 900px){
  #fxCanvas{
    filter: none !important;
  }
}